-->

Cara membuat post label di page statis blogger

cara mudah untuk membuat tampilan label lebih menarik dengan membuatkan page statis atau halaman pada blog.

Daftar Isi [Tutup]
    Cara membuat post label di page statis blogger

    Halo selamat siang, pada tutorials kali ini saya akan membuat salah satu cara yang saya gunakan pada blog ini yaitu dengan memberikan label suatu page atau halaman. jadi setiap label akan di arahkan pada page yang telah dibuat misalkan saya membuat page dengan nama "Template" kenapa saya berikan judul tersebut karena nantinya page atau halaman tersebut akan saya kasih kode atau script yang akan menampilkan semua label 'Template' tetapi seperti halaman utama blog yang akan memberikan pembatas tampilan dan akan muncul navigasi untuk memuat halaman berikutnya dari setiap artikel Template yang ada pada blog. atau dalam istilah bloggernya membuat daftar artikel terbaru berdasarkan label di halaman statis atau page blog.

    Cara Pemasangan post label di page statis

    ambil kode dibawah ini dan letakkan pada template sobat diatas kode </head>. jika kode dibawah ini sudah ada diblog anda. tidak perlu ditambahkan lagi. dengan cara cari ditemplate font-awesome.min.css

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


    setalah itu simpan template anda, dan silahkan buka.

    Blogger - Halaman - Halaman Baru , silahkan berikan judul yang anda inginkan misalkan "Template" dan setelah itu pilih mode "HTML" dan salin kode dibawah 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.mantankode.net";
    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){var t,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/-/Templates"+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>


    silahkan edit kode diatas yang saya kasih warna stabilo.

    Nilai Keterangan
    var numfeed 18 (jumlah label yang akan tampil di page statis atau halaman)
    var urlblog silahkan ganti dengan alamat blog anda

    dan jangan lupa ganti nama label yang ingin anda tampilkan disini contohnya saya kasih nama "Templates" silahkan anda ganti terlebih dahulu sesuai keinginan anda.

    /feeds/posts/default/-/Templates

    dan selanjut silahkan publikasikan. jika sobat ingin meletakkan di menu navigasi selahkan salin url page statis yang anda buat tadi dan salin ke url menu navigasi anda.



    sumber script: https://www.arlinadzgn.com/2018/05/memasang.recent.post.by.label.di.halaman.statis.html

    How to create a publication tag on the blogger's page
    Show comments
    Hide comments


    MANTANKODE.NET Kebijakan Komentar, Silahkan berkomentar sesuai ketentuan perundang-undangan!
    Baca Kebijakan Berkomentar kami sebelum berkomentar.

    Notification

    Donasi yang anda berikan akan digunakan untuk, pengembangan blog ini.

    Kesehatan admin dan lebih semangat berbagi tips dan informasi.

    Yang telah membantu saya ucapkan terima kasih

    Donasi: Trakteer

    Done
    Night Mode