Sosyal Profil Butonlu Arama Kutusu

5/12/2016
Bir kaç WordPress 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.
Sosyal Profil Butonlu Arama Kutusu
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.
<link rel="stylesheet" type ="text/css" href="https://googledrive.com/host/0BwDz8flINeefU0dFYWlReHNpWTg"/>
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 src='https://googledrive.com/host/0BwDz8flINeefQkMxbHZOU3JVdms' tipi='text/javascript'></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='https://twitter.com/sizin-adresiniz' target='_blank' title='Twitter'><i class='fa fa-twitter-square fa-lg'></i></a></li>
<li><a href='https://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>
Blogger Sayaçlı ve Mobil Uyumlu Sosyal Paylaşım Düğmeleri

Kategori İçerikleri



Blogger
Disqus
Yorum Ekle

Hiç yorum yok