Show Hide Search Box And Social Profil

Show Hide Search Box And Social Profil

Bola Hero Gawai

Show Hide Search Box And Social Profil

Show Hide Search Box And Social Profil
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.


Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×