Subscribe via email

Enter your email address:

Delivered by FeedBurner

Filed in Nhãn: 0 nhận xét
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

Share This Post

RSS Digg Twitter StumbleUpon Delicious Technorati

0 nhận xét to “Tạo Floating Icons với plugin Cute Profiles”

Comments
Leave a Comment

Related Posts with Thumbnails

ARCHIVE

Được tạo bởi Blogger.
Powered by Blogger | Delighted designed by ZENVERSE | Converted by Blogger Template Place Collaboration One-4-All