Thursday, April 12, 2012

Menaruh Pesan di Sticky Bar Dengan Tombol Tutup


Sudah beberapa hari saya tidak membagikan tutorial tentang blog dan kali ini akan saya bagikan lagi sebuah tutorial untuk menaruh pesan di widget Sticky Bar. Kira-kira bagaimana sih tampilannya ? kamu bisa lihat seperti Gambar di atas dan langsung saja langkah-langkahnya di bawah ini:

1. Masuk ke Blogger.com

2. Klik Rancangan --> Edit HTML --> Cari kode ]]></b:skin> Kemudian kamu salin kode CSS di bawah ini dan letakan di atas kode ]]></b:skin>.

#mbt_bar{
background:#333 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJGQ2RQ7OnZu6M1xRt-59phar0mW5Gev4MGbGIlFddLt3gzMTDukfNaPS5bWqEiyYCz3LTXonBOGr2sR6IgNIZ40Vm8aokmhrkMxzMax8CEPW3p4blZgnh4Z2OQxlFrG0Ly-lqQY_a6Qc/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;}

3. Kemudian kamu cari lagi kode </head>, setelah itu kamu salin kode javascript di bawah ini dan letakkan yang sudah kamu salin di atas kode </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>

4. Kamu cari lagi kode <body>, kamu salin lagi kode di bawah ini dan letakan di bawah kode <body>.

<div id='mbt_bar'> INGIN MENJADI PENULIS TAMU DI BLOG INI ?
<a href='http://hzndi.blogspot.com/2012/06/menjadi-penulis-di-blog-hzndi.html'>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/AVvXsEg8s2PLNjAZuP69tEDlbnfobv7A4J8_1rvSmfB8rkkX5dHaCXNQowJfN4ouiPpB7gHzQPQtzpShVwsI3vcD1So29lrIGeBIDDp0dJ5PfPg6lAHguLSDgfP9lODxThIPfUeHCGVIpHpPGNo/s400/cancel.png' style='cursor:hand;cursor:pointer;'/></span></div>
<br/><br/>

NOTE :

- Tulisan yang berlatar belakang berwarna kuning kamu ganti dengan kata-kata kamu sendiri.
- Kode yang berwarna biru adalah alamat URL yang bisa kamu taruh, ganti juga kata yng berwarna biru berlatar belakang kuning dengan kata-kata kamu sendiri.

5. Simpan template, Kode di atas di dapatkan dari mybloggertricks.com. Kunjungi juga situs-nya yah :)

Postingan Terkait:

12 comments:

  1. kunjungan gan .,.
    bagi" motivasi
    kesuksesan tidak akan mendatangi anda, kecuali anda mengejarnya.,.
    si tunggu kunjungan baliknya gan.,

    ReplyDelete
  2. terima kasih untuk infonya sob :-D

    ReplyDelete
  3. Replies
    1. iya dong sob di usahakan selalu update ehehe

      Delete
  4. demonya seperti gambar di atas ya Gan??

    ReplyDelete
  5. Hahahaha... gue tau gan! Lu copas kan? Ketauan banget, dari kodenya! lu copas dari blog luar negri kan? . huuuuuu.............

    ReplyDelete
  6. Thanks for sharing a great post. I appreciate your thinking

    ReplyDelete

Komentarmu menunjukan kecerdasanmu, Kalau komentar cuma buat cari link buat apa ? :)

Twitter Delicious Facebook Digg Stumbleupon Favorites More