Skip to main content
KOMPI AJAIB

follow us

Berbuat khilaf adalah sifat. Meminta maaf adalah kewajiban. Dan kembalinya Fitrah adalah tujuan. Saya, Adhy Suryadi admin blog Kompi Ajaib MEMOHON MAAF LAHIR DAN BATHIN. Minal Aidin Wal Faidzin Taqabalallahu minnaa wa minkum. Selamat hari raya Idul Fitri, 1 Syawal 1439 H.

×

Show Hide Search Box And Social Profil

Baca juga:

Beberapa hari yang lalu ada yang request untuk membuatkan tutorial cara membuat show hide search box dan social profil yang digunakan di blog Kompi Ajaib. Untuk itu hari ini saya buatkan cara membuatnya dan hasilnya seperti pada gambar animasi gif di atas.

Ini biasanya di simpan di bagian atas blog, namun tentu saja bisa juga di simpan di sidebar tergantung keinginan 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 kode float:right pada css .search-sosprofil sehingga menjadi seperti 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 menggunakan Font Awesome untuk menampilkan ikon-ikonnya. Jadi pastikan Anda sudah menyimpan Font Awesome di blog Anda.

You Might Also Like:


Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar