Membuat Recent Post Tanpa Thumbnail Valid AMP

Membuat Recent Post Tanpa Thumbnail Valid AMP - Recent Post merupakan widget yang menurut saya cukup penting keberadaannya di blog, karena widget ini akan memberikan navigasi mengenai artikel terbaru di blog tersebut, bila artikel terbaru tersebut menarik pengunjung, mungkin pengunjung tersebut akan mengklik dan membaca postingan tersebut, hal ini akan membuat pageview blog anda menjadi lebih meningkat, dan dapat saya katakan widget ini juga berpengaruh ke SEO. Baca juga Cara Membuat Artikel Lebih SEO Dengan Aplikasi Blogger Pro.

Widget recent post seperti ini sebaiknya tidak ditampilkan di halaman homepage, karena pada homepage blog sudah menampilkan daftar postingan terbaru.

Script Widget Recent Post Valid AMP yang saya gunakan ini saya ambil dari blog Kompi Ajaib, yang sedikit saya rubah tampilannya. Sehingga Widget Recent Post Valid AMP ini tidak akan menampilkan thumbnail, sehingga membuat widget ini semakin ringan. Widget Recent Post Valid AMP ini disertai dengan navigasi nextprev yang berada dibawahnya, sehingga kita dapat melihat postingan sebelum sebelumnya lebih banyak lagi. Untuk lebih jelasnya tampilannya seperti ini :

Sebelum memulai, pastikan anda mempunyai akun Github, yang nantinya akan kita gunakan untuk menghosting script yang akan kita buat, namun jika kalian tidak ingin kerepotan dengan hal tersebut, anda dapat memakai script yang sudah saya sediakan untuk anda yang sudah saya hosting di Github. Widget Recent Post Valid AMP ini akan menggunakan amp-iframe untuk meletakkan scriptnya, jadi pemasangannya agak sedikit rumit, pastikan anda mengikuti langkah demi langkah dengan tepat. Baca juga Cara Membuat Baca Juga di Blog Valid AMP.

Cara Membuat Recent Post Tanpa Thumbnail Untuk Blog Valid AMP

Buka aplikasi Notepad++ atau aplikai Notepad bawaan windows, lalu simpan script dibawah ini dengan nama recenpost.html, pastikan file yang anda simpan memiliki format .html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<meta content='width=device-width,minimum-scale=1,initial-scale=1' name='viewport'/>
<title>Recent Post</title>
<style>
body{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,"Roboto","Segoe UI","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif;overflow:hidden}
#recentpostnav{border:1px solid #585858;width:100%;margin:0 auto}
#recentpost{margin:0;background:#fff;}
.recentpostel{background:#fff;display:block;border-bottom:1px solid #000;margin:0 0 5px;padding:1px 0 6px;height:auto}
.recentpostel:last-child{margin:0;border-bottom:none;}
.recentpostel h6,.recentpostel h6 a{text-decoration:none;font-size:14px;font-weight:600;line-height:1.2;margin:0;color:#6703ff}
.recentpostel h6:hover a {color:#6703ff}
.recentpostel h6:hover {padding-left:5px}
#recentpostnavfeed{background:#eee;text-align:center;margin:0}
#recentpostnavfeed a{text-decoration:none;display:block;padding:5px}
#recentpostnavfeed span{padding:5px}
#recentpostnavfeed .next{float:right}
#recentpostnavfeed .previous{float:left}
#recentpostnavfeed .home{text-align:center;display:inline-block;}
#recentpostnavfeed svg{vertical-align:middle;}
</style>

</head>

<body>
<div class="box" id="box">
<div id="recentpost"></div>
<div id="recentpostnavfeed"></div>
</div>
<script>
function getQueryVariable(variable) {
  var query = window.location.search.substring(1);
  var vars = query.split("&");
  for (var i=0;i<vars.length;i++) {
    var pair = vars[i].split("=");
    if(pair[0] == variable){return pair[1];}
  }
  return(false);
}
  function generateCss(q) {
    var css       = document.createElement('style'),
        sp2       = document.getElementById('box'),
        parentDiv = sp2.parentNode;
    css.type = 'text/css';
    if (css.styleSheet) css.styleSheet.cssText = q;
    else css.appendChild(document.createTextNode(q));
    parentDiv.insertBefore(css, sp2);
  }
    (function() {
    var q = '.recentpostel h6 a {font-size:' + getQueryVariable('fontSize') + ';color:#' + getQueryVariable('color') + '}';
        generateCss(q);
  })();
  </script>
<script>
var urlblog = getQueryVariable("url");
function bloggerfeed(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 showrecentpost(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<5&&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://3.bp.blogspot.com/-BHuXHny1kOk/VXrkSyxKCjI/AAAAAAAACas/pZLJAEUDtds/s72/no-image.png",s+="<div class='recentpostel'>",s+="<a href='"+r+"' target='_blank' title='"+n+"'></a>",s+="<h6><a href='"+r+"' target='_blank' title='"+n+"'>"+n+"</a></h6>",s+="</div>"}document.getElementById("recentpost").innerHTML=s,s="",s+=urlprevious?"<a href='javascript:navigasifeed(-1);' class='previous' title='Previous'><svg width='24' height='24' viewBox='0 0 24 24'><path fill='#333333' d='M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z' /></svg></a>":"<span class='noactived previous'><svg width='24' height='24' viewBox='0 0 24 24'><path fill='#777777' d='M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z' /></svg></span>",s+=urlnext?"<a href='javascript:navigasifeed(1);' class='next' title='Next'><svg width='24' height='24' viewBox='0 0 24 24'><path fill='#333333' d='M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z' /></svg></a>":"<span class='noactived next'><svg width='24' height='24' viewBox='0 0 24 24'><path fill='#777777' d='M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z' /></svg></span>",s+="<a href='javascript:navigasifeed(0);' class='home' title='Home'><svg width='24' height='24' viewBox='0 0 24 24'><path fill='#141414' d='M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z' /></svg></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=5&orderby=published&alt=json-in-script",n+="&callback=showrecentpost",incluirscript(n)}function incluirscript(e){1==0&&removerscript(),document.getElementById("recentpost").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","postlabel"),document.getElementsByTagName("head")[0].appendChild(n),startfeed=1}function removerscript(){var e=document.getElementById("postlabel"),t=e.parentNode;t.removeChild(e)}onload=function(){navigasifeed(0)};
</script>
</body>
</html>
Sebelum anda menyimpan kode tersebut, anda dapat mengatur css tampilan sesuai yang anda inginkan bila anda tidak kebingungan.

Setelah anda menyimpan kode script tersebut dengan nama recentpos.html, lalu hosting atau upload melalui Github, untuk mendapatkan CDN-nya, anda dapat mengambil melalui cdn.staticaly.com. Untuk anda yang merasa kesulitan dari tahap ini, anda dapat memakai script siap pakai yang sudah saya buatkan untuk anda.
https://cdn.staticaly.com/gh/rokim5421/Blog/aef58680/recentpost.html

Dari sini membuat script recentpost sudah selesai, sekarang anda tinggal memasukkan script tersebut kedalam amp-iframe, pemasangan amp-iframe tersebut dilakukan melalui Edit HTML, namun sebelumnya anda harus menentukan dimana widget recentpost tersebut akan diletakkan, bila ingin diletakkan di selain sidebar, anda dapat menggunakan kode amp-iframe berikut ini :
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<amp-iframe expr:src='&quot;https://cdn.staticaly.com/gh/rokim5421/Blog/aef58680/recentpost.html?fontSize=14px&amp;color=000&amp;url=&quot; + data:blog.homepageUrl' frameborder='0' height='263' layout='fixed-height' noloading='' sandbox='allow-forms allow-scripts allow-same-origin allow-modals allow-popups' title='Recent Posts'>
<amp-img height='263' layout='fixed-height' noloading='' placeholder='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRRcz7Q4s7jHwbxF5SpOEVZ6loe1wlnRZhPn6Bj1MF9Fyr7zxqnAkO23GQi-RjkH1bLGpIBPkqWrppaVHJvGwMtemHOxWyxyVh_m88SWfOthCpksb1C6q2agLAUtJx5QPNCPSwjST_Ak8/s1600/back-iframe.png' width='auto'>
</amp-img>
</amp-iframe>
</b:if>
Keterangan :
  • Ganti alamat script yang sudah saya tandai dengan milik anda, atau biarkan seperti itu.
  • Ganti Font Size sesuai font size pada blog anda.
  • Ganti warna font sesuai tema blog anda.

Namun bila anda ingin memasang pada bagian sidebar, pertama, pastikan sidebar blog anda memiliki minimum width 300px, karena widget ini memiliki lebar 300px, setelah itu simpan kode amp-iframe dibawah ini pada bagian sidebar blog anda, lebih tepatnya dibawah section.
<b:widget id='HTML97' locked='false' title='Postingan Terbaru' type='HTML' version='1'>
     <b:widget-settings>
       <b:widget-setting name='content'><![CDATA[<!--recentpost-->]]></b:widget-setting>
     </b:widget-settings>
     <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
<amp-iframe expr:src='&quot;https://cdn.staticaly.com/gh/rokim5421/Blog/aef58680/recentpost.html?fontSize=14px&amp;color=000&amp;url=&quot; + data:blog.homepageUrl' frameborder='0' height='263' layout='fixed-height' noloading='' sandbox='allow-forms allow-scripts allow-same-origin allow-modals allow-popups' title='Recent Posts'>
    <amp-img height='263' layout='fixed-height' noloading='' placeholder='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRRcz7Q4s7jHwbxF5SpOEVZ6loe1wlnRZhPn6Bj1MF9Fyr7zxqnAkO23GQi-RjkH1bLGpIBPkqWrppaVHJvGwMtemHOxWyxyVh_m88SWfOthCpksb1C6q2agLAUtJx5QPNCPSwjST_Ak8/s1600/back-iframe.png' width='auto'>
    </amp-img>
  </amp-iframe>
  </div>
</b:includable>
   </b:widget>
Keterangan :
  • Ganti alamat script yang sudah saya tandai dengan milik anda, atau biarkan seperti itu.
  • Ganti Font Size sesuai font size pada blog anda.
  • Ganti warna font sesuai tema blog anda.

Setelah itu simpan perubahan pada template anda, dan lihat hasilnya. Sekian pembahasan saya mengenai Cara Membuat Recent Post Tanpa Thumbnail Valid AMP, semoga dapat bermanfaat bagi anda semua, selamat mencoba :)