Lalu bagaimana cara memasang search engine di blog? Untuk memasangnya kita harus membuat search engine itu terlebih dahulu baru memasangnya :)
Dan pada artikel ini, kita akan membahas keduanya serta dari setiap hasil pembuatan search engine berikut ini akan memiliki tampilan yang berbeda-berbeda sehingga saat memasangnya di blog kita tinggal memilih kira-kira mana tampilan search engine yang ingin kita pasang di blog kita. Yuk, kita bahas bersama-sama..
Cara Membuat Search Engine di Blog
Untuk membuat search engine di blog, kita harus buat dulu kodenya dan dibawah ini adalah beberapa kode search engine dengan tampilan yang berbeda dan tentu sobat semua sangat suka dengan tampilan dari search engine ini
- Search Engine Tampilan Sederhana
Demo:
Kode:
<form action="http://all-trick-blogs.blogspot.com/search" id="searchform" method="get" name="searchform">
<input id="s" name="q" type="text" value="" /> <input id="searchsubmit" type="submit" value="Search" /> </form>
Keterangan: Ganti link http://all-trick-blogs.blogspot.com dengan link blog sobat - Search Engine Dengan Tombol Didalam Kolom
Demo: Karena demonya berada didalam postingan maka hasilnya tidak maksimal, untuk Demo sebenarnya, silahkan sobat lihat dibagian bawah blog ini (footer)
Kode 1:
#search{border:1px solid #C9D7F1; height:23px; width:350px; padding:0; background:#f6f4f4;}
#search input{border:0; background:none; color:#575757}
#s{font-size:12px; width:130px; padding-left:4px; margin:0; background:none}
#topsearch #search{margin-top:0px;-moz-border-radius-bottomleft:3px;-moz-border-radius-bottomright:3px;-moz-border-radius-topleft:3px;-moz-border-radius-topright:3px;background-color:#FFFFFF;border:1px solid #dedede;}
#topsearch #s{width:400px}
#src-m{border:1px solid #999; height:23px; width:400px; padding-top:2px; background:#f6f4f4; }
#src-m input{border:0; background:none; color:#777}
#s-m{font-size:12px; width:200px; padding-left:4px; margin:0; background:none}
#tsrc-m #src-m{margin-top:0px;background-color:#FFFFFF;border:1px solid #dedede; border-radius:3px 3px; -moz-border-radius:3px 3px 3px 3px; -khtml-border-radius:3px 3px 3px 3px; -webkit-border-radius:3px 3px 3px 3px; border-radius:3px 3px 3px 3px}
#tsrc-m #s-m{width:370px}
Kode 2:
<div id="tsrc-m">
<div id="src-m">
<form action="/search" id="searchform" method="get" name="searchform">
<input class="keyword" id="s-m" name="q" onblur="if (this.value == "") {this.value = "Cari artikel..";}" onfocus="if (this.value == "Cari artikel..") {this.value = ""}" value="Cari artikel.." type="text">
<input src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH304PH85zvfKmUCgJRb8qGrjy5J4e5UOvN-Y_CbE2KI1ETbBmVU3SBq23ChRuesHqLU6QhhvkSvvlqXJ_62Rbntco5wN97aDi-2J4rQCHrjWnTf22BL5AyYCp33HaAEmPjHqY1yd9bMI/s200/search-c.png" style="border: 0pt none; vertical-align: top; padding-top:3px" type="image">
</form>
</div>
</div>
Keterangan:
Kode 1 : Salin dan letakkan sebelum ]]></b:skin>
Kode 2 : Salin dan letakkan didalam kolom widget blog sobat
Klik untuk melihat kode: :) =( :s :D :-D ^:D ^o^ 7:( :Q :p T_T @@, :-a :W *fck* x@