Recent post widget for blogger with thumbnails

How to add Recent post widget/gadget in blogger blog.

Log into Blogger.com
Go to Blogger Dashboard.
Click on Layout
Than Click on Add a Gadget.

5 Type of Recent Post Widget Blogger Widgets/Gadgets

Now choose html/Javascript .
Now copy paste your desired code from below.

5 Type of Recent Post Widget Blogger Widgets/Gadgets

Scrolling/Ticker Recent Post Widget

5 Type of Recent Post Widget Blogger Widgets/Gadgets

<style>img.recent_thumb {padding:1px;width:55px;height:55px;border:0;float:right;margin:0 0 5px 10px;}.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;}.recent_posts_with_thumbs a {text-decoration:none;}.recent_posts_with_thumbs strong {font-size:10px;}</style> <script style='text/javascript' src="https://dl.dropbox.com/s/ercbfzxm41o63i4/NBTjQuery-scrolling-ticker.js" ></script> <script style='text/javascript' src='https://dl.dropbox.com/s/mzcmuhcas156xhx/NBTscrollingRP.js'></script> <script style='text/javascript'> var numposts = 10; var showpostthumbnails = true; var displaymore = false; var displayseparator = false; var showcommentnum = false; var showpostdate = false; var showpostsummary = true; var numchars = 100; $(document).ready(function () {$('#sai').vTicker({ speed: 500, pause: 3000, showItems: 3, animation: 'fade', mousePause: false, height: 0, direction: 'up' });}); </script> <div id="sai"> <script src='http://www.rohanmod.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script> </div>

Stylish Animated Recent Post Widget

5 Type of Recent Post Widget Blogger Widgets/Gadgets

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--
#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
.spydate{
overflow:hidden;
font-size:10px; }

#spylist ul{
width:350px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:230px;
background: #1ed2f2;
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 1px 10px !important;
-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;-o-transition:all 0.2s ease;border: 0 none !important;-webkit-border-top-left-radius:40px;-webkit-border-bottom-right-radius:40px;-moz-border-radius-topleft:40px;-moz-border-radius-bottomright:40px;border-top-left-radius:40px;border-bottom-right-radius:40px;
}

#spylist li:hover {
background: #84f6f5;

}

#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}

#spylist li img {
float:left;
margin-right:5px;
margin-top:3px;
background:none;
border:0;
}

.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}
-->
</style>
<script language='JavaScript'>


imgr = new Array();

imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;

boxwidth = 255;

cellspacing = 6;

borderColor = "#232c35";

bgTD = "#000000";

thumbwidth = 70;

thumbheight = 70;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = false;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 5;

home_page = "http://rohanmod.blogspot.com/";

limitspy=4
intervalspy=4000

</script>

<div id="spylist">
<script src='http://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/recentpostthumbspy-min.js' type='text/javascript'></script>
</div><a style=" float:right;font-size:8px; color:#3B78CD; text-decoration:none;" href="http://rohanmod.blogspot.in/2013/03/5-type-of-recent-post-widget-blogger.html">Blogger widget</a>

Recent Postw widget without snippets

<div id="hlrpsb">
<script style="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/recent-posts-with-titles-only.js"></script>
<script style="text/javascript">var numposts = 10;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script>
<script src="http://your-blog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script></div>
<div style="font-family: arial, sans-serif; font-size: 9px;" id="rpdr"><a href="http://rohanmod.blogspot.in/2013/03/5-type-of-recent-post-widget-blogger.html" title="Grab this" target="_blank">Recent Posts Widget</a> by <a href="http://rohanmod.blogspot.com" title="Recent Posts Widget">rohanmod</a></div><noscript>Oops! Make sure JavaScript is enabled in your browser.</noscript>
<style type=text/css>
#hlrpsb a {color: #0B3861; font-size: 13px;} #rpdr {background: url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm1dHrInOQQ_4_TXpokZ2i7e4jQ7fo971btzXcvviTYUSs92Ag-k3_P110hdBDfAecHjTRSE0_AG2j2_kFamDi6xP2sFSbn8X1AisYmSFip255RNf6ivR4CYjv41Glv_VuZTc6Nl43NZqi/s1600/blogger.png ) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}
#rpdr, #rpdr a {color:#808080;}
.bbrecpost2 {
padding-top:6px;
padding-bottom:6px;
border-bottom: 1px #cccccc dotted; }
</style>

Blog-spot Tutorial | Themes | Widgets

Friday, 26 December 2014

Recent post widget for blogger with thumbnails

How to add Recent post widget/gadget in blogger blog.

Scrolling/Ticker Recent Post Widget

Stylish Animated Recent Post Widget

Recent Post Widget With snippets and without snippets

Recent Postw widget without snippets

No comments:

Post a Comment