Tạo nút Social Buttons lớn kiểu Metro bóng mờ cho Blogspot Blogger

[Tips] - Tạo nút Social Buttons lớn kiểu Metro bóng mờ cho Blogspot Blogger ấn tượng từ cái nhìn đầu tiên!

Thêm một thủ thuật blog liên quan đến Social Buttons cho blogspot blogger nhé cả nhà, thủ thuật blog lần này có tên là [Tips] - Tạo nút Social Buttons lớn kiểu Metro bóng mờ cho Blogspot Blogger. Ở thủ thuật này, các nút buttons sẽ trông rất lớn, giao diện metro phẳng, làm người dùng ấn tượng ngay từ giây phút đầu tiên nhìn vào...thủ thuật mới đây liên quan đến social buttons mà Chia Sẽ TemplateVN đã giới thiệu có tên là [Tips] - Tạo nút Social Buttons hiệu ứng bong bóng mờ cho Blogspot Blogger và nếu các bạn thấy hay, hãy áp dụng thủ thuật đó nữa nhé!

Live Demo

Giờ chúng ta sẽ đi vào thực hiện thủ thuật [Tips] - Tạo nút Social Buttons lớn kiểu Metro bóng mờ cho Blogspot Blogger này nha, thủ thuật này rất đơn giản, chỉ cần vài thao tác nhỏ là có thể hoàn thành rồi. Ưu điểm của thủ thuật này đó là hoàn toàn không dùng Javascript trong mã code, chỉ sử dụng HTML5 chuẩn SEO mà thôi. Nên bạn đọc hãy yên tâm nha! Giờ thì bắt đầu tạo thủ thuật nào.

Đầu tiên cần tạo 1 widget HTML/Javascript và copy đoạn mã code dưới đây vào và lưu lại

Trước hết, hãy vào Blog Title → Layout → Add Widget → HTML/JavaScript và copy đoạn mã sau đây vào nhé. Sau đó hãy Lưu lại.

<center>
<ul id="abt-social-icons">
<li class="rss-icon"><a href="http://feeds.feedburner.com/livemobi" target="_blank"><img height="147" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrXRUV0RDQXT-D-jRlgdBPQrdJe_lRc8omahOhnL3EHzGd8vC58TMR4d2IbxJDs3AiqPMk_Kq9yZqWSbq4qIEphFx8eqvMpsilJYCuP-sL10U0_Vbyru2uib-IM1TtYx4utuB4TOt2IPk/s1600/rss.png" width="147" /></a></li>
<li class="twitter-icon"><a href="http://www.twitter.com/livemobi" target="_blank"><img height="147" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvRqk6RDU3BQDzm44y0nTMUIWFVSdjIuLH8YIe0DnvPXliF5Gc1s4gJ1PGel9PZh15V51ti85puRWF3xNFUNnZvzZFFUNCBsNo6rPzjocs39iwYDT1gIxPxKIp2oww2hbXYGL6uj-LGrI/s1600/twitter.png" width="147" /></a></li>
<li class="facebook-icon"><a href="http://www.facebook.com/livemobi" target="_blank"><img height="147" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKQDCgHqOZ9Mjy5djG9yMo5DXh0YcCy68L7pmzOEsesOZm3FM4n7zwnug9F1mqzvpym75HeoH5AGQgLXWBkXIas9IJjmUMbem4FEEdF1OyYg3-5QxYfupXPt66fsGJN2yM5P70bABqoGg/s1600/facebook.png" width="147" /></a></li>
<li class="google-icon"><a href="https://plus.google.com/livemobi" target="_blank"><img height="147" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5ClQ49-JSkeCj30fgU-qlBU2Ib7qPaCRCvkgMLQOEolKyCx2M6ZDtxvELYoH-s1JdjivaBkLtjAOsoaLNS49pDki8LVKvziECp2mWBq3G-lixu4Q7lzVH5TTm_F3PIyTuiSpdy81wzA0/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>

Ghi chú: Hãy thay đổi livemobi thành địa chỉ của Facebook, Twitter, Google Plus... của bạn nha! Chúc thành công!

Cuối cùng cũng đã xong thủ thuật blog này rồi, bạn thấy thế nào? Ok chứ ^^. Nếu thấy hay hãy share đến bạn bè của mình nha, và nếu chưa hiểu đoạn nào, hãy gửi một comment ở dưới đây, Chia Sẽ TemplateVN sẽ giải đáp mọi thắc mắc của bạn! Chúc vui vẻ!