Bumerang - Yazarkafe

Blogger Son Yazilar Eklentisi (Önceki-Sonraki Butonlu)

DEMO GÖRÜNÜM
Blogger Son Yazılar eklentisi hakkında daha önceden yayınladığım eklentide yazı adedini fazla seçtiğimizde, eklenti çarşaf liste gibi uzayıp gidiyordu.Şimdi yayınlayacağımız blogger son yazılar eklentisinde ise istediğiniz kadar yazı seçin, isterseniz 100 tane son yazı seçin ama ana sayfada kutu içerisinde görünecek yazı sayısı, yine sizin ayrıca belirleyeceğiniz sayı kadar olacak  diğer yayınları ziyaretçi isterse ana sayfadan ayrılmadan eklentinin altında bulunan sonraki ve önceki linklerine tıklayıp görebilecek ve böylelikle daha fazla son yazıyı daha az yer kaplayarak ana sayada gösterme imkanınız olacak.
Blogger Son Yazılar Eklentisini blogunuza eklemek için;
  1. Blogger Hesabımızla Giriş Yapıyoruz 
  2. Her ihtimale karşı şablonumuzun yedeğini alalım.
  3. Kumanda Paneli>Şablon>Htmlyi Düzenle>Devam Et yolunu takip ederek HTML kodları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(http://1.bp.blogspot.com/-vBDcLG_CXzU/UBqEMTknKcI/AAAAAAAAIHE/pZTfBZLbPwY/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://blogokulu.org";
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 = "http://lh3.ggpht.com/_xcD4JK_dIjU/SnamIh0KTCI/AAAAAAAADMA/hLjqmEbdtkw/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://blogokulu.org/"; 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>

Gadgeti kaydedip çıkıyoruz.Blogger son Yazılar Eklentimiz kullanıma hazır.
PAYLAŞ

BLOG OKULU

Merhabalar, 2012 yılından beri editörlüğünü yaptığım blogokulu.org sitesinde blogger kullanıcıları için gerekli olan bir çok bilgiyi bulabilrsiniz.Blogger temaları,blogger eklentileri ve blogger dersleri ile blog yazarlarına elimizden geldiğince yardımcı olmaya çalışıyoruz.

  • Image
  • Image
  • Image
  • Image
  • Image
    Disqus Yorumları
    Facebook Yorumları

10 yorum:

  1. hocam teşekkür ederim...Size mail attım rica etsem bakar mısınız?

    YanıtlayınSil
  2.  ]]></b:skin> Kodu yok bende

    YanıtlayınSil
  3. widget şablonlarını genişlet kutucuğunu işaretleyip öyle aratın yada sadece b:skindiye yazıp aratın mutlaka vardır.

    YanıtlayınSil
  4. İyi günler, sadece önceki kayıt, sonraki kayıt butonunu nasıl ekleyebiliriz. Teşekkür ederim.

    YanıtlayınSil
  5. Resimleri göstermeme nedeni nedir ?

    YanıtlayınSil
  6. Ibrahimkayadibi0721 Eylül 2012 16:54

    hocam resimler gösterilmiyor bir bakarmısınız acaba

    YanıtlayınSil
  7. vidnet şablonlarını genişlete tıkla görünür

    YanıtlayınSil
  8. Resimleri Göstermiyor< ?

    YanıtlayınSil
  9.  6.adımda verdiğim kod içerisinde kırmızı ile belirttiğim yere kendi site linkinizi yazdınızmı?Eğer resimleri tablo kodu içerisine yerleştirdiyseniz bundan dolayı da göstermeyebilir.Kodları dikkatlice uygulayın görünecektir çünkü demo görünümde resimler görünüyor?

    YanıtlayınSil
  10. Merhaba YAzı Başlıklarını ve içindeki yazıların renklerini nereden değiştirebiliriz ?

    YanıtlayınSil

Belirtmek istediğiniz farklı konular varsa Burdan Yazabilrisiniz...