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

Allow, selamat siang di blog AUTOGOBLOOG , pada kali ini akan membawakan tentang auto blogging tutorial Cara buat widget Recent Post (Postingan Terbaru) di Blog yang Unik simak selengkapnya

Mastimon.Com - Widget Postingan Terbaru alias biasa kita mengenali sengan sebutan Recent Post atas sebuah Blog diperlukan supaya pengunjung enteng melihat yang baru. Banyak sekali Widget yang bisa kita gunakan dari dari sekadar catatan saja sampai dengan menggunakan thumbail gambar. Dengan fitur ini maka pengunjung akan betah berlama lama untuk membaca catatan kita.

Ini adalah Widget hak Template VioMagz hak Mas Sugeng. Jika ala sebelumnya sekadar menampilkan catatan tetapi tidak ada batasan garis dan icon alat tulis atas kepan kalimatnya. Tampilan Recent Post ini saya lihat atas ala terbelakang dari 2.4 sampai era ini sudah ala 3.1. Banyak yang menanyakan ke saya betapa dengan dengan jalan apa sih kaidah membuat wiget tersebut akang ?

Disini saya bukan membuatkan untuk sahabat ikhwan tetapi saya ambilkan Kode CSSnya dan asas HTML untuk menampilkan Postingan terbelakang tersebut. Caranya layak enteng dan tidak menambah bahara berat pagespeed Blog. Tampilannya layak unik dan menarik biarpun sekilas terlihat sederhana karena tidak 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 bersetuju ke Daskboard Blogger kalian lalu seleksi -- kasih berat sebelah Tema >> Edit HTML >> Letakkan asas CSS dibawah ini tepat dimana Kode CSS lainnya diletakkan. Cari saja Kode "Blogger CSS" dan letakkan asas dibawah ini tepat dibawah CSS Tersebut. Jangan lupa 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 bersetuju ke Tata Letak >> Tambahkan Ganget

Langkah 3 : Klik tanda + pada pilihan HTML/JavaScript

 

Langkah 4 : Tuliskan atas kolom judul "Artikel Terbaru" dan masukkan Kode HTML atas 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 kaidah membuat Recent Post alias widget Postingan Terbaru di Blog sama seperti tampilan hak Template VioMagz. Jika kalian masih kebinggungan bisa melihatnya melalui Tutorial yang saya upload di Youtube. Selamat mencoba dan semoga berhasil. Baca Juga : Widget Postingan Terbaru dengan thumbail kecil dan cantik.

Vidio Youtube Cara buat Recent Post unik sekadar Tulisan

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

Begitulah penjelasan mengenai Cara buat widget Recent Post (Postingan Terbaru) di Blog yang Unik semoga tulisan ini menambah wawasan salam

Tulisan ini diposting pada tag auto blogging tutorial, blogging tutorial in hindi,

Bagikan Artikel ini