Chèn Icon Bookmarks vào SideBar Blogger

Tôi đảm bảo đây là một thủ thuật cực kì đơn giản dành cho bạn. Chỉ với vài Code CSS, bạn hoàn toàn làm được điều bạn muốn theo cách đơn giản nhất mà tôi đã giới thiệu.

KIỂU 1

Bước 1: Vào Phần tử trang -> Thêm tiện ích/HTML -> Copy & Paste đoạn Code sau vào phần nội dung

<div id="social-profiles"><a title="Like us on Facebook" alt="facebook" rel="external nofollow" class="social facebook" href="http://www.facebook.com/wpsquare">Facebook</a><a title="Follow us on Twitter" alt="twitter" rel="external nofollow" class="social twitter" href="http://twitter.com/wpsquare">Follow Us</a><a title="Subscribe to our Feed" alt="feeds" rel="external nofollow" class="social subscribe" href="http://feeds2.feedburner.com/wpsquare">Subscribe</a><a title="Contact Us" alt="contact" rel="external nofollow" class="social contact" href="http://www.wpsquare.com/contact/">Contact Us</a></div>

Thay wpsquare = tên địa chỉ của bạn

Bước 2: Vào phần chỉnh sửa HTML -> Ctrl + F -> Tìm thẻ ]]></b:skin> 
Bước 3: Thêm vào trước nó đoạn Code dưới đây rồi Lưu lại.

#social-profiles { float: left; margin: 5px 0; } #social-profiles .social { background: url("http://i.imgur.com/eedpu.png") no-repeat scroll center top transparent; border: medium none; float: left; height: 20px; padding: 40px 0 0; text-align: center; width: 64px; } #social-profiles a.social { color: #666666; font-family: Arial,Helvetica,Tahoma,sans-serif; font-size: 11px; text-shadow: 1px 1px #FFFFFF; } #social-profiles .facebook { background-position: 0 0; } #social-profiles .twitter { background-position: -64px 0; } #social-profiles .subscribe { background-position: -128px 0; } #social-profiles .contact { background-position: -192px 0; }

KIỂU 2

Tương tự như cách làm trên, bạn thay 2 đoạn code trên = 2 đoạn code sau:

<ul class="social"><li><a title="RSS Feed" class="social-feed" href="http://feeds2.feedburner.com/wpsquare/">RSS feed</a></li><li><a title="Twitter" class="social-twitter" href="http://twitter.com/wpsquare">Twitter</a></li><li><a title="Facebook" class="social-facebook" href="http://www.facebook.com/wpsquare">Facebook</a></li><li><a title="Youtube" class="social-youtube" href="http://www.youtube.com/user/wpsquare">YouTube</a></li><li class="last"><a title="Google Plus" class="social-gplus" href="https://plus.google.com/106412545300888534854/">Google </a></li></ul>

.social { background: none repeat scroll 0 0 #FFFFFF; clear: both; font-family: georgia; list-style-type: none; margin-top: 12px; overflow: hidden; padding: 0 0; } .social li { float: left; margin-right: 10px; text-align: center; width: 50px; } .social li.last { margin-right: 0; } .social li a { color: #666666; font-size: 11px; line-height: 34px; opacity: 0.7; padding-top: 42px; } .social li a:hover { color: #000000; opacity: 1; text-decoration: none; } .social .social-feed { background: url("http://i.imgur.com/Zeqol.png") no-repeat scroll 0 0 transparent; display: block; } .social .social-twitter { background: url("http://i.imgur.com/Zeqol.png") no-repeat scroll 0 -79px transparent; display: block; } .social .social-facebook { background: url("http://i.imgur.com/Zeqol.png") no-repeat scroll 0 -158px transparent; display: block; } .social .social-youtube { background: url("http://i.imgur.com/Zeqol.png") no-repeat scroll 0 -237px transparent; display: block; } .social .social-gplus { background: url("http://i.imgur.com/Zeqol.png") no-repeat scroll 0 -316px transparent; display: block; margin-right: 0; }

LƯU Ý

• Bạn có thể thay đổi các Icon tuỳ theo ý thích. 
• Bạn cũng có thể thêm hoặc bớt một hay nhiều hơn những Icon đó bằng cách thêm hoặc bớt code.
• Bạn nhớ thay đúng tên địa chỉ của mình tại các trang mạng xã hội. 
• Nếu bạn có thắc mắc nào vui lòng liên hệ với tôi : alivaut@gmail.com

Nguồn http://www.wpsquare.com/add-social-media-icons-blog-sidebar/