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.


Cara Membuat Recent Post Ost [Part 2]

  1. Buka Blogger > Tema > Edit HTML, Simpan CSS berikut diatas </style>
  2. /* 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}

  3. Simpan Tema.
  4. Buka Tata Letak > Tambahkan Widget Sidebar > HTML/Javascript.
  5. Letakkan Javascipt berikut diwidget tersebut.
  6. <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>

TagKeterangan
5Ganti Dengan Jumlah Post Yang ingin ditampilkan
LABEL POSTGanti Dengan Label Post
Related Post
Comment Post