Beranda » Navigasi » Floating Horizontal Bar Social Sharing untuk BlogSpot

Floating Horizontal Bar Social Sharing untuk BlogSpot

Floating Horizontal Bar Social Sharing untuk BlogSpot

Situs Jejaring Sosial telah menjadi pusat kegiatan internet karena mampu menarik setiap pengguna yang menggunakan internet baik dari sekolah, kantor atau rumah. Sekarang ini setiap Orang akan suka Berbagi artikel bagus dengan komunitas sosial yang menguntungkan setiap orang dan tentunya para penyedia artikel. Ini penting untuk setiap blogger dan webmaster untuk mengintegrasikan Social Sharing atau Seperti tombol sharing, bookmarking di Blog mereka, sehingga pengunjung dapat berbagi kepada orang lain di situs jejaring sosial, ini tidak hanya akan memberikan cakupan tetapi juga akan membangun pembaca setia.

Lihat demo Floating / Scrolling tombol sosial sharing di bawah ini.

Cara Install Ini di Blog Blogger/Blogspot:

Langkah-langkah yang dibuat sedemikian rupa sehingga setiap pengunjung dapat dengan mudah mengikuti kemudian tanpa menghadapi masalah apapun, jadi hanya mengikuti petunjuk seperti yang disebutkan di bawah ini.

LANGKAH # 1: Menambahkan Plugin jquery Dalam Blogger Template:

Buka Blogger.com >> Blog Anda >> Template
Sekarang Backup template Anda.
Kemudian pilih Edit HTML
Cari kode tag </ head> dan paste kode berikut di atasnya.

<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='http://mbl-flipper-google-blogger.googlecode.com/files/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 Sosial Sharing di Blogger Template:

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

<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/AVvXsEiadS2mzp1wpBD7nl2NGoC6Wa-isWn5T06v5Kqrbe2EtSYy7BEIF9XUkn5YToRZRIvB9YXWweP4Bahx8GSOUmt5ipKQzGQR7dOhen60IpbglERmaSYoyBlwjqOutqG6a4QPysjSAYYcp0Rp/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 dan Simpan Template Anda dengan menekan tombol Simpan Perubahan.

Selamat kini anda punya tombol horizontal floating sosial sharing...

Floating Horizontal Bar Social Sharing untuk BlogSpot

Belum ada tanggapan untuk "Floating Horizontal Bar Social Sharing untuk BlogSpot "

Post a Comment