Welcome to my blog, hope you enjoy reading :)
RSS

Sunday, August 22, 2010

Cara Membuat Dua Kolom dibawah Kolom Posting (Plus Tambah Gadget)

Ok, back to topic. Kita bahas lagi cara membuat dua kolom dibawah postingan. Ini bisa jadi alternatif multi kolom yang tempo hari pernah saya bahas. Ok. Tertarik membuatnya? Ikuti langkah-langkah berikut ini.

1. Login ke Blogger, lalu klik menu Tata Letak > Edit HTML.
2. Silakan backup template anda.
3. Taruh kode ini diatas kode ]]></b:skin>

#doublecolumnleft, #doublecolumnright{
height:auto;
width:205px;
padding:10px;

background:#81F781;
color:#000000;
}

#doublecolumnleft h2, #doublecolumnright h2{
font-size:large;
font-weight:bold;
#doublecolumnright h2{
text-align:right;
}

#doublecolumnleft a, #doublecolumnright a{
color:#0A2A0A; text-decoration:underline;
}

#doublecolumnleft a:hover, #doublecolumnright a:hover{
text-decoration:none;
}
#doublecolumnleft{
float:left;
}
#doublecolumnright{
float:right;
text-align:right
}
Ket: bagian 205px adalah lebar dari masing-masing kolom. Sesuaikan dengan lebar main wrapper anda.



4. Cari bagian main wrapper (kolom posting) anda. Misalkan punya saya:

<div id='main-wrapper'>


<b:section class='main' id='main' showaddelement='no'>

<b:widget id='HTML4' locked='false' title='Kotak Pencarian' type='HTML'/>

<b:widget id='HTML16' locked='false' title='' type='HTML'/>

<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>

</b:section>

</div>

5. Lalu sebelum kode </div>, ketikkan kode berikut.



<b:section class='dblcolumn' id='dblcolumnleft' preferred='yes'/>

<b:section class='dblcolumn' id='dblcolumnright' preferred='yes'/>

Sehingga menjadi:


<div id='main-wrapper'>

<b:section class='main' id='main' showaddelement='no'>

<b:widget id='HTML4' locked='false' title='Kotak Pencarian' type='HTML'/>

<b:widget id='HTML16' locked='false' title='' type='HTML'/>

<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>


</b:section>


<b:section class='dblcolumn' id='dblcolumnleft' preferred='yes'/>

<b:section class='dblcolumn' id='dblcolumnright' preferred='yes'/>



</div>

7. Simpan.



8. Beralih ke tab Elemen Halaman, anda akan menemukan link Tambah Gadget dibawah kolom posting. Klik link tersebut untuk menambah widget, semisal recent posts atau recent comments.



Berhasil? Selamat! Gagal? Coba lagi! Semoga bermanfaat!

2 comments:

  1. kalo cara buat yang di bawah judul blog..misalnya"slamat datang dan enjoy this blog" tapi dia bergerak gitu,,trus pake warna" gimana?

    ReplyDelete
  2. 5. Lalu sebelum kode /div>, ketikkan kode berikut.
    di blog saya yang terlihat seperti dibawah ini

    div id='header-inner'>
    div class='titlewrapper'>
    h1 class='title'>
    b:include name='title'/>
    /h1>
    div
    b:include name='description'/>
    div

    yang kedua
    div class='descriptionwrapper'>
    p class='description'>span>data:description/>/span>/p>
    div
    b:includable>
    b:widget>
    b:section>
    div>
    div>
    mohon bantuan lanjutannya
    terima kasih

    ReplyDelete

Maaf Bukan Bermaksud apa,impian relugais12 hanya ingin memberi tahukan,setiap anda yang membaca artikel di atas tersebut,wajib mengisi post komentar anda di bawah ini,karna itu lbih memudahkan saya untuk mencoba apa yang kalian komentar,,,,
pliiiizzzzsssss NO SPAM,^_^,NO PORN

Add 'Q y Sobat Sxli'n

SmSan Yukxs

Make Widget

Link Keren

free web site traffic and promotion membuat blog terlihat berarti Free Link Exchange membuat blog terlihat berarti

Ayo Kita nonton TV live

Photobucket