Menambah Elemen Sidebar Blogspot

Share

Menambah kolom sidebar blogspot sebenarnya agak sulit namun asik. Kalau kita memilih template minima maka akan terdapat dua kolom saja yaitu kolom pada bagian postingan dan kolom pada bagian sidebar. Banyak blogger yang suka hanya dua kolom saja namun ada juga beberapa blogger yang suka blog dengan tiga sidebar atau bahkan empat sidebar. Sebenarnya kalau dicari template blog untuk blogspot yang tiga sidebar dan empat sidebar sangat banyak dan tinggal download saja dan dipakai. Namun bagaimana kalau kita mencoba modifikasi template default minima menjadi beberapa sidebar. Tentunya ada rasa kepuasan tersendiri bukan? Itung-itung buat belajar dan nambah kemampuan trik blogspot yang kita miliki.

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 seta 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 kamu akan dihadapkan dengan kode HTML. Menambahkan kolom sidebar berarti perlu memperhatikan kode-kode pada Outer Wraper berikut.

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

Dengan menambahkan elemen sidebar baru berarti secara logika maka akan terjadi penambahan nilai lebar keseluruhan pada Outer Wraper. Mengapa? Karena seperti yang saya katakan tadi, bahwa outer wraper terbagi atas dua bagian yaitu main wraper dan sidebar wraper. Sekarang bagaimana cara menambahkan elemen sidebar baru atau kolom baru di blogspot? Pertama sekali harus diperhitungkan berapa lebar dari kolom baru yang akan kita buat. Misalnya kita ambil nilai lebar sidebar baru 220 pixel. Maka secara keseluruhan lebar outer wraper menjadi kira-kira 410 pixel + 220 pixel + 220 pixel + 20 pixel = 870 pixel. Bisa ditambahkan 10 pixel lagi untuk sela pada outer wraper sehingga lebar keseluruhan adalah 880 pixel. Kode penambahan sidebar baru dengan nilai di atas adalah:

#sidebarbaru-wrapper {
width: 220px;
float: right;
padding-left:10px;
word-wrap: break-word;
overflow: hidden;
}

Setelah ditambahkan maka kodenya akan menjadi seperti ini:

/* Outer-Wrapper
—————————————— */
#outer-wrapper {
width: 880px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
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-wrapper {
width: 220px;
float: right;
padding-left:10px; /* yang ini adalah tambahan untuk jarak sela */
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 */
}
#sidebarbaru-wrapper {
width: 220px;
float: right;
padding-left:10px;
word-wrap: break-word;
overflow: hidden;
}

Kode-kode di atas merupakan langkah pertama yang harus ditambahkan. Berikutnya adalah menambahkan kode id untuk elemen sidebar baru tersebut. Untuk kode id sidebar sebelum penambahan kolom adalah seperti ini:

<div id=’sidebar-wrapper’>
<b:section class=’sidebar’ id=’sidebar’ preferred=’yes’>
<b:widget id=’Profile1′ locked=’false’ title=’Mengenai Saya’ type=’Profile’/>
<b:widget id=’BlogArchive1′ locked=’false’ title=’Arsip Blog’ type=’BlogArchive’/>
</b:section>
</div>

Karena kita telah menambahkan elemen baru pada sidebar maka kita juga harus membuat id sidebar baru tersebut pada bagian body. Kodenya adalah ini:

<div id=’sidebarbaru-wrapper’>
<b:section class=’sidebar’ id=’sidebarbaru’ preferred=’yes’/>
</div>

Selanjutnya adalah menyatukan kode sidebar baru tersebut pada kode id side bar yang sebelumnya, sehingga kodenya menjadi seperti ini:

<div id=’sidebar-wrapper’>
<b:section class=’sidebar’ id=’sidebar’ preferred=’yes’>
<b:widget id=’Profile1′ locked=’false’ title=’Mengenai Saya’ type=’Profile’/>
<b:widget id=’BlogArchive1′ locked=’false’ title=’Arsip Blog’ type=’BlogArchive’/>
</b:section>
</div>
<div id=’sidebarbaru-wrapper’>
<b:section class=’sidebar’ id=’sidebarbaru’ preferred=’yes’/>
</div>

Selesai dan kolom baru atau elemen baru pada sidebar blogspot telah ditambahkan. Nilai dari header dan footer sebaiknya disamakan dengan nilai outer wrapper tersebut yaitu sebesar 880 pixel. Sehingga menjadi sama dan lebih klop. Mudahkan? Ok, mari bermain kode HTML dengan blog yang bukan blog utama kita. Buatlah blog baru sebagai blog uji coba kamu sebagai bahan percobaan untuk memodifikasi sidebar template minima blogspot.

Loggin di blogger » Klik Layout » Klik Edit HTML » Jangan memberi tanda centang pada kotak kecil di samping tulisan Expand Widget Template. Tips untuk memudahkan mencari kode berikut, dengan tekan Ctrl F atau F3 pada kebor maka akan muncul tools kotak cari pada layar bawah monitor komputer.

Cari kode di bawah ini:

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Ganti nilai 660px menjadi 880px, sehingga kodenya jadi seperti ini :

#header-wrapper {
width:880px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Cari kode seperti di bawah ini :

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

Ganti nilai 660px menjadi 880px, sehingga kodenya menjadi seperti ini :

#outer-wrapper {
width: 880px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

Cari kode seperti di bawah ini :

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

Copy kode berikut dan paste persis di bawah kode di atas :

#sidebarbaru-wrapper {
width: 220px;
float: right;
padding-left:10px;
word-wrap: break-word;
overflow: hidden;
}

Cari kode seperti di bawah ini :

#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

Ganti nilai 660px menjadi 880 px, sehingga kodenya akan seperti ini :

#footer {
width:880px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

Cari kode di bawah ini :

<div id=’sidebar-wrapper’>
<b:section class=’sidebar’ id=’sidebar’ preferred=’yes’>
<b:widget id=’Profile1′ locked=’false’ title=’Mengenai Saya’ type=’Profile’/>
<b:widget id=’BlogArchive1′ locked=’false’ title=’Arsip Blog’ type=’BlogArchive’/>
</b:section>
</div>

Copy kode berikut, lalu paste persis di bawah kode yang di atas :

<div id=’sidebarbaru-wrapper’>
<b:section class=’sidebar’ id=’sidebarbaru’ preferred=’yes’/>
</div>

Klik Simpan Template dan selesai.

Untuk melihat hasilnya, tinggal klik Elemen Halaman dan lihat apakah kolom kamu sudah menjadi tiga elemen. Bila sudah, kamu 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. Sumber bacaan dari banyak artikel di internet mengacu pada tulisan Kang Rohman di Tips Menambah Kolom Pada Template Baru. Untuk template default minima juga bisa menambahkan elemen baru di atas dan di bawah elemen kolom posting. Menambah elemen di bawah header. Menambah elemen di atas footer. Pokoknya berani bereksperimen dan coba-coba.