Hướng Dẫn Thêm Phần Thông Tin Cực Chất Trong Blogger

Theo yêu cầu của một bạn nào đó gửi qua mail của mình,hôm nay thứ 7 là ngày nghỉ nên mình rảnh tay viết cái top này.

CÁCH THỰC HIỆN

Bước 1: Các bạn truy cập blogger chọn Bố Cục ->Thêm Tiện Ích->Chọn HTML/Java Script

Bước 2: Dán code bên dưới này vào Blog của các bạn nhé

<style>

/* entire container, keeps perspective */

.card-container {

 -webkit-perspective: 800px;

   -moz-perspective: 800px;

     -o-perspective: 800px;

        perspective: 800px;

}

/* flip the pane when hovered */

.card-container:hover .card, .card-container.hover .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 9px 0 rgba(0, 0, 0, 0.18);

}

/* 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;

}

/*        Style       */

.card{

    background: none repeat scroll 0 0 #FFFFFF;

    border-radius: 4px;

    color: #444444;

}

.card-container, .front, .back {

width: 100%;

height: 420px;

border-radius: 4px;

}

.card .cover{

    height: 105px;

}

.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;

    width: 100%;

    border-radius: 100%;

}

.card .content{

    background-color: rgba(0, 0, 0, 0);

    box-shadow: none;

    padding: 10px 20px 20px;

}

.card .content .main {

    min-height: 160px;

}

.card .back .content .main {

    height: 215px;

    text-align: center;

}

.card .name {

    font-size: 34px;

    font-weight: 300;

    line-height: 28px;

    margin: 10px 0 12px;

    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: 10px 0 0;

    margin: 13px;

    text-align: center;

}

.card .footer .social-links{

    font-size: 18px;

}

.card .footer .social-links a{

    margin: 0 7px;

}

.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;

}

/*      Just for presentation        */

.title{

    color: #506A85;

    text-align: center;

    font-weight: 300;

    font-size: 44px;

    margin-bottom: 90px;

    line-height: 90%;

}

.title small{

    font-size: 17px;

    color: #999;

    text-transform: uppercase;

    margin: 0;

}

.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;

} 

.front-motto{

    margin-top: 40px;

}

a{

    color: #555;

}

.title small{

    color: #666;

}

/*       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:hover .back{

        z-index: 5;

        visibility: visible;

    }

}

</style>

<div class='card-container'>

<div class='card'>

<div class='front'>

<div class='cover'>

<img src='images/dribbble-rotating_card_thumb.png'/>

</div>

<div class='user'>

<img class='img-circle' src='http://sv1.upsieutoc.com/2017/10/13/22155088_1927065407308839_1186379486_n.jpg'/>

</div>

<div class='content'>

<div class='main'>

<h3 class='name'>Thank For Visit My Blog!</h3>

<p class='profession'>@starquoc</p>

<p class='front-motto text-center'>Làm những gì mình thích .Nếu đó là điều khiến bạn thoải mái...</p>

</div>

<div class='footer'>

<div class='rating'>

<i class='fa fa-star'></i>

<i class='fa fa-star'></i>

<i class='fa fa-star'></i>

<i class='fa fa-star'></i>

<i class='fa fa-star'></i>

</div>

</div>

</div>

</div>

<!-- end front panel -->

<div class='back'>

<div class='header'>

<h5 class='motto'>"Quyết tâm theo đuổi niềm đam mê mình đã chọn"</h5>

</div>

<div class='content text-center'>

<div class='main'>

<h4 class='text-center'>Tạ Thiên Quốc</h4>

<h5 class='text-center'><a href='https://www.facebook.com/QuocRyo.Dz.Vn'>@starquoc</a></h5>

<h4 class='text-center'>

<br/>Who we are?</h4>

<h5><a href='http://www.quocstar.tk'><i class='fa fa-building-o fa-fw text-muted'></i> www.quocstar.tk</a></h5>

<h5><i class='fa fa-map-marker fa-fw text-muted'></i> Viet Nam</h5>

<h5><a href='mailto:Naruto95qt@gmail.com'><i class='fa fa-envelope-o fa-fw text-muted'></i> Naruto95qt@gmail.com</a></h5>

</div>

</div>

<div class='footer'>

<div class='social-links text-center'>

<a class='facebook' href='https://www.facebook.com/QuocRyo.Dz.Vn'><i class='fa fa-facebook fa-fw'></i></a>

<a class='twitter' href='#'><i class='fa fa-twitter fa-fw'></i></a>

<a class='google' href='https://plus.google.com/u/0/110772563636203804822'><i class='fa fa-google-plus fa-fw'></i></a>

</div></div></div></div></div>

Bước 3: Các bạn ấn Lưu và tận hưởng thành quả ^^