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é
Bước 3: Các bạn ấn Lưu và tận hưởng thành quả ^^
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'>
</div>
<div class='user'>
<img class='img-circle' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEjvjtAA84Q4F2KHDKoyUgPOd9ke6j7mQ7NBpbRg8XpN_hj10s8I4nco3wcnTz23OyMnvikLsWX5NKycOeIqAvXcryDrygRm1k-8VV4tRW4Ptg4Pyx0mDCN3unTmwMKR9YEuEw70tK23tP/s320/nguyengia1988.jpg'/>
</div>
<div class='content'>
<div class='main'>
<h3 class='name'>Thank For Visit My Blog!</h3>
<p class='profession'>@nguyengia1988</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'>Nguyễn Dương Hoàng Gia</h4>
<h5 class='text-center'><a href='https://www.facebook.com/daicagiabl'>@nguyengia1988</a></h5>
<h4 class='text-center'>
<br/>Who we are?</h4>
<h5><a href='https://nguyengia1988.blogspot.com/'><i class='fa fa-building-o fa-fw text-muted'></i> nguyengia1988.blogspot.com</a></h5>
<h5><i class='fa fa-map-marker fa-fw text-muted'></i> Viet Nam</h5>
<h5><a href='mailto:nguyengia2212.land@gmail.com'><i class='fa fa-envelope-o fa-fw text-muted'></i> nguyengia2212.land@gmail.com</a></h5>
</div>
</div>
<div class='footer'>
<div class='social-links text-center'>
<a class='facebook' href='https://www.facebook.com/daicagiabl'><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/110048594766565676376'><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ả ^^
