Membuat Recent Posts By Label Di Halaman Statis

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

Menu blog untuk menautkan ke halaman kategori atau label konon merupakan hal yang tidak begitu disukai oleh google, apalagi kalau blog Anda ingin mendaftarkan Adsense. pada umumnya sajian label pada halaman blog yaitu sebagai berikut.

http://www.domainAndadisini.com/search/label/LABEL

Pada artikel kali ini, aku akan share ulang dari blognya kompi abnormal wacana alternatif yang sanggup Anda gunakan sebagai pengganti halaman label / kategori pada sajian dan menyimpannya pada halaman statis. Silahkan ikuti langkah-lengkah berikut ini dengna teliti
Jika Anda ingin mencobanya, silahkan ikuti langkah-langkahnya di bawah ini.

Cara Pertama

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

1. Langkah Pertama

Silahkan simpan arahan HTML di bawah ini pada halaman statis atau page dengan mode HTML (ingat, mode HTML bukan Compose). Namun alangkah baiknya kalau sebelum menyimpan arahan dibawah ini sebaiknya tulis dahulu judul halaman sesuai dengan label yang akan ditampilkan biar URL halaman statisnya sesuai dengan judul halaman, alasannya biasanya, sesudah dipublish, muncul link HTML yang angka pada halaman HTMLnya dan aku sering mengalami hal itu sebelum mengetahui triknya wacana 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>

Silahkan ganti arahan "Musik" yang aku tandai di atas dengan LABEL yang ingin Anda tampilkan.Jika label yang ingin Anda tampilkan Blog atau Widget atau apapun, silahkan ganti arahan yang di marka tersebut.

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

2. Langkah Kedua 

Silahkan simpan arahan CSS di bawah ini di atas arahan </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/AVvXsEg4QDjyNdc3dw7S0VN2JLXVhp982RxOmfXfJWtrXAUR5QQ7EMfJjHvUeI-qkBz6VJed2he5qqgw7RBEEqOqeQ-mfEa2e2Rp1K3GafD1DaMiOvmpCUkMmoSdzHe6oWpSRXQwAYWNgma9fT8/w220-h19-no/ajax-loader+%25281%2529.gif)50% 50% no-repeat!important;} </style> </b:if>

Silahkan ganti arahan URL HALAMAN STATIS DI SINI dengan URL halaman statis yang di sanggup pada langkah pertama. Jika blog Anda masih memakai domain blogspot silahkan gunakan akhiran .com jangan .co.id. Jika Anda memasang lebih dari 1 halaman untuk label yang berbeda, silahkan ganti conditional tagnya.

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

Silahkan ganti dengan di bawah ini dan silahkan sesuaikan.

<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 

Silahkan simpan arahan javascript di bawah ini di atas arahan </body>. Untuk conditional tag-nya silahkan 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="Penggunaan sajian pada blog merupakan hal yang umum dan hal ini tentunya memudahkan pengunju Membuat Recent Posts by Label Di Halaman Statis"><a class="toc-title" href="'+s+'" target="_blank" title="Membuat Recent Posts by Label Di Halaman Statis">'+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>

Selesai....

Cara kedua

Cara keduanya dengan menerapkan pribadi di halaman statis. silahkan check dahulu di template Anda, apakah sudah terdapat arahan 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'/>

arahan link font awesome diatas diabaikan saja kalau sudah ada pada template Anda

Buka page kemudian klik new page kemudian klik HTML (bukan compose), kemudian pastekan arahan 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: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>

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

Cari ini sudah aku terapkan pada halaman statis aku dan aku terapkan sebagai pengganti sitemap. silahkan lihat kesannya disini https://gudangresepbubun.blogspot.comp/sitemap.html

Demikianlah tutorial kali ini wacana cara membuat recent post bay label di halaman statis. kalau ada yang belum jelas, silahkan layangkan komentar Anda
sumber :
https://gudangresepbubun.blogspot.com/search?q=memasang-multi-recent-posts-di-halaman-statis
https://gudangresepbubun.blogspot.com/search?q=memasang-multi-recent-posts-di-halaman-statis
Sumber https://dewaplokis.blogspot.com/

Bagikan Artikel ini