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