Blogger'a JQuery Animasyonlu Sosyal Medya Sekme Butonlarını ekleme
Blogger'a JQuery Animasyonlu Sosyal Medya Sekme Butonlarını ekleme:
1. Blogger kontrol panelinize giriş yapın > Şablon2. Ş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 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="http://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.
Barış ve bereket Arkadaşlar!Herkeze kolay gelsin. Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz. iyi bloglamalar...