11 Haziran 2012 Pazartesi

Blogunuza Sosyal Takip Butonları Ekleyin

20 yorum

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://lh4.googleusercontent.com/-n5zj4LjXnmM/T8zwsOI_NhI/AAAAAAAADIg/tD-DgPUODu4/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:

20 yorum:

  1. çok iyi bir paylaşım. bloguma uyguladım ve görünümü de çok hoşuma gitti. teşekkür ediyorum.

    YanıtlaSil
  2. tatlisohbetcim.blogspot.com bu bnm blogum yardım edin hocam yapamıorum hç bişi

    YanıtlaSil
  3. yapan arkadaşlar yardımcı olursa sevinirim.. Hocam photoshopcsders.blogspot buraya yapmaya çalıstım ama dediginiz ]]> i bulamadım

    YanıtlaSil
  4. sizin blogunuzdaki gibi sayaclı olanı yokmu

    YanıtlaSil
  5. GeneL PortaL | İF |
    Onları da paylaşmıştım.

    YanıtlaSil
  6. bunu da başardım aferin bana:)
    ve TEŞEKKÜRLER HOCAM...

    benim gibi güdük bir blog sahibesi bile öğretileriniz sayesinde bir aydan kısa sürede ilave 5000 tıklanma ile 50 ye yakın takipçi kazandım...tekrar teşekkürler...

    not: acaba üstada yalaka blogger tipine mi girdim bu yorumla :)))

    YanıtlaSil
  7. @Hobimi Terapimi
    Hahaha estağfurullah olur mu öyle şey :) Ben ne kadar samimi bir şekildi yazdığınızı anlayabiliyorum.

    YanıtlaSil
  8. merhaba cok cok tesekkurler; gorunumu cok guzel ancak ben bir de pinterest de eklemek istiyordum yapamadim; nasil yapabilirim acaba yardimci olursaniz çok memnun olurum

    YanıtlaSil
  9. @Hér Kitchén
    Bu butonlara Pİnterest'i ekleyemezsiniz. Başka bir ikon setinde nasıl ekleyeceğinizi anlatırım.

    YanıtlaSil
  10. http://herkesegerek.blogspot.com/

    üstat bende ekledim ama bir girip bakarmısın biraz şekil kayık oldu ne yapmam lazım.... :(

    YanıtlaSil
  11. @Osman ÖZBODUÇ
    Düzenlerken hata yapmışsınız. Gadget olarak eklediğiniz kodları kaldırıp tekrar ekleyin.

    YanıtlaSil
  12. Çok teşekkür ederim emeğinize sağlık.Keşke ınstagramda içersinde olsaydı çok isterdim

    YanıtlaSil
  13. merhabalar belirttiklerinizi yaptım ama blogun en üstünde kopyaladığım şeyler çıktı nerede saçmaladım :) yardımcı olursanız çok memnun olurum saygılar
    http://matmazelgreen.blogspot.com.tr/

    YanıtlaSil
  14. twitter'ı çıkarıp instagramı nasıl ekleriz ? :)

    YanıtlaSil
  15. SERDAR Öncelikle kolay gelsin. Başarılar dilerim.b:skin kodunun üstüne eklenti kaydettiğimde blogu görüntüledikten sonra eklediğim kodlar en üstte boşlukta görünüyor ne yapmam gerekir?

    YanıtlaSil

Picardes

LİNKLER