Metro phong cách biểu tượng xã hội cho Blogger
Hôm nay tôi sẽ chỉ cho làm thế nào bạn có thể thêm Metro phong cách biểu tượng xã hội với Hover Effect vào blog blogger của bạn. Tôi đã thấy tiện ích này nhiều lần trong blog WordPress khác nhau vì vậy tôi nghĩ chuyển đổi nó cho các blogger. Widget này có làm việc rất đơn giản. Trên di chuột độ mờ đục của những thay đổi biểu tượng và làm cho là mờ hơn. Điều này phụ tùng có thể giúp blog của bạn có được phương tiện truyền thông xã hội tối ưu hóa hơn khán giả. Cái nhìn thanh lịch của tiện ích này có thể làm cho nhiều người nhấp vào nó.
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 làm theo các bước nhất định.
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 dưới đây.
Xin vui lòng thấy rằng các container sẽ không được trong một dòng như hiển thị ở đây. Nó sẽ giống như thể hiện trong hình trên.
Thêm vào diện
Thêm mã của widget này đi vào Blog Tiêu đề → Giao diện → Thêm Widget → HTML / JavaScript và dán đoạn mã được đưa ra trong hộp mở ra.
<center>
<ul id="abt-social-icons">
<li class="rss-icon"><a href="http://feeds.feedburner.com/lutip" target="_blank"><img height="147" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1t4cgxMLhP9JPhGsWzpExzlxq7nI8EfejfvofGZC74HqyGKWDDOpbbKvvvp08n4897Ld3b-u8gTf7P1ioLA8bf1SaE9fsZe5e8CVu35vc072LOYAmWasipW8mYPjOET8_Io9Q0DtM37g/s1600/rss.png" width="147" /></a></li>
<li class="twitter-icon"><a href="http://www.twitter.com/lutip_com" target="_blank"><img height="147" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgryKPAot4p-bRevTyx7GJOWq0SJsIDqh13hZiBl1AcesTL8ng7fCDvalyBuBvQfI-FShdfeJqxcT4bhI3GmZRaxT1sKKzEjbSxXhZdwCv-DQACTshhTJ-u7nizIz8KE30TPUFDq6t-y_s/s1600/twitter.png" width="147" /></a></li>
<li class="facebook-icon"><a href="http://www.facebook.com/vnnpay" target="_blank"><img height="147" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJSMrBOME-tMKF-ZvsO-1euq6OR8hUNl2VHFEw9LqpGcQV_QdV2djmZ1KWMVFpp66StRNm7pq33T8Rl9fC-WFc0cICAIQJ3UyvQcAYLI20p-wLDV2nNxctrW9zTab31AA1mQ0qdcEU4-U/s1600/facebook.png" width="147" /></a></li>
<li class="google-icon"><a href="https://plus.google.com/+lutipdaomynhan" target="_blank"><img height="147" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiWlywSswqsRy841y2qtyDUIb3GG5FqF7Tv1FQZSLWMk4RI49lZdIbmE-7ki6BzTkkobnM8E5rgC4lWv-gBKVX8gc5MAApArvzYRPrQA5sTRkU4LlhxDdOmAqM3D_Oa647flqDRUhls0g/s1600/google.png" width="147" /></a></li>
</ul>
</center>
<style>
#abt-social-icons li {
float: left;
width: 147px;
height: 147px;
margin: 0 6px 6px 0;
padding: 0 0 0 0;
border-bottom: none;
list-style: none;
}
#abt-social-icons li a {
line-height: 1px;
display: block;
}
#abt-social-icons li a:hover img {
-webkit-opacity: 0.8;
-moz-opacity: 0.8;
opacity: 0.8;
}
#abt-social-icons li a span {
display: none !important;
}
</style>