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 yaitu anatara 5 hingga 10 postingan. Mengapa demikian? Karena jikalau menampilkan banyak postingan, widget tersebut akan memanjang ke bawah untuk menampilkan artikel atau postingan sehingga banyak memakan tempat. Masalah ini dapat saja diatasi dengan memakai fungsi scroll pada widget tersebut. Tapi mungkin berdasarkan 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 seakan-akan dengan homepage sebuah blog atau website, yaitu widget recent post dengan tombol next dan previous.
Widget Recent Posts dengan tombol next (selanjutnya) dan previous (sebelumnya) merupakan sebuah widget yang dipakai untuk menampilkan postingan-postingan terbaru blog yang ditambahkan akomodasi tombol untuk mencari postingan yang lebih usang maupun postingan yang lebih baru. Pengunjung yang sedang membaca salah satu artikel di blog, secara pribadi dapat 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 dapat 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 dapat 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 memakai beberapa isyarat CSS untuk styling dan beberapa JavaScript yang tidak dikemas dengan .js. Makara anda dapat mengatur sendiri mulai dari warna, ukuran widget, jumlah artikel, serta jumlah abjad 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 dapat memakai recent post dari blog lain dengan mengganti URL pada isyarat JavaScript dengan URl blog refrensi anda, dengan maksud biar 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 sajian blogger atau dashboard, pilih sajian Tata letak/Layout.
3. Klik Tambahkan gadget / widget pada posisi yang anda inginkan.
4. Pilih dan klik widget HTML/JavaScript.
5. Copy paste isyarat di bawah ini ke dalam kolom konten.
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 abjad pada setiap postingan pada widget, dapat 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 menciptakan widget recent post dengan tombol next dan previous seakan-akan halaman depan blog atau homepage. Semoga bermanfaat dan menciptakan tampilan blog atau website anda menjadi lebih profesional. " Happy Blogging "
Sumber https://harmansh.blogspot.com/
Widget Recent Posts dengan tombol next (selanjutnya) dan previous (sebelumnya) merupakan sebuah widget yang dipakai untuk menampilkan postingan-postingan terbaru blog yang ditambahkan akomodasi tombol untuk mencari postingan yang lebih usang maupun postingan yang lebih baru. Pengunjung yang sedang membaca salah satu artikel di blog, secara pribadi dapat 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 dapat 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 dapat 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 memakai beberapa isyarat CSS untuk styling dan beberapa JavaScript yang tidak dikemas dengan .js. Makara anda dapat mengatur sendiri mulai dari warna, ukuran widget, jumlah artikel, serta jumlah abjad 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 dapat memakai recent post dari blog lain dengan mengganti URL pada isyarat JavaScript dengan URl blog refrensi anda, dengan maksud biar 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 sajian blogger atau dashboard, pilih sajian Tata letak/Layout.
3. Klik Tambahkan gadget / widget pada posisi yang anda inginkan.
4. Pilih dan klik widget HTML/JavaScript.
5. Copy paste isyarat 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/AVvXsEjsBk9-i1UG4Pe5CGRH7eJHoOelr_aKLRe_GjhhEOsopbCBZvV2TuSYmuro90l1EnXWwmRMBttUHL5erJU0yLavvr4FyhVwotavc77aWVXNfYs_juI5RsQHKEAYvOZd2C0xQV2kNYhGXurw/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/AVvXsEizXEnqaiXkPC-Uq5PruE6HUy6oDTdRQq-TdriCnTaSLSK4jn25hvQXfji6uYAUftXxJJ9I-5E7Kyn2-CLR6_6eFBfjs-qdYzU9_dc1A20Dk5evcP23ma0np-7MJxiUeH4rX4OcI-kQcgzc/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 abjad pada setiap postingan pada widget, dapat 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 menciptakan widget recent post dengan tombol next dan previous seakan-akan halaman depan blog atau homepage. Semoga bermanfaat dan menciptakan tampilan blog atau website anda menjadi lebih profesional. " Happy Blogging "
Sumber https://harmansh.blogspot.com/