Cara Membuat Elemen Baru di Sidebar: Panduan BloGGeR Tata Letak

Membuat Elemen baru berfungsi untuk mendapatkan ruang baru guna menambah widget dalam kolom yang berbeda-beda. Dengan elemen yang baru ini membuat penataan blog menjadi terasa lebih mudah. Sebagai bahan percobaan kita akan menggunakan template Minima bawaan blogger. Bentuk desain yang sederhana dari template ini akan memudahkan blogger untuk berujicoba sekaligus memahami secara cepat teknik membuat elemen baru di bagian sidebar.

Beberapa tahapan dilalui untuk membuat elemen baru ini :

1. Login ke Blogger (Login to Blogger).
2. Halaman Dasbor (Dasboard).
3. Klik Rancangan (Design).
4. Klik Edit HTML.
5. Klik Download Template Lengkap (proses mengamankan template).
6. Simpan dalam folder PC.
7. Tetap di Edit HTML.
8. Cari kode

#sidebar-wrapper {
        width: 220px; 
        border:1px solid white;
        padding:8px;
        float: $endSide;
        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 */
}

Untuk memudahkan mengingat (identitas baru), rubahlah menjadi seperti ini :

#sidebartop-wrapper {
        width: 220px;
        float: $endSide;
        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 */
}

Buat KODE CSS baru berdasar CSS di atas dan letakkan persis di bawahnya. Bentuk KODE yang baru adalah seperti di bawah ini :

#sidebarmiddle-wrapper {
        margin-top:20px
        width: 220px;
        float: $endSide;
        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 */
}
#sidebarbottom-wrapper{
        margin-top:20px
        width: 220px; 
        border:1px solid white;
        padding:8px;
        float: $endSide;
        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 */
}

Cari KODE HTML seperti di bawah ini :

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

Rubah KODE menjadi :

<div id='sidebartop-wrapper'>
<b:section class='sidebar' id='sidebartop' preferred='yes'>

KODE baru di atas akan membentuk rangkaian KODE baru dalam bentuk :

<div id='sidebartop-wrapper'>
<b:section class='sidebar' id='sidebartop' preferred='yes'>
......
......
</b:section>
</div>

Simpan KODE bar di bawah ini dan letakkan di bawah KODE di atas :

<div id='sidebarmiddle-wrapper'>
<b:section class='sidebar' id='sidebarmiddle' preferred='yes'/>
</div>

<div id='sidebarbottom-wrapper'>
<b:section class='sidebar' id='sidebarbottom' preferred='yes'/>
</div>

9. KLIK Simpan Template dan lihat hasilnya dengan membuka Elemen Laman dan halaman blog !

Keterangan/Catatan:

• Panduan atau titorial ini berdasarkan penggunaan kode html pada template lama blogger.
• Dengan selesainya pembuatan 2 buah elemen baru ini maka anda sekarang dengan mudah bisa memilih tempat baru untuk menambah widget. Bila ingin menambah elemen baru anda tinggal menggunakan cara seperti itu. Setiap menambah elemen baru gunakan identitas yang berbeda supaya tidak ada penolakan saat dilakukan proses Simpan Template.

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

Update » January, 08, 2012

» Happy Blogging - gubhugreyot «