Cara Membuat Widget Artikel Terbaru Di Blog Yang Keren dan Simpel

Gammafisblog.com - Bagaimana Cara Membuat Cara Membuat Widget Artikel Terbaru Di Blog Yang Keren. Recent Post atau Widget Artikel Terbaru adalah sebuah widget berisikan kode html yang menampilkan sejumlah artikel yang baru terbaru di posting. Jumlah artikel terbaru yang ditampilkan sesuai dengan apa yang kita inginkan.

Karena saya menggunakan template VioMagz maka pada kesempatan kali ini saya akan menjelaskan Cara Membuat Widget Artikel Terbaru di Template VioMagz. Namun, walaupun demikian anda juga masih dapat menggunakannya pada template selain VioMagz. Widget ini sangat banyak digunakan oleh para blogger salah satunya adalah Mas Timon pemilik blog mastimon.com.

Apa ke lebihan anda menggunakan widget artikel terbaru atau Recent Post?. Nah, dengan widget ini maka kita dapat terus mempromosikan artikel terbaru yang di posting pada blog kepada pembaca. Tujuannya adalah untuk memberitahukan kepada pembaca bahwa di blog anda ada informasi terbaru. Dengan adanya promosi artikel terbaru maka dapat mengundang minat pengunjung untuk membaca. Apalagi artikel terbaru yang anda tulis sesuai dengan keperluan pembaca.

Baca Juga : Cara Menaikkan Rank Alexa Blog Dengan Cepat Dan Mudah

Selain widget artikel terbaru anda juga bisa memasang widget lainnya. Misalnya saja anda bisa memasang widget popular post. Namun, ada kekurangan dan kelebihan ketika anda menggunakan widget popular post. Kelebihannya adalah pembaca bisa tau bahwa artikel tersebut sedang trending. Ini tentu akan dapat memancing minat pembaca juga. Namun, menurut saya ada kekurangannya ketika anda menggunakan widget ini.

Dengan adanya widget ini maka pesaing anda atau blog kompetitor akan tau semua artikel yang sedang trending melalui blog anda. Dengan begitu mereka akan membuat artikel yang sama juga. Mungkin inilah alasan beberapa blogger memilih tidak memasang widget ini dan lebih memilih menggunakan widget Recent Post (Artikel terbaru). Demikian juga alasan saya tidak menggunakan widget tersebut. Namun kembali lagi kepada tujuan dan kebutuhan blogger masing-masing.

Jika anda ingin memasang widget artikel terbaru maka anda harus perhatikan bagaimana cara memasang kode-kode html tersebut. Jika anda menggunakan template VioMagz maka tutorial kali ini akan sangat muda bagi anda. Namun, jika anda menggunakan template selain VioMagz maka anda harus tau dimana saja harus anda simpan kode html dan css berikut ini. Baik, untuk tidak memperpanjang kata, mari simak pembahasan berikut ini.

Cara Membuat Widget Artikel Terbaru Di Blog Yang Keren dan Simpel

Ada dua cara yang akan saya jelaskan disini, yang pertama adalah cara membuat widget artikel terbaru di template VioMagz dan yang kedua adalah selain template VioMagz. Nah, dengan begitu maka anda akan bisa dengan mudah menerapkan nya.

A. Cara Membuat Widget Artikel Terbaru di Template VioMagz

Jika anda menggunakan template VioMagz maka anda tidak perlu repot-repot dalam memasang widget artikel terbaru. Anda hanya perlu memasang kode berikut ini pada teta letak blog anda.

Buka blog anda kemudian masuk ke Tata Letak >> Tambahkan Widget HTML/JavaScript >> Copy dan Paste Kode Berikut ini >> Jika sudah maka klik Save.

<div class='artikel-terbaru'>
<script>
function artikelterbaru(e){document.write("<ul>");for(var t=0;t<e.feed.entry.length;t++){for(var r=0;r<e.feed.entry[t].link.length&&"alternate"!=e.feed.entry[t].link[r].rel;r++);var n="<li><a href="+("'"+e.feed.entry[t].link[r].href+"'")+'">'+e.feed.entry[t].title.$t+"</a> </li>";document.write(n)}document.write("</ul>")}
</script>
<script src="/feeds/posts/summary/?max-results=8&alt=json-in-script&callback=artikelterbaru"></script>
</div>

Catatan : anda bisa merubah jumlah max-results=8 sesuai dengan jumlah artikel terbaru yang ingin anda tampilkan.

Baca Juga : Cara Menghapus URL Artikel Blog di Google Search Console Melalui HP atau Laptop

B. Cara Membuat Widget Artikel Terbaru Selain Template VioMagz

Jika anda tidak menggunakan template VioMagz maka anda masih dapat memasang Widget Artikel Terbau Keren dan Simple berikut ini. Ada sedikit perbedaan dari cara pertama. Disini anda harus memasang kode css terlebih dahulu. Code ini akan membuat tampilan widget menjadi lebih keren dan sederhana. Berikut adalah langkah-langkah yang harus anda lakukan.

1. Buka blogger.com kemudian masuk ke menu Edit HTML
2. Cari kode </style> dengan cara CTRL + F. Bisa saja cara penulisan kode html </style> anda berbeda. Intinya adalah anda harus mencari kode dari penutup </style> pada template yang anda gunakan.
3. Paste Kode CSS Berikut ini di atas kode </style>

/* Artikel Terbaru */
.artikel-terbaru ul li {
    border-bottom: 2px dotted $(label.border.color);
    padding-bottom: 8px;
    margin-bottom: 8px;
    font-weight: 500;
}
.list-label-widget-content ul li, .LinkList ul li, .PageList ul li {
    border-bottom: 2px dotted $(label.border.color);
    padding-bottom: 5px;
}
.artikel-terbaru ul li:before, .list-label-widget-content ul li:before, .LinkList ul li:before, .PageList ul li:before {
    content: &quot;\f14b&quot;;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    margin-right: 6px;
}
.artikel-terbaru ul li:before {
    content: &quot;\f14b&quot;;
}
.list-label-widget-content ul li:before {
    content: &quot;\f07b&quot;;
}
.LinkList ul li:before {
    content: &quot;\f14c&quot;;
}
.PageList ul li:before {
    content: &quot;\f249&quot;;
}

4. Setelah memasang kode tersebut maka langkah selanjutnya adalah memasang kode HTML Artikel Terbaru.
5. Buka menu Tata Letak Blog >> Tambahkan Widget HTML/JavaScript >> Copy dan Paste Kode Berikut ini >> Jika sudah maka klik Save. 

<div class='artikel-terbaru'>
<script>
function artikelterbaru(e){document.write("<ul>");for(var t=0;t<e.feed.entry.length;t++){for(var r=0;r<e.feed.entry[t].link.length&&"alternate"!=e.feed.entry[t].link[r].rel;r++);var n="<li><a href="+("'"+e.feed.entry[t].link[r].href+"'")+'">'+e.feed.entry[t].title.$t+"</a> </li>";document.write(n)}document.write("</ul>")}
</script>
<script src="/feeds/posts/summary/?max-results=8&alt=json-in-script&callback=artikelterbaru"></script>
</div>

Catatan : Ganti jumlah max-results=8 sesuai dengan jumlah artikel yang ingin ditampilkan.

Itulah artikel tentang Cara Membuat Widget Artikel Terbaru Di Blog Yang Keren dan Simpel. Semoga artikel ini dapat bermanfaat untuk anda. Widget Artikel Terbaru yang satu ini banyak digunakan oleh para blogger tak terkecuali saya sendiri.

Baca Juga : Cara Mendapatkan Pengunjung Blog 1500 - 2000 Perhari

Jangan lupa share artikel ini kepada teman-teman anda agar mereka juga tahu apa yang anda ketahui. Mari kita berbagi informasi bermanfaat kepada semua orang. Jangan lupa juga follow blog ini agar bisa mendapatkan informasi terbaru dari kami.

Share this post