5 Oktober 2016

cara buat recent post blog paling keren dan mudah

selamat datang setelah lama gak di update karena blog satunya akhirnya saya merasa sudah saatnya kembali aktif mengurusi blog ini…

pada kesempatan kali ini tanpa basi basi lagi saya mau membagikan cara membuat recent post warna warni yang super keren dan jarang ditemukan..
widget recent post atau tulisan terbaru bermanfaat memberikan informasi kepada pengunjung, mana saja sih tulisan terbaru yang ada di blog kita, maksudnya recent post ini nantinya aka memanggil feed dari postingan terakhir suatu blog.

hal ini akan membantu posting terbaru mendapat perhatian lebih jadi sekalian memudahkan kita dalam mempromoskan tulisan.

kelebihannya recent post ini sebagai berikut:

  • simple
  • warna warni
  • responsive
  • mudah digunakan
  • ada efek animasi loading
  • jumlah artikel bisa disesuaikan
  • ada trumbnailnya
  • descripsi bisa di tentukan jumlahnya.
  • cakep 
  • dan lain lain

contohnya tampilannya kurang lebih seperti gambar dibawh ini

recent post blog keren dan mudah

kodenya

<div id=”recentpostsae”></div>
    <div id=”recentpostnavfeed”></div>
    <script type=’text/javascript’>
    //<![CDATA[
        var numfeed = 7;
        var startfeed = ;
        var urlblog = “https://www.berwirausaha.net“;
        var charac = 20;
        var urlprevious, urlnext;
function masukakalfeed(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>”+masukakalfeed(i,charac)+”…</p>”,s+=”</div>”}document.getElementById(“recentpostsae”).innerHTML=s,s=””,s+=urlprevious?”<a href=’javascript:navigasifeed(-1);’ class=’previous’>Previous</a>”:”<span class=’noactived previous’>Previous</span>”,s+=urlnext?”<a href=’javascript:navigasifeed(1);’ class=’next’>Next</a>”:”<span class=’noactived next’>Next</span>”,s+=”<a href=’javascript:navigasifeed(0);’ class=’home’>Home</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”,”masukakallabel”),document.getElementsByTagName(“head”)[0].appendChild(n),startfeed=1}function removerscript(){var e=document.getElementById(“masukakallabel”),t=e.parentNode;t.removeChild(e)}onload=function(){navigasifeed(0)};
    //]]>
    </script>
    <style>
    #recentpostnav{border:1px solid #000;width:100%;margin:0 auto;}
    #recentpostsae{margin:0}
    .recentpostel{background:#333;display:block;border:2px solid #111;margin:5px 0;padding:10px;height:79px;}
    .recentpostel img{background:#222;padding:5px;float:left;height:70px;margin-right:8px;width:70px;border-radius:5px;}
    .recentpostel h6,.recentpostel h6 a{text-decoration:none;font-size:14px!important;font-weight:700!important;margin:0;color:#000;}
    .recentpostel:nth-child(1n+0) {background: #F49A9A;}
    .recentpostel:nth-child(2n+0) {background: #FCD092;}
    .recentpostel:nth-child(3n+0) {background: #FFF59E;}
    .recentpostel:nth-child(4n+0) {background: #E1EFA0;}
    .recentpostel:nth-child(5n+0) {background: #B1DAEF

;}
    #recentpostload{color:#888;font-family:Tahoma;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444;background:url(https://2.bp.blogspot.com/-60aISBQLRY0/VFBMqzLfzGI/AAAAAAAABgM/GInmVTvEzkc/s1600/loader.gif) 50% 50% no-repeat #F49A9A;height:470px;border:1px solid #111}
    #recentpostnavfeed{border:2px solid #000;color:#111;background:#F49A9A;font-family:Verdana;font-size:12px;text-align:center;margin:0}
    #recentpostnavfeed:hover{background-color:#FCD092;}
    #recentpostnavfeed a{color:#111!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>

cara pakenya seperti berikut ini:

  1. pertama masuk ke blog anda
  2. pada menu tata letak – pilih tambah gedget – html/javascript
  3. tinggal paste kode diatas dan ganti tulisan https://www.berwirausaha.net dengan url blog kamu…
  4. save.
  5. done
Baca juga >>  cara membuat navigasi sederhana asli bawaan blog

keterangan tambahan :

var numfeed = 7; jumlah artikel yang akan di tampilkan, silahkan ganti seseuai  keinginan anda.
var startfeed = ; mulai feed dari posting keberapa (lebih baik dibiarkan saja)
var urlblog = “https://www.berwirausaha.net“; ganti dengan url blog anda
var charac = 20; jumlah keterangan yang muncul pada recent post (ganti sesuai keinginan atau ubam menjadi 0 jika ingin di kosongkan).
kalian juga dapat mengganti perkotak nya dengan mengatur pada tulisan {background: #F49A9A;}

    untuk demo silahkan lihat disini (jika belum di ganti tapi)

    mungkin cuma itu dulu yang bisa masukakal.top bagikan pada kesempatan kali ini tentang cara buat recent post blog paling keren dan mudah, semoga recent post yang saya bagikan ini bisa bermanfaat untuk teman teman.
    sampai jumpa lagi di lain kesempatan.

    SHARE:
    blog 0 Replies to “cara buat recent post blog paling keren dan mudah”
    Riski
    Lulusan S1 informatika, bekerja sebagai fulltime blogger, content writter, dan android developer... Berpengalaman bekerja dari sma, dan sekarang memilih menjalani usaha kecil kecilan.. pencinta musik folk, yang gemar membaca, menulis, dan membuat game...

    Tinggalkan Balasan

    Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

    This site uses Akismet to reduce spam. Learn how your comment data is processed.