February 19, 2012

Menambahkan Search Box di Header (blogspot)

Search
Saya memang jarang sekali share tentang tips  blogging, maklum saya memang kurang ahli dalam hal ini. Lihat aja template nya masih pakai yang standar blogger. Hehehe..
Tapi sepertinya menarik juga untuk share tips yang satu ini. Saya baru saja mencoba menambahkan menu search pada header blog. Setelah blog walking kesana kemari, akhirnya saya temukan juga cara yang ampuh. Hasilnya dapat anda lihat di kanan atas blog saya.
Ok, langsung disimak saja,
1. Masuk ke akun blogger
2. Lihat di Dashboard > Design > Edit HTML.
3. Jangan lupa Back up dulu template untuk jaga-jaga.
4. Expand Widget Templates tidak perlu di centang.
5. Cari kode berikut pada HTML code (kodenya tidak akan sama persis):
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='My Test  Blog (Header)' type='Header'/>
</b:section>

6. Tambahkan kode ini setelahnya.

<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>

7. Keseluruhan kode jadi seperti ini :
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Blogger Sentral Widget Showcase (Header)' type='Header'/>
</b:section>
<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>

8. Selanjutnya masih di edit HTML, cari kode berikut : ]]></b:skin>

9. Paste kan kode berikut tepat di atasnya,
#header, body#layout #header {width:50%;display:inline-block;float:left;}
#header-right, body#layout #header-right {width:35%;display:inline-block;float:right;padding:15px;}
#header-right .widget {margin:0;}

10. Sekarang saatnya menginstall Widget. Pada menu tata letak, klik tambah gadget, kemudian tambahkan kotak pencarian dari google.

Menambah search di header blog scr 1

‘Tambah Gadget’ kadang terletak di sebelah header, seperti di blog ini :

19-02-2012 17-37-24

Saya mengambil referensi dari sini (bahasa Inggris): http://www.bloggersentral.com/2010/05/add-banner-or-search-box-in-blogger.html

Semoga berguna.

12 comments :

  1. bro,ente emang jarang post soal blog! Tapi skali post!! Boom. Berguna!

    ReplyDelete
  2. Thanks bro,,
    Makasih juga udah berkunjung,,:)

    ReplyDelete
  3. wah mantabsss sob, izin save dulu ya...eh izin follow juga, kalo sudi follback ya:)

    ReplyDelete
  4. Yup sob,,Yang follow dan comment pasti saya follback,,thanks udah berkunjung,,

    ReplyDelete
  5. Followback ane gan www.tempat-bersinggah.blogspot.com, ane follow blog agan... ditunggu followbacknya ya gan...
    thanks

    ReplyDelete
  6. Replies
    1. Yup gan, silahkan..
      thanks udh berkunjung..

      Delete
  7. wah sangat berguna infonya kang
    sukses di blog ane :D

    ReplyDelete
  8. wah nice infonya nieh, ntar saya akan coba ya... sangat berguna ini buat saya yang baru belajar nge-blog

    ReplyDelete
  9. Alhamdulillah ketemu juga apa yang saya cari.
    Langsung praktek, tolong dibantu jika ada kesulitan.
    Terimakasih.

    ReplyDelete

Kritik? Saran? Pertanyaan? Sharing? Mari berbagi di Form Komentar !
Mohon untuk tidak mencantumkan Link dalam form komentar.
Komentar Spam tidak akan ditampilkan.
Mohon maaf jika komentar tidak langsung dibalas.