Hey yozers...
Apakah kalian tahu"Kotak Search"?
Ya tentu saja tahu ya,...
Karena sebenarnya sebuah blog harus memiliki kotak search di blognya,agar pengunjung tidak kesulitan untuk mencari artikel yang di carinya!
Tentu kotak search ini sangat berguna untuk para pengunjung,yah..
Walaupun pihak blog telah menyediakan widget "Kotak Search",tapi saya akan share "cara Membuat Kotak Search Di Header Blog"
Berikut contohnya!
Dan bagi yang ingin membuatnya,mari kita simak langkah-langkah berikut!
1. Buka Dasbor Blog -> Template -> Edit Template
2. Centang "Expand Template Widget"
3. Cari kode "]]></b:skin>" ( Ctrl+F atau F3 untuk mempermudah pencarian )
4. Letakkan kode CSS berikut tepat di atas kode ]]></b:skin
CSS :
#search{float: right;
margin-right:300px;
margin-top: 215px;}#search input[type="text"]{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCNQbD5b8Jzejk8punP06i_cWXUs_q76VPTMXQQ0VFTrA3zBpQIW9sViZRIIZNl_76914O8pSSyTrCoUpNs14GuGf3VBXXFwMZQ9P4PTAPuL_vor3mM5cAHiVmp7CxF-3rr2mXVliqI-Y/s1600/cari.png) no-repeat 10px 6px darkred;
border-top: 3px solid #000;
border-left: 3px solid #000;
border-right: 3px solid #000;
border-bottom: 3px solid #000;
font: bold 16px 'Advent Pro',cursive;
color: #BBB;
text-shadow: 1px 1px 1px black,-1px 1px 1px black,-1px -1px 1px black,1px -1px 1px black;
width: 325px;
padding: 6px 15px 6px 35px;
border-radius: 25px 25px 25px 25px;
-moz-transition: all 0.1s ease 0s;
-webkit-transition: all 900ms ease-out;
-moz-transition: all 900ms ease-out;
-ms-transition: all 900ms ease-out;
-o-transition: all 900ms ease-out;
transition: all 900ms ease-out;
margin-top: -300px;
margin-right: -200px;
float: right;
}
NB:
- Tulisan berwarna orange : Arah ,Jika "right" yaitu dari kanan dan "left dari kiri!
- Tulisan berwarna kuning : Margin dari kanan ( Sesuaikan degan blog sobat )
- Tulisan berwarna merah : Panjang search
- Tulisan berwarna biru muda : Warna font search
- Tulisan berwarna abu-abu : Tebal border ( garis tepi ) search
- Tulisan berwarna biru tua : Jenis border ( garis tepi ) search
- Tulisan berwarna hijau : Warna border ( garis tepi ) search
- Tulisan berwarna biru : Warna background search
- Tulisan berwarna pink : Margin dari atas ( Sesuaikan degan blog sobat )
- Tulisan berwarna hijau tua : Border radius ( lengkungan pada garis tepi ) search
5. Cari kode "</header>" ( Ctrl+F atau F3 untuk mempermudah pencarian )
6. Letakkan HTML berikut tepat di atas kode "</header>"
HTML :
<form action='/search' id='search' method='get'><input name='q' placeholder='Search...' size='30' type='text'/></form>
NB :
- Sebenarnya kode HTML di atas bisa di letakan di antara tag "<header>" dan "</header>"
7. Klik pratinjau dulu,jika tidak error,Klik Simpan
8. Selesai!
Hihihi.
ok yozers..
samapi di sini dulu ya kawan...
Semoga bermanfaat!
Terimakasih!
Postingan
