Widget Custom Recent Post Blog yang Responsive Dilengkapi Navigasi

Menu "Recent Post" berfungsi untuk menampilkan daftar artikel terbaru di sebuah blog atau website, biasanya widget Recent Post terletak di sidebar atau footer. Fungsi lainnya dari widget ini untuk meningkatkan keterlibatan pengunjung blog dengan mendorong mereka untuk menjelajahi konten lain yang tampil di menu Recent Post saat mengakses sebuah konten / artikel blog dari mesin pencarian google.

Pada umumnya, menu recent post default bawaan blog memiliki keterbatasan dalam menampilkan pastingan artikel, salain itu ada beberapa kelemahan dan kekurangan menu recent post default bawaan blog, yakni sebagai berikut:

1. Tampilan yang Sederhana dan tidak terdapat navigasi untuk membuat nyaman pengunjung saat mencari lebih jauh lagi konten-konten yang lebih lama pada sebuah blog;
2. Tidak dapat dicustom dengan HTML/CSS atau dimodifikasi sesuai keinginan kita.
3. Kurang informatif karena tidak dapat disetting untuk menampilkan recent artikel dari postingan artikel di blog lain yang kita miliki atau recent artikel dari sebuah blog populer.

Untuk mengatasi kekurangan ini, dapat dipertimbangkan untuk mencoba Widget Recent Post versi Custom, yang dapat dimodifikasi sesuai keinginan kita. Dengan memasang widget recent post ini di blogger, akan memudahkan pengunjung untuk melihat daftar postingan blog kalian dengan mudah dan beda dari recent post pada umumnya yang menampilkan hanya beberapa postingan saja. Sudah dilengkapi dengan navigasi yang memudahkan pengunjung dapat menjelajahi postingan lain yang ada di blog kta dari 1 halaman saja. Keren kan?

Lalu, bagaimana cara membuat Widget Custom Recent Post Blog yang Responsive Dilengkapi Navigasi?

1. Login ke Blogger.com;
2. Pilih Template -> Edit HTML, Cari Kode ]]></b:skin> atau </style>;
3. Setelah ketemu, Lalu masukkan CSS di bawah ini tepat diatasnya;
   
   

   /*Recent Post Navigation*/
   a,
   a:visited {
     color: #555;
     outline: none;
     text-decoration: none;
   }
   
   a:hover,
   a:focus,
   a:visited:hover {
     color: #22a1c4;
     text-decoration: none;
   }
   
   .terbaru-container {
     background: #fff;
     width: 320px;
     margin: 20px auto;
     padding: 15px;
     border: 1px solid #ccc;
   }
   
   #cg-terbaru {
     border: 1px solid #585858;
     width: 100%;
     margin: 0 auto;
   }
   
   #terbaru {
     margin: 0px;
   }
   
   .cg-elemen {
     margin: 5px 0;
     padding: 5px;
     height: 79px;
     background: #FFF url("https://png.pngtree.com/png-clipart/20220119/ourmid/pngtree-round-gradient-black-shadow-png-image_4317601.png") no-repeat scroll center bottom;
   overflow: hidden;
     padding-bottom: 20px;
   }
   
   .cg-elemen img {
     padding: 0;
     float: left;
     height: 70px;
     margin-right: 15px;
     width: 70px;
   }
   
   .cg-elemen h6,
   .cg-elemen h6 a {
     font-size: 14px!important;
     font-weight: 500;
     margin: 0;
     color: #222;
     font-family:'Oswald';
     line-height: 18px;
     text-transform: uppercase;
     text-aligaln:'center';
   }
   
   .cg-elemen p {
     font-size: 12px;
     font-family: 'Oswald';
     text-align: left;
     color: #555;
     line-height: normal;
     margin: 5px 0;
   }
   
   #cg-loading {
     color: #888;
     font-family: inherit;
     font-size: 100px;
     letter-spacing: -10px;
     text-align: center;
     text-shadow: -5px 0 1px #444;
     background: #fff url(https://upload.wikimedia.org/wikipedia/commons/c/c7/Loading_2.gif?20170503175831) no-repeat 50% 50%;
     height: 470px;
   }
   
   #cg-navigasifeed {
     color: #bbb;
     font-family: Oswald;
     font-size: 12px;
     text-align: center;
     margin: 0px;
   }
   
   #cg-navigasifeed a {
     color: #141414!important;
     font-family: inherit!important;
     font-size: 12px!important;
     font-weight: 400!important;
     display: block;
     padding: 5px 10px;
   }
   
   #cg-navigasifeed span {
     padding: 5px 10px;
   }
   
   #cg-navigasifeed .next {
     float: right;
   }
   
   #cg-navigasifeed .previous {
     float: left;
   }
   
   #cg-navigasifeed .home {
     text-align: center;
   }
   
   #cg-navigasifeed a:hover,
   #cg-navigasifeed span.noactived {
     color: transparant!important;
   }
   @media screen and (max-width:700px) {
       .terbaru-container, #terbaru, #cg-navigasifeed {
           width:auto;
       }
   }
   
   
   @media screen and (max-width:300px) {
       .cg-elemen img {
           display:none;
       }
   }
   

   
   
4. Selanjutnya memasukkan kode Javascript;
5. Silakan cari kode </body> dan masukan Javascript dibawah ini tepat di atasnya. Opsi lain jika kode ini tidak ditemukan, silakan cari kode </head> dan paste kode dibawah ini tepat di atasnya;
   
   

   var numfeed = 5;
   var startfeed = 0;
   var urlblog = "LINK-BLOG-ANDA";
   var charac = 50;
   var urlprevious, urlnext;
   
   function cyberghost(ghost, banget) {
     var showfeed = ghost.split("<");
     for (var i = 0; i < showfeed.length; i++) {
       if (showfeed[i].indexOf(">") != -1) {
         showfeed[i] = showfeed[i].substring(showfeed[i].indexOf(">") + 1, showfeed[i].length);
       }
     }
     showfeed = showfeed.join("");
     showfeed = showfeed.substring(0, banget - 1);
     return showfeed;
   }
   
   function showterbaru(json) {
     var entry, posttitle, posturl, postimg, postcontent;
     var showblogfeed = "";
     urlprevious = "";
     urlnext = "";
     for (var k = 0; k < json.feed.link.length; k++) {
       if (json.feed.link[k].rel == 'previous') {
         urlprevious = json.feed.link[k].href;
       }
       if (json.feed.link[k].rel == 'next') {
         urlnext = json.feed.link[k].href;
       }
     }
     for (var i = 0; i < numfeed; i++) {
       if (i == json.feed.entry.length) {
         break;
       }
       entry = json.feed.entry[i];
       posttitle = entry.title.$t;
       for (var k = 0; k < entry.link.length; k++) {
         if (entry.link[k].rel == 'alternate') {
           posturl = entry.link[k].href;
           break;
         }
       }
       if ("content" in entry) {
         postcontent = entry.content.$t;
       } else if ("summary" in entry) {
         postcontent = entry.summary.$t;
       } else {
         postcontent = "";
       }
       if ("media$thumbnail" in entry) {
         postimg = entry.media$thumbnail.url;
       } else {
         postimg = "https://1.bp.blogspot.com/-eiX9aalicz8/VWEORfDN71I/AAAAAAAAHdg/vfHyEfYKBh0/s1600/no_image.gif";
       }
       showblogfeed += "<div class='cg-elemen'>";
       showblogfeed += "<a =href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
       showblogfeed += "<h6><a href='" + posturl + "'>" + posttitle + "</a></h6>";
       showblogfeed += "<p>" + cyberghost(postcontent, charac) + "...</p>";
       showblogfeed += "</div>";
     }
     document.getElementById("terbaru").innerHTML = showblogfeed;
     showblogfeed = "";
     if (urlprevious) {
       showblogfeed += "<a href='javascript:navigasifeed(-1);' class='previous'>&#9668; Previous</a>";
     } else {
       showblogfeed += "<span class='noactived previous'>&#9668; Previous</span>";
     }
     if (urlnext) {
       showblogfeed += "<a href='javascript:navigasifeed(1);' class='next'>Next &#9658;</a>";
     } else {
       showblogfeed += "<span class='noactived next'>Next &#9658;</span>";
     }
     showblogfeed += "<a href='javascript:navigasifeed(0);' class='home'>Home</a>";
     document.getElementById("cg-navigasifeed").innerHTML = showblogfeed;
   }
   
   function navigasifeed(url) {
     var p, parameter;
     if (url == -1) {
       p = urlprevious.indexOf("?");
       parameter = urlprevious.substring(p);
     } else if (url == 1) {
       p = urlnext.indexOf("?");
       parameter = urlnext.substring(p);
     } else {
       parameter = "?start-index=1&max-results=" + numfeed + "&orderby=published&alt=json-in-script"
     }
     parameter += "&callback=showterbaru";
     incluirscript(parameter);
   }
   
   function incluirscript(parameter) {
     if (startfeed == 1) {
       removerscript();
     }
     document.getElementById("terbaru").innerHTML = "<div id='cg-loading'></div>";
     document.getElementById("cg-navigasifeed").innerHTML = "";
     var archievefeed = urlblog + "/feeds/posts/default" + parameter;
     var terbaru = document.createElement('script');
     terbaru.setAttribute('type', 'text/javascript');
     terbaru.setAttribute('src', archievefeed);
     terbaru.setAttribute('id', 'MASLABEL');
     document.getElementsByTagName('head')[0].appendChild(terbaru);
     startfeed = 1;
   }
   
   function removerscript() {
     var elemen = document.getElementById("MASLABEL");
     var parent = elemen.parentNode;
     parent.removeChild(elemen);
   }
   onload = function() {
     navigasifeed(0);
   }
   

   
   Catatan: Silakan ganti kata: LINK-BLOG-ANDA dengan url blog yang Anda miliki atau URL blog lainnya yang dikehendaki.
   
   
6. Simpan template
7. Langkah selanjutnya, memasukkan HTML melalui Menu Tata Letak >> Tambahkan Gadget >> HTML/Javascript;
8. Lalu masukkan kode HTML berikut ke dalam Gadget HTML/Javascript;
   
   

   <body>
     <div class="terbaru-container">
       <div id="terbaru"></div>
       <div id="cg-navigasifeed"></div>
     </div>
   </body>
   

   
   
9. Simpan dan Selesai.

Hasilnya lihat pada tombol demo berikut :