1/16/2015

Blogger Küçük Ebatlı Rasgele Yayınlar Eklentisi

Blogger tema şablonunu üç sütun, iki sidebar olarak kullananlar için sol tarafta bulunan dar sidebar sütunda kullanılabilen sadece resim ve başlık linkinden oluşan Popüler yazılar benzeri küçük ebatlı Rasgele yazılar eklentisi. Blog’unuzun sağ tarafında bulunan sidebar alanında kullanabileceğiniz büyük boy Rasgele yayınlar eklenti yazımın hemen ardından, üç sütun blogger temanızın sol sidebar alanında bu eklentiyi kullanabileceksiniz. Blogger temanızın sol sidebar 200 px. dar alana eklentinin sığabilmesi için resimler biraz küçültüldü ve ve sadece yazı başlık linki bırakıldı. Açıklama kısmı görüntüyü bozduğundan pasif konuma alındı. CSS kodları ve Gadget içine ekleyeceğiniz eklenti Css ve Html kodları olmak üzere iki şekilde ekleniyor. Blog temanızın sol kısmındaki Sidebar’ın genişliğini ve yazı başlık bağlantı link yazı font değerlerini de ayrıca ayarlayabileceksiniz. 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. Eklentinin nasıl görüldüğünü benim de kullandığım Adnan Güney isimli klasik blog’undan ve Guney13 test blog’umdan inceleyebilirsiniz. Demoların bazen değişebileceğini unutmayın.
Blogger rasgele yayınlar eklenti uygulamaları :
1. Blogger kumanda peneline giriş yapın.
2. Şablon kodlarınızı bozmayacağından şablon yedeğinizi almanıza gerek duymuyorum.  Ancak tereddüt ediyorsanız blog’unuzun yedeğini alabilirsiniz. Bilmeyenler için ; Blogger nasıl yedeklenir okuyun.
3. ŞablonÖzelleştirGeliş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:180px}
#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 180 px. sidebar genişlik ayarıdır. Blog’unuzun sidebar’ında taşma oluşursa bu değeri değiştirin. Sidebarınızın genişliğine göre birkaç deneme yapabilirsiniz.
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ı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 renk ismi için siz istediğinizi 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şimGadget ekleHtml/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://adnanguney.blogspot.com',
 maxResults = 7,
 summaryLength = 0,
 noImageUrl = 'http://3.bp.blogspot.com/-_U5cQwKj03I/UoY31u4GqqI/AAAAAAAAAAA/m3ZCKVhD2vc/s40-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)?/, "/s40-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="40" height="40">';
  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>
<div style="font-size:10px;text-align: center;">By <a href="https://guney59.blogspot.com.tr/2015/01/blogger-kucuk-ebatl-rasgele-yaynlar.html"target="_blank"> Adnan Güney Gadgeti Al</a></div>
Özelleştirme :
1. Kodlar içinde alt alta 2 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.
2. Kodlar hassasdır bu neden ile dikkatli kopyalayın ve diğerleri üzerinde oynama yapmayın.