Cara Membuat Show Hide Search Box dan Social Profil

Ada banyak cara ternyata untuk memodifikasi template blog untuk membuat tampilan blog menjadi lebih terlihat animatif dan profesional. Untuk postingan kali ini akan membahas mengenai Cara Membuat Show Hide Search Box dan Social Profil di blog. Cara ini aku dapat dari blognya kang Adhy Suryadi yang sedikit aku modifikasi.

Untuk navigasi search dan sosial profil biasanya dan lebih seringnya ditempatkan diatas sebagai navigasi halaman perhiasan dan ada juga di sidebar tergantung selera sahabat mau diletakkan dimana, yang menurut aku sih wajib juga ada di blog alasannya yaitu nanti navigasi search ini pun mampu di modifikasi dan berkaitan dengan penautan account adsense menyerupai yang pernah aku posting sebelumnya Cara Buat Google Search Custome di Blog. Bagi sahabat yang ingin mencobanya silahkan simak cara penerapannya di blog.

Untuk membuat Show Hide Search Box dan Social Profil di blog silahkan sahabat salin kode-kode yang diberikan dibawah ini, ikutin petunjuknya.

Langkah pertama penerapan instruksi CSS

.search-sosprofil {   position: relative;   width: 250px; }  #search-box {   width: 100%;   padding-right: 38px;   -moz-box-sizing: border-box;   -webkit-box-sizing: border-box;   box-sizing: border-box; }  #search-box form {   position: absolute;   top: 0;   right: 38px;   display: block;   height: 30px;   padding: 0;   margin: 0px;   border: 1px solid #dedede;   border-radius: 3px;   line-height: 30px;   background: #fff; }  #search-form, .search-button {   border: none!important;   line-height: 28px }  #search-form {   color: gray;   width: 100%;   padding: 0 30px 0 10px;   height: 28px;   font-size: 14px;   margin: 0;   -moz-box-sizing: border-box;   -webkit-box-sizing: border-box;   box-sizing: border-box; }  .search-button {   padding: 0 10px;   text-align: center;   margin: 0;   top: 1px;   right: 1px;   font-size: 16px;   color: #888;   position: absolute;   background: none;   cursor: pointer; }  #search-form:focus, #search-form:hover, .search-button:focus, .search-button:hover {   border: none;   outline: 0;   color: #000 }  .sos-profil {   position: absolute;   top: 2px;   right: 38px; }  .sos-profil ul {   padding: 0!important;   margin: 0!important; }  .sos-profil li {   display: inline-block;   margin-left: 5px }  .sos-profil a {   color: #555;   font-weight: 500;   font-size: 24px }  .sos-profil a:hover {   color: #000!important }  #search-box, #close-icon {   display: none; }  .search-icon {   color: #555;   float: right;   cursor: pointer; }  .search-icon .fa-search, .search-icon .fa-times {   color: #fff; }

Kalau sahabat mau menempatkannya di sebelah kanan silahkan tambahkan instruksi float:right di CSS .search-sosprofil yang nantinya penampakannya menyerupai ini

.search-sosprofil {   position: relative;   width: 250px;   float:right }

Langkah Ke dua Penerapan Kode HTML

<div class='search-sosprofil'>   <div id='search-box'>     <form action='/search' method='get'>       <input id='search-form' itemprop='query-input' name='q' placeholder='Search here and hit enter' required='required' type='text' />       <button class='search-button' title='Search' type='submit'><i class='fa fa-search'></i></button>     </form>   </div>   <div class='sos-profil' id='sos-profil'>     <ul>       <li><a href='https://www.facebook.com/your-username' target='_blank' title='Facebook'><i class='fa fa-facebook-square fa-lg'></i></a></li>       <li><a href='https://twitter.com/your-username' target='_blank' title='Twitter'><i class='fa fa-twitter-square fa-lg'></i></a></li>       <li><a href='https://www.google.com/your-username' target='_blank' title='Google+'><i class='fa fa-google-plus-square fa-lg'></i></a></li>       <li><a href='id.linkedin.com/in/your-username' target='_blank' title='LinkedIn'><i class='fa fa-linkedin-square fa-lg'></i></a></li>       <li><a href='//www.youtube.com/c/your-username' target='_blank' title='Youtube'><i class='fa fa-youtube-square fa-lg'></i></a></li>     </ul>   </div>   <div class='search-icon' onclick='openSosprofil()'>     <div class="fa-stack" id="search-icon">       <i class="fa fa-square fa-stack-2x"></i>       <i class="fa fa-search fa-stack-1x"></i>     </div>     <div class="fa-stack" id="close-icon">       <i class="fa fa-square fa-stack-2x"></i>       <i class="fa fa-times fa-stack-1x"></i>     </div>   </div> </div>

Langkah Ke Tiga Penerapan Kode Javascript

   function openSosprofil() {     var e = document.getElementById("sos-profil");     "none" !== e.style.display ? e.style.display = "none" : e.style.display = "block";     var e = document.getElementById("search-box");     "block" !== e.style.display ? e.style.display = "block" : e.style.display = "none";     var e = document.getElementById("search-icon");     "none" !== e.style.display ? e.style.display = "none" : e.style.display = "block";     var e = document.getElementById("close-icon");     "block" !== e.style.display ? e.style.display = "block" : e.style.display = "none";   };

Yang harus sahabat perhatikan yaitu penggunaan instruksi diatas itu menggunakan fontAwesome jadi pastikan sahabat sobat memasang instruksi JS FontAwesome semoga icon-icon sosial profil dapat muncul dan terlihat.

Hasil penampakannya di JSfiddle


Baiklah sahabat ini saja yang mampu aku bagikan selamat mencobanya.