Cara Menciptakan Recent Post By Label Ibarat Arlina Design

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>

Setelah menambahkan aba-aba FontAwesome diatas, Kita akan menciptakan Halaman, ikuti Langkahlangkah yang ada pada gambar.

Kali ini aku akan menciptakan cara Recent Post By Label Di Halaman Statis menyerupai Cara Membuat Recent Post By Label Seperti Arlina Design

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 Kode Dibawah ini Sesuai Keinginan kalian.