Cara Membuat Share Box

By Unknown

Rabu, 23 November 2011

Widget share kali ini berbentuk segi empat dan dilengkapi dengan fasilitas twit, facebook like and share, share to stumbleupon, print fasility, blog this, email this, and button komentar. Penempatannya saya setting Ok sekarang mari kita bahas cara membuat share box, ikuti langkah berikut.

Log in ke blog anda
Klik Rancangan
Klik Edit HTML
Centang Expand Template Widget
Masukkan kode berikut di bawah kode <div class='post-header-line-1'/>

<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 #FFF;  width:260px;  border:4px solid #d8dfea}
.fb-like-boxtop{ background:none repeat scroll 0 0 #EDEFF4;  border:1px solid #D8DFEA;  color:#000;  float:right;  font-size:11px;  margin:0 0;  padding:5px 10px;  text-align:left;  width:230px}
.fb-like-boxtop a{ color:#000;  text-decoration:none}
.fb-like-boxtop a:hover{ color:#000;  text-decoration:underline}
.fb-like-box{ background:none repeat scroll 0 0 #EDEFF4;  border:1px solid #D8DFEA;  color:#000;  float:right;  font-size:11px;  height:60px;  margin:5px 0;  overflow:hidden;  padding:5px 10px;  text-align:left;  width:230px}
</style>

<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>
</b:if>

Selanjutnya Simpan Template dan lihat hasilnya
Selamat mencobad dan sukses selalu

"keep spirits and do the best"

Share :

Facebook Twitter Google+