• Posted by : Unknown 11 Haziran 2012 Pazartesi

    Bu yazıda sizlere blogunuzun kenar çubuğuna ekleyebileceğiniz ve ziyartçileri sosyal profillerinize yönlendirebileceğiniz sosyal butonlar paylaşacağım.

     

    Sosyal Takip Butonları

     

    Bu sosyal butonlar CSS sprite özelliği kullanılarak oluşturulmuş.Bu ne anlama geliyor? Sosyal ağlara ait ayrı ayrı butonlar kullamnak yerinr hepsi tek bir görselde toplanmış bu sayede sayfa boyutunda düşüş yani açılış hızında artış sağlanmış.

     

    Ayrıca yine CSS sprite ile hover özellği verilmiş.Yani hepsi tek renk olan sosyal ikonların üzerine gelindiğinde renkli hale dönüşüyor ve o sosyal ağa ait tooltip dediğimiz bir açıklama metni çıkıyor.

     

    Sosyal takip butonlarını blogunuza eklemek için öncelikle şablonunuzdan ]]></b:skin> kodunu buşun ve hemen üstüne aşağıdaki kodları ekleyin.

     

    ul#m-soc2{  
    margin: 18px 0 0 10px;padding: 0;width: 220px;height:50px;}
    ul#m-soc2 li{
    list-style: none;margin: 7px;padding: 0;float:left;border: none;}
    ul#m-soc2 li a{
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidv86S_8bqb84vE5lewMyqDFXVS8WqwDPgoOmbIZG6TtaJlvLetwKdYl_NSLhoYwuQXYNAK3Np74VYtpIvhXy9OcC_pyC9FT6-2B-K8bNZjCzs-72B0UvgFHIH6L63huc5EZsvpoTX1xKP/s132/sosyal-butonlar.png) no-repeat 0 0;
    margin:0;padding:0;display: block;position:relative;
    width: 33px;
    height: 33px;
    overflow: visible;
    }
    ul#m-soc2 li a.twitter{
    background-position: 0 0;
    }
    ul#m-soc2 li a.facebook{
    background-position: -33px 0;
    }
    ul#m-soc2 li a.google{
    background-position: -66px 0;
    }
    ul#m-soc2 li a.rss{
    background-position: -99px 0;
    }
    ul#m-soc2 li a.twitter:hover{
    background-position: 0 -33px;
    }
    ul#m-soc2 li a.facebook:hover{
    background-position: -33px -33px;
    }
    ul#m-soc2 li a.google:hover {
    background-position:-66px -33px;
    }
    ul#m-soc2 li a.rss:hover{
    background-position:-99px -33px;
    }
    ul#m-soc2 li a span{
    background: #555;position:absolute;
    top:-10px;left:-10px;width:auto;height:auto;opacity:0;
    padding:3px;text-align:left;
    color:#fff;filter:alpha(opacity=0);
    white-space:nowrap;border-radius:3px;font-size:12px;
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    -ms-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;} ul#m-soc2 li a:hover{text-decoration:none}
    ul#m-soc2 li a:hover span{
    opacity:.7;
    filter:alpha(opacity=70);
    top:-23px}

     

    Ardından sayfa yerleşimine gidin ve  HTML/JavaScript gadet olarak aşağıdaki kodları ekleyin.

     

    <ul id="m-soc2"><li><a class="twitter" href="http://twitter.com/bloghocam"><span>Twitter</span></a></li><li><a class="facebook" href="http://facebook.com/bloghocam"><span>Facebook</span></a></li><li><a class="google" href="https://plus.google.com/108761595756468128383"><span>Google+</span></a></li><li><a class="rss" href="http://feeds.feedburner.com/bloghocam"><span>RSS</span></a></li></ul>

     

    Kodlarda değiştirmeniz gereken yerler:

    Leave a Reply

    Subscribe to Posts | Subscribe to Comments

  • Copyright © 2013 - Hyperdimension Neptunia

    Blogger Ve Wordpress Tema Arşivi - Powered by Blogger - Designed by Johanes Djogan