Cara buat widget Recent Post (Postingan Terbaru) di Blog yang Unik

Apaka kabar berjumpa lagi di ew tutorial, kali ini kita akan menjelaskan "Cara buat widget Recent Post (Postingan Terbaru) di Blog yang Unik" secara tuntas, ayo simak selengkapnya ...

Mastimon.Com - Widget Postingan Terbaru alias biasa kita kenal sengan buah bibir Recent Post ala sebuah Blog diperlukan biar pengunjung enteng melihat yang baru. Banyak banget Widget yang bisa kita gunakan mulai dari hanya tulisan saja sampai dengan menggunakan thumbail gambar. Dengan fitur ini bahwa pengunjung akan betah berlama lama untuk membaca tulisan kita.

Ini adalah Widget milik Template VioMagz milik Mas Sugeng. Jika ala sebelumnya hanya menampilkan tulisan tetapi tak ada batasan garis dan icon pensil ala kepan kalimatnya. Tampilan Recent Post ini abdi blengok ala ala terbaru mulai 2.4 sampai saat ini sudah ala 3.1. Banyak yang menanyakan ke abdi bagaimana sih cara melahirkan wiget tersebut mas ?

Disini abdi bukan membuatkan untuk sobat tetapi abdi ambilkan Kode CSSnya dan aba-aba HTML untuk menampilkan Postingan terbaru tersebut. Caranya cukup enteng dan tak menambah beban berat pagespeed Blog. Tampilannya cukup unik dan menarik walaupun sekilas terlihat sederhana karena tak menggunakan Gambar. Baca Juga : Widget Recent Post dengan Tab Next dan Gambar.

Cara buat widget Recent Post (Postingan Terbaru) di Blog yang Unik

Langkah 1 : Silahkan kalian masuk ke Daskboard Blogger kalian lalu pilih Tema >> Edit HTML >> Letakkan aba-aba CSS dibawah ini tepat dimana Kode CSS lainnya diletakkan. Cari saja Kode "Blogger CSS" dan letakkan aba-aba dibawah ini tepat dibawah CSS Tersebut. Jangan kurang ingat Save.

/* 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: "\f14b";

    font-family: FontAwesome;

    font-style: normal;

    font-weight: normal;

    text-decoration: inherit;

    margin-right: 6px;



.artikel-terbaru ul li:before

    content: "\f14b";



.list-label-widget-content ul li:before

    content: "\f07b";



.LinkList ul li:before

    content: "\f14c";



.PageList ul li:before

    content: "\f249";

Lihat Gambar berikut ini :

Langkah 2 : Selanjutnya masuk ke Tata Letak >> Tambahkan Ganget

Langkah 3 : Klik tanda + pada kesukaan HTML/JavaScript

 

Langkah 4 : Tuliskan ala kolom judul "Artikel Terbaru" dan masukkan Kode HTML ala konten dibawahnya. Terakhir klik Simpan. 

<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=10&alt=json-in-script&callback=artikelterbaru"></script>

</div>

Cukup enteng buka cara melahirkan Recent Post alias widget Postingan Terbaru di Blog sama seperti pengejawantahan milik Template VioMagz. Jika kalian masih kebinggungan bisa melihatnya melalui Tutorial yang abdi upload di Youtube. Selamat mencoba dan semoga berhasil. Baca Juga : Widget Postingan Terbaru dengan thumbail alit dan cantik.

Vidio Youtube Cara buat Recent Post unik hanya Tulisan

", numPosts: 0, summaryLength: 370, titleLength: "auto", thumbnailSize: 250, noImage: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoqbHXFMrz1_3q5nLCsOI6D1nmftufOcFykMu4yJbhUwJ5JBapj1PHKWV9hsUluJaVUftWMocNBphMg4Lfmy5pEVyt5-da9Ynp4AsPVfX9c7AfoOTcQCdl-5ZHmj9bpTL8wNNbfDZPJocf/w250-c-h250/no-image.png", containerId: "related-post-7092343419471523762", newTabLink: false, moreText: "Read More", widgetStyle: 3, callBack: function() ;

Begitulah pembahasan "Cara buat widget Recent Post (Postingan Terbaru) di Blog yang Unik" terimakasih atas kunjungannya

artikel ini ke dalam kategori bloggingpro job board, blogging adalah, blogging platform,

artikel ini bersumber dari berbagai artikel yang ada di google searcing.