Cara Menambahkan Share Box di Blog

Pada kali ini saya ingin menunjukan kepada anda cara membuat share box untuk blog anda, didalamnya terdapar fungsi-fungsi sebagai berikut :

1. official tweet button dengan counter
2. oficial Google Buzz dengan counter
3. official Stumbleupon button dengan counter
4. Blog This!
5. Email this!
6. Print this!
7. Comment count link
8. Dan terakhir Facebook like button.

Bagaimana cukup complete bukan ? Semuanya dapat diramu jadi satu dan bisa ditambahkan dengan cepat pada blog anda. tampilannya kira-kira seperti ini :

Berikut adalah cara membuat share box blog anda :

• Log in pada blogger anda
• Pilih Rancangan --> Edit HTML
• Klik "Expand Widget Templates"
• Cari kode berikut <div class='post-header-line-1'/>
• Copy dan pasang kode share box tepat dibawah kode <div class='post-header-line-1'/>

Perhatian: jika anda tidah dapat menemukan kode <div class='post-header-line-1'/> , anda juga bisa paste sebelum kode <data:post.body/>

Kode share boxnya adalah:

<b:if cond='data:blog.pageType == "item"'> <style type='text/css'> .multisharebox {  background: none repeat scroll 0 0 #EFEFEF;  float: right;  margin: 5px 0px 3px 10px;  padding: 0 5px 0;  text-shadow: 0 1px 0 #FFFFFF;  width: 260px;  border:4px solid #d8dfea; } .fb-like-boxtop {  background: none repeat scroll 0 0 #EDEFF4;  border: 1px solid #D8DFEA;  color: #000000;  float: right;  font-size: 11px;  margin: 0 0;  padding: 5px 10px;  text-align: left;  width: 230px; } .fb-like-boxtop a {  color: #000000;  text-decoration:none; } .fb-like-boxtop a:hover {  color: #000000;  text-decoration:underline; } .fb-like-box {  background: none repeat scroll 0 0 #EDEFF4;  border: 1px solid #D8DFEA;  color: #000000;  float: right;  font-size: 11px;  height: 60px;  margin: 5px 0;  overflow: hidden;  padding: 5px 10px;  text-align: left;  width: 230px; } </style> <!-- Perfect Share Box : Created by www.bloggertipandtrick.net  --> <div class='multisharebox'> <table><tr> <td><table><tr> <td><a class='twitter-share-button' data-count='vertical' data-lang='en' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow'/> <b:if cond='data:post.isFirstPost'> <script src='http://platform.twitter.com/widgets.js' type='text/javascript'> </script> </b:if></td> <td><script expr:src='&quot;http://www.stumbleupon.com/hostedbadge.php?s=5&amp;r=&quot; + data:post.url'/></td> <td><a class='google-buzz-button' data-button-style='normal-count' data-locale='en_IN' expr:data-url='data:post.url' href='http://www.google.com/buzz/post' rel='nofollow' title='Post on Google Buzz'/> <script src='http://www.google.com/buzz/api/button.js' type='text/javascript'/></td> <td><a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='box_count'/> <script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/></td> </tr></table></td> </tr><tr> <td><div class='fb-like-boxtop'><a expr:href='data:post.sharePostUrl + &quot;&amp;target=blog&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=270,width=475\&quot;); return false;&quot;' expr:title='data:top.blogThisMsg' target='_blank'>BlogThis!</a> | <a expr:href='data:post.sharePostUrl + &quot;&amp;target=email&quot;' expr:title='data:top.emailThisMsg' target='_blank'>Email This!</a> | <a href='javascript:window.print();'>Print This!</a> | <b:if cond='data:post.allowComments'><a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 0'>No comments</b:if><b:if cond='data:post.numComments == 1'>1 comment</b:if><b:if cond='data:post.numComments &gt;= 2'><data:post.numComments/> comments</b:if></a></b:if></div></td> </tr><tr> <td><div class='fb-like-box'> Do you like this post? <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=230&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:230px; height:40px;'/> </div></td> </tr></table> </div> <!-- Perfect Share Box : Created by www.bloggertipandtrick.net  --> </b:if>

Dan yang terakhir save template anda. Kemudian lihat hasilnya