Sayfa Gezinme

Son makaleler:

latest

YAYIN AKIŞI:

Tümünü Görüntüle

Hover Efektli Sosyal Takip Eklentisi

CSS3 ile oluşturulmuş, Hover Efektli Sosyal Takip Eklentisi. Sosyal medya hesaplarınızdaki takipçi sayınızı arttırmak istiyorsanız, zi...

...
CSS3 ile oluşturulmuş, Hover Efektli Sosyal Takip Eklentisi. 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 ziyaretinde görsel açıdan zengin widgetler genellikle komut dosyası kullanarak hazırlandığından, blogun hızını olumsuz yönde etkiliyor. Bu yazıda paylaşacağım sosyal takip eklentisi, jQuery, Java Script kullanılmamasına rağmen görsellik katan hover efekti ile ziyaretçilerin ilgisini çekecek bir widget.

DEMO 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. Kodların olduğu bölümündeki sosyal medya hesaplarıma ait adresleri kendi hesabınıza ait adreslerle değiştirin. Bunun dışında bir degisiklik yapmanıza gerek yoktur.

Sosyal takip eklenti kodları :
<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2bRgc1_ZMm4Tj7ijKMTxHSm1XJEyLdBOLlLGu-5zABDf2SVSnTZOtgcbcCCviiJB9OL-aYi-8rTxh0rYNyMG9QBZNXjzV3zbgFBPc0Z6QqIQViATcA0T0UOwqOarT4zNOXqdvpexa9hY/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="Facebook'ta takip et"><a class="icon facebook" href="https://facebook.com/guney59paylasim"  target="_blank">Facebook'ta Takip Et</a></li> 
<li data-alt="Twitter'da takip et"><a class="icon twitter" href="https://twitter.com/guney59"  target="_blank">Twitter'da Takip Et</a></li> 
<li data-alt="Google+'da takip et"><a class="icon googleplus" href="https://plus.google.com/114021536527450214647"  target="_blank">Google+'da Takip Et</a></li> 
<li data-alt="Pinterest'te takip et"><a class="icon pinterest" href="https://pinterest.com/adnanguney"  target="_blank">Pinterest'te Takip Et</a></li> 
<li data-alt="RSS İle Takip Et"><a class="icon rss" href="http://feedburner.google.com/fb/a/mailverify?uri=guney59&loc=en_US"  target="_blank">RSS İle Takip Et</a></li> 
</ul>
<div style="font-size:9px;text-align: center;">By <a href="https://guney59.blogspot.com.tr/2016/02/blogger-yaz-etiketleri-ile-onerilen.html"target="_blank"> Adnan Güney Gadgeti Al</a></div>


12 yorum

  1. bunu ekleyip diğer ilgili widgetleri kaldırırsak yerde açarız böyle daha az yer kaplar ama blog hızının yavaşlaması kafamı karıştırdı :(

    YanıtlaSil
    Yanıtlar
    1. @Tuba Tb
      Hanım CSS veya JS kodları sayfanın ya en üst kısmına yakın bir yere yad en alt kısma koyarsanız hızlı açar ve etkilemez.Çok fazla etileyen bir kodlama yok blogda zaten.Yayınların kısaltığınızdan ve resimlerde küçüldüğünden hız oranı dengelendi.Uygulayabilirsiniz.

      Sil
    2. teşekkürler diğer rss leri ve facebook yönlendirmesini kaldırdım.Nasıl olmuş sizce ?

      Sil
    3. @Tuba Tb
      Süper bir blog olmuş.Bu farklıtemaları hep merak etmişimdir.Blogger temaları varken neden farklı temalar yüklerler diye.Sonrada birçok hatayı çözemez ve farklı tema yüklemeye devam ederler.İşte sizin blog çok güzel ve istediğiniz yapıyorsunuz.Haksız mıyım?
      Ayrıca abone kutu içindeki yazıyı istediğiniz gibi değişebilirsiniz hatırlatmak isterim.

      Sil
    4. Teşekkür ederim yardımlarınız ve fikirleriniz ile bir şeyler yapmaya çalışıyorum.Çok teşekkürler.
      abone kutusu içindeki yazı güzel kalsın şimdilik bakalım...

      Sil
    5. @Tuba Tb Hanım
      Bende teşekkür ederim. Kutu içini istediğinizde değişebeilirsiniz.Kolay gelsin.

      Sil
    6. rss facebookde caliwmiyor nasi ede bilirin blogeri yeizle baglamaq icin

      Sil
    7. @ferahim agazade
      Merhaba, sonunda facebook dan kopartabildim seni.Hoşgeldin.
      Facebook blogger sayfa URL yazdığına emin misin.? Profil URL çalışmaz. Faceboo sayfa blogger için olması lazım.

      Sil
  2. iyi günler adnan bey.. ilgili kodları html/javascript gadget ının içine ekliyorum ancak bir değişme olmuyor.sebebi ne olabilir?

    YanıtlaSil
    Yanıtlar
    1. @Murat Kılınç
      Bey HTML modunda iken kaydedin.Ne olduğunu görmek için bakarsanız kodlarda oynama yapar ve görülmez.

      Sil
    2. hocam anca cevap yazabildim kusura bakmayın.HTML modunda kaydediyorum zaten ama dinamik bloggerda olmuyo sanki bu bana öyle gibi geldi.şablondan değiştiriyorum klasik bloğa geçiyorum anca orda görebiliyorum.dinamik blog için geçerlimi bu hocam?

      Sil
    3. @Murat Kılınç
      Bey rica ederim.Arzu ettiğiniz zaman diliminde cevap verebilirsiniz.Çok güzel bir eklenti ancak dinamik bloglarda olmuyor.Dinamik blog tema yapısı gereği bu kodu kabul etmiyor.Klasik blogda sorun yok.

      Sil

Fikirlerinizi bizimle yorumlarda paylaşabilirsiniz.