ABC

Chào các bạn, hôm nay mình sẽ chia sẻ widget thông tin tác giả cực đẹp cho blog bạn nhé. Nội dung của widget gồm có : GIF, ảnh, hiệu ứng hover, văn bản. Không dài dòng nữa, bắt đầu thôi.

Các bạn có thể xem Demo ngay tại Blog mình nhé.

Đầu tiên các bạn chèn đoạn này trên thẻ

</b:skin>

.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{ height: 105px; overflow: hidden; border-radius: 4px 4px 0 0; } .card .cover img{ width: 100%; } .card .user{ border-radius: 50%; display: block; height: 120px; margin: -55px auto 0; overflow: hidden; width: 120px; } .card .user img{ background: none repeat scroll 0 0 #FFFFFF; /*border: 4px solid #FFFFFF;*/ width: 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; } /* 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; } }

Các bạn vào phần Bố Cục -> Tạo widget và dán code này vào :

<div class="widget-content"> <style> .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{ height: 105px; overflow: hidden; border-radius: 4px 4px 0 0; } .card .cover img{ width: 100%; } .card .user{ border-radius: 50%; display: block; height: 120px; margin: -55px auto 0; overflow: hidden; width: 120px; } .card .user img{ background: none repeat scroll 0 0 #FFFFFF; /*border: 4px solid #FFFFFF;*/ width: 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; } /* 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://cdn.dribbble.com/users/343382/screenshots/1735730/20-low-poly-polygonal-geometrical-triangular-textures-backgrounds.gif" draggable="false" oncontextmenu="return false" /> </div> <div class="user"> <img class="img-circle" src="http://sv1.upsieutoc.com/2018/10/18/minhit.jpg" draggable="false" oncontextmenu="return false" /> </div> <div class="content"> <div class="main"> <h3 class="name">NH Minh IT</h3> <p class="profession">Designer &amp; Developer</p> <p class="text-center">"Tôi có đam mê về lập trình, thích khám phá những điều thú vị trên mạng internet. Biết đôi chút về HTML, CSS, JS,..."</p> </div> <div class="footer"> <i class="fa fa-mail-forward"></i> Hover vào đây </div> <h2 style="text-align:center;text-transform:none;font-size:14px;font-weight:500"></h2> </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">NH Minh</h4> <p class="text-center">Hôm nay thất bại, ngày mai thất bại. Nhưng chắn chắn một điều ngày kia sẽ thành công! Tin tôi đi, đừng vội nản chí hãy nỗ lực có thể, thành công sẽ mỉm cười với bạn sớm thôi.</p> <div class="stats-container"> <div class="stats"> <h4>193k</h4> <p> Followers </p> </div> <div class="stats"> <h4>261k</h4> <p> Following </p> </div> <div class="stats"> <h4>115</h4> <p> Projects </p> </div> </div> </div> </div> <div class="footer"> <div class="social-links text-center"></div></div></div></div></div></div>

Các bạn tự chỉnh sửa thông tin lại cho phù hợp là xong
Chào tất cả các bạn