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ả ^^
Tác giả: Phú Cường Blogger

Tôi là Cường, sinh viên năm cuối ngành Điện tử - Viễn thông trường Đại học Bách Khoa Hà Nội. Say hello to you!

  • Không được backlink và nói tục. Hãy là một độc giả có ý thức.

    13 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

    Nhận bài viết mới