edisini
Pada pilihan widget bawaan blogger memang tidak ada recent post, mungkin karena widget ini tidak diperlukan menurut blogger atau akan bentrok dengan loop homepage jika dirender oleh blogger itu sendiri. Jadi, kita akan membuatnya seringan mungkin agar tidak membebani loading blog.
Widget Recent Post
Widget ini menampilkan posting terbaru blog yang mirip seperti daftar post homepage, jadi widget ini sangat tidak cocok dipasang di homepage blog dan ini dianggap tidak penting bagi blogger, itulah mengapa blogger tidak membuat widget bawaan untuk widget ini. Namun kita bisa membuatnya sendiri tentunya dengan script dari blogger itu sendiri.
Kegunaan Recent Post
Widget ini berguna pada halaman posting blog seperti layaknya widget popular posts menampilkan daftar postingan yang langsung bisa dibuka tanpa kembali he beranda blog, intinya widget ini adalah kotak kecil yang menampilkan beranda blog kita. Widget ini akan memudahkan pengunjung blog kita menuju artikel terbaru yang mungkin mereka sukai dengan cepat.
Code Feed Blogger
Dalam membuat widget ini kita menggunakan json feed blogger, jadi Anda bisa ubah sesuai selera apa yang akan ditampilkan dalam widget ini. Kode json pada post tersebut kurang lebih seperti ini
{
"id": {
"$t": "tag:blogger.com,1999:blog-8049617190300762270.post-3171681396592550603"
},
"published": {
"$t": "2023-10-01T21:34:00.003-07:00"
},
"updated": {
"$t": "2023-10-09T12:03:06.408-07:00"
},
"category": [
{
"scheme": "http://www.blogger.com/atom/ns#",
"term": "Blogger Code"
},
{
"scheme": "http://www.blogger.com/atom/ns#",
"term": "Javascript"
}
],
"title": {
"type": "text",
"$t": "Blogger Pre Code HighlightJs dengan Simpel Copy Button"
},
"summary": {
"type": "text",
"$t": "Pre CodeFungsi HTML pre code adalah untuk menampilkan kode html pada browser, fungsi ini berguna untuk memberi contoh tentang penulisan kode karena pada dasarnya kode html itu tersembunyi di browser dan browser hanya menampilkan hasil dari sekian banyak kode tersebut.syntax highlighterHighlightJsDari sekian banyak syntax highlighter kami memilih highlighjs karena penggunaannnya yang simpel, bisa "
},
"link": [
{
"rel": "replies",
"type": "application/atom+xml",
"href": "https://edisini.blogspot.com/feeds/3171681396592550603/comments/default",
"title": "Posting Komentar"
},
{
"rel": "replies",
"type": "text/html",
"href": "https://edisini.blogspot.com/2023/10/blogger-pre-code-highlightjs-dengan.html#comment-form",
"title": "0 Komentar"
},
{
"rel": "edit",
"type": "application/atom+xml",
"href": "https://www.blogger.com/feeds/8049617190300762270/posts/default/3171681396592550603"
},
{
"rel": "self",
"type": "application/atom+xml",
"href": "https://www.blogger.com/feeds/8049617190300762270/posts/default/3171681396592550603"
},
{
"rel": "alternate",
"type": "text/html",
"href": "https://edisini.blogspot.com/2023/10/blogger-pre-code-highlightjs-dengan.html",
"title": "Blogger Pre Code HighlightJs dengan Simpel Copy Button"
}
],
"author": [
{
"name": {
"$t": "Faqih N.A."
},
"uri": {
"$t": "http://www.blogger.com/profile/13402955728038090940"
},
"email": {
"$t": "noreply@blogger.com"
},
"gd$image": {
"rel": "http://schemas.google.com/g/2005#thumbnail",
"width": "32",
"height": "32",
"src": "//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFFRDMgBxYxjP7H74PaNrQjeFSys5CESJPowVyFgX24UufQcYCf19GecwjY-6xoJpTlmgKjUDjIwOA_4xcHMpMD59Esq2Syge9H-p95QMs-H-WJsXKQGIYrG5ohrCH_aippfDUBgd0ipr6JSimS_0iygrAutuqVNlMwsEfeUE4__wq1eY/s220/faqihku.jpg"
}
}
],
"media$thumbnail": {
"xmlns$media": "http://search.yahoo.com/mrss/",
"url": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEMhE62igQz5O1ByDb4IezCdiKXHWgC1CFldio4NDJ7afKMu4CeYfqIhuCR2Y2nFNEZDSThU_PAC2BwUFHjA_PJ6wo6vwNTXfMKW_Z2N778JIPlsTpP806sQODnNABVDciuu_766a5uW2bkB5KHrFpvKtu9wrN_srJ2PrG5J9J5hrpjMd3cEkh632Nrhe7/s72-c/syntax_highlight.jpg",
"height": "72",
"width": "72"
},
"thr$total": {
"$t": "0"
}
}Cara Membuat widget Recent Posts
Dari kode json diatas kita membuat javascrip yang memanggil recent post blogger, dan setiap post dipecah untuk menampilkan data yang kita inginkan.
- Buat widget Text/HTML sebagai wadah script ini dan beri judul Recent Posts
- Dalam kolom konten isilah dengan javascript berikut
<div id="recent-ctd"></div> <script type="text/javascript"> //<![CDATA[ var maxResult = '5'; function showlatestpostswiththumbs(json) { let data = json.feed.entry, title, link, thumb, tags, userimg, username, content = ""; for (let s = 0; s < maxResult; s++) { for (let g = 0; g < maxResult; g++) { if (data[s].link[g].rel == "alternate") { link = data[s].link[g].href; break } } //console.log(data[s]); let title = data[s].title.$t, thumb = data[s].media$thumbnail.url ?? 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRqJeyhrab7AU8E9jLmUpFk00U0GWFDXLuGxcWuHadcaTmRQhO0Xn3QMtpVDWbaOgrlcmDpxwhGF_jETC2_rXmp9F7elf__6fPREEcYclqA5Y6Chly_PvKuCefU3e3NLqkbfVDAyU2Jx1T/s1600/no-thumb.png', tags = data[s].category[0].term, publ = data[s].published.$t.split('T'), userimg = data[s].author[0].gd$image.src, username = data[s].author[0].name.$t; //console.log(publ); let formatNum = publ[0].split('-'); //console.log(formatNum[1]); const date2 = new Date(); date2.setMonth(formatNum[1]); const formatter = new Intl.DateTimeFormat('en-US', { month: 'short' }); publish = formatNum[2] + ' ' + formatter.format(date2) + ', ' + formatNum[0]; content += '<article class="post-baru" role="article"><div class="baru-thumb"><a href="' + link + '"><img alt="' + title + '" loading="lazy" src="' + thumb + '"/></a></div><div class="data-baru"><span class="label-baru tags"><a class="' + tags + '" href="/search/label/' + tags + '?&max-results=7" rel="tag">' + tags + '</a></span><h3 class="title-baru"> <a href="' + link + '">' + title + '</a></h3> <span class="published">' + publish + '</span></div></article>' } var ctdcont = document.getElementById("recent-ctd"); ctdcont.innerHTML = content } let ctdscrpt = document.createElement('script'); ctdscrpt.src = '/feeds/posts/default?orderby=published&alt=json-in-script&max-results='+maxResult+'&callback=showlatestpostswiththumbs'; document.getElementsByTagName('body')[0].appendChild(ctdscrpt); //]]> </script> - Untuk mempercantik tampilan berilah CSS, sesuaikan dengan warna dan posisi pada template Anda, contoh seperti dibawah
#recent-ctd { display: flex; flex-direction: column; gap: 0.8em; border: 1px solid #eee; padding: 0.5em; border-radius: 0.5em; width: 100%; max-width: 500px; margin: 0 auto; } article.post-baru { display: flex; align-items: center; gap: 0.5em; background: white; padding: 0.5em; border-radius: 0.3em; } .baru-thumb img { border: 1px solid #eee; border-radius: 0.3em; } h3.title-baru { margin: 0; } - Agar widget ini hanya tampil dalam postingan saja berikan kondisional blogger cond='data:view.isPost' pada widget Text/HTML ini, seperti contoh berikut
<b:widget cond='data:view.isPost' id='HTML1' locked='false' title='Recent Post' type='HTML' visible='true'>
Script ini tidak menggunakan document.write(), jadi tidak mengganggu seo blog Anda
Komentar
Posting Komentar