Recent post Ost Simple [Part 3]

Arleth-desz - Artikel hari ini saya akan membahas Cara Membuat Recent post Ost Simple [Part 3] atau Recent post Image Simple [Part 3]. Tutorial kali ini kenapa saya sebut simple? karena diartikel kali ini sedikit menggunakan CSS & Js, dan relatif mudah diterapkan pada blog kalian masing-masing.

Tutorial kali ini hampir sama seperti sebelumnya yaitu Cara Membuat Recent Post Ost [Part 2], namun seperti yang saya bilang diawal, tutorial kali ini menggunakan sedikit CSS & Js. Untuk Contohnya kalian bisa lihat preview seperti gambar diatas atau link dibawah ini

Demo

Recent post Image Simple

1. Buka Tema > Edit HTML > Cari </style>
   Simpan CSS berikut di atasnya

/* Style Recent Post Ost Simple - Arlethdesign
   ======================================= */
#--containerx{list-style:none;margin:auto;overflow:hidden}
#--containerx li{width:25%;float:left;margin:.3em 0;}
#--containerx li .--xlist{position:relative;overflow:hidden;max-width:160px;}
#--containerx li .--xlist span{position:absolute;bottom:0;right:0;left:0;max-width:160px;color:#FFF;font-size:12px;margin:auto;line-height:normal;padding:6px;background:linear-gradient(to bottom,rgba(0,0,0,.05) 6%,rgba(0,0,0,.85) 70%)}



2. Save Tema.
3. Kemudian Buka Tata Letak > Add Widget HTML/Javascript
   Simpan Javascript ini diwidget tersebut.

<script type="text/javascript">//<![CDATA[
var _contentx = 8;
var _imagex = true;var _commentx = false;var _snippx = false;var _snipxchar = 0;
(function(){var b=document.body||document.getElementsByTagName("body")[0];var a=document.createElement("script");a.src="//cdn.staticaly.com/gh/Arleth98/2019/b81bcf18/Recent-post-Ost-Simple2k18.js";b.appendChild(a)}());$(document).ready(function(){$("#--containerx li img").attr("src",function(a,b){return b.replace("s72-c","w160-h105-c")})});
//]]></script>
<script src='/feeds/posts/default?orderby=published&alt=json-in-script&callback=_recentposts'></script>



4. Ganti Angka 8 dengan jumlah Post yang ingin ditampilkan.
5. Jika Sudah Simpan Widget.

Jangan lupa pastikan template blog kalian sudah tersedia jquery