Keyword: Cara Membuat Banner Footer Auto Hide
Pada kesempatan kali ini, ane mau berikan sedikit tips tentang cara membuat banner footer auto hide pada blog. Pada dasarnya banner footer auto hide juga lumayan bagus untuk tampilan blog.
Berikut caranya.
Pertama
- Masuk Blogger
- Template
- Pilih Edit HTML
- Cari Kode ]]></b:skin>
Kemudian letakan kode dibawah ini tepat diatas kode ]]></b:skin>
#Blog-Banner{margin-top: -11px;
margin-left: 0px;
width: 1045px;
height: 28px;
margin-bottom: 10px;
text-align: center;
background: #303030;
border: 2px solid#ad1010;border-radius: 5px;
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
overflow: hidden;
-webkit-box-shadow: 0px 0px 10px #ad1010;
-mox-box-shadow: 0px 0px 10px #ad1010;
-ms-box-shadow: 0px 0px 10px #ad1010;
-o-box-shadow: 0px 0px 10px #ad1010;
box-shadow: 0px 0px 10px #ad1010;}
#Blog-Banner h2{color: #F3F3F3;
font-family:"Bitter",arial,sans-serif;
margin-bottom: 5px;
font-size: 14pt;
text-align: center;
border-bottom: 1px solid #ad1010;
height: 27px;
}
#Blog-Banner:hover{height:75px;}
#team{position:absolute;margin-left:280px;height:310px;width:210px;overflow:hidden;background:transparent;margin-top:-150px;}
NB: Untuk tampilan warna, border dll, silahkan kalian sesuaikan sendiri sesuai style template kamu
Masih belum selesai nih. Selanjutnya kalian cari kode
footer id='footer-wrapper' / div id='footer-wrapper' . Tergantung template, tapi yang terpenting kalian cari saja yang berhubungan dengan footer wrapper.
Kemudian letakan kode dibawah ini tepat diatasnya.
<div id='Blog-Banner'><h2>Banner 88x31</h2>
<a href='#' title='Your ADS Here'><img alt='Your ADS Here' src='http://i.imgur.com/dYtCT1D.gif'/></a>
<a href='#' title='Your ADS Here'><img alt='Your ADS Here' src='http://i.imgur.com/dYtCT1D.gif'/></a>
<a href='#' title='Your ADS Here'><img alt='Your ADS Here' src='http://i.imgur.com/dYtCT1D.gif'/></a>
<a href='#' title='Your ADS Here'><img alt='Your ADS Here' src='http://i.imgur.com/dYtCT1D.gif'/></a>
<a href='#' title='Your ADS Here'><img alt='Your ADS Here' src='http://i.imgur.com/dYtCT1D.gif'/></a>
<a href='#' title='Your ADS Here'><img alt='Your ADS Here' src='http://i.imgur.com/dYtCT1D.gif'/></a>
<a href='#' title='Your ADS Here'><img alt='Your ADS Here' src='http://i.imgur.com/dYtCT1D.gif'/></a>
<a href='#' title='Your ADS Here'><img alt='Your ADS Here' src='http://i.imgur.com/dYtCT1D.gif'/></a>
<a href='#' title='Your ADS Here'><img alt='Your ADS Here' src='http://i.imgur.com/dYtCT1D.gif'/></a>
<a href='#' title='Your ADS Here'><img alt='Your ADS Here' src='http://i.imgur.com/dYtCT1D.gif'/></a>
</div>
Setelah itu kalian edit sendiri dengan gambar, link, dan judul banner teman kalian.
Setelah itu Save dan lihat hasilnya :D
NB: Untuk Copy paste semua kode diatas, silahkan kilik
DISINI
Artikel ini saya ekspor dari salah satu blog saya.