Cara Membuat Widget Recent Post di Blog dengan Mudah

Widget recent post adalah salah satu widget yang di wajibkan ada di sebuah blog. Karena widget ini menampilkan artikel-artikel terbaru, untuk itu pada artikel kali ini saya akan membahas mengenai cara membuat dan memasang widget recent post di blog WordPress dan Blogger dengan mudah.

Artikel fresh atau baru, adalah artikel yang sangat di minati.

Apalagi berisi informasi-informasi baru yang belum kita ketahui.

Sama seperti adanya widget recent post ini.

Widget recent post di gunakan untuk menampilkan artikel-artikel yang baru di buat oleh si pemilik blog.

Tentu dengan adanya widget ini, akan membuat pengunjung tetap berada di dalam blog kita.

Widget ini juga sangat di sarankan bagi kalian yang ingin mendaftar menjadi publisher Google AdSense.

Di artikel sebelumnya, mengenai cara daftar AdSense untuk blog.

Saya sudah membahas mengenai beberapa widget yang wajib ada, salah satunya adalah widget recent post ini.

Baca juga: Cara Daftar AdSense untuk Blog

Bagi kalian yang ingin langsung ke cara membuat widget recent post di WordPress, silahkan klik link di bawah.

Baca juga: Cara Membuat Widget Recent Post di WordPress

Cara Membuat Widget Recent Post di Blogger

Di sini saya akan membagikan beberapa desain widget recent post dari berbagai blogger ternama.

a. Widget Recent Post Simple untuk LinkMagz dan VioMagz

Bagi kalian yang belum menggunakan template dari mas sugeng ini.

Kalian sangat di sarankan membelinya, karena selain penggunaannya sangat mudah.

Template dari mas sugeng juga sangat ngebut.

Beli Sekarang

Langsung saja ikuti langkah-langkah dari saya berikut ini:

  1. Langkah pertama masuk ke dashboard Blogger kalian.
  2. Pilih menu Tata Letak.
  3. Kemudian klik + Tambahkan Gadget di widget sidebar.
  4. Setelah masuk, pilih HTML/JavaScript » klik tanda +.Cara Membuat Recent Post Keren di Blogspot
  5. Buat Judul widget sesuai keinginan kalian, kemudian masukan kode di bawah ini pada kolom Konten.
    <div class='artikel-terbaru'> <script> function artikelterbaru(e){document.write("<ul>");for(var t=0;t<e.feed.entry.length;t++){for(var r=0;r<e.feed.entry[t].link.length&&"alternate"!=e.feed.entry[t].link[r].rel;r++);var n="<li><a href="+("'"+e.feed.entry[t].link[r].href+"'")+'">'+e.feed.entry[t].title.$t+"</a> </li>";document.write(n)}document.write("</ul>")} </script> <script src="/feeds/posts/summary/?max-results=5&alt=json-in-script&callback=artikelterbaru"></script> </div>
  6. Untuk mengganti jumlah artikel yang di tampilkan pada widget recent post, silahkan ganti angka 5 dengan jumlah artikel yang ingin kalian tampilkan.
  7. Jika sudah, klik Simpan.Tutorial Simple Membuat Recent Post Unik di Blogger

Jika berhasil, maka tampilannya akan seperti ini.Cara Membuat Recent Post dengan Gambar di Blogspot

b. Widget Recent Post dengan Tombol Next by Arlina Design

  1. Langkah pertama masuk ke dashboard Blogger kalian.
  2. Pilih menu Tata Letak.
  3. Kemudian klik + Tambahkan Gadget di widget sidebar.
  4. Setelah masuk, pilih HTML/JavaScript » klik tanda +.Cara Membuat Recent Post Keren di Blogspot
  5. Buat Judul widget sesuai keinginan kalian, kemudian masukan kode di bawah ini pada kolom Konten.
    <style scoped='' type='text/css'>
    /* Recent Post Navigasi */
    #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://www.domain.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'>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","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>
    • var numfeed : Silahkan ganti dengan jumlah artikel yang ingin kalian tampilkan.
    • var urlblog : Silahkan ganti dengan url domain kalian.
    • var charac : Silahkan ganti dengan jumlah karakter dalam artikel. Jika ingin menonaktifkan, ganti dengan angka 0.
  6. Jika sudah, klik Simpan.Tutorial Simple Membuat Recent Post Unik di Blogger

Jika berhasil, maka tampilannya akan seperti ini.Cara Memasang Widget Recent Post Dengan Gambar

c. Widget Recent Post Bernomor by BungFrangki

  1. Langkah pertama masuk ke dashboard Blogger kalian.
  2. Pilih menu Tata Letak.
  3. Kemudian klik + Tambahkan Gadget di widget sidebar.
  4. Setelah masuk, pilih HTML/JavaScript » klik tanda +.Cara Membuat Recent Post Keren di Blogspot
  5. Buat Judul widget sesuai keinginan kalian, kemudian masukan kode di bawah ini pada kolom Konten.
    <style>/* Recent Posts by Bungfrangki.com */
    #recent-articles .widget-content, #recent-articles ul {padding: 0;counter-reset:count;margin: 0 auto;display: block}
    #recent-articles a:link, #recent-articles a:visited {font-weight: normal}
    #recent-articles ul li {background-color:#f7f7f7;margin:0 auto;padding:8px 8px 8px 60px;list-style:none;position:relative;border-bottom:1px solid #fff;font-size:90%;text-align:left}
    #recent-articles ul li:before{color: #fff!important;counter-increment: count;content: counter(count);position: absolute;left:0;top:0;bottom:0;text-align: center;z-index: 51;transition: all .4s;width:50px;font-size: 150%!important;background:#2b71a2;font-weight:500;text-align: center;padding:0;border-right:1px solid #fff;display:flex;flex-direction:column;justify-content:center;height:100%}
    #recent-articles ul li:last-child{border:none}
    #recent-articles ul li a {font-weight:400 ;display:block;color:#222 ;text-decoration:none ;line-height:1.4em ;}
    #recent-articles ul li:hover{background-color:#f5f5f5;}
    #recent-articles ul li:hover:before{background-color:#24699A;}
    #recent-articles ul li a:hover,#recent-articles ul li:hover a {color: #2b71a2 !important;}
    #recent-articles ul li:before, #recent-articles ul li .item-title a {font-weight: 400;font-size: 12px;color: inherit;text-decoration: none}</style>
    <script type='text/javascript'>
    //<![CDATA[
    numPosts = 10;
    function recentPosts(a){if(document.getElementById("recent-posts")){var e=a.feed.entry,title,link,content="",ct=document.getElementById("recent-posts");ct.async=true;for(var i=0;i<numPosts;i++){for(var j=0;j<numPosts;j++){if(e[i].link[j].rel=="alternate"){link=e[i].link[j].href;break}}var title=e[i].title.$t;content+='<li class="recent-posts"><a href="'+link+'" title="'+title+'">'+title+'</a></li>'}ct.innerHTML=content}}var rcp=document.createElement('script');rcp.async=true;rcp.src='/feeds/posts/summary?alt=json-in-script&orderby=published&max-results='+numPosts+'&callback=recentPosts';document.getElementsByTagName('head')[0].appendChild(rcp);
    //]]>
    </script>
    <div id='recent-articles' class='recent-articles'><ul id="recent-posts"></ul></div>
  6. Untuk mengganti jumlah artikel yang di tampilkan pada widget recent post, silahkan ganti angka 10 dengan jumlah artikel yang ingin kalian tampilkan.
  7. Jika sudah, klik Simpan.Tutorial Simple Membuat Recent Post Unik di Blogger

Jika berhasil, maka tampilannya akan seperti ini.Cara Memasang Widget Recent Posts Ringan tanpa JavaScript di Blogger Blogspot

Cara Membuat Widget Recent Post di Blog WordPress

Berbeda dengan Blogger.

Widget recent post WordPress sudah ada di dalam fitur WordPress.

Jadi kalian hanya tinggal memasangnya saja, tanpa harus mengubah atau memasang kode apapun.

Untuk memasanga widget recent post, silahkan ikuti langkah berikut ini:

  1. Langkah pertama masuk ke dalam WordPress kalian.
  2. Geser kursor ke menu Tampilan, kemudian klik menu Widget.
  3. Setelah masuk, scroll ke bawah dan cari Pos-pos Terbaru.
  4. Klik Pos-pos Terbaru, pilih lokasi widget (misalnya saya ingin Sidebar Kanan) » kemudian klik Tambahkan Widget.8 Widget Recent Post Responsive Keren untuk Blogger
  5. Jika sudah muncul di Sidebar Kanan, kalian buat judul dan atur jumlah artikel yang akan tampil di Sidebar.
  6. Jika sudah selesai mengatur, klik Simpan.Cara Membuat Widget Recent Post Keren dan Ringan

Sekarang widget recent post kalian sudah muncul di sidebar atau dimanapun lokasi yang kalian inginkan tadi.

Saya tidak bisa menampilkan contohnya, karena setiap tema berbeda-beda.

Penutup

Demikian artikel dari saya mengenai cara membuat dan memasang recent post di blog WordPress dan Blogger dengan mudah.

Jika ada pertanyaan mengenai artikel ini, silahkan masukan ke dalam kolom komentar.

Jika ada typo silahkan beritahu saya lewat  kolom komentar.

Jangan lupa share artikel ini agar bermanfaat untuk orang lain.

3 pemikiran pada “Cara Membuat Widget Recent Post di Blog dengan Mudah”

  1. Long time supporter, and thought I’d drop a comment.

    Your wordpress site is very sleek – hope you don’t mind me asking
    what theme you’re using? (and don’t mind if I steal it? :P)

    I just launched my site –also built in wordpress like yours– but the theme slows (!) the site down quite a
    bit.

    In case you have a minute, you can find it by searching for “royal cbd” on Google (would appreciate any feedback)
    – it’s still in the works.

    Keep up the good work– and hope you all take care of yourself during the coronavirus scare!

  2. terimakasih, lengkap sekali share nya. berguna sekali saya jg sdh pake theme sugeng.
    tapi kendalanya beberapa widget html diatas ketika dark mode jd pada putih semua gakebaca kecuali dimouse hover :'( kayanya harus ngoprek2 lagi. tapi takut error

Komentar ditutup.