Hướng dẫn thêm khung giới thiệu siêu đẹp có hiệu ứng hover cho Blogger

Xin chào các bạn hôm nay mình sẽ viết về chủ đề thủ thuật ( nói luôn code này mình F12 bên Hồng Hải Blog về chứ không phải của mình ). Khung giới thiệu này có hiệu ứng hover rất đẹp và chất cũng như phối màu sang trọng với Blog có background trắng, demo xem ở blog mình nhé !

Để làm khung giới thiệu này bạn tiến hành vào Bố cục > Thêm tiện ích ( Add Widget ) > HTML / Javascript > Thêm code vào và lưu thôi.

<style> /* CSS Author */ .btn-info, .btn-info:hover, .btn-info:focus{ color: #FFF !important; background-color: #00bbff !important; border-color: #00bbff !important; } .btn-info{ opacity: .8; transition: all 0.1s; -webkit-transition: all 0.1s; } .btn-info:hover, .btn-info:focus{ opacity: 1; } .btn:hover, .btn:focus, .btn:active{ outline: 0 !important; } /* entire container, keeps perspective */ .card-container { -webkit-perspective: 800px; -moz-perspective: 800px; -o-perspective: 800px; perspective: 800px; } /* flip the pane when hovered */ .card-container:not(.manual-flip):hover .card, .card-container.hover.manual-flip .card{ -webkit-transform: rotateY( 180deg ); -moz-transform: rotateY( 180deg ); -o-transform: rotateY( 180deg ); transform: rotateY( 180deg ); } .card-container.static:hover .card, .card-container.static.hover .card { -webkit-transform: none; -moz-transform: none; -o-transform: none; transform: none; } /* flip speed goes here */ .card { -webkit-transition: -webkit-transform .5s; -moz-transition: -moz-transform .5s; -o-transition: -o-transform .5s; transition: transform .5s; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; position: relative; } /* hide back of pane during swap */ .front, .back { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; position: absolute; top: 0; left: 0; background-color: #FFF; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.14); } /* front pane, placed above back */ .front { z-index: 2; } /* back, initially hidden pane */ .back { -webkit-transform: rotateY( 180deg ); -moz-transform: rotateY( 180deg ); -o-transform: rotateY( 180deg ); transform: rotateY( 180deg ); z-index: 3; } .back .btn-simple{ position: absolute; left: 0; bottom: 4px; } /* Style */ .card{ background: none repeat scroll 0 0 #FFFFFF; border-radius: 4px; color: #444444; } .card h4{ text-align: center; margin-bottom: 10px; } .card-container, .front, .back { width: 100%; height: 420px; border-radius: 4px; } .card .cover{ overflow: hidden; border-radius: 4px 4px 0 0; height: 127px; } .card .cover img{ width: 100%; } .card .user{ border-radius: 50%; display: block; height: 120px; margin: -55px auto 0; width: 120px; } .card .user img{ background: none repeat scroll 0 0 #FFFFFF; border: 4px solid #FFFFFF; border-radius: 50%; width: 100%; height:100%; } .card .content{ background-color: rgba(0, 0, 0, 0); box-shadow: none; padding: 0px 20px; } .card .back .content .main { height: 215px; } .card .name { color: #444444; font-size: 22px; line-height: 28px; margin: 10px 0 0; text-align: center; text-transform: capitalize; } .card h5{ margin: 5px 0; font-weight: 400; line-height: 20px; } .card .profession{ color: #999999; text-align: center; margin-bottom: 20px; } .card .footer { border-top: 1px solid #EEEEEE; color: #999999; margin: 30px 0 0; padding: 6px 0 0; text-align: center; } .card .footer .social-links{ font-size: 18px; line-height: 45px; } .card .footer .social-links a{ margin: 0px 7px; } .card .footer .btn-simple{ margin-top: -6px; } .card .header { padding: 15px 20px; height: 90px; } .card .motto{ border-bottom: 1px solid #EEEEEE; color: #999999; font-size: 14px; font-weight: 400; padding-bottom: 10px; text-align: center; } .card .stats-container{ width: 100%; margin-top: 50px; } .card .stats{ display: block; float: left; width: 32.9%; text-align: center; } .card .stats:first-child{ border-right: 1px solid #EEEEEE; } .card .stats:last-child{ border-left: 1px solid #EEEEEE; } .card .stats h4{ font-weight: 600; margin-bottom: 5px; text-align: center; } .card .stats p{ color: #777777; } .fb{ background:#4267b2!important; } .tw{ background:#1DA1F2!important; } .gp{ background:#db4437!important; } .fa-fw{ font-size: 16px; text-align: center; opacity: .4; border-radius: 4px; height: 26px; width: 26px; line-height: 26px; color: #fff; } .fa-fw:hover{ opacity:10!important; } /* Just for presentation */ .tomit{ color: #506A85; text-align: center; font-weight: 300; font-size: 44px; margin-bottom: 90px; line-height: 90%; } .tomit small{ font-size: 17px; color: #999; text-transform: uppercase; margin: 0; } .space-30{ height: 30px; display: block; } .space-50{ height: 50px; display: block; } .space-200{ height: 200px; display: block; } .white-board{ background-color: #FFFFFF; min-height: 200px; padding: 60px 60px 20px; } .ct-heart{ color: #F74933; } pre.prettyprint{ background-color: #ffffff; border: 1px solid #999; margin-top: 20px; padding: 20px; text-align: left; } .atv, .str{ color: #05AE0E; } .tag, .pln, .kwd{ color: #3472F7; } .atn{ color: #2C93FF; } .pln{ color: #333; } .com{ color: #999; } .btn-simple{ opacity: .8; color: #666666; background-color: transparent; } .btn-simple:hover, .btn-simple:focus{ background-color: transparent; box-shadow: none; opacity: 1; } .btn-simple i{ font-size: 16px; } .navbar-brand-logo{ padding: 0; } .navbar-brand-logo .logo{ border: 1px solid #333333; border-radius: 50%; float: left; overflow: hidden; width: 60px; } .navbar .navbar-brand-logo .brand{ color: #FFFFFF; float: left; font-size: 18px; font-weight: 400; line-height: 20px; margin-left: 10px; margin-top: 10px; width: 60px; } .navbar-default .navbar-brand-logo .brand{ color: #555; } /* Fix bug for IE */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .front, .back{ -ms-backface-visibility: visible; backface-visibility: visible; } .back { visibility: hidden; -ms-transition: all 0.2s cubic-bezier(.92,.01,.83,.67); } .front{ z-index: 4; } .card-container:not(.manual-flip):hover .back, .card-container.manual-flip.hover .back{ z-index: 5; visibility: visible; } } </style> <div class="card-container"> <div class="card"> <div class="front"> <div class="cover"> <img src="https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-426396.png" draggable="false" oncontextmenu="return false" /> </div> <div class="user"> <img class="img-circle" src="https://graph.facebook.com/100010646251256/picture?type=large" draggable="false" oncontextmenu="return false" /> </div> <div class="content"> <div class="main"> <h3 class="name">Star Nhân IT</h3> <p class="profession">Designer &amp; Developer</p> <p class="text-center">"Sống thì đừng quan tâm người khác nói gì về mình, bởi chỉ có bạn mới biết mình là ai..."</p> </div> <div class="footer"> <i class="fa fa-mail-forward"></i> Hover vào đây </div> </div> </div> <!-- end front panel --> <div class="back"> <div class="header"> <h5 class="motto">"Muốn thành công. Chúng ta phải nổ lực không ngừng!"</h5> </div> <div class="content"> <div class="main"> <h4 class="text-center">Hữu Nhân</h4> <p class="text-center">Ngày hôm nay thất bại, hôm sau cũng thất bại. Nhưng chắc chắn ngày kia sẽ là ngày thành công...</p> <div class="stats-container"> <div class="stats"> <h4>119k</h4> <p> Followers </p> </div> <div class="stats"> <h4>3k</h4> <p> Following </p> </div> <div class="stats"> <h4>35</h4> <p> Projects </p> </div> </div> </div> </div> <div class="footer"> </div> <!-- end back panel --> </div> <!-- end card --> </div> <!-- end card-container --> <div class="clear"></div></div>

Nguồn Code : Hồng Hải Blog