Membuat Dan Memodifikasi Tampilan Recent Post Template Evo Magz

Membuat dan Memodifikasi Tampilan Recent Post Template Evo Magz sanggup dilakukan dengan cara yang sangat gampang, sebenaranya Template Evo Magz Sendiri sudah dilengkapi dengan fitur Recent Post, spesialuntuk saja fitur tersebut spesialuntuk menampilkan postingan/artikel perlabel, maka dari itu kalau kita ingin membuat Recent Post untuk keseluruhan artikel, maka kita perlu sedikit Iseng - Iseng Modifikasi Template Evo Magz.

Susunan setiap template tidak sama - beda dan mungkin tidak tiruana cara membuat recent post yang bertebaran di internet sanggup berhasil dilakukan di template evo magz, maksudnya secara teknis memang sanggup dan sama saja tapi tampilannya niscaya tidak sesuai dengan yang kita inginkan. Karena disini kita tidak spesialuntuk membuat Javascript untuk membuat sebuah Recent Post di Template Evo Magz, tapi juga harus sedikit menambahkan susunan CSS yang terdapat di sidebar, alasannya yaitu memang kali Saya ingin mencoba menampilkan Recent Post pada bab sidebar. 

Saya juga pernah mencoba untuk membuat Recent Post di Evo Magz memakai cara - cara yang sudah bertebaran di internet, umumnya memang beberapa tutorial di internet  memakai Javascript untuk menampilkan sebuah recent post di blog. Saya pernah mencoba beberapa tutorial dari beberapa blog dan Recent Post memang berhasil tampil, tapi kalau di perhatikan tampilannya memang kurang begitu rapih, jadi bahu-membahu Javascript tidak salah, melainkan CSS yang berada di sidebar yang harus di rubah/ditambah.

Dalam tutorial kali ini Saya ingin menampilkan Recent Post di sidebar kanan, Recent post yang ditampilkan spesialuntuk judulnya saja, diberikut yaitu langkah atau cara - caranya :

1. Masuk ke Blog dan menambahkanlah sebuah gadget HTML/Javascript baru
2. Copy isyarat yang ada di bawah ini

 <script type="text/javascript">  function showrecentposts(json){for(var i=0;i<numposts;i++){var   entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if  (i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if  (entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}  posttitle=posttitle.link(posturl);if(standardstyling)document.write  ('<li>');document.write(posttitle)}if(standardstyling)document.write('</li>')}  </script>  <script type="text/javascript">var numposts = 9;var showpostdate = false;var   showpostsummary = false;var numchars = 0;var standardstyling = true;</script> <script type="text/javascript" src="http://www.root93.co.id/feeds/posts/default?  orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts"></script> 

3. Pada Tahap ini bahu-membahu Recent Post sudah berhasil di tampilkan, tapi mungkin nanti tampilannya akan terlihat menyerupai gambar di bawah ini

Menurut Saya tampilan tersebut kurang rapih, ada titik - titik menyerupai sebuah penanda pada setiap post, dan titik - titik tersebut juga terlalu akrab dengan garis postingan/artikel.

4. Untuk memperbaiki tampilannya kita harus sedikit melaksanakan modifikasi
    terhadap class .sidebar li yang terdapat dalam template, kita harus
    merubah isi/properti CSS nya
5. Tekan CTRL+F kemudian masukan .sidebar li pada kolom pencarian script

6. Ganti properti yang terdapat dalam .sidebar li memakai properti atau
     CSS diberikut

 .sidebar li {  margin: 8px 0;  padding: 0 0 5px;  border-bottom: 1px solid #f0f0f0;  list-style: none; } 

5.Save Template, bila berhasil nanti tampilan resent postnya akan terlihat
   menyerupai diberikut

Menurut Saya tampilan tersebut terlihat lebih rapih dibandingkan dengan tampilan yang sebelumnya, Saya menambahkan garis bawah pada setiap post yang ditampikan dan mengatur jarakanya semoga tidak terlalu berdekatan.

Untuk menampilkan recent post perlabel atau berdasarkan label, Anda sanggup mengikuti langkah - langkahnya pada artikel Membuat Recent Post Sederhana Untuk Blog Berdasarkan Label

Share :