Membuat Widget Recent Posts dengan Tombol Next dan Previous

Membuat Widget Recent Posts dengan Tombol Next dan Previous - Banyak blog atau website memasang widget recent post bawaan blogger di blog mereka untuk menampilkan postingan terbaru, namun hanya menampilkan beberapa postingan yakni anatara 5 sampai 10 postingan. Mengapa demikian? Karena jika menampilkan banyak postingan, widget tersebut akan memanjang ke bawah untuk menampilkan artikel atau postingan sehingga banyak memakan tempat. Masalah ini bisa saja diatasi dengan menggunakan fungsi scroll pada widget tersebut. Tapi mungkin menurut beberapa blogger, tampilan sebuah widget yang ditambahkan fungsi scroll akan terlihat kurang menarik. Nah untuk itu, saya akan share sebuah widget recent posts yang tampilannya mirip dengan homepage sebuah blog atau website, yakni widget recent post dengan tombol next dan previous.

Widget Recent Posts dengan tombol next (selanjutnya) dan previous (sebelumnya) merupakan sebuah widget yang digunakan untuk menampilkan postingan-postingan terbaru blog yang ditambahkan fasilitas tombol untuk mencari postingan yang lebih lama maupun postingan yang lebih baru. Pengunjung yang sedang membaca salah satu artikel di blog, secara langsung bisa melihat artikel atau postingan terbaru yang terletak pada sidebar atau footer blog tanpa harus menekan link Home untuk menuju ke halaman depan blog (homepage).

Widget ini bisa diletakkan dimana saja sesuai dengan keinginan, baik itu di sidebar atau footer blog. Di dalam widget ini akan tampil beberapa postingan pada halaman depan layaknya homepage blog yang bisa diatur sesuai dengan keinganan anda. Selain itu widget ini juga cukup Responsif, jadi sangat cocok buat blogger yang ingin mempertahankan loading blog mereka yang responsif.

Untuk tampilannya, silahkan anda liat pada gambar di bawah ini

Widget ini menggunakan beberapa kode CSS untuk styling dan beberapa JavaScript yang tidak dikemas dengan .js. Jadi anda bisa mengatur sendiri mulai dari warna, ukuran widget, jumlah artikel, serta jumlah karakter yang akan ditampilkan pada masing-masing judul. Selain itu, apabila selama anda mengelola sebuah blog atau website anda banyak mengambil refrensi dari blog tertentu, nah anda juga bisa menggunakan recent post dari blog lain dengan mengganti URL pada kode JavaScript dengan URl blog refrensi anda, dengan maksud agar anda tidak ketinggalan artikel terbaru dari blog tersebut (refrensi).

Jika anda berminat untuk memasangnya di blog, ikuti langkah-langkah sederhana berikut.

1. Masuk ke akun blogger anda.
2. Pada menu blogger atau dashboard, pilih menu Tata letak/Layout.
3. Klik Tambahkan gadget / widget pada posisi yang anda inginkan.
4. Pilih dan klik widget HTML/JavaScript.
5. Copy paste kode di bawah ini ke dalam kolom konten.

<style scoped='' type='text/css'>
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
a:link {
text-decoration: none;
outline: none;
transition: all 0.25s;
}
a:visited,
a:link:hover,
a:visited:hover {
text-decoration: none;
}
body {
background: #eaeaea none repeat scroll top left;
color: #444;
font-family: 'Open Sans', sans-serif;
margin: 0;
padding: 0;
position: relative;
line-height: normal;
}
.container {
background: #fff;
max-width: 320px;
margin: 5% auto;
padding: 10px;
box-shadow: 0 10px 5px -5px rgba(0, 0, 0, 0.1);
border: 1px solid #ccc;
font-family: 'Open Sans', sans-serif;
}
/* Recent Posts Widget By https://harmansh.blogspot.com */
#hbrecentpostnav {
border: 1px solid #585858;
width: 100%;
margin: 0 auto;
}
#recentposthb {
margin: 0px;
}
.postrecents {
background: #fff;
display: block;
border: 1px solid #ddd;
margin: 5px 0;
padding: 10px;
height: 79px;
}
.postrecents img {
background: #fff;
padding: 4px;
float: left;
height: 70px;
margin-right: 8px;
width: 70px;
border: 1px solid #ddd;
}
.postrecents h6,
.postrecents h6 a {
text-decoration: none;
font-size: 13px!important;
font-weight: 700!important;
margin: 0;
color: #111;
}
.postrecents:hover {
background-color: #fefefe;
}
.postrecents p {
font-size: 12px;
text-align: left;
color: #555;
line-height: normal;
margin: 5px 0;
}
#recentpostload {
color: #888;
font-family: Tahoma;
font-size: 100px;
letter-spacing: -10px;
text-align: center;
text-shadow: -5px 0 1px #444;
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-udtOh0RiiN-hrXanbzufWqARj8M5BW8ebjYNv0ODZmeUjzDsaASSEbiZK6TYENJkOITigg5Lt4WNAd0XjVtRAN3AHbHr2lsgYth29Lzo7E19OtVzZFtAMaXLCI19sit6Iq0Nhc9efmFB/s1600/loader.gif) no-repeat 50% 50%;
height: 470px;
border: 1px solid #ddd;
}
#hbrecentpostnavfeed {
border: 1px solid #ddd;
color: #bbb;
font-family: Verdana;
font-size: 12px;
text-align: center;
margin: 0px;
}
#hbrecentpostnavfeed:hover {
background-color: #fefefe;
}
#hbrecentpostnavfeed a {
color: #141414!important;
font-family: Tahoma!important;
font-size: 12px!important;
font-weight: 400!important;
display: block;
padding: 5px 10px;
}
#hbrecentpostnavfeed span {
padding: 5px 10px;
}
#hbrecentpostnavfeed .next {
float: right;
}
#hbrecentpostnavfeed .previous {
float: left;
}
#hbrecentpostnavfeed .home {
text-align: center;
}
#hbrecentpostnavfeed a:hover,
#hbrecentpostnavfeed span.noactived {
color: transparant!important;
}
</style>
<div class="container">
<div id="recentposthb"></div>
<div id="hbrecentpostnavfeed"></div>
</div>
<script type='text/javascript'>
//<![CDATA[
var numfeed = 5;
var startfeed = 0;
var urlblog = "https://harmansh.blogspot.com";
var charac = 40;
var urlprevious, urlnext;
function harmanshfeed(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 showrecentposthblog(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/AVvXsEg9_Q-Ox5YmIL_IG3xd73qgS11LwQjIDUXDf-fo91btJzRqLjuPMibWYk9KEndYQriDddPj6E0_pSXuiqMmdQwVhqER5ZkVwZo2Vsfn3GNMLNRpt7InPf_ZEyDAyvgA3Qyy8JP9aSz-dSN3/s1600/no-image.png",s+="<div class='postrecents'>",s+="<a href='"+r+"' target='_blank'><img src='"+a+"' /></a>",s+="<h6><a href='"+r+"'>"+n+"</a></h6>",s+="<p>"+harmanshfeed(i,charac)+"...</p>",s+="</div>"}document.getElementById("recentposthb").innerHTML=s,s="",s+=urlprevious?"<a href='javascript:hblogfeed(-1);' class='previous'>Previous</a>":"<span class='noactived previous'>Previous</span>",s+=urlnext?"<a href='javascript:hblogfeed(1);' class='next'>Next</a>":"<span class='noactived next'>Next</span>",s+="<a href='javascript:hblogfeed(0);' class='home'>Home</a>",document.getElementById("hbrecentpostnavfeed").innerHTML=s}function hblogfeed(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=showrecentposthblog",incluirscript(n)}function incluirscript(e){1==startfeed&&removerscript(),document.getElementById("recentposthb").innerHTML="<div id='recentpostload'></div>",document.getElementById("hbrecentpostnavfeed").innerHTML="";var t=urlblog+"/feeds/posts/default"+e,n=document.createElement("script");n.setAttribute("type","text/javascript"),n.setAttribute("src",t),n.setAttribute("id","harmanshlabel"),document.getElementsByTagName("head")[0].appendChild(n),startfeed=1}function removerscript(){var e=document.getElementById("harmanshlabel"),t=e.parentNode;t.removeChild(e)}onload=function(){hblogfeed(0)};
//]]>
</script>

Catatan :
- Angka 5 berwarna merah menunjukkan jumlah postingan yang akan tampil pada halaman depan widget, Bisa anda ganti sesuai dengan selera anda.
- Tulisan https://harmansh.blogspot.com berwarna merah, silahkan ganti dengan URL blog anda atau URL blog lain (refrensi).
- Angka 40 berwarna merah menunjukkan jumlah karakter pada setiap postingan pada widget, bisa anda ganti dengan angka yang nilainya lebih bsar atau lebih kecil sesuai selera.

6. Beri judul pada kolom judul.
7. Terakhir klik tombol Simpan / Save.

Demikian tutorial sederhana mengenai bagaimana membuat widget recent post dengan tombol next dan previous mirip halaman depan blog atau homepage. Semoga bermanfaat dan membuat tampilan blog atau website anda menjadi lebih profesional. " Happy Blogging "

Silahkan klik disini untuk berlangganan Artikel Gratis via email, Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di HARMANSYAH BLOG