Header Ads

Cara Menambah Dua Kolom Widget di Bawah Postingan



Masih tentang menambah kolom widget, kali ini saya akan share Tutorial tentang Cara Membuat Dua Kolom Widget di Atas Postingan, sebelumnya juga saya sudah share tutorial mengenai cara menambahkan satu kolom widget di atas postingan dan cara menambahkan satu kolom widget di bawah postingan .

Membuat Dua Kolom Widget Dibawah Postingan juga sangat mudah di lakukan. yang membedakan hanya penempatan kode HTML nya saja.

Baca Juga :

Cara Menambah Satu Kolom Widget di Atas Postingan

Cara Menambah Dua Kolom Widget di Atas Postingan

Cara Menambah Satu Kolom Widget di Bawah Postingan

cara ini saya dapatkan dari bloggerspice.com jika anda ingin menambahkan dua kolom widget di bawah  postingan silahkan ikuti Tutorial ini.

Bagi anda yang sudah melakukan tutorial Cara Menambah Dua Kolom Widget di Atas Postingan anda tidak perlu menambahkan kode di atas ]]></b:skin> lewati saja langkah pertama ini langsung saja ke langkah 2 atau langsung cari kode  <div id='main-wrapper'>

Pertama login ke dashboard blog anda kemudian klik menu template kemudian edit HTML lalu cari kode ]]></b:skin> gunakan Ctrl+F untuk mempercepat pencarian
jika sudah ketemu pastekan kode di bawah ini diatas kode ]]></b:skin>


 /*Extra Column by www.bloggerspice.com*/
#Spicy Column h2{
font-size:13px;
font-weight:bold;
color:#B8002E;
border-bottom:2px solid #000000;
padding-left:5px;
}
#Spicy Column{
width:600px; /*Change width */
}
#Spiceleft{
width:295px; /*width of the left column*/
float:left;
margin:4px;
}
#Spiceright{
width:295px; /*width of the right column*/
float:right;
margin:4px;
}

kemudian cari kode berikut ini

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</div>

selanjutnya pastekan kode di bawah ini, sebelum kode penutup diantara </b:section> </div>

<div id='Spicy Column'><b:section class='Spiceleft' id='Spiceleft'/><b:section class='Spiceright' id='Spiceright'/></div>
 

maka hasilnya akan terlihat seperti berikut ini

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
<<div id='Spicy Column'><b:section class='Spiceleft' id='Spiceleft'/><b:section class='Spiceright' id='Spiceright'/></div>
</div>  

terakhir klik Save Template.
untuk melihat hasilnya masuk ke tata letak. jika belum ada perubahan reload page.

selesai.

1 comment:

Powered by Blogger.