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



Recent post Image Simple

  1. Buka Tema > Edit HTML > Cari </style>
    Simpan CSS berikut di atasnya
  2. /* 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%)}

  3. Save Tema.
  4. Kemudian Buka Tata Letak > Add Widget HTML/Javascript
    Simpan Javascript ini diwidget tersebut.
  5. <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>

  6. Ganti Angka 8 dengan jumlah Post yang ingin ditampilkan.
  7. Jika Sudah Simpan Widget.
Jangan lupa pastikan template blog kalian sudah tersedia jquery
Related Post
Comment Post