© Copyright 2018 Star Quốc Blog
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ả ^^

- Trong quá trình viết bài chúng tôi sẽ có nhiều thiếu sót mong các bạn đóng góp để chúng tôi rút kinh nghiệm hơn !
- Mọi chi tiết xin liên hệ:
• Email: Naruto95qt@gmail.com
• Facebook: Fb.com/Ryoz.Designs

» Hướng Dẫn Chèn Liên Kết: <a href="Link" rel="nofollow">Tên</a>
» Tích vào ô "Thông báo cho tôi" để nhận thông báo phản hồi của Admin


Cùng tham gia bình luận bài viết này nhé!

14 nhận xét:

  1. Quốc thay lại phần liên kết giùm mình nha :)
    Từ Thái Tính IT thành Tính Getter Blog nhé hihi

    Trả lờiXóa
  2. template có mấy bài viết lỗi kìa Quốc

    Trả lờiXóa
    Trả lời
    1. phần này nè bác
      http://www.upsieutoc.com/image/T6VumC

      Xóa
    2. Ok bác chỉ là lỗi ảnh để mình thêm

      Xóa
  3. http://www.huyhoangit.com/2017/10/chao-cac-ban-hom-nay-minh-se-share-1.html giống blog bác nè

    Trả lờiXóa
    Trả lời
    1. Nhận xét này đã bị tác giả xóa.

      Xóa
    2. Công nhận giống thật

      Xóa
  4. Mai Khả Quốc ơi Lv nhớ tôi không :V

    Trả lờiXóa