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...