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>
//<![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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2yNhyphenhyphenI1xtpJ5FuakdvUDGlTCXC6cfIjAdGgOuo2ZAlHGUmwFkuuS_tevJ_c96Ky2b_PL6w9omRtUWoF512YFAJLg9gJCoBKc6VArFOJ6eh_I-K7e817X4eGtmjqZYPSbM7Lrhx4fN738/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&send=false&layout=button_count&width=80& show_faces=false&action=like&colorscheme=light&font&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: 'en-US'} </script>
Silakan anda mencobany ^_^
- 5 Toolbar Sosial Yang Membantu Meningkatkan Keterlibatan Pengunjung Blog Anda
- Tips SEO Killer Untuk Pemula
- Cara Membuat Plugin Wordpress Yang Sederhana
- Kumpulan Kreasi Membuat Tombol Sosial Share Widget Di Blog
- Cara Menghubungkan Blogger Ke Google Plus
- Cara Membuat StickyBar Sosial web Tombol Facebook Like Dan Google Plus
- 3 Widget Plugin Related Post With Image Terbaik Yang Wajib anda Gunakan
2 komentar:
ok , tak coba langsun praktekn
Makasih infornya,.. aku coba nih,..
Posting Komentar
Silakan Anda Mengomentari Postingan Ini, tapi Jangan di Spamming ya