Blogger için son konuları gösteren slider eklentisi flexslider

Blogger için son konuları gösteren slider eklentisi olan flexslider ile sidebarda ister kategori içerisinden isterseniz de tüm son konuları gösterebilirsiniz.

Bu makalemde blogger üzerinde yayınladığınız son makalelerinizi JSON Feed kullanarak widget desteği ile slider içerisinde gösterebilmenizi sağlayan eklentiyi anlatacağım.

FlexSlider, woothemes tarafından ücretsiz olarak sunulan bir slider sistemi. Bu sistemin özelliklerine bir göz atalım.

1. Yazar Avatarı Gösterebilme
2. İki farklı slider içerisinde son yazıları gösterebilme
3. Belirli bir kategori yada etiket içerisindeki yazıları gösterebilme
4. İki farklı animasyon desteği
5. Yorum sayısı gösterebilme
6. Tarih gösterebilme
7. Thumbnail gösterebilme
8. Thumbnail çözünürlüğünü değiştirebilme
9. Üçüncü parti resim ve youtube video thumbnail desteği
10. İçerik başlık uzunluğu ayarı

Blogger hesabımıza giriş yapıyoruz. Şablon ve ardından HTML’yi düzenle tıklıyoruz.

Kodlar içerisinde <head> kodunun hemen altına aşağıdaki kodları ekliyoruz

Eklemeniz gereken kodlar:

[mks_highlight color=”#ededed”] Not : Eğer daha önceden bloğunuza fontawesome,oswald ve jquery kodlarını eklemişseniz bu kodları yeniden eklemeyin.[/mks_highlight]

Yine aynı template içerisinde bu kez ]]></b:skin> kodunu aratıp buluyoruz. Ve hemen üzerine aşağıdaki kodları ekliyoruz ve kaydediyoruz.

Slider varsayılan olarak yeşil bir renk paletine sahip. Bu renkler üzerinde değişiklik yapmak isterseniz üstteki kodların son satırında yer alan rgb(125, 208, 4) ve rgb(125, 208, 4) renk kodlarını dilediğiniz renkler ile değiştirebilirsiniz. İstediğiniz renk paletini oluşturmak için Renk Kodu Oluşturucu ‘yu kullanabilirsiniz.

İşlemlerinizi bitirdikten sonra dosyayı kaydedelim.

Flexslider için widget oluşturma kısmına geçebiliriz. Bunun için Yerleşim menüsüne tıklıyoruz. Karşımıza şablon yerleşimi geldiğinde, flexslider göstermek istediğimiz kısım için Gadget Ekle tıklıyoruz. Gadget seçeneklerinden HTML/Javascript seçiyoruz .Başlık kısmını boş bırakıp içeriğine aşağıdaki kodları ekleyip kaydediyoruz.

Üstteki kodlar içerisinde Flexslider kişiselleştirebilmeniz için bazı parametler bulunuyor. Aşağıda bu parametreleri ve anlamlarını bulabilirsiniz. Dilediğiniz şekilde ayarlayabilirsiniz.

• Animation : Animasyon tipi seçin (fade yada slide)
• SlideshowSpeed : Slider hızı (milisaniye cinsinden)
• AnimationSpeed : Animasyon hızı (milisaniye cinsinden)
• pauseOnHover : Fare imleci içerik üzerindeyken animasyonun durmasını sağlar
• Kodlar içerisindeki Yeni Makaleler yazan kısım widget başlığıdır. Bu kısmı değiştirebilirsiniz.
• Listbloglink : http://siteismi.com (blog adresinizi yazın)
• List count : 6 ( Bu kısım listelenecek makale sayısını gösterir )
• ListLabel : “Seo” ( Bu kısım hangi etikete ait konuların listeleneceğini gösterir )
• TitleCount : 66 ( Makale Başlık Uzunluğu )
• Imagesize : 150 ( Makale resmi thumbnail boyutu )

NOT : Eğer belirli bir kategori yada etiketteki içerikleri değilde tüm son içerikleri göstermek isterseniz üst kodlar içerisindeki son bloğu aşağıdaki kodlar ile değiştirin.

Son olarak dosyayı kaydedin  ve işlemi tamamlamış olalım. Aşağıdaki şekilde bir slider elde etmiş olacağız.