Cara Membuat Widget Recent Post Keren

Cara Membuat Widget Recent Post Valid AMP. Widget recent post atau widget artikel-artikel terbaru biasanya ditampilkan pada sisi samping pada blog. Dengan menampilkan widget recent post maka akan memudahkan para pengunjung blog dalam menemukan artikel-artikel yang baru saja diterbitkan pemilik blog.

Lalu pentingkah widget ini untuk ditampilkan?

Sebenarnya untuk artikel-artikel terbaru bisa langsung dengan ditemukan pada halaman utama atau homepage dari sebuah blog. Namun pengunjung akan sedikit memerlukan beberapa langkah menemukannya jika posisinya sudah berselancar dalam blog tersebut.

Pengunjung harus kembali ke halaman utama terlebih dahulu untuk mendapatkan artikel-artikel yang baru saja diterbitkan.

Jadi akan lebih mudah menemukannya jika blog tersebut memasang widget recent post ini, sehingga pengunjung tidak perlu kembali ke homepage terlebih dahulu. Karena jika posisi pengunjung sudah berada pada salah satu artikel blog, maka akan dengan mudah menemukan artikel terbaru pada widget recent post.

Jadi pemasangan widget ini bisa dikatakan penting untuk menunjang kenyamanan pengunjung dalam menemukan artikel yang dikehendakinya pada blog kita. Selain itu juga merupakan kelengkapan blog jika nantinya blog tersebut ditujukan untuk dimonetisasi.

Nah karena artikel yang baru saja diterbitkan tersebut sudah otomatis muncul di halaman utama, maka sebaiknya pemasangan widget recent post ini bisa ditampilkan pada halaman postingan saja ya. Jadi ketika pengunjung berada di homepage widget ini tidak akan muncul, sehingga bisa mempercepat proses loading blog.

Widget Recent Post Valid AMP

Nah kali ini adalah cara membuat widget recent post yang valid AMP, jadi jika temans sekalian mempunyai blog AMP bisa menggunakan cara atau langkah ini. Oiya cara ini adalah untuk pengguna platform Blogger ya, bukan platform Wordpress.

Dalam penyajiannya, widget recent post bisa hanya menampilkan judul artikel saja. Selain itu juga bisa berupa judul dan snippet gambar utama, dan atau bisa ditambahkan juga sedikit deskripsi. Penyajian ini tergantung dari masing-masing pemilik blog, atau dengan kata lain tergantung selera masing-masing.

Baca Juga

Nah jika temans tertarik untuk menambahkan widget recent post ini pada blog, cara yang bisa dilakukan adalah sebagai berikut :

Buka dashboard Blogger
Pilih tata letak kemudian tambahkan gadget
Selanjutkan adalah masukkan kode berikut ini :


<style scoped='' type="text/css">

ul#recent-posts{list-style:none;margin:0;padding:0}li.recent-posts{display:block;clear:both;overflow:hidden;list-style:none;border-bottom:1px solid #e3e3e3;word-break:break-word;padding:10px 0;margin:0;}

li.recent-posts:last-child{border-bottom:0;}

li.recent-posts a{color:#444;}li.recent-posts a:hover{color:#444;text-decoration:underline}

</style>

<ul id="recent-posts"></ul>

<script>

//<![CDATA[

var homePage = "https://carapemula.xyz",

numPosts = 5;

function recentPosts(a){if(document.getElementById("recent-posts")){var e=a.feed.entry,title,link,content="",ct=document.getElementById("recent-posts");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+'" target="_blank" rel="nofollow">'+title+'</a></li>'}ct.innerHTML=content}}var rcp=document.createElement('script');rcp.src=homePage+'/feeds/posts/summary?alt=json-in-script&orderby=published&max-results='+numPosts+'&callback=recentPosts';document.getElementsByTagName('head')[0].appendChild(rcp);

//]]>

</script>

Gantilah https://carapemula.xyz dengan alamat blog temans sendiri ya
Temans juga bisa atur jumlah artikel yang akan ditampilkan
Terakhir adalah simpan kemudian cek hasilnya.

Kode HTML diatas adalah salah satu cara untuk menampilkan artikel-artikel terbaru pada blog yang hanya menampilkan judul artikel saja.

Untuk alternatif lainnya, temans bisa mencoba html dari KompiAjaib ini. Langkah-langkahnya sama dengan cara diatas, dan kode yang digunakan adalah sebagai berikut :


          <b:widget id='HTML97' locked='false' title='' 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/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<amp-iframe expr:src='&quot;https://cdn.staticaly.com/gh/KompiAjaib/kompi-html/master/recentpost-amp.html?fontSize=16px&amp;color=333&amp;url=&quot; + data:blog.homepageUrl' frameborder='0' height='488' layout='fixed-height' noloading='' sandbox='allow-forms allow-scripts allow-same-origin allow-modals allow-popups' title='Recent Posts'>

    <amp-img height='488' layout='fixed-height' noloading='' placeholder='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirubLavfQcackbNgeSWUT5wAcDAsSGpmVDI2dDT-ZMgVT1n2QO0HNLcj_Sc42EiHuFplZvxPOzmApomAFolk0bdvKaR-aAPr4YZuwDPLfcjg-NC6nvyt4qS6ubRowqzsaZilqIGWG9GSc/s1600/back-iframe.png' width='auto'>

    </amp-img>

  </amp-iframe>

  </b:if>

  </div>

</b:includable>

          </b:widget>

Temans bisa merubah tampilan untuk menyesuaikan selera masing-masing, yaitu :

Ukuran font, bisa ganti pada kode 16px
Warna tulisan, bisa ganti kode 333 (tanpa menggunakan tanda #)

Agar Widget Recent Post Tidak Muncul di Homepage

Artikel terbaru akan mewarnai blog pada halaman utama / homepage. Oleh karena itu sebaiknya widget ini tidak dimnculkan pada homepage. Berikut adalah cara agar widget recent post ini muncul selain di halaman utama yaitu dengan menambahkan kode :

<b:if cond='data:blog.pageType == &quot;item&quot;'>

dan ditutup dengan kode

</b:if>

Sehingga secara utuh akan terlihat seperti ini :


<b:if cond='data:blog.pageType == &quot;item&quot;'>

Kode Widget Recent Post

</b:if>

Nah demikian temans cara membuat widget recent post untuk memudahkan pengunjung dalam berselancar di blog temans sekalian. Selamat mencoba dan semoga bermanfaat.