Tiga Cara Memasang Recent Posts By Label Pada Halaman Statis Blog


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 .
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

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

<style scoped="scoped" type="text/css">
 /* Multi Recent Post */
.post-body *,.post-body *:after,.post-body *:before{box-sizing:initial;-webkit-box-sizing:initial;-moz-box-sizing:initial;}
.list-entries{display:table;background:#fdfdfd;margin:1.5%1%;width:31.3%;float:left;font-size:80%;}
.list-entries ul,.list-entries li{margin:0;list-style:none}
#feed-list-container ul li{background:#fdfdfd;padding:15px;line-height:normal;border:1px solid #eee;border-top:0;transition:all .3s;}
#feed-list-container ul li:hover{background:#fff;}
#feed-list-container ul li:last-child{border-bottom:0;}
.list-entries .main-title{padding:0;overflow:hidden;}
.list-entries .main-title h4{position:relative;display:block;font:inherit;font-
weight:700;padding:1em 1.5em;background-color:#4f93c5;color:#fff;margin:0;line-height:normal;font-size:120%;margin-top:0!important}
.list-entries .main-title h4:after{display:inline-block;content:"\f02c";font-family:fontAwesome;font-size:17.4px;font-style:normal;background-color:#4384b3;color:#fff;top:0;right:0;padding:1em 1.25em;position:absolute;font-weight:400}.list-entries .title a{font-size:13px;text-decoration:none;line-height:.5em;color:#333;font-weight:700;transition:all .3s;}.list-entries .title a:hover{color:#4f93c5}.list-entries img,.list-entries .fake-img{border:none;background-color:#333;margin:0 1em 0 0;padding:0;float:left}
.list-entries .summary{overflow:hidden;color:#999}
.list-entries .more-link{border-bottom:none;}
.list-entries .more-link a{display:block;line-height:2em;height:2em;overflow:hidden;text-
decoration:none;background-color:#444;padding:1em 1.5em;position:relative;font-weight:400;color:#fff;transition:all .3s;}
.list-entries .more-link a:hover{background-color:#f97e76;color:#fff;}
.list-entries .more-link a:after{display:inline-block;content:"\f054";font-family:fontAwesome;font-size:16.4px;font-style:normal;background-color:#333;color:#ccc;top:0;right:0;padding:1em 1.25em;position:absolute;font-weight:400;transition:all .3s;}.list-entries .more-link a:hover:after{background-
color:#ea726a;color:#fff;}
.widget .post-body ul, .widget .post-body ol {position:relative;}
@media (max-width:640px){
.list-entries {width:100%;}
.list-entries{margin:2.5% 1%;}}
</style>
<div id="feed-list-container">
</div>
<div style="clear:both;">
</div>
<script type="text/javascript">
var multiFeed = {
    feedsUri: [
        {
            name: "JUDUL LABEL",
            url: "URL-BLOG",
            tag: "NAMA LABEL"
        },
        {
            name: "JUDUL LABEL",
            url: "URL-BLOG",
            tag: "NAMA LABEL"
        },
        {
            name: "JUDUL LABEL",
            url: "URL-BLOG",
            tag: "NAMA LABEL"
        }
],
    numPost: 4,
    showThumbnail: true,
    showSummary: false,
    summaryLength: 0,
    titleLength: "auto",
    thumbSize: 72,
    containerId: "feed-list-container",
    readMore: {
        text: "Selengkapnya",
        endParam: "?max-results=5"
    }
};
</script>
<script src="https://cdn.rawgit.com/dewaplokis/multi-

feed/4f8888a3/multi-feed.js" type="text/javascript"></script>


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..

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
<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t ||
window.document.getElementsByTagName("script")[0]; i.rel =
"stylesheet"; i.href = e; i.media = "only x";
o.parentNode.insertBefore(i, o); setTimeout(function () { i.media
= n || "all" }) }
loadCSS("https://maxcdn.bootstrapcdn.com/font-
awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>

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,

<style>
ul {list-style:none;padding:0 !important;margin:0 !important}
.entry-content {padding:0 !important}
.tagpost_thumb {float:left;margin-right:20px;width:100px}
.clearfix {height:140px;margin-bottom:20px;background:#eee;padding:15px}
.tagpost_thumb {margin-right: 20px !important;}
.juduljarwo {font-size: 120%;font-weight: 700;}
</style>

<script type='text/javascript'>//<![CDATA[
function removeHtmlTag(strx,chop){if(strx.indexOf("<")!=-1){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}strx=s.join("")}chop=(chop<strx.length-1)?chop:strx.length-2;while(strx.charAt(chop-1)!=' '&&strx.indexOf(' ',chop)!=-1)chop++;strx=strx.substring(0,chop-1);return strx+'...'}function createSummaryAndThumb(pID){var div=document.getElementById(pID);var imgtag="";var img=div.getElementsByTagName("img");var summ=summary_noimg;if(img.length>=1){imgtag='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';summ=summary_img}var summary=imgtag+'<div>'+removeHtmlTag(div.innerHTML,summ)+'</div>';div.innerHTML=summary}function tagpostthumbs(json){document.write('<ul class="taglabel">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href}if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}var thumburl;try{thumburl=entry.media$thumbnail.url}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d}else thumburl='http://2.bp.blogspot.com/-zif4lgUoNwY/VcmmKoOAbnI/AAAAAAAAK6U/whzhPe-8EDY/s1600/thumbn.png'}var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="Jun";monthnames[7]="Jul";monthnames[8]="Aug";monthnames[9]="Sep";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li class="clearfix">');if(tagpostthumbnails==true)document.write('<a href="'+posturl+'"><img alt="'+posttitle+'" title="'+posttitle+'" class="tagpost_thumb" src="'+thumburl+'"/></a>');document.write('<a class="juduljarwo" href="'+posturl+'" title="'+posttitle+'">'+posttitle+'</a><br>');if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(tagpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('')}else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('')}}var towrite='';var flag=0;document.write('<br>');if(tagpostdate==true){towrite=towrite+cdday+'-'+monthnames[parseInt(cdmonth,10)]+'-'+cdyear;flag=1}if(tagpostcommentnum==true){if(flag==1){towrite=towrite+' | '}if(commenttext=='1 Komentar')commenttext='1 Komentar';if(commenttext=='Tidak ada Komentar')commenttext='Tidak ada komentar';commenttext=''+commenttext+'';towrite=towrite+commenttext;flag=1}if(tagpostmore==true){if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="bacajarwo" title="'+posttitle+'">Baca Lagi »</a>';flag=1}document.write(towrite);document.write('</li>');if(tagpostseparator==true)if(i!=(numposts-1))document.write('')}document.write('</ul>')}
//]]></script>

<script type='text/javascript'>
    var numposts = 500; // Jumlah Post yang akan ditampilkan
    var tagpostthumbnails = true;
    var tagpostmore = false;
    var tagpostseparator = true;
    var tagpostcommentnum = false;
    var tagpostdate = false;
    var tagpostsummary = false;
    var numchars = 50;
</script>

<script type="text/javascript" src="/feeds/posts/default/-/Nama Label?orderby=updated&amp;alt=json-in-script&amp;callback=tagpostthumbs"></script>

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