Home trik widget Membuat Halaman Recent Post By Label di Blog

Jumat, 26 Mei 2017

Membuat Halaman Recent Post By Label di Blog

Sering sekali saya lihat beberapa blogger yang menampilkan Recent Post By Label dibagian sidebar nya.

Tapi terkadang pemilik blog tidak memikirkan resiko terhadap lamanya proses loading halaman tersebut.

Apalagi ketika pengunjung harus menunggu loading yang cukup lama untuk membaca artikel yang kamu buat dengan memanfaatkan judul menarik pada artikel, mungkin banyak pengunjung yang kabur karena lelah menunggu loading.

Dan saya sendiri pernah mengalami hal itu.



Kamu mengalami hal yang sama ?

Menghapus widget Recent Post By Label yang ada di bagian sidebar memang beresiko meningkatkan Bounce Rate.

Maka dari itu saya memanfaatkan Menu Navigasi untuk mengarahkan pengunjung ke satu halaman yang berisi Recent Post sesuai Label.

Kamu bisa lihat Menu pada navigasi blog ini, dan coba klik salah satu menu nya, maka kamu akan langsung diarahkan ke Halaman Recent Post By Label di Blog.

Kalau kamu malas klik menu navigasi diatas sebagai demo dari tutorial kalli ini, kamu bisa lihat saja gambar yang saya sisipkan dibawah ini.

Contoh Halaman Recent Post By Label di Blog

Maka URL yang akan diarahkan untuk pengunjung blog tidak akan tampil seperti ini.
http://www.domainkamu.blogspot.com/search/label/label

Tapi akan berubah menjadi seperti dibawah ini.
https://www.domainkamu.blogspot.com/p/label.html

Tampilannya Menarik Yah ?
Berikut ini adalah langkah-langkahnya


  • Langkah pertama yang pasti kamu harus sudah login kedalam blog tentunya.
  • Lalu buka menu Template lalu pilih tab Edit HTML
  • Salin Kode CSS dibawah ini dan letakkan tepat diatas </head>
<b:if cond='data:blog.url == &quot;URL Halaman&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/AVvXsEi7ukf9E5g6q0XTR4z5EslE380-usQzww4kQyevwXRoCCrsekfGSIe_KnuVSGgE2bARo8d0KCxFL9aLu98lX1BcohRz-xwCHSZM5nQjFGpGwj6Vz-dBFiU6KEzU2OnaKDxJjcH_R9it2Rs/w220-h19-no/ajax-loader+%25281%2529.gif)50% 50% no-repeat!important;}
</style>
</b:if>
Perhatikan Kode ini adalah TAG Kondisional
<b:if cond='data:blog.url == &quot;URL Halaman&quot;'>
URL Halaman harus diganti menjadi URL Halaman yang akan kamu buat nanti

Baca Juga : Cara Singkat Memahami Fungsi Tag Kondisional


  • Langkah selanjutnya, kamu salin kode dibawah ini dan letakkan tepat diatas kode </body>
<b:if cond='data:blog.url == &quot;URL Halaman&quot;'>
<script type='text/javascript'>
//<![CDATA[
//Script Recent Pos By Label
document.write;var loadToc,loadCategories,_toc={init:function(){var e={homePage:"https://"+window.location.hostname,maxResults:10,numChars:270,thumbWidth:140,thumbHeight:95,navText:"Tampilkan artikel selanjutnya &#9660;",resetToc:"Kembali ke Awal",noImage:"https://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="'+r+'"><a class="toc-title" href="'+s+'" target="_blank" title="'+r+'">'+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>
TAG Kondisional ini harus sama dengan TAG Kondisional pada Kode CSS tadi
<b:if cond='data:blog.url == &quot;URL Halaman&quot;'>
URL Halaman harus diganti menjadi URL Halaman yang akan kamu buat nanti

  • Simpan Template
  • Lalu buatlah Halaman Baru dengan Judul sesuai Label
  • Pilih Tab HTML jangan Compose
  • Selanjutnya letakkan kode dibawah ini
<div id="result-desc">
</div>
<ul id="feed-container"></ul>
<div id="feed-nav">
</div>
<script type="text/javaScript">
  var label="Tutorial";
</script>
Rubah Tutorial menjadi label yang sudah kamu tentukan disetiap artikel yang kamu buat.
  • Lalu Publikasikan Halaman dan salin URL nya untuk diletakkan pada kode Tag Kondisional yang ada pada kolom CSS dan JavaScript diatas

Bagi kamu yang ingin membuat lebih dari 1 Halaman Recent Post By Label silahkan rubah TAG Kondisional pada kolom CSS dan Javascript diatas menjadi seperti dibawah ini.
<b:if cond='data:blog.url in {&quot;URL Halaman&quot; , &quot;URL Halaman&quot; , &quot;URL Halaman&quot;}'>

Simpan Template dan Publikasikan Halaman yang sudah kamu buat tadi maka selesai sudah tutorial Membuat Halaman Recent Post By Label di Blog kali ini.

Jika ada kesulitan jangan sungkan untuk bertanya pada salah satu kolom komentar yang ada dibawah artikel ini yah.
Related Posts

4 komentar:

  1. Akmal Farabi29 Desember 2017 pukul 11.05

    ini nih yang di cari cari.
    masalahnya semua navigasi diblog saya menggunakan label semua..

    BalasHapus
    Balasan
    1. Kang Wira30 Desember 2017 pukul 02.07

      Berarti tinggal di aplikasikan saja ke blognya mas

      Hapus
  2. TritNet26 Maret 2018 pukul 19.12

    Ini banget tutorial yang saya butuhkan.. Makasih gan..

    BalasHapus