Hướng dẫn tạo Floating Social Bookmarks cho Blogspot/Blogger

Minh đã từng có bài hướng dẫn Tạo Floating Icons với plugin Cute Profiles cho blog trên nền Wordpress, nhiều bạn email để hỏi làm cách nào tạo Floating Icon tương tự cho blog chạy trên nền Blogspot của Blogger.com và bài này sẽ giải đáp thắc mắc cho các bạn.

Demo: http://floating-social-bookmarks-for.blogspot.com/

Các Icon này sẽ hiện ở tất cả các trang trên Blogspot của bạn, load rất nhẹ nên không ảnh hưởng tốc độ trang web. Các bạn cần phải backup template trước khi làm.

B1. Đăng nhập tài khoản Blogger. Vào Dashboard >> Layout >> Edit html (không cần tick vào ô Expand Widget Templates)

B2. Tìm đoạn này:

]]></b:skin>

B3. Ngay phía trên đoạn đó, bạn chèn đoạn code dưới đây:

#divStayTopLeft {
left:5px;
position:absolute;
top:15px;
}
.sidetab {
}
.sidetab ul {
list-style-type: none;
margin: 0;
margin-top: 220px;
margin-left: -2px;
padding: 0;
}
.sidetab ul li {
border-bottom: 0;
margin-bottom: 0;
padding: 0;
}
.sidetab a {
background: none;
display: block;
height: 25px;
margin-top: 0px;
padding: 2px;
width: 25px;
}
.sidetab a:link, .navlist a:visited {
color: #555;
text-decoration: none;
}
.sidetab a:hover {
border: none;
background: #e8e8e8;
}
.sidetab .button a {
background:;
height: 25px; width: 25px;
}

B4. Sau đó, tìm đoạn dưới đây:

</body>

B5. Ngay phía trên đoạn vừa tìm, chèn đoạn dưới đây:

<div id=’divStayTopLeft’>
<div class=’sidetab’>
<ul class=’navlist’>
<li class=’button’><a class=’addthis_button_favorites’><img alt=’Favorites’ height=’25′ src=’http://3.bp.blogspot.com/_7ZjrDUb91m8/SvwuAjUGvkI/AAAAAAAAAjk/WtTflXFSAQg/s1600/favorites.png‘ width=’25′/></a></li>
<a href=’YOUR-BLOG-ADDRESS-HERE/feeds/posts/default’><img height=’25′ src=’http://2.bp.blogspot.com/_k_DnmK4oz2Q/Szh_fz5U9oI/AAAAAAAAALI/FeKEBgVO7-E/s1600/rss_48.png‘ title=’Subscribe to RSS feed’ width=’25′/></a>
<a class=’addthis_button_facebook’><img alt=’Facebook’ height=’25′ src=’http://3.bp.blogspot.com/_7ZjrDUb91m8/Svwt8fPX8DI/AAAAAAAAAjc/29sCH5Krulc/s1600/facebook.png‘ width=’25′/></a>
<a class=’addthis_button_delicious’><img alt=’Delicious’ height=’25′ src=’http://4.bp.blogspot.com/_7ZjrDUb91m8/Svwt1pSr4xI/AAAAAAAAAjM/GfhE1Uq_kfs/s1600/delicious.png‘ width=’25′/></a>
<a class=’addthis_button_email’><img alt=’Email’ height=’25′ src=’http://1.bp.blogspot.com/_k_DnmK4oz2Q/Szir0pFMi0I/AAAAAAAAALU/EFtkujvpeww/s1600/emailsmall.jpg‘ width=’25′/></a>
<a class=’addthis_button_twitter’><img alt=’Twitter’ height=’25′ src=’http://2.bp.blogspot.com/_7ZjrDUb91m8/SvwuJy1EqlI/AAAAAAAAAj8/h67-8yr1dhg/s1600/twitter.png‘ width=’25′/></a>
<a class=’addthis_button_google’><img alt=’Google’ height=’25′ src=’http://1.bp.blogspot.com/_k_DnmK4oz2Q/SzjFaF-CTyI/AAAAAAAAALY/nwK8B29eCPU/s1600/gsmall.jpg‘ width=’25′/></a>
<a class=’addthis_button_digg’><img alt=’Digg’ height=’25′ src=’http://4.bp.blogspot.com/_7ZjrDUb91m8/Svwt4jGD4AI/AAAAAAAAAjU/Rr0BScks8_o/s1600/digg.png‘ width=’25′/></a>
<a class=’addthis_button_more’><img alt=’More’ height=’25′ src=’http://1.bp.blogspot.com/_7ZjrDUb91m8/SvwuDQEx3vI/AAAAAAAAAjs/5SQNy2nGKpg/s1600/more.png‘ width=’25′/></a>
</ul>
</div>
</div>

<script src=’http://s7.addthis.com/js/250/addthis_widget.js?pub=xa-4a65e1d93cd75e94′ type=’text/javascript’></script>
<script src=’http://minhmeo.googlecode.com/files/genki.js’ type=’text/javascript’></script>

Chú ý: Thay thế đoạn YOUR-BLOG-ADDRESS-HERE bằng Link Feed của bạn nếu chạy domain có đuôi blogspot. Nếu chạy domain riêng thì thay thế cả đoạn YOUR-BLOG-ADDRESS-HERE/feeds/posts/default bằng link Feed của bạn.

VD: http://feeds.feedburner.com/minhmeoblog

Chỉnh sửa Icon: Nếu bạn muốn thay thế Icon bạn thích thì thay thế link ảnh của bạn cho các Link có màu xanh là xong.

Chúc bạn thành công!!

Cảm ơn: latestbloggertemplate

Bài viết liên quan:

• Hướng dẫn cài “All in One SEO Pack” cho Blogspot/Blogger.com
• Hướng dẫn thêm nút Google Buzz vào Blogspot/Blogger.com
• Chia sẻ miễn phí Thesis Theme cho Blogspot/Blogger
• Tổng hợp kho thủ thuật và tài nguyên cho Blogger Blogspot
• Facebook Like Button cho Blogspot

Tagged as: blogger, Blogspot, thủ thuật blogspot