Cara menambah kolom SIDEBAR ADS di template blogspot

Bagi sobat yang sudah tau cara menambah kolom SIDEBAR ADS ditemplate blogspot tentu gak asing lagi dengan triks yang satu ini, dalam perjalanan blogwalking saya malam ini saya sempat mampir dan melihat postingan baru kang Mochal atau Kang Subagya tentang peluncuran template terbarunya SIMPLE MINIMA MAGAZINE yang menurut saya sangat sempurna, disini saya lihat ada kolom sidebar ads di sidebar sebelah kanan atas, nach iseng-iseng lihat kode HTML nya, lalu saya coba terapkan di blog saya Aceh Blogging seperti yang ada di template Kang Mochal ...dan ternyata berhasil.Kalau sobat gak percaya coba lihat dech di Aceh Blogging.

Bagi sobat yang masih Newbie seperti saya kalau mau menambahkan sidebar ads ini,sobat bisa mencoba seperti yang saya coba di blog saya ini.caranya seperti dibawah ini.





1.Setelah sobat login ke blogspot, lalu sobat masuk ke halaman Layout/Tata letak blog sobat dan klik Edit Html( sebelumnya backup dulu template anda dengan cara mengklik Download full template, jadi template sobat yang lama langsung tersimpan ).

2. Lalu sobat copy kode dibawah ini

<div id='sidebar-ads'>
<div class='ads-sidebar'>
<center><ul>
<li><a href='mailto:subagya@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:subagya@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>

3. Kemudian paste di atas <div id='sidebar-wrapper'>

4. Dan copy kode dibawah ini

#sidebar-ads {
width:300px;
margin-bottom:10px;
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:300px}
#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 8px; border:1px solid #CCC; padding:2px}
.ads-sidebar img:hover{border:1px solid #999}

5. Dan paste lagi di atas ]]></b:skin>

6. Klik SAVE ( Simpan pengaturan )

Semoga bermamfaat.

Related Posts by Categories