membuat widget social share melayang responsif

Artikel terkait : membuat widget social share melayang responsif

membuat widget share sosial media melayang di samping blog agar artikel kita dapat dibagikan oleh para pembaca , mungkin sudah banyak yang memanfaatkannya agar pengunjung dapat membagikan artikel ke sosial media , karena pengguna sosial media sangat melimpah . ini bisa menjadi tombol panen trafik , karena jika ada orang yang menyukai artikel anda dan dia menyebarkan nya dengan cara yang sangat mudah dengan menekan tombol share saja, ke teman teman nya . otomatis temannya akan muncul rasa ingin tahu dan membukanya

BACA : CARA MENGHILANGKAN TANGGAL PADA ARTIKEL

Caranya cukup simpel dengan cara menambahkan widget saja , ini mungkin memang hal sederhana tapi dengan widget ini orang orang dapat dengan mudah membagikan kiriman anda yang ia ke berbagai media sosial tanpa repot ,

Langsung saja kita akan melanjutkan tutorialnya

WIDGET PERTAMA
widget pertama  responsif

<!--Widget Share like FB tweet google plus digg Button Melayang Start--><style>#pageshare {position:fixed; bottom:15%; right:10px; float:left; border: 1px solidblack; 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="bagikan ke teman anda">

<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: 8px;text-align:center;">

<a href="http://kumiseoblogspot.co.id/2016/06/membuat-widget-social-melayang.html"  target="blank"><font color="blue">Get Widget Here<font></font></font></a></div>

</div>

<!--Widget Share like FB tweet google plus digg  Button Melayang End-->

WIDGET KEDUA
widget kedua seperti gambar dibawah ini

KANAN

<!--widget by http://kumiseo.blogspot.com--> <script type="text/javascript">var switchTo5x=true;</script> <script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script> <script type="text/javascript" src="http://s.sharethis.com/loader.js"></script> <script type="text/javascript">stLight.options({publisher: "1f446043-8507-4fbd-b382-cd21d7c439c0", doNotHash: false, doNotCopy: false, hashAddressBar: false});</script> <script>var options={ "publisher": "1f446043-8507-4fbd-b382-cd21d7c439c0", "position": "left", "ad": { "visible": false, "openDelay": 5, "closeDelay": 0}, "chicklets": { "items": ["facebook", "twitter", "linkedin", "pinterest", "email", "sharethis"]}};var st_hover_widget = new sharethis.widgets.hoverbuttons(options);</script>
<!--widget end http://kumiseo.blogspot.com-->

KIRI

<!--widget by http://kumiseo.blogspot.com--> <script type="text/javascript">var switchTo5x=true;</script> <script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script> <script type="text/javascript" src="http://s.sharethis.com/loader.js"></script> <script type="text/javascript">stLight.options({publisher: "1f446043-8507-4fbd-b382-cd21d7c439c0", doNotHash: false, doNotCopy: false, hashAddressBar: false});</script> <script>var options={ "publisher": "1f446043-8507-4fbd-b382-cd21d7c439c0", "position": "left", "ad": { "visible": false, "openDelay": 5, "closeDelay": 0}, "chicklets": { "items": ["facebook", "twitter", "linkedin", "pinterest", "email", "sharethis"]}};var st_hover_widget = new sharethis.widgets.hoverbuttons(options);</script>
<!--widget end http://kumiseo.blogspot.com-->

WIDGET KETIGA
widget ketiga penampilan nya lebih bagus

<!-- Start Shareaholic Sassy Bookmarks HTML-->    <div class='shr_ss shr_publisher'>    </div>    <!-- End Shareaholic Sassy Bookmarks HTML -->    <!-- Start Shareaholic Sassy Bookmarks settings -->    <script type='text/javascript'>    var SHRSS_Settings = {"shr_ss":{"src":"//dtym7iokkjlif.cloudfront.net/media/downloads/sassybookmark","link":"","service":"5,7,2,313,38,201,88,74","apikey":"b87f5899d80a5edce8b5e55f58542ef0f","localize":true,"shortener":"bitly","shortener_key":"","designer_toolTips":true,"tip_bg_color":"black","tip_text_color":"white","viewport":true,"twitter_template":"${title} - ${short_link} via @Shareaholic"}};    </script>    <!-- End Shareaholic Sassy Bookmarks settings -->    <!-- Start Shareaholic Sassy Bookmarks script -->    <script type='text/javascript'>    (function() {    var sb = document.createElement("script"); sb.type = "text/javascript";sb.async = true;    sb.src = ("https:" == document.location.protocol ? "https://dtym7iokkjlif.cloudfront.net" : "http://cdn.shareaholic.com") + "/media/js/jquery.shareaholic-publishers-ss.min.js";    var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(sb, s);    })();    </script>    <!-- End Shareaholic Sassy Bookmarks script -->

---

Jika sudah memilih widget mana yang diinginkan , Copy kode tersebut
dan simpan di

Dan , Tambahkan widget ke salah satu tempat di tata letak -> pilih Html/javascript , -> simpan ..
Jika anda kesulitan , tinggalkan komentar
semoga bermanfaat bagi anda yang berkunjung , dan ikuti terus update blog ini . dan baca juga tentang membuat sitelink dengan mudah