Kayan Sosyal Paylaşım Butonları Nasıl Eklenir

Sitemizin sosyal medyada populerliliğini artırmak ve görsel açıdan butonları özelleştirerek okuyucularımızın dikkatini çekmek için farklı widgetlara blogumuzda yer veririz.Bunların en başında da fare ile üzerine gelindiğinde kayan bir şekilde sosyal medya araçlarının belirmesidir.Bu widget sidebar da yer işgal etmeyeceğinden blogumuzun en dış sağ alanına yerleşeceğinden güzel bir alternatif olabilir.Blogunuzda bu widget a yer vermeniz şık bir görünüm ortaya çıkaracaktır.
Gelelim bu widget ı blogumuza nasıl ekleriz sorusunun cevabına:
Blogger hesabınıza giriş yaparak Şablon düzenleme kısmına gelin ve aşağıdaki kodu arayın :
 ]]></b:skin> :
Bu kodun hemen üzerine aşağıdaki kodları ekleyin:
.social-buttons { position: fixed; top: 130px; width: 45px; z-index: 9999; } .button-left { left: 0; } .button-right { right: 0; } .social-buttons #twitter-btn .social-icon, .social-buttons #facebook-btn .social-icon, .social-buttons #google-btn .social-icon, .social-buttons #rss-btn .social-icon, .social-buttons #pinterest-btn .social-icon, .social-buttons #youtube-btn .social-icon { background-color: #33353B; background-image: url(http://1.bp.blogspot.com/-KOzIiYFlBAk/UUmLwwZSs-I/AAAAAAAAAnA/h6G772N3cpI/s1600/mas-icons.png); } .button-left #facebook-btn span { background-position: right 10px; } .button-left #twitter-btn span { background-position: right -35px; } .button-left #google-btn span { background-position: right -127px; } .button-left #rss-btn span { background-position: right -80px; } .button-left #pinterest-btn span { background-position: 11px -177px; } .button-left #youtube-btn span { background-position: 11px -223px; } .button-right #facebook-btn span { background-position: 12px 10px; } .button-right #twitter-btn span { background-position: 11px -35px; } .button-right #google-btn span { background-position: 10px -127px; } .button-right #rss-btn span { background-position: 11px -80px; } .button-right #pinterest-btn span { background-position: 11px -177px; } .button-right #youtube-btn span { background-position: 11px -223px; } .social-buttons #facebook-btn:hover .social-icon { background-color: #3B5998; } .social-buttons #twitter-btn:hover .social-icon { background-color: #62BDB2; } .social-buttons #google-btn:hover .social-icon { background-color: #DB4A39; } .social-buttons #rss-btn:hover .social-icon { background-color: #FF8B0F; } .social-buttons #pinterest-btn:hover .social-icon { background-color: #D43638; } .social-buttons #youtube-btn:hover .social-icon { background-color: #C4302B; } .social-buttons a:hover .social-text { display: block; } .button-left .social-icon { -moz-transition: background-color 0.4s ease-in 0s; -webkit-transition: background-color 0.4s ease-in 0s; background-repeat: no-repeat; display: block; float: left; height: 43px; margin-bottom: 2px; width: 43px; } .button-left .social-text { display: none; float: right; font-size: 1em; font-weight: bold; margin: 11px 40px 11px 0px; white-space: nowrap; } .button-right .social-icon { -moz-transition: background-color 0.4s ease-in 0s; -webkit-transition: background-color 0.4s ease-in 0s; background-repeat: no-repeat; display: block; float: right; height: 43px; margin-bottom: 2px; width: 43px; } .button-right .social-text { display: none; float: left; font-size: 80%; font-weight: bold; margin: 11px 0 11px 40px; white-space: nowrap; } .social-buttons .social-text { color: #FFFFFF; }
Yukarıdaki kodu ekledikten sonra şimdi aşağıdaki kodu bulun :
</head>
Hemen üzerine aşağıdaki kodları ekleyin :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js' type='text/javascript'/>
<script>
    $(window).load(function(){
        $(&#39;.social-buttons .social-icon&#39;).mouseenter(function(){
            $(this).stop();
            $(this).animate({width:&#39;160&#39;}, 500, &#39;easeOutBounce&#39;,function(){});
        });
        $(&#39;.social-buttons .social-icon&#39;).mouseleave(function(){
            $(this).stop();
            $(this).animate({width:&#39;43&#39;}, 500, &#39;easeOutBounce&#39;,function(){});
        });
    });
</script>
Ve en son adım olarak aşağıdaki kodu bulun :
</body>
Hemen üzerine aşağıdaki kodları ekleyin.Burada renkli kısımları kendi hesabınıza göre düzenlemeyi unutmayın :
<div class='social-buttons button-right hidden-phone hidden-tablet'> <a class='itemsocial' href='https://www.facebook.com/FBadınız' id='facebook-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Facebook</span></span></a> <a class='itemsocial' href='https://twitter.com/twitter adınız' id='twitter-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Twitter</span></span></a> <a class='itemsocial' href='https://plus.google.com/G+ adınız' id='google-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Google</span></span></a> <a class='itemsocial' href='http://pinterest.com/pinterest adınız' id='pinterest-btn' target='_blank'><span class='social-icon'> <span class='social-text'>Follow via Pinterest</span></span></a> <a class='itemsocial' href='https://www.youtube.com/user/youtube adınız' id='youtube-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Youtube</span></span></a> <a class='itemsocial' href='http://feeds.feedburner.com/feedburneradınız' id='rss-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via RSS</span></span></a> </div>
Evet tüm adımları doğru bir şekilde tamamladıysanız şablonunuzu kaydedip blogunuzu görüntüleyebilirsiniz.

Ozan Başer

Merhaba ben Ozan Başer. EhliBlog'da ve elbette Ehliforum (Blogculara Özel Forum)'da yazıyorum. Blogger, seo, adsense, sosyal medya ve google ürünleri hakkında faydalı ve kaliteli içeriği okuyucularıma sunmaya çalışıyorum. C#, PHP, Javascript gibi uğraşılarım var. Web ve online teknolojiler ile ilgili birçok konuda fikirlerimi sizlerle paylaşıyorum.

6 yorum:

  1. Youtube'u çıkartıp Bloglovin' ekleyemez miyiz?

    YanıtlaSil
    Yanıtlar
    1. olabilir ama arkaplan kodunu ve CSS kodlarını değiştirmeniz gerekmekte.Biraz uğraştırıcı diyebilirim

      Sil
    2. evet o beni aşar :) peki su yazıların altındaki etiketleri nasıl görünmez yapabilirim acaba? yerlerşim>>blog kayıtları kısmından etiketler in işaretini kaldırdığım halde gözüküyor onlar hatta oradan yaptığım hiç bir değişiklik olmuyor diyebilirim. Nasıl yapabilirim?

      Sil
    3. Şablonunuzu bilmiyorum ama post-footer alanında bir div etiketi ile başlayan label kodunun olması lazım.Kod bloğunu tamamen kaldırın.

      Sil
    4. teşekkür ederim çok güzel oldu ^^

      Sil
  2. üsadım yazılarınıza demo atabilirseniz çok makbule geçer.. teşekkürler

    YanıtlaSil

Yorumunuza gelecek cevabı takip etmek "beni bilgilendir" kutucuğuna işaretleyebilirsiniz.