Loading...

Cara Membuat Floating Social Sharing Horizontal Bar Untuk BlogSpot

Adjat Sudradjat 02:43 12 Comments

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;http://4.bp.blogspot.com/-YZe-IcKvGRA/T8op1FIjwYI/AAAAAAAABg4/j-38UjGnQ-Q/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
Masukan email Anda untuk Dapatkan Update terbaru dari AjatShare BloggerPrint PDF
Adjat Sudradjat
Cara Membuat Floating Social Sharing Horizontal Bar Untuk BlogSpot - written by Adjat Sudradjat, published at 02:43, categorized as Widget . And have 12 comments
Facebook Twitter Google+ Linkedin Technorati Digg DMCA.com

12 comments

Tambah komentar

Cara Membuat Floating Social Sharing Horizontal Bar Untuk BlogSpot

Kalau cara bikin sidebar melayang seperti di blog mas ajat nih gimana ya ?

Buka alamat url di bawah ini:
http://ajatshare.blogspot.com/2014/02/cara-membuat-sidebar-widget-melayang-sticky-di-blogger.html
Ikuti dan pelajari dengan seksama.

wah jadi tampilan widget nya bisa ikut terus ya mas meskipun scroll nya di geser kebawah. Boleh juga nih dicoba ;)

Betul sis buat blog kita jadi kelihatan sedikit berbeda.

saya izin pelajari dulu kode scripnya yaa mas, suapay nanti bisa mengimbangi mas Adjat hahahaha

Trimakasih bermanfaat sekali untuk membuat social sharing nya kalau bar nya di turun kan menjadi melayang :D ... comment back :)

Ahh mas ini suka merendah, justru saya masih belajar ngeblog.

Betul gan melayang seperti layang-layang.... :D

lebih mudah untuk membagikan postingan ke sosmed yah mas :D

Betul Mas, terima kasih sudah berkunjung di blog ini.

seperti mas Adjat ini yang ilmunya sudah tinggi, blogg sudah mempunyai pagerank tetapi masih bilang belajar ngeblogg. thanks mas :)

  • Berkomentarlah dengan baik, sopan dan sesuai dengan isi konten serta tidak [SPAM].
  • Untuk menyisipkan kode dalam komentar harap di [Konversi] terlebih dahulu.
  • Jika ingin bertanya di luar judul artikel "Cara Membuat Floating Social Sharing Horizontal Bar Untuk BlogSpot". Harap menggunakan tombol [OOT].

Forum DiskusiOut Off Topic (OOT)Formulir KontakArsip Blog