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

Mr LNA

Administrator
1 Tháng mười một 2010
49,064
12
38
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:
Mã:
]]></b:skin>
B3. Ngay phía trên đoạn đó, bạn chèn đoạn code dưới đây:
Mã:
[INDENT]#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;
}
[/INDENT]B4. Sau đó, tìm đoạn dưới đây:[INDENT]</body>
[/INDENT]B5. Ngay phía trên đoạn vừa tìm, chèn đoạn dưới đây:[INDENT]<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=’[URL="http://sinhvienthamdinh.com/forum/links.php?url=http://s7.addthis.com/js/250/addthis_widget.js?pub=xa-4a65e1d93cd75e94%E2%80%B2"]http://s7.addthis.com/js/250/addthis_widget.js?pub=xa-4a65e1d93cd75e94′[/URL] type=’text/javascript’></script>
<script src=’[URL="http://sinhvienthamdinh.com/forum/links.php?url=http://minhmeo.googlecode.com/files/genki.js%E2%80%99"]http://minhmeo.googlecode.com/files/genki.js’[/URL] type=’text/javascript’></script>[/INDENT]
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.
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!!
 

Thống kê diễn đàn

Chủ đề
61,129
Bài viết
63,349
Thành viên
86,047
Thành viên mới nhất
gnn

VỀ CHÚNG TÔI

  • Sinhvienthamdinh.Com là diễn đàn đầu tiên và lớn nhất dành riêng cho cộng đồng nhân lực ngành thẩm định giá. Cổng thông tin được tạo ra nhằm tạo kênh kết nối tri thức cho tất cả các bạn đã và đang quan tâm đến ngành thẩm định giá. Các thông tin được tổng hợp với đầy đủ các mảng thuộc lĩnh vực thẩm định giá như: Thẩm định giá Bất động sản, thẩm định giá động sản, thẩm định giá máy móc thiết bị, thẩm định giá doanh nghiệp, thẩm định giá dự án đầu tư, thẩm định giá thương hiệu...
  • Với phương châm "Connet For Sharing" chúng tôi chia sẻ hoàn toàn miễn phí và không giới hạn những kiến thức từ cộng đồng diễn đàn.

DANH MỤC CHÍNH

CÁ NHÂN