Cara Membuat Widget Postingan Terbaru Seperti Mastimon

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 bloggku.com ini karena bloggku.com juga tertarik utuk membuatnya, karena menurut bloggku.com tampilannya sangat simpel tapi terlihat keren yang tentunya sangat responsif diberbagai ukuran.

Template yang bloggku.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.

5 Responses to "Cara Membuat Widget Postingan Terbaru Seperti Mastimon"

  1. Ohh gini ya caranya... baru tau saya terimakasih gan sangat membantu

    ReplyDelete
  2. Iya ya, blog ku gak ada widget postingan terbarunya, sip2 mantul gan

    ReplyDelete
  3. apakah sama saja dengan recent post atau beda ? bingung ,...

    ReplyDelete
  4. WIN323 - Merupakan Situs Online Betting NO.1 Di Indonesia.
    Dengan WIN RATE tertinggi 97% + Bonus Bonus Super Heboh yang bisa
    anda dapatkan setiap hari nya!!

    Bonus Bonus Super Heboh Dari WIN323
    ~ Bonus New Member : 20%
    ~ Bonus Next Deposit : 5%
    ~ Bonus Cash Back : 5%

    Minimal Deposit : Rp.25.000
    Minimal Withdraw : Rp.25.000

    Tunggu apalagi mari langsung bergabung bersama WIN323 dan jadilah
    pemenang di setiap taruhan yang Bossku lakukan :)

    Contact Person WIN323 :
    WA : +855 7863 3430
    WA : +855 7863 3425
    Line: Official.win323

    ReplyDelete
  5. wah bagus infonya www.klikpoin.com

    ReplyDelete

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel