Membuat Widget Artikel Terbaru Tanpa Gambar Valid HTML5

Cara membuat Recent Post tanpa thumbnail – Widget Recent Post atau Artikel Terbaru adalah widget yang akan menampilkan postingan terbaru dari suatu website atau blog. Salah satu mengoptimasi blog menjadi seo friendly adalah memasang widget recent post ini. Bermacam-macam jenis widget recent post/artikel terbaru, salah satunya adalah widget recent post yang hanya menampilkan judul artikel terbaru saja.

Dengan begitu, widget recent post kali ini tidak menggunakan thumbnail/gambar, tanggal posting dan snippet dari sebuah artikel. Sehingga loading blog atau website tetap ringan karena tidak banyak yang diproses saat seseorang membaca artikel tertentu.

Nah, bagi anda yang tertarik menggunakan recent post tanpa thumbnail dan valid HTML5 ini, silahkan ikuti tutorialnya berikut.

Cara Membuat Widget Artikel Terbaru (Recent Post) tanpa Thumbnail

Login ke blogger.com, masuk dashboar blog, lalu klik Tata Letak, pada sidebar blog klik Tambah Gadget > HTML/JavaScript, kemudian kopi-paste kode JavaScript di bawah ini.

<script type="text/javascript">
function showrecentposts(json){for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}posttitle=posttitle.link(posturl);if(standardstyling)document.write('<li>');document.write(posttitle)}if(standardstyling)document.write('</li>')}
</script><ul>
<script type="text/javascript">var numposts = 10;var standardstyling = true;</script><script type="text/javascript" src="http://www.bungfrangki.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts"></script></ul>

Catatan:
Kode “var numposts = 10” adalah jumlah artikel terbaru yang ingin ditampilkan
www.bungfrangki.com ganti dengan url blog anda

Setelah itu klik Simpan. Sampai disitu pembuatan widget artikel terbaru telah selesai, namun tampilannya masih sedikit berantakan. Untuk memperbaiki tampilan widget recent post, perhatikan caranya di bawah ini.

Sesuaikan css di bawah ini dengan css template blog anda.

/* Widget Recent Post */
#sidebar3 h4, #sidebar3 h3, #sidebar3 h2{background:#5fb564;color:#fff;text-transform:capitalize;font-family:Arial, Sans-Serif;font-size:135%;font-weight:400;position:relative;padding:12px 0 15px;text-align:center;margin:0}
#sidebar3 .widget-content{background:#fff;padding:0 0 0 10px}
#sidebar3 a:link, #sidebar3 a:visited{font-weight:normal}
#sidebar3 ul li {margin:0 5px 0 0 !important;padding:6px 0 !important;position:relative;border-bottom:1px dashed #d5d5d5 !important}
#sidebar3 ul li:last-child{border:none !important}
#sidebar3 ul li a {font-size:14px !important;font-weight:normal !important;color:#333 !important;text-decoration:none;transition: all 0.3s ease-out 0s !important;line-height:1.4em !important}
#sidebar3 ul li a:hover {color:#6aba82 !important;}

Jika hanya ingin menampilkan widget recent post pada postingan penuh saja (untuk blogspot), maka yang perlu dilakukan adalah klik Template pada dashboard blog lalu klik lagi Edit HTML, setelah itu tambahkan tag kondisioner di bawah ini.

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

Letakkan seperti yang diberi panah pada gambar berikut, jangan lupa menambahkan penutupnya (yang diberi panah ungu).

Setelah itu simpan template.