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="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<div id="mefmed">
<script type="text/javascript" src="http://meftun-mede.googlecode.com/svn/trunk/Meftun_Sosyal_bar.js">
</script>
</div>
<link href='http://meftun-mede.googlecode.com/svn/trunk/Meftun_Sosyal_bar.css' rel='stylesheet' type='text/css'/>
<!-- Animasyonlu Sosyal Medya Bar -->
<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="http://code.jquery.com/jquery-1.7.1.min.js"></script>)
Özelleştirme
Eklentiyi özelleştirmek ve denemek için Online Html Editör de 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.
0 yorum:
Yorum Gönder