Tạo tiện ích Social Bookmarking Button cho Blogger (Có Counter)

Hiện nay các trang weblog đều cần có một  biểu tượng Social Bookmarking để giúp người đọc đẽ dàng truy cập chia sẻ các thông tin trên các trang xã hội phổ biến như Digg, Facebook , Twitter …Tiện ích  Social Bookmarking Widget với tính năng thống kê giới thiệu dưới sẽ làm bạn thích thú.

Hai tính năng tốt nhất của tiện ích Social Bookmarking - Đánh dấu trang xã hội là:

1. Biểu tượng Social Bookmarking   có kiểu dáng đẹp có thể đặt bất cứ đâu trên weblog.

2. Có nút thống kế (Counter) mô tả sự phổ biến của bài viết trên các mạng xã hội.

Để thêm chúng vào weblog của bạn, hãy làm theo các bước sau:

Bước : Truy cập vào Blogger.

- Truy cập vào Blogger Bảng điều khiển (Dashboard)  >> Thiết kế (Design)   >>  Chỉnh sửa HTML (Edit HTML).

- Click chọn vào ô Mở rộng mẫu tiện ích (Expand widget templates)

Trước khi thực hiện các bước tiếp theo, bạn hãy Sao lưu bản mẫu Blogger đầy đủ

Bước : Chèn mã CSS.

- Tìm đoạn mã: ]]></b:skin>

- Thay thế chúng bằng đoạn mã dưới:

.social { border: dashed #ddd; border-width:1px 0 1px 0; margin: 10px auto 10px; display:block; padding: 3px 0 1px 0px; overflow: hidden; }
.social .social_button {float: left; display: inline; overflow: hidden; height:22px; }.social .si { float:left;padding-top:3px;}
.social .social_button.dg { margin: 0px 0 0 30px ; padding-top: 2px;}
.social .social_button.tm { margin: 0px 0 0 32px; padding-top: 4px;}
.social .social_button.fb { margin: 0 0 0 15px; padding-top:3px;}
.social .social_button.su { margin: 0px 0 0 35px; padding-top: 2px;}
.social .social_button.em { margin: 0 0 0 35px; padding-top: 3px;}
.social .social_button.em a{background:#eee url(http://img180.imageshack.us/img180/1989/emailj.gif) 3px 50% no-repeat; padding:2px 3px 2px 22px; font-size:10px; border:#ddd 1px solid; text-decoration:none; -moz-border-radius: 3px; -webkit-border-radius: 3px;}
.social .social_button.em a:hover {background:#ddd url(http://img180.imageshack.us/img180/1989/emailj.gif) 3px 50% no-repeat}
.social .social_button a img { border: 0; padding: 0; }
.social strong { font-size: 11px; float: left; margin:2px 0 0 0; color:#555;}
.clear{clear:both;}
]]></b:skin>

Bước: Chèn mã HTML

- Tìm đoạn mã: <data:post.body/>

- Dán ngay trên đoạn mã <data:post.body/> đoạn code dưới đây:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='social'>
<b class='si'>Spread it!</b>
<div class='social_button dg'>
<a class='DiggThisButton DiggCompact'/><script src='http://widgets.digg.com/buttons.js' type='text/javascript'/>
</div>
<div class='social_button tm'>
<script type='text/javascript'>
tweetmeme_style = &quot;compact&quot;;
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>
</div>
<div class='social_button fb'>
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'/>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
</div>
<div class='social_button su'>
<script src='http://www.stumbleupon.com/hostedbadge.php?s=1'/>
</div>
<div class='social_button em'>
<a expr:href='&quot;mailto:?subject=Sharing:&quot; + data:post.title + &quot;&amp;body=I wanted to share this with you. Thought you might enjoy it:%0A%0A&quot; + data:post.url' target='_blank' title='Email This'>Email This</a>
</div>
</div>
<div class='clear'/>
</b:if>

- Lưu (Save) lại mẫu.

CHÚC CÁC BẠN THÀNH CÔNG !!!