Thursday, April 12, 2012

Menaruh Pesan di Sticky Bar Dengan Tombol Tutup

11:00 AM Hzndi 12 comments


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:

Blogger
Social Sharing

Posted in: ,,,,

12 comments:

  1. outbound malangApril 12, 2012 at 1:51 PM

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

    ReplyDelete
  2. Cendekiawan ITApril 13, 2012 at 6:22 AM

    tutorialnya unik... ^_^

    ReplyDelete
  3. aimeApril 13, 2012 at 7:03 PM

    terima kasih untuk infonya sob :-D

    ReplyDelete
  4. RopinkApril 13, 2012 at 10:03 PM

    infonya banyak yang baru nich

    ReplyDelete
    Replies
    1. HzndiApril 14, 2012 at 2:33 PM

      iya dong sob di usahakan selalu update ehehe

      Delete
  5. Area Dangdut KoploApril 13, 2012 at 10:04 PM

    demonya seperti gambar di atas ya Gan??

    ReplyDelete
  6. Tony HendrawanOctober 9, 2012 at 6:38 PM

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

    ReplyDelete
  7. Syed Zeeshan AliJune 24, 2013 at 2:43 PM

    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