5 Ağustos 2013 Pazartesi

Dönme Efektli Sosyal Takip Eklentisi

23 yorum

Google’dan sonra en önemli trafik kaynaklarından biri olan sosyal medya kanallarında yer almaya dikkat etmeliyiz. Facebook, Twitter, Google+ gibi popüler sosyal platformlarda takipçi sayımız ne kadar çok olursa, blog trafiğimiz o kadar artar. Bu yüzden blogumuza sosyal medya butonları koyarak ziyaretçilerimizi bu platformlardaki hesaplarımıza yönlendirmeliyiz. İşte blogunuzun kenar çubuğuna ekleyebileceğiniz, hover efektli şık bir sosyal takip eklentisi…

 

Spinning Sosyal Takip Eklentisi

 

Bu resimden başlıkta bahsettiğim dönme efektini anlamanız elbette mümkün değil. Bu yüzden aşağıdaki demo videoyu izlemenizi de öneririm.

 

 

Eklentiyi blogunuzda kullanmaya karar verdiyseniz Blogger kumanda paneline girdikten sonra Yerleşim > Gadge Ekle > HTML/JavaScript Gadget yolunu izleyerek aşağıdaki kodları eklemeniz yeterli.

 

<!--Blog Hocam Metro Spinning Sosyal Takip Eklentisi-->

<div class="subscribe">
<ul> <li class="rss"><a href="http://feeds.feedburner.com/bloghocam" target='_blank'><span></span>RSS</a></li>
<li class="twitter"><a href="http://twitter.com/bloghocam" target='_blank'><span></span>Twitter</a></li>
<li class="gplus"><a href="https://plus.google.com/108761595756468128383" target='_blank'><span></span>Google Plus</a></li>
<li class="facebook"><a href="http://facebook.com/bloghocam" target='_blank'><span></span>Facebook</a></li> </ul>
</div> 

<style>
.subscribe li {
display: block !important;
margin-right: 0 !important;
width: auto !important;
}
.subscribe li a span {
display: block;
height: 32px;
left: 0;
position: absolute;
top: 2px;
transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
transition-duration: 0.8s;
transition-property: all;
width: 32px;
}
.subscribe .twitter span {
background-color: transparent;
background: url(http://4.bp.blogspot.com/-4wYTPzOLq3U/UfVpXDkLEQI/AAAAAAAABCE/z9T4Cl3UJnE/s1600/twitter_icon.png) no-repeat;
}
.subscribe .twitter a {
background: #91C661;
}
.subscribe li a:hover span {
transform:rotate(340deg);
-webkit-transform:rotate(340deg);   
}   
ol, ul {
list-style: none outside none;
}
.subscribe li {
display: block !important;
margin-right: 0 !important;
width: auto !important;
}
.subscribe li {
display: inline-block;
margin: 0 20px 10px 0;
position: relative;
width: 200px;
}
.subscribe .rss span {
background-color: transparent;
background: url(http://1.bp.blogspot.com/-bLkQLrkm2tc/UfVpXKVcLyI/AAAAAAAABCA/TuUyyebw8Bs/s1600/rss-icon.png) no-repeat;
}
.subscribe .rss a {
background: #F67F00;
}
.subscribe li a {
color: #FFFFFF;
display: block;
font-family: verdana;
font-size: 12px;
padding: 10px 10px 10px 40px;
text-decoration: none;
font-weight: bold;
}
.subscribe li a span {
display: block;
height: 32px;
left: 0;
position: absolute;
top: 2px;
transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
transition-duration: 0.8s;
-webkit-transition-duration: 0.8s;
transition-property: all;
width: 32px;
}
.subscribe li a:hover span {
transform:rotate(340deg);
-webkit-transform:rotate(340deg);

.subscribe .twitter span {
background-color: transparent;
background: url(http://4.bp.blogspot.com/-4wYTPzOLq3U/UfVpXDkLEQI/AAAAAAAABCE/z9T4Cl3UJnE/s1600/twitter_icon.png) no-repeat;
}
.subscribe .twitter a {
background: #91C661;
}
.subscribe .gplus span {
background-color: transparent;
background: url(http://4.bp.blogspot.com/-wHxS3NEs3Tc/UfVpWcpqcrI/AAAAAAAABB0/2kcFjAo9BqM/s1600/googleplus.png) no-repeat;
}
.subscribe .gplus a {
background: #D74D2F;
}
.subscribe .facebook span {
background-color: transparent;
background: url(http://3.bp.blogspot.com/-k6R-0tsbDVw/UfVpWe2S9YI/AAAAAAAABBw/JdcnV2LTaAk/s1600/facebook-icon.png) no-repeat;
}
.subscribe .facebook a {
background: #3B5998;
}
</style>

<!--Blog Hocam Metro Spinning Sosyal Takip Eklentisi-->

 

Bordo renkle gösterdiğim Blog Hocam’a ait hesap adreslerinin yerine kendi adreslerinizi yazmayı unutmayın!

 

Alternatif sosyal takip eklentisi arayanlar daha önce paylaştığım şu eklentilere de bakabilirler:

 

23 yorum:

  1. Blog hocam bu tür şeylerin tasarımları nasıl yapılıyor?

    YanıtlaSil
  2. instagramı da olaydı iyiydi :)
    teşekkürler yaptım oldu :)

    YanıtlaSil
  3. Merhaba. @Bademle Buduk arkadaş gibi bende instagram, youtube vs gibi ekstralarını aradım, umarım ileride onlar da olur.

    BU kadarı bile çok hoş, Teşekkürler :)

    YanıtlaSil
  4. BUYRUN youtube ve instagram İçin İsteyenler Ekledim

    Link: http://www.maydogan.net/2013/08/donme-efektli-sosyal-takip-eklentisi.html

    Hocam Biraz İzinsiz Oldu takipçileriniz İstediği 2 eklendiye'de ekledim UMARIM kUSURA BAKMASINIZ..

    YanıtlaSil
  5. bende siteme uyguladım .teşekkürler.çok güzel paylaşım :)

    YanıtlaSil
  6. Merhabalar;
    Blogununuzu yeni keşfettim ve hemen takibe aldım.
    1477. takipçiniz benim.. :)
    Bana da gelirseniz sevinirim :)
    ¦ Sevgiler ¦
    http://whiteglaze.blogspot.com

    YanıtlaSil
  7. Çok iyi bir paylaşım aradığım bir şeydi teşekkür ederim. :)

    YanıtlaSil
  8. merhabalar,

    bu paylaşım tam aradığım şeydi gerçekten harika oldu...

    YanıtlaSil
  9. Güzel bir uygulama elinize sağlık paylaşım için

    YanıtlaSil
  10. serdar hocam bu dikey sosyal paylaşım eklentisini yazı içi reklamın yanında çerçeveli olarak kullanmak istiyorum örnek resim: http://s1308.hizliresim.com/1d/w/rzngf.jpg resimde görüldüğü gibi yazı içi reklam yanına sağ tarafa çerçeve içinde dikey paylaşım eklentisini eklemek istiyorum temada istediğim yere yerleştiremedim yardım edebilirmisiniz saygılar

    YanıtlaSil
  11. @Genel Site
    Yeni bir div tanıtıp border ve float komutlarını dive ekleyebilirsiniz.

    YanıtlaSil
  12. www.mygezgin.com27 Ekim 2013 02:53

    güzel olmuş ama heksin işine yaramaz

    YanıtlaSil
  13. buna instagram ve tumblr nası eklenir yardımcı olurmusunuz acaba serdar bey

    YanıtlaSil
  14. @tosbağanındünyası
    </ul> kodundan önce şunu ekleyin:

    <li class="instagram"><a href="http://instagram.com" target='_blank'><span></span>Instagram</a></li>

    Daha sonra </style> kodunun üstüne şunları ekleyin:

    .subscribe .instagram span {
    background-color: transparent;
    background: url(http://istagram-ikonu.png) no-repeat;
    }
    .subscribe .instagram a {
    background: #517fa4;
    }

    instagram-ikonu.png yerine bir ikonun urlsini yazın.

    YanıtlaSil
  15. güzel yanlız şeritlerin genişliğini ayarlayamıyorum. daha uzun yazı yazmak istediğimde alt satıra kayıyor ve kotu gorunuyor nasıl ayarlarım

    YanıtlaSil
  16. @joseph honey
    Genişlik otomatik ayarlanıyor. Sizin sidebar alanı dar olduğu için alt satıra geçiyordur.

    YanıtlaSil
  17. Teşekkürler ekledim
    instagramı da deneyeceğim

    YanıtlaSil
  18. Paylaşımlarınızı zevkle takip ediyorum. Başarılarınızın devamını.

    YanıtlaSil
  19. Selam paylaşımlarınız çok güzel hem takip ediyor hem de paylaşımlarınızdan yararlanıyorum, emeğinize sağlık öncelikle. Şunu öğrenmek istiyorum bu eklentilerin hemen üstüne "... SOSYAL MEDYADA TAKİP ETMEK İÇİN" gibisinden bir yazı yazmak için nasıl bir yol izlememiz gerekiyor. Şimdiden teşekkürler http://ersinperk.blogspot.com.tr/

    YanıtlaSil
  20. Merhabalar Serdar Bey... Kolay kolay yorum yapamıyorum aslında herhangi bir yere.Genelde okumak ve bilgi edinmekle yetiniyorum.Sizin yazılarınızı da çok beğeniyor, faydalı buluyor ve sizin sayenizde yeni blogumu şekillendiriyorum. Çok teşekkürler:) Aramadığım yer kalmadı, bloguma foursquare butonu eklemek istiyorum ama malesef hiç bir yerde bulamadım:( yardımcı olursanız sevinirim.şimdiden teşekküreler :) Lütfen yazmaya devam edin... Bu arada küçük bir de ümidim var, bazı yorumlarda rica da bulunanlara bakarım demişsiniz :) benim bloguma da göz atarsanız sevinirim.Yorumlarınızı bekliyorum... www.2tek1cift.blogspot.com.tr

    YanıtlaSil
  21. @Sevil Yüksel
    Merhaba,
    Eğer tıklandığında foursuare hesabınızın açılacağı bir buton istiyorsanız çok basit. Örneğin şöyle bir kod ekleyebilirsiniz:

    <a href="http://fourqauare.com/username" target="_blank"><img title="Foursquare" style="border-top: 0px; border-right: 0px; border-bottom: 0px; float: none; margin-left: auto; border-left: 0px; display: block; margin-right: auto" border="0" alt="Foursquare" src="http://i.hizliresim.com/Po04kQ.png" width="125" height="125" /></a>

    YanıtlaSil
  22. Çok güzel bir paylaşım.
    Ben de uyguladım fakat şöyle bir sorun oluştu. Hover efektsiz yazı rengi resimdeki gibi beyaz değil, #555 kodlu gri/kahverengi bir yazı rengi. Bu da facebook yazısının güçlükle okunmasına yol açıyor. Kodların içinden bu kodu bulamadım, yazı rengini nasıl beyaz yapabilirim?

    YanıtlaSil

Picardes

LİNKLER