Show Hide Search Box And Social Profil

Beberapa hari yang kemudian ada yang request untuk menyebarkan tutorial cara membuat show hide search box dan social profil yang dipakai di blog Kompi Ajaib. Untuk itu hari ini aku buatkan cara membuatnya dan risikonya menyerupai pada gambar animasi gif di atas.

Ini biasanya di simpan di bab atas blog, namun tentu saja dapat juga di simpan di sidebar tergantung harapan masing-masing untuk meletakannya.

Untk membuat show hide search box dan social profil ini silahkan copy kode-kode di bawah ini.

1. Kode 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;
 }

Jika ingin mletakannya di sisi kanan, tambahkan isyarat float:right pada css .search-sosprofil sehingga menjadi menyerupai berikut:

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

2. 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>

3. 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";
   };

Perhatian! Ini memakai Font Awesome untuk menampilkan ikon-ikonnya. Makara pastikan Anda sudah menyimpan Font Awesome di blog Anda.


Sumber https://www.kompiajaib.com/

Share this post