31 March 2015

Cara Menambahkan Widget pada Header

Menambah Widget
Pada Blog kita tahu bahwa ada bagian yang namanya Header,dimana pada header tersebut ada tiga element yaitu element Gambar, element Title dan Description.
Kemudian bagaimana apabila pada header tersebut kita ingin memasukan atau menambahkan berupa navigasi atau sebuah flash animasi yang biasa dipakai buat promosi iklan maka kita harus menambahkan atau menyisipkan widget di area header tersebut,untuk itulah tema hari ini saya buat yaitu bagaimana cara menambahkan satu widget / gadget pada header.

Penambahan Widget Pada Header 

Kita tahu bahwa dengan widget kita bisa menambahkan apa saja termasuk HTML / JavaScript.Disini saya akan coba  pada widget yang telah disisipkan pada header untuk digunakan menampilkan Feed web luar.
Langkah untuk menambahkan widget nya :
Yang pertama saya coba mencari kode pada halaman Edit HTML dengan bantuan ctrl+F biar cepat yaitu kode:
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
setelah ketemu kode tersebut kemudian saya coba menambahkan pada class='header' dengan 'header-kiri' jadi kode nya kira-kira akan menjadi seperti ini
<b:section class='header header-kiri' id='header' maxwidgets='1' showaddelement='no'>
dibawah saya coba pakai capture biar lebih jelas

Kode Header

Setelah kita rubah kode diatas itu, dengan bantuan ctrl+F lagi  saya cari lagi kode yang kedua yaitu
<div class='header-cap-bottom cap-bottom'>
dan kemudian setelah ditemukan kode yang dimaksud saya  mencoba menambahkan code ini di atasnya
<b:section class='header-kanan crosscol' id='header-kanan' maxwidgets='1' showaddelement='yes'/>
<div style='clear:both'/>
Saya kasih lagi capturenya di bawah

 Penambahan kode 2

Setelah itu saya coba cari lagi kode
]]></b:skin>
kemudian coba  menambahkan kode ini diatasnya
.header-kiri {
display: inline-block;
float: left;
}
#header-kanan {
display: inline-block;
float: right;
}
Biar lebih jelas lagi ini capturenya

Penambahan CSS

kemudian saya coba save template dan kemudian saya coba lihat pada layout ternyata disana sudah ada penambahan buat widget/gadget baru

Widget telah di tambahkan

Dan saya coba klik add gadgetnya kemudian saya coba masukan contoh kode HTML feed terus saya save dan terakhir saya coba view blog...wow tampil dan sedikit mainkan lagi CSS nya biar kelihatannya catik.


Hasil Penambahan Widget

Hmm...cantikan.
Begitulah cara saya bagaimana untuk menambahkan suatu widget / gadget pada header,semoga bermanfaat buat sesama newbi blog seperti saya.

Oke Happy Blogger.

No comments:

Post a Comment