Cara Membuat Floating Share Social Media

Cara Membuat Floating Share Social Media - Nah sesuai dengan judul dan gambar diatas, kalian sudah tahu bukan apa fungsinya,...

Yup fungsinya memudahkan sobat atapun pengunjung untuk share artikel atau postingan yang telah sobat buat, cara kerjanya saat pengunjung scroll atau membaca ke halaman bawah social bookmar/media itu ikut bergerak sesuai dengan saat kita bergerak kebawah, contoh ada pada gambar diatas, nah tidak usah panjang lebar, ikuti saja caranya dibawah ini :

Step :
1. Buka akun blogger sobat

2. Masuk ke menu EDIT HTML dan tentunya jangan lupa untuk mencentang Expand Template Widget

3. Lalu cari kode </head> dan letakkan kode dibawah ini tepat diatas kode yang dicari tadi

<b:if cond='data:blog.pageType == "item"'>

/*<![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>

/*<![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>

/*<![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>

Catatan : Jika template sobat sudah ada menggunakan jquery seperti pada tulisan merah di atas maka hapus saja jquery tersebut agar memperlancar scrolling bar berjalan.
dan kode yang berwarna biru adalah untuk backgroundnya.

4. Lalu cari lagi kode seperti ini <data:post.body/> dan pastekan kode dibawah ini tepat diatas kode yang dicari tadi.

<b:if cond='data:blog.pageType == "item"'>

<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>

</td>

<td>

<data:post.body/>

w2bPinItButton({

url:"<data:post.url/>",

thumb: "<data:post.thumbnailUrl/>",

id: "<data:post.id/>",

defaultThumb: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-mEv0zTIyMUu3FNWWLcVf_lyfHB4WWStjOztv-2tZC-NlCiP3cTQ3kaMzj5K3xADxpjDqfo2KVuWcOWQEOv3_DxqiDVVCjM2a17ZzH4TP0jpU2bZlr7_FJyJ8B4jhbxTDgnbsIVz4727g/s1600/w2b-no-thumbnail.jpg",

pincount: "horizontal"

});

</script>

</div>

</td>

<td>

</td>

<td>

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

</td>

<td>

</td>

</tr>

</table>

</div>

</b:if>

5. Lalu klik save dan lihatlah hasilnya

sumber : http://d-copy.blogspot.com/2012/11/social-sharring-horizontal-bar-mendatar-untuk-blogger.html

Share Please :

Posted by : Keiruchan Agatha ~ / Portal Media Informasi Pilihan

Anda telah membaca artikel Cara Membuat Floating Share Social Media Ditulis oleh Keiruchan Agatha pada Minggu, 25 November 2012. Kritik dan saran dapat disampaikan via kotak komentar. Anda diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link yang ada di bawah sebagai sumbernya. Atas perhatiannya saya ucapkan terimakasih. Salam blogger and Happy blogging.

<a href="http://republicofnote.blogspot.com/2012/11/cara-membuat-floating-share-social-media.html" target="_blank">Cara Membuat Floating Share Social Media</a>

Baca Yang Ini Juga Boz :

Tips and Tricks

Blog

Social Media

{ 0 komentar... read them below or add one }

Posting Komentar

Silahkan tinggalkan komentar anda dengan tidak meninggalkan link. Jika ada kesalahan dalam artikel ini dan jika ada saran dan kritik silahkan tulis komentar anda dibawah dengan baik dan sopan... ;)
Dan jika kedapatan link yang mati dalam penempatan software atau game harap beritahukan agar segera diperbaiki...