Cara Membuat Recent Post Ost [Part 2]

Tutorial kali ini sama dengan postingan sebelumnya yaitu Cara Membuat Recent Post Ost Part 1, namun diartikel kali ini saya membuatnya dengan design yang berbeda dari yang sebelumnya. Design kali ini simple dan mudah untuk digunakan.

Recent post kali ini saya edit menjadi lebih minimalist agar lebih fast load untuk blog kamu, untuk contoh jadinya silahkan cek dibawah ini.

Demo

Cara Membuat Recent Post Ost [Part 2]

1. Buka Blogger > Tema > Edit HTML, Simpan CSS berikut diatas </style>

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



2. Simpan Tema.
3. Buka Tata Letak > Tambahkan Widget Sidebar > HTML/Javascript.
4. Letakkan Javascipt berikut diwidget tersebut.

<div id='rlo'>
<script src='https://cdn.staticaly.com/gh/Arleth98/Js/b757422d/recent-post-ost-widget.js'></script>
<script>//<![CDATA[
var tampilkanpost = 5;
document.write("<script src=\/feeds\/posts\/default/-/LABEL POST?orderby=published&alt=json-in-script&callback=tampilkanrecentpostost><\/script>");
//]]></script></div>

Tag	Keterangan
5	Ganti Dengan Jumlah Post Yang ingin ditampilkan
LABEL POST	Ganti Dengan Label Post