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ã: ]]>
- 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ước: Chèn mã HTML

- Tìm đoạn mã: 

- Dán ngay trên đoạn mã đoạn code dưới đây:

 

Spread it!