Belajar Menambah Widget Di Header Blog

ref#16

Hari ini aku mencoba belajar untuk mempercantik blog ini dengan menambahkan widget pada header. Setelah browsing kesan kemari akhirnya aku dapatkan beberapa tutorial yang aku anggap menarik dan mudah dipahami.
Menambahkan widget pada header blog sering dilakukan untuk berbagai keperluan. Salah satunya adalah untuk menampilkan iklan atau adsense. Pada template bawaan dari blogger biasanya belum terpasang widget tersebut, sehingga kita perlu menambahkannya. Template bawaan dari blogger hanya menyediakan widget untuk judul blog dan deskripsi blog. Pada template blog yang sudah diubah (bukan template bawaan) biasanya kode tersebut sudah ada, jadi kita tinggal mengubahnya saja. Untuk mengubah kode tersebut diperlukan sedikit pengetahuan tentang CSS dan juga ketelitian dalam menentukan kode-kode tersebut, sebab jika satu saja kode tersebut lupa tidak disertakan akan mengakibatkan kesalahan. Akibat dari kesalahan tersebut adalah widget tidak muncul, atau muncul tetapi tidak seperti yang kita inginkan.
Dengan memahami kode-kode tersebut diharapkan tidak terjadi kesalahan dan tentunya widget dapat tampil/muncul seperti apa yang kita harapkan. Untuk itu sebelum menambah widget atau mengedit html template blog anda saya sarankan untuk mengunduh template terlebih dahulu. Supaya apabila terjadi kesalahan kita tinggal mengunggah template yang sudah diunduh tadi.

Berikut artikel yang bisa saya berikan:

Artikel pertama Untuk dapat membuat widget di header blog ada beberapa langkah yang harus dilakukan, diantaranya adalah memodifikasi header wrapper terlebih dahulu. Tujuanya untuk menyembunyikan judul dan deskripsi blog agar tidak berebutan tempat dengan iklan atau widget yang akan kita pasang. Untuk menyembunyikan judul dan deskripsi blog dapat dilakukan dengan cara menambahkan kode display none pada kedua kode tersebut.

Perhatikan contoh berikut ini :

#header h1{margin:0 5px 0;padding:0px 0px 0px 0px;font-family:Georgia,Serif,Arial, Helvetica, Sans-serif;font-weight:bold;font-size:36px;line-height:36px;color:#474646;text-shadow:0px 1px 0px #fff;display:none;}

#header .description{padding-left:8px;color:#666;line-height:16px;font-size:16px;padding-top:0px;margin-top:5px;text-shadow:0px 1px 0px #fff;font-family:Georgia,Serif,Arial, Helvetica, Sans-serif;display:none;}

Setelah kedua kode tersebut terpasang berarti judul dan deskripsi blog sudah disembunyikan. Jika suatu saat anda ingin menampilkannya kembali tinggal menghilangkan kode display none tersebut. Menambahkan Widget Untuk menambahkan widget di header blog dapat kita lakukan dengan cara sebagai berikut :
Cari kode seperti ini atau yang mirip dengan kode tersebut(gunakan ctrl+f) :

<b:section class="header" id="header" maxwidgets="1" showaddelement="no">

Ubah kode tersebut menjadi seperti berikut ini :

<b:section class="header" id="header" maxwidgets="2" showaddelement="yes">

Artinya sekarang widget header anda ada 2, satu widget bawaan dan yang kedua adalah widget tambahan. Showaddelement='yes' artinya kita dapat menambahkan widget yang baru.
Untuk menambahkan widget yang baru caranya adalah sebagai berikut : tata leak>>tambah gadget (header)>>html/javascript widget>>masukan kode atau javascript>>simpan widfet.

Untuk mengatur posisi widget baru tersebut, cari kode seperti di bawah (atau yang mirip) karena setiap template memiliki kode yang berbeda. Setelah ketemu lakukan pengaturan seperti di bawah :

#header h2{padding-left:15px;color:#666;font:14px Georgia,Helvetica,Sans-serif}

#header2{float:right;width:75%;margin-right:10px;margin-top: 20px; padding-right:0px;overflow:hidden;}

#header2 .widget{padding:0px 0px 0px 0px;float:right}

Keterangan :
Padding : menentukan jarak komponen ke border atau ukuran jarak bagian dalam, padding-left : 15 px artinya widget berjarak 15px dari tepi sebelah kiri.
Margin : biasanya ditulis seperti ini margin:5px 5px 5px 5px; urutanya atas, kanan, bawah dan kiri, atau bisa menngunakan seperti padding diatas. Pada template yang saya gunakan kodenya seperti ini margin-right:20px; artinya widget berjarak 20 px dari tepi kanan. margin-top : 20px; artinya widget berjarak 20px dari tepi atas.
Width : lebar widget (contoh menggunakan persen) supaya lebih mudah silahkan gunakan pixel (px) saja
Float:right = fungsi float adalah menekan bidang keatas, maksud dari float right ialah menekan ke atas kanan.

Artikel kedua
cara kedua membuat header terbagi menjadi 2 bagian yaitu header disebelah kiri dan gadget terletak disebelah kanan header seperti pada gambar diatas.
Bila anda berminat, silahkan anda ikuti langkah - langkah dibawah ini :
1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.
4. Seperti biasa alangkah baiknya setiap edit Html, Download dulu Template Lengkap (back-up Template) agar template aman, bila terjadi kesalahan.
5. Cari kode yang sama atau mirip dengan kode berikut :

/* Header
----------------------------------------------- */
.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
_background-image: none;
}
.Header h1 {
font: $(header.font);
color: $(header.text.color);
text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
}
.Header h1 a {
color: $(header.text.color);
}
.Header .description {
font-size: $(description.text.size);
color: $(description.text.color);
}
.header-inner .Header .titlewrapper {
padding: 22px $(header.padding);
}
.header-inner .Header .descriptionwrapper {
padding: 0 $(header.padding);
}

Catatan :
Setiap template biasanya berbeda kodenya, yang penting perhatikan kode - kode yang ada pada bagian (/* Header)6. Ganti kode diatas dengan kode dibawah ini :

/* Header
----------------------------------------------- */
#header {
float:left;
width:40%;
margin: 0px;
text-align: center;
color:#ffcc66;
}
#header2{float:left; width:60%;}
7. Kemudian silahkan anda cari lagi kode yang sama atau mirip dengan kode berikut :

<div class='region-inner header-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='TITEL BLOG ANDA (Header)' type='Header'/>
</b:section>
</div>8. Ganti kode diatas dengan kode dibawah ini :

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='TITEL BLOG ANDA (Header)' type='Header'/>
</b:section>
<b:section class='header' id='header2' maxwidgets='4' showaddelement='yes'/>
<div style='clear:both;'/>
</div>
10. Simpan Template.
Nah.... jadi deh....,meskipun aku masih belum tahu mau dikasih gadget apa
Selamat mencoba dan Semoga bermanfaat...

sumber
http://mastugino.blogspot.com/2012/08/menambah-widget-header.

http://joglio.blogspot.com/2012/09/kumpulan-cara-menambah-gadget-kolom.

Description: Belajar Menambah Widget Di Header Blog Rating: 3.5 Reviewer: SAMBORES ItemReviewed: Belajar Menambah Widget Di Header Blog