Setelah sekian lama berexperimen membuat 1 kolom dibawah header kemudian 2 kolom dan akhirnya saya berhasil membuat 3 kolom widget dibawah header. Waktu yang saya butuhkan untuk menguasai cara membuat kolom dibawah header cukup lama hampir 2 bulan saya baru bisa membuatnya, wow.....! lama sekalinya telmi kali.....!,Hem...maklum namanya juga pemula kan gk musti langsung bisa. Oh ya kembali kecerita, Ternyata satu kesalahan yang membuat saya selalu gagal yaitu tidak teliti dalam menulis kode dan meletakannya. jadi saya ingatkan kepada ada untuk teliti dalam mengelola kode-kodeya. Pastikan jika anda Copas jangan ada yang tertinggal.
Karena saya sudah mengetahui dan bisa membuat 1,2,dan 3 kolom dibawah header jadi sekarang saya berani untuk memberikan tutorialnya kepada teman-teman yang barang kali ingin membuat kolom dibawah header. Jujur saya tidak berani memberikan tutorial yang belum saya coba, alasannya petama saya takut kalu salah nati saya berdosa dan yang kedua apabila saya tidak menguasai makan saya akan kesulitan untuk menanggapi pertnyaan-pertanyaan yang muncul.
Untuk tutorial kalini saya hanya akan membahas cara menambahkan 2 kolom dibawah header terlebih dulu untuk 3 kolom dibawah header akan saya bahas pada tutorial berikutya. Mungkin anda bertanya kanapa tidak langsung saja dibahas ?, jawaban saya karen belajar itu harus bertahap agar mudah dimengrti dan dipahami.
Langkah-langkah membuat 2 kolom dibawah header sebagai berikut :
- log in ke blog anda
- Pilih Rancangan >Edit HTML
- Cari kode ]]></b:skin>
- Copas kode dibawah dan letakan diatas kode ]]></b:skin> #box-kolom-widget { clear:both; } .box-widget { padding:0px 10px 10px 10px; border:1px dotted $bordercolor; }
- kemudian cari kode <div class='main-outer'> jika ada pengguna template lama cari kode <div id='main-wrapper'>
- Copas kode berikut letakan diatas kode <div class='main-outer'> atau kode <div id='main-wrapper'> </div> <div id='box-kolom-widget'> <div id='box1' style='width: 50%; float: left; margin:0; text-align: left;'> <b:section class='box-widget' id='col1' preferred='yes' style='float:left;'/> </div> <div id='box2' style='width: 50%; float: left; margin:0; text-align: left;'> <b:section class='box-widget' id='col2' preferred='yes' style='float:left;'/> </div> <div style='clear:both;'/>
- Kemudian Simpan Tempalate
- Apa bila terjadi galat seperti gambar dibawah ini saat anda menyimpan template berarti terdapat kesalahan dalam editng template. ulangi dengan lebih teliti langkah-langkah diatas
- Jika proses simpan template berhasil makan pada bagian elemen halaman aka muncul 2 kolom dibawah header seperti ini
Selamat mencoba dan Semoga berhasil
Tidak ada komentar:
Posting Komentar
Berkomentarlah
Demi pembelajaran kita bersama
Kritik dan saran anda sangat diperlukan demi memperbaiki Ide dan gagasan kita semua untuk kedepannya
Salam Blogger .. !!