Cara Mudah Membuat Widget Recent Post (Icon Pencil) di Blog - Otak Kita

Cara Mudah Membuat Widget Recent Post (Icon Pencil) di Blog



Otak Kita - Cara Mudah Membuat Widget Recent Post (Icon Pencil), dalam tutorial kali ini admin akan memberikan tutorial membuat cara membuat recent post responsive di blog yang ber icon Pencil, Widget Postingan Terbaru atau yang biasa sobat kenal dengan sebutan Recent Post pada sebuah Blog diperlukan supaya pengunjung mudah melihat hal yang baru terutama postingan terbaru sobat. Banyak sekali Widget yang bisa sobat gunakan atau dapatkan di google mulai dari hanya tulisan saja sampai dengan menggunakan thumbnail gambar. Dengan fitur ini sobat maka pengunjung akan betah berlama - lama untuk membaca tulisan sobat.

Disini admin bukan membuatkan untuk sobat tetapi admin mengambilkan kode CSSnya dan Kode HTML untuk menampilkan sebuah Postingan terbaru tersebut. Caranya juga cukuplah mudah dan tidak menambah beban berat pagespeed pada blog sobat. Tampilannya yang cukup unik dan menarik tanpa menggunakan gambar hanya menampilkan icon pencil

Cara Mudah Membuat Widget Recent Post (Icon Pencil) di Blog

Langkah 1 : Silahkan sobat masuk ke mendu Dashboard Blogger sobat lalu pilih Tema >> Edit HTML >> dan Sobat Letakkan kode CSS dibawah ini tepat dimana Kode CSS lainnya diletakkan. Sobat tinggal cari saja Kode "Blogger CSS" dan letakkan kode dibawah ini tepat dibawah CSS Tersebut Jika Tidak ada Kode "Blogger CSS" silahkan sobat letakkan sebelum kode </style> . Jangan lupa sobat 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";
}




Langkah 2 : Selanjutnya sobat masuk ke Tata Letak >> Tambahkan Gagdet




Langkah 3 : Sobat Tinggal Klik tanda + pada pilihan HTML/JavaScript




Langkah 4 : Sobat Tinggal Tuliskan pada kolom judul "Artikel Terbaru" dan masukkan Kode HTML pada 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 mudah bukan dalam membuat widget recent post didalam blogger ini , ya mungkin sekilas itu saja tutorial yang bisa admin berikan , semoga bermanfaat untuk kalian semua ,
Salam Blogging,

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel