Dari pada mubazir dan tidak terpakai mending mamang simpan saja di artikel dan mamang bagikan, siapa tahu ada yang sedang membutuhkan tutorial menciptakan kotak pencarian dengan efek POP UP fullscreen ini. Kegunaan dari tutorial ini pun tidak ada, hanya semata - mata mempercantik tampilan blog anda.
Bagi anda yang sering bosan dengan tampilan blog anda sanggup gunakan alternatif ini untuk menghilangkan rasa bosa tersebut. Selain mempercantik kalian juga sanggup menargetkan visitor supaya tertarik kepada blog anda dan mungkin saja ada visitor yang bilang "Wah Keren ih pengen coba". Sudah tidak usah panjang lebar lagi, kini simak baik - baik ya tutorialnya di bawah ini :
Cara Membuat Search Box POP UP Full Screen :
- Masuk ke Dasbroad blog anda
- Masuk ke sajian Template >> Edit HTML kemudian cari arahan </head>
- Pastekan CSS di bawah ini sempurna di atas nya.
<style type='text/css'> #search-box{position:relative;width:100%;margin:0} #search-form{height:40px;border:1px solid #999;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;background-color:#fff;overflow:hidden} .search-form{margin:0;padding:0} #search-text{font-size:14px;color:#ddd;border-width:0;background:transparent} #search-box input[type="text"]{width:96%;padding:11px 0 12px 1em;color:#333;outline:none} #search-button{position:absolute;top:0;right:0;height:42px;width:80px;font-size:14px;color:#fff;text-align:center;line-height:42px;border-width:0;background-color:#2EB0EC;-webkit-border-radius:0 5px 5px 0;-moz-border-radius:0 5px 5px 0;border-radius:0 5px 5px 0;cursor:pointer} #popup_searchBox{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000;opacity:0.8;z-index:9999999} #popup_searchBox{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000;opacity:0.8} .search-form-label,.search-text{position:absolute;left:0} .search-form-label{bottom:100%;width:100%;display:block;color:#fff;font-size:40px;font-weight:100} .search-text{top:46%;width:50%;right:0;margin:20px auto 0;background:0 0;border:none;border-bottom:1px dashed #ddd;font-size:60px;font-size:8vw;color:#fff;text-align:center;outline:0;position:fixed} #search-form:after{content:"\f002";font-family:FontAwesome} .keluar{height:100vh;width:100%;position:absolute;top:0;left:0;bottom:0;right:0;background:transparent;border:0} </style> - Save Template dan masuk ke tahap pemasangan search Box nya. Masuk ke Menu Tata Letak
- Kemudian buatlah Gadget (widget baru)
- Pilih HTML/JavaScript , dan masukan arahan di bawah ini :
<div id="search-box"> <form action="/search" id="search-form" method="get" target="_top"> <input placeholder="Search Here" onclick="document.getElementById('popup_searchBox').style.display = 'block';" id="search-text" name="q" placeholder="" type="text" /> </form> </div> <div id="popup_searchBox" style="display:none;"> <button class='keluar' onclick="document.getElementById('popup_searchBox').style.display = 'none';">Close</button> <div id="popup_searchBox_Data"> <!-- Search Box --> <div class="search-form-wrapper" style="display: block;"> <form action="/search" class="search-form" method="get"> <input class="search-text" placeholder="Search Here" name="q" type="text" value=""> </form> </div> <!-- Search Box --> </div> </div> - Selesai dan Simpan gadget gres kemudian lihat hasilnya.
Demikianlah info mengenai Cara Membuat Search Box POP UP Full Screen dari , semoga bermanfaat untuk anda. Jika menyukai artikel ini anda sanggup like, share, and subscribe untuk berlangganan artikel terbaru pribadi dari email anda.
Sumber https://www.mangotep.com/
Click to see the code!