Hoàng Linh Blog | Chia sẻ thủ thuật Blog, Facebook, Windows: Tạo khung thông tin Admin cực đẹp

Hôm này, mình xin share code: Khung thông tin Admin có hiệu ứng đẹp cho Blogspot nhé!!!

CÁCH THỰC HIỆN: 

Bước 1: Đăng nhập Blogger, chọn Thêm tiện ích, chọn HTML/Javascript
Bước 2: Copy & Paste đoạn CSS ở dưới và lưu lại.(Chỉnh sửa đoạn CSS cho phù hợp nhé)

<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="http://cdn2.game4v.com/2016/03/12742535_1004403996295525_3435819393362598304_n.jpg" draggable="false" oncontextmenu="return false" /> </div> <div class="user"> <img class="img-circle" src="LINK ẢNH CHÍNH" draggable="false" oncontextmenu="return false" /> </div> <div class="content"> <div class="main"> <h3 class="name">Vũ Việt Hoàng</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">@ Việt Hoàng IT</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">Huỳnh Ngọc Tính</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 class="social-links text-center"> <a href="https://www.facebook.com/hoang.1k9m" class="facebook"><i class="fa fa-facebook fa-fw"></i></a> <a href="https://plus.google.com/id" class="google"><i class="fa fa-google-plus fa-fw"></i></a> <a href="https://twitter.com/star_tinh_it2" class="twitter"><i class="fa fa-twitter fa-fw"></i></a> </div> </div> </div> <!-- end back panel --> </div> <!-- end card --> </div> <!-- end card-container --> </div>