Tiga Cara Memasang Recent Posts By Label Pada Halaman Statis Blog

Tiga Cara Memasang Recent Posts By Label

Bagi Anda semua teman teman blogger yang lagi membangun blog nya mudah mudahan semakin maju dan terus berkembang sehingga mencapai apa yang menjadi tujuan yang diharapkan. Amin.

Baiklah pada posting kali ini saya akan ikut sharing tentang bagaimana cara memasang recent posts by label pada halaman statis blog dan pada wordPress saya belum pernah mencoba atau mendapatkannya.

Karena widget ini dapat berfungsi untuk menampilkan daftar artikel terbaru sesuai label, juga bermanfaat sebagai sitemap atau daftar isi blog pada halaman statis blog Anda..

Ada Tiga pilihan yang dapat disesuaikan dengan selera Anda semua

Yang berminat silahkan ikuti langkah – langkah berikut ini :

1. Recent posts by label dengan tiga kolom label

Kode yang akan dipakai menggunakan font awesome, sehingga lebih baik cek dahulu di template Anda, melalui edit template kemudian cari . Agar lebih cepat pakai ctrl F.

Jika belum terpasang copy paste kode di bawah ini, tempatkan sebelum .

Jika sudah terpasang tinggal melanjutkan langkah berikutnya.

Selanjutnya Anda tinggal membuat laman baru, masuk dasboard > klik halaman > klik halaman baru, pilih mode HTML, lihat gambar di bawah

dan paste kan kode HTML di bawah ini

Sebelum publish edit dulu yang saya beri warna merah pada script di atas

JUDUL LABEL, URL BLOG, dan NAMA LABEL sesuai selera anda.

Jika dirasa sudah betul pratinjau dulu baru lakukan publish.

Terakhir Eng ing eengg... jadi deh..

BACA JUGA : Cara Membuat Slot Iklan Banner dan Iklan Teks seperti Google Adsense

2. Recent posts by label dengan satu kolom label

Cara yang kedua ini sama juga masih menggunakan font awesome, sehingga lakukan seperti langkah pertama di atas, bedanya versi yang digunakan tidak sama, kode nya di bawah ini

Langkah selanjutnya juga sama, Anda tinggal membuat halaman baru dan paste kan kode di bawah ini

<div id="recentpostsae">
</div>
<div id="recentpostnavfeed">
</div>
<style scoped="" type="text/css">
*{padding:0;margin:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-box-sizing:border-box}a,a:link,a:visited{text-decoration:none;transition:all .3s}
button,input[type="button"],input[type="reset"],input[type="submit"],.button{border:0;color:#fff;cursor:pointer;font-size:14px;font-weight:400;padding:12px 16px;white-
space:normal;width:auto;border-radius:3px;outline:0}
button:focus,button:hover,input[type="button"]:focus,input
[type="button"]:hover,input[type="reset"]:focus,input
[type="reset"]:hover,input[type="submit"]:focus,input
[type="submit"]:hover,.button:focus,.button:hover{color:#fff}
#recentpostnav{border:1px solid #585858;width:100%;margin:0 auto}
#recentpostsae{margin:0}
#recentpostsae .recentpostel
{width:48.9%;background:#fff;display:inline-block;margin:0 20px
10px 0;padding:15px;overflow:hidden;box-shadow:0 2px 3px rgba
(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1)}
#recentpostsae .recentpostel:nth-child(even){margin:0 0 10px 0}
#recentpostsae .recentpostel img {background:#ecf0f1;padding:0;float:left;margin:0;margin-right:13px;width:72px}
#recentpostsae .recentpostel h6,.recentpostel h6 a{text-decoration:none;font-size:14px;font-weight:400;margin:0;color:#000}
#recentpostsae .recentpostel:hover{background-color:#fefefe}
#recentpostsae .recentpostel p{font-size:12px;text-align:left;color:#555;line-height:normal;margin:5px 0}
#recentpostload{letter-spacing:-10px;text-align:center;background:transparent url
(https://2.bp.blogspot.com/-GeeSB564W-
o/Wum3zpg8qNI/AAAAAAAAGmM/aRoomVJFtSQfUoAJrRjD6h1wTSU8J8DUQCLcBGAs/s1600/ellipsis-preloader.gif) no-repeat 50% 50%;height:470px}
#recentpostnavfeed{display:table;padding:5px 10px 5px 0;text-align:left;margin:15px auto}
#recentpostnavfeed a{color:#141414;font-size:12px;font-weight:400;display:block;padding:5px 10px}
#recentpostnavfeed span{padding:0;cursor:pointer;transition:all .3s}
#recentpostnavfeed .next,#recentpostnavfeed .previous {position:relative;overflow:hidden;display:inline-block;background:#fff;color:#222;padding:10px 16px;font-size:1rem;border-radius:99em;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1)}
#recentpostnavfeed .next{float:right;margin:0 0 0 10px}
#recentpostnavfeed .previous{float:left;margin:0 10px 0 0}
#recentpostnavfeed .home{text-align:center;display:table;background:#fff;color:#222;font-
size:1rem;float:none;padding:10px 16px;border-radius:99em;margin:auto;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1)}
#recentpostnavfeed a:hover,#recentpostnavfeed span.noactived{color:#ccc}
#recentpostnavfeed i{font-family:fontawesome;font-style:normal}
#recentpostnavfeed .next:hover,#recentpostnavfeed .previous:hover,#recentpostnavfeed .home:hover{background:#fff;color:#222;box-shadow:0 10px 21px rgba(0,0,0,0.15),0 6px 6px rgba(0,0,0,0.12)}@media screen and (max-width:993px){#recentpostsae .recentpostel
{width:100%;margin:0 0 10px 0}}
</style>
<script type='text/javascript'>
//<![CDATA[
var numfeed = 18;
var startfeed = 0;
var urlblog = "https://www.taufikiminia.com";
var charac = 0;
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){vart,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:"https://3.bp.blogspot.com/-BHuXHny1kOk/VXrkSyxKCjI/AAAAAAAACas/pZLJAEUDtds/s1600/no-
image.png",s+="<div class='recentpostel'>",s+="<a href='"+r
+"'><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'><i class='fas fa-arrow-left'></i></a>":"<span
class='noactived previous'><i class='fas fa-arrow-left'></i></span>",s+=urlnext?"<a href='javascript:navigasifeed
(1);' class='next'><i class='fas fa-arrow-right'></i></a>":"<span
class='noactived next'><i class='fas fa-arrow-
right'></i></span>",s+="<a href='javascript:navigasifeed(0);'
class='home'><i class='fas fa-home'></i></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/-/Smartphone"+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>

Selanjutnya edit yang sudah ditandai dengan keterangan:
var numfeed : 18 (jumlah postingan yang ditampilkan pada tiap halaman)
var url Blog : https//taufikiminia.com (ganti dengan blog Anda)
var charak : isi dengan jumlah summary post yang Anda kehendaki
bagian feed url: feeds/posts/default/-/ Smartphone , ganti smartphone dengan nama label blog Anda

catatan :

Jika menghendaki penampilan feed halaman indeks edit format feed menjadi seperti ini

feeds/posts/default

Ingat setelah edit selesai baru publish, karena widget ini hanya bisa dipasang satu kali

selanjutnya Publish, dan jadi dah...Recent post by label pada halaman statis blog.

3. Recent Post By Label Langsung di Static Page

Cara ketiga ini merupakan cara paling simpel dan sederhana, tidak perlu lagi memasang prasyarat, baik javascript atau Css melalui edit HTML pada Template Anda.

Jadi Anda bisa langsung Paste Kode HTML di Bawah ini. ikuti langkahnya

a. Buka Halaman Blog Anda seperti cara pertama.

b. Klik New Page, kemudian Pastekan kode Script HTML berikut,

catatan : ganti Nama Label dengan nama label blog Anda

c. Setelah nama label anda ganti kemudian publish,

d. Selesai, silahkan lihat hasilnya

Demikian posting kali ini semoga dapat membantu anda, Tiga kode di atas sudah pernah saya coba dan berhasil , termasuk pada blog ini. Semoga bermanfaat.

sumber :dari berbagai referensi blog