Membuat Recent Posts by Label Di Halaman Statis

Penggunaan menu pada blog merupakan hal yang umum dan hal ini tentunya memudahkan pengunjung blog menjadi lebih mudah untuk melihat isi menu blog Anda. Menu halaman blog biasanya terdiri dari : about, disclaimer, sitemap, contact us, label, dll, tergantung selera dari pengguna blog itu sendiri.

Widget recent post berdasarkan label yang fast loading, responsive dan valid HTML5 adalah pilihan yang indin diterapkan para blogger pada templatenya. Ada banyak pilihan yang disajikan para designer template blog tentang pemasangan recent post widget by label.

Ada Juga yang memberikan pilihan recent post diterapkan pada sidebar dengan berbagai style. Jika tertarik silakan baca juga Cara Memasang Widget Recent Post 5 Style. Ada juga yang menerapkan fungsi recent post dimuat pada halaman sitemap blogger. Seperti yang saya terapkan pada blog saya yang bisa Anda coba lihat sendiri nantinya

cara membuat recent post responsive keren

Menu blog untuk menautkan ke halaman kategori atau label konon merupakan hal yang tidak begitu disukai oleh google, apalagi jika blog Anda ingin mendaftarkan Adsense. pada umumnya menu label pada halaman blog adalah sebagai berikut. http://www.domainAndadisini.com/search/label/LABEL. Namun kita akan merepkan fungsi label berada pada halaman statis

Cara Membuat Recents Post Berdasarkan Label

Pada artikel kali ini, saya akan share ulang dari blognya kompi ajaib tentang alternatif yang bisa Anda gunakan sebagai pengganti halaman label / kategori pada menu dan menyimpannya pada halaman statis. Silakan ikuti langkah-lengkah berikut ini dengna teliti
Jika Anda ingin mencobanya, silahkan ikuti langkah-langkahnya di bawah ini.

Cara Pertama Membuat Recent Posts By Label Widget Blogger

Membuat recent post dengan cara yang pertama yakni menempatkan widget recent posts diatur langusng dalam HTML theme. Berikut langkah-langkahnya.

1. Langkah Pertama
Silahkan simpan kode HTML di bawah ini pada halaman statis atau page dengan mode HTML (ingat, mode HTML bukan Compose). Namun alangkah baiknya jika sebelum menyimpan kode dibawah ini sebaiknya tulis dahulu judul halaman sesuai dengan label yang akan ditampilkan agar URL halaman statisnya sesuai dengan judul halaman, karena biasanya, setelah dipublish, muncul link HTML yang angka pada halaman HTMLnya dan saya sering mengalami hal itu sebelum mengetahui triknya tentang mengatasi penambahan angka pada link halaman statis.

<div id="result-desc">
</div>
<ul id="feed-container"></ul>
<div id="feed-nav">
</div>
<script type="text/javaScript">
var label="Musik";
</script>

Ganti label "Musik" yang saya tandai di atas dengan LABEL yang ingin Anda tampilkan.Jika label yang ingin Anda tampilkan Blog atau Widget atau apapun, silakan ganti kode yang di mark tersebut.

Penting!. Perhatikan penulisan label Anda, sesuaikan huruf besar dan kecilnya, karna jika salah maka label tidak akan muncul

2. Langkah Kedua
Silakan simpan kode CSS di bawah ini di atas kode </head>

<b:if cond='data:blog.url == &quot;URL HALAMAN STATIS DI SINI&quot;'>
<style type='text/css'>
#table-outer{padding:7px 10px;margin:0 auto}
#table-outer table{width:auto;margin:0 auto}
#table-outer form{font:inherit}
#table-outer label{display:block;text-align:right;margin:0 10px 0 0;padding:4px 0 0}
#table-outer select[disabled]{opacity:.4}
#post-searcher{display:block;margin:0;padding:0}
#table-outer input,#table-outer select{width:100%;border:1px solid #dedede;border-radius:5px;margin:0;padding:5px;font-family: Roboto,sans-serif!important;font-size:16px!important;font-weight:500!important;text-transform:capitalize!important;outline:0;color:#333!important;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#table-outer select option{min-height:1.4em!important;}
#table-outer input#feed-q{padding:5px 10px!important;}
#feed-container{background:#fff;display:block;clear:both;margin:0;padding:0;list-style:none;overflow:hidden;position:relative;border-top:none}
#feed-container li{list-style:none;margin:0;padding:0;border-top:1px solid #eee;color:#555;width:auto;float:left;display:inline}
#feed-container li .inner{margin:15px 0;height:auto;overflow:hidden;word-wrap:break-word;text-overflow:ellipsis}
#feed-container li a{text-decoration:none;color:#2C2C2C;font-weight:500}
#feed-container li a:hover{text-decoration:none;color:#E94141}
#feed-container li .news-text{margin-top:5px;line-height:1.3em!important}
#feed-container li img{margin:0 15px 5px 0;padding:7px 7px 7px 0;float:left;display:block;}
#result-desc{margin:0;padding:0;}
#result-desc div,#result-desc span{display:block;margin:0;padding:5px 0 7px;color:#D64D52}
#result-desc div{color:inherit}
#feed-nav{margin:10px 0 30px;text-align:center;font-weight:500}
#feed-nav a,#feed-nav span{border:1px solid #dedede;border-radius:5px;padding:0;color:#757575;text-decoration:none;display:block;height:30px;line-height:32px}
#feed-nav a,#feed-nav span:hover{color:#1B1B1B}
#feed-nav a:active,#feed-nav a:hover{color:#555}
#feed-nav span{cursor:wait}
@media (max-width:600px){#table-outer table{margin:0 auto;width:100%}
#feed-container,#table-outer{margin:0 auto}
#feed-container li .inner{margin:5px auto;height:auto}
#feedContainer li{float:none;display:block;width:auto;height:auto}
#feed-container li .news-text, #feedContainer:after,#feed-container li img{display:none!important}
}
.post-body{min-height:300px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0HpmYC-nL4P9PA9k3dXwvLOZ0CWiAseEfkUPAvcraUrU1A6DGzgijOvIYq-6MHhg_r3XFY9bBbhhetdPJK1BA4vaXFLOkrzUZLpX-dChl-nlENqd9SbK_ZyPNkQhyphenhyphenp__7HCS0zyDBEtQ/w220-h19-no/ajax-loader+%25281%2529.gif)50% 50% no-repeat!important;}
</style>
</b:if>

Ubah kode URL HALAMAN STATIS DI SINI dengan URL halaman statis yang di dapat pada langkah pertama. Jika blog Anda masih menggunakan domain blogspot silakan gunakan akhiran .com jangan .co.id.

Jika Anda memasang lebih dari 1 halaman untuk label yang berbeda, maka wajib mengganti conditional tagnya.

<b:if cond='data:blog.url == &quot;URL HALAMAN STATIS DI SINI&quot;'>

Silakan ganti dengan di bawah ini dan sesuaikan dengan keinginan Anda.

<b:if cond='data:blog.url in {&quot;URL HALAMAN STATIS DI SINI&quot; , &quot;URL HALAMAN STATIS DI SINI&quot; , &quot;URL HALAMAN STATIS DI SINI&quot;}'>

3. Langkah Ketiga
Simpan kode javascript di bawah ini di atas kode </body>. Untuk tag kondisionalnya, samakan dengan conditional tag untuk CSS pada langkah kedua di atas.

<b:if cond='data:blog.url == &quot;URL HALAMAN STATIS DI SINI&quot;'>
<script type='text/javascript'>
//<![CDATA[
document.write;var loadToc,loadCategories,_toc={init:function(){var e={homePage:"http://"+window.location.hostname,maxResults:10,numChars:270,thumbWidth:140,thumbHeight:95,navText:"Tampilkan artikel selanjutnya &#9660;",resetToc:"Kembali ke Awal",noImage:"http://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpeg",loading:"<span>Memuat...</span>"},t=(window,document),n=function(e){return t.getElementById(e)},a={e:n("result-desc"),f:n("feed-container"),g:n("feed-nav"),h:t.getElementsByTagName("head")[0],i:0,j:null,k:"published",l:0,m:""},l={a:function(){old=n("temporer-script"),old.parentNode.removeChild(old)},b:function(e){var i=t.createElement("script");i.type="text/javascript",i.id="temporer-script",i.src=e,n("temporer-script")&&l.a(),a.h.appendChild(i)},c:function(t,n,i){a.i++,a.e.innerHTML=e.counting,a.g.innerHTML=e[1==t?"searching":"loading"],0===t?l.b(null!==n?e.homePage+"/feeds/posts/summary/-/"+n+"?alt=json-in-script&start-index="+(a.i*e.maxResults+1)+"&max-results="+e.maxResults+"&orderby="+i+"&callback=loadToc":e.homePage+"/feeds/posts/default/-/"+label+"?alt=json-in-script&start-index="+(a.i*e.maxResults+1)+"&max-results="+e.maxResults+"&orderby="+i+"&callback=loadToc"):1==t&&l.b(e.homePage+"/feeds/posts/default/-/"+label+"?alt=json-in-script&start-index="+(a.i*e.maxResults+1)+"&max-results="+e.maxResults+"&q="+n+"&orderby="+i+"&callback=loadToc"),a.j=null!==n?n:null,a.l=t,a.a.disabled=!0,a.b.children[0].disabled=!0},d:function(n){var i;if(a.g.innerHTML="",a.e.innerHTML="<div>Total: "+n.feed.openSearch$totalResults.$t+" Posts</div>","entry"in n.feed){for(var r,s,o,d,c=n.feed.entry,u="0 Komentar",m=0;m<e.maxResults&&m!=c.length;m++){r=c[m].title.$t,o="summary"in c[m]?c[m].summary.$t.replace(/<br ?\/?>/gi," ").replace(/<(.*?)>/g,"").replace(/<iframe/gi,"").substring(0,e.numChars):"",d="media$thumbnail"in c[m]?c[m].media$thumbnail.url.replace(/\/s[0-9]+\-c/,"/s"+e.thumbWidth):e.noImage.replace(/\/s[0-9]+\-c/,"/s"+e.thumbWidth);for(var h=0,b=c[m].link.length;b>h;h++)s="alternate"==c[m].link[h].rel?c[m].link[h].href:"#";for(var p=0,g=c[m].link.length;g>p;p++)if("replies"==c[m].link[p].rel&&"text/html"==c[m].link[p].type){u=c[m].link[p].title;break}i=t.createElement("li"),i.innerHTML='<div class="inner"><img style="width:'+e.thumbWidth+"px;height:"+e.thumbHeight+'px;" src="'+d+'" alt="'+r+'"><a class="toc-title" href="'+s+'" target="_blank" title="'+r+'">'+r+'</a><div class="news-text">'+o+'&hellip;<br style="clear:both;"></div></div>',a.f.appendChild(i)}i=t.createElement("a"),i.href="#load-more",i.innerHTML=e.navText,i.onclick=function(){return l.c(a.l,a.j,a.k),!1}}else i=t.createElement("a"),i.href="#reset-content",i.innerHTML=e.resetToc,i.onclick=function(){return a.i=-1,a.e.innerHTML=e.counting,a.f.innerHTML="",l.c(0,null,"published"),a.a.innerHTML=a.a.innerHTML,a.b.children[0].innerHTML=a.b.children[0].innerHTML,!1};a.g.appendChild(i),a.a.disabled=!1,a.b.children[0].disabled=!1}};loadToc=l.d,loadCategories=l.e,l.b(e.homePage+"/feeds/posts/default/-/"+label+"?alt=json-in-script&start-index="+(a.i+1)+"&max-results="+e.maxResults+"&orderby=published&callback=loadToc"),l.b(e.homePage+"/feeds/posts/default/-/"+label+"?alt=json-in-script&max-results=0&orderby=published&callback=loadCategories"),a.a.onchange=function(){a.i=-1,a.f.innerHTML="",a.g.innerHTML=e.counting,a.b.children[0].innerHTML=a.b.children[0].innerHTML,l.c(0,null,this.value),a.k=this.value},a.c.onsubmit=function(){return a.i=-1,a.f.innerHTML="",a.m=a.d.value,l.c(1,a.d.value,a.k),!1}}};_toc.init();
//]]>
</script>
</b:if>

4. Selesai
Silakan Update Postingan Page / halaman static Anda dan lihat hasilnya

Perhatikan dan sesuaikan penempatan URL HALAMAN STATIS DISINI dengan URL Halaman statis yang Anda inginkan agar script dan cssnya bekerja dengan baik

Cara kedua Membuat Recent Posts Berdasarkan Label Keren

Cara keduanya dengan menerapkan langsung di halaman statis. Cobalah check dahulu di template Anda, apakah sudah terdapat kode dibawah ini, Jika belum, copy dan pastekan diatas </head>

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

kode link font awesome diatas diabaikan saja jika sudah ada pada template Anda

Buka page kemudian klik new page lalu klik HTML (bukan compose), kemudian pastekan kode berikut

<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:10px;line-height:normal;border:1px solid #dcdcdc;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>

Ganti "JUDUL LABEL", "URL-BLOG" dan "NAMA LABEL" sesuai dengan milik Anda

Untuk Contoh Penerapannya adalah seperti ini:

var multiFeed = {
    feedsUri: [
        {
            name: "Tutorial",
            url: "https://dewaplokis.blogspot.com/",
            tag: "Tutorial"
        },
        {
            name: "Windows",
            url: "https://dewaplokis.blogspot.com/",
            tag: "Windows"
        },
        {
            name: "Blogging",
            url: "https://dewaplokis.blogspot.com/",
            tag: "Blogging"
        }
],

Dan Hasilnya Akan seperti ini :

Untuk hasil livenyta, silakan check pada codepen saya dibawah ini.

Result

Update :

Untuk cara terbaru pada tutorial ini, bisa Anda baca Cara Memasang Widget Recent Posts By Label Blogger

Demikianlah tutorial kali ini tentang cara membuat recent post by label di halaman statis. jika ada yang belum jelas, silakan layangkan komentar Anda
sumber :
http://www.arlinadzgn.com/2015/05/memasang-multi-recent-posts-di-halaman-statis.html
http://www.kompiajaib.com/2016/04/recent-post-by-label-untuk-mengganti.html