Menambah Elemen di Atas Sidebar

Template untuk blogspot banyak sekali disediakan di internet secara gratis. Pilihannya juga beragam dengan pengaturan elemen yang berbeda beda, sehingga memudahkan kita untuk menentukan pilihan.Tetapi ada kalanya kita sudah cocok dengan salah satu template dan ingin menambahkan beberapa elemen didalamnya. Salah satu contohnya adalah menambah elemen Sidebar, elemen yang berada di sisi kiri atau kanan halaman posting.

 

Elemen pada template blogger ada tiga, yaitu:

• Elemen Header
• Elemen Outer
• Elemen Footer

Untuk Elemen Outer masih dibagi menjadi dua bagian:

Elemen Main, elemen ini adalah elemen tempat kita menyimpan posting artikel. Jadi bila kita membuat artikel posting, maka postingan akan masuk ke bagian ini.

Elemen Sidebar, elemen ini adalah tempat untuk menambahkan asesoris lainnya untuk mempercatik blog dan menambah widget dan tools lainnya.

Untuk siapa saja yang suka berkreasi dengan kode-kode HTML, inilah salah satu cara terbaik untuk mengasah ilmu HTML. Karena dengan membuat elemen sidebar blogspot tambahan, maka kita akan dihadapkan dengan kode HTML. Menambahkan kolom sidebar berarti perlu memperhatikan kode-kode pada Outer Wraper dibawah ini.

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 400px;
float: left;
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 */
}
#sidebar-left{
width: 110px;
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 */
}

#sidebar-right{
width: 110px;
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 */
}

Untuk setiap template, kode di atas terletak diatas kode ]]></b:skin> dan mungkin akan berbeda-beda dalam penulisannya, seperti contohnya #outer-wrapper diganti namanya dengan #outer saja, atau #sidebar-left diganti dengan #sidebar-kiri, dsb tergantung pembuat template. Jadi pertama kali kita lihat dan kenali dulu kode templatenya.

Untuk menambahkan Elemen di Atas Sidebar, kita ambil saja contoh kode diatas.
Silahkan Masuk ke menu Layout --> Edit HTML
Sebelum kita mulai, simpan dulu template anda dengan cara klik Download Full Template demi keamanan jika sobat nanti gagal dalam modifikasi template ini.

1. Kita beri nama elemen baru ini dengan #sidebar-atas, Copy kode dibawah

#sidebar-atas{
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 */
}

2. Tambahkan kode tersebut dengan kode paling atas, sehingga hasilnya akan seperti ini:

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 400px;
float: left;
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 */
}
#sidebar-left{
width: 110px;
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 */
}

#sidebar-right{
width: 110px;
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 */
}

#sidebar-atas{
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 */
}

Kode berwarna merah adalah kode yang ditambahkan

3. Kemudian cari kode

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

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

Kode di langkah 3 ini pada script diletakkan dibawah kode ]]></b:skin>.

Titik-titik yang ada didalam kode tersebut adalah berisi komponen-komponen widget yang sudah ditambahkan dalam blog. disini tidak saya tampilkan karena kode akan menjadi terlalu panjang.

4. Tambahkan kode berikut diatas kode di langkah ke-3.

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

 sehingga hasilnya adalah:

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

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

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

Setelah selesai kemudian Save Template, dan untuk melihat hasilnya klik Page Element / Elemen Halaman dan lihat apakah sudah ada elemen diatas sidebar . Bila sudah, sobat bisa tambahkan widget baru pada sidebar tersebut dan lihat hasilnya. Sebenarnya kode-kode di atas masih bisa dirubah lagi sesuai dengan selera. Tinggal dibutuhkan kesabaran dan kreatifitas saja. Sebagai tips, jangan pernah takut berhadapan dengan kode HTML. Belajar dan belajar adalah cara termudah untuk berkreasi.