Membuat tampilan blog yang menarik memiliki daya tarik tersendiri dan hal perlu di perhatikan juga adalah kemudahan dalam melakukan navigasi terutama bagian menu label jika bisanya lebel berada di menu sidebar dalam bentuk widget kali ini saya akan menempatkannya di header menu blog.
Header menu tersebut akan di hubungkan dengan url link recent post by lebel pada halaman page blog, sehingga para pembaca dapat dengan mudah menemukan artikel atau halaman apa saja yang ingin dicari.
Recent post by lebel adalah sebuah halaman page blog yang berisikan kategori label tertentu yang menampilkan first image dan judul postingan blog. Tutorial Recent post by lebel pada halaman page blog yang saya berikan akan ditampilkan secara responsive dan tidak membutuhkan waktu lama untuk memuatnya.
Tutorial ini sangat cocok untuk semua jenis template blog karena ukurannya dapat disesuaikan secara otomatis, jadi kalian tidak perlu takut untuk memasangnya.
Cara Mudah Membuat Recent Post By Lebel Pada Halaman Blog
Edit HTML untuk memasang kode font awesome dan letakkan kode ini tepat berada di atas kode </head> atau </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/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>
Jika Sudah menerapkan kode di atas, lanjut ke langkah berikut
1. Buka blog anda > Pilih Halaman > buat Halaman Baru
2. Ubah mode Compose ke menu HTML > kemudian letakkan kode ini di dalamnya
<div id="goindoti">
</div>
<div id="goindotiblog">
</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;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}
#goindoti{margin:0}
#goindoti .goindotiblogspot{width:48.9%;background:#fff;display:inline-block;padding:15px;overflow:hidden;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1)}
#goindoti .goindotiblogspot:nth-child(even){margin:0 0 0px 0}
#goindoti .goindotiblogspot img{background:#ecf0f1;padding:0;float:left;margin:0;margin-right:13px;width:72px}
#goindoti .goindotiblogspot h6,.goindotiblogspot h6 a{text-decoration:none;font-size:14px;font-weight:400;margin:0;color:#000}
#goindoti .goindotiblogspot:hover{background-color:#fefefe}
#goindoti .goindotiblogspot 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW1UULu9nIvXmbnumCazqIhi5EXmM_OjhKsVSSqmh0zLpFlLZLDCyhQy7JqckuxagXgKnTJq3u7fi8-VFotZFtkbgr4QN5iWFMfrwwY-lpp4vIGoY_FPwbQYlN2J-pNJ15eaepMmeTYsq6/s1600/ellipsis-preloader.gif) no-repeat 50% 50%;height:470px}
#goindotiblog{display:table;padding:5px 10px 5px 0;text-align:left;margin:15px auto}
#goindotiblog a{color:#141414;font-size:12px;font-weight:400;display:block;padding:5px 10px}
#goindotiblog span{padding:0;cursor:pointer;transition:all .3s}
#goindotiblog .next,#goindotiblog .previous{position:relative;overflow:hidden;display:inline-block;background:#fff;color:#ff0202;padding:10px 16px;font-size:1rem;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1)}
a img{border:none;border-width:0;outline:none;border-radius: 100em;}
#goindotiblog .next{float:right;margin:0 0 0 10px}
#goindotiblog .previous{float:left;margin:0 10px 0 0}
#goindotiblog .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)}
#goindotiblog a:hover,#goindotiblog span.noactived{color:#ccc}
#goindotiblog i{font-family:fontawesome;font-style:normal}
#goindotiblog .next:hover,#goindotiblog .previous:hover,#goindotiblog .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){#goindoti .goindotiblogspot{width:100%;margin:0 0 10px 0}}
</style>
<script type='text/javascript'>
//<![CDATA[
var jumlahpost = 10;
var ambilpost = 0;
var alamatsitus = "https://www.goindoti.blogspot.com";
var snippet = 0;
var tombolkiri, tombolkanan;
function goindotifeed(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 showgoindoti(e){var t,n,r,a,i,s="";tombolkiri="",tombolkanan="";for(var l=0;l<e.feed.link.length;l++)"previous"==e.feed.link[l].rel&&(tombolkiri=e.feed.link[l].href),"next"==e.feed.link[l].rel&&(tombolkanan=e.feed.link[l].href);for(var d=0;d<jumlahpost&&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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixJSHJBXKa3P8uK9YpdbxHI5WvP-U0xk8lAVbVgh7NeM1e1d5om1J8EXPU7xFZ3ojUdmY4eRJFpp0CKEAfTjfHsbmvVtyTKrdL4_xfXyspnfuRtes7dgi5ZpS31X5Y17TiSL7y2p__kdxR/s1600/no-image.png",s+="<div class='goindotiblogspot'>",s+="<a href='"+r+"'><img src='"+a+"' /></a>",s+="<h6><a href='"+r+"'>"+n+"</a></h6>",s+="<p>"+goindotifeed(i,snippet)+"</p>",s+="</div>"}document.getElementById("goindoti").innerHTML=s,s="",s+=tombolkiri?"<a href='javascript:navigasifeed(-1);' class='previous'><i class='fa fa-chevron-left'></i></a>":"<span class='noactived previous'><i class='fa fa-chevron-left'></i></span>",s+=tombolkanan?"<a href='javascript:navigasifeed(1);' class='next'><i class='fa fa-chevron-right'></i></a>":"<span class='noactived next'><i class='fa fa-chevron-right'></i></span>",s+="<a href='javascript:navigasifeed(0);' class='home'><i class='fas fa-home'></i></a>",document.getElementById("goindotiblog").innerHTML=s}function navigasifeed(e){var t,n;-1==e?(t=tombolkiri.indexOf("?"),n=tombolkiri.substring(t)):1==e?(t=tombolkanan.indexOf("?"),n=tombolkanan.substring(t)):n="?start-index=1&max-results="+jumlahpost+"&orderby=published&alt=json-in-script",n+="&callback=showgoindoti",incluirscript(n)}function incluirscript(e){1==ambilpost&&removerscript(),document.getElementById("goindoti").innerHTML="<div id='recentpostload'></div>",document.getElementById("goindotiblog").innerHTML="";var t=alamatsitus+"/feeds/posts/default/-/Android"+e,n=document.createElement("script");n.setAttribute("type","text/javascript"),n.setAttribute("src",t),n.setAttribute("id","goindotilabel"),document.getElementsByTagName("head")[0].appendChild(n),ambilpost=1}function removerscript(){var e=document.getElementById("goindotilabel"),t=e.parentNode;t.removeChild(e)}onload=function(){navigasifeed(0)};
//]]>
</script>
3. Jangan lupa ganti tulisan bercetak tebal merah dengan nama blog dan label anda, kemudian pilih publikasikan
Untuk Edit pada bagian feed url ini, ganti Android dengan nama label blog.
/feeds/posts/default/-/Android
Jika ingin menampilkan feed halaman index saja tanpa label edit format feed jadi seperti ini
/feeds/posts/default
Keterangan:
| Nama | Keterangan |
|---|---|
| var jumlahpost | Jumlah tampilan postingan di halaman |
| var ambilpost | Ingin ambil dari postingan ke berapa (saran saya biarkan 0) |
| var alamatsitus | Alamat blog anda |
| var snippet | Jumlah snippen (Biarkan 0) |
| https://goindoti.blogspot.com/ | Ubah dengan nama blog anda |
| /feeds/posts/default/-/Android | Ganti Android dengan label blog anda |
Tampilan Recent Post By Lebel
Setelah mengikuti tutorial di atas saat mencoba saatnya mencoba Recent Post By Lebel tadi pada halaman blog sobat apakah berjalan dengan sebagai mana mestinya.
Saya rasa cukup sekian tutorial Cara Mudah Membuat Recent Post By Lebel Pada Halaman Blog, jika ada sesuatu yang belum dipahami silahkan tinggalkan pesan di kolom komentar, Sampai jumpa.