Cara Menambahkan Widget Recent Post Unik di Blog Seperti Mastimon

www.retakiya.com

RETAKIYA.COM - Widget Recent Post atau Postingan Terbaru memang sangat penting untuk sebuah blog, selain membuat penampilan website menjadi bagus dapat juga membuat pengunjung tertarik untuk selalu mengunjungi blog kamu. Beberapa hari ini saya sering berkunjung ke website mastimon, setelah melihat widget yang ada di blog tersebut saya jadi tertarik untuk mencobanya, alhasil blog saya menjadi tertata rapi dan menarik untuk dipandang. Namun, saya juga kepikiran untuk membagikan Scipt html widget postingan terbaru untuk kalian.

Widget yang ada dalam blog juga berpengaruh bagi kecepatan loading website kamu, Salah satu faktor pengunjung enggan untuk berkunjung ke website kamu jika loadingnya agak lemot, tanpa basa-basi lagi langsung saja saya akan memberikan kalian tutorial membuat Recent Post unik.

Baca Juga:
  • Cara menghentikan Pelacakan Tayangan Halaman
  • Cara mudah membuat Disclaimer untuk Blog
  • Cara membeli Domain untuk blog di Namecheap


Cara Membuat dan Menambahkan Recent Post Unik


Pertama, Langkah pertama login dulu akun blogger kamu, setelah itu tekan pengaturan "Tema", Lalu tekan "Edit Html". Lihat gambar yang saya kasih dibawah ini:



Kedua, Setelah masuk ke halaman edit html, Silahkan tekan "CTRL+F" dengan menulis "Blogger CSS". Kedua silahkan selang 1 baris di bawah Quick Edit seperti yang ada dalam gambar:



Ketiga, Kemudian kalian paste kode Html yang saya berikan dibawah gambar ini, jangan lupa di save. Contoh kodenya dapat dilihat dalam gambar berikut:




/* 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"; 
}
Keempat, Tahap keempat tinggal menekan "Tata Letak", Berikutnya tekan tombol "Tambahkan Gadget". Jika belum mengerti perhatikan gambar berikut ini:


Kelima, Langkah selanjutnya silahkan tekan icon "Tambah atau +", Terlebih dahulu silahkan perhatikan nama "HTML/Javascript", Jika terlalu susah lihat gambar kelima.



Keenam, Jika sudah menambah Html/javascript, maka tampilannya seperti yang ada dalam gambar dibawah. Pertama yang harus kalian lakukan adalah mengisi judul dengan nama "Postingan Terbaru", Kedua pastekan atau tempel "Kode Html Kedua" yang saya kasih dibawah ini, lalu simpan widgetnya.




<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>
Baca Juga: Cara Menghapus Situs Blog di Blogspot Secara Permanen

Itulah tutorial cara menambahkan widget recent post unik yang telah saya kasih untuk kalian, terima kasih telah mengunjungi website saya. Jika kalian punya Kritik dan Saran silahkan komentar dibawah.

0 Response to "Cara Menambahkan Widget Recent Post Unik di Blog Seperti Mastimon"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel