Blogger için geliştirilen geçmişten günümüze birçok rastgele yazı eklentisi mevcut. Ancak ben sizlerle site hızını hiçbir şekilde etkilemeyecek, anlık tepki veren ve JavaScript - CSS ve HTML ile kodlanmış olan bir rastgele yazı butonu eklentisi paylaşıyor olacağım. Böylelikle ilgili eklenti, sayfalar haricinde, sadece yazılar içerisinde, ilgili butona tıkladığınız zaman rastgele bir yazı gösterecektir. Dilerseniz lafı fazla uzatmadan, ilgili adımlara ve kodlara göz atıyor olacağız.

AYRICA: Blogger'da "Steve Jobs Sözleri" Eklentisi Nasıl Yapılır?

Blogger için Rastgele Yazı Eklentisi

1) Temanızın "body" etiketinden önce aşağıdaki kodları ekleyin.

<script type='text/javascript'>
//<![CDATA[
function showLucky(root){
var feed = root.feed;
var entries = feed.entry || [];
var entry = feed.entry[0];
for (var j = 0; j < entry.link.length; ++j) {
if (entry.link[j].rel == "alternate") {
window.location = entry.link[j].href;
}
}
}
function fetchLuck(luck){
script = document.createElement('script');
script.src = '/feeds/posts/summary?start-index='+luck+'&max-results=1&alt=json-in-script&callback=showLucky';
script.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(script);
}
function readLucky(root){
var feed = root.feed;
var total = parseInt(feed.openSearch$totalResults.$t,10);
var luckyNumber = Math.floor(Math.random()*total);
luckyNumber++;
fetchLuck(luckyNumber);
}
function rastgeleyazi(){
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = '/feeds/posts/summary?max-results=0&alt=json-in-script&callback=readLucky';
document.getElementsByTagName('head')[0].appendChild(script);
}
//]]>
</script>


2) Ardından temanızın CSS bölümüne aşağıdaki kodları ekleyiniz.

.favori a{max-width:100%;line-height:2em;padding:50px;background:#337ab7 url(https://resources.blogblog.com/blogblog/data/1kt/transparent/header_gradient_shade.png) repeat-x scroll top left;width:100%;text-align:center;box-sizing:border-box;display:block;font-size:25px}
@media only screen and (max-width: 240px) {
.favori a{padding:20px!important;}
.favori a:after{font-size:50px}
}
@media only screen and (max-width: 140px) {
.favori a{padding:10px!important}
.favori a:after{font-size:25px}
}


3) Son olarak dilediğiniz alana aşağıdaki kodları ekleyebilirsiniz.

<div class='favori'>
<a href='#rastgele' onclick='rastgeleyazi()' title='Rastgele'>Rastgele Yazı</a>
</div>