Kotak Banner 468x60 dan 88x31 di header

Hello Sob...

Aku Mau posting nih...
Yg berlabelkan "Tips Blogger"
Untuk Postingan kali ini, Saya beri Judul "Cara Membuat Kotak Banner di Header"
Disini Saya Akan Menunjukan kalian membuat kotak banner 468x60 (2 Slot) dan Kotak banner 88x31 (12)
Bisa Lihat Screenshotnya Berikut..

dan Simak Tips Berikut...

A. Kotak Banner 468x60 di Header

1, Masuk Ke Blogger

2. Pilih Menu Template

3. Pilih Edit HTML

4. Tekan f3, Lalu Cari Kode ]]></b:skin>

5. Letakan Kode dibawah ini tepat diatas kode ]]></b:skin>

.WAKimage {float:left;margin-left:61px;margin-top:31px;height:60px;border:2px solid #fff;position:relative}

.banner-title {padding:2px;margin-left:0px;width:465px;height:56px;position:absolute;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAD0lEQVQImWNgwA6MB1QQAFhxATM9UlO6AAAAAElFTkSuQmCC) #111;color:white;line-height:46px;text-align:center;font-size:20px;opacity:0.9;-webkit-transition:all 0.2s linear;transition:all 0.2s linear;-moz-transition:all 0.2s linear;width:465px;}

.WAKimageD {width:468px;height:60px;-webkit-transition:all 1s linear;}

.WAKimage:hover .banner-title  {opacity:0;display:block;font-size:0px;height:0px}

6. dan Cari Lagi kode yg  Bersangkutan dengan Header-wrapper

5. Letakan Kode dibawah ini tepat dibawah kode Header-wrapper kamu... :D

      <div class='WAKimage'>

    <span class='banner-title'>Vhee-Zone</span>

    <a alt='alt' class='WAKimageD' href='http://vhee-zone.blogspot.com/' title='Banner'>

      <img alt='img' class='WAKimageD' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTMw2281Q2hQM0Nl6C4j7a6I3r1mu6nvtL8VdfXJvYsYkZ7c4XgY8qOrC3zE0wLh5bjpM9jcvq0H_OrFlgS5n6-A-_PosWsvxSeVFmFchvB2G0N9wBdsugDPJh6FDU_goep_rmzWTQvw8/s1600/New+exc468.png' title='Banner'/>

    </a>

  </div>

     <div class='WAKimage'>

       <span class='banner-title'>Kxmadagascar</span>

       <a href='http://kxmadagascar.blogspot.com' target='_blank'>

<img alt='Banner' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgIzwzHnpTV39RRppW8w83Wy5PxxUsoxy3H_2gzJ5hsBaDRJFV7GNxfcKh-i-lAYsuEntX2O_WdtmGQATIpnbtzHZ19y_8YGSrgNZLwBuH1pWHoaUhcMpyeorBc4hxBnTxpEqZSIw9qhk/s1600/bannernew468.png' title='Banner'/></a>

  </div>

6. Simpan Template

B. Kotak Banner 88x31 di header

1. Langsung Masuk ke Menu template (kan Udah login)

2. Klik Edit HTML

3. tekan f3 lalu cari kode ]]></b:skin>

4. Letakan kode dibawah ini tepat diatas kode ]]></b:skin>

#MZT-banner2{border: 5px solid #0C0C0C;

width: 175px;

height: 92px;

position: absolute;

margin-left: 895px;

margin-top: 10px;

background: #232222;

padding: 1px;

overflow: hidden;

border-radius: 5px;

line-height: 1px;

transform: skewX(-15deg);

-webkit-transform: skewX(15deg);

-ms-transform: skewX(-15deg);

-moz-transform: skewX(-15deg);

-webkit-transition: all .2s ease-out;

-moz-transition: all .2s ease-out;

-ms-transition: all .2s ease-out;

-o-transition: all .2s ease-out;

transition: all .2s ease-out;}

#MZT-banner2:hover{box-shadow:0 0 25px blue}

#MZT-banner2 img{width:88px;height:31px;line-height:1px;margin-left:-2px}

#MZT-banner3{border: 5px solid #0C0C0C;

width: 175px;

height: 92px;

position: absolute;

margin-left: 30px;

margin-top: 10px;

background: #232222;

padding: 1px;

overflow: hidden;

border-radius: 5px;

line-height: 1px;

transform: skewX(-15deg);

-webkit-transform: skewX(-15deg);

-ms-transform: skewX(-15deg);

-moz-transform: skewX(-15deg);

-webkit-transition: all .2s ease-out;

-moz-transition: all .2s ease-out;

-ms-transition: all .2s ease-out;

-o-transition: all .2s ease-out;

transition: all .2s ease-out;}

#MZT-banner3:hover{box-shadow:0 0 25px blue}

#MZT-banner3 img{width:88px;height:31px;line-height:1px;margin-left:-2px}

5. Lalu cari kode yg Bersangkutan Dengan Header-Wrapper

6. Dan Letakan Script dibawah tepat di bawah kode header-wrapper kamu... :D

<div id='MZT-banner2'>

<a href='http://maverickzetta.blogspot.com/' target='_blank'><img alt='Zone Zetta' src='http://i.imgur.com/8YofEN9.png' title='Maverick Is Zetta Zone'/></a>

<a href='http://maverickzetta.blogspot.com/' target='_blank'><img alt='Zone Zetta' src='http://i.imgur.com/8YofEN9.png' title='Maverick Is Zetta Zone'/></a>

<a href='http://maverickzetta.blogspot.com/' target='_blank'><img alt='Zone Zetta' src='http://i.imgur.com/8YofEN9.png' title='Maverick Is Zetta Zone'/></a>

<a href='http://maverickzetta.blogspot.com/' target='_blank'><img alt='Zone Zetta' src='http://i.imgur.com/8YofEN9.png' title='Maverick Is Zetta Zone'/></a>

<a href='http://maverickzetta.blogspot.com/' target='_blank'><img alt='Zone Zetta' src='http://i.imgur.com/8YofEN9.png' title='Maverick Is Zetta Zone'/></a>

<a href='http://maverickzetta.blogspot.com/' target='_blank'><img alt='Zone Zetta' src='http://i.imgur.com/8YofEN9.png' title='Maverick Is Zetta Zone'/></a>

</div>

<div id='MZT-banner3'>

<a href='http://maverickzetta.blogspot.com/' target='_blank'><img alt='Zone Zetta' src='http://i.imgur.com/8YofEN9.png' title='Maverick Is Zetta Zone'/></a>

<a href='http://maverickzetta.blogspot.com/' target='_blank'><img alt='Zone Zetta' src='http://i.imgur.com/8YofEN9.png' title='Maverick Is Zetta Zone'/></a>

<a href='http://maverickzetta.blogspot.com/' target='_blank'><img alt='Zone Zetta' src='http://i.imgur.com/8YofEN9.png' title='Maverick Is Zetta Zone'/></a>

<a href='http://maverickzetta.blogspot.com/' target='_blank'><img alt='Zone Zetta' src='http://i.imgur.com/8YofEN9.png' title='Maverick Is Zetta Zone'/></a>

<a href='http://maverickzetta.blogspot.com/' target='_blank'><img alt='Zone Zetta' src='http://i.imgur.com/8YofEN9.png' title='Maverick Is Zetta Zone'/></a>

<a href='http://maverickzetta.blogspot.com/' target='_blank'><img alt='Zone Zetta' src='http://i.imgur.com/8YofEN9.png' title='Maverick Is Zetta Zone'/></a>

</div>

7. Tinggal Save Deh...

Sekian Tentang Tips "Cara membuat Kotak Banner di Header" Semoga bermanfaat...
Salam Comment..!!!

Tweet

Ditulis Oleh: Unknown di 11:23 PM