Blogger Navigasyonlu Son Yazılar Eklentisi
Bu Blogger eklentisini blogunuzun sidebarına kolayca ekliyorsunuz ve blogunuzdaki son yazıları (birazdan vereceğimiz kodda sadece rakam değiştirerek istediğiniz kadar ekleyebiliyorsunuz) bir tablo olarak gösteriyor. Bu tabloda yazınızla ilgili küçük bir resim ve sınırını siz belirlediğiniz yazı ile ilgili açıklama metni yer alıyor. Eklenti navigasyonlu olması ilgimi çekiyor. Navigasyonlu olması neyimi ifade ediyor işte buyrun;

Widgeti eklediğinizde blogunuzda son 7 yazı tablo olarak görünecektir. Okuyucuyu blogda tutabilmek ve eski yazılarınızı kolayca incelemelerini sağlamak için tablonun altında “Önceki – Başlangıç – Sonraki” gibi navigasyon linkleri var. Ziyaretçiler bu navigasyon linklerini kullanarak daha önceki yada sonraki yazıları da kolayca görüntüleyebiliyorlar.






<style scoped='' type='text/css'> 
#recentpostnav{border:1px solid #585858;width:100%;margin:0 auto} 
#recentpostsae{margin:0} 
.recentpostel{background:#fff;display:block;border:1px solid #ddd;margin:5px 0;padding:10px;height:79px} 
.recentpostel img{background:#fff;padding:4px;float:left;height:70px;margin-right:8px;width:70px;border:1px solid #ddd} 
.recentpostel h6,.recentpostel h6 a{text-decoration:none;font-size:13px!important;font-weight:700!important;margin:0;color:#111} 
.recentpostel:hover{background-color:#fefefe} 
.recentpostel p{font-size:12px;text-align:left;color:#555;line-height:normal;margin:5px 0} 
#recentpostload{color:#888;font-family:Tahoma;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBKSMi2_ii2M791FTR3Ai7T8llXRSlIAci4Mojyh_qgxAAdAuNb1KLC6aEvll3rHBGRe_AmDfnmkFt2iYwP-OIML-qwQ-9TGTabnUN3E_wvnso0dG-VHh2afA9CXYX211VeDmMAnPCKcxg/s1600/loader.gif) 50% 50% no-repeat #fff;height:470px;border:1px solid #ddd} 
#recentpostnavfeed{border:1px solid #ddd;color:#bbb;font-family:Verdana;font-size:12px;text-align:center;margin:0} 
#recentpostnavfeed:hover{background-color:#fefefe} 
#recentpostnavfeed a{color:#141414!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px} 
#recentpostnavfeed span{padding:5px 10px} 
#recentpostnavfeed .next{float:right} 
#recentpostnavfeed .previous{float:left} 
#recentpostnavfeed .home{text-align:center} 
#recentpostnavfeed a:hover,#recentpostnavfeed span.noactived{color:transparant!important} 
</style> 
<script type='text/javascript'> 
//<![CDATA[ 
    var numfeed = 7; 
    var startfeed = 0; 
    var urlblog = "http://teknopixel.com"; 
    var charac = 45; 
    var urlprevious, urlnext; 
function arlinafeed(e,t){for(var n=e.split("<"),r=0;r<n.length;r++)-1!=n[r].indexOf(">")&&(n[r]=n[r].substring(n[r].indexOf(">")+1,n[r].length));return n=n.join(""),n=n.substring(0,t-1)}function showrecentpostsae(e){var t,n,r,a,i,s="";urlprevious="",urlnext="";for(var l=0;l<e.feed.link.length;l++)"previous"==e.feed.link[l].rel&&(urlprevious=e.feed.link[l].href),"next"==e.feed.link[l].rel&&(urlnext=e.feed.link[l].href);for(var d=0;d<numfeed&&d!=e.feed.entry.length;d++){t=e.feed.entry[d],n=t.title.$t;for(var l=0;l<t.link.length;l++)if("alternate"==t.link[l].rel){r=t.link[l].href;break}i="content"in t?t.content.$t:"summary"in t?t.summary.$t:"",a="media$thumbnail"in t?t.media$thumbnail.url:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD8WWUq9m8Y07wqvfa5chKITQCMa0ta8Y7F9F2SD6NawoC4Mqd6HbiWpJiMkhcR7ojQpOGzsV5FFL51R3d4dEp3OeJk8yTkhdZalkbMd1TGdP_HgQiBXBtxLfa8-wCYoDSwfpOsvYPYzWn/s1600/no-image.png",s+="<div class='recentpostel'>",s+="<a href='"+r+"' target='_blank'><img src='"+a+"' /></a>",s+="<h6><a href='"+r+"'>"+n+"</a></h6>",s+="<p>"+arlinafeed(i,charac)+"...</p>",s+="</div>"}document.getElementById("recentpostsae").innerHTML=s,s="",s+=urlprevious?"<a href='javascript:navigasifeed(-1);' class='previous'>Önceki</a>":"<span class='noactived previous'>Önceki</span>",s+=urlnext?"<a href='javascript:navigasifeed(1);' class='next'>Sonraki</a>":"<span class='noactived next'>Sonraki</span>",s+="<a href='javascript:navigasifeed(0);' class='home'>Başlangıç</a>",document.getElementById("recentpostnavfeed").innerHTML=s}function navigasifeed(e){var t,n;-1==e?(t=urlprevious.indexOf("?"),n=urlprevious.substring(t)):1==e?(t=urlnext.indexOf("?"),n=urlnext.substring(t)):n="?start-index=1&max-results="+numfeed+"&orderby=published&alt=json-in-script",n+="&callback=showrecentpostsae",incluirscript(n)}function incluirscript(e){1==startfeed&&removerscript(),document.getElementById("recentpostsae").innerHTML="<div id='recentpostload'></div>",document.getElementById("recentpostnavfeed").innerHTML="";var t=urlblog+"/feeds/posts/default"+e,n=document.createElement("script");n.setAttribute("type","text/javascript"),n.setAttribute("src",t),n.setAttribute("id","arlinalabel"),document.getElementsByTagName("head")[0].appendChild(n),startfeed=1}function removerscript(){var e=document.getElementById("arlinalabel"),t=e.parentNode;t.removeChild(e)}onload=function(){navigasifeed(0)}; 
//]]> 
</script> 
<div id="recentpostsae"></div> 
<div id="recentpostnavfeed"></div>




Kodlarda değiştirmeniz gereken tek yer blog url kısmı. http://teknopixel.com yazan yere kendi blog adresinizi yazın yoksa benim sitemdeki son yazıları görürsünüz İsteğe bağlı olarak şu değişiklikleri de yapabilirsiniz, var numfeed = 7: Ana tabloda son 7 yazının gösterileceğini belirtir. var charac = 45: Tabloda yazıların ilk 45 karakterinin gösterileceğini belirtir.
Etiketler:

Yorum Gönder

ivythemes

{picture#YOUR_PROFILE_PICTURE_URL} YOUR_PROFILE_DESCRIPTION {facebook#http://facebook.com/officialteknopixel} {twitter#http://twitter.com/teknopixel} {google#plus.google.com/+Teknopixel} {pinterest#YOUR_SOCIAL_PROFILE_URL} {youtube#YOUR_SOCIAL_PROFILE_URL} {instagram#http://instagram.com/umtcndn}

Image 1 Title

Image 1 Title aılsdoasıhdoısad

Image 2 Title

Image 2 Title wadda

İletişim Formu

Ad

E-posta *

Mesaj *

Blogger tarafından desteklenmektedir.
pre{ font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace; color: #000000; background-color: #eee; font-size: 12px; border: 1px dashed #999999; line-height: 14px; padding: 5px; overflow: auto; width: 100% }