(En Dinamik Haliyle) Blogger İçin Rastgele Yazılar Eklentisi

Blogger kullanan arkadaşlar, genellikle rastgele yazı göstermekte sıkıntı yaşarlar. Wordpress gibi kaynak koduna erişebildiğimiz bir sistem olmadığı için bunu Javascript ile yapmamız gerekecek. Bu yazımda da blogger için rastgele yazılar eklentisinin nasıl yapılacağını anlatacağım. Birçok yerde farklı örneğini görebileceğiniz için, belirtmem gerekir ki; göstereceğim yöntem biraz detaylı ve en özelleştirilebiliri. O nedenle yazı başlığını en dinamik haliyle blogger için rastgele yazılar eklentisi olarak attım =)

Vereceğim kodlar üzerinde gerekli düzenlemeleri yaptığınızda, görünümü de kendinize göre özelleştirebiliyor olacaksınız. Basit ayarları mevcut, yazınızın içeriğinde görsel varsa görseli, yoksa Youtube videosu varsa onun görselini kullanarak thumbnail oluşturan pratik bir uygulama... Hazırsak ve temamızın yedeğini aldıysak başlıyorum... =)

Blogger Resimli Rastgele Yazılar Eklentisi

1- Öncelikle, rastgele yazılar eklentimizin şık bir görünüşe sahip olması için; biraz CSS ekliyoruz. Bunun için blogger panelimize girerek, şablon alanından HTML düzenleme kısmına gidiyoruz. Sonrasında <head> kodunu bularak, sonrasına aşağıda yer alan kodları ekliyoruz.
<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
2- Bunu ekledikten sonra, yine aynı alanda ]]></b:skin> kodunu aratın. Ve aşağıda yer alan CSS kodlarımızı hemen bu kodun aşağısına yapıştırın.
<link href='http://forum.ehliblog.com/ehlisources/rastgeleyazilar.css' rel='stylesheet'/> 
3- CSS düzenleme kısmımız tamam. Temanızı böyle kaydedin. Sonrasında blogger panelinizden, yerleşim sekmesine gelin.

4- Şimdi yapacağımız şey, oluşturduğumuz CSS kodlarını, javascript ile desteklemek olacak. Javascript kodlarımızla rastgele yazılarımızı oluşturacağız. Sonra da bunu ekrana basacağız. Yerleşim sekmesinde, yeni bir html widget ekleyeceğiz rastgele yazılarımızı göstermek istediğimiz yere. Sonra bu widget içeriğine aşağıdaki kodu kopyalayıp yapıştıracağız.
<script type='text/javascript'>
//#################### Ayarlar
var ListBlogLink = "http://www.ehliblog.com";
var ListCount = 3;
var ChrCount = 85;
var TitleCount = 70;
var ImageSize = 150;
var showcomments = "on";
var showdate = "off";
var showauthor = "on";
var showthumbnail = "on";
var showlabel = "on";
var showcontent = "off";
//#################### Sonrasında değişiklik yapmayınız!
var RandomArray = [];
var TotalPosts  = 0;
var RandomArray = new Array(ListCount);
function TotalCount(json) {
    TotalPosts   = json.feed.openSearch$totalResults.$t
}
document.write('<script type=\"text/javascript\" src=\"'+ListBlogLink+'/feeds/posts/default?alt=json-in-script&callback=TotalCount\"><\/script>');
</script>
<script type='text/javascript' src='http://forum.ehliblog.com/ehlisources/bloggerrastgeleyazilar.js' />

Kodlarımızı yapıştırdıktan sonra, widget için bir de başlık ayarlayarak kaydediyoruz. Hepsi bu kadar! Şimdi kodlarımızla alakalı olarak biraz açıklama yapalım. Ayarlar kısmında yer alan kodlarımızda ufak tefek değişiklikler yapabilirsiniz. Ama ListBlogLink etiketinin karşısında yer alan http://www.ehliblog.com adresini muhakkak kendi blogunuzun adresiyle değiştirin. Diğer değişkenlerimize ve nasıl göründüğüne gelirsek...

ListCount değişkenimiz, kaç adet rastgele yazı göstermek istediğimizi belirliyor. Bu sayı, blogunuzdaki toplam sayıdan fazla olmamalıdır.
ChrCount değişkeni, eğer yazınızın içeriğinden bir bölüm göstermek istiyorsanız ve showcontent değişkeninizi "on" olarak ayarlamışsanız etki edecektir. Oraya yazacağınız rakam da yazınızın içerisinden kaç karakter göstermek istediğinizi ifade etmektedir.
TitleCount: Başlık uzunluğunun gösterilen kısmını ayarlamanıza olanak tanır.
ImageSize: Pixel cinsinden gösterilecek resmin boyutunu ayarlar.
ShowComments: Yorum sayısını göstermeye/gizlemeye yarar.
ShowDate: Yazınızın tarihini gösterip gizleme seçeneğini ayarlar.
Showauthor: Yazının yazarının adını gösterip gizlemeye yarar.
Showthumbnail: Yazının küçük resmini göstermeye gizlemeye yarar.
Showlabel: Yazı için tanımlanmış etiket varsa küçük resmin üzerinde etiketi göstermeye yarar.


Son Sözler

Eklentimizin görünüşü de yan taraftaki gibi olacaktır. Birçok temayla uyumlu olarak çalışacaktır. Genişlik taşması gibi ufak tefek pürüzleri son revizyonla toparladım. Eğer bir sorun yaşarsanız; blog yazarları için oluşturduğumuz forumdan ya da yorum olarak yazarsanız yardımcı olmaya çalışırım :)

Ozan Başer

Merhaba ben Ozan Başer. EhliBlog'da ve elbette Ehliforum (Blogculara Özel Forum)'da yazıyorum. Blogger, seo, adsense, sosyal medya ve google ürünleri hakkında faydalı ve kaliteli içeriği okuyucularıma sunmaya çalışıyorum. C#, PHP, Javascript gibi uğraşılarım var. Web ve online teknolojiler ile ilgili birçok konuda fikirlerimi sizlerle paylaşıyorum.

12 yorum:

  1. bu benzer yazılar eklentisini yazı altına bir türlü ekleyemedim >div class='post-footer'< kodu yok hocam bilginiz varmı ?

    YanıtlaSil
    Yanıtlar
    1. Yarın akşam bakayım, olur mu :)

      Sil
    2. Temanı inceledim FahriCan, senin temanda post-footer bölümü yok. Onun yerine < div id='share-this ' > etiketinin üstüne ya da < div class=" halaman " > etiketinin altına ekleyebilirsin. :)

      Sil
    3. Ekledim hocam çokta güzel durdu teşekkürler :D

      Sil
    4. İyi günlerde kullan :)

      Sil
  2. fahri usta ile aynı sorun benimkide

    YanıtlaSil
  3. teşekkürler. blogspotta yapayım.
    http://www.ahmetduzen.net/

    YanıtlaSil
  4. Çok yararlı ve açıkcalıyı bir makale olmuş ellerinize sağlık.

    YanıtlaSil
  5. bu eklenti iyi oldu ilk seferde çalıştıramadım ama yanlış eklemişim çok şık durdu sitemde

    YanıtlaSil
  6. Blogger'da bunları yapmak gerçekten bana zor geliyor. Kod yapısını bilmediğim için her sitemde bu yüzden wordpress kullanıyorum. Blogger'a hakim olabilsem keşke..

    YanıtlaSil
    Yanıtlar
    1. Wordpress eklenti çeşitliliği ve kod bilgisi gerektirmemesi bakımından güzel olsa da orta-uzun vadede maliyeti bloggera göre daha yüksek olacaktır. Bu nedenle ben ısrarla blogger tavsiye ediyorum :)

      Sil
  7. Güzel paylaşım olmuş emeğinizesağlık.. Ziyaretnizi beklerim..
    http://teknolojidehbr.blogspot.com

    YanıtlaSil

Yorumunuza gelecek cevabı takip etmek "beni bilgilendir" kutucuğuna işaretleyebilirsiniz.