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
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
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.
5. Lalu klik save dan lihatlah hasilnya
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js' type='text/javascript'/>
<b:if cond='data:blog.pageType == "item"'>
<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>
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"'>
<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='"//www.facebook.com/plugins/like.php?href=" + data:post.url + "&send=false&layout=button_count&width=80&show_faces=false&action=like&colorscheme=light&font&height=21"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:80px; height:21px;'/>
</td>
<td>
<div class='w2bPinitButton' expr:id='"w2bPinit-" + data:post.id' style='display: none;visibility: hidden;height: 0;width:0;overflow: hidden;'>
<data:post.body/>
<script type='text/javascript'>
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>
<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>
5. Lalu klik save dan lihatlah hasilnya
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.
{ 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...