JavaScript ile çok çeşitli eklentiler geliştirebilmek mümkündür. Örneğin, her sayfa yenilendiğinde değişen yazılar göstermek isteyebilirsiniz. Blogunuzdaki öne çıkan yayınları, her sayfa yenilendiğinde değişecek şekilde ve yazar adı da görüntülenecek bir biçimde göstermek iyi bir fikir olabilir. Manuel olarak. Bu yönde sizlerle sorunsuz bir kod dizisi paylaşıyor olacağım. Dilerseniz Blogger'da, dilerseniz WordPress üzerinde ilgili kodları sorunsuz bir şekilde kullanabilirsiniz. O hâlde hemen ilgili kodlara göz atıyor olacağız.

AYRICA: JavaScript ile Sayfa Yenilendiğinde Rastgele Söz Gösterelim

JavaScript ile "Sayfa Yenilendiğinde Değişen Yazılar" Nasıl Yapılır?

1) Temanızın CSS bölümüne aşağıdaki kodları ekleyin.

#random_yazilarbilgi {margin-top:25px;width:100%;display:inline-block}.benikapsala{border-top:2px solid #ddd;border-bottom:2px solid #ddd;width:100%;display: flex;justify-content: center;align-items: center;margin:0 auto;box-sizing:border-box;line-height:1.7em;background-color: #fff;color: #444;padding-left:20px;padding-right:20px;padding-top:15px;padding-bottom:15px;text-align:center;}.benikapsala span{line-height:1.7em;background-color:#c9302c;border-radius: 2px;color: #fff;font-weight:bold;font-size:14px;margin-right:20px;padding-left:15px;padding-right:15px;padding-top:5px;padding-bottom:5px}.benikapsala a{font-weight:bold;line-height:1.7em;color: #444}.benikapsala a:hover{color: #444}.benikapsala p{font-size:14px}

2) HTML bölümüne ise aşağıdaki kodları ekleyin.

<div id='random_yazilarbilgi'></div>

3) Son olarak da "body" etiketinden önce aşağıdaki kodları ekleyin.

<script type='text/javascript'>
dquote();
function dquote(){
var quotes = [
{name:"Yazar Adı 1", quote:'<a href="#" title="Başlık 1">Başlık 1</a>'},
{name:"Yazar Adı 2", quote:'<a href="#" title="Başlık 2">Başlık 2</a>'},
{name:"Yazar Adı 3", quote:'<a href="#" title="Başlık 3">Başlık 3</a>'},
{name:"Yazar Adı 4", quote:'<a href="#" title="Başlık 4">Başlık 4</a>'},
{name:"Yazar Adı 5", quote:'<a href="#" title="Başlık 5">Başlık 5</a>'},
];
var dquote = quotes[Math.floor(Math.random() * quotes.length)];
var html = '<div class="benikapsala">' +
'<span>'+dquote['name']+'</span>' +
'<p>'+dquote['quote']+'</p>' +
'</div>';
$('#random_yazilarbilgi').html(html);
}
</script>

Not: Yukarıdaki kodlarda yer alan kırmızı alanları, kendinize göre değiştirmeyi lütfen unutmayınız. İlgili eklentiye ait örnek bir görüntü ise hemen aşağıdadır.