A few days ago, I have posted a recent posts widget without thumbnail.The widget was based on a simple JavaScript coding. Recent Posts tells your visitors about latest posts on your blog. This may help to decrease the bounce rate as well as attract more visitors towards your site. In this post, I am going to introduce a new recent post widget with thumbnail which has an animated border effect on hover. Widget is flexible to use. You can display or hide post summary, post date, number of comments, post thumbnail, read more button etc. I think this is the best recent post widget you ever seen.
See the DEMO in Sidebar
Also Read: Add Cool Back To Top Button to Blogger with jQuery
Follow the step by step instructions to add this widget in Blogger:- Sign in to Blogger
- Go to Layout > Add a Gadget
- Select HTML / JavaScript
- Paste the code given below in the field and Save.
<style type="text/css">
/*<![CDATA[*/
img.label_thumb{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;transition:all .5s ease;float:left;padding:0;border:3px solid #cccccc;-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;background:#fff;margin-right:10px;height:60px;width:60px}
img.label_thumb:hover{border:3px solid orangered;}
.label_with_thumbs{float:left;width:100%;min-height:60px;margin:0 10px 2px 0;adding:0}ul.label_with_thumbs li{background:#transparent;list-style-type:none;padding:8px 0;min-height:65px;margin-bottom:5px}
.label_with_thumbs a{color:#292929;font-size:10pt;outline:0;text-decoration:none}
.label_with_thumbs a:hover,.label_with_thumbs a:focus{color:#F4A557}.credits,.credits a{font-size:12px!important;text-align:left;text-shadow:0 1px 0 #fff;color:#888}
#mdjumplink{font-weight:800;background:#f7f8f9;background:-webkit-linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);background:-moz-linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);background:-o-linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);background:-ms-linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);background:linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f8f9',endColorstr='#e9e9e9',GradientType=0);border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;padding:1px 2px;margin:0;-webkit-box-shadow:0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);-moz-box-shadow:0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);box-shadow:0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);color:#888!important;text-shadow:0 1px 0 #fff;line-height:1.2;cursor:pointer;font-size:13px;font-weight:normal;text-decoration:none!important}
#mdjumplink:hover{background:#f1f1f1;background:-webkit-linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);background:-moz-linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);background:-o-linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);background:-ms-linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);background:linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f1f1f1',endColorstr='#e0e0e0',GradientType=0);text-decoration:none!important}
#mdjumplink a{color:#888!important;text-decoration:none;display:block;margin:2px}
#mdjumplink a:hover{color:#888!important;text-decoration:none}
#mdcomments{padding:6px 12px;background:#e6681b;color:#000!important;font-size:13px;font-weight:800}
#mdcomments:hover{background:#F4A557;text-decoration:none}
/*]]>*/
</style>
<script type='text/javascript'>
//<![CDATA[
var numposts = 5;
var showpostthumbnails = true;
var displaymore = true;
var displayseparator = true;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = false;
var numchars = 80;
//]]>
</script>
<script type="text/javascript">
eval(function(p,a,c,k,e,d){while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+c+'\\b','g'),k[c])}}return p}('85 109(45){16.17(\'<47 33="106">\');63(13 28=0;28<54;28++){13 15=45.62.15[28];13 49=15.64.$31;13 29;14(28==45.62.15.43)59;63(13 22=0;22<15.24.43;22++){14(15.24[22].61=="124"&&15.24[22].127=="136/84"){13 23=15.24[22].64;13 67=15.24[22].25}14(15.24[22].61=="130"){29=15.24[22].25;59}}13 34;93{34=15.100$95.68}96(94){32=15.46.$31;19=32.41("<56");35=32.41(\'55="\',19);42=32.41(\'"\',35+5);44=32.97(35+5,42-35-5);14(19!=-1&&35!=-1&&42!=-1&&44!="")34=44;38 34="60://2.90.57.58/104/89/79/80/81.78"}13 37=15.75.$31;13 70=37.30(0,4);13 69=37.30(5,7);13 72=37.30(8,10);13 18=77 82;18[1]="87";18[2]="86";18[3]="83";18[4]="102";18[5]="126";18[6]="105";18[7]="122";18[8]="128";18[9]="134";18[10]="135";18[11]="132";18[12]="131";16.17(\'<52 33="121">\');14(120==27)16.17(\'<19 25="\'+29+\'" 39 ="36"><56 33="110" 55="\'+34+\'"/></19>\');16.17(\'<48><19 25="\'+29+\'" 39 ="36">\'+49+"</19></48><71>");14("46"50 15)13 20=15.46.$31;38 14("51"50 15)13 20=15.51.$31;38 13 20="";13 53=/<\\112[^>]*>/113;20=20.118(53,"");14(117==27)14(20.43<65){16.17("");16.17(20);16.17("")}38{16.17("");20=20.30(0,65);13 74=20.115(" ");20=20.30(0,74);16.17(20+"...");16.17("")}13 21="";13 26=0;16.17("<71>");14(107==27){21=21+18[108(69,10)]+"-"+72+" - "+70;26=1}14(133==27){14(26==1)21=21+" | ";14(23=="1 40")23="1 129";14(23=="0 40")23="88 40";23=\'<19 73="91" 25="\'+67+\'" 39 ="36">\'+23+"</19>";21=21+23;26=1}14(123==27){14(26==1)21=21+" | ";21=21+\'<19 73="103" 25="\'+29+\'" 33="68" 39 ="36">119 114 \\125</19>\';26=1}16.17(21);16.17("</52>");14(116==27)14(28!=54-1)16.17("")}16.17(\'<66 33="111">76 101: <19 25="60://98.57.58">92 99</19></66></47>\')};',10,137,'|||||||||||||var|if|entry|document|write|monthnames|a|postcontent|towrite|k|commenttext|link|href|flag|true|i|posturl|substring|t|s|class|thumburl|b|_top|postdate|else|target|Comments|indexOf|c|length|d|json|content|ul|normal|posttitle|in|summary|li|re|numposts|src|img|ehowblogger|com|break|http|rel|feed|for|title|numchars|div|commenturl|url|cdmonth|cdyear|br|cdday|id|quoteEnd|published|Widget|new|jpg|AAAAAAAAAHA|hAKuT9rJpFU|noimage|Array|Mar|html|function|Feb|Jan|No|TMdcT1jzo5I|bp|mdcomments|eHow|try|error|thumbnail|catch|substr|www|Blogger|media|by|Apr|mdjumplink|_IKigl6y9hFA|Jun|label_with_thumbs|showpostdate|parseInt|labelthumbs|label_thumb|credits|S|g|More|lastIndexOf|displayseparator|showpostsummary|replace|Read|showpostthumbnails|clearfix|Jul|displaymore|replies|u00bb|May|type|Aug|Comment|alternate|Dec|Nov|showcommentnum|Sep|Oct|text'.split('|')))
</script>
<script src='http://www.ehowblogger.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=labelthumbs'></script>
Customization:
- var numposts = 5; (Number of Posts to be shown)
- var showpostthumbnails = true; (Post Image)
- var displaymore = true; (More Button)
- var showcommentnum = false; (No of Comments)
- var showpostdate = false; (Post Date)
- var showpostsummary = false; (Post Summry)
- var numchars = 80; (Characters in post summary)
- Change www.eHowBlogger.com with your Website/ Blog URL.
If you find any problem, leave comment below. Your problem will be solved as early as possible.
Author:
Nice posting! I like it!
ReplyDelete