J-LMA

Buat sobat yang bingung mau nambah tempat gadget sepeti gambar diatas ...

ni saya punya sedikit tips untuk Membuat 3 kolom Widget di Bawah Postingan.


Kebanyakkan Blogging menggunakan  CSS dan HTML seperti di bawah ini

#CSS

#footer-column-divide {
clear:both;
}
.footer-column {
padding: 10px;
}

#HTML

<div id='footer-column-divide'>


<div id='footer1' style='width: 30%; float:left;
margin:0; text-align:left;'>
<b:section class='footer-column' id='col1'
preferred='yes' style='float:left;'/>
</div>


<div id='footer2' style='width: 40%; float: left;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col2'
preferred='yes' style='float:left;'/>
</div>


<div id='footer3' style='width: 30%; float: right;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col3'
preferred='yes' style='float:right;'/>
</div>


<div style='clear:both;'/>
</div>

Tapi saya menggunakan CSS dan HTML yang cukup berbeda dengan yg lainnya ....


1. Login ke blogger.
2. Klik Rancangan --> tata letak --> Edit HTML
3. Expand Widget Template tidak usah di beri centang
4. Cari kode ]]></b:skin> atau lebih tepatnya kode .footer
5. Copy kode dibawah ini dan paste di atas kode ]]></b:skin> atau lebih tepatnya kode .footer

#main1 .widget-content {
border-top: 3px solid white;
padding: 5px;
width: 270px;
overflow: hidden;
font-family: 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;
color: black;
margin-bottom: 10px;
padding: 5px;
overflow-y: hidden;
margin-left: 15px;
margin-top: 10px;
background: #FEFEFD;}  
#main2 .widget-content {
border-top: 3px solid white;
padding: 5px;
width: 270px;
overflow: hidden;
font-family: 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;
color: black;
margin-bottom: 10px;
padding: 5px;
overflow-y: hidden;
margin-left: 15px;
margin-top: 10px;
background: #FEFEFD;}
#main3 .widget-content {
border-top: 3px solid white;
padding: 5px;
width: 270px;
overflow: hidden;
font-family: 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;
color: black;
margin-bottom: 10px;
padding: 5px;
overflow-y: hidden;
margin-left: 15px;
margin-top: 10px;
background: #FEFEFD;}
#main1 ,#main2 ,#main3 {width:305px;float:left;margin: 3px;margin-left: 6px;list-style-type:none;margin-top:20px;}
#main1 h2 ,#main2 h2 ,#main3 h2 {font-family: 'Cabin Condensed', sans-serif;
background: rgba(0, 0, 0, 0.1);
border-radius: 9px;
margin-left: 25px;
margin-top: 5px;
font-size: 21px;
line-height: 28px;
text-align: left;
font-weight: normal;
margin: auto;
padding: 0px 10px;
padding-left: 5px;
padding-right: 5px;
color: white;
letter-spacing: -1px;
}
#main1 ul li a:link, #main1 ul li a:visited{color:#666;}
#main2 ul li a:link, #main2 ul li a:visited{color:#666;}
#main3 ul li a:link, #main3 ul li a:visited{color:#666;}

6. Cari kode   

<div id='footer'>

Atau

<div id='footer-wrapper'> 
<b:section class='footer' id='footer'/> 
</div>

7. Taruh kode di bawah ini tepat di bawah <div id='footer'> atau Hapus kode <b:section class='footer' id='footer'/>

<b:section class='main1' id='main1' showaddelement='yes'>
<b:section class='main2' id='main2' showaddelement='yes'>
<b:section class='main3' id='main3' showaddelement='yes'>

 Contohnya :

   <div id='footer'>
<b:section class='main1' id='main1' showaddelement='yes'>
<b:section class='main2' id='main2' showaddelement='yes'>
<b:section class='main3' id='main3' showaddelement='yes'>

#KETERANGAN : 

- warna merah anda bisa ganti dengan kode warna yang lainnya
- warna biru muda anda bisa ganti dengan lebar sesuka anda
- warna ungu muda anda bisa ganti dengan kode warna yang lainnya

Hasilnya seperti gambar dibawah ini :