RISWAN NET
  • Home
  • Content Placement
  • Tekno
    Perbedaan JPG dan JPEG pada Format Gambar

    Ini Dia Perbedaan JPG dan JPEG pada Format Gambar

    Keuntungan Serta Resiko dari Keyboard Protector

    Keuntungan Serta Resiko dari Keyboard Protector

    Hal Yang Harus Dikuasai Oleh Seorang Programmer

    Hal Yang Harus Dikuasai Oleh Seorang Programmer

    Jenis Jenis Komputer Serta Pembahasannya

    Jenis-Jenis Komputer Serta Penjelasannya

    Bagaimana Cara Membuat Shortcut URL Website di Desktop

    Cara Membuat Shortcut URL Website di Desktop

    Cara Transfer FIle Dari Komputer ke RDP

    Cara Transfer atau Copy File dari Komputer ke RDP

    Trending Tags

    • Asus X555
    • Komputer
    • CES 2017
    • Xiaomi
  • Internet
  • Komputer
  • Bisnisnew
No Result
View All Result
  • Home
  • Content Placement
  • Tekno
    Perbedaan JPG dan JPEG pada Format Gambar

    Ini Dia Perbedaan JPG dan JPEG pada Format Gambar

    Keuntungan Serta Resiko dari Keyboard Protector

    Keuntungan Serta Resiko dari Keyboard Protector

    Hal Yang Harus Dikuasai Oleh Seorang Programmer

    Hal Yang Harus Dikuasai Oleh Seorang Programmer

    Jenis Jenis Komputer Serta Pembahasannya

    Jenis-Jenis Komputer Serta Penjelasannya

    Bagaimana Cara Membuat Shortcut URL Website di Desktop

    Cara Membuat Shortcut URL Website di Desktop

    Cara Transfer FIle Dari Komputer ke RDP

    Cara Transfer atau Copy File dari Komputer ke RDP

    Trending Tags

    • Asus X555
    • Komputer
    • CES 2017
    • Xiaomi
  • Internet
  • Komputer
  • Bisnisnew
No Result
View All Result
RISWAN NET
No Result
View All Result
Home Blogger

Cara Membuat Recent Post by Label Simple pada Blog

Deni Riswana by Deni Riswana
16 September 2017
in Blogger
259 2
7
261
SHARES
13.1k
VIEWS
ShareTweetSend

Cara Membuat Recent Post by Label Simple pada Blog – Helo sobat, sedikit kaku menulis artikel ini setelah kurang lebih dua bulan saya tidak update artikel untuk blog Riswan.net disebabkan ada mengurus kepentingan yang lain. Oke pada kesempatan kali ini saya akan berbagi tutorial Cara Membuat Recent Post by Label Simple pada Blog. Meskipun tutorial membuat recent post by label sudah banyak di google, saya hanya mengabulkan permintaan temen saya, katanya mau dibuatkan tutorial Cara Membuat Recent Post by Label Simple seperti pada blog Riswan.net.

Cara Membuat Recent Post by Label Simple pada Blog

Oke sebelum saya lanjut ke tutorialnya, saya akan bahas sedikit mengenai manfaat dari pemasangan Recent Post by Label pada blog.

Daftar Isi

  • 1 Manfaat Pemasangan Recent Post by Label di Blog
  • 2 Cara Membuat Recent Post by Label Simple

Manfaat Pemasangan Recent Post by Label di Blog

Secara umum manfaat dari pemasangan widget recent post by label pada blog yaitu supaya memudahkan navigasi bagi pengunjung dalam menjelajahi sebuh blog. Selain itu ternyata pemasangan recent post by label pada blog dapat menaikan nilai SEO. Hasilnya blog lebih mudah diterima Adsense, karena Adsense lebih menyukai blog dengan navigasi yang jelas.

Cara Membuat Recent Post by Label Simple

Silahkan ikuti langkah berikut:

Langah Pertama
Buka Blogger >> Tema >> Eit HTML, kemudian simpan kode CSS berikut tepat di atas tag pentutup </style>

/* CSS Recent Post by Label */
#recent-post{border-top:1px solid rgba(0,0,0,0.1);width:100%}
#recent-post{position:relative;display:block;width:1010px;margin:0 15px 15px 15px;box-sizing: border-box;background: #ffffff;padding:2px;}
#recent-post{border-top:1px solid rgba(0,0,0,0.1);top-width:100%}
#recent-post .recent-list{display:inline-block;width:32.3%;padding: 0 1%;box-sizing: border-box;vertical-align: top;}
#recent-post .recent-list .recentpost{font-size:0px;}
#recent-post a{color:#000;}
#recent-post .recent-list .recentpost ul,#recent-post .recent-list .recentpost ul li{padding:5px 3px;margin:0px auto;list-style: none}
#recent-post .recent-list .recentpost ul li,#recent-post .recent-list .recentpost h2{color:#000;font-size:14px;line-height: 21px;}
#recent-post .recent-list .recentpost h2{padding:2% 0 2% 0;margin:0 0 2%;border-bottom: 3px solid;border-color:#029ecc}
@media screen and (max-width:900px) and (max-width:400px){#recent-post .recent-list{display:block;}}


Langkah Kedua
Setelah itu simpan kode Javascript berikut di atas tag penutup </body>

<script type='text/javascript'>
//<![CDATA[
function recentpostslist(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="'"+e.feed.entry[t].link[r].href+"'",l=e.feed.entry[t].title.$t,i="<li><a href="+n+'" target="_blank">'+l+"</a> </li>";document.write(i)}document.write("</ul>")}
//]]>
</script>


Langkah Ketiga
Letakan kode HTML berikut di tempat yang sobat inginkan, contoh saya simpan sebelum sidebar wrapper..

<div id='recent-post'>
<div class='recent-list'>
<b:section class='recentpost' id='recentpost1' preferred='yes'/>
</div>
<div class='recent-list'>
<b:section class='recentpost' id='recentpost2' preferred='yes'/>
</div>
<div class='recent-list'>
<b:section class='recentpost' id='recentpost3' preferred='yes'/>
</div>
</div>

Setelah semua selesai, simpan template

Langkah Keempat

Cara Membuat Recent Post by Label Simple pada BlogSekarang buka Tata Letak, maka otomatis akan ada 3 widget recent-post, untuk mengaktifkan widget recent post silahkan masukan kode berikut pada widget recent-post tadi

<script src="/feeds/posts/summary/-/LABEL?max-results=5&alt=json-in-script&callback=recentpostslist"></script>


LABEL ubah dengan label postingan yang ingin ditampilkan
max-results=5 ubah angka 5 dengan jumlah post yang ingin ditampilkan

Cek hasilnya, sampai sini sobat sudah selesai membuat Cara Membuat Recent Post by Label Simple pada Blog seperti blog Riswan.net. Semoga tutorial singkat ini bermanfaat bagi sobat blogger semuanya. Terimakasih

-7.206342107.896203
Deni Riswana

Deni Riswana

Pengembang Digital dan Content Creator. Saat ini sedang menempuh pendidikan strata satu di Universitas Pendidikan Indonesia (UPI) dengan program studi Bisnis Digital.

Related Posts

Cara Membuat Jump Link di Blog
Blogger

Cara Membuat Jump Link di Blog dengan HTML

24 Januari 2020
Cara Submit URL di Google Webmaster Yang Baru
Blogger

Cara Submit URL di Google Webmaster Yang Baru

2 April 2019
Cara mengetahui jumlah postingan blogger
Blogger

Cara Mengetahui Jumlah Postingan Blog Punya Orang Lain

21 November 2018

Comments 7

  1. MR SAN says:
    3 tahun ago

    supaya lebarnya responsive gimana mas?

    Balas
  2. Bags Dey says:
    3 tahun ago

    makasih gan jangan lupa salam : https://www.isengajaaha.com

    Balas
  3. chikygames says:
    2 tahun ago

    Makasih tutorialnya

    Balas
  4. Hendry says:
    2 tahun ago

    Demonya mas?

    Balas
    • Deni Riswana says:
      2 tahun ago

      demonya ada di github, saya cari dulu

      Balas
  5. Ataeh says:
    2 tahun ago

    Wah. Keren neh…
    Btw, bisa untuk yg AMP gak?

    Balas
    • Deni Riswana says:
      2 tahun ago

      Untuk AMP belum bisa mas,

      Balas

Tinggalkan Balasan Batalkan balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Baru-baru Ini

Persiapan Jualan Online, Apa Saja Yang Harus Disiapkan

Apa Saja Yang Harus Dipersiapkan Untuk Jualan Online?

8 Januari 2021
Alasan Kenapa Anak Mudah Harus Investasi

Alasan Kenapa Harus Investasi Sejak Muda

21 Desember 2020
3 Tips Memilih Wifi yang Akan Dipasang di Rumah

3 Tips Memilih Wifi yang Akan Dipasang di Rumah

20 Desember 2020
Rekomendasi Perpaduan Warna Cat Rumah Minimalis

Rekomendasi Perpaduan Warna Cat Rumah Minimalis

28 November 2020
Cara Praktis Membuat Web Menggunakan Template Website

Cara Praktis Membuat Web Menggunakan Template Website

27 November 2020

Riswan Net AMP

Riswan Net menyajikan informasi update seputar Teknologi, Tips Trik Internet, Perbankan, Media Sosial sampai Panduan Bisnis Online.

playstore download logo 2

Kategori

  • Adsense
  • Aplikasi
  • Bisnis
  • Bitcoin
  • Blogger
  • Desain
  • Gadget
  • Internet
  • Komputer
  • Media Soaial
  • Review
  • SEO
  • Software
  • Teknologi
  • WhatsApp

Tags

Android Bisnis Bisnis Online daily Life Internet Kesehatan Komputer Perbankan Tips Trik Travel WhatsApp Youtube

© 2019 Riswan Net All Right Reserved

  • About
  • Kontak
  • Iklan
  • Privasi
No Result
View All Result
  • Home
  • Content Placement
  • Tekno
  • Internet
  • Komputer
  • Bisnis

© 2020 Riswan Net All Right Reserved.

Welcome Back!

Login to your account below

Forgotten Password?

Create New Account!

Fill the forms below to register

All fields are required. Log In

Retrieve your password

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

Log In