Blogger Rasgele Yayınlar Eklentisi

Blogger ana sayfa sidebar eklentileriniz arasında kullanabileceğiniz, her yazı sayfa değişiminde eklenti bağlantı linkleri değişen resiml...

...

Blogger ana sayfa sidebar eklentileriniz arasında kullanabileceğiniz, her yazı sayfa değişiminde eklenti bağlantı linkleri değişen resimli, başlık link ve açıklamalardan oluşan Popüler yazılar benzeri Rasgele yazılar eklentisi. Blog’a eklenti iki şekilde ekleniyor. CSS kodları ve Gadget içine ekleyeceğiniz Html kodlarından oluşmakta. Eklediğiniz kodlar içinden, Sidebar genişliğini, görülmesi gereken yazı sayısını, yazı font değeri ve yazı açıklama değerlerini düşürebilir veya yükseltebilirsiniz. Eklenti Json kodlama ile derlenmiş mümkün olduğunca hızlı açılır. Rasgele yazılar feed rss içeriklerini okur. Blog yazılarınız çok fazla aşırı derecede ise birkaç milisaniye geçikme yaşanabilir. DEMO

Blogger rasgele yayınlar eklenti uygulamaları :

1. Blogger kumanda peneline giriş yapın.

2. CSS kodlarını 3 aşamalı olarak eklememiz mümkün. Şablon, Özelleştirme, Şablon head kapanış üstüne veya b:skin CSS  kodlarının olduğu yere. Ancak yeni blogger kullanıcıları da düşünülerek daha kolay ekleyebilmeniz için aşağıdaki adımları takip ederek CSS kodlarını ekleyin. Şablon kodlarınızı bozmayacağından şablon yedeğinizi almanıza gerek duymuyorum.  Ancak tereddüt ediyorsanız blogunuzun yedeğini alabilirsiniz. Bilmeyenler için ; Blogger nasıl yedeklenir okuyun.

3. Şablon → Özelleştir → Gelişmiş → CSS ekle yolunu takip ediyoruz.

4. Aşağıda verilen CSS kodlarını koplayıp pencereye yapıştırın ve en alttaki ( } ) sağa ters kulaklı parantezden sonra enter çekin ve blogu kaydedin.

Blogger rasgele yayınlar Css eklenti kodları :

/* http://adnanguney.blogspot.com */
#random-post-container {width:330px}
#random-post-container ul,
#random-post-container li {
  margin:0;
  padding:0;
  list-style:none;
  overflow:hidden;
}
#random-post-container img {
  display:block;
  float:left;
  border:1px solid;
  margin:2px 7px 5px 0;
}
#random-post-container a {
  font-weight:bold;
  font-size:90%;
}
#rancom-post-container .clear {
  display:block;
  clear:both;
} 

CSS özelleştirme hakkında bilgiler :

1. Width : En üst kısımdaki mavi renkli 330 px. sidebar genişlik ayarıdır. Blog’unuzun sidebar’ında taşma oluşursa bu değeri 300 px. olarak değiştirin. Sidebarınızın genişliğine göre birkaç deneme yapabilirsiniz. Çekinmeyin patlamaz.

2. Font-Size : Alt kısımdaki mavi renkli, “font-size: 90% ;” blogger için normal olan bir boyuta göre ayarladım. Dilerseniz değerle ile oynayabilirsiniz. Başlık rengi blog şablonunda özelleştirdiğiniz değer renkleridir. Her blog’un seçimine bağlı olarak farklı görülebilir.

3. Sidebarda kullandınığınız farklı bir eklenti kod içindeki CSS kod renklerini değiştirmiş olabilir.

4. başlık link rengini değiştirmek isterseniz, “font-size: 90% ; üst kısmını aşağıdaki etiketi ekleyin.

color: blue ; Blue mavi olarak bilinen rengi siz hangisini istiyorsanız yazabilirsiniz. Örnek: red

CSS kodlarında yapmanız gereken başka özel bir işlem yoktur. Şimdi diğer kodlarımızı ekleyelim.

Blogger rasgele yayınlar Html ve Json kodlarının eklenmesi :

1. Blogger kumanda peneline giriş yapın.

2. Yerleşim → Gadget ekle → Html/JavaScript, Gadget’ini açın ve aşağıdaki kodları eksiksiz yapıştırın.

<div id='random-post-container'>Load...</div>
<script>
// Feed configuration
var homePage = 'http://guney5.blogspot.com',
 maxResults = 5,
 summaryLength = 120,
 noImageUrl = 'http://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png',
 containerId = 'random-post-container';

// Function to generate random number limited from `min` to `max`
// Used to create a valid and safe random feed `start-index`
function getRandomInt(min, max) {
 return Math.floor(Math.random() * (max - min + 1)) + min;
}

// Function to shuffle arrays
// Used to randomize order of the generated JSON feed
function shuffleArray(arr) {
 var i = arr.length, j, temp;
 if (i === 0) return false;
 while (--i) {
  j = Math.floor(Math.random() * (i + 1));
  temp = arr[i];
  arr[i] = arr[j]; 
  arr[j] = temp;
 }
 return arr;
}

// Get a random start index
function createRandomPostsStartIndex(json) {
 var startIndex = getRandomInt(1, (json.feed.openSearch$totalResults.$t - maxResults));
 if (window.console && window.console.log) console.log('Get the post feed start from ' + startIndex + ' until ' + (startIndex + maxResults)); 
 document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&orderby=updated&start-index=' + startIndex + '&max-results=' + maxResults + '&callback=randomPosts"></scr' + 'ipt>');
}

// Widget's main function
function randomPosts(json) {
 var link, summary, img,
  ct = document.getElementById(containerId),
  entry = shuffleArray(json.feed.entry),
  skeleton = "<ul>";
 for (var i = 0, len = entry.length; i < len; i++) {
  summary = ("summary" in entry[i]) ? (entry[i].summary.$t.replace(/<.*?>/g, "")).substring(0, summaryLength) + '&hellip;' : "";
  img = ("media$thumbnail" in entry[i]) ? entry[i].media$thumbnail.url.replace(/\/s[0-9]+(-c)?/, "/s72-c") : noImageUrl;
  for (var j = 0, jen = entry[i].link.length; j < jen; j++) {
   link = (entry[i].link[j].rel == "alternate") ? entry[i].link[j].href : '#';
  }
  skeleton += '<li>';
  skeleton += '<img src="' + img + '" alt="" width="72" height="72">';
  skeleton += '<a href="' + link + '">' + entry[i].title.$t + '</a><br>';
  skeleton += '<span>' + summary + '</span>';
  skeleton += '<span class="clear"></span></li>';
 }
 ct.innerHTML = skeleton + '</ul>';
}

document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&max-results=0&callback=createRandomPostsStartIndex"></scr' + 'ipt>');
</script> 

Özelleştirme :

1. Kodlar içinde alt alta 3 ad. mavi renkleri göreceksiniz.

homePage : http://guney5.blogspot.com → Kendi url’niz ile aynı biçimde değiştirin.

maxResults : 5 → Görülmesini istediğiniz yayın sayısıdır.

summaryLength : 120 → Yazı başlık link altındaki açıklamaların uzunluğunu belirtir. Rasgele yazılar sol tarafta çıkan resimler 72 px. değelerinde olduğundan yazı açıklamalarını blogger’a göre ayarladım. Siz isterseniz değeleri değiştirebilirsiniz.

2. Kodlar hassasdır bu neden ile dikkatli kopyalayın ve diğerleri üzerinde oynama yapmayın.