Cara Membuat Kotak Search Di Header Blogger

Cara Membuat Kotak Search Di Header Blogger | Posisi Search Pada tempat Header di Blog atau Blogspot. 

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/AVvXsEghxtzufPDB-ncAXYLQYy9cdUkXlEVB3NzYLd-Fv3IPx4j3SF9sODocjqYoFxKRG7EwLgK4YirJ8L9TaW4upijUJWV6Kcfv6vkV2j1ce38yJD4wKxNajt5ISywupkQR2HEJOqUwgxEBDfw/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!

Artikel Saya Fafan ini tentang Cara Membuat Kotak Search Di Header Blogger