Ưu điểm của thủ thuật tạo nút Social Buttons lớn hiện đại cho Blogspot 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, 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. Giờ chúng ta sẽ đi vào thực hiện thủ thuật tạo nút Social Buttons lớn hiện đại cho Blogspot này nhé!
Cách tạo nút social đẹp cho Blogger
Đầu tiên cần tạo 1 widget HTML/Javascript, hãy vào Blog Title → Layout → Add Widget → HTML/JavaScript. Sau đó copy đoạn mã dưới đây và dán vào trong Widget vừa tạo và hãy Lưu lại nhé!
<center>
<ul id="abt-social-icons">
<li class="rss-icon"><a href="http://feeds.feedburner.com/Vinll" target="_blank"><img height="147" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHSOuGEEwXg9_NAtZ05VI-RWQRiH3p-9pq6wZbv_6cQnkYc_JmSSFUMee-nLhKPzG4259fnucCy9pFzukmaKFPn_GyMGdtvLu5ONo0gCIHydDxMCdo5Tl-SoQOd1a6mNbcgsxf_mJ8_qY/s1600/rss.png" width="147" /></a></li>
<li class="twitter-icon"><a href="http://www.twitter.com/Vinll" target="_blank"><img height="147" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpjm5jXmnS-kQSfTT9HDT1aKhj6IM8HCvMsOZtk98Xg8VjJzpyOZTdxHX6cSrno19hVR28y3dfUTNQkLQvCI8DxLq56zCdrqz0i-Np7CpxYT0y0WlwTl2ABsLd0xseEzbmz24PVlT8sOw/s1600/twitter.png" width="147" /></a></li>
<li class="facebook-icon"><a href="http://www.facebook.com/Vinll" target="_blank"><img height="147" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCH0bIwwW2KN2byvyUvlNiAGVJDHDjWaa6MeCHAPf2mOUBeyKz_CXPiArfKLD-GuPxR_RubmH2fHdUXLRuFkQGboHNwbAAQrpoxt-fARFBgcnBB92saxsxc2ir0Ac9WcJDMEhkuPawMQ0/s1600/facebook.png" width="147" /></a></li>
<li class="google-icon"><a href="https://plus.google.com/Vinll" target="_blank"><img height="147" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2-VOSNCxuilk8MB1Job2Ad7Lgex0oR5uRRW8G7nPwbSe9ZuGTgYhuDlpIkKabsLhfJOn5dE3l0ivk57exkFS-ZXK89DIDmF_AEoNqhIH5Do-dpwzM9s5kPO9IhQd0Bp9ntMDx-zlYMYI/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>
Chú ý: Hãy thay đổi Vinll thành địa chỉ của Facebook, Twitter, Google Plus,... của bạn nha! Chúc thành công!
Kết quả sẽ như thế này:
Kết quả sẽ như thế này:
 |
| Social Buttons Metro |
Cuối cùng cũng đã xong thủ thuật blogspot này rồi! 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, Vinll sẽ giải đáp mọi thắc mắc của bạn! Chúc vui vẻ!
Tags:
thu-thuat-blogspot
