Tạo Bookmarks ở cuối bài viết

SexyBookmarks là một plugin như một menu gồm nhiều icon đại diện cho các trang mạng xã hội được đặt ở cuối mỗi bài viết giúp cho phép người đọc dễ dàng đưa bài viết của bạn lên các trang mạng xã hội phổ biến nhất một cách tự động.

Bài viết này giới thiệu cách cài đặt một vài kiểu Bookmarks ở cuối bài viết Blogger.

Kiểu 1 như hình minh họa bên dưới.

Cách cài đặt như sau.

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates.

Đặt đoạn code bên dưới vào sau dòng ]]></b:skin>.

Bước 2. Đặt đoạn code bên dưới vào trước dòng <div class='post-footer'>.

<b:if cond='data:blog.pageType == "item"'>
<div class='sexy-bookmarks'>
<ul class='socials'>
<li class='sexy-delicious'><a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>

<li class='sexy-digg'><a expr:href='" http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>

<li class='sexy-technorati'><a expr:href='" http://technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>

<li class='sexy-reddit'><a expr:href='" http://www.reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>

<li class='sexy-stumble'><a expr:href='" http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>

<li class='sexy-designfloat'><a expr:href='"http://www.designfloat.com/submit.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>

<li class='sexy-facebook'><a expr:href='" http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>

<li class='sexy-twitter'><a expr:href='" http://twitthis.com/twit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>

<li class='sexy-furl'><a expr:href='" http://www.furl.net/storeIt.jsp?u=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>

<li class='sexy-syndicate'><a href='http://feeds.feedburner.com/YOUR-FEEDBURNER-ID' title='Subscribe to RSS'/></li>

<li class='sexy-email'><a expr:href='" mailto:?subject=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>

</ul>
<span class='sexy-rightside'/></div>
</b:if>

Trong đoạn code trên bạn cần thay YOUR-FEEDBURNER-ID bằng id của trang Feedburner cho blog của bạn đã tạo tại Feedburner.com.

Lưu Template là OK.

Kiểu 2 theo hình minh họa bên dưới.

Để làm được như vậy, bạn cần đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates. Đặt đoạn code bên dưới vào trước dòng <div class='post-footer'>.

<b:if cond='data:blog.pageType == "item"'>
<div style='clear:both;margin-top:20px; '>
<div style='width:225px; float:left;'>
<img alt='Bookmark and Share' src='http://img266.imageshack.us/img266/7343/sharebutton.png' title='Bookmark and Share'/>
</div>
<div style='width:65px; float:left;'>
<a expr:share_url='data:post.url' href='http://www.facebook.com/sharer.php' name='fb_share' type='box_count'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
</div>
<div style='width:65px; float:left;'>
<script type="text/javascript">
tweetmeme_url = '<data:post.url/>';
tweetmeme_source = 'username_twitter_của bạn';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</div>
<div style='width:65px; float:left;'>
<a class='DiggThisButton DiggMedium'></a></div>
<div style='width:65px; float:left;'>
<script src='http://www.stumbleupon.com/hostedbadge.php?s=5'></script></div>
<div style='width:65px; float:left;'>
<a class='google-buzz-button' data-button-style='normal-count' expr:data-url='data:post.url' href='http://www.google.com/buzz/post' title='Post to Google Buzz'/>
<script src='http://www.google.com/buzz/api/button.js' type='text/javascript'/>
</div>
</div>
<div style='clear: both;'></div>
</b:if>

Trong đoạn code trên bạn cần thay username_twitter của bạn.

Tiếp theo, đặt đoạn code sau đây vào trước thẻ </body>.