Tiện ích Bookmark and Share Homepage cho Blogger

Ở bài viết trước, iTechPlus đã giới thiệu đến các bạn tiện ích giúp quảng bá bài viết lên các mạng xã hội thông qua Social Bookmarking nhằm get traffic từ các trang mạng phổ biến như Twitter, Facebook,…

Không nằm ngoài mục đích đó, hôm nay iTechPlus tiếp tục giới thiệu đến các bạn một tiện ích tương tự, đó là Bookmark and Share Homepage.

Tạm thời mình sẽ chia sẻ 2 Style của tiện ích này cho các bạn lựa chọn. Xem DEMO tại đây.

1. Style 1 :

Hình minh họa

Cách thực hiện :

1. Vào Thiết kế > Phần tử trang

2. Tạo một widget HTML\JavaScript và dán vào đoạn code bên dưới :

<style type="text/css">
#subscribe {background:#666;width:280px;padding:10px;border:double #000}
.addthis_toolbox{padding:15px 0 5px 0;text-align:center}
.addthis_toolbox .custom_images a{width:32px;height:32px;margin:0 1px 0 0px;padding:0}
.addthis_toolbox .custom_images a:hover img{opacity:1}
.addthis_toolbox .custom_images a img{opacity:0.85}
.rssbox, .twitterbox, .facebookbox{background:#000;border:1px solid #999;padding:10px;margin:10px 0 0 0}
.rssbox:hover, .twitterbox:hover, .facebookbox:hover{border:1px solid #f5f5f5}
.rssbox a, .twitterbox a, .facebookbox a{color:#fff;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.rssbox a:hover, .twitterbox a:hover, .facebookbox a:hover{color:#080808;text-decoration:underline}
</style>
<div id="subscribe">
<div class="addthis_toolbox">
<div class="custom_images">
<a class="addthis_button_twitter"><img alt="Twitter" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVhOlC5dmevnCiGbAgiti4NsnU7VRwRVE6a0A1d2zCtsXfhs0M7-QLdIdy8uT6j2dYFcRfdSmmb56biE_8a5gVMuNKyF1cFjRzmeGDB3saggug3qvlq6piu8en2vGG4dqUnRLZliBqrKE/s1600/twitter.png" width="32"/></a>
<a class="addthis_button_delicious"><img alt="Delicious" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh2XONO5RqnlcDUf3IJN44jO9opAx2l-rdB-ENmFPtVW4u0ccq85eiS_S5pgioG2iJFcVN-TJ64CiUUJNCSQQpTsWQtAi2Crw9xQSJIl4JHKw1UmWH-TZT3Cmp3RBmaNnlJCTMIgYC_Mg/s1600/delicious.png" width="32"/></a>
<a class="addthis_button_facebook"><img alt="Facebook" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx8h_U8YJrZW3ufD9Ky0WEpf6fSkKikE6PIPMPCqtjT9oz6z4MGveuU3Vv9rgduLnAfBRGvr-tUoaANYF9Ozx5-eRjVKyM8ChCVxbIEahbSrZS_NnEuNTvK-0Xf1CrN_ioH3UoySpOcu4/s1600/facebook.png" width="32"/></a>
<a class="addthis_button_digg"><img alt="Digg" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoAoo9FX9d_DSrumvhD0eH7TeNF4h6LG5ZcLCk0haVrnENPZIi2NlWThPkeoAxp4THvbNqGAPHFYflH-M-KRujGeAhh9vvyrBA1im4yJcv1XOIMfNh1eRJ-A3EhyphenhyphenaJVN5rb2pvXCm7bX8/s1600/digg.png" width="32"/></a>
<a class="addthis_button_stumbleupon"><img alt="Stumbleupon" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEm4KKXRD5-FdypCIUFMjKoVqKz2wWnwkHzUpscT8rRAGyCilyO0WLkbjDiEAH200JnQryZY79RT1XiARMReJ1cmL781hCvZ1PBA9NyjdQsNdHznFVHRPoTTTKpZgpLqF6UK7AFV7CnmU/s1600/stumbleupon.png" width="32"/></a>
<a class="addthis_button_favorites"><img alt="Favorites" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8WgDBt1uE_a3XABPhcy2bMXzAHf8TAjRIK0VpETwN1-q0L10DL-hJn2F1xmuypWn7x4CsW9B5FCOcUYCHRMckPR3Z5FdJtC8NhB5i7FjmLsb6UFo1khfjABKh45UorS1mkI4PQg_SEoo/s1600/favorites.png" width="32"/></a>
<a class="addthis_button_more"><img alt="More" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhizVhFAxSBi6uO3hAvM3GoOlNUGs7kGdWn9RkVQ6522HKlUW-GL7AZet1eaAKiQwapZMEJSwrnk1Q-ApbE6_jv_9AApgyLT_SkTCJ8yn0bJu38udQyZRRyjRsoBVaRgf0lEb9U6XWyZQA/s1600/more.png" width="32"/></a>
</div>
<script src="http://s7.addthis.com/js/250/addthis_widget.js" type="text/javascript"></script>
</div>
<div style="clear:both;"></div>
<div class="rssbox">
<a href="http://www.itechplus.info/feeds/posts/default" target="_blank"><img alt="RSS Feed" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw0hsI5Ja829hc4vlPZN2lXKKbynb3dtpHh_OazZ2mg2XbqexJn9ggDgFFDEXV3h1_iPMwpItBqSoZAMkbyJHMuWUMLBoI-yDE7Lekx4ICoYE5ddOnXU7eSFBqPTursP5pC135UQ-AMhE/s1600/rss.png" style="vertical-align:middle; margin-right: 10px;" title="RSS Feed"/></a><a href="http://www.itechplus.info/feeds/posts/default" target="_blank">Subscribe to Our RSS feed! </a>
</div>
<div class="twitterbox">
<a href="http://twitter.com/itechplus" target="_blank"><img alt="Follow Us on Twitter!" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitd0FyQT8U7ECp7tBiUZnAUfTQt3TW97py6OwsqvbfyzpOaIBLRA1PRUtabADbiUsRNcIRUMA7rZqCgfUPG9nEgs0Jdi8IiH2J77kYLbuANW1kYl-t263xusWdz6RAdlho-XOtGXD_vnc/s1600/social-connect-twitter.png" style="vertical-align:middle; margin-right: 10px;" title="Follow Us on Twitter!"/></a><a href="http://twitter.com/itechplus" target="_blank">Follow Us on Twitter!</a>
</div>
<div class="facebookbox">
<a href="http://www.facebook.com/itechplus" target="_blank"><img alt="Be Our Fan on Facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMZKdne4v04DZYieie6QEa2kIDDXgawzY4wV3s3SDveEWg8pYomMXI2uwx2_Ihi4yN1FOUscSnJnHMO1CvNkAoAXpCWwq0YWBB6cts_nKvfmLbus_242Bfaf0wpJN58geOrhA4qHpKDA4/s1600/social-connect-facebook.png" style="vertical-align:middle; margin-right: 10px;" title="Be Our Fan on Facebook"/></a><a href="http://www.facebook.com/itechplus" target="_blank">Be Our Fan on Facebook</a>
</div>
</div>

Thay code in đậm màu xanh tương ứng với địa chỉ Blog bạn và Username của bạn trên Twitter & Facebook.

3. Save and Done.

2. Style 2:

Hình minh họa

Cách thực hiện :

1. Vào Thiết kế > Phần tử trang

2. Tạo một widget HTML\JavaScript và dán vào đoạn code bên dưới :

<style type="text/css">
#subhome {border:double #000; width:180px;padding:10px;background:#666}
.subhome ul {margin:0;padding:0}
.subhome li {list-style-type:none;padding:4px}
.subhome li a:link, .subhome li a:visited{color:#fff}
.subhome img {width:25px;height:25px;margin:0 10px -5px}
</style>
<div id="subhome">
<center><img src="http://www.presidiacreative.com/wp-content/themes/dailypress/images/rss.gif" width="90" height="90"/></center>
<ul class="subhome">
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGvZ90u4ZVtsW0jBQLVYm1AZKMtmc8H0YDz1RPgIIf-Qp7yvt0TcpEnYQrt6WNvHcmj_bauAyCxA1doaf567L-4s0M5-qOSbZV1-rU4TwPXlaDr2gZzAn09oDk6PzxgupGs_wjmKJZ-l0/s400/FACEBOOK.png"/><a href="http://www.facebook.com/sharer.php?u=http://www.itechplus.info" target="_blank" rel="nofollow">Share on Facebook</a></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgllPMeTXkW8smqqwFALtZdwsxXgJI9Q0y8pejBbqsK4L9HJy11crxQoQ9eccwknpzVJ8z7-fQ5sRtfInGMD93xZ9FD4N0dERkvWQffQio9wzGeWLzHF6UrjX_6n0WJfadx0qY0WWd41EY/s400/TWITTER.png"/>
<a href="http://twitthis.com/twit?url=http://www.itechplus.info">Share on Twitter</a></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXYLVOSyLmHOO0HhHEAK_eYv0N0CNMkJMCVr8IVY1sTuDvvdD3LUzLqFVx0fjy1-sEUOQOuQ_mq37z2cCcDvzvBEoHO2J_EF-Fm1Kw5e1I6pn6tkor3lZ6YS89GAPrrxQj15sjoDG3f5E/s400/STUMBLE-UPON.png"/><a href="http://www.stumbleupon.com/submit?url=http://www.itechplus.info" target="_blank" rel="nofollow">Share on StumbleUpon</a></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4OtfruABKaQqhpVRVhvPivbsK0uPr3ynn4Gz8Ycwo_wspxfMkd4j7XgPj3a6L3JyDmklV1DGKmIcp6Dlnsi6uR0sXCn19qOCpbJmfGNAqdqIfkm-IqEzbbemA351J2axMEPPB4RAGIHA/s400/DELICIOUS.png"/><a href="http://del.icio.us/post?url=http://www.itechplus.info" target="_blank" rel="nofollow">Share on Delicious </a></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiopcvfXIYDaI4a7nKqMZxYddg4Vo0tp1XL3OG_LPMGszTZ-46G8ennZXfZSQZyM-WFvx4rORhhW2K4Wionef7sf4Osq6QHJVAtaRQEOAsz7XNWIuPS4qvaHjCdZQYJldmt4cP1bP3syOY/s400/DIGG.png"/><a href="http://digg.com/submit?phase=2&url=http://www.itechplus.info" target="_blank" rel="nofollow">Share on Digg </a></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpAzVlgLth9AXFuOzmifBZn9MYy8EwURsP25lmC3_5vnle0CaLnjn0-ZVTdkIG242byiF9V9d5-7llv6KjIXNOrwOrwYJYIJt23k5g-o1goDnKYAAn4CEJoHqUTDKJ1GNvhDlAu6_ZVm4/s400/Google-icon.jpg"/><a href="http://www.google.com/bookmarks/mark?op=edit&amp;output=popup&amp;bkmk=http://www.itechplus.info" target="_blank" rel="nofollow" title="Bookmark this blog on Google">Bookmark on Google</a></li>
<li><img alt="Email" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgMNaJc3s7o5HpcfjHYOkkV5o79Yp4Ec8eL9qNPmKTyuiGe71kLLwkciRo2OzO9qwEiFB0mDxtFnd5Ewv7i8uSa0SuBI4bYIzVDsC4O0tKs5ibgGmwB15oHGjE5JOOE1cz2Q8BM1e0LBsf/s400/Email+Orange_128.png"/><a href="http://feedburner.google.com/fb/a/mailverify?uri=itechplus&amp;loc=en_US" target="_blank" rel="nofollow">Receive Email Updates</a>
</li>
</ul>
</div>

Thay code in đậm tương ứng với địa chỉ Blog bạn và Feed Name của bạn trên Feedburner.

3. Save and Done.

* Lưu ý : các bạn nên download tất cả hình ảnh của widget tương ứng và upload lên host riêng đề phòng nó “die” bất tử.

Chúc các bạn thành công !

iTechPlus