Tips dan Trik Cara Membuat Sidebar (Kiri dan Kanan) di Blogger
KARAWANGPORTAL - Membuat tutorial tentang modifikasi blog memang kadang-kadang terasa malas karena tak urung tutorial tak mungkin dibuat dalam bentuk pendek atau singkat. "Awang-awangen" kata"wong jowo" atau dengan kata lain "sungkan" atau gampangnya bisa kita sebut "ogah-ogahan". Yah, ...., terkadang kejenuhan menuliskan posting tak dapat dipungkiri dan ditolak, apalagi posting dalam bentuk tutorial html dengan kode yang begitu banyak.
Menuliskan secara sederhana memang bisa
saja dilakukan, tapi terkadang aku merasakan betapa sis-sianya sebuah
tutorial yang terlalu sederhana dan membuat banyak orang merasa jauh
dari rasa puas atau setidak-tidaknya mampu sedikit menambah pengertian
atau wawasan tentang sesuatu yang "sangat ingin dipelajari". Sebuah
kondisi yang sering juga aku alami hingga detik ini.
Terkait dengan tutorial modifikasi blog, kali ini kita akan coba bahas tentang cara membuat "blog 2 (dua) kolom" atau "blog dengan 1(satu) sidebar" di rubah menjadi "blog 3 (tiga) kolom" dengan 2 buah sidebar di dalamnya. Pembuatan 2 sidebar ini pastinya hanya diperuntukkan bagi blogger yang menggunakan "Template Lama" atau "Template Tata Letak" yang hingga saat ini hanya menyediakan template dengan 2 buah kolom (seperti template minima, tic-tac blue dll). Untuk "New Blogger Templates" perubahan seperti ini tak diperlukan lagi karena telah tersedia berbagai variasi penggunaan kolom sidebar dan bahkan hingga elemen di atas footer.
Kita akan memulai tutorial ini dengan memahami penggunaan kode html di template yang berhubungan dengan penamaan syntax pembentuk kolom blog.
- Setiap template acap kali menggunakan nama syntax berbeda untuk sidebar, main, header atau footer, seperti misalnya : #sidebar-wrapper, #sidebar-wrap, #main-wrapper, #main-wrap, #footer-wrapper, #footer-wrap, #bottom-wrap dan beberapa nama yang lain seperti misalnya #kotak-sidebar.
- Penamaan-penamaan pada syntax tersebut sebenarnya hanyalah untuk memudahkan pengguna blog untuk dalam menentukan posisi dan ciri setiap bagian template, dimana main biasanya di tengah, sidebar di kanan atau kiri serta footer di bawah dan header di atas.
- Sampeyan bisa merubah kode-kode di atas dengan nama-nama baru (syntax baru) sesuai selera. Bahkan sampeyan bisa menamainya dengan nama seperti : #header-wrapper dirubah menjadi #kepala-wrap, #sidebar-wrapper menjadi #tangan-wrapper, #footer-wrapper menjadi #kaki-wrap dan #main-wrapper menjadi #perut-wrap atau #pusar-wrap. Lha, jika menginginkan elemen baru di bawah main-wrapper dan di atas footer-wrapper sampeyan bisa memberi nama #bawahperut-wrap atau #bawahpusar-wrap. Ya ...., harus dibuat seperti itu jangan ditulis pakai nama aslinya (yang di bawah pusar!). Nggak lucu jadinya , he ...., he ....
- Setelah perubahan nama pada syntax-syntax ini, kita harus sesuaikan kode HTML yang ada di tag body antara tag pembuka <body> dan tag penutup </body>. Tanpa dilakukan perubahan tentu saja blog tidak akan terbentuk.
- Saat melakukan perubahan atau modifikasi penambahan elemen sidebar tak perlu dilakukan (KLIK) "Expand Widget Templates".
Urutan Langkah Pembuatan Elemen Sidebar Baru
- Login : Login ke blogger.
- Tuliskan User Name atau Nama Pengguna. Sampeyan bisa juga gunakan Email Address.
- Tuliskan Password atau Sandi.
- KLIK "Login". Tunggu hingga halaman "Dasboard" terbuka.
- Dasboard (Dasbor) : Kita kan berhenti hingga langkah ini terlebih dahulu. Aku menyarankan untuk melanjutkan dengan membuat blog percobaan terlebih dahulu dengan membuat sebuah blog baru. Supaya lebih mudah, gunakanlah template Minima biar kodenya sama dengan contoh yang akan disertakan. Percayalah ...., setelah percobaan dilakukan terhadap template Minima ini, maka pemahaman tentang cara merubah kode CSS dan xHTML untuk membuat sidebar baru akan dengan mudah dilakukan di template manapun.
- Untuk membuat blog baru cukup lakukan KLIK "Buat Blog".
- Blog baru ini akan berupa blog dengan template dari "New Blogger Template". Ganti dengan template "Tata Letak" agar bisa kita dapatkan template "Minima".
- Masuklah kembali ke "Dasboard", kemudian KLIK "Design/Rancangan" (blog baru),
- KLIK "Edit HTML".
- Tarik halaman ke bawah, KLIK "Pilih Template Tata Letak".
- Pilih dan KLIK "Minima".
- Setelah proses perubahan terjadi, maka sampeyan akan kembali di "Edit HTML". Disinilah semua perubahan akan dilakukan dengan merubah kode CSS yang terdapat di antara tag <head> dan tag </head>, serta xHTML yang ada di antara tag <body> dan tag </body>.
- Hapus syntax berikut dan gantikan dengan syntax baru yang berada di bawahnya.
#main-wrapper {
width: 410px;
float: $startSide;
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 Baru
#main-wrapper {
width: 440px;
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 */
}Syntax (kode) Sidebar yang baru
#sidebarkanan-wrapper {
width: 250px;
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 */
}
#sidebarkiri-wrapper {
width: 250px;
margin-right: 20px;
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 */
}Perubahan pada xHTML
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</div>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Followers1' locked='false' title='Pengikut' type='Followers'/>
<b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='Mengenai Saya' type='Profile'/>
</b:section>
</div>xHTML Baru
<div id='sidebarkiri-wrapper'>
<b:section class='sidebar' id='sidebarkiri' showaddelement='yes'/>
</div>
<div id='sidebarkanan-wrapper'>
<b:section class='sidebar' id='sidebarkanan' showaddelement='yes'>
<b:widget id='Followers1' locked='false' title='Pengikut' type='Followers'/>
<b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='Mengenai Saya' type='Profile'/>
</b:section>
</div>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</div>Kode yang berwarna oranye harap disesuaikan dengan kode yangada di template sampeyan.<a href='#sidebar'>skip to sidebar</a>Kode Pengganti
<a href='#sidebarkiri'>skip to sidebarkiri</a>
<a href='#sidebarkanan'>skip to sidebarkanan</a>Karena
terjadi penambahan elemen sidebar yang baru (sidebar kiri) dan
penambahan lebar pada sidebar dan main-wrapper, maka secara otomatis
akan terjadi perubahan lebar secara keseluruhan. Rubah nilai width pada beberapa kode CSS berikut dengan nilai yang baru.#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}Kode baru dengan perubahan nilai width
#header-wrapper {
width:980px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
#outer-wrapper {
width: 980px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
#footer {
width:980px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}Catatan/Keterangan
- Pada saat sampeyan mengadakan perubahan ukuran pada sidebar ataupun main, selalu lakukan pengecekan hasil dengan membuka blog dan Elemen Laman. Hal ini dilakukan supaya antara hasil di halaman blog dan Elemen Laman tidak ada perbedaan.
- Untuk mempermudah mengetahui simetris dan
tidaknya hasil perubahan yang dilakukan terhadap width di sidebar kanan,
kiri dan main-wrapper, sampeyan bisa tambahkan terlebih dahulu background color pada widget dengan menambahkan syntax :
.widget { background: red; }. Letakkan di atas ]]></b:skin>. Kode ini hanya digunakan sementara saat modifikasi dilakukan pada width supaya jarak setiap kolom terlihat jelas. Hapus kode setelah modifikasi selesai dilakukan. - Perubahan penambahan lebar pada sidebar dan main selau melibatkan perubahan lebar pada "header-wrapper, outer-wrapper dan footer-wrapper. Pada beberapa template menggunakan nama berbeda dengan fungsi sama.
No comments:
Post a Comment
Karawang Portal | adalah tempat belajar blogger pemula dan profesional. Kamu bisa menemukan kami di sosial media berikut.
Note: Only a member of this blog may post a comment.