Bagaimana bagus tidak? Silahkan Anda cari di blog tetangga sebelah kalau ada yang seperti ini. hahaha^^. Kebanyakan saya membuat artikel tidak pernah copy paste, paling hanya sekedar mengamati, mempelajari, dan memodifikasi itupun kalau ide dalam otak saya sedang tidak bersemangat. Kalau sedang fresh saya akan selalu memberikan kualitas artikel yang terbaik dan beragam bagi pengunjung semua.
Kembali lagi ke topik awal yaitu Cara Membuat Kotak Search Box Beautifull ini. Mengenai pembuatannya di blogger sangatlah mudah, hanya dengan memanfaatkan keragaman dan design CSS serta sedikit tambahan elemen HTML, Kotak Search Box ini dapat dipasang dengan mudah.
Langsung ke tahap pemasangan sekarang juga. As previous search boxes you can also add this search boxes in one step.See preview of search boxes below in search boxes,now lets see how to add them into blogger blog?
Follow and watch step by step making of Search Box :
1. Masuk ke Blogger.
2. Klik Tambah Widget / Add a Gadget.
3. Pilih HTML/Javascript.
4. Copy kode di bawah ini dan letakkan disana.
Search Box Style Green
<style type="text/css">#mediablogger-searchbox { border-radius: 5px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnx834qzLToy5PoJ3MeCSL4YsKf8UR2u2Qx_Dn8KkKLszn_DCODr5iHt2Bq7rhxnqclM1W360dk5sfwJgBDVmg8cIqn-7CuyjjK8zHvlPnyJfZmEe01ZCv_v9UdwYPZO30tA2JbRnxDNLl/s1600/impoint.blogspot.com-green.png) no-repeat scroll center center transparent; width: 307px; height: 50px; disaply: block;} form#mediablogger-searchform { display: block; padding: 9px 16px; margin: 0;} form#mediablogger-searchform #s { padding-left: 24px !important; padding: 7.5px; margin: 0; width: 198px; font-size: 16px; font-family: georgia; font-style: italic; color: #666666; vertical-align: top; border: none; background: transparent;} form#mediablogger-searchform#sbutton { margin: 0; padding: 0; height: 40px; width: 74px; vertical-align: top; border: none; background: transparent;}</style><div id="mediablogger-searchbox"> <form id="mediablogger-searchform" action="/search" method="get"> <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}' /> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /> </form></div>Untuk Cara Pemasangan Search Box Warna Lain, ganti kode berwarna merah kode diatas dengan url gambar di bawah ini :
- Style Red ( Merah )
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiInGem0h21NvUcw4N4EFFYnYxAg5gqkZ7Q-N4KhVtlVEK4e3q8spNORSZxPAmpnVjpkuVkLKmjwwaucztL-gDQTqSqkNGb5ol2fRIAJd7SEgPRFwBBG5DfQbst7mXgaRUzRMvE5kz2rNyb/s1600/impoint.blogspot.com-red.png- Style Blue ( Biru )
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNyoKeX2CZlsL1veeBWPObhqk-_3cGuwEq4UNq0rg5_VDb_rkDxIe4aYGvAS1Z3ICTDbS3iUvybqHaCzWhjfKYAQ_wlNTIcGoxLacgkRPVc2M-j3eWHVrpo0y8kBSueKYKDio-EDcQ5-Ce/s1600/impoint.blogspot.com-blue.png-Style Orange
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHgdzU9iE4UBeNsdhuLf9L4eNTn42TRmPPnhU5Pmh0RMbnIDaHRmQLLoylqulEVRpgNla2S7jxU4FtmkTpVrYdZeF0dQjHDqvUJPRBq5_ilBAs8_uSkQpqXCw5N0iC0_DnP0BzHIZEGiK8/s1600/impoint.blogspot.com-orange.pngSetelah selesai, Klik Save.
Itulah tadi panduan mengenai Cara Membuat Kotak Search Box Cantik di Blogger. Oke, terimakasih sampai jumpa di kesempatan tutorial blogger berikutnya hanya di Media Blogger. Lihat dan Baca Cara Menambahkan Email Subscription Widget di Bawah Posting , Cara Membuat Recent Posts Tumbnail with Scroll Professional , Membuat SEO Smart Auto Link di dalam Artikel Posting
Tidak ada komentar:
Posting Komentar