Membuat dan Memodifikasi Tampilan Recent Post Template Evo Magz

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

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

Saya juga pernah mencoba untuk membuat Recent Post di Evo Magz menggunakan cara - cara yang sudah bertebaran di internet, umumnya memang beberapa tutorial di internet menggunakan 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 sebenarnya 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 hanya judulnya saja, berikut adalah langkah atau cara - caranya :

1. Masuk ke Blog dan tambahkanlah sebuah gadget HTML/Javascript baru
2. Copy kode 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="/feeds/posts/default?

orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts"></script>

3. Pada Tahap ini sebenarnya Recent Post sudah berhasil di tampilkan, tapi mungkin nanti tampilannya akan terlihat seperti gambar di bawah ini

Recent Post berhasil ditampilkan, tapi ada titik - titiknya

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

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

6. Ganti properti yang terdapat dalam .sidebar li menggunakan properti atau
CSS berikut


.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
seperti berikut

Recent Post berhasil ditampilkan dengan rapih

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

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

Ahmad Zaelani

Seorang laki - laki biasa yang senang duduk sendirian di pinggir pantai, pengagum embun pagi dan lembayung senja, suka blogging, coding dan jogging. Moto hidupnya adalah hidup santai dan simpel

6 Responses to "Membuat dan Memodifikasi Tampilan Recent Post Template Evo Magz"

Mangs AbdulAugust 4, 2016 at 9:55 PM

mantep modivikasinya.
mas kayanya harus segera buat templete sendiri nih.
1. Ahmad ZaelaniAugust 5, 2016 at 7:52 AM
  
  jhahaha,,, duuh kayaknya saya masih butuh banyak waktu untuk belajar lagi mang... XD

Aero PulsaNovember 10, 2016 at 6:03 PM

kalo recent post yg by label gimana bikinnya kang?
1. Ahmad ZaelaniNovember 11, 2016 at 9:38 AM
  
  Kalau recent post perlabel kan udah ada di evo dibagian bawah postingan,,, kita tinggal tulis nama labelnya dalam html javascript...
  
2. abiemudaNovember 25, 2016 at 6:43 AM
  
  Kalau mau ditambahin thumnail gimana caranya kang ?

AbimudaNovember 23, 2016 at 6:33 PM

Bagus gan ... ane pingin yang pake thumnail. Bisa gak gan. Soalnya cari-cari di blog tutorial ga da yang cocok sama Evo ....

Membuat dan Memodifikasi Tampilan Recent Post Template Evo Magz

Related Posts :

6 Responses to "Membuat dan Memodifikasi Tampilan Recent Post Template Evo Magz"