Archive Pages Design$type=blogging

Cara Memasang Widget Recent Post dengan Navigasi

C ara Memasang Widget Recent Post dengan Navigasi Bar . Sobat blogger, kali ini saya akan membagikan sebuah tutorial yang sebelumnya sudah ...


Cara Memasang Widget Recent Post dengan Navigasi Bar. Sobat blogger, kali ini saya akan membagikan sebuah tutorial yang sebelumnya sudah pernah di share oleh sis Arlina pada blognya yang bernama Arlina Design cek disini, ya sesuai judul diatas Recent Post Dengan Navigasi.  Apa itu recent post dengan navigasi? yaitu sebuah widget yang berfungsi menampilkan postingan-postingan terbaru dari blog kita dengan tambahan navigasi bar pada bagian bawahnya (terjemah bebas ala antoncabon)
Recent post secara default bagi yang menggunakan flatform blogger belum tersedia jadi kita perlu sedikit kreasi dan inisiatif untuk menambahkannya pada blog sobat, sebenarnya ada banyak jenis widget recent post yang sudah dibagikan oleh blogger diluar sana, tapi recent post kali ini agak sedikit nyeleneh karena ada tombol navigasi pada bagian bawah nya, karena ke nyelenehannya itulah maka saya akan bagikan kembali cara membuat atau memasangnya di blog kesayangan kita sob...
Cara Memasang Widget Recent Post dengan Navigasi Bar
Cara Memasang Widget Recent Post dengan Navigasi Bar

Ok sudah siap yuk kita masuk ke proses pemasangannya dan sangat simpel:
Catatan: Backup dulu Templatenya sebelum memulai semua langkah-langkah ini !
DEMO

Cara Memasang Widget Recent Post Dengan Navigasi

Langkah ke-1: Masuk ke menu Tataletak>>Tambahkan Gadget HTML/Javascript  Masukan Kode Javascript dan Css berikut:

 <div id="recentpostsae"></div>
<div id="recentpostnavfeed"></div>
<script type='text/javascript'>
//<![CDATA[
var numfeed = 5;
var startfeed = 0;
var urlblog = "http://kyleandkelsey.blogspot.com/";
var charac = 40;
var urlprevious, urlnext;
function antoncabonfeed(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:"http://3.bp.blogspot.com/-BHuXHny1kOk/VXrkSyxKCjI/AAAAAAAACas/pZLJAEUDtds/s1600/no-image.png",s+="<div class='recentpostel'>",s+="<a href='"+r+"' target='_blank'><img src='"+a+"' /></a>",s+="<h6><a href='"+r+"'>"+n+"</a></h6>",s+="<p>"+antoncabonfeed(i,charac)+"...</p>",s+="</div>"}document.getElementById("recentpostsae").innerHTML=s,s="",s+=urlprevious?"<a href='javascript:navigasifeed(-1);' class='previous'>Previous</a>":"<span class='noactived previous'>Previous</span>",s+=urlnext?"<a href='javascript:navigasifeed(1);' class='next'>Next</a>":"<span class='noactived next'>Next</span>",s+="<a href='javascript:navigasifeed(0);' class='home'>Home</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"+e,n=document.createElement("script");n.setAttribute("type","text/javascript"),n.setAttribute("src",t),n.setAttribute("id","antoncabonlabel"),document.getElementsByTagName("head")[0].appendChild(n),startfeed=1}function removerscript(){var e=document.getElementById("antoncabonlabel"),t=e.parentNode;t.removeChild(e)}onload=function(){navigasifeed(0)};
//]]>
</script>
<style>
/* Recent Post Navigasi */
#recentpostnav {
border: 1px solid #585858;
width: 100%;
margin: 0 auto;
}
#recentpostsae {
margin: 0px;
}
.recentpostel {
background: #fff;
display: block;
border: 1px solid #ddd;
margin: 5px 0;
padding: 10px;
height: 79px;
}
.recentpostel img {
background: #fff;
padding: 4px;
float: left;
height: 70px;
margin-right: 8px;
width: 70px;
border: 1px solid #ddd;
}
.recentpostel h6,
.recentpostel h6 a {
text-decoration: none;
font-size: 13px!important;
font-weight: 700!important;
margin: 0;
color: #111;
}
.recentpostel:hover {
background-color: #fefefe;
}
.recentpostel 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(http://2.bp.blogspot.com/-60aISBQLRY0/VFBMqzLfzGI/AAAAAAAABgM/GInmVTvEzkc/s1600/loader.gif) no-repeat 50% 50%;
height: 470px;
border: 1px solid #ddd;
}
#recentpostnavfeed {
border: 1px solid #ddd;
color: #bbb;
font-family: Verdana;
font-size: 12px;
text-align: center;
margin: 0px;
}
#recentpostnavfeed:hover {
background-color: #fefefe;
}
#recentpostnavfeed a {
color: #141414!important;
font-family: Tahoma!important;
font-size: 12px!important;
font-weight: 400!important;
display: block;
padding: 5px 10px;
}
#recentpostnavfeed span {
padding: 5px 10px;
}
#recentpostnavfeed .next {
float: right;
}
#recentpostnavfeed .previous {
float: left;
}
#recentpostnavfeed .home {
text-align: center;
}
#recentpostnavfeed a:hover,
#recentpostnavfeed span.noactived {
color: transparant!important;
}
</style>

Langkah Ke-2: Ganti url http://kyleandkelsey.blogspot.com/ dengan url blog sobat! lalu klik Simpan.

SELESAI ! Selamat mencoba.
Kredit source code

COMMENTS

Nama

Animasi Blogger Button Css Javascript jQuery Sider Sosial Media Syntax Highlighter Template Tips Tutorial Windows 10
false
ltr
item
Simple Tutorial: Cara Memasang Widget Recent Post dengan Navigasi
Cara Memasang Widget Recent Post dengan Navigasi
http://1.bp.blogspot.com/-4aoisaqvcvM/Vc3eA0f9RYI/AAAAAAAAAcw/PG3Ox3SKB2w/s640/rc-post-dgn-navigasi.jpg
http://1.bp.blogspot.com/-4aoisaqvcvM/Vc3eA0f9RYI/AAAAAAAAAcw/PG3Ox3SKB2w/s72-c/rc-post-dgn-navigasi.jpg
Simple Tutorial
http://mirandahardy.blogspot.com/2015/08/cara-memasang-widget-recent-post-dengan.html
http://mirandahardy.blogspot.com/
http://mirandahardy.blogspot.com/
http://mirandahardy.blogspot.com/2015/08/cara-memasang-widget-recent-post-dengan.html
true
4419251694985783704
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago