3 Ekim 2012 Çarşamba

CSS3 İle Oluşturulmuş, Hover Efektli Sosyal Takip Eklentisi

21 yorum

Sosyal medya hesaplarınızdaki takipçi sayınızı arttırmak istiyorsanız, ziyaretçilerinizin dikkatini çeken sosyal widgetlar kullanmanız gerekir.Ancak dikkat çekici ve görsel açıdan zengin widgetlar genellikle script kullanarak yapıldığından blog hızını olumsuz yönde etkiliyor.

 

Bu yazıda paylaşacağım sosyal takip eklentisi, Jquery ve Java Script kullanılmamasına rağmen görsellik katan hover efekti ile ziyaretçilerin ilgisini çekecek bir widget.

CSS3 Sosyal Butonlar

Eklentiyi blogunuza ekemek için Blogger kumanda paneline giriş yaptıktan sonra Yerleşim > Gadget Ekle > HTML/JavaScript yolunu izleyerek aşağıdaki kodları yapıştırın.

<style>
#tbisose{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;}
#tbisose a{text-decoration:none; font-family:trebuchet ms,sans-serif;}
#tbisose li{position:relative; height:38px; cursor:pointer; padding: 0 !important;}
#tbisose .facebook, .googleplus, .pinterest, .rss, .twitter{position:relative; z-index:5; display:block; float:none; margin:10px 0 0; width:210px; height:38px; border-radius:5px; background:url(https://lh4.googleusercontent.com/-l0EYSSxxuc8/UFd37FdwjzI/AAAAAAAAG2E/CDbmwPO4haA/s800/sprites.png) no-repeat;  background-color:rgba(217,30,118,.42); -webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px; -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px;  box-shadow:rgba(0,0,0,.28) 0 2px 3px; color:#141414; text-align:left; text-indent:50px; text-shadow:#333 0 1px 0; white-space:nowrap;  line-height:32px; -webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out; -moz-transition:width .25s ease-in-out,background-color .25s ease-in-out; -ms-transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-transition:width .25s ease-in-out,background-color .25s ease-in-out; transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;}
#tbisose li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt);  line-height:32px;}
#tbisose .icon{overflow:hidden; color:#fafafa;}
#tbisose .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;}
#tbisose .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;}
#tbisose .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;}
#tbisose .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;}
#tbisose .rss{ width:32px;  height:32px;  background-color:rgba(255,102,0,0.42); background-position:-3px -126px;}
#tbisose li:hover .icon,
.touch #tbisose li .icon{width:210px;}
.touch #tbisose li .facebook, #tbisose li:hover .facebook{background-color:rgba(59,89,152,1);}
.touch #tbisose li .twitter, #tbisose li:hover .twitter{background-color:rgba(64,153,255,1);}
.touch #tbisose li .googleplus, #tbisose li:hover .googleplus{background-color:rgba(228,69,36,1);}
.touch #tbisose li .pinterest, #tbisose li:hover .pinterest{background-color:rgba(174,45,39,1);}
.touch #tbisose li .rss, #tbisose li:hover .rss{background-color:rgba(255,102,0,1);}
</style>

<ul id="tbisose">
<li data-alt="Fcebook'ta takip et"><a class="icon facebook" href="http://facebook.com/bloghocam">Facebook'ta Takip Et</a></li>
<li data-alt="Twitter'da takip et"><a class="icon twitter" href="http://twitter.com/bloghocam">Twitter'da Takip Et</a></li>
<li data-alt="Google+'da takip et"><a class="icon googleplus" href="http://plus.google.com/108761595756468128383">Google+'da Takip Et</a></li>
<li data-alt="Pinterest'te takip et"><a class="icon pinterest" href="http://pnterest.com/kullanici-adi">Pinterest'te Takip Et</a></li>
<li data-alt="RSS İle Takip Et"><a class="icon rss" href="http://feeds.feedburner.com/bloghocam">RSS İle Takip Et</a></li>
</ul>

 

Kodların son bölümündeki sosyal medya hesaplarıma ait adresleri kendi hesabınıza ait adreslerle değiştirin.Bunun dışında bir değişiklik yapmanıza gerek yok.

21 yorum:

  1. Hocam, bir de demo koyabilir misiniz ? Eklentiyi görebilmemiz açısından.

    YanıtlaSil
  2. one nice hover trick.
    thanks for coding ;)

    YanıtlaSil
  3. kendi siteme uyguladım gayet güzel teşekkürler

    YanıtlaSil
  4. hocam güzel oldu sayenizde sadece bu pencereler tıklanınca yeni sekmede açılmıyorlar.ne yapmalı.birde renkler biraz soluk kaldı.bunun için ne yapabiliriz.

    YanıtlaSil
  5. yani hocam toklanınca yeni sekmede açılsınlar benim blogum altta kalsın.benim blogumu kapatıp bu sosyal sekmelerin sayfasını açıyor:)

    YanıtlaSil
  6. @annelikokulum

    Yeni sekmede açmak için bir kod eklemek gerekiyor.Ben örnek olarak Facebook'u gösteriyorum ve eklemeniz gereken kodu koyu renkle belirtiyorum.

    <li data-alt="Fcebook'ta takip et"><a class="icon facebook" href="http://facebook.com/bloghocam" target="_blank">Facebook'ta Takip Et</a></li>

    YanıtlaSil
  7. Hocam size ne desem az ya....Harika oldu.öyle güzel anlatıyorsunuz ki yapabildim.Kodların a sını bile bilmezken neler yapabiliyorum sayenizde.

    YanıtlaSil
  8. yaptım vala derli toplu toplu oldu, çok güzelbirpaylaşım teşekkürler.

    YanıtlaSil
  9. Merhaba Serdar Hocam ;
    Güzel bir paylaşım emeğinize sağlık. Pinterest kısmında (i) harfi eksik herhalde gözdan kaçmış.Kullanan arkadaşlar hata yapmasınlar.Görüşmek üzere.
    saygılar

    YanıtlaSil
  10. web siteme sizin burada yazdığım gibi yorum gönde biloğu koymak istiyorum bana yardımcı olursanız sevinirim Teşekkürler

    YanıtlaSil
  11. Merhabalar,
    tam istediğim tarzda eklentiler.Çok teşekkür ederim.Bloguma uyguladım ancak facebook hariç diğerlerinde eklenti amblemleri görünmüyor-yazıları ortalmış değil,nerde hata yapmış olabilirim?rica etsem bakabilir misiniz?
    www.masalbebeklerim.com
    Teşekkürler...

    YanıtlaSil
  12. @ÇİĞDEM AYTEKİN
    Sprite imaj dosyası silinmiş, kusura bakmayın. En kısa sürede yenileyeceğim.

    YanıtlaSil
  13. harika bir uygulama paylaşımınız için çok teşekkür ederim

    YanıtlaSil
  14. Merhabalar,
    Bloguma ekledim ancak google plusta bir sorun var benim sayfama gitmiyor tıklandığında. Nerde yanlış yapmış olacabilirim acaba?

    YanıtlaSil
  15. @Minik Kuş Şule
    Kendi Google+ URL'nizi yanlış yazmış olabilirsiniz. Şu şekilde olacak:

    http://plus.google.com/108761595756468128383

    YanıtlaSil
  16. harika hepsine uyguladım yeni sekmede açıyor çok teşekkürler

    YanıtlaSil
  17. pinterestin i harfini yazmamışsınız faklı bir yer çıkıyor i harfini yazınca düzeldi bilginiz olsun

    YanıtlaSil
  18. serdar hocam merhaba , pinterest i çıkarmak istesek hangilerini silmemiz gerekir acaba ?

    YanıtlaSil
  19. @gökhan mert
    Şunu silmeniz yeterli

    <li data-alt="Pinterest'te takip et"><a class="icon pinterest" href="http://pnterest.com/kullanici-adi">Pinterest'te Takip Et</a></li>

    YanıtlaSil

Picardes

LİNKLER