Tutorial Membuat Recent Post Di Blogger 100% Work

Codepelajar - Sedikit Intermezo jadi apasih fungsinya Tutorial Membuat Recent Post ini ? Sebenarnya setiap pengunjung tidak selalu ingin membaca artikel kita. Mereka yang menemukan artikel kita melalui browsing sangat mungkin ingin mendapatkan bacaan lengkap yang sesuai dengan kebutuhan mereka. Maka untuk mereka yang seperti ini, artikel kita akan dibaca bahkan mungkin di download.

Tapi jika yang berkunjung ke blog kita hanya sekedar jalan-jalan (blogwalking) untuk meningkatkan traffic, sangat mungkin mereka tidak membaca seluruh artikel kita. Mereka hanya lihat-lihat sebentar, tentu yang dilihat bukan isi, tapi judul postingan kita. Jika kita menyediakan elemen daftar judul postingan kita yang terbaru, mereka bisa langsung melihatnya. Dan kalau ada yang tertarik baru mereka akan baca artikel kita. Disinilah fungsi elemen "Recent Post". , mungkin bisa bermanfaat buat kalian. Ok kita mulai saja tutorial kali ini.

DEMO


See the Pen Tutorial Membuat Recent Post by Code Pelajar (@codepelajar) on CodePen.


Tutorial Membuat Recent Post


Pertama Kalian Buka Blogger > Tema > Edit HTML, dan simpan CSS berikut ini di bawah <style>

/* Recent Post - Codepelajar.com */
ul.request-post{list-style:none;padding:0;margin:0 auto}
li.recent-posts-list{overflow:hidden;padding:5px;background:#FFF;border:1px solid #ddd}
img.gambar-postingan{width:72px;height:72px;border:1px solid #ddd;float:left;margin-right:5px}
h3.title-posts{font-size:13px;margin:0;padding:0;line-height:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
li.recent-posts-list span{padding:5px 8px;margin-bottom:10px;display:block}
li.recent-posts-list .post-details{float:right}

Jika Sudah Save Tema, Lalu Buka Tata Letak dan Tambahkan Widget > HTML/Javascript, dan masukkan Javascript berikut

 
<script src='https://cdn.rawgit.com/muhammadirva62/Justirva-Kode/89c751ec/RecentPost.js'></script>
<script>
var tampilkanpost = 6;
document.write("<script src=\/feeds\/posts\/default/?orderby=published&alt=json-in-script&callback=tampilkanrecentpostost><\/script>");
</script>

Tag Keterangan
src=\/feeds\/posts\/default/-/LabelPost? Ganti dengan script ini jika ingin menampilkan sesuai label post
var tampilkanpost = 6; untuk menampilkan Jumlah postnya silahkan sesuaikan sendiri

Ok sekian tutorial kali ini semoga bermanfaat dan sampai jumpa di tutorial berikutnya.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel