Archive for 08/04/12

Blogger Son Yazilar Eklentisi (Önceki-Sonraki Butonlu)

Blog Okulu 18:39:00 10 Yorumlar Edit

DEMO GÖRÜNÜMBlogger 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;

Blogger Hesabımızla Giriş Yapıyoruz
Her ihtimale karşı şablonumuzun yedeğini alalım.
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.
Html kodları içerisinde ]]></b:skin> kodunu aratıp bulun.
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/AVvXsEiS18hlapKJ5rLaqXPjDddgJzC4YulFmuQ3BaBxTxoMHF0ho9TYCpv8QSYuEjuEry-AuCzITFPWhG3X0RlOFtgdfWBYtWL0QRQvKdzg0Ln0fUROgDQpchtmuJaR5M6dKaxYzodJT2J6PCo/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 = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjajsDjHCfiSiPzGFu57J5rpHFUIx0aYZZ0NwDb87QHRYl8frKZUU7gMOlJ5QdDcExRZqsA-_C41pgPdFc3Z1mPv9P0b38eB_2sd_Tyw2x_vMc6pcG2ZOlEFpYy5K8EbMTRBDEclc-BM14/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.

Devamını Oku