×

Owner / Author / Admin / etc

    Rahman NM    

"Pada halaman web ini saya akan membagikan informasi informasi menarik seputar Anime, Manga, Game, Film, dan juga berbagai tips-tips menarik lainnya."

Cara Membuat Recent Post By Label di Homepage Post

February 05, 2020   • 1 Comment

Ditutorial kali ini saya akan membagikan sebuah tutorial membuat recent post berdasarkan label dihomepage postingan blog kamu, sebenarnya udah banyak tutorial membuat recent post by label, namun disini saya tetap akan berbagi.

Recent post berdasarkan label ini sangat berguna untuk blog kamu yang memiliki banyak label, karna ingin menggabungkan atau menyatukan semua kategori artikel yang sama dalam satu barisan, yang akan membuat pengunjung menjadi jauh lebih mudah menelusuri artikel tersebut. Nah bagi teman teman blogger yang penasaran yuk langsung aja ikuti tutorial dibawah ini.

Cara Membuat Recent Post Berdasarkan Label di Homepage Post
  1. Pertama, login dulu ke Blogger,
  2. Pada dashboard Blogger pilih TEMA ⇒ Edit HTML,
  3. Kemudian, cari kode </b:skin> atau kode </style>, setelah ketemu copy kan code CSS dibawah ini dan letakkan tepat diatas kode yang sudah saya sebutkan sebelumnya,
    /* RECENT POST BY LABEL CSS */
    #recenttopic h2{color:#222;font:600 15px 'Poppins',sans-serif}
    #recenttopic h2 a { float: right; font-size: 10px; color: #555; }
    #recentpostnav{border:1px solid #585858;width:100%;margin:0 auto}
    #recentpostsae{margin:0}
    #recentpostsae .recentpostel{width:45%;background:#fff;display:inline-block;margin:0 10px 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:none;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{box-sizing:border-box;width:100%;margin:0 0 10px 0}}
    
  4. Terakhir copykan kode HTML dan Javascript dibawah ini, jika kamu pengguna template viomagz silahkan letakkan kodenya dibawah <div id='wrapper'>, nah jika kamu tidak memakai template Viomagz silahkan cari kode yg mirip-mirip atau kamu juga dapat memasang kode tersebut di Widget Bawah Navigasi Template yang kamu miliki,
    <div id="recenttopic"><h2>BLOGGER<a href="/search/label/Blogger">Tampilkan Selengkapnya</a></h2></div>
    <b:if cond='data:view.isHomepage'>
    <div id='recentpostsae'>
    </div>
    <div id='recentpostnavfeed'>
    </div>
    <script type='text/javascript'>
    //<![CDATA[
    var numfeed = 6;
    var startfeed = 0;
    var urlblog = "https://www.anirocksite.com/";
    var charac = 0;
    var urlprevious, urlnext;
    function anirockfeed(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>"+anirockfeed(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/-/BLOGGER"+e,n=document.createElement("script");n.setAttribute("type","text/javascript"),n.setAttribute("src",t),n.setAttribute("id","anirocksitelabel"),document.getElementsByTagName("head")[0].appendChild(n),startfeed=1}function removerscript(){var e=document.getElementById("anirocksitelabel"),t=e.parentNode;t.removeChild(e)}onload=function(){navigasifeed(0)};
    //]]>
    </script>
      </b:if>
    
    Pada teks yang saya beri highlighter silahkan kalian ganti dengan punyamu,
    /search/label/Blogger // Blogger Ganti dengan Label
    var numfeed = 6; // Jumlah yang ingin Ditampilkan
    var urlblog = "https://www.anirocksite.com/" // Alamat Blog
    /feeds/posts/default/-/BLOGGER // BLOGGER Ganti dengan Label
  5. Terakhir Simpan/Save Template.
Sekian tutorial membuat recent post berdasarkan label dihomepage postingan blog, jika tampilan recentpostnya kurang menarik, silahkan desain lagi biar jadi lebih menarik :D.

Sebenarnya itu juga bisa dipasang di Halaman statis blog, tapi kamu harus merubah sedikit aja css dari #recentpostae {display:none(menjadi table);bla bla bla}.

Creativity of codes and exploiting, with code we can do something fun.
Facebook Instagram Twitter
Show Comments!
Hide comments

1 Response to "Cara Membuat Recent Post By Label di Homepage Post"

Kebijakan berkomentar :

Berkomentarlah dengan tata bahasa yang baik, agar orang tau sebijak apa karakter anda melalui kata-kata,

Silahkan berkomentar apapun selagi masih berhubungan dengan halaman postingan ini,

Dilarang berkomentar menggunakan Link Aktif,

Centang Notife Me agar mendapatkan notifikasi balasan komentar admin melalui Email.

Iklan Atas Artikel

Iklan Tengah Artikel

Iklan Tengah Artikel 2

Iklan Bawah Artikel

© Copyright 2020 Anirock Site - All Rights Reserved Created With