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 Recent Post (Widget Postingan Terbaru) Di Blogger Dengan Gambar

Cara Buat Recent Post (Widget Postingan Terbaru) Di Blogger Dengan Gambar

11 Oktober 2019
in Tutorial Blogging
Cara Buat Recent Post (Widget Postingan Terbaru) Di Blogger Dengan Gambar

Beberapa hari terakhir ada yang bertanya melalui inbox Facebook dan Chat di Whatsapp saya. Mas bagaimana cara menciptakan Postingan terbaru yang ada di samping kanan blog. Tampilannya menarik, ada gambar dan navigasinya jadi pengunjung sanggup lihat lebih banyak postingan terbaru blog tersebut hanya dengan  klik Next. Mungkin bagi anda yang memakai Template Kompi Flexible milik Kompi Ajaib ini kurang menyukai Recent Post dan Popular Post bawaan template tersebut.

Dengan tampilan blog yang menarik dan lezat dilihat menciptakan pengunjung di situs kita merasa betah. Tutorial cara menciptakan Recent Post dengan Navigasi ini aku dapatkan dari blog Arlina Design. Disana anda akan menemukan aneka macam macam tutorial blogger. Salah satunya ialah cara menciptakan Recent post hanya dengan Teks, Recent Post hanya tampilan gambar saja dan ada banyak pilihan teladan widget blogger. Sesuaikan dengan selera anda dan saran aku cari widget yang ringan dan tidak memberatkan situs.

Baca Juga:  Cara Lihat Harga Blog Atau Web Memakai Situs Tertentu

Mengapa aku menentukan widget Recent Post dengan tampilan gambar dan navigasi. Selain menarik ternyata cara menambahkannya cukup mudah. Anda cukup masuk ke Tata Letak dan Tambahkan Widget, Paste instruksi HTML dan Save maka Recent Post sudah tampil. Berbeda dengan Widget lainnya yang mengharuskan kita masuk di Tema, Edit HTML kemudian meletakkan instruksi di tenggah sekian banyak instruksi bahasa pemograman. Jika anda salah meletakkan maka akan terjadi error dan pusing untuk memperbaikinya.

Cara buat Recent Post (Widget Postingan Terbaru) di Blogger dengan gambar

Langkah 1 : Masuk ke Tata Letak >> Tambahkan Gadget >> Pilih HTML/JavaScript >> Paste instruksi dibawah ini.

Baca Juga:  Cara Menampilkan Google Maps Blog/Web Di Samping Sitelink Pencarian Google

<style scoped=” type=’text/css’>
/* Recent Post Navigasi */
#recentpostnav{border:1px solid #585858;width:100%;margin:0 auto}
#recentpostsae{margin:0}
.recentpostel{background:#fff;display:block;border:1px solid #ddd;margin:5px 0;padding:10px;height:79px}
.recentpostel img{background:#fff;padding:4px;float:left;height:70px;margin-right:8px;width:70px;border:1px solid #ddd}
.recentpostel h6,.recentpostel h6 a{text-decoration:none;font-size:13px!important;font-weight:700!important;margin:0;color:#111}
.recentpostel:hover{background-color:#fefefe}
.recentpostel p{font-size:12px;text-align:left;color:#555;line-height:normal;margin:5px 0}
#recentpostload{color:#888;font-family:Tahoma;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444;background:url(https://2.bp.blogspot.com/-60aISBQLRY0/VFBMqzLfzGI/AAAAAAAABgM/GInmVTvEzkc/s1600/loader.gif) 50% 50% no-repeat #fff;height:470px;border:1px solid #ddd}
#recentpostnavfeed{border:1px solid #ddd;color:#bbb;font-family:Verdana;font-size:12px;text-align:center;margin:0}
#recentpostnavfeed:hover{background-color:#fefefe}
#recentpostnavfeed a{color:#141414!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px}
#recentpostnavfeed span{padding:5px 10px}
#recentpostnavfeed .next{float:right}
#recentpostnavfeed .previous{float:left}
#recentpostnavfeed .home{text-align:center}
#recentpostnavfeed a:hover,#recentpostnavfeed span.noactived{color:transparant!important}
</style>
<script type=’text/javascript’>
//<![CDATA[
var numfeed = 5;
var startfeed = ;
var urlblog = “https://www.“;
var charac = 40;
var urlprevious, urlnext;
function arlinafeed(e,t){for(var n=e.split(“<“),r=0;r<n.length;r++)-1!=n[r].indexOf(“>”)&&(n[r]=n[r].substring(n[r].indexOf(“>”)+1,n[r].length));return n=n.join(“”),n=n.substring(0,t-1)}function showrecentpostsae(e){var t,n,r,a,i,s=””;urlprevious=””,urlnext=””;for(var l=0;l<e.feed.link.length;l++)”previous”==e.feed.link[l].rel&&(urlprevious=e.feed.link[l].href),”next”==e.feed.link[l].rel&&(urlnext=e.feed.link[l].href);for(var d=0;d<numfeed&&d!=e.feed.entry.length;d++){t=e.feed.entry[d],n=t.title.$t;for(var l=0;l<t.link.length;l++)if(“alternate”==t.link[l].rel){r=t.link[l].href;break}i=”content”in t?t.content.$t:”summary”in t?t.summary.$t:””,a=”media$thumbnail”in t?t.media$thumbnail.url:”http://3.bp.blogspot.com/-BHuXHny1kOk/VXrkSyxKCjI/AAAAAAAACas/pZLJAEUDtds/s1600/no-image.png”,s+=”<div class=’recentpostel’>”,s+=”<a href='”+r+”‘ target=’_blank’><img src='”+a+”‘ /></a>”,s+=”<h6><a href='”+r+”‘>”+n+”</a></h6>”,s+=”<p>”+arlinafeed(i,charac)+”…</p>”,s+=”</div>”}document.getElementById(“recentpostsae”).innerHTML=s,s=””,s+=urlprevious?”<a href=’javascript:navigasifeed(-1);’ class=’previous’>Previous</a>”:”<span class=’noactived previous’>Previous</span>”,s+=urlnext?”<a href=’javascript:navigasifeed(1);’ class=’next’>Next</a>”:”<span class=’noactived next’>Next</span>”,s+=”<a href=’javascript:navigasifeed(0);’ class=’home’>Home</a>”,document.getElementById(“recentpostnavfeed”).innerHTML=s}function navigasifeed(e){var t,n;-1==e?(t=urlprevious.indexOf(“?”),n=urlprevious.substring(t)):1==e?(t=urlnext.indexOf(“?”),n=urlnext.substring(t)):n=”?start-index=1&max-results=”+numfeed+”&orderby=published&alt=json-in-script”,n+=”&callback=showrecentpostsae”,incluirscript(n)}function incluirscript(e){1==startfeed&&removerscript(),document.getElementById(“recentpostsae”).innerHTML=”<div id=’recentpostload’></div>”,document.getElementById(“recentpostnavfeed”).innerHTML=””;var t=urlblog+”/feeds/posts/default”+e,n=document.createElement(“script”);n.setAttribute(“type”,”text/javascript”),n.setAttribute(“src”,t),n.setAttribute(“id”,”arlinalabel”),document.getElementsByTagName(“head”)[0].appendChild(n),startfeed=1}function removerscript(){var e=document.getElementById(“arlinalabel”),t=e.parentNode;t.removeChild(e)}onload=function(){navigasifeed(0)};
//]]>
</script>
<div id=”recentpostsae”></div>
<div id=”recentpostnavfeed”></div>


Keterangan : Ganti goresan pena warna merah dengan alamat blog anda dan silahkan tentukan berapa postingan yang akan di tampilkan dan berapa karakter aksara yang akan di tampilan.

Baca Juga:  Cara Daftar Google News Dan Dapatkan Visitor Blog Lebih Banyak

Cukup gampang bukan menciptakan Recent Post atau menampilkan Postingan Terbaru di blogger. Untuk tampilannya silahkan teman lihat di samping kanan blog ini tetapi hanya tampil kalau anda lihat di versi Desktop/Komputer. Cukup menarik bukan, karna dari beberapa blogger pemula yang menanyakan tutorial ini dan pada jadinya daripada aku jawab satu satu selbih baik aku buatkan tutorialnya. Silahkan dicoba biar berhasil dan bermanfaat untuk lebih lagi meningkatkan Page View blog anda.
Sumber https://mastimon.blogspot.com

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?