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.