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

Hôm nay Nam 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ụcThê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 !
Nếu có đăng tải lại bài viết này vui lòng để lại nguồn Star Nam IT
Các bài viết cùng chủ đề:
5 comments:
  1. Lần đầu đc phá TRINH e nó :))

    ReplyDelete
  2. Tuyết rơi làm lag quá @@ k biết do máy a cùi hay sao k biết nữa @@

    ReplyDelete
  3. À cái quảng cáo a treo cho vui thôi tùm lum đủ quảng cáo từ : civi.vn. licklink.net, đến yllix.com ( yllix này treo lên nhờ lượng view từ blog là có tiền e nhé ) nên dùng còn mấy cái kia a đặt lên cho vui thôi

    ReplyDelete

Nhớ bấm Thông báo cho tôi bên trên để nhận thông báo qua Email khi Admin trả lời nhé.

Bạn Bè Của Tôi


Bình luận mới