Sosyal Profil Butonlu Arama Kutusu

Arlina Design: Sosyal Profil Butonlu Arama Kutusu 12.5.16
Sosyal Profil Butonlu Arama Kutusu Eklentisi

Bir kaç WordPress temasında gördüğüm ve Blogger siteleri için de kullanışlı olan sosyal profil butonlu arama kutusunun show özelliği ile de blogger sitelerinin mobil uyumlu olmasında ve belki de mobil uyumlu yapmaya çalıştığınız blogger sitenizin tasarımının en zor olan arama kutusu eklentisini Blogger Eklentileri sitesinde bulabilirsiniz.


Bknz: Blogger Sayaçlı ve Mobil Uyumlu Sosyal Paylaşım Düğmeleri

Bir çok mobil uyumlu blogger eklentisine imza atan Blogger Eklentileri blogger eğiticisi yanı ile de ziyaretçilerine hizmet vermektedir.

Blogger Sosyal Profil Butonlu Arama Kutusu Nasıl Eklenir?

1. Blogger hesabınıza giriş yapın ve blog sitenizin kumanda panelinden Şablon > HTML'i Düzenle CTRL+F yardımıyla </head> kodunu bulun ve aşağıdaki CSS kodunu </head> kodunun bir satır üzerine ekleyin.

<style type='text/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:0;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}
</style>

2. Aşağıdaki sosyal paylaşım profil butonlu arama kutusu Javascript kodunu </body> kodunu bulun ve aşağıdaki Javascript kodunu </body> kodunun bir satır üzerine ekleyin ve şablonu kaydedin.

<script type='text/javascript'>
//<![CDATA[
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";
};
//]]>
</script>

3. Aşağıdaki sosyal paylaşım profil butonlu arama kutusu HTML kodunu blogunuzun kumanda panelinden Yerleşim > Gatget Ekle > HTML/JavaScript Ekle diyoruz ve aşağıdaki HTML kodu HTML/JavaScript içerisine ekleyin ve kaydedin.

<div class='search-sosprofil'>
<div id='search-box'>
<form action='/search' method='get'>
<input id='search-form' itemprop='query-input' name='q' placeholder='Site içi arama yap' 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/sizin-adresiniz' target='_blank' title='Facebook'><i class='fa fa-facebook-square fa-lg'></i></a></li>
<li><a href='//twitter.com/sizin-adresiniz' target='_blank' title='Twitter'><i class='fa fa-twitter-square fa-lg'></i></a></li>
<li><a href='//www.google.com/sizin-adresiniz' target='_blank' title='Google+'><i class='fa fa-google-plus-square fa-lg'></i></a></li>
<li><a href='id.linkedin.com/in/sizin-adresiniz' target='_blank' title='LinkedIn'><i class='fa fa-linkedin-square fa-lg'></i></a></li>
<li><a href='//www.youtube.com/c/sizin-adresiniz' 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>

Eklenti ile ilgili daha fazla bilgi almak için yorum formunu kullanarak görüş ve sorularınızı bize iletebilirsiniz.

Yorum Gönder