Cara Memodifikasi Search Form Blogger Plugins

Tutorial blogger ini mencoba memberikan sebuah trick bagi blogger untuk merubah bentuk dan tampilan search form (orang sering juga menyebutnya sebagai search engine atau dikenal juga sebagai kotak penelusuran) agar terlihat lebih cantik dan menarik. Tak banyak kode css yang diperlukan. Kita hanya butuh satu deret kode CSS saja dan siapapun dapat membuat berbagai gaya yang berbeda. Hal yang penting setelah sampeyan mencoba menggunakan kode CSS ini, segeralah upload background imagenya di blogger agar loading selalu dalam keadaan terjaga. Atau mungkin jika ingin menyesuaikan background search form dengan background halaman blog, cobalah untuk merubah background-nya dengan image berbeda.

Kode CSS

#CustomSearch1_form{
        width:95%;
        background:#333 url('https://sites.google.com/site/gubhugreyot/postimages/bg_hor-grad-brown.gif') bottom repeat-x;
        background-position:0 25px;
        padding:8px;
        border:1px solid #888;
        margin:20px auto;
        color:#aaa;
        border:1px solid #aaa;
        box-shadow:0 0 8px #444;
        border-radius:5px;
}

Cara Merubah Tampilan Search Form

• Login ke Blogger.
• Halaman Dasbor/Dasboard.
• Jika Wudget Search Form belum diaktifkan, silahkan install terlebih dahulu melalui Page Elements » Add a Gadget » Kotak Penelusuran(search Box).
• Klik Rancangan/Design.
• Klik Edit HTML.
• Cari kode ]]></b:skin>. Gunakan Ctrl + F untuk mempercepat pencarian!
• Copy dan pastekan kode CSS tepat di atas kode ]]></b:skin>
• Klik Save Template.
• Buka blog dan lihat hasilnya.

Catatan/Keterangan:

• Untuk merubah lebar search form lakukan perubahan pada width:95%;
• background-position:0 25px;: 0 = posisi background dalam arah horizontal (x) dan 25px = posisi background dalam arah vertical (y). Jika tak diperlukan kode ini dapat dihilangkan.
• Upload image (https://sites.google.com/site/gubhugreyot/postimages/bg_hor-grad-brown.gif) di blogger melalui halaman posting baru kemudian gunakan sebagai background. Langkah ini diperlukan agar background hanya digunakan secara pribadi.
• Background dapat dirubah untuk penyesuaian dengan background blog.
• Silahkan buka Special Tutorials yang ada di vertical accordion menu (halaman sebelah kiri) apabila membutuhkan panduan tentang cara menyimpan kode dan cara cepat mencari kode HTMl.

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

» Happy Blogging - gubhugreyot «