Cara Membuat Recent Post Berdasarkan Label di Halaman Statis Blogger

Sudah beberapa kali saya membuat artikel mengenai widget recent post atau postingan terbaru ini.

Pertama saya pernah menulis tutorial cara membuat widget recent post keren warna warni untuk sidebar blog.

Kemudian saya juga pernah menulis cara membuat widget recent post slider yang bisa Anda gunakan di blog Anda khususnya dibagian sidebar blog.

Namun yang berbeda pada widget recent post atau widget artikel terbaru kali ini yaitu terdapat pada letak atau penempatan dari widget recent post ini.

Pada umumnya widget ini dipasang pada sidebar blog, tapi widget recent post by label ini khusus untuk halaman statis (static page).

Baca juga: Cara Membuat Formulir Kontak di Halaman Statis Blogger

Widget recent post ini bisa diatur untuk menampilkan daftar artikel terbaru sesuai label dan bisa juga berdasarkan postingan terbaru.

Tentunya widget ini akan update secara otomatis setelah posting artikel baru.

Selain itu, widget recent post berdasarkan label untuk halaman statis ini memiliki desain yang bagus dan sudah saya optimasi dengan menambahkan title tag pada link dan alt tag pada gambar, sehingga lebih SEO friendly.

Widget recent post per label ini dilengkapi dengan thumbnail atau gambar kecil dengan desain grid atau kotak yang sangat bagus di pasang pada blog Anda.

Sekilas widget recent post sesuai label ini mirip dengan sitemap atau daftar isi sebuah blog jadi kita bisa memanfaatkannya untuk dipasang pada bagian halaman statis blogger.

Bagi Anda yang tertarik untuk membuat recent post berdasarkan label di halaman statis blogger, silahkan ikuti langkah-langkahnya di bawah ini.

Cara Membuat Recent Post Berdasarkan Label di Halaman Statis Blogger

Cara Memasang Widget Recent Post by Label di Halaman Statis Blog


Pertama, widget recent post ini menggunakan ikon dari Font Awesome oleh karen itu jika blog Anda belum memasang kode font awesome silahkan pasang kode ini di atas kode </head> tapi jika sudah ada maka langkah ini bisa Anda lewat saja.

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

Kedua, kemudian masuk ke Blogger.com > pilih menu Halaman > lalu klik Halaman baru untuk membuat postingan di halaman statis.

Ketiga, setelah itu Anda akan berada dibagian text editor sama seperti ketika sedang menulis artikel di blogger, di disini pastikan Anda berada pada bagian HTML bukan compose.

Keempat, masukkan judul terlebih dahulu misalnya nama sesuai label yang ingin di tampilkan.

Kelima, masukkan kode ini dan edit beberapa kode yang sudah di tandai sesuai dengan kebutuhan Anda.

<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbpWvUzQWs9CZw7gW6wnY_lgCicVVr-jlSgcznKs7R_-LcAOyVTLibUxzAtf-tpRTnW4mdfICDfCoIltdzCPJlsHIbQX4X7udIt2RK5Tppv5GrwwHbgNFdD-Y6cuHHsIxkAxfxiWb0Bc18/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 = 12;
var startfeed = 0;
var urlblog = "https://www.caramanual.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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitmG3MhUIMBeEcfdnnlr7AQ3NzB-ENcpp7eey1A9hireXNx3qcE0UH7hxDE6z_LaF5YwABFgl4IFJTFZ0z0J6HcoNcNd_lHs_2QXya58ZON6T0mq-rV_LlgEYwHXGHwaNSko0GFoFF9XCZ/s1600/no-image.png",s+="<div class='recentpostel'>",s+="<a href='"+r+"' title='"+n+"'><img alt='"+n+"' src='"+a+"' title='"+n+"'/></a>",s+="<h6><a href='"+r+"' title='"+n+"'>"+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' title='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' title='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' title='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","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:
1. var numfeed = 12; silahkan tentukan jumlah artikel yang ingin di tampilkan.
2. var urlblog = "https://www.caramanual.com"; silahkan ganti dengan URL blog Anda.
3. /feeds/posts/default/-/Blogger ini artinya hanya menampilkan artikel dengan nama label Blogger, silahkan ganti dengan nama label yang ada di blog Anda.
4. Jika Anda ingin menampilkan semua postingan terbaru ganti kode /feeds/posts/default/-/Blogger menjadi /feeds/posts/default.

Keenam, jika semuanya sudah di edit silahkan klik Publikasikan.

Code by Arlina Design, optimized by Cara Manual.

Itulah artikel mengenai cara membuat recent post berdasarkan label di halaman statis blogger, semoga bermanfaat.
Cara Manual Cuman hobi nulis tentang tutorial blog jadi deh blog cara manual.

9 Komentar untuk "Cara Membuat Recent Post Berdasarkan Label di Halaman Statis Blogger"

  1. di halaman saya tampilannya cuman satu bari, gimana caranya agar jadi 2 bagi per page?

    BalasHapus
    Balasan
    1. Sepertinya halaman statis blognya memiliki lebar yang lebih kecil sehingga hanya muncul satu baris.

      Agar tampil dua baris, coba hilangkan sidebar blognya di halaman statis. Dengan menambahkan kode CSS berikut pada script di atas atau lebih tepatnya di atas kode </style>

      #sidebar, #sidebar-wrapper, .sidebar, .sidebar-wrapper{display:none}

      Atau untuk lebih jelasnya bisa cari postingan di blog ini dengan judul
      "5 cara menghilangkan sidebar di blogger".

      Hapus
    2. tampil hanya 1 baris karena tampilan home page static, coba ganti dengan Grid pasti otomatis akan berubah, karena disain dari arlina ini pada dasarnya mengikuti gaya default

      Hapus
    3. @Bang Jaka,
      Bukan karena tampilan homepagenya.
      Mau bagian homepagenya static, grid, list atau yang lainnya, tapi widget ini tidak akan mungkin di simpan di homepage blog kan?

      Jadi yang perlu di ubah adalah letak dimana widget ini di simpan, saya menyarankan widget ini untuk di simpan di bagian Halaman berhubung tidak semua template blog memiliki desain statis, maka saya anjurkan untuk menghilangkan atau menyembunyikan widget sidebar khusus untuk halaman widget ini. Semoga paham sampai di sini.

      Hapus
  2. Halo,

    Pastikan sudah mengganti URL Blog dan Label.
    Silahkan baca kembali keterangan postingan di atas.

    BalasHapus
  3. Coba tambahkan kode jQuery ini di atas kode </body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    BalasHapus
  4. caranya agar semua postingan secara otomatis ada recen post kayak gini gmana ya min ?

    BalasHapus
    Balasan
    1. Hai DarmaWulan,

      Untuk menampilkan semua postingan, silahkan baca Keterangan postingan ini di poin nomor 4.

      Terima kasih.

      Hapus
  5. Tolong dong kasih kode untuk recent posts grid halaman statis, dengan gambar thumbnail jelas.terimaksih

    BalasHapus
Jika ada yang masih kurang jelas, silahkan untuk bertanya pada kolom komentar di bawah ini atau dengan menghubungi kami di halaman kontak.

1. Centang kotak Notify me untuk mendapatkan notifikasi komentar.
2. Komentar kami moderasi, dan tidak semuanya dipublish.
3. Semua komentar dengan menambahkan link akan dihapus dan tidak akan dipublikasikan.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel