Cara Membuat Kolom Pencarian Di Blgspot
Assalamualaikum Wr.Wb
Long time no see, Suwi ora ketemu..
Anjir, penuh rumah laba-laba gini Blog ane sob..
Maklum, setelah ada 8 Bulan atau bahasa kerennya Setengah tahun ane fakum dari dunia maya.(Ngeblog maksud ane) Akhirnya ane nongol lagi di dunia maya (Ngeblog lagi maksud ane) Dengan tampilan wajah yang makin Pas-pasan. (hahahahaha). Mau gimana lagi. Biaya Oplas (Oprasi Plastik) Makin mahal sob. Belom lagi kalo udah operasi tingkat kemiripan wajah 99% dari wajah orang korea kebanyakan. Kan gak enak ntar gw di kira orang korea kalo jadi oplas. Padahal ane cinta Indonesia.
Sory sob. sepertinya ane bicara di luar batas kesadaran, diluar kendali, dan diluar dari judul yang nyata-nyata sudah tertulis dengan besar dan jelas di atas. ha ha ha . . .
Okeh untuk mempersingkat waktu, mempersingkat kata, dan mempersingkat ocehan yang tak bermakna ini, ane akan mempersembahkan sebuah artikel yang paling kurang begitu penting sih untuk di abad ini.
Check This OUT !!!
Kotak pencarian. Merupakan salah satu Widged yang kebanyakan para blogger hood memasang untuk Blogspotnya. Dikarenakan, agar para pemirsa atau pengunjungnya mudah dalam mencari artikel-artikel di dalam Blog itu sendiri. Dan oleh karena itu, AHMD akan memberikan beberapa cara-cara memasang Kolom Pencarian atau bahasa inggrisnya Search Box untuk Blog para sahabat sekalian.
Akan ada beberapa pilihan atau tampilan dan warna untuk Seacrh Box kali ini dari yang biasa-biasa saja, sampai yang saja-saja biasa.
Berikut Penampakan dan cara peng-aplikasiannya.
Kolom Pencarian 1.
Caranya :
- Login ke Akun Blogger.
- Click menu Layout.
- Click tab Page Element.
- Click pada Add a Gadget.
- Lalu pilih "Kotak penelusuran".
- Nah. Disitu ada beberapa pilihan, Silahkan pilih satu (Jangan Semuanya. ingat Blogger hood yang laen sob).
- Simpan. [FINISH] -> Search Box atau kolom pencarian akan segera tampil di blog kalian.
Kolom Pencarian 2.
Caranya :
- Login ke akun Blogger.
- Click menu Layout.
- Click tab Page Element.
- Click pada Add a Gadget.
- Lalu Click HTML/Javascript.
- Dan Pastekan Code ini :
<form action="http://garis-pena.blogspot.com/search"
method="get"> <input class="textinput" name="q" size="40" type="text"/> <input value="search" class="buttonsubmit" name="submit" type="submit"/></form>
method="get"> <input class="textinput" name="q" size="40" type="text"/> <input value="search" class="buttonsubmit" name="submit" type="submit"/></form>
Keterangan :
- Ganti http://garis-pena.blogspot.com dengan nama Blog kalian.
- Angka 40 menunjukkan panjang kolom (Search Box) yang akan tampil di Blog sobat. Semakin banyak angkanya, maka semakin panjang pulan Kolomnya. Maka, silahkan di ukur sendiri panjang ukurannya sesuai dengan selera kalian.
Kolom Pencarian 3.
Caranya :
- Tutorial pemasangannya sama dengan nomer 2. hanya saja, Codenya menggunakan code ini :
<span style='float:right;'>
<style type="text/css"> #a-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuEAxoAby6VyDRH3X8BpPhPgFhRfJhAaW6iZ7LLqS6yP4-8L9SLveuzzUMIZ5iXubIHXeHLGYEMrHh7nGZbxlfItum1PaNmoUW1BO1EFx7FNCB8-u12J3UAmrFK72nyoM41A2OEgbnfBrL/s1600/search.box.png) no-repeat scroll center center transparent;width:300px;height:35px;disaply:block;} form#a-searchform{display: block;padding: 10px 12px;margin:0;} form#a-searchform #a{padding: 0px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#a-searchform #abutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="a-searchbox"><form id="a-searchform" action="/search" method="get"> <input type="text" id="a" 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="abutton" /> </form></div>
</span>
<style type="text/css"> #a-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuEAxoAby6VyDRH3X8BpPhPgFhRfJhAaW6iZ7LLqS6yP4-8L9SLveuzzUMIZ5iXubIHXeHLGYEMrHh7nGZbxlfItum1PaNmoUW1BO1EFx7FNCB8-u12J3UAmrFK72nyoM41A2OEgbnfBrL/s1600/search.box.png) no-repeat scroll center center transparent;width:300px;height:35px;disaply:block;} form#a-searchform{display: block;padding: 10px 12px;margin:0;} form#a-searchform #a{padding: 0px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#a-searchform #abutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="a-searchbox"><form id="a-searchform" action="/search" method="get"> <input type="text" id="a" 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="abutton" /> </form></div>
</span>
- Ganti tulisan yang berwarna Merah (Search) sesuai dengan keinginan kalian. Itu berfungsi untuk menampilkan tulisan di tengah-tengah kotak komentarnya.
Dan hasilnya akan seperti ini :
Kolom Pencarian 4.
- Tutorial pemasangannya sama dengan nomer 2. hanya saja, Codenya menggunakan code ini :
<form action="/search" style="display:inline;" method="get">
<input id="s" name="q" type="search" placeholder="Cari Artikel Disini"/>
</form>
<style>
#s {
margin: 0 auto;
-webkit-appearance: none;
-moz-appearance: none;
padding: 12px 48px 12px 12px;
-webkit-border-radius: 200px;
-moz-border-radius: 200px;
border-radius: 200px;
width: 200px;
height: 16px;
color: #3a4449;
border: none;
outline: none;
-webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
position: relative;
z-index: 2;
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUasE-yledkGWz_zIsaFL-psEj4wA9YRVGVXmedFFcCF-c5MSadpEmbFgw4OF4SkKV3YLw_ZPP92xy3qBys_geeLh9W_Vx07EJrQEFwsCuzSjzwj3Vxnxl3WFMJzWfVaWcU3Q9y80Opak/s1600/Search.png) center right no-repeat;
}
#s::-webkit-input-placeholder, #s:-moz-placeholder {
color: #607078;
}
</style>
<input id="s" name="q" type="search" placeholder="Cari Artikel Disini"/>
</form>
<style>
#s {
margin: 0 auto;
-webkit-appearance: none;
-moz-appearance: none;
padding: 12px 48px 12px 12px;
-webkit-border-radius: 200px;
-moz-border-radius: 200px;
border-radius: 200px;
width: 200px;
height: 16px;
color: #3a4449;
border: none;
outline: none;
-webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
position: relative;
z-index: 2;
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUasE-yledkGWz_zIsaFL-psEj4wA9YRVGVXmedFFcCF-c5MSadpEmbFgw4OF4SkKV3YLw_ZPP92xy3qBys_geeLh9W_Vx07EJrQEFwsCuzSjzwj3Vxnxl3WFMJzWfVaWcU3Q9y80Opak/s1600/Search.png) center right no-repeat;
}
#s::-webkit-input-placeholder, #s:-moz-placeholder {
color: #607078;
}
</style>
Keterangan :
- Ganti tulisan yang berwarna merah sesuai dengan keinginan sobat sekalian. Dan tulisan itu akan muncul di tengah kolom pencarian. Silahkan sobat sekalian rubah sesuai dengan seleranya masing-masing.
Yang hasilnya akan seperti ini :
Kolom Pencarian 5.
- Tutorial pemasangannya sama dengan nomer 2. hanya saja, Codenya menggunakan code ini :
<style type="text/css">#mediablogger-searchbox { border-radius: 5px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1PJprJR8I0Fdxr7RQNn7icfj7aOn2UaZxhuD9w5B5kB_JfuSZfL30-5GW5ms-b9WH_IkEeqkJNyIGaLEo_DOO4nkDDn0jdOIp25UWC8Gp6yKWqoUG5VV4IZ5hj1iLNemKNDzbcftyQiZg/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...";}' /></form></div>
Keterangan :
- Ganti Link yang berwarna Merah dengan berbagai macam pilihan style dibawah ini.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1PJprJR8I0Fdxr7RQNn7icfj7aOn2UaZxhuD9w5B5kB_JfuSZfL30-5GW5ms-b9WH_IkEeqkJNyIGaLEo_DOO4nkDDn0jdOIp25UWC8Gp6yKWqoUG5VV4IZ5hj1iLNemKNDzbcftyQiZg/s1600/impoint.blogspot.com-green.png
Kolom Pencarian warna Merah :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxNdJP_FJnX1rjvh0EQ8Qz_c7OgVhsMeFocd4q-Naemey3J38YiTy2X0jYx4LEvBi_Qkfan-6znK7UFR_2kRUOLUwwr3rmisk1OgHhidHzlOunprC5_GGDBQtha9tgRvGILUcOglvHaW8u/s1600/impoint.blogspot.com-red.png
Kolom Pencarian warna Biru :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6AIPk52QQrXA2V0yjHsPatx5azGAenNU78-YdR6jxWJV9IKrUNpR9z8TXGkXGbDmvu-CbFVDtAWsg7IhhrVjvUSepOIVCGb-BwTYzJMDOCHzBK2vq7MG8hQji6WQ_-G9JQnNcn1M_Ubaw/s1600/impoint.blogspot.com-blue.png
Kolom Pencarian warna Oranye :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1rFkP9cBttClQZO6PrxR3VG3xhEF7i81OD_8wa21rzxio208bPV6di_TAOXE34GWLLVSGjyTzyCVzb4vlGjPaE7auxxLoHtraWF65WxhRYPnUDs-4Ipq4QiqFgJHQY5q7osKOyUItrOfb/s1600/impoint.blogspot.com-orange.png
Yang salah satu hasilnya akan seperti ini :
Kolom Pencari 6.
- Tutorial pemasangannya sama dengan nomer 2. hanya saja, Codenya menggunakan code ini : <style type="text/css">#a-searchbox{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIeRt5v_CAduxviX67KNXyitBDKmTxtFVsEMTFc6lyRHdXiijyLhmEwV0GZ271BctmL6B-DiColf0ErpGOe4lzFXe-6rvzBWym0quuryPa7pI222v0mLMnLDdw4UDLjHGW5P_dZ2-Ucl03/s1600/lostsector-search-box-blue.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#a-searchform{display: block;padding: 10px 12px;margin:0;}
form#a-searchform #a{padding: 6px;margin-left:20px;width: 205px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#a-searchform #abutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<center>
<div id="a-searchbox">
<form id="a-searchform" action="/search" method="get">
<input type="text" id="a" 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="abutton" />
</form>
</div></center>
Keterangan :
- Silahkan sobat sekalian mengganti tulisan yang berwarna Merah diatas dengan Code dibawah ini agar Type dan stylenya berubah.
http://3.bp.blogspot.com/-jukSBGryNx4/UPgqKoLKi2I/AAAAAAAAC38/V7A3wruYzgo/s1600/lostsector-search-box-darkgrey.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5f2ui5MOILVcf4nYsG97zMq0TKZWNTubJTOCW44BnvpRWUmMnygAY1DhJf40e6vc-iOCPGjKnyaiGYvEQL6Oy975SeLmfLSOKNtF20C2oBiEx-0e2uEeOrhiGIdYjWzWETn2q1zfSoOJq/s1600/lostsector-search-box-gray.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSYZoK44TYZ6_Ya0MkkZyuLqBEGPisEFZoHOJvXQ32pwVkTYy-eyp4-WZ5sH6ylCO6sDnPmZApXo1Hot-xr05mRR0AAMfSwgrZge0s8xtfIc5BIaMr3uK_cWz6zxsOUYuX5DNWyRabkJLm/s1600/lostsector-search-box-black.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGV2hVHYf1b4hgYB4ARV9eF6ugsmRzDxs22ju55McT1VbqxUqDO1mLiU5tyOfEEzR8CTCs8_acLqI1nA7DC1RazsLtYyywoTskNKPAsy8UJRxgO09l_iaSy5egkb7bg-zVgUnhpwMuTjQq/s1600/lostsector-search-box-red.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn8RTahoxzWz72qFj5TdWfOV46ZpIAEPqblq-GcJzzXDJdWaoeaKehM0FelxArQmzSn3Qz3Gm-Y1wMFhrl37ZrAXKRnpv7y22aPbaHX_tBE6ggoPydT3LhQ5gMCxJT6lVEUscVLDEaW_TK/s1600/lostsector-search-box-yellow.png
Akhirnya selesai sob. Itulah beberapa contoh kolom pencarian yang AHMD bisa share kepada sahabat sekalian dan semoga bisa bermanfaat.
Akhir kata. Salam Blogger Hood.
Comments
Post a Comment