jQuery Animasyonlu Sosyal Medya Sekme Butonları
Bugün sitenize renk katacak bir eklentiyi sizlerle paylaşmak istiyorum. 18 sosyal medya, 1 rss butonu, beyaz ve siyah olmak üzere 2 renk temasıyla uygulaması kolay bir eklenti. Sitenizin Sol, Sağ, Yukarı veya sayfanın aşağı tarafında konumlandırabileceğiniz şık bir eklenti. Dilerseniz lafı fazla uzatmadan anlatıma geçeyim.

Blogger'a JQuery Animasyonlu Sosyal Medya Sekme Butonlarını ekleme:

1. Blogger kontrol panelinize giriş yapın > Şablon
2. Şablonunuzu yedeklemeyi unutmayın.
3. HTML'yi Düzenle
4. </body> kodunun hemen üstüne aşağıdaki kodları kopyalayıp yapıştırın:
<script type="text/javascript" src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
<div id="mefmed">
<script type="text/javascript" src="https://meftunmede.github.io/javascripts/Meftun_Sosyal_bar.js"></script>
</div>
<link href='https://meftunmede.github.io/stylesheets/Meftun_Sosyal_bar.css' rel='stylesheet' type='text/css'/>
<!-- Animasyonlu Sosyal Medya Bar By www.meftunmede.com -->
<script type="text/javascript">
$(document).ready(function(){
$.mefSocialBar({
items: {
facebook: { url: '#', text: 'Facebook Profili' },
twitter: { url: '#', text: 'Twitter Profili' },
google: { url: '#', text: 'Google+ Profili' },
youtube: { url: '#', text: 'Youtube Profili' },
pinterest: { url: '#', text: 'Pinterest Profili' },
stumbleupon: { url: '#', text: 'Stumbleupon Profili' },
reddit: { url: '#', text: 'Reddit Profili' },
rss: { url: '#', text: 'RSS Feed' },
},
show: 8,
position: "left",
skin: "clear"
});
});
</script>

Not: Zaten jQuery kütüphanesi kaynak kodu blogunuzda yüklü varsa kırmızı renkle işaretlediğim kodu eklemeyin.
(<script type="text/javascript" src="https://code.jquery.com/jquery-1.7.1.min.js"></script>)

Özelleştirme

Eklentiyi özelleştirmek ve denemek için Online Html editörde istediğiniz şekilde aşağıdaki değişikleri yapabilirsiniz.
  • URL'yi ekleme: "#" işaretli olan yerlere sosyal medya hesaplarınızı yazın.
  • Pozisyonları değiştirme: Widget konumunu isteğinize göre değiştirin:
    Kodlama:
    left” = Sol,
    right” = Sağ,
    top” = Yukarı,
    bottom” = Aşağı
    Unutmayın: Büyük Harfler kullanmayın, aksi takdirde çalışmaz.
  • Sosyal Medya butonları: Sosyal medya butonları yukarıdaki örnekte "8" tanedir. Azaltmak veya çoğaltmak isterseniz; istemediğiniz buton bölümünü script kodundan silerek, yada istediğiniz butonu ekleyerek, show: 8, yazan yerdeki sayısal değeri 10 veya 7,6,5 gibi değiştirebilirsiniz.
  • Kullanabilir Butonlar: Yeşille işaretlediğim yerlerde bu sosyal medya iconlarını kullanabilirsiniz;
    twitter, facebook, rss, google+, youtube, stumbleupon, reddit, pinterest, instagram, vk, linkedin, tumblr, xing, myspace, digg, flickr, foursquare, vimeo, soundcloud
  • Arayüzü değiştirme: Sosyal Medya Barda iki Tema var yani “clear” = açık renk ve “dark” = siyah renkte arka plan. Güncel “clear” = açık renk temasını değiştirmek için JavaScript kodlamada “dark” = siyah renk olarak değiştirebilrsiniz.
5. Son olarak Şablonu kaydet diyip çıkıyoruz. işlem bukadar!
Barış ve bereket Arkadaşlar!Herkeze kolay gelsin. Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz. iyi bloglamalar...

5 Yorumlar

Lütfen yalnızca yazı ile ilgili yorumlar yazın. Yazının konusu dışında iletmek veya sormak istediğiniz bir şey varsa iletişim formunu kullanın. Ve lütfen yorumlara tıklanabilir link yazmayın!

  1. Meftun Abi , konunun altında yazar : Meftun MEDE 'ye tıklayınca direk google profiline yönlendiriyor. Bunu kendi bloguma nasıl uyarlayabilirim ?

    YanıtlaSil
  2. güzel paylaşım.
    http://www.avantajkodu.com/

    YanıtlaSil
  3. kot olmadı göztermiyor
    uyguladım olmuyor kot var görünuyor ama tema yok yardımcı olursan sevinirim

    YanıtlaSil
  4. çok iyi blogumu ziyarey edermisiniz http://teknots.blogspot.com.tr/

    YanıtlaSil

Yorum Gönder

Lütfen yalnızca yazı ile ilgili yorumlar yazın. Yazının konusu dışında iletmek veya sormak istediğiniz bir şey varsa iletişim formunu kullanın. Ve lütfen yorumlara tıklanabilir link yazmayın!

Önceki Makale Sonraki Makale