Cara membuat recent post berdasarkan label/kategori dan bergambar , cara membuat recen post label ini sudah saya edit/desain ulang hingga tampilanya makin menarik kolom kotak nya sudah saya set ke responsive ukuran dimana akan di tempatkan recen post tersebut, misalnya ukuran sidebar yang ukuranya panjang 300px maka recen post ini juga akan tampil dengan panjang 300px.
Contoh recent post editan saya seperti gambar diatas , recent post tersebut bisa di buat untuk menampilkan cuplikan karakter/postingan nya kita tinggal memasukan angka berapa karakter yang akan di tampilkan dalam setiap judul posting nya, kalau saya sendiri tidak menampilkan karakternya supaya pengujung bisa cepat mengetahui judul-judul postingan saja, selain itu biar tidak terlihat penuh, sehingga pengunjung bisa fokus melihat poin judul-judul artikel yang dibuatnya.
Bagi teman-teman yang belum tahu akan recent post , Recen Post adalah sebuah alat untuk menampilkan sebagian judul-judul postingan yang sudah di publikasikan dalam sebuah website tersebut.
hal ini bertujuan untuk memudahkan bagi pengunjung untuk menelusuri postingan.
Oke Tutorial Cara membuat Recent Post berdasarkan Label ini di jamin berhasil dan lumayan menarik karena sudah saya desain supaya modelnya tidak ketinggalan, silahkan ikuti panduanya di bawah ini :
Cara Membuat Recent Post Berdasarkan Label/kategori
1.Buka blogger anda dan login kedalam dashboard blog
2.Pilih /Klik Tema (anda bisa mencadangkan dulu template anda) jika anda mau
3.Klik edit Html
4.Kopi rangkaian kode pertama di bawah ini dan pastekan / tempelkan di atas kode </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>
5.Kemudian Simpan perubahan template anda
<div id="recentpostsae">
</div>
<div id="recentpostnavfaeed">
</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:16px;font-weight:1000;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:0px solid #585858;width:100%;margin:0 auto}
#recentpostsae{margin:0}
#recentpostsae .recentpostel{width:98.9%;background:#f2f2f2;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:#fff;padding:0;float:left;margin:0;margin-right:13px;width:72px}
#recentpostsae .recentpostel h6,.recentpostel h6 a{text-decoration:none;font-size:16px;font-weight:1000;margin:0;color:#0000ff}
#recentpostsae .recentpostel:hover{background-color:#fefefe}
#recentpostsae .recentpostel p{font-size:16px;text-align:left;color:#0000ff;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:16px;font-weight:1000;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:#0000ff;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 = 5;
var startfeed = 0;
var urlblog = ":/https/jasa-seting.blogspot.com/";
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/-/COVID-19"+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>
Keterangan :
Rubah kode yang seperti ada di bawah ini :
var numfeed = 5; (angka 5 menunjukan jumlah postingan yang akan di tampilkan / bisa anda rubah)
var startfeed = 0;
var urlblog = "https://jasa-seting.blogspot.com/"; (ganti dengan url alamat blog anda/jika blog anda sudah domain .com dan jika menggunakan domain dotkom tidak muncul maka gunakan alamat blogspot web anda)
var charac = 100; (Untuk menunjukan jumlah karakter postingan anda, jika tanpa postingan ganti angka 0 (nol) )
/feeds/posts/default/-/COVID-19" : Tulisan COVID-19 Ganti dengan Nama Label anda
Jika Teman-teman ingin menampilkan postingan semua label (bukan berdasarkan label) silahkan ganti url nya menjadi seperti di bawah ini
/feeds/posts/default
9.Setelah semua nya sudah anda rubah sesuai keinginan anda silahkan klik simpan gadget anda.
10.selesai.
Demikian tutorial cara membuat recent post bergambar sesuai label , saya jamin jika mengikuti panduan dengan tepat pasti berhasil, dan jika ada yang di tanyakan silahkan bertanya via kolom komentar di bawah ini ya, Trimakasih semoga bermanfaat.
Contoh recent post editan saya seperti gambar diatas , recent post tersebut bisa di buat untuk menampilkan cuplikan karakter/postingan nya kita tinggal memasukan angka berapa karakter yang akan di tampilkan dalam setiap judul posting nya, kalau saya sendiri tidak menampilkan karakternya supaya pengujung bisa cepat mengetahui judul-judul postingan saja, selain itu biar tidak terlihat penuh, sehingga pengunjung bisa fokus melihat poin judul-judul artikel yang dibuatnya.
Bagi teman-teman yang belum tahu akan recent post , Recen Post adalah sebuah alat untuk menampilkan sebagian judul-judul postingan yang sudah di publikasikan dalam sebuah website tersebut.
hal ini bertujuan untuk memudahkan bagi pengunjung untuk menelusuri postingan.
Oke Tutorial Cara membuat Recent Post berdasarkan Label ini di jamin berhasil dan lumayan menarik karena sudah saya desain supaya modelnya tidak ketinggalan, silahkan ikuti panduanya di bawah ini :
Cara Membuat Recent Post Berdasarkan Label/kategori
1.Buka blogger anda dan login kedalam dashboard blog
2.Pilih /Klik Tema (anda bisa mencadangkan dulu template anda) jika anda mau
3.Klik edit Html
4.Kopi rangkaian kode pertama di bawah ini dan pastekan / tempelkan di atas kode </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>
5.Kemudian Simpan perubahan template anda
6.Langkah berikutnya menuju ke Tata Letak
7.Klik Tambahkan Gadget dan Pilih Gadget HTML/JavaScript
8.Kopi Rangkaian kode ke dua di bawah ini dan masukan ke gadget baru tersebut , kemudian simpan gadget nya.
<div id="recentpostsae">
</div>
<div id="recentpostnavfaeed">
</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:16px;font-weight:1000;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:0px solid #585858;width:100%;margin:0 auto}
#recentpostsae{margin:0}
#recentpostsae .recentpostel{width:98.9%;background:#f2f2f2;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:#fff;padding:0;float:left;margin:0;margin-right:13px;width:72px}
#recentpostsae .recentpostel h6,.recentpostel h6 a{text-decoration:none;font-size:16px;font-weight:1000;margin:0;color:#0000ff}
#recentpostsae .recentpostel:hover{background-color:#fefefe}
#recentpostsae .recentpostel p{font-size:16px;text-align:left;color:#0000ff;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:16px;font-weight:1000;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:#0000ff;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 = 5;
var startfeed = 0;
var urlblog = ":/https/jasa-seting.blogspot.com/";
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/-/COVID-19"+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>
Keterangan :
Rubah kode yang seperti ada di bawah ini :
var numfeed = 5; (angka 5 menunjukan jumlah postingan yang akan di tampilkan / bisa anda rubah)
var startfeed = 0;
var urlblog = "https://jasa-seting.blogspot.com/"; (ganti dengan url alamat blog anda/jika blog anda sudah domain .com dan jika menggunakan domain dotkom tidak muncul maka gunakan alamat blogspot web anda)
var charac = 100; (Untuk menunjukan jumlah karakter postingan anda, jika tanpa postingan ganti angka 0 (nol) )
/feeds/posts/default/-/COVID-19" : Tulisan COVID-19 Ganti dengan Nama Label anda
Jika Teman-teman ingin menampilkan postingan semua label (bukan berdasarkan label) silahkan ganti url nya menjadi seperti di bawah ini
/feeds/posts/default
9.Setelah semua nya sudah anda rubah sesuai keinginan anda silahkan klik simpan gadget anda.
10.selesai.
Demikian tutorial cara membuat recent post bergambar sesuai label , saya jamin jika mengikuti panduan dengan tepat pasti berhasil, dan jika ada yang di tanyakan silahkan bertanya via kolom komentar di bawah ini ya, Trimakasih semoga bermanfaat.
