Cara Membuat Floating Social Sharing Horizontal Bar Untuk BlogSpot

Situs Jaringan Sosial telah menjadi pusat kegiatan internet karena mampu menarik setiap pengguna yang menggunakan internet baik dari sekolah, kantor atau rumah. Sekarang para blogger lebih suka berbagi artikel dengan memanfaatkan jejaring sosial. Hal ini penting untuk setiap blogger dan webmaster untuk mengintegrasikan Social Sharing atau tombol Like di Blog mereka, sehingga pengunjung mereka dapat berbagi cerita di website jejaring sosial terbaik, hal tersebut dilakukan untuk membangun pembaca setia. Ada unlimited Social Share widget yang tersedia di berbagai blog, tetapi itu kurang dalam tombol penghitung. Sekarang saya akan berbagi jenis sosial media yang sama dari Widget untuk Blogger yang terdiri dari Facebook , Twitter , Google Plus, Pinterest , Digg dan Stumbleupon.

Fitur Floating / Scrolling Berbagi Sosial Horizontal Bar Untuk Blogger :

- Fitur yang paling mengesankan dari widget ini adalah, gulungan bersama dengan layar seperti sebuah bar

kecil yang lengket.

- Widget ini mulai bergulir sejak ditempatkan di blog Anda dan mengapung sampai bagian komentar .

- Memiliki Facebook Like , Twitter Berbagi , Google+ 1 , Stumble it , Pin itu dan tombol Digg .

- Menggunakan script code Jquery dan CSS sehingga akan terlihat cantik dan sangat ringan.

Cara Install Ini di Blogger BlogSpot Blog :

Langkah-langkah untuk membuat widget tersebut sobat cukup ikuti petunjuk seperti yang disebutkan di bawah ini.

LANGKAH # 1 : Menambahkan Plugin Jquery Pada Template Blogger :

- Kembali ke Blogger.com >> Blog Anda >> Template

- Sekarang Backup template Anda .

- Kemudian pilih Edit HTML >> Lanjutkan

- Jangan lupa untuk Klik / Centang Expand Template Widget kotak .

- Cari kode </head> dan tepat di atasnya copypaste HTML follow + JavaScript + kode CSS.


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js' type='text/javascript'/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<style type='text/css'> /*

<![CDATA[*/

#mblSocialFloat {clear:both;padding: 6px 0;display:block;background:#FFFFFF;}

#mblSocialFloat td{padding:4px;margin:0;border:none;}

#mblSocialFloat td iframe{max-width:82px;width:82px !important;} #mblSocialFloat.mblFloatSocial{position: fixed;top:0;z-index:9999999;border-bottom:1px solid #ccc;-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.15);-moz-box-shadow:0 1px 1px rgba(0,0,0,0.15);box-shadow:0 1px 1px rgba(0,0,0,0.15);}

/*]]>*/

</style>



<script type='text/javascript'>

/*<![CDATA[*/

// Set the Top Offset

$theOffset = 0; jQuery(document).ready(function(b){

var a=b("#mblSocialFloat");a.wrap('

<div id="mblSocialPlaceholder"></div>')

.closest("#mblSocialPlaceholder").height(a.outerHeight());a.width(a.outerWidth());e=a.offset().top-$theOffset;b("#mblSocialFloat iframe[src*=plusone]").closest("div").css("max-width","82px");b(window).scroll(function(){d=b(this).scrollTop();d>=e?a.addClass("mblFloatSocial"):a.removeClass("mblFloatSocial");f=b(".post");if(f.length!=0){c=f.outerHeight()+f.offset().top;d>=c?a.stop().animate({top:"-150px"}):a.stop().animate({top:$theOffset+"px"})}else d>=e?a.css("top",$theOffset+"px"):a.css("top","0")})});

/*]]>*/

</script>

<script src='https://asb-project.googlecode.com/svn/trunk/mbl_blogger_pinit.js' type='text/javascript'/>



<script type='text/javascript'>

/*<![CDATA[*/

// Twitter

(function(a,b,c){var d=a.getElementsByTagName(b)[0];if(!a.getElementById(c)){a=a.createElement(b);a.id=c;a.src="//platform.twitter.com/widgets.js";d.parentNode.insertBefore(a,d)}})(document,"script","twitter-wjs");

// Google + (plus)

(function(){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://apis.google.com/js/plusone.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})();

// Stumbleupon

(function(){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://platform.stumbleupon.com/1/widgets.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})();

// Digg 

(function(){var a=document.createElement("SCRIPT"),b=document.getElementsByTagName("SCRIPT")[0];a.type="text/javascript";a.async=true;a.src="http://widgets.digg.com/buttons.js";b.parentNode.insertBefore(a,b)})();

 /*]]>*/

</script>

</b:if>

LANGKAH # 2 : Menambahkan Tombol Horizontal Social Sharing di Template Blogger :

Sekarang saatnya menambahkan potongan terakhir dari kode, Cari kode <data:post.body/> dan sebelum / di atasnya paste coding berikut .


<!-- AjatShare.blogspot.com Floating Social Bar -->

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class='mblSocialFloat' id='mblSocialFloat'>

<table class='mblSocialFloat' width='100%'>

<tr>

<td>

<a class='twitter-share-button' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a>

</td>

<td>

<iframe allowTransparency='true' expr:src='&quot;//www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:80px; height:21px;'/>

</td>

<td>

<div class='w2bPinitButton' expr:id='&quot;w2bPinit-&quot; + data:post.id' style='display: none;visibility: hidden;height: 0;width:0;overflow: hidden;'> 

<data:post.body/>

<script type='text/javascript'>

w2bPinItButton({ 

url:&quot;<data:post.url/>&quot;, 

thumb: &quot;<data:post.thumbnailUrl/>&quot;, 

id: &quot;<data:post.id/>&quot;, 

defaultThumb: &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqC51AXzyyMCHC2QvrYWUZHjcnz-2OplJIQuSk9OInNQRH48dzSYlFyKaFPhXcl6HlCwAIDdb0U0MJN0bZBkwI-5CBDkuSA11AM_Oh3ngEaXQIjOtYA3N5cimuLRGy3Xe-A3KVHRHX0pGC/s1600/w2b-no-thumbnail.jpg&quot;, 

pincount: &quot;horizontal&quot; 

}); 

</script> 

</div>

</td>

<td>

<div class='g-plusone' data-size='medium' expr:data-href='data:post.url'/>

</td>

<td>

<su:badge expr:location='data:post.url' layout='1'/>

</td>

<td>

<a class='DiggThisButton DiggCompact'/>

</td>

</tr>

</table>

</div>

</b:if>

Sekarang semuanya selesai, jangan lupa Simpan Template Anda.

Jika menghadapi masalah ketika menambahkan widget ini jangan ragu untuk bertanya pada kolom komentar.

Widget ini diciptakan oleh My Blogger Lab dan terima kasih khusus kepada Harish Dasari untuk membantu kami. Jangan lupa untuk menghubungkan kembali jika Anda ingin berbagi tutorial ini.

Sumber