Monday, August 27, 2018
Membuat sticky bar sendiri dengan tombol close di blog
Membuat sticky bar sendiri dengan tombol close di blog
Membuat sticky bar sendiri dengan tombol close di blog - Sticky bar bisa digunakan untuk menaruh pesan - pesan anda, promote artikel unggulan anda dll. Ok, screenshootnya seperti ini :
1. Login blog -> Template.
2. Edit HTML -> Lanjutkan.
3. Centang expand template widget -> gunakan ctrl dan f.
4. Cari kode ]]></b:skin> -> Letakan kode CSS dibawah ini diatasnya.
5. Letakkan kode berikut diatas tag </head>.
6. Cari lagi, kode <body>. Untuk kode kali ini, gak perlu deh agan cari menggunakan Ctrl dan f. Cukup dengan scroll halaman ke bawah, sampai pucuk. Sudah ketemu? letakkan kode berikut dibawahnya ya.
7. Save & Liat hasilnya!
1. Login blog -> Template.
2. Edit HTML -> Lanjutkan.
3. Centang expand template widget -> gunakan ctrl dan f.
4. Cari kode ]]></b:skin> -> Letakan kode CSS dibawah ini diatasnya.
- #mbt_bar{
background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyrNEWI-VSZrGMfraIt6aje1bIcTv1HV2qVLvb17yDzkETBueVYmysW8br_cmkfVrjjp9-NV27fIdcyzKxZXOSMps1PV9_CNQ2EwcIaxtfb1N191k2KI1tlllF-LJtlX3VHbiVLjCUWwE/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;
}
5. Letakkan kode berikut diatas tag </head>.
- <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>
6. Cari lagi, kode <body>. Untuk kode kali ini, gak perlu deh agan cari menggunakan Ctrl dan f. Cukup dengan scroll halaman ke bawah, sampai pucuk. Sudah ketemu? letakkan kode berikut dibawahnya ya.
<div id=mbt_bar> INGIN MENJADI PENULIS TAMU DI BLOG INI ?<a href=http://fauzischolovers.blogspot.com>KLIK DISINI</a><span style=padding:0px; float:right><img align=absmiddle border=0 onClick=closeTopAds();return false; src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfHPAWCeQOPPqVcIhhdmJa70r82crO2kak-Iz6ZMcOxLvwkJXRyvVKqzMTFtVVq2Fcdr1OlaSXtqiyI8TjqniB1WTq9SzIlG7St126ZoYTnIlOBdW-NUi2l6Upm8yvSG0BlSDZZrZfeXY/s400/cancel.png style=cursor:hand;cursor:pointer;/></span></div><br/><br/>
7. Save & Liat hasilnya!