Cara Menciptakan Recent Post Ost [Part 2]

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

Recent post kali ini aku edit menjadi lebih minimalist semoga lebih fast load untuk blog kamu, untuk teladan akhirnya 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

Bagikan Artikel ini