Blogger Son Yazılar Eklentisi

ads

ads

Blogger Son Yazılar Eklentisi - Önceki   Anasayfa Sonraki Butonlu Şeklinde 

Bu  süper eklenti bloğunuza   yepyeni güzel bir  görünüm katacak blogger kullanıcıları için yapılmış özel olan bu eklenti ( kendiminde Kullandığım )  basit bir kaç kod eklemesiyle gerçekleştirebileceksiniz

Eklenti 100 tane son yazıların listesini vermektedir.  İleri  Geri  (  önceki + sonraki )  buton şeklinde  sitenizi ziyaret edenler  sayfadan ayrılmadan hemen hemen  bütün içeriklerinizi tek bir tıklama ile görebilecekler 100 dedim ama kod bilginiz var ise  100 rakamını istediğiniz rakam ile değiştirebilirsiniz Ör: 300  400 gibi 

                                                  Eklentiden Örnek Bir Görünüm

Canlı Demsona Sitemizin Ana Sayfasından' da Ulaşabilirsiniz.

Simdi Gelelim Eklentinin Kurulumuna :

1. Blogger Hesabımızla Giriş Yapıyoruz 
2. Her ihtimale karşı Temanızın Yedeğini Almayı Unutmayın  ( bunu alışkanlık haline getirin )
3. Kumanda Paneli>Şablon>Htmlyi Düzenle>Devam Et yolunu takip ederek HTMLkodlarımızın bulunduğu alana gelip widget şablonlarını genişlet kutucuğunu işaretliyoruz.
4. Html kodları içerisinde  ]]></b:skin> kodunu aratıp bulun.
5. Aşağıdaki kodu kopyalayıp bulduğunuz  ]]></b:skin> kodundan önceki kısma yapıştırın...

#mas-terbaru{border:1px solid #585858;width:100%;margin:0 auto}
#terbaru{margin:0px}
.mas-elemen{border:1px solid #ccc;margin:5px 0;padding:5px;height:79px}
.mas-elemen img{background:#999;padding:4px;float:left;height:70px;margin-right:8px;width:70px}
.mas-elemen h6,.mas-elemen h6 a{font-size:12px!important;font-weight:700!important;margin:0;color:#111}
.mas-elemen:hover{background-color:#c3c3c3}
.mas-elemen p{font:14px PT Sans Narrow;text-align:justify;color:#555;line-height:14px;margin:5px 0}
#mas-loading{color:#888;font-family:Tahoma;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444;background:#141414 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGLodCNomd6Rcb3OseB8w2OIHjPHfPX3yFba_hEx0z1qz-0z-SeTWrBjYunprtT3Pokksxg_1PWaavAUQgdLuemnbl_Z90Siy7vEsP2oEkiUxEfKH5HVkTkJlnYJhECKuW-tRW5U_oUXA/s1600/loading.gif) no-repeat 50% 50%;height:470px;border:1px solid #c3c3c3}
#mas-navigasifeed{border:1px solid #c3c3c3;color:#bbb;font-family:Verdana;font-size:12px;text-align:center;margin:0px}
#mas-navigasifeed:hover{background-color:#c3c3c3}
#mas-navigasifeed a{color:#141414!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px}
#mas-navigasifeed span{padding:5px 10px}
#mas-navigasifeed .next{float:right}
#mas-navigasifeed .previous{float:left}
#mas-navigasifeed .home{text-align:center}
#mas-navigasifeed a:hover,#mas-navigasifeed span.noactived{color:transparant!important}

burada koyu mavi renkle verdiğimiz değerler blogger son yazılar eklentisi içerisinde görünecek yazılarınıza ait küçük resmin boyutlarını belirtir, isterseniz değiştirebilirsiniz.
     6. Yine HTML kodları içerisnde </head> kodunu aratıp buluyoruz.Aşağıdaki kodu kopyalayıp bulduğumuz </head> kodundan önceki kısma yapıştırıyoruz...

<script type='text/javascript'>
//<![CDATA[
var numfeed = 5;
var startfeed = 0;
var urlblog = "http://www.ibrahimfirat.net";
var charac = 100;
var urlprevious, urlnext;

function maskolisfeed(johny,banget){
var showfeed = johny.split("<");
for(var i=0;i<showfeed.length;i++){
if(showfeed[i].indexOf(">")!=-1){
showfeed[i] = showfeed[i].substring(showfeed[i].indexOf(">")+1,showfeed[i].length);
}
}
showfeed =  showfeed.join("");
showfeed = showfeed.substring(0,banget-1);
return showfeed;
}
function showterbaru(json) {
var entry, posttitle, posturl, postimg, postcontent;
var showblogfeed = "";
urlprevious = "";
urlnext = "";
for (var k = 0; k < json.feed.link.length; k++) {
if (json.feed.link[k].rel == 'previous') {
urlprevious = json.feed.link[k].href;
}
if (json.feed.link[k].rel == 'next') {
urlnext = json.feed.link[k].href;
}
}
for (var i = 0; i < numfeed; i++) {
if (i == json.feed.entry.length) { break; }
entry = json.feed.entry[i];
posttitle = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
if ("content" in entry) {
postcontent = entry.content.$t;
} else if ("summary" in entry) {
postcontent = entry.summary.$t;
} else {
postcontent = "";
}
if ("media$thumbnail" in entry) {
postimg = entry.media$thumbnail.url;
} else {
postimg = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3WWGrqp8XQG3aNzbee7T6PeuNSnhFXcQ6JZoJtKxbqqDj4kkRJwNe3Qlt3kqSFZGUaS8PPg-3c9vx93fN5-kqjNL1lFpyp8iaDQAbqzcO1VlnI2PVq5Sy3ku7vJvDClwlMFpq7Djhi1oq/d/noimagethumb.gif";
}
showblogfeed += "<div class='mas-elemen'>";
showblogfeed += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
showblogfeed += "<h6><a href='" + posturl + "'>" + posttitle + "</a></h6>";
showblogfeed += "<p>" + maskolisfeed(postcontent,charac) + "...</p>";
showblogfeed += "</div>";
}
document.getElementById("terbaru").innerHTML = showblogfeed;
showblogfeed = "";
if(urlprevious) {
showblogfeed += "<a href='javascript:navigasifeed(-1);' class='previous'>&#9668; Önceki</a>";
} else {
showblogfeed += "<span class='noactived previous'>&#9668; Önceki</span>";
}
if(urlnext) {
showblogfeed += "<a href='javascript:navigasifeed(1);' class='next'>Sonraki &#9658;</a>";
} else {
showblogfeed += "<span class='noactived next'>Sonraki &#9658;</span>";
}
showblogfeed += "<a href='javascript:navigasifeed(0);' class='home'>Ana Sayfa</a>";
document.getElementById("mas-navigasifeed").innerHTML = showblogfeed;
}

function navigasifeed(url){
var p, parameter;
if(url==-1) {
p = urlprevious.indexOf("?");
parameter = urlprevious.substring(p);
} else if (url==1) {
p = urlnext.indexOf("?");
parameter = urlnext.substring(p);
} else {
parameter = "?start-index=1&max-results=" + numfeed + "&orderby=published&alt=json-in-script"
}
parameter += "&callback=showterbaru";
incluirscript(parameter);
}
function incluirscript(parameter) {
if(startfeed==1) {removerscript();}
document.getElementById("terbaru").innerHTML = "<div id='mas-loading'></div>";
document.getElementById("mas-navigasifeed").innerHTML = "";
var archievefeed = urlblog + "/feeds/posts/default"+ parameter;
var terbaru = document.createElement('script');
terbaru.setAttribute('type', 'text/javascript');
terbaru.setAttribute('src', archievefeed);
terbaru.setAttribute('id', 'MASLABEL');
document.getElementsByTagName('head')[0].appendChild(terbaru);
startfeed = 1;
}
function removerscript() {
var elemen = document.getElementById("MASLABEL");
var parent = elemen.parentNode;
parent.removeChild(elemen);
}
onload=function() { navigasifeed(0); }
//]]>
</script>

Kod içerisinde;
var numfeed = 5; Kutu içersinde görüntülenecek son yazı sayısı.
var urlblog = "http://www.ibrahimfirat.net/"; Blogunuzun URL si.
var charac = 100; Küçük resimlerin yanında bulunan açıklamaların uzunluğu/karakter sayısı.
    7.Kodları ekledikten sonra şablonumuzu kaydedip çıkıyoruz.
    8.Son olarak Yerleşim>Gadget Ekle>Html/Javascript yolunu takip edip aşağıdaki kodu kopyalayıp açılan gadget içerisine ekliyoruz...

<div id="terbaru"></div>
<div id="mas-navigasifeed"></div>

Daha sonra  kaydedip çıkıyor son yazılar eklentisi kullanıma hazır hala gelmiş oluyor..

Yapamaycanlar varsa yorumda yazarak bildirirlerse  yardımcı olurum.. İyi Günler..

ads