2 Cara Membuat Widget Bagikan ke Sosial Media Di Blog

Widget Bagikan/Share adalah widget yang sangat membantu untuk menyebarluaskan postingan kita. Pengunjung bisa dengan mudah untuk membagikannya kepada teman-temannya di sosial media seperti facebook, twitter, dan Google+. Hal ini pasti akan sangat menguntungkan bagi admin blog karena postingannya ada yang membantu menyebarkannya. BeST akan membantu sobat yang masih kesulitan membuat widget share ke berbagai media sosial dengan 2 cara. Yang pertama yaitu widget di sidebar dan yang kedua dibawah postingan.

Langsung saja kita mulai langkah-langkah membuat widget share ke facebook,twitter,dan google+ dibawah ini:

|> Cara 1: Membuat Widget Bagikan ke Sosial Media di Sidebar Blog atau Float

1. Masuk ke akun blogger anda.
2. Pilih Tata Letak > Tambahkan Gadget (pilih dimana saja)
3. Lalu pilih HTML/Javascript dan salinlah semua kode dibawah ini dan paste di halaman tadi.

<!--SideBar Floating Share Buttons Code Start-->
<style>
#pageshare {position:fixed; bottom:15%; left:10px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#eff3fa;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;-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>
<div id='pageshare' title="Share This With Your Friends">
<div class='sbutton' id='gb'><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class='sbutton' id='rt'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></div>
<div class='sbutton' id='gplusone'><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div>
<div class='sbutton' id='su'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>
<div class='sbutton' id='digg' style='margin-left:3px;width:48px'><script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script><a class="DiggThisButton DiggMedium"></a></div>
<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></div><br/><div style="clear: both;font-size: 12px;text-align:center;"><a href="http://belajarall.blogspot.com/2015/05/2-cara-membuat-widget-bagikan-ke-sosial.html" target="blank"><font color="black">Get This<font></font></font></a></div></div>

|> Cara 2: Membuat Widget Share ke Media Sosial di Bawah Postingan

1. Login ke akun blogger anda.
2. Lalu Pilih Template dan klik Edit HTML
3. Copy Paste kode berikut ini diatas kode ]]></b:skin>

.widgetshare {font:bold 12px/20px Tahoma !important; background: #333;border: 1px solid #444; padding: 5px 4px; color: #fff !important; margin-top: 10px;}

.widgetshare a{font:bold 12px/20px Tahoma !important; text-decoration: none !important; padding: 5px 4px; color: #fff !important; border: 1px solid #222; transition: all 1s ease;}

.widgetshare a:hover {box-shadow: 0 0 5px #00ff00; border: 1px solid #e9fbe9;}

.fcbok { background: #3B5999; }

.twitt { background: #01BBF6; }

.gplus { background: #D54135; }

.digg { background: #5b88af; }

.lkdin { background: #005a87; }

.tchno { background: #008000; }

.ltsme { background: #fb8938; }

    4. Lalu copy paste lagi kode berikut ini di bawah kode <data:post.body/> atau bisa juga kode

 <div class='post-footer'>  ( biasanya ada lebih dari satu kode , cari yg sesuai. kalo admin ada di kode terakhir )

<div class='widgetshare'>

Share artikel ke: 

<a class='fcbok' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' rel='nofollow' target='_blank'>Facebook</a> 

<a class='twitt' expr:href='&quot;http://twittter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Twitter</a> 

<a class='gplus' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Google+</a>

<a class='lkdin' expr:href='&quot;http://www.linkedin.com/cws/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Linkedin</a>

<a class='tchno' expr:href='&quot;http://technorati.com/faves?sub=addfavbtn&amp;add=&quot; + data:post.url' rel='nofollow' target='_blank'>Technorati</a>

<a class='digg' expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Digg</a>

<script>

//<![CDATA[

var uri = window.location.href;

var ttle = document.title;

document.write("<a href='http://www.lintas.me/?c=bookmarklet&url="+uri+"&title="+ttle+"' rel='nofollow' class='ltsme'>Lintasme</a>");

//]]>

</script>

</div>

Setelah itu silahkan simpan template anda dan lihat hasilnya.

Sekian semoga bermanfaat! jangan lupa komentar ya :)

Artikel Terkait

2 Cara Membuat Widget Bagikan ke Sosial Media Di Blog

4/ 5

Oleh Unknown

Unknown 6:44 AM Komentar