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

Tweet