.jpg)
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.Hapus syntax #sidebar-wrapper { .... } kemudian ganti dengan syntax baru berikut. Karena syntax telah berubah serta adanya penambahan syntax baru (sdebar kiri), maka kita harus melakukan perubahan pada xHTML yang terletak di tag body. Hapus dan gantikan xHTML di bagian body yang seperti terlihat di bawah ini dengan xHTML Baru. Untuk melengkapi perubahan, ganti kode berikut (di bawah <body>)dengan kode di bawahnya.
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'>Kode yang berwarna oranye harap disesuaikan dengan kode yangada di template sampeyan.
<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>
<a href='#sidebar'>skip to sidebar</a>
Kode Pengganti
<a href='#sidebarkiri'>skip to sidebarkiri</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.
<a href='#sidebarkanan'>skip to sidebarkanan</a>
#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.
Semoga memberi manfaat!
Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :
» Happy Blogging - gubhugreyot «
mas jujur ya, blog nya kereeeeeen bangats,mas dapat ilmunya dari mana? aku mau juga punya blog sekeren blog mas ini, saya suka blognya mas,klo mas ngak keberatan kasih info2 blog ke email saya ya mas, thank
BalasHapussaya udah coba.. tapi gax bisa ne.. sya gx menemukan kode yang pertama itu di blog saya.. mohon bantuan nya nya..
BalasHapustolong di cek langsung ke http://article-compilation.blogspot.com
@Misbah Hiday (http://article-compilation.blogspot.com)
BalasHapusKrn anda pakai template Mudah/simple by Josh Peterson, maka untuk membuat 2 sidebar tinggal login, dasboard, template, cusomize, layout » Body layout (pilih yg 2 sidebar) kemudian klik Apply to Blog