Sabit Soldan Açılan Sosyal Menü

Blogunuzun veya şahsınızın  Facebook, Twitter, Google+ ve Pinterest hesapları ile blog yazılarınızın beslemelerinin yer aldığı RSS adresinize ait sosyal medya butonlarının yer aldığı başka bir eklenti daha paylaşmak istiyorum.

 

 
Bu eklentide pek çok özellik bir arada. Bu eklenti sadece takipçi sayıınzı arttırmakla kalmayacak, aynı vakitda blogunuzu görsel açıdan da zenginleştirecek. Bu sosyal menü eklentisi floating yani yüzen olduğu için sayfa aşağı ya da yukarı kaydırılsa bile menünün pozisyonu sabit kalacaktır. Sayfada sadece sosyal kanalların isimleri gözükürken, menünün üzerine gelindiğinde animasyon efektiyle birlikte açılacak ve tıklayan kişiyi ilgili sosyal kanala yönlendirecektir.

 

Eklentinin nasıl çalıştığını görmek için aşağıdaki demo videoyu izleyebilirsiniz.

 

 

Sosyal menü eklentisini blogunzda kullanmak isterseniz aşağıdaki kodları kendinize göre düzenledikten sonra Blogger kumanda panelinden Yerleşim > Gadget Ekle > HTML/JavaScript Gadget yolunu takip ederek eklemeniz yeterli.

 

<!--Portakal Kabuğu Sosyal Menü-->
<style type="text/css">
ul#sosyal {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 20%;
    left: 0px;
    list-style: none;
    z-index:9999;
}
ul#sosyal li {
    width: 100px;
}
ul#sosyal li a {
    display: block;
    margin-left: -2px;
    width: 100px;
    height: 70px;   
    background-color:#fff;
    background-repeat:no-repeat;
    background-position:center center;
    border:1px solid #AFAFAF;
    -moz-border-radius:0px 10px 10px 0px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-top-right-radius: 10px;
    -moz-box-shadow: 0px 4px 3px #000;
    -webkit-box-shadow: 0px 4px 3px #000;
}
ul#sosyal .twitter a{
     background:#0F96C6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1iRkenIVhuZAhrgExAbDvaVBOUZy9ZaUf71pIWjIiVSqnaYyjKdglFg6i8dQMeRWO_hixdkGiVY9oaYFtPpn1t5QbysQRUD_J9PBVWygS54bUZL0T4idtzKHWGtCG4WkoO7FfgLEj0Cw/s1600/Twitter.png)no-repeat;
background-position:center center;
}
ul#sosyal .googleplus a      {
    background:#D73D27 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU9twRpvXcPGgZBGQ3SfzRA9zqBG2bxLDS65kRXXtJUGpWcIriIwaogGcIUFFIMAtbAjB6_-W1LqHmfkcKSdLGNDayqRkFf7JdkgwCnMNthuCQzdGWfUaIDVYETPpHNhMUzRchhLd6Za8/s1600/GOOGLE+PLus.png)no-repeat;
background-position:center center;
}
ul#sosyal .facebook a      {
    background:#1A4B97 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1xEfZII6SxTdfOvaKRlG-5kMzDOySG2bQTDhdoFbZZkC4f5W2yBUgYVqwH7KG_Bxgp9Oemu2NZ2Qm0StzUIfbL0qlRMLW6oBKkINTl4hukldndC2BDTkMt4X7MrzY-Yct3JZwRj1LWGg/s1600/Facebook.png)no-repeat;
background-position:center center;
}
ul#sosyal .rss a      {
    background:#FAAE17 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijgQosmkSHP9A8Goo8KVgqK-_9zLcjlLPHWyVNS4o4XnctrtO7IB5vO009Feoxp3hYrotNk2uhKqCT1mEF_Vw1Zfu52t2IyGzBXFk01BsPZ30H-9jLhysuqwEUnYW_R20bKiGXlG49aPM/s1600/rss.png)no-repeat;
background-position:center center;
}
 
ul#sosyal .pinterest a   {
    background:#963336 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeMDl7v13u9oOJEBYMJ1BOA4QwKHU7cDHAE4GVsEaiCL3L_xMboN6EwvxfEIP1Ul09Lc7LLL4L40W1zq60nwLnWhYaJqkhfRx5mIksnkZFlgXYPp-96fMPtZfg0ojWCActNw9hHNGzPUM/s1600/Pinterest.png)no-repeat;
background-position:center center;
}
</style>
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 
<script type="text/javascript">
$(function () {
    $('#sosyal a').stop().animate({
        'marginLeft': '-85px'
    }, 1000);
 
    $('#sosyal > li').hover(
        function () {
            $('a', $(this)).stop().animate({
                'marginLeft': '-2px'
            }, 200);
        },
        function () {
            $('a', $(this)).stop().animate({
                'marginLeft': '-85px'
            }, 200);
        }
    );
});
</script>
<br />
<ul id="sosyal">
<li class="twitter"><a href="http://twitter.com/bloghocam" title="Twitter"></a></li>
<li class="googleplus"><a href="http://gplus.to/bloghocam" title="Google Plus"></a></li>
<li class="facebook"><a href="http://facebook.com/bloghocam" title="Facebook"></a></li>
<li class="rss"><a href="http://feeds.feedburner.com/bloghocam" title="Rss"></a></li>
<li class="pinterest"><a href="http://pinterest.com/bloghocam" title="Pinterest"></a></li>
</ul>

 

Kırmızı renkle gösterdiğim yerlerde ilgili sosyal kanallara ait Portakal Kabuğu’ın adresleri yazıyor. Oralara endi hesap adreslerinizi yazmayın unutmayın. Onların dışında değiştirmeniz gereken başka bir yer yok.

Paylaş

BLOG SEO , teknoloji

Melisa