Langsung ke konten utama

Widget Form Search Engine for Blogger

Dalam sebuah blog/web tentunya hampir 99% pasti akan menyertakan sebuah kotak pencarian untuk memudahkan pengunjung dalam mencari sesuatu, namun tidak sedikti juga yang tidak menyertakan kotak pencarian karena beberapa alasan, mungkin alasannya adalah sebagai berikut :

  1. Sudah menyediak halaman sitemap jadi tidak memerlukan search form.
  2. Loading blog berat.
  3. Berpikir bahwa pengunjung tidak akan menggunakan search form pada blognya.
Namun bagi anda yang ingin menyediakan kotak pencarian pada blog anda sebagai fitur tambahan bagi para pengunjung blog anda, anda dapat dengan mudah menambahkannya dengan menuju Tata Letak > Add New Gadget > Search Form, atau dengan membuat sebuah widget pencarian sendiri.


Dibawah ini ada satu kotak pencarian yang mungkin bisa anda gunakan pada blog anda.
Pertama silahkan login akun blogger anda, dan silahkan menuju template kemudian silahkan cari kode ]]></b:skin> kemudian letakkan kode dibawah ini sebelum (di atas) kode ]]></b:skin>
.searchform {background: url(https://lh5.googleusercontent.com/-tihBRy5ftiI/UmLOuzEDBxI/AAAAAAAAAJA/pIheWO76kXw/s550/jurucoding-search.png) no-repeat; width:550px;height:47px; display: inline-block;zoom: 1; /* ie7 hack for display:inline-block */ *display: inline;border: solid 0px #ccc;padding: 0px;} .searchform input {font: normal 12px Arial, Helvetica, sans-serif;padding:6px;} .searchform .searchfield {background: #e5e5e5;width: 416px;outline: none;margin:5px 2px 0px 5px;;border-top:1px solid #888;border-left:1px solid #888;border-right:1px solid #ccc;border-bottom:1px solid #ccc;} .searchform .searchbutton {background: url(https://lh5.googleusercontent.com/-xqhs_7_uXsk/UmLPC693lmI/AAAAAAAAAJI/8HCsux2HrXc/h96/jurucoding-button-search.jpg) no-repeat;height: 28px; width: 104px;border:none;}
Kemudian simpan Template anda.
Selanjutnya silahkan menuju Tata Letak,  dan tambahkan gadget baru, pilih HTML/JavaScript, kemudian letakkan kode berikut :
<form action=' /search' class='searchform' method='get'>
<input class='searchfield' id='q' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;&quot;;}' onfocus='if (this.value == &quot;&quot;) {this.value = &quot;&quot;}' type='text' value=''/>
<input class='searchbutton' type='submit' value=''/>
</form>
Selanjutnya simpan dan lihat hasilnya.
Bagaimana? Mudah bukan?
Label:

Komentar

Posting Komentar

Postingan populer dari blog ini

Membuat Login Form Dengan HTML dan CSS

Sebuah website tentu memiliki interface untuk client dan admin, dan untuk halaman admin tentu saja harus masuk terlebih dulu melalui halaman login. Bagaimana jika membuat halaman login form? Pada kesempatan ini atau tepatnya merupakan postingan pertama pada bulan desember 2013 ini Juru Coding  akan berbagi tutorial untuk membuat sebuah halaman login sederhana menggunakan HTML dan CSS. Untuk membuat halaman login form anda dapat mengunduh source lengkapnya melalui halaman ini, karena pada halaman ini hanya sebagai introduce saja dan untuk selebihnya silahkan dipelajari sendiri. Berikut screenshotnya : Index.html <!DOCTYPE html> <html lang="en"> <head>   <meta charset="utf-8">   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">   <title>Login Form</title>   <link rel="stylesheet" href="css/style.css"> </head> <body>   <section class...
14 komentar
Baca selengkapnya

Sassy Social Bookmarking Widget dengan Animasi Untuk Blogger

Selamat pagi sobat blogger, terimakasih sudah bersedia berkunjung kembali di Juru Coding. Sebelumnya mohon maaf karena updatenya jarang-jarang, maklum masih konsen uts. Pada kesempatan ini saya akan berbagi widget social bookmarking dengan animasi, dimana widget ini akan berada disudut kiri bawah, sedikit jauh mirip dengan yang berada di sudut kiri bawah yang ada pada Path. Stylenya sederhana dan tidak berpengaruh pada loading blog karena widget ini memang ringan dan tentunya tidak ketinggalan jaman. berikut screenshotnya. Demo bisa dilihat di demo-jurucoding.blogspot.com Berikut cara membuatnya : Login akun blogger Masuk ke Template > Edit HTML Kemudian letakkan script dibawah ini tepat sebelum tag </body> <div class='shr_ss shr_publisher'> </div> <script type='text/javascript'> var SHRSS_Settings = {&quot;shr_ss&quot;:{&quot;src&quot;:&quot;//dtym7iokkjlif.cloudfront.net/media/downloads/sas...
4 komentar
Baca selengkapnya

Cara Bypass Shorten Link

Beberapa waktu yang lalu saya sudah berbagi cara bypass adf.ly  dengan memanfaatkan situs bypasser, pada kesempatan kali ini saya kembali akan berbagi cara untuk bypass adf.ly, maaf maksud saya shorten link karena yang di bypass bukan cuma adf.ly melainkan adfoc.us, linkbucks dan lain-lain. Caranya cukup mudah, cukup buka browser anda (Chrome / Firefox), kemudian cari ekstensi Tampermonkey (chrome), Greasemonkey (firefox). kemudian setelah instalasi selesai, lanjutkan dengan menginstall script-nya. Atau, anda juga dapat menggunakan cara dibawah ini. Chrome Install Tampermonkey Install Script Firefox Install Greasemonkey Install Script Kemudian selanjutnya silahkan dicoba, dan jika tidak bekerja maka silahkan restart browser, dan jika masih tidak bekerja juga maka remove terlebih dulu Tampermonkey/Greasemonkey kemudian ikuti cara dibawah ini Install Tampermonkey/Greasemonkey Restart browser Install script Dan jika dengan cara diatas masi...
1 komentar
Baca selengkapnya