21 Ekim 2013 Pazartesi

Sabit Soldan Açılan Sosyal Menü

13 yorum

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ı zamanda 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.

 

<!--Blog Hocam 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(http://3.bp.blogspot.com/-1wb-O4GG6DQ/UPFOe03M-lI/AAAAAAAAA4g/1015-y7FaYU/s1600/Twitter.png)no-repeat;
background-position:center center;
}
ul#sosyal .googleplus a      {
    background:#D73D27 url(http://3.bp.blogspot.com/-1mYMKQENXdI/UPFOeK31VzI/AAAAAAAAA4k/w2Qk48tpleQ/s1600/GOOGLE+PLus.png)no-repeat;
background-position:center center;
}
ul#sosyal .facebook a      {
    background:#1A4B97 url(http://1.bp.blogspot.com/-3M1F3Y29Yoc/UPFOeAAUFvI/AAAAAAAAA4c/ALvfOPDwJ-g/s1600/Facebook.png)no-repeat;
background-position:center center;
}
ul#sosyal .rss a      {
    background:#FAAE17 url(http://4.bp.blogspot.com/-twR0g7wotpE/UPFOfFtFOuI/AAAAAAAAA4o/uJMUf9hjRco/s1600/rss.png)no-repeat;
background-position:center center;
}
 
ul#sosyal .pinterest a   {
    background:#963336 url(http://2.bp.blogspot.com/-xgOrG4ysqyM/UPFOeKFKMtI/AAAAAAAAA4Y/i_jnKpHsK24/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 Blog Hocam’ı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.

13 yorum:

  1. Merhabalar,
    Bloğunuzu çok beğendim ve izlemeye aldım. Bana da bekliyorum. Güzel paylaşımlarda buluşmak dileğiyle. Sevgilerimi bıraktımmmm…..:))

    YanıtlaSil
  2. Bu çok beğendiğim bir uygulama idi ,çok teşekkürler.

    YanıtlaSil
  3. selam blogunuzu cok begendim bende yeni blog yaziyorum ogrenecegim cok sey var
    basarilar dilerim

    YanıtlaSil
  4. twitter dışında diğer sosyal medya butonları var ama logolar görünmüyor. ama ilgili sayfaya gidiyor. sorun ne olabilir acaba??
    bu sorun dışında güzel bir paylaşımdı. teşekkürler serdar

    YanıtlaSil
  5. @AsOrTiK
    Acaba kendi adreslerinizle değiştirirken fazladan kod mu sildiniz? Tekrar kontrol ettim eklentiyi, sorun yok.

    YanıtlaSil
  6. Gzl paylasm bendede aynsı var...

    YanıtlaSil
  7. Çok güzel bende boğuma ekledim birde instagram olsaymış :/

    YanıtlaSil
  8. AsOrTiK
    Dosyaların imajının çekilmesi gerekiyor link veremiyorum nedense

    KıvırcıHayat
    Kodları değiştirerek çok rahat bir şekilde işlem yapabilirsiniz.
    Yapabilirim isterseniz mail üzerinden kodları gönderebilirim..

    interbilgi.com

    YanıtlaSil
  9. Bu yorum yazar tarafından silindi.

    YanıtlaSil
  10. Paylaşımınız için Teşekkür Ederim Bloguma uyguladım.

    YanıtlaSil
  11. Merhaba paylaşımlarınızı severek takip ediyorum sayenizde bloğum baya düzene girdi :) bunun sağdan açılan ve instagram da ekli olanını yaparsanız çok memnun olurum saatlerdir arıyorum bulamadım :(

    YanıtlaSil
  12. İyi günler
    Benim sorunum, kodları ekleyecek yerleri bulamamış olmam.
    Yardımcı olabilir misiniz ?

    YanıtlaSil

Picardes

LİNKLER