Cara membuat Kotak Search Pada Blogger



Do you Like this story..?

Get Free Email Updates Daily!

Follow us!

Cara Membuat Kota Pencarian Keren Pada Blogger - Pada kesempatan kali ini Kang IT Cyber syndicate akan memberikan Tutorial Bloger mengenai Cara Menambahkan Kotak Pencarian / Search Box dengan Tampilan Unik dan Keren. Nah jika Anda memiliki pengunjung setia, maka sewaktu-waktu pengunjung tersebut akan melirik artikel lain dari blog Anda dengan mencari artikel yang dituju melalui kotak pencarian tersebut sebagai gantinya dari daftar isi. Tentunya dengan tampilan yang Unik dan Keren akan menghiasi sidebar blog Anda dengan widget yang bermutu dan penting untuk blog. Siapa tau pengunjung tertarik dengan tampilan Kotak Pencarian / Search Box yang Unik dan Keren.

Di bawah ini adalah gambar dari tampilan Kotak Pencarian dan caranya.


Cara Memasang Kotak Pencarian / Search Box Keren Pada Blogger
  • Login ke Blogger Anda,
  • Pilih Tata Letak » Tambah Gadget » Pilih HTML/Javascript,
  • Selanjutnya, copy paste lalu masukan script Recent Comments di bawah ini,
Silahkan Anda pilih salah satu tampilan yang tersedia.

Tampilan 1 Serta Kodenya

search box style1
<style type="text/css">
#w2b-searchbox{background:url(http://lh5.googleusercontent.com/-Cm6Ya53Wj6g/TeixHY3LRDI/AAAAAAAAA6I/jJkMnJEN60s/way2blogging_searchbox1.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-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>

Tampilan 2 Serta Kodenya

search box style2
<style type="text/css">
#w2b-searchbox{background:url(http://lh3.googleusercontent.com/-bk2Si48eZSo/TeixHMdeiII/AAAAAAAAA6A/eQEEa1tyZkI/way2blogging_searchbox2.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-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>

Tampilan 3 Serta Kodenya

search box style3
<style type="text/css">
#w2b-searchbox{background:url(http://lh3.googleusercontent.com/-peHEeRB58M8/TeixHZml3oI/AAAAAAAAA6E/J2_zg9Fn8PI/way2blogging_searchbox3.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-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>

Tampilan 4 Serta Kodenya

search box style4
<style type="text/css">
#w2b-searchbox{background:url(http://lh4.googleusercontent.com/-Pd1zyUMhsVo/TeixHnaB1hI/AAAAAAAAA6M/p-Iz_WGMQ3M/way2blogging_searchbox4.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value=""/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Tampilan 5 Serta Kodenya

search box style5
<style type="text/css">
#w2b-searchbox{background:url(http://lh6.googleusercontent.com/-wu3eH4N9D1Q/TeixH8dOd9I/AAAAAAAAA6Q/taoILP-y0vE/way2blogging_searchbox5.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value=""/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Tampilan 6 Serta Kodenya

search box style6
<style type="text/css">
#w2b-searchbox{background:url(http://lh5.googleusercontent.com/-TN5qYaRnSR4/TeixH2TVJlI/AAAAAAAAA6U/gYrDmDItWJQ/way2blogging_searchbox6.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value=""/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>
  • Terakhir, Pilih Simpan.
Silahkan Anda sesuaikan tampilan widget tersebut dengan tampilan blog Anda agar sesuai.
Sekian sudah artikel mengenai Cara Membuat Kota Pencarian Keren Pada Blogger ini. Semoga artikel ini dapat bermanfaat dan berguna. Terima kasih.


Comments
0 Comments

Responses

0 Respones to "Cara membuat Kotak Search Pada Blogger"

Post a Comment

Peraturan Berkomentar di Kolom Komentar It Cyber Syndicate :
» Jangan Menggunakan bahasa yang tidak sopan (Politik, Sara, Pornografi, Menyinggung)
» Tidak Di Ijinkan menampilkan Link(URL)
» Bentuk Komentar Tidak Berbau Keagamaan
» Dilarang Promosi Saat Berkomentar

Jika melanggar kriteria diatas, maka komentar akan dihapus

Terima kasih sudah berkunjung.

 
LINK BANNER :
  • Tips, Triks, Cheat, Software,
  • Binus Hacker - Independent Hacking Community
  • Blog yang ingin berbagi tips SEO, download ringtone, ebook dan software gratis, puisi, berbagi tips dan trik blogger, belajar bisnis online, belajar forex gratis
  • Blog Adexme | 'free software','tutorial blog','template blog' dll
  • Berbagi Tips dan Trik Seputar Komputer dan Internet
  • mahir blogging
  • Bermanfaat
  • Photobucket
  • jagoBlog.com
  • News Entertainment Tips and Trick | Blog | SEO | Software | Mobile | Games | Others.
  • Arimurti untuk Indonesia
  • Share-cara
  • Share shoftware,Tutor,Facebook,Blog,Tips Trick

Statistik

Return to top of page Copyright © 2010 | IT Cyber Syndicate