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 saya dapat dari blognya kang Adhy Suryadi yang sedikit saya modifikasi.

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

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

Langkah pertama penerapan 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;
}

Kalau sobat mau menempatkannya di sebelah kanan silahkan tambahkan kode float:right di CSS .search-sosprofil yang nantinya penampakannya seperti 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 sobat perhatikan adalah penggunaan kode diatas itu menggunakan fontAwesome jadi pastikan sobat sobat memasang kode JS FontAwesome agar icon-icon sosial profil dapat muncul dan terlihat.

Hasil penampakannya di JSfiddle


Baiklah sobat ini saja yang bisa saya bagikan selamat mencobanya.