22 Temmuz 2015 Çarşamba

Blogger Navigasyonlu Son Yazılar Eklentisi

17 yorum
Bu aralar bol bol JavaScript ve bu scriptlerin Blogger’a uyarlanarak widget haline getirilmiş kodlarını araştırıyorum. Ve yine farklı, işlevsel, şık bir eklentiyi sizlerin kullanımına sunmak istiyorum.

Bu Blogger eklentisini blogunuzun sidebarına kolayca ekliyorsunuz ve blogunuzdaki son yazıları (siz kaç tane isterseniz) bir tablo olarak gösteriyor. Bu tabloda yazılarda kullanılan görsellerin küçültülmüş hali ile ilk birkaç karaketerden oluşan (kaç karakter olduğunu siz belirleyebiliyorsunuz) metin yer alıyor. Eklentiyi özel ve paylaşmaya değer kılan tarafı ise navigasyonlu olması. Bu ne demek hemen açıklayayım;

Widgetı eklediğinizde blogunuzda son 5 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 yazıları da kolayca görüntüleyebilirler.

blogger navigasyonlu son yazılar eklentisi

Gelelim bu eklentiyi blogunuza nasıl ekleyeceğinize. Blogger kumanda panelinize giriş yaptıktan sonra Yerleşim > Gadget Ekle > HML/JavaScript yolunu takip edin ve açılan kutuya aşağıdaki kodları yapıştırın.

<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(http://2.bp.blogspot.com/-60aISBQLRY0/VFBMqzLfzGI/AAAAAAAABgM/GInmVTvEzkc/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 = 5;
    var startfeed = 0;
    var urlblog = "http://bloghocam.blogspot.com";

    var charac = 40;
    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:"
http://3.bp.blogspot.com/-BHuXHny1kOk/VXrkSyxKCjI/AAAAAAAACas/pZLJAEUDtds/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://bloghocam.blogspot.com yazan yere kendi blog adresinizi yazın yoksa BH’deki son yazıları gösterirsiniz :)

İsteğe bağlı olarak şu değişiklikleri de yapabilirsiniz,
5: Ana tabloda son 5 yazının gösterileceğini belirtir.
40: Tabloda yazıların ilk 40 karakterinin gösterileceğini belirtir.

17 yorum:

  1. Kullanışlı ve şık bir widget :)

    YanıtlaSil
  2. Url'ye haber sitesinin adresi yazılarak blogda haberlerle ilgili bölümde oluşturulabilir :) güzelmiş.

    YanıtlaSil
  3. Güzelmiş, kullandım, emeğiniz için teşekkürler.

    Sevgiler.

    YanıtlaSil
  4. Son yazılar eklentisine bir türlü anlam veremiyorum yahu O.o Mesela sidebara son yazıları neden koyuyoruzki, zaten anasayfada görünüyor :D Ama navigasyon linkleri işe yarayabilir. O güzelmiş.

    YanıtlaSil
    Yanıtlar
    1. Neden anlam veremiyorsunuz.en önemlisi yeni kayıtlardır aslında farz edin kullanıcı googleden xxx aradı ve blog.com/xxx kaydınıza ulaştı bu kayıtdayken anasayfayı göremez ama widgetleri görür basit anlatmaya çalıştım kolay gelsin

      Sil
  5. Sedar Bey ;

    Bu gibi yazılarda genelde yaptığınız gibi demo linki verseniz güzel olur,
    Bende mesela güzel durmadı,benle alakalı olabilir karşılaştırmak anlamında ;

    Ama ben kullanmayı düşünmüyorum,




    YanıtlaSil
  6. Merhabalar Hocam, Eklenti güzel bir de bunun slider şeklinde olanı var bu da çok şık duruyor onuda ben yaptım bu şekilde isteyen arkadaşlar için http://blogbakkali.blogspot.com.tr/2015/07/blogger-slider-duyarli-son-yazilar-yapma.html

    YanıtlaSil
  7. Paylaşım için teşekkürler. Güzel bir eklenti.

    YanıtlaSil
  8. İşte ben bunu arıyordum, Allah razı olsun Hocam...

    YanıtlaSil
  9. Güzelmiş vallahi en kısa zamanda deneyeceğim :)

    YanıtlaSil
  10. Benzer şekilde, "Benzer Yazılar" eklentisi için bir paylaşımınız olsa çok güzel olurdu. Blogger ın kendi eklentisi başarısız

    YanıtlaSil
  11. teşekkürler hocam .benzer yazılar eklentisi varsa paylaşabilirmisiz MEHMETGECER.COM

    YanıtlaSil
  12. Serdar hocam ben bunu bir türlü kuramadım..Şuan başka bir eklenti buldum onu kullanıyorum son yazılar eklentisi olarak.Merak edenler nickimin üzerine tıklayıp siteden benimle iletişime geçebilirler.Yardımcı olurum kod konusunda

    YanıtlaSil
  13. Teşekkürler hocam

    YanıtlaSil
  14. kullanışlı ve iyi bir blog uygulaması teşekkürler
    http://merkezihersey.blogspot.com.tr/

    YanıtlaSil
  15. Merhaba Serdar Kara

    bloggerın etiketler servisi en fazla 10 kayıt gösteriyor idi

    bu nedenle bu fonksiyon daha fazlasına yer vermek için faydalı oldu

    birkaç küçük değişiklikle uyguladım

    teşekkür ederim

    http://www.nehissettinseo.com

    YanıtlaSil

Picardes

LİNKLER