Cara Membuat Banner 88x31 Auto Hide di Atas Footer

Unknown Banner, Blogger, CSS Sep 19, 2013

11 Comments

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

Cara Membuat Banner 125x125 di Sidebar Blog

Unknown Banner, Blogger, CSS

7 Comments

Assalamualaikum Sobat.Kali ini saya akan share trik.Trik ini berupa bentuk banner.Wew, apa itu ye ?? Sebut saja nama trik ini adalah "Cara Membuat Banner 125x125 di Sidebar Blog".Trik ini emang ada originalnya.tapi, originalnya saya lupa sob. Maaf.Oke sob.. langsung saja pembahasanya.

- Login ke Blogger
- Lalu Masuk ke Menu Edit template
- Setelah itu Cari Kode ]]></b:skin> dan letakan kode dibawah ini tepat diatas kode tadi

 /*Kotak Iklan 125x125*/
#kotak-iklan-125x125 {
margin: 0px;
padding: 1px;
text-align: center; }
#kotak-iklan-125x125 img {
margin: 3px 3px 6px 6px;
padding: 1px;
text-align: center;
border: 3px solid #ff5600;
-webkit-transition: all 0.45s ease-out;
-moz-transition: all 0.45s ease-out;
-o-transition: all 0.45s ease-out;
transition: all 0.45s ease-out;
}
#kotak-iklan-125x125 img:hover {
-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;
text-align: center;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
-o-border-radius: 0px;
border-radius: 0px;
-moz-transform: rotate(715deg);
-webkit-transform: rotate(715deg);
-o-transform: rotate(715deg);
}

- Simpan Template
- Lalu Pergi ke Menu Tata Letak >> Add Gadget/Widget >> Pilih HTML/Javascript dan masukan kode dibawah ini dikotak disediakan

<center><div id="kotak-iklan-125x125">
<a href="http://Modas4rt.blogspot.com/" target="_blank"><img alt="" height="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvnk-FhgV10lKWgYyr8kTY3BiV267_H2GNdxQ7b2F6TGy_DuR7t8mEwd-L237Ziz3aNAysKurqPoSOEZWeW1-T7cn1320fiysa9iFpmS4N1_vFOVLpavRWsOtLmjbSdRcjBbdinamMgac/s1600/star-us.jpg" title="Modas4rt" width="125" /></a>
<a href="http://Vhee-zone.blogspot.com/" target="_blank"><img alt="" height="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvnk-FhgV10lKWgYyr8kTY3BiV267_H2GNdxQ7b2F6TGy_DuR7t8mEwd-L237Ziz3aNAysKurqPoSOEZWeW1-T7cn1320fiysa9iFpmS4N1_vFOVLpavRWsOtLmjbSdRcjBbdinamMgac/s1600/star-us.jpg" title="Vhee-zone" width="125" /></a>
<a target="_blank" href="http://zetta-zone.blogspot.com/"><img alt="banner ads" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ9KvxYdLuqE9JhkUsJXJ5YuJoSTuwbyw1ABvrZT5rGtp4DcwB16RarL8sLp-g9JnIw-ymwWFcWXQKxhuY85H4FN9XtYZqacM1k61DHYxdP5kaQKwy5Snsmx9yQHYb8w4_Dy5oOBkAssE/s1600/Banner+Ads+125x125.png" border="0"/></a>
<a target="_blank" href="http://zetta-zone.blogspot.com/"><img alt="banner ads" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ9KvxYdLuqE9JhkUsJXJ5YuJoSTuwbyw1ABvrZT5rGtp4DcwB16RarL8sLp-g9JnIw-ymwWFcWXQKxhuY85H4FN9XtYZqacM1k61DHYxdP5kaQKwy5Snsmx9yQHYb8w4_Dy5oOBkAssE/s1600/Banner+Ads+125x125.png" border="0"/></a>
</div></center> 

- Simpan

Nah, Gmna cukup jelas dan mudah kan..
Sekian dan semoga bermanfaat..
Terimah kasih...

Membuat Banner 468x60 Auto Hide dibawah Header

Unknown Banner Sep 10, 2013

2 Comments

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