Posted by : Unknown
Jul 16, 2013
Hello Sob...
Aku Mau posting nih...
Yg berlabelkan "Trick 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/AVvXsEjKyaXXT4IfIN3aS36YddRwe5_9zLeDLQf7UiKyl37bJY560hzVUeHpDlAaF3aX_jOy3BOe_0Tw4A11wd19ZqGT2li43Y2QdyTVNkUVzusM1mfXiywjJWjPzUW_N83mG1Uwu0Jf7ZrCp3w/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/AVvXsEiBLIB2dpGjjfI2EkplIbFqDmDQfQp508YwMrCw6fq214WJdVmVDdHaQJ4F__alRYvYFBpyhKSJGmTk2UIJTN8XRSNYDfq7tLXE-pFmbZD3Ltz08Rl0LcrUXgVnWzxr_p8hpsvZP1r0cII/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'>
Isi Dengan code banner
</div>
<div id='MZT-banner3'>
Isi Dengan code banner
</div>
7. Tinggal Save Deh...
Sekian Tentang Tips "Cara membuat Kotak Banner di Header" Semoga bermanfaat...
Salam Comment..!!!
Sumber :
Click
