Masasih.id
No Result
View All Result
  • Login
  • Home
  • Berita
  • Kesehatan
  • Teknologi
  • Bisnis
  • Olahraga
  • Inspirasi
  • Lainnya
    • Tips
    • Otomotif
    • Belajar Islam
    • Ramadhan
    • Seleb
    • Internasional
  • Home
  • Berita
  • Kesehatan
  • Teknologi
  • Bisnis
  • Olahraga
  • Inspirasi
  • Lainnya
    • Tips
    • Otomotif
    • Belajar Islam
    • Ramadhan
    • Seleb
    • Internasional
No Result
View All Result
Masasih.id
No Result
View All Result

Beranda » Tutorial Blogging » Cara Buat Widget Recent Post (Postingan Terbaru) Di Blog Yang Unik

Cara Buat Widget Recent Post (Postingan Terbaru) Di Blog Yang Unik

11 Oktober 2019
in Tutorial Blogging
Cara Buat Widget Recent Post (Postingan Terbaru) Di Blog Yang Unik

Mastimon.Com – Widget Postingan Terbaru atau biasa kita kenal sengan sebutan Recent Post pada sebuah Blog diharapkan supaya pengunjung gampang melihat yang baru. Banyak sekali Widget yang dapat kita gunakan mulai dari hanya goresan pena saja hingga dengan memakai thumbail gambar. Dengan fitur ini maka pengunjung akan betah berlama usang untuk membaca goresan pena kita.

 Widget Postingan Terbaru atau biasa kita kenal sengan sebutan Recent Post pada sebuah Blo Cara buat widget Recent Post (Postingan Terbaru) di Blog yang Unik

Ini yaitu Widget milik Template VioMagz milik Mas Sugeng. Jika versi sebelumnya hanya menampilkan goresan pena tetapi tidak ada batasan garis dan icon pensil pada kepan kalimatnya. Tampilan Recent Post ini aku lihat pada versi terbaru mulai 2.4 hingga ketika ini sudah versi 3.1. Banyak yang menanyakan ke aku bagaimana sih cara menciptakan wiget tersebut mas ?

Baca Juga:  Cara Pasang Iklan Page Level Ads Adsense Yang Tampil Didepan Dan Dibawah Versi Mobile

Disini aku bukan menyebarkan untuk teman tetapi aku ambilkan Kode CSSnya dan instruksi HTML untuk menampilkan Postingan terbaru tersebut. Caranya cukup gampang dan tidak menambah beban berat pagespeed Blog. Tampilannya cukup unik dan menarik walaupun sekilas terlihat sederhana alasannya yaitu tidak memakai 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 masuk ke Daskboard Blogger kalian kemudian pilih Tema >> Edit HTML >> Letakkan instruksi CSS dibawah ini sempurna dimana Kode CSS lainnya diletakkan. Cari saja Kode “Blogger CSS” dan letakkan instruksi dibawah ini sempurna 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 masuk ke Tata Letak >> Tambahkan Ganget

Langkah 3 : Klik tanda + pada pilihan HTML/JavaScript

 
Langkah 4 : 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 gampang buka cara menciptakan Recent Post atau widget Postingan Terbaru di Blog sama menyerupai tampilan milik Template VioMagz. Jika kalian masih kebinggungan dapat melihatnya melalui Tutorial yang aku upload di Youtube. Selamat mencoba dan agar berhasil. Baca Juga : Widget Postingan Terbaru dengan thumbail kecil dan cantik.

Vidio Youtube Cara buat Recent Post unik hanya Tulisan


Sumber https://mastimon.blogspot.com

Baca Juga:  3 Template Premium Seo Friendly Untuk Pemula Blogger
Tags: Tutorial Blogging
ShareTweetPin

RelatedPosts

Seo Blogger Vs WordPress Mana Yang Lebih Bagus
Tutorial Blogging

Seo Blogger Vs WordPress Mana Yang Lebih Bagus

14 Agustus 2019
Cara Google Adsense Membayar Kita Sebagai Publisher Iklan
Tutorial Blogging

Cara Google Adsense Membayar Kita Sebagai Publisher Iklan

11 Oktober 2019
18 Meningkatkan Secara Optimal Seo Blogger Lengkap Terbaru Untuk Pemula
Tutorial Blogging

18 Meningkatkan Secara Optimal Seo Blogger Lengkap Terbaru Untuk Pemula

11 Oktober 2019
10 Blogger Indonesia Yang Populer Dan Sukses
Tutorial Blogging

10 Blogger Indonesia Yang Populer Dan Sukses

14 Agustus 2019
8 Algoritma Google Terbaru Yang Wajib Diketahui Supaya Blog Bertahan
Tutorial Blogging

8 Algoritma Google Terbaru Yang Wajib Diketahui Supaya Blog Bertahan

14 Agustus 2019
6 Hal Yang Perlu Diperhatikan Dikala Menciptakan Website Sendiri
Tutorial Blogging

6 Hal Yang Perlu Diperhatikan Dikala Menciptakan Website Sendiri

14 Agustus 2019
Load More
Tanaman Hias Janda Bolong, Ada yang SangatLangka
Tanaman Hias

7 Jenis Tanaman Hias Janda Bolong, Ada yang Sangat Langka

by Masasih.id
2 Maret 2021
0

MASASIH.ID - Kamu perlu tahu fakta menarik nih, setidaknya ada 48 jenis varietas monstera dengan berbagai ukuran, warna dan konfigurasi...

Read more
Tanaman Hias Indoor yang Mudah Dirawat, Tak Mudah Mati

7 Tanaman Hias Indoor yang Mudah Dirawat, Tak Mudah Mati

28 Februari 2021
cara membuat hand sanitizer

Cara Membuat Hand Sanitizer Sendiri Menurut WHO, Mudah dan Aman

16 Maret 2020
Begini Bentuk Virus Corona Jika Dilihat dari Jarak Dekat

Begini Bentuk Virus Corona Jika Dilihat dari Jarak Dekat

16 Maret 2020
arti lockdown dan karantina

Mengenal Arti Lockdown, Isolasi dan Karantina Berserta Perbedaannya

13 Maret 2020
  • Indeks
  • Kode Etik
  • Redaksi
  • Privacy Policy
  • Disclaimer
  • Tentang Kami
  • Kontak Kami
  • Form Pengaduan
  • Pedoman Media Siber

Copyright © 2020 Masasih.id - All Right Reserved.

No Result
View All Result
  • Home
  • Berita
  • Kesehatan
  • Teknologi
  • Bisnis
  • Olahraga
  • Inspirasi
  • Lainnya
    • Tips
    • Otomotif
    • Belajar Islam
    • Ramadhan
    • Seleb
    • Internasional

Copyright © 2020 Masasih.id - All Right Reserved.

Welcome Back!

Login to your account below

Forgotten Password?

Create New Account!

Fill the forms bellow to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In
Are you sure want to unlock this post?
Unlock left : 0
Are you sure want to cancel subscription?