Tutorial Membagi Dua Kolom Sidebar pada Template Final Fantasy Versus XIII

Final Fantasy Versus XIII blogger template versi dua kolom buatan skincorner ini memang tampak ciamik dengan paduan warna biru dan gelap. Nah kemarin-kemarin nih ceritanye ada sobat ane nyang minta dibantu bagaimana cara bikin sidebarnya terbagi dua, karena pada tampilan aslinya sidebar hanya ada satu kolom.

Berhubung banyak cabak dan kesibukan akhir2 ini, proyek ngoprek template Final Fantasy Versus XIII tertunda dan baru kali ini sempet tak acak-acak, hehehehe... gimana sih caranya mbagi dua ntu sidebar? sok atuh kita bahas bareng-bareng di sini...

Persiapan

Langkah pertama, siapkan satu gelas Kopi item (sedikit cawerang boleh) wkwkwkwk... kemudian silahkan duduk manis dengan jenaka :))

Duduk Manis, Lalu,

login ke account blogger anda, lalu masuk ke editor template. langkah selanjutnya cari kode /* The Sidebar */ dengan menggunakan perintah pencarian pada browser yang anda pakai (tekan Ctrl + F) Tambahkan kode CSS berikut di bawahnya.

#sidebar-left {
width:130px;
float:left;
}

#sidebar-right {
margin-right:50px;
width:130px;
float:right;
}

#sidebar-bawah {
width:334px;
float:right;
font-size:12px;
color:#0066ff;
margin: 5px 0px 0px 0px;
font-family:century gothic,Verdana,sans-serif;
}

#sidebar-left h2 {
width:125px;
height:36px;
font-size:15px;
color:#3366cc;
margin:0 0 0 4px;
padding:10px 0 0 15px;
background:url(http://i414.photobucket.com/albums/pp221/skincorner3/sideff2.jpg);
background-repeat:no-repeat;
font-family:georgia,Helvitica,sans-serif;
}

#sidebar-right h2 {
width:125px;
height:36px;
font-size:15px;
color:#3366cc;
margin:0 0 0 4px;
padding:10px 0 0 15px;
background:url(http://i414.photobucket.com/albums/pp221/skincorner3/sideff2.jpg);
background-repeat:no-repeat;
font-family:georgia,Helvitica,sans-serif;
}

Nah udah ntu, tarik nafas dalem-dalem dulu, hohoho... Selanjutnya cari kode berikut:

<b:section class='sidebar' id='sidebar' preferred='yes'>

Lalu paste kode berikut di tepat di bawah kode </b:section>

<div id='sidebar-left'>
<b:section class='sidebar' id='sidebar1' preferred='yes'/>
</div>

<div id='sidebar-right'>
<b:section class='sidebar' id='sidebar2' preferred='yes'/>
</div>
</div>

<div id='sidebar'>
<b:section class='sidebar' id='sidebar3' preferred='yes'/>
</div>

Setelah itu silahkan Save Template anda dan lihat hasilnya! :D

Terakhir

Silahkan masuk ke Editor Page Elemen dan masukkan deh widget apa yg mo dipasang di dua kolom kembar pada sidebar yang telah kita buat tadi ;)

Demo template yang udah terbagiduakan bisa dilihat di sini, kalo mau download langsung aja ke sini!

Mohon maaf apabila ada kata-kata yang tidak berkenan di hati, akhir kata mari kita tutup saja berjumpaan kali ini dengan ucapan Hamdallah bersama-sama, Alhamdulillah... :D

Wassalam, riez bareng teman-teman, wkwkwkwk...

---------
Request from: http://dicknyonyo.blogspot.com