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 88x31 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
GK USAH DI KASIH SUMBER LAGI UDAH ADA TUH SUMBER NYA DI CARA MEMBUAT NYA :3