Mát mẻ biểu tượng xã hội với Tooltip Hover Effect

Hôm nay tôi sẽ dạy cho bạn cách bạn có thể thêm thêm một biểu tượng xã hội vào blog blogger của bạn. Các biểu tượng xã hội có một chút khác nhau như nó đã tooltip di chuột có hiệu lực trong đó. Widget này được làm từ CSS tinh khiết mà không cần sử dụng bất kỳ hình ảnh hoặc JavaScript.

Khái niệm phía sau tiện ích này là khá đơn giản. Có bốn biểu tượng xã hội mà trong đó bạn có thể thêm URL mong muốn của riêng bạn. Trên lơ lửng trên các nút này có thể thấy tooltip xuất hiện với sự giúp đỡ của quá trình chuyển đổi và chuyển đổi CSS. Các biểu tượng này là thực sự bắt mắt và có một cái nhìn hấp dẫn. Một bản demo làm việc trực tiếp của tiện ích này có thể được nhìn thấy ngay bên dưới.

Một khi bạn đã nhìn thấy các bản demo để thêm tiện ích này vào blog của bạn chỉ cần làm theo các hướng dẫn dưới đây đưa ra.

Thêm HTML / CSS trong diện

Để thêm tiện ích này trước hết đi vào Blog Tiêu đề → Giao diện → Thêm Widget → HTML / JavaScript và dán mã vào ô bên dưới.

Cool Social Icons with Tooltip Hover Effect
<div class="container">
<ul class="action-bar clearfix">
<li>
<a href="http://twitter.com/lutip_com" class="like">
<span class="zocial-twitter"></span>
<span class="tooltip">Follow</span>
</a>
</li>
<li>
<a href="https://plus.google.com/+lutipdaomynhan" class="favourite">
<span class="zocial-googleplus"></span>
<span class="tooltip">Circle us</span>
</a>
</li>
<li>
<a href="https://www.facebook.com/vnnpay" class="comment">
<span class="zocial-facebook"></span>
<span class="tooltip">Like us</span>
</a>
</li>
<li>
<a href="http://lutip.blogspot.com/feeds/posts/default" class="share">
<span class="zocial-rss"></span>
<span class="tooltip">Subscribe</span>
</a>
</li>
</ul>
</div>
<style>
@charset "utf-8";
@import url(http://weloveiconfonts.com/api/?family=zocial);
/* zocial */
[class*="zocial-"]:before {
  font-family: 'zocial', sans-serif;
}
/* ---------- GENERAL ---------- */

a { text-decoration: none; }
ul {
list-style: none;
margin: 0;
padding: 0;
}
.clearfix { *zoom: 1; }
.clearfix:before, .clearfix:after {
content: "";
display: table; }
.clearfix:after { clear: both; }
.container {
display: block;
height: 64px;
position: relative;
width: 256px;
}
/* ---------- Action Bar ---------- */
.action-bar li {
float: left;
}
.action-bar a {
-webkit-box-shadow: inset 0 -2px rgba(0, 0, 0, .5);
box-shadow: inset 0 -2px rgba(0, 0, 0, .5);
color: #e7e7e7;
display: block;
font-size: 32px;
height: 64px;
line-height: 64px;
position: relative;
text-align: center;
-webkit-transition: background .3s;
-moz-transition: background .3s;
-ms-transition: background .3s;
-o-transition: background .3s;
transition: background .3s;
width: 64px;
}
.action-bar a:hover .tooltip {
margin-top: 16px;
opacity: 1;
}
.tooltip {
border-radius: 3px;
font-size: 14px;
height: 28px;
left: 50%;
line-height: 28px;
margin: 0 0 0 -50px;
opacity: 0;
position: absolute;
top: 100%;
-webkit-transition: margin-top .3s, opacity .3s;
-moz-transition: margin-top .3s, opacity .3s;
-ms-transition: margin-top .3s, opacity .3s;
-o-transition: margin-top .3s, opacity .3s;
transition: margin-top .3s, opacity .3s;
width: 100px;
}
.tooltip:before {
content: "";
height: 8px;
left: 50%;
margin: -4px 0 0 -4px;
position: absolute;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
width: 8px;
}
.like,
.like .tooltip,
.like .tooltip:before { background: #65B1F8; }
.like:hover { background: #65B1F8; }
.favourite,
.favourite .tooltip,
.favourite .tooltip:before { background: #c93037; }
.favourite:hover { background: #b02b32; }
.comment,
.comment .tooltip,
.comment .tooltip:before { background: #43438e; }
.comment:hover { background: #393978; }
.share,
.share .tooltip,
.share .tooltip:before { background: #FF8000; }
.share:hover { background: #FF8000; }
</style>

Thay đổi văn bản trong in đậm màu xanh với các URL của bạn mong muốn. Một khi bạn đã thêm mã và thực hiện các thay đổi lưu các widget tương ứng và cuối cùng mẫu. Bạn đang làm bây giờ. Bây giờ bạn và truy cập của bạn có thể thấy những tuyệt vời và mát biểu tượng xã hội với Tooltip Hover Effect trong blog của blogger của bạn.

Các tin khác