Membuat Widget Artikel Terbaru Tanpa Thumbnail Valid HTML5

Membuat Widget Artikel Terbaru Tanpa Thumbnail Valid HTML5

Widget Artikel Terbaru adalah widget yang menampilkan postingan terbaru dari dari blog. Dengan memasang widget ini juga merupakan salah 1 optimasi seo yang menjadikan blog menjadi seo friendly. Diluar sana berserakan kode2 dan jenis widget recent post/artikel terbaru, dengan beragam jenis, baik dengan Thumbnail maupun tanpa thumbnail, seperti widget recent post yang hanya menampilkan judul artikel terbaru saja yang akan saya bagikan kali ini.

Karena widget recent post kali ini tidak menggunakan gambar, tanggal posting dan snippet dari sebuah artikel. Sehingga loading blog atau website tetap ringan ketika pengunjung mengklik salah satu judul artikel yang ada di widget recent post ini.

Untuk anda yang tertarik menggunakan recent post tanpa gambar dan sangat valid HTML5 ini, silahkan ikuti langkah-langkah berikut:

Cara Membuat Widget Artikel Terbaru Tanpa Gambar


Langkah 1


Letakan CSS berikut dan sesuaikan dengan warna template anda

/* CSS Artikel Terbaru */
#sidebar3 h4, #sidebar3 h3, #sidebar3 h2{background:#D91E18;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;}

Langkah 2


Tambahkan Script berikut kedalam Gadget baru, masuk ke Dashboard > Tata Letak, pada sidebar blog klik Tambah Gadget > HTML/JavaScript

<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.trikricky.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts"></script></ul>

Catatan:
Perhatikan kode yang ditandai, itu adalah jumlah artikel terbaru yang ingin ditampilkan. ganti www.trikricky.com dengan url blog anda

Tambahan:

Tambahkan tag kondisional di bawah ini klik Template pada dashboard blog lalu klik lagi Edit HTML jika hanya ingin menampilkan widget tersebut pada postingan penuh saja (untuk blogspot).

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

Jangan lupa tambahkan tag penutupnya </b:if> seperti screenshoot berikut:

Tag Kondisional Widget Artikel Terbaru Hanya dihalaman Postingan Penuh

Simpan kembali Template

Demikian Cara membuat widget artikel terbaru tanpa gambar kali ini, semoga widget ini dapat mempercantik tampilan blog anda.
Advertisement
Advertisement

Tidak masalah seberapa lambat kau berjalan, asalkan kau tak berhenti.