- Hôm trước mình đã giới thiệu thêm nút +1 Google plus vào bài viết trên blog. Hôm nay mình sẽ cập nhật thêm 1 cách tùy chỉnh khác nữa dưới dạng floating bar giống như blog của mình
- Code này bao gồm cả các button của các mạng xã hội khác như Facebook, Retweet, Stumble, Google Buzz, Digg This và Google +1. Mỗi button có chức năng tự đếm riêng
- Thêm Button dạng floating bar
+ Đăng nhập vào Blogger của mình
+ Chọn thiết kế\ phần tử trang
+ Chọn thêm tiện ích
+ Ở pop up mennu chọn HTML/JavaScrip
+ Copy đoạn code sau đặt vào trong content box
- Thêm Button dạng floating bar
+ Đăng nhập vào Blogger của mình
+ Chọn thiết kế\ phần tử trang
+ Chọn thêm tiện ích
+ Ở pop up mennu chọn HTML/JavaScrip
+ Copy đoạn code sau đặt vào trong content box
<br /> <!-- floating page sharers Start tipgoogleplus.blogspot.com/2011/07/test-code_3727.html--><br /> <style> #pageshare {position:fixed; bottom:15%; margin-left:-71px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;} #pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;} .fb_share_count_top {width:48px !important;} .fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;} .FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;} .FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;} </style><br /> <div id='pageshare' title="Get this from tipgoogleplus.blogspot.com/2011/07/test-code_3727.html"><div class='sbutton' id='fb'><a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script><br /> </div><div class='sbutton' id='rt'><script src="http://tweetmeme.com/i/scripts/button.js" type='text/javascript'></script><br /> </div><div class='sbutton' id='su'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script><br /> </div><div class='sbutton' id='digg' style='margin-left:3px;width:48px'><script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script><br /> <a class="DiggThisButton DiggMedium"></a><br /> </div><div class='sbutton' id='gb'><a class='google-buzz-button' data-button-style='normal-count' href='http://www.google.com/buzz/post' title='post on google buzz'><br /> <script src='http://www.google.com/buzz/api/button.js' type='text/javascript'></script><br /> </a></div><div class='sbutton' id='gplusone'><script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script><br /> <g:plusone size="tall"></g:plusone><br /> </a></div><div style="clear: both;font-size: 9px;text-align:center;"><a href="http://cybertweaks.blogspot.com/2011/06/add-floating-social-media-sharing.html">Get this</a></div></div><!-- floating page sharers End --><br />
+ Save và kéo gadget đặt vào dưới Blog Posts gadget
+ Save thiết lập cho blog và xem kết quả
(Lưu ý : bạn có thể tùy chỉnh số button bằng cách thêm hoặc bớt các thẻ div tương ứng)
+ Save thiết lập cho blog và xem kết quả
(Lưu ý : bạn có thể tùy chỉnh số button bằng cách thêm hoặc bớt các thẻ div tương ứng)
Chúc thành công!
Nhận xét
Bạn ơi blog http://www.green-vietnam.com/ sao nso ko hiển thị được các nút chia sẻ mạng xã hội mà vốn dĩ đã có sẵn trong blogspot, làm sao để hiển thị được chúng ra
Trả lờiXóathanks
Replly tranducthao: đấy la bạn dùng mẫu Template Free download trên mạng do vậy một số chức năng bị thiếu. Để 3 hôm nữa mình thi song mình viết Code cho bạn
Trả lờiXóaReplly tranducthao theo đúng yêu cầu của bạn mình đã Post code bao gồm các nút chia sẻ với giao diện đẹp hơn rất nhiều tại link bên dưới:
Trả lờiXóahttp://namkna.blogspot.com/2011/08/at-nut-share-phia-duoi-tieu-e-bai-viet.html
Cảm ơn bạn đã ủng hộ Blog
Chúc thành công!