Cara Membuat Banner 88x31 Auto Hide di Atas Footer


Assalamualaikum sobat. kali ini saya akan berbagi trik yang cukup sederhana.Trik ini saya berinama "Cara Membuat Banner 88x31 Auto Hide di atas Footer". Lumayan Panjang yah namanya.Yang Sebelumnya Saya Mempublikasikan sebuah artikel yang berjudul "Cara Membuat Banner 125x125 di Sidebar Blog".Emang udah serba banner yah zaman sekarang.Trik ini sebelumnya dipostkan oleh Go! Blog.dan mungkin tidak banyak yang saya edit.
Sebelum di Hover

Setelah di Hover
Cara Membuat Banner 88x31 Auto Hide di Atas Footer
- Login ke Blogger
- Masuk ke Menu edit template >> Edit HTML
- Lalu Cari kode ]]></b:skin> dan letakan kode dibawah ini tepat diatas kode tadi

#MZT-Blog-Banner{margin-top: -11px;

margin-left: -2px;

width: 968px;

height: 28px;

margin-bottom: 10px;

text-align: center;

background: #ddd;

border: 3px solid#ff5600;

-webkit-transition: all 0.7s ease-in-out;

-moz-transition: all 0.7s ease-in-out;

overflow: hidden;

-webkit-box-shadow: 0px 0px 10px #ff5600;

-mox-box-shadow: 0px 0px 10px #ff5600;

-ms-box-shadow: 0px 0px 10px #ff5600;

-o-box-shadow: 0px 0px 10px #ff5600;

box-shadow: 0px 0px 10px #ff5600;}

#MZT-Blog-Banner h2{color: #ff5600;

font-family: nova square;

margin-bottom: 5px;

font-size: 16pt;

text-align: center;

border-bottom: 2px solid #ff5600;

height: 27px;

}

#MZT-Blog-Banner:hover{height:75px;}

#team{position:absolute;margin-left:280px;height:310px;width:210px;overflow:hidden;background:transparent;margin-top:-150px;}
 - Kemudian Cari Kode Footer-wrapper kamu dan letakan kode dibawah ini tepat diatas kode Footer-wrappermu

<div id='MZT-Blog-Banner'><h2>Banner Footer</h2>

 <a href='http://maverickzetta.blogspot.com/' title='Maverick-Zetta'><img alt='This My Zetta Zone' src='http://i.imgur.com/gtrpB10.png'/></a>

<a href='http://maverickzetta.blogspot.com/' title='Maverick-Zetta'><img alt='This My Zetta Zone' src='http://i.imgur.com/gtrpB10.png'/></a>

<a href='http://maverickzetta.blogspot.com/' title='Maverick-Zetta'><img alt='This My Zetta Zone' src='http://i.imgur.com/gtrpB10.png'/></a>

<a href='http://maverickzetta.blogspot.com/' title='Maverick-Zetta'><img alt='This My Zetta Zone' src='http://i.imgur.com/gtrpB10.png'/></a>

<a href='http://maverickzetta.blogspot.com/' title='Maverick-Zetta'><img alt='This My Zetta Zone' src='http://i.imgur.com/gtrpB10.png'/></a>

<a href='http://maverickzetta.blogspot.com/' title='Maverick-Zetta'><img alt='This My Zetta Zone' src='http://i.imgur.com/gtrpB10.png'/></a>

<a href='http://maverickzetta.blogspot.com/' title='Maverick-Zetta'><img alt='This My Zetta Zone' src='http://i.imgur.com/gtrpB10.png'/></a>

<a href='http://maverickzetta.blogspot.com/' title='Maverick-Zetta'><img alt='This My Zetta Zone' src='http://i.imgur.com/gtrpB10.png'/></a>

<a href='http://maverickzetta.blogspot.com/' title='Maverick-Zetta'><img alt='This My Zetta Zone' src='http://i.imgur.com/gtrpB10.png'/></a>

<a href='http://maverickzetta.blogspot.com/' title='Maverick-Zetta'><img alt='This My Zetta Zone' src='http://i.imgur.com/gtrpB10.png'/></a>

  </div>
- Simpan Template

Nah, bagaimana sob.. Cukup jelas kan..
Sekian dan semoga bermanfaat..
Terimah Kasih

11 komentar

nyot nyot...:))

[+] http://dholmaru.blogspot.com [+]

Balas

Thanks Gan. Ini nih yang ane cari - cari.
Komenback Ya! :D

Balas

Sama-Sama Gan..
Komenback meluncur.. :-)

Balas

Ty gan, ane langsung coba gan,

kunjungan Balik Segera gan :D
bloggerunix.blogspot.com

Balas

tukeran banner yuk,cek aj alexanya di
http://fajar-pkp.blogspot.com

Balas

Silahkan ke Menu Tukar banner pak..
Disini http://zetta-zone.blogspot.com/p/exchange.html

Balas

Keren Mas !
Comment Back Ya !

Balas

keren gan, Ketauan Adminnya Gnteng Nh... hehehe
visit my blog https://thepinkiboy.blogspot.com/

Balas

Terima Kasih Telah Berkunjung Ke Blog yang Sederhana ini.Jika Anda ingin berkomentar mohon jangan Out Of Topic (OOT) dan sebarkan link-link porno dan sara.Sekian, Terimah Kasih.

Terima kasih sudah berkomentar