Recent Post Ost Simple [Part 3]

Cara Membuat Recent post Ost Simple [Part 3] atau Recent post Image Simple [Part 3]. Tutorial kali ini kenapa aku sebut simple? alasannya yakni diartikel kali ini sedikit memakai CSS & Js, dan relatif gampang diterapkan pada blog kalian masing-masing.

Tutorial kali ini hampir sama menyerupai sebelumnya yaitu Cara Membuat Recent Post Ost [Part 2], namun menyerupai yang aku bilang diawal, tutorial kali ini memakai sedikit CSS & Js. Untuk Contohnya kalian dapat lihat preview menyerupai 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

Bagikan Artikel ini