Membuat Form Pencarian Bergerak

Membuat form pencarian bergerak ke kiri dan tidak bergerak di blogger sangatlah mudah.
Salah satu cara untuk mempercantik tampilan dan memudahkan pengunjung menjelajahi blogger kita, Mari kita mulai.

1. Buka dasboard blogger.
2. Pilih Tema.
3. Klik titik tiga pojok kanan.
4. Pilih edit html.
5. Klik sembarang tempat pencet ctrl + A. untuk mempercepat pencarian
6. Copy dan paste ]]></b:skin> atau </style> di form search code.
7. Paste kode di bawah ini di atas ]]></b:skin> atau </style>

.sastracodesearch form{
position:absolute;
right:30px;
z-index:1;
bottom: 4px;
display: flex;
}
.sastracodesearch svg{
width:25px;
height:25px;
margin: 0px;
padding: 15px;
}
.sastracodesearch svg path{
fill:#175d2f;
transition: all .3s ease;
}
.sastracodesearch .check{
position:absolute;
right:0px;
opacity:0;
visibility: hidden;
}
.sastracodesearch .input {
background-color:#f9f9f9;
border:0px;
outline:0px;
padding:0px;
margin-right:-1px;
width:0px;
height:47px;
border-radius:15px 0px 0px 15px;
-moz-border-radius:15px 0px 0px 15px;
vertical-align:bottom;
transition: all .3s ease;
}
.sastracodesearch .check:checked ~ .input, .sastracodesearch .input:focus{
color:$(body.text.color);
font-weight:400;
padding:0px 10px 0px 15px;
width:calc(96vw - 90px);
}
.sastracodesearch .check:checked ~ .icon{
background-color:#f9f9f9;
padding-right:7px;
}
.sastracodesearch .check:checked ~ .icon > svg path{
fill:$(jeruksiem.main.color);
}
.sastracodesearch .icon{
float:right;
height:47px;
border-radius:0px 15px 15px 0px;
-moz-border-radius:0px 15px 15px 0px;
cursor:pointer;
transition: all .5s ease;
}

Selanjutnya anda copy dan paste di navigasi menu karena untuk form pencarian yang kita bahas ini khusus untuk menu navigasi atas atau menu fixed misal

<nav1>
<a class='sastracodesearch'>
<form action='/search' method='get'>
<input class='check' id='sastracodesearch' type='checkbox'/>
<input class='input' name='q' placeholder='Type and enter' required='required' type='text'/>
<label class='icon' for='sastracodesearch'>
<svg viewBox='0 0 24 24'><path d='M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z'/></svg>
</label>
</form>          
</a>
</nav1>

Untuk merubah panjangnya ketika di klik anda otak atik sendiri di width:calc(96vw - 90px) Save template blogger dan lihat perubahan, untuk menyesuaikan tinggi, panjangnya anda otak atik sendiri dengan cara INSPEKSI browser.

DEMO

Semoga bermanfaat

Baca Juga

Related Posts