Tạo widget thông tin cá nhân hover cho blogspot

Hôm nay Dũng sẽ chia sẻ đến các bạn widget hover tuyệt đẹp nền tảng blogspot

CÁC BƯỚC THỰC HIỆN

Bước 1: Các bạn vào phần Chủ đề ↦ Chỉnh sửa ↦ Tìm thẻ ]]></b:skin>rồi copy đoạn code sau và dán lên trên nó

/* 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: 450px;
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;
}
}

Bước 2: Sau khi lưu template, hãy vào phần Bố cục ↦ Thêm tiện ích ↦ chọn HTML/Javascript và dán đoạn code sau:

<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='https://i.imgur.com/lnkT2QK.jpg'/>
</div>
<div class='content'>
<div class='main'>
<h3 class='name'>Lê Hồng Nam</h3>
<p class='profession'>@namhacker</p>
<p class='front-motto text-center'>Ai cũng có lúc mệt mỏi - tôi cũng vậy , nhưng tôi sẽ vùng dậy và thực hiện tiếp tục công việc đang rang rở!</p>
</div>
<div class='footer'>
<div class='rating'>
<i class='fa fa-star' style='color:#F7CA18'></i>
<i class='fa fa-star' style='color:#F7CA18'></i>
<i class='fa fa-star' style='color:#F7CA18'></i>
<i class='fa fa-star' style='color:#F7CA18'></i>
<i class='fa fa-star' style='color:#F7CA18'></i>
</div>
</div>
</div>
</div>
<!-- end front panel -->
<div class='back'>
<div class='header'>
<h5 class='motto'><b>[...] Tôi là một con người tốt bụng và dễ  mến. <i class='fa fa-smile-o'></i></b></h5>
</div>
<div class='content text-center'>
<div class='main'>
<h4 class='text-center'>Star Nam IT</h4>
<h5 class='text-center'><a href='/'>@namhacker</a></h5>
<h4 class='text-center'>
Về tác giả?</h4>
<h5><a href='/'><i class='fa fa-building-o fa-fw text-muted'></i> www.namhacker.com</a></h5>
<h5><i class='fa fa-map-marker fa-fw text-muted'></i> Hãng Film Bình Minh</h5>
<h5><a href='mailto:nindeptrai2k3@gmail.com'><i class='fa fa-envelope-o fa-fw text-muted'></i> nindeptrai2k3@gmail.com</a></h5>
</div>
</div>
<div class='footer'>
<div class='social-links text-center'>
<a class='facebook' href='https://www.facebook.com/nampro.us'><i class='fa fa-facebook fa-fw'></i></a>
<a class='twitter' href='https://www.twitter.com/'><i class='fa fa-twitter fa-fw'></i></a>
<a class='instagram' href='https://www.instagram.com/'><i class='fa fa-instagram fa-fw'></i></a>
<a class='google' href='https://plus.google.com/'><i class='fa fa-google-plus fa-fw'></i></a>
<a class='youtube' href='https://www.blogger.com/'><i class='fa fa-rss fa-fw'></i></a>
</div></div></div></div></div>
<div class='clear'></div&gt

Bước 3: Thêm đoạn code sau phía sau thẻ <head> nếu đã có bạn có thể bỏ qua bước này!

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/><link href='//fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'/>

Chúc các bạn thành công !

Admin: Lê Quốc Dũng

Chào mừng bạn đã đến với Blog của tôi. Website chia sẻ Thủ Thuật - Phần Mềm - Ảnh Đẹp - PSD tổng hợp, ... được cập nhật liên tục. Mong được mọi người quan tâm.