Yayıncılarının kullanmaktan çok hoşlandığı blogger eklentileri arasında yer alan Rastgele Yayınlar Widget'i oluşturmak. Bu yazımızda sade kullanımı kolay rastgele yayınlar eklentisi hakkında bilgiler paylaşıyorum.
Blogger Rastgele Yayınlar Widget
Öncelikle bu eklentiyi kimler kullanabilir ondan bahsedeyim. Blogger sitesinde rastgele yayınlar eklentsi olmayanlar ve ya olmasına rağmen beğenmeyenler rahatlıkla kullanabilirler.
Bu eklentimiz HTML5, HTTPS ve üçüncü taraf bir siteden image ekleyebilmenize imkan sağlayacak şekilde tasarlanmış. Kurulum esnasında dikkat etmeniz gereken detayları adım adım anlatıyorum.
Ayrıca yazımın altında blogger sitelerinizde kullanacağınız bazı bilgileri ekliyorum göz atmayı unutmayın.
Widget kurulumuna başlamadan önce mutlaka blogger sitenizin yedeğini alın. İşlemlere başlamadan önce tüm yazıyı en az bir kere okuyun ve daha sonra adımları uygulamaya başlayın.
Yapamıyacağınız düşünürseniz bizimle iletişime geçmekten çekinmeyin. Her zaman destek olmak için yanınızda olacağız.
Sitenizde kullanabileceğiniz daha fazla bilgiye sahip olmak için Blogger Eklentileri sayfamızı ziyaret edebilirsiniz.
Ayrıca yazılarımızın daha fazla kişiye ulaşarak faydalananların sayısını artırmak için bizi destekleyerek sosyal medya üzerinden paylaşabilirsiniz.
Kurulumumuz 3 basit aşamadan oluşacak başlamadan önce site yedeğini almanızı tekrar hatırlatarak kurulum için gerekli bilgileri sıralıyorum.
Rastgele Yayınlar Widget Kurulumu
Adım 1
Aşağıdaki kodu blogger sitenize ekliyoruz. Kodu ekliyeceğiniz yer
Blogger kontrol paneli ==> HTML Düzenle kısmına geliyoruz,
sitenizle alakalı kodlar karşınıza çıkmış olacak.
Bu alanda CTRL + F tuş kombinasyonu ile </style> kodunu bulup gerekli kodları bir satır üstüne ekliyoruz.
Kodları yanlış alana eklediğinizi düşünüyorsanız CTRL + Z tuşlarını kullanarak yapmış olduğunuz işlemi geri alabilirsiniz.
#randomposts{padding:10px 10px 0}
#randomposts .random_item{margin:0 10px 10px 0;display:block;float:left;width:calc(50% - 10px);height:auto;}
#randomposts .random_items,#randomposts .random_item:nth-child(odd),#randomposts .random_item .clear{clear:both;}
#randomposts .random_items{margin-right:-10px;}
#randomposts .url_item{display:block;text-decoration:none;}
#randomposts .img_item {display:block;margin-bottom:5px;padding:0;width:100%;height:auto;transition:all 400ms ease-in-out;}
#randomposts .random_item:hover .img_item{opacity:.7;}.
#randomposts .title_item{display:block;padding-right:10px;text-align:left;margin:0;color:#000;font-weight:400;line-height:1.1;transition:all 400ms ease-in-out;}
#randomposts .random_item:hover .title_item{color:#555;}Adım 2
Kodların sitenizde gözükmesini istediğiniz ( sidebar ) alana javascript/HTML widget'i ile aşağıda paylaşacağım kodları ekleyip kendinize göre ayarlayabilirsiniz.
<div id='randomposts'>
<script>
//<![CDATA[
var maxresults=6;var randomTitles=new Array();var randomTitlesNum=0;var randomUrls=new Array();var thumburl=new Array();function random_results_labels_thumbs(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];randomTitles[randomTitlesNum]=entry.title.$t;try{thumburl[randomTitlesNum]=entry.gform_foot.url}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl[randomTitlesNum]=d.replace(/.*?:\/\//g, "//")}else thumburl[randomTitlesNum]='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC'}if(randomTitles[randomTitlesNum].length>300)randomTitles[randomTitlesNum]=randomTitles[randomTitlesNum].substring(0,300)+"";for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){randomUrls[randomTitlesNum]=entry.link[k].href;randomTitlesNum++}}}}function printRandomLabels_thumbs(){var r=Math.floor((randomTitles.length-1)*Math.random());var i=0;if(randomTitles.length>0)document.write('<div class="random_items"/>');while(i<randomTitles.length&&i<20&&i<maxresults){document.write('<div class="random_item"><a class="url_item');if(i!=0)document.write('"');else document.write('"');document.write(' href="'+randomUrls[r]+'" title="'+randomTitles[r]+'"><img class="img_item lazyload" alt="'+randomTitles[r]+'" width="16" data-src="'+thumburl[r]+'" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJAQMAAAAB5D5xAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCNdjwA0AABsAAQrj5HwAAAAASUVORK5CYII=" title="'+randomTitles[r]+'" height="9" loading="lazy"/><div class="clear"></div><div class="title_item">'+randomTitles[r]+'</div></a></div>');if(r<randomTitles.length-1){r++}else{r=0}i++}document.write('<div class="clear"></div></div>');randomUrls.splice(0,randomUrls.length);thumburl.splice(0,thumburl.length);randomTitles.splice(0,randomTitles.length)}
var script=document.createElement('script');script.setAttribute('src', '/feeds/posts/default?alt=json-in-script&orderby=updated&callback=random_results_labels_thumbs&max-results=9999');document.write(script.outerHTML);
//]]>
</script>
<script>
printRandomLabels_thumbs();
</script>
</div>Adım 3
2. adımda işartlemiş olduğum alanlar kendinize göre ayarlama yapmanız için gerekli bilgileri paylaşıyorum.
maxresults=6;var ile işaretlenmiş bölümdeki "6" yayınınızda gözükecek yazı sayısını ifade etmektedir. Bu alanı kendi sitenize uygun olarak çoğaltabilirsiniz.
Blogger sitenizde lazysizes.js kullanarak resim yüklemelerini geciktirerek sitenizi hızlandırıyorsanız kod üzerinde her hangi bir değişiklik yapmanız gerekmez. Ancak lazysizes.js kullanmıyorsanız aşağıda vereceğim kodu düzenlemeniz gerekmektedir.
<img class="img_item lazyload" alt="'+randomTitles[r]+'" width="16" data-src="'+thumburl[r]+'" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJAQMAAAAB5D5xAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCNdjwA0AABsAAQrj5HwAAAAASUVORK5CYII=" title="'+randomTitles[r]+'" height="9" loading="lazy"/>
Yerine eklenecek olan kod
<img class="img_item" alt="'+randomTitles[r]+'" width="16" src="'+thumburl[r]+'" title="'+randomTitles[r]+'" height="9" loading="lazy"/>
Yukarıda anlattıklarımı sırasıyla yapmayı başarmışsanız blogger eklentisi sorunsuz olarak çalışacaktır.
Rastgele Yayınlar Widget'i ile ilgili sorularınız için yorum bölümünden destek isteyebilirsiniz.
Blogger sitenizde kullanmak isteyeceğiniz bazı özelllikleri sizler için derledik.
- Blogger Site Hızlandırma Kodları
- Mobil Sayfa Özel Reklam Alanı
- Bedava Backlink Alınacak Siteler
- Seo Uyumlu Link Yapısı Nasıl Olur?
Bir yazımızın daha sonuna geldik umarım paylaştıklarım işinize yaramıştır. Bir başka yazımızda görüşmek.
İYİ BLOGLAR . . .
