Friday, June 26, 2015

How to add Recent Post Widget with Numbered Navigation,to blogger templete.

How to add Recent Post Widget with Navigation,to blogger templete.


By adding recent post widget,visitors can easily see the recent post you made on blog.in this tutorial I will show you how to add a recent post widget to blogger template with navigation.
In this widget users can easily navigate between recent posts of your blog.

Here is step by step procedure how to do this.

1.Go to your blogger dashboard>> Layout>> Click on add Gadgets.


2.Now from there click HTML/JAVA SCRIPT.

3.A small window will appear in Content past the HTML code given below and in Title put a name that you want to show up on widget.


HTML#


<Style scoped = '' type = 'text / css ">
/ * Recent Post Navigation * /
#recentpostnav {border: 1px solid # 585 858; 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, h6 .recentpostel 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}
0 1px 50% 50% # fff no-repeat; 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 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: transparent! important}
</ Style>
<Script type = 'text / javascript'>
// <! [CDATA [
    var numfeed = 5;
    startfeed var = 0;
    var urlblog = "Http://viennatheme.blogspot.com";
    var charac = 40;
    var urlprevious, urlnext;
arlinafeed function (e, t) {for (var n = n.join (""), n = n.substring (0, t-1)} function showrecentpostsae (e) {var t, n, r, a, i, s = ""; urlprevious = "", urlnext = ""; 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 = "$ thumbnail media" in class = 'recentpostel'> ', s + = "<a href='"+r+"' target='_blank'> <img src ='" + a + '' /> </a> ", s + =" <h6 > <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 id = 'recentpostload'> </ div> ", document.getElementById (" recentpostnavfeed "). innerHTML =" "; var removerscript () {var
//]]>
</ Script>
<Div id = "recentpostsae"> </ div>
<Div id = "recentpostnavfeed"> </ div>

4.Arrenge the widget in blogger layout and place the widget where you want to show up Recent post.

After arranging the widget Click on save arrengment.