Home » » Cara Membuat dua kolom Widget di bawah Posting

Cara Membuat dua kolom Widget di bawah Posting

Written By RACHMAT SR on Minggu, 04 Maret 2012 | 11.50

Cara Membuat ( Menambah) 2 kolom Widget di bawah Posting.

Kalo sobat tertarik membuat 2 kolom Widget di template BLOG sobat, ikuti langkah berikut :
Sebelum mengedit template Anda, Anda mungkin ingin menyimpan sebuah salinan dari template tersebut. Download Template Lengkap Saran saya sebaiknya Download Template terlebih dahulu, dan simpan dengan nama tertentu, agar mempermudah mengenalnya jiga terjadi kesalah agar mudah untuk di Upload / Unggah kembali.

1. Masuk ke menu Layout/Tata Letak
2. Pilih Edit HTML lalu backup terlebih dahulu template sobat.
3. Cari kode ]]></b:skin>, gunakan CTRL+F untuk memudahkan pencarian.
4. Kalo udah ketemu, kopy paste kode dibawah ini tepat diatas kode ]]></b:skin>


  /*Under Post
-----------------------------*/
#underpost h2{
height:41px;
padding-left:0px;
font-size: 120%;javascript:void(0)
font-family:Arial, Helvetica, sans-serif;
color:#fff;
text-align: center;
font-weight:bold;
background:#009229 url (https://lh6.googleusercontent.com/-z4TrAe4i1Us/TpHIe6qNLQI/AAAAAAAABBw/SQYWioxFV9Q/s800/sbh2-7x41.png) repeat-x;
}

#underleft{
width:300px; /*lebar kolom kiri*/
float:left;
margin:0px;
padding:0px;
list-style: none;
border:1px solid #009229;
background: url (http://1.bp.blogspot.com/-obr-BuoO5mA/TgYp01L6QMI/AAAAAAAADJY/_vqWF9fl6H0/s1600/sbli.png) no-repeat scroll left center transparent;
padding-top:0;
padding-right:0;
padding-bottom:1px;
padding-left:0px;
line-height:25px;
letter-spacing:1px;
font-size: 100%;javascript:void(0)
font-family:Arial, Helvetica, sans-serif;
}

#underright{
width:280px; /*lebar kolom kanan*/
float:right;
margin:0px;
padding:0px;
list-style: none;
border:1px solid #009229;
background: url (http://1.bp.blogspot.com/-obr-BuoO5mA/TgYp01L6QMI/AAAAAAAADJY/_vqWF9fl6H0/s1600/sbli.png) no-repeat scroll left center transparent;
padding-top:0;
padding-right:0;
padding-bottom:1px;
padding-left:0px;
line-height:25px;
letter-spacing:1px;
font-size: 100%;javascript:void(0)
font-family:Arial, Helvetica, sans-serif;
}
--------------------------------------------------------------------------------------------------------------------------Perhatikan kode yang berwarna merah width:625px, itu merupakan lebar dari kolom posting BLOG. Sesuaikan saja dengan lebar pada template sobat, biasanya untuk mengetahui lebar/width kolom posting, kita cari kode seperti ini :

#main-wrapper {
width: 625px;

--------------------------------------------------------------------------------------------------------------------------

5. Setelah di kopy paste kode diatas, Cari Kode Seperti ini : <div id='main-wrapper'>
dan kopy paste kode dibawah ini pas dibawah </:section>

<div id='underpost'>
<b:section class='underleft' id='underleft'/>
<b:section class='underright' id='underright'/>
</div>

hasilnya setelah di Paste akan seperti dibawah ini
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
<div id='underpost'>
<b:section class='underleft' id='underleft'/>
<b:section class='underright' id='underright'/>
</div>
</div>


6. Simpan dan perhatikan template sobat pada bagian page elemen, akan ada dua kolom tambahan dibawah post body atau tubuh posting.

Sebelum melakukan menekan/mengkelik SAVE / SIMPAN TEMPLATE, Lakukan terlebih dahulu Klik PRATINJAU.
Menghidari dari kesalahan sebelum di simpan.
Selamat mencoba dan semoga berhasil.
Share this article :

0 komentar:

Poskan Komentar

Thank for your visit, leave your suggestions and comments in the fields below ...

Silahkan meninggalkan komentar anda sehingga kita dapat berbagi pemikiran Anda dengan pengunjung lainnya.



 
Support : Al Islam | Paalem 3 | Mushola
Copyright © 2013. Panduan Blogger - All Rights Reserved
Template Created by Creating Website Modified by CaraGampang.Com
Proudly powered by Blogger