Kali ini aku akan menciptakan cara Recent Post By Label Di Halaman Statis seperti Arlina Design, Widget ini dapat kalian pasang sebagai Sitemap atau Daftar Artikel terbaru diblog kalian.
Bagi kalian yang ingin memasangnya diblog, ikuti langkahlangkah dibawah ini.
Cara Membuat Recent Post By Label Seperti Arlina Design
Kode dibawah ini memakai Framework dari FontAwesome. Tambahkan Kode dibawah ini diatas </head>.
<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/fontawesome/4.7.0/css/fontawesome.min.css"); //> </script>
Buka halaman Blogger kalian, kemudian klik Halaman > Halaman Baru. Untuk Membuat Halaman Statis.
Lalu tambahkan aba-aba dibawah ini, didalam Tab HTML Halaman.
<div id="recentpostsae"> </div> <div id="recentpostnavfeed"> </div> <style scoped="" type="text/css"> *{padding:0;margin:0;webkitboxsizing:borderbox;mozboxsizing:borderbox;boxsizing:borderbox} a,a:link,a:visited{textdecoration:none;transition:all .3s} button,inputtype="button",inputtype="reset",inputtype="submit",.button{border:0;color:#fff;cursor:pointer;fontsize:14px;fontweight:400;padding:12px 16px;whitespace:normal;width:auto;borderradius:3px;outline:0}button:focus,button:hover,inputtype="button":focus,inputtype="button":hover,inputtype="reset":focus,inputtype="reset":hover,inputtype="submit":focus,inputtype="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:inlineblock;margin:0 20px 10px 0;padding:15px;overflow:hidden;boxshadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1)} #recentpostsae .recentpostel:nthchild(even){margin:0 0 10px 0} #recentpostsae .recentpostel img{background:#ecf0f1;padding:0;float:left;margin:0;marginright:13px;width:72px} #recentpostsae .recentpostel h6,.recentpostel h6 a{textdecoration:none;fontsize:14px;fontweight:400;margin:0;color:#000} #recentpostsae .recentpostel:hover{backgroundcolor:#fefefe} #recentpostsae .recentpostel p{fontsize:12px;textalign:left;color:#555;lineheight:normal;margin:5px 0} #recentpostload{letterspacing:10px;textalign:center;background:transparent url(https://2.bp.blogspot.com/GeeSB564Wo/Wum3zpg8qNI/AAAAAAAAGmM/aRoomVJFtSQfUoAJrRjD6h1wTSU8J8DUQCLcBGAs/s1600/ellipsispreloader.gif) norepeat 50% 50%;height:470px} #recentpostnavfeed{display:table;padding:5px 10px 5px 0;textalign:left;margin:15px auto} #recentpostnavfeed a{color:#141414;fontsize:12px;fontweight:400;display:block;padding:5px 10px} #recentpostnavfeed span{padding:0;cursor:pointer;transition:all .3s} #recentpostnavfeed .next,#recentpostnavfeed .previous{position:relative;overflow:hidden;display:inlineblock;background:#fff;color:#222;padding:10px 16px;fontsize:1rem;borderradius:99em;boxshadow: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{textalign:center;display:table;background:#fff;color:#222;fontsize:1rem;float:none;padding:10px 16px;borderradius:99em;margin:auto;boxshadow: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{fontfamily:fontawesome;fontstyle:normal} #recentpostnavfeed .next:hover,#recentpostnavfeed .previous:hover,#recentpostnavfeed .home:hover{background:#fff;color:#222;boxshadow:0 10px 21px rgba(0,0,0,0.15),0 6px 6px rgba(0,0,0,0.12)} @media screen and (maxwidth: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.themepoii.blogspot.com"; var charac = 0; var urlprevious, urlnext; function arlinafeed(e,t){for(var n=e.split("<"),r=0;r<n.length;r++)1!=nr.indexOf(">")&&(nr=nr.substring(nr.indexOf(">")+1,nr.length));return n=n.join(""),n=n.substring(0,t1)}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.linkl.rel&&(urlprevious=e.feed.linkl.href),"next"==e.feed.linkl.rel&&(urlnext=e.feed.linkl.href);for(var d=0;d<numfeed&&d!=e.feed.entry.length;d++){t=e.feed.entryd,n=t.title.$t;for(var l=0;l<t.link.length;l++)if("alternate"==t.linkl.rel){r=t.linkl.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/noimage.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 faarrowleft'></i></a>":"<span class='noactived previous'><i class='fas faarrowleft'></i></span>",s+=urlnext?"<a href='javascript:navigasifeed(1);' class='next'><i class='fas faarrowright'></i></a>":"<span class='noactived next'><i class='fas faarrowright'></i></span>",s+="<a href='javascript:navigasifeed(0);' class='home'><i class='fas fahome'></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="?startindex=1&maxresults="+numfeed+"&orderby=published&alt=jsoninscript",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//Tutorial"+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> 
Edit Pada bab Feed URLTutorial, Dengan Feed URL kalian.
/feeds/posts/default//TutorialJika Ingin menampilkan feed halaman utama, tanpa label edit menjadi
/feeds/posts/defaultSekian Tutorial Cara Membuat Recent Post By Label Seperti Arlina Design.
