Cara Membuat Widget Artikel Terbaru Di Blog Yang Keren Serta Simpel

Gemboxin - Bagaimana Cara Membuat Cara Membuat Widget Artikel Terbaru Di Blog Yang Keren. Recent Post atau Widget Artikel Terbaru ialah 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 bakal menyatakan 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 ialah 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 ialah buat memberitahukan kepada pembaca kalau di blog anda ada informasi terbaru. Dengan adanya promosi artikel terbaru maka dapat mengundang minat pengunjung buat membaca. Apalagi artikel terbaru yang anda tulis sesuai dengan keperluan pembaca.

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

tidak cuma widget artikel terbaru anda juga bisa memasang widget lainnya. Misalnya saja anda bisa memasang widget popular post. Namun, ada kekurangan serta kelebihan saat anda menggunakan widget popular post. Kelebihannya ialah pembaca bisa tahu kalau artikel tersebut tengah trending. Ini tentu bakal dapat memancing minat pembaca juga. Namun, menurut saya ada kekurangannya saat anda menggunakan widget ini.

Dengan adanya widget ini maka pesaing anda atau blog kompetitor bakal tahu semua artikel yang tengah trending lewat blog anda. Dengan begitu mereka bakal membuat artikel yang sama juga. Mungkin inilah alasan beberapa blogger memilih enggak memasang widget ini serta lebih memilih menggunakan widget Recent Post (Artikel terbaru). Demikian juga alasan saya enggak menggunakan widget tersebut. Namun kembali lagi kepada tujuan serta kebutuhan blogger masing-masing.

kalau anda mau memasang widget artikel terbaru maka anda perlu perhatikan bagaimana cara memasang kode-kode html tersebut. kalau anda menggunakan template VioMagz maka tutorial kali ini bakal sangat muda bagi anda. Namun, jika anda menggunakan template selain VioMagz maka anda perlu tahu dimana saja perlu anda simpan kode html serta css berikut ini. Baik, buat enggak memperpanjang kata, mari simak pembahasan berikut ini.

Cara Membuat Widget Artikel Terbaru Di Blog Yang Keren serta Simpel

Ada dua cara yang bakal saya jelaskan disini, yang pertama ialah cara membuat widget artikel terbaru di template VioMagz serta yang kedua ialah selain template VioMagz. Nah, dengan begitu maka anda bakal bisa dengan gampang menerapkan nya.

A. Cara Membuat Widget Artikel Terbaru di Template VioMagz

kalau anda menggunakan template VioMagz maka anda enggak perlu repot-repot dalam memasang widget artikel terbaru. Kalian cuma perlu memasang kode berikut ini pada teta letak blog anda.

Buka blog anda kemudian masuk ke Tata Letak >> Tambahkan Widget HTML/JavaScript >> Copy serta Paste Kode Berikut ini >> kalau Telah 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 mau anda tampilkan.

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

B. Cara Membuat Widget Artikel Terbaru tidak cuma Template VioMagz

kalau anda enggak menggunakan template VioMagz maka anda masih dapat memasang Widget Artikel Terbau Keren serta Simple berikut ini. Ada sedikit perbedaan dari cara pertama. Disini anda perlu memasang kode css terlebih dahulu. Code ini bakal membuat tampilan widget menjadi lebih keren serta sederhana. Berikut ialah langkah-langkah yang perlu 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 ialah anda perlu 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 tahap selanjutnya ialah memasang kode HTML Artikel Terbaru.
5. Buka menu Tata Letak Blog >> Tambahkan Widget HTML/JavaScript >> Copy serta Paste Kode Berikut ini >> kalau Telah 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 mau ditampilkan.

Itulah artikel tentang Cara Membuat Widget Artikel Terbaru Di Blog Yang Keren serta Simpel. Semoga artikel ini dapat bermanfaat buat anda. Widget Artikel Terbaru yang satu ini banyak digunakan oleh para blogger enggak 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.

Bagikan Artikel ini