Menambah Elemen di Atas 2 Kolom

Indahnya berbagi itu kata orang yang selalu berbagi seperti Kang Fatur ini wkwkwkwk, pada kesempatan ini saya akan berbagi kepada sahabat sahabat blogger semua yang selalu setia mampir di tempat Kang Fatur yang sederhana dan penuh sampah ini.

Para sahabat blogger kali ini saya posting tentang Menambah Elemen di Atas Dua Kolom, trik ini sangat tidak asing lagi mungkin bagi para sahabat blogger kelas tinggi, namun mudah mudahan tips ini bermanfaat bagi para sahabat / pengunjung saya yang masih baru di dalam dunia blogger.

Bagaimana trik atau caranya jika elemen yang ditambahkan diatas dua kolom? Caranya mudah dan sangat simpel walaupun bagi yang awam seperti saya. di bawah ini gambar yang pada kesempatan ini kita bahas.

Baik kalai para sobat telah mengamati gambar di atas dan telah mengerti apa itu Elemen di Atas 2 Kolom kita langsung pembahasan. Langkah langkahnya adalah sebagai berikut :

1. Pertama dalam keadaan loggin pastinya, klik TATA LETAK => EDIT HTML.
2. Carilah kode seperti berikut: (lebar atau width tentu berbeda sesuai lebar kolom pada template sobat)

#sidebar-wrapper {
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

3. Kalau sudah ketemu tambahkan kode berikut diatas kode tadi

#topsidebar-wrapper {
border: 1px solid #FFFFFF;
background:#FFFFFF;
width:440px;
float:right;
padding:5px;
margin-top:10px;
}

Keterangan widht: 440px adalah penjumlahan dari dua kolom elemen yang telah ada pada sidebar template minima percobaan saya jadi sobat sesuaikan jumlahnya dengan menjumlahkan lebar dua kolom pada sidebar sobat!
4. lengkap kodenya jadi seperti ini:

#topsidebar-wrapper {
border: 1px solid #FFFFFF;
background:#FFFFFF;
width:440px;
float:right;
padding:5px;
margin-top:10px;
}
#sidebar-wrapper {
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

4.Langkah selanjutnya,anda cari kode berikut:

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>

5. setelah ketemu letakkan kode berikut, dibawah kode tadi:

<div id='topsidebar-wrapper'>
<b:section class='sidebaratas' id='sidebaratas' showaddelement='yes'>
</b:section>
</div>

6. Sehingga kodenya jadi seperti berikut:

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol'/>
</div>
<div id='topsidebar-wrapper'>
<b:section class='sidebaratas' id='sidebaratas' showaddelement='yes'/>
</div>

7. Selesai. jangan lupa simpan template. Lihat hasilnya pada elemen halaman kalau sudah ada kolom elemen baru diatas dua kolom seperti screenshot diatas berarti berhasil.

Selamat Mencoba. dan semoga bermanfaat.

KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI