Blogger Recent Post Widget With Home, Next And Previous Option
Today i will be sharing with you how to add blogger recent post widget with home, next and previous option. And adding this widget is just an easy one step method and next you blogger blog will be looking elegant.
I decided to share this great tool with you so as to enable you expose a wide range of your blogger contents to your readers without filling up your blog with lot of widgets. And also the widget performs well in terms of traffic and SEO, as it enable your readers to read a wide range of post they see on the sidebar.
The beauty of adding this widget is extremely easy and straight forward. I mean it is beautiful. The plugin shows the following features.
- Post Thumbnail Image
- Post Title snippet
- Summary (If enabled).
Normally recent post widget offers only the above listed options. But this new blogger recent post widget features more advanced features.
- A home button located at the bottom
- Next page button which opens up another set of posts
- Precious page button which takes you back to the already open post.
Now with the above features, you definitely need to include this widget into your blog.
Recommended: 5 Reasons Why Copy Bloggers Never Get Paid
Recommended: 5 Reasons Why Copy Bloggers Never Get Paid
How to Add Blogger Recent Post Widget With Home, Next And Previous Option
Adding this widget is very easy as long as you understand HTML and JavaScript. But if you don't, be sure to get a safe guide.
Log in to your blogger blog, and head straight to the Layout tab in your vertical menu. Now clink on add new gadget (Wherever you want this plugin to be shown). Find the HTML/JavaScript and clink on the + button.
<style scoped='' type='text/css'>Copy the above code and paste it inside the HTML/JavaScript box, Once done, make a few customization as shown below.
/* Recent Post Navigasi */
#recentpostnav{border:1px solid #585858;width:100%;margin:0 auto}
#recentpostsae{margin:0}
.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:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYr8mXyUPkPccCCXSqeXp89AAIbviAiKyquAdk-V98mwSYN2xqEpEQxg3hHI2jQcAatoCBreQyoF5mymqBVDnyp2GDuQ3FFh8WKgaPvFhCrWxxWCD82xcllahvST0fkdhnEr3h8FK3Nc8x/s1600/loader.gif) 50% 50% no-repeat #fff;height:470px;border:1px solid #ddd}
#recentpostnavfeed{border:1px solid #ddd;color:#bbb;font-family:Verdana;font-size:12px;text-align:center;margin:0}
#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>
<script type='text/javascript'>
//<![CDATA[
var numfeed = 5;
var startfeed = 0;
var urlblog = "http://obhiabablog.com.ng";
var charac = 40;
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/AVvXsEhTOTovGIAnK1K8eWWA3usSUhPO8CQdaHsed7sJutjx6yNsNnfZc5_4tMbN9NCpc38p8xL-Sln2p4uM0iw7ZFjJMk3mdE8ywV_XrPxlLBaxYJ8p86LrNZiEXGwPuVVDm5jcq6NSJwYWebMq/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>"+arlinafeed(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","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>
<div id="recentpostsae"></div>
<div id="recentpostnavfeed"></div>
- Change Obhiabablog.blogspot.com to your homepage URL.
- You can also customize the number of post to be shown perpage by simply change the " var numfeed = 5;" to any preferred number.
- Last thing to be change is the number of characters to be shown as the title and summary. Here you can change the value " var charac = 40;".
Credits
Without failing, this great widget was created by and just a few efforts was added to this too so as to enable you understand it and use it flexibly with no duress.
Source: http://obhiabablog.blogspot.com.ng/2016/02/blogger-recent-post-widget-with-home-next-previous-option.html#more
Source: http://obhiabablog.blogspot.com.ng/2016/02/blogger-recent-post-widget-with-home-next-previous-option.html#more
BERITA LENGKAP DI HALAMAN BERIKUTNYA
Halaman Berikutnya
0 Response to "Blogger Recent Post Widget With Home, Next And Previous Option"
Posting Komentar