Beberapa waktu yang lalu Klak Klik mencoba ganti template memakai template blogger yang baru. Karena ada sedikit perbedaan kode html dan itu masih asing alias belum akrab sehingga seluruh gadget yang telah terpasang rapih menjadi berantakan.
Saya suka dengan header 2 kolom, satu di kiri dan satunya lagi di kanan. Sedangkan Blogger template baru tidak menyediakan template dengan header yang 2 kolom. Ketika hendak membagi header, saya mencoba menerapkan tips yang lama ternyata tidak berhasil. Setelah berkelana kesana kemari akhirnya kutemukan juga blog yang memposting tentang cara membagi header di blogger baru.
Maklum saya bukanlah orang yang ahli dalam bidang kode mengkode, juga tanpa didasari ilmu tentang blog, hanya berbekal nekad dan semangat pantang menyerah akhirnya terpecahkan juga misteri kode blogger baru. Meskipun memakan waktu yang cukup lama 3hari tetapi saya bangga dengan hasil yang saya capai.
Nah, sebagai ungkapan rasa bangga ini pada tutorial kali ini saya coba amalkan hasil perjuanganku selama ini kepada pembaca sekalian. Khusunya tips mengenai cara membagi header 2 kolom pada template designer blogger.
Ini contoh gambar hasil pengeditan :
Bagi yang mau mencoba tips ini, silahkan ikuti langkah berikut ini:
1. Masuk ke akun Blogger Anda.
2. Klik Rancangan > Edit HTML.
3. Klik Download Template Lengkap untuk membuat salinan template. Hal ini untuk mengantisipasi jika nanti terjadi kesalahan dalam pengeditan kita dapat dengan mudah mengembalikan template ke seperti semula.
4. Cari (CTRL+F) kode " /* Header " lalu Copy script dibawah ini dan Paste-kan tepat dibawah kode tsb :
Maklum saya bukanlah orang yang ahli dalam bidang kode mengkode, juga tanpa didasari ilmu tentang blog, hanya berbekal nekad dan semangat pantang menyerah akhirnya terpecahkan juga misteri kode blogger baru. Meskipun memakan waktu yang cukup lama 3hari tetapi saya bangga dengan hasil yang saya capai.
Nah, sebagai ungkapan rasa bangga ini pada tutorial kali ini saya coba amalkan hasil perjuanganku selama ini kepada pembaca sekalian. Khusunya tips mengenai cara membagi header 2 kolom pada template designer blogger.
Ini contoh gambar hasil pengeditan :
Bagi yang mau mencoba tips ini, silahkan ikuti langkah berikut ini:
1. Masuk ke akun Blogger Anda.
2. Klik Rancangan > Edit HTML.
3. Klik Download Template Lengkap untuk membuat salinan template. Hal ini untuk mengantisipasi jika nanti terjadi kesalahan dalam pengeditan kita dapat dengan mudah mengembalikan template ke seperti semula.
4. Cari (CTRL+F) kode " /* Header " lalu Copy script dibawah ini dan Paste-kan tepat dibawah kode tsb :
.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
_background-image: none;min-height: 154px; /* untuk mengatur tinggi header (height) */}
#header {
width: 45%; /* untuk mengatur lebar header kiri - title, description, image */
margin-right: 10px;float: left; }
#bgs_headerkanan {
float: right;
width: 49%; /* mengatur lebar header kanan */
margin: 20px 10px 5px 10px;
padding: 2px;}
#bgs_headerkanan .widget {margin: 3px;}
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
_background-image: none;min-height: 154px; /* untuk mengatur tinggi header (height) */}
#header {
width: 45%; /* untuk mengatur lebar header kiri - title, description, image */
margin-right: 10px;float: left; }
#bgs_headerkanan {
float: right;
width: 49%; /* mengatur lebar header kanan */
margin: 20px 10px 5px 10px;
padding: 2px;}
#bgs_headerkanan .widget {margin: 3px;}
5. Selanjutnya cari kode " <div class='region-inner header-inner'> " lalu Copy script dibawah ini dan Paste-kan tepat dibawah kode tsb :
<b:section class='bgs_headerkanan' id='bgs_headerkanan' maxwidgets='1' showaddelement='yes'></b:section>
6. Simpan Templete dan hasilnya bisa kita lihat seperti gambar di bawah ini:
Selamat Mencoba...!
