Cara Membuat StickyBar Sosial web Tombol Facebook Like Dan Google Plus

Sticky bar sosial
Mungkin sebagian dari anda belum mengetahui apa itu Stickybar. Kalau saya memberikan demo webnya anda mungkin abru mengerti apa Stickybar. Silakan anda melihat di demo webnya saya.


Nah seperti itulah contoh apa itu stickybar. Bila anda ingin membuat tampilan yang lain lagi cara membuat stickybar silakan anda melihat artikel saya yang lain di 5 Toolbar Sosial Yang Membantu Meningkatkan Keterlibatan Pengunjung Blog Anda

Ok, untuk membuatnya berikut ini caranya :

  • Login ke Blogger >> Rancangan >> Edit HTML
  • Backup dulu template blog anda. Dengan Download Template anda.
  • Cari kode seperti ini   ]]></b:skin>
  • Copy kodenya tepat dibawah kode diatas.
<script type='text/javascript'> 
//<![CDATA[ 
var mbt_arr = new Array(); 
var mbt_clear = new Array(); 
function mbtFloat(mbt) { 
mbt_arr[mbt_arr.length] = this; 
var mbtpointer = eval(mbt_arr.length-1); 
this.pagetop = 0; 
this.cmode = (document.compatMode && document.compatMode!="BackCompat") ? document.documentElement : document.body; 
this.mbtsrc = document.all? document.all[mbt] : document.getElementById(mbt); 
this.mbtsrc.height = this.mbtsrc.offsetHeight; 
this.mbtheight = this.cmode.clientHeight; 
this.mbtoffset = mbtGetOffsetY(mbt_arr[mbtpointer]); 
var mbtbar = 'mbt_clear['+mbtpointer+'] = setInterval("mbtFloatInit(mbt_arr['+mbtpointer+'])",1);'; 
mbtbar = mbtbar; 
eval(mbtbar); 

function mbtGetOffsetY(mbt) { 
var mtaTotOffset = parseInt(mbt.mbtsrc.offsetTop); 
var parentOffset = mbt.mbtsrc.offsetParent; 
while ( parentOffset != null ) { 
mbtTotOffset += parentOffset.offsetTop; 
parentOffset = parentOffset.offsetParent; 

return mbtTotOffset; 

function mbtFloatInit(mbt) { 
mbt.pagetop = mbt.cmode.scrollTop; 
mbt.mbtsrc.style.top = mbt.pagetop - mbt.mbtoffset + "px"; 

function closeTopAds() { 
document.getElementById("mbt_bar").style.visibility = "hidden"; 

//]]> 
</script>



  • Kemudian cari kode seperti ini <body>
  • Copy kodenya dan ditaruh dibawah kode tersebut.
<div id='mbt_bar'> <span style='padding-right:5px; float:right'> <img align='absmiddle' border='0' onClick='closeTopAdsundefined);return false;' src='http://1.bp.blogspot.com/-MSEzL6EtjrM/Tt-hrSkKVnI/AAAAAAAAFiQ/AGUGFpnSUHk/s400/cancel.png' style='cursor:hand;cursor:pointer;'/></span><div style='float:left; padding-left:10px;'>Stickybar with social Plugins</div> <div style='float:right; padding-right:0px;'> <p style='font:bold 12px arial; float:left; margin:5px;'>Liked us?</p><iframe allowTransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fsosialwebinfo&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' style='border:none; overflow:hidden; width:80px; height:21px;'/> <g:plusone href='http://www.sosialwebinfo.blogspot.com' size='medium'/> </div> </div>


Keterangan : 


sosialwebinfo : Ganti dengan id username facebook Fans page anda.


Bila di blog anda sudah ada tombol Google Plus, dan ingin melewati beberapa langkah diatas dengan menghilangkan tombol Google plus di Stickybar, silakan anda menambahkan kodenya dengan :

Cari kode seperti ini ]]></b:skin>> Kemudian copy kodenya seperti ini <script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script> 

Silakan anda mencobany ^_^

blog, blogspot

2 komentar:

ganesa mebel on 29 Februari 2012 08.44 mengatakan...

ok , tak coba langsun praktekn

Obat Herbal Kista on 15 September 2012 11.40 mengatakan...

Makasih infornya,.. aku coba nih,..

Posting Komentar

Silakan Anda Mengomentari Postingan Ini, tapi Jangan di Spamming ya

 

© 2011 Sosial Web Info| Sitemap

About Us | Contact Us | Write For Us

Bloggers - Meet Millions of Bloggers My Zimbio