cara membuat kolom iklan di header blog

By  at 08.50    
bagaimana cara membuat kolom iklan di bawah header sepeti punyaku
kalau para sob minat atau mau membuat yuk kita ke TKP

OK berikut cara-carany

1.Seperti biasa, setelah sobat login ke blogspot,

lalu sobat masuk ke halaman Layout/Tata letak blog sobat dan klik Edit Html
centang Expand Template Widget
copy HTML berikut


<div id="sidebar-ads">
<div class="ads-sidebar">

<center><ul>
<li><a href="mailto:ilyas.putra18@gmail.com" target="_blank"><img border="0" height="125" src="http://i306.photobucket.com/albums/nn252/cebong_ipit/banner-ifoell.png" width="125" /></a></li>
<li><a href="mailto:ilyas.putra18@gmail.com" target="_blank"><img border="0" height="125" src="http://i306.photobucket.com/albums/nn252/cebong_ipit/banner-ifoell.png" width="125" /></a></li>
<li><a href="mailto:ilyas.putra18@gmail.com" target="_blank"><img border="0" height="125" src="http://i306.photobucket.com/albums/nn252/cebong_ipit/banner-ifoell.png" width="125" /></a></li>
<li><a href="mailto:ilyas.putra18@gmail.com" target="_blank"><img border="0" height="125" src="http://i306.photobucket.com/albums/nn252/cebong_ipit/banner-ifoell.png" width="125" /></a></li>
<li><a href="mailto:ilyas.putra18@gmail.com" target="_blank"><img border="0" height="125" src="http://i306.photobucket.com/albums/nn252/cebong_ipit/banner-ifoell.png" width="125" /></a></li>
<li><a href="mailto:ilyas.putra18@gmail.com" target="_blank"><img border="0" height="125" src="http://i306.photobucket.com/albums/nn252/cebong_ipit/banner-ifoell.png" width="125" /></a></li>
<li><a href="mailto:ilyas.putra18@gmail.com" target="_blank"><img border="0" height="125" src="http://i306.photobucket.com/albums/nn252/cebong_ipit/banner-ifoell.png" width="125" /></a></li>
</ul>
</center></div>
</div>





setelah itu pastekan di atas <div id='main-wrapper'> atau <div id='main-wrap1'><div id='main-wrap2'> kalau template sobat 3 kolom tentu di ada id=main ada sidebar lagi,sobat paste di atas ini <div id='side-wrapper1'> atau sejenisnya yang nantinya/pada intinya berada di bawah header blog sobat, jadi tergantung template sobat karena masing-masing template berbeda kode Html nya, ada juga
Langkah selanjutnya sobat copy kode dibawah ini











#sidebar-ads {
width:970px;
margin-bottom:5px;
float:right;
background:#fff;
padding:10px;
}
.ads-sidebar{float:left; margin:0pt; padding:0pt}

#sidebar-ads ul li ul{list-style-type:square; margin-left:1.5em; padding:0; border:0}
#sidebar-ads ul li ul li{border:0}
#sidebar-ads .ads-sidebar ul{background:transparent none repeat scroll 0% 50%; border:1px solid transparent; float:left; margin:0pt; padding:10px 0pt 10px 2px; width:970px}
#sidebar-ads .ads-sidebar ul li{display:inline; list-style-type:none; margin:0pt; padding:0pt}
#sidebar-ads .ads-sidebar ul li a:hover{border-bottom:none; list-style-type:none}

.ads-sidebar ul{margin:0px; padding:0px}
.ads-sidebar ul li a{float:left}
.ads-sidebar img{margin:0px 0px 5px 5px; border:1px solid #CCC; padding:2px}
.ads-sidebar img:hover{border:1px solid #999}

Nah.. di sini lebar Width tergantung template masing-masing, disini kebetulan template saya witdth nya 970px (sobat tinggal rubah bsesuai dengan lebar template sobat), demikian juga margins dan pading, menurut selera sobat lah.

    Dan paste lagi di atas ]]></b:skin>
    klik save/simpan

selesai deh selamat meconba

Related Posts: