Cara Membuat 2 Kolom Gadget Dibawah Sidebar

Cara Membuat 2 Kolom Gadget Dibawah Sidebar - Menambahkan 2 kolom dibawah sidebar memang cocok untuk menambahkan widget kecil seperti Label, Alexa Rank, Google PageRank, DMCA Protection, dan tombol kecil lainnya. Selain itu bisa juga untuk space iklan yang ukurannya kecil. Membuat 2 kolom gadget dibawah sidebar ini bisa Anda coba dan tidak begitu sulit cara pemasangannya. Teman saya meminta untuk menulis sebuah artikel yang mengenai sidebar dibagi menjadi 2 dan pada kesempatan kali ini blog Ficri Pebriyana akan membagikan sebuah artikel yang menjelaskan cara menambah atau membuat 2 kolom widget dibawah sidebar atau membuat sidebar menjadi 2 kolom.

Tidak semua template mengandung atau telah memiliki 2 kolom dibawah sidebar, dan kadang kita sendiri yang harus membuat atau menambahkannya secara manual. Dengan membuat atau menambahkan 2 kolom widget dibawah sidebar akan sedikit mempercantik sebuah tampilan blog. Oke langsung saja bagaimana cara menambahkan 2 kolom widget dibawah sidebar ? Silahkan Anda bisa membaca tutorial mengenai cara membuat 2 kolom widget dibawah sidebar blog dibawah ini :

1. Masuk ke Blogger.com
2. Klik Template => Tata Letak
3. Cari kode seperti ini #sidebar-wrapper
Contoh :

#sidebar-wrapper{width:300px;overflow:hidden;float:right;}
.post {
padding: 0 8px 5px 8px;
}
.post-outer{word-wrap: break-word;
margin: 5px;
border: 1px solid #fff;
.....
....
...
}

4. Sekarang tambahkan kode dibawah ini, tepat dibawah kode }

#left-col {
width:170px;
float:left;
word-wrap:break-word;
overflow:hidden;
}
#right-col {
width:170px;
float:right;
word-wrap:break-word;
overflow:hidden;
}

Hasilnya seperti ini :

#sidebar-wrapper{width:300px;overflow:hidden;float:right;}
.post {
padding: 0 8px 5px 8px;
}
.post-outer{word-wrap: break-word;
margin: 5px;
border: 1px solid #fff;
.....
....
...
}
#left-col {
width:170px;
float:left;
word-wrap:break-word;
overflow:hidden;
}
#right-col {
width:170px;
float:right;
word-wrap:break-word;
overflow:hidden;
}

5. Cari kode <div id='sidebar-wrapper'> jika tidak ada cari saja 'sidebar-wrapper'
6. Tambahkan kode berikut, diatas kode </div>

<b:section class='sidebar' id='left-col' preferred='yes'/>
<b:section class='sidebar' id='right-col' preferred='yes'/>

Hasilnya seperti ini :

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar'>
<b:widget id='PopularPosts1' locked='false' title='Entri Populer' type='PopularPosts'>
</b:widget>
</b:section>
<b:section class='sidebar' id='left-col' preferred='yes'/>
<b:section class='sidebar' id='right-col' preferred='yes'/>
</div>

7. Klik Simpan Template

Sekian artikel mengenai Cara Membuat 2 Kolom Gadget Dibawah Sidebar. Kuramg lebihnya mohon maaf.
Semoga Bermanfaat...

Ficri Pebriyana

Blogger yang jarang nulis artikel :D

Bagikan Artikel ini