Cara Membuat Social Like Button Sticky Melayang, Sobat blogger, Widget Social Like button sticky ini adalah sebuah widget social yang terdapat di pinggir tampilan blog, cukup ringan dan tentunya responsif. Yang di maksud sticky ini adalah melekat dan widget ini juga melayang kemanapun kita scrool, widget social like ini juga muncul di semua halaman, untuk kelebihannya adalah untuk memudahkan supaya pengunjung mengklik tombol like social media yang terdapat di sebuah posting atau blog kita, meski widget ini muncul di semua halaman namun penempatan widget ini tidak akan menggangu pembaca, karena widget ini berada di luar post body oke sobat blogger, jika anda ingin membuat sticky widget like social ini, silahkan ikuti tutorial berikut:
Cara Membuat Social Like Button Sticky Melayang
1. Pertama buka akun blogger.2. Pilih menu tata letak > Add widget >Pilih HTML/Java script.
3. Lalu paste semua code di bawah ini tepat di kolom pop up widget yang muncul
<!-- floating share bar Start sepintasseo.blogspot.com-->
<style type="text/css">
#pageshare {position:fixed; bottom:15%; margin-left:-71px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;/*bs-fsmsb*/margin:5px 5px 0 5px;}
</style>
<div id='pageshare' title="Get this from sepintasseo.blogspot.com">
<div class='sbutton' id='like' style='margin-left:8px;'>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-send="false" data-layout="box_count" data-width="40" data-show-faces="false"></div>
</div>
<div class='sbutton' id='rt'>
<script src="http://tweetmeme.com/i/scripts/button.js" type='text/javascript'></script>
</div>
<div class='sbutton' id='su'>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</div>
<div class='sbutton' id='digg' style='margin-left:3px;width:48px'>
<script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script>
<a class="DiggThisButton DiggMedium"></a>
</div>
<div class='sbutton' id='gplusone'>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall"></g:plusone>
</div>
<div style="clear: both;font-size: 9px;text-align:center;">Get <a href="http://www.sepintasseo.blogspot.com/">widget</a></div><!-- Do not remove this link -->
</div>
<!-- floating share bar End -->
4. Klik save.
Catatan : Agar widget tersebut muncul di bagian kiri template, pastikal letakan widget tersebut penempatannya seperti contoh gambar dibawah ini.
Tag :
Widget
0 Komentar untuk "Cara Membuat Social Like Button Sticky di Blog"