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.

 

Sabit Soldan Açılan Sosyal Menü 
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ş
,

Melisa

    Google ile yorum yap!
    Facebook ile yorum yap!

0 yorum:

Yorum Gönder

Bir düşüncen varsa eğer söyle bana ?

Blogger tarafından desteklenmektedir.