Cara pembuatan stickbar ini cukup mudah dan simple. Well, langsung saja ikuti langkah - langkah dibawah ini :
1. Pergi Untuk Blogger >> Template >> Edit HTML
2. Backup template Anda
3. Cari ini kode ini ]]></b:skin> dan letakkan kode dibawah diatas kode ]]></b:skin>
#mbt_bar{ background:#333 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVcgdYPvS03diudEgAjRD09Vf2u4eIWcKsCNfu-jYAM1j-i3Ckh6dBpH4GDALEIUp_jqX0Bu0YnHkWTKG8WcSgVatlfXUYLgnjWrRcjKa29M_yr01LQWBHlw4w7VtokZX6l6T2ODa0DkU/s400/stickybar.png') repeat-x; width:100%; margin:0 auto; text-align:center; padding:0px 0; border-bottom: 1px solid #888888; -moz-box-shadow: #666666 0px 1px 3px; -webkit-box-shadow: #666666 0px 1px 3px; box-shadow: #666666 0px 1px 3px; z-index: 999; height: 28px; position:fixed; line-height: 1.85em; vertical-align: baseline; letter-spacing: 1px; color:#fff; font-size:13px; font-weight:bold; font-family: arial,"Helvetica",sans-serif; } #mbt_bar a{ text-decoration:underline; color:#E2E504; } #mbt_bar a:hover{ text-decoration:none; } #mbt_bar p {margin:0; list-style:none;} #mbt_bar img {vertical-align: middle; margin-right: 6px;}4. Berikutnya cari </ head> dan paste kode Javascript berikut tepat di atasnya
<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>5. Terakhir cari kode <body> dan letakan kode dibawah ini dibawah kode <body>
<div id='mbt_bar'> Tulis kalimat Sobat Disini <span style='padding:0px; float:right'> <img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdKI3C3mpFWaeWasFePvio8U0lIFX9ISmF5PRi5mXHG38W3T1bFnKT2Kjl_FdQiBOdtJygwJoi_k0ISIayEL5fbqVbQ7gY8kx3uqb4vxAEYiVqChzf8ST2T-7P6TJlUmnEMcEzh4pgyEk/s400/cancel.png' style='cursor:hand;cursor:pointer;'/></span></div> <br/><br/>
Ganti Tulis kalimat Sobat Disini dengan kalimta sobat sendiri
6. Save dan selesaiiii. :D
Semoga artikel Cara Membuat Stickybar dengan "Close Button"? bermanfaat bagi sobat agoengsang dan selamat mencoba..
Read more: http://agoengsang.blogspot.com/2012/11/cara-membuat-stickybar-dengan-close.html#ixzz2DEp0Bq4e
Tidak ada komentar:
Posting Komentar