f Cara Membuat Widget Postingan Terbaru Di Blogger Yang Keren,Mudah Dan Ringan - Konten Cara Viral

Cara Membuat Widget Postingan Terbaru Di Blogger Yang Keren,Mudah Dan Ringan

Widget Recent Post Blogger


Widget Artikel Terbaru atau yang biasa dikenal Widget Recent Post Blogger ini memiliki berbagai tampilan menarik dan salah satu contohnya seperti blognya Mastimon, kalian bisa liat demonya di kontencaraviral.com ini karena bloggku.com juga tertarik utuk membuatnya, karena menurut kontencaraviral.com tampilannya sangat simpel tapi terlihat keren yang tentunya sangat responsif diberbagai ukuran.

Template yang kontencaraviral.com gunakan sama dengan templatenya Mastimon yaitu Viomagz hanya saja berbeda versi, tetapi Widget Postingan Terbaru ini bisa diterapkan pada semua template selagi penempatan kode htmlnya benar.

Untuk cara membuat/pasangan tidak begitu susah kalian hanya perlu meg-copy kode html dibawah ini kedalam template blog kalian, jika kalian tertarik dan ingin membuatnya simak tutorial dibawah ini.

Cara Membuat Widget Postingan Terbaru


  • Silakan kalian login ke blognya masing-masing Blogger.com
  • Masuk ke menu Tema => Edit HTML
  • Cari kode </style> letakkan kode dibawah ini tepat diatas 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: "\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"; 
}

  • Jika sudah simpan Tema
  • Sekarang kalian buat Widget untuk Postingan Terbaru.
  • Masuk ke tata letak => pada halaman tata letak silakan kalian pilih posisi untuk menampilkan Widget Postingan Terbaru, saya merekomendasikan dibagian Sidebar, lalu kalian klik Tambahkan Gadget => lalu pilih HTML/JavaScrpit, masukkan judul Widget [Postingan Terbaru] lalu pada kolom dibawahnya masukkan kode HTML ini dan 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> 


  • Angka 10 berfungsi untuk mengatur seberapa banyak judul artikel yang akan ditampilkan pada Widget Postingan Terbaru. Kalian ubah sesuai kebutuhan kalian saja.

Bagaimana mana ? Mudahan bukan untuk Cara Membuat Widget Postingan Terbaru ? Baiklah sampai disini pertemuan kita kali ini, jika ada yang kurang dimengerti silakan kalian tanyakan pada kolom komentar dibawah.

0 Response to "Cara Membuat Widget Postingan Terbaru Di Blogger Yang Keren,Mudah Dan Ringan"

Posting Komentar

close

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel