Membuat Banner 468x60 Auto Hide dibawah Header

Yay! Kali ini serba auto hide(hover) ya. kemarin aja aku post tentang Footer auto hide kali ini banner 468x60 di header yang auto hide.Guna auto hide agar kagak makan tempat.Namun, Setelah di Hover mouse dia akan makan tempat yah gitulah menurut saya :v .Kali ini Trik ini Saya dapatkan dari template Dark Orange Orbluz3r lihat tuh demonya ada serupa kayak hover-hover gitu kan ?? nah kali ini saya akan memberitahukan triknya.langsung saja ya sob.

Ini si Biasa :v

dan ini setelah di hover :D

Cara Membuat Banner 468x60 Auto Hide dibawah Header

- Login/Masuk ke Akun Blogger Sobat

- Lalu Masuk ke Menu Template >> Edit HTML

- Lalu Cari Kode ]]></b:skin> dan letakan kode dibawah ini tepat diatas kode tadi

.yangaslinya{display:inline;border-top:none;padding: 10px;

position: relative;

width: 1000px;

border: 2px solid #0052BE;

float: left;

background: #fff;

margin-left: -18px;

margin-bottom: 7px;

padding-top: 0px;

height: 20px;

text-align: center;

overflow: hidden;

transition: All 0.3s ease;

-webkit-transition: All 0.3s ease;

-moz-transition: All 0.3s ease;

-o-transition: All 0.3s ease;

}

.yangaslinya h2{margin-bottom: 11px;

display: inline;

color: #eee;

background: #0052BE;

text-align: center;

overflow: hidden;

padding: 5px;

font-size: 20px;}

.yangaslinya:hover{height:105px;}

#lalap2{width: 936px;

height: 60px;

margin: auto;

margin-top: 10px;

margin-bottom: 2px;

overflow: hidden;

background-color: #0052BE;

border: 5px solid #0052BE;

box-shadow: 0px 0px 7px #0F72F3;

-moz-transition: all 170ms ease-in;

-webkit-transition: all 170ms ease-in;

-o-transition: all 170ms ease-in;

position: relative;

text-align: center;}

- Lalu Cari Kode Header-wrapper kamu dan letakan kode dibawah ini tepat diatas kode header-wrappermu

<div class='yangaslinya'><h2>Banner 468x60</h2><div id='lalap2'><table><tr>

<td><a href='http://zetta-zone.blogspot.com/' target='_blank'><img alt='kazedama' src='http://i.imgur.com/AkRJx1m.png'/></a></td>

<td><a href='http://zetta-zone.blogspot.com/' target='_blank'><img alt='kazedama' src='http://i.imgur.com/AkRJx1m.png'/></a></td>

</tr></table></div>

</div>

 - Simpan Template

Nah Gimana ? Cukup jelas kan nih Trik. Oh, iya nnt aku akan post tentang "Cara Membuat Author Box di header" Ditunggu yah.. :D
Sekian dan Semoga bermanfaat..
~Terimah Kasih

Tweet

Ditulis Oleh: Unknown di 11:33 PM