Thursday, December 5, 2019

Cara Membuat Search Box Keren Pure CSS

Cara Membuat Search Box Keren Pure CSS

HobbyTekno - Pada postingan kali ini Admin akan membahas cara membuat Search Box Keren Murni CSS, Nah, Search box ini sangat cocok untuk dipasangkan pada Website anda, jika warna nya tidak cocok, anda dapat menggantinya pada Style CSS nya. Berikut cara membuatnya :

Langkah-Langkah Membuat Search Box Keren Pure CSS


1. Copy kode berikut ke Code Editor anda, simpan sebagai .html
<!DOCTYPE html>
<html>
<head>
<title>Search Box</title>
</head>
<body>
<style>
#namanyay-search-btn {
background:#0099ff;
color:white;
font: 'trebuchet ms', trebuchet;
padding:10px 20px;
border-radius:0 10px 10px 0;
-moz-border-radius:0 10px 10px 0;
-webkit-border-radius:0 10px 10px 0;
-o-border-radius:0 10px 10px 0;
border:0 none;
font-weight:bold;
}

#namanyay-search-box {
background: #eee;
padding:10px;
 border-radius:10px 0 0 10px;
-moz-border-radius:10px 0 0 10px;
-webkit-border-radius:10px 0 0 10px;
-o-border-radius:10px 0 0 10px;
border:0 none;
width:160px;
 }
</style>
<form id="searchthis" action="/search" style="display:inline;" method="get">
<!-- Search box for blogger by Namanyay Goel //-->
<input id="namanyay-search-box" name="q" size="40" type="text" placeholder="  Type! :D "/>
<input id="namanyay-search-btn" value="Search" type="submit"/>
</form>
</body>
</html>
2. Untuk melihat hasilnya anda bisa membuka file .html yang sudah disimpan tadi.

Sekian Cara Membuat Search Box Keren Pure CSS, semoga postingan Admin kali ini bermanfaat untuk anda. Jika ada kendala tanyakan saja pada komentar

Komentar


EmoticonEmoticon