Top Best Recent Post Widgets/Gadgets For Blogger | Dn420
Hello friends! Welcome to your Dn420 blog. So in this blog post today we are going to talk about Top Best Recent Post Widgets/Gadgets For Blogger. What is this Top Best Recent Post Widgets/Gadgets For Blogger. What do we benefit from this Top Best Recent Post Widgets/Gadgets For Blogger.Do we need this Top Best Recent Post Widgets/Gadgets For Blogger on our blog or Should be used or implemented in the website, then we will know all these things in detail. So stay in this blog post and learn all things in English
Recent post widget is real important for every blogger and reader. It's Make Your Blog Unique and Attractive.
How to add recent post widget to your
 |
| Best Custom Recent Post Widgets/Gadgets For Blogger | Dn420 |
Step 1:- First Login Your Blogger Account. Then GoTo Theme And Click Edit Html.
Step 2:- Now you will find Css codes in the box below. Select and copy this code.
/* Recent Posts Gadget By Droidnur */
.relatedlist {list-style-type:none;overflow:hidden; margin:0 auto; padding:0;max-width:300px}
.relatedlist li {margin:0 auto 10px auto; clear:both; color:#666; font-size:12px; border-bottom:1px solid #eee; overflow:hidden; position:relative;line-height:1.4em;}
.relatedlist li:last-child{margin:0}
.relatedlist li a { color:#666; text-decoration:none}
.relatedlist i{color:#999; padding-right:5px; }
.relatedlist .iline{line-height:1.2em; margin-top:3px;}
.relatedlist .icontent{line-height:1.5em; margin-top:5px;}
.relatedlist div span{margin:0 5px 0 0; display:inline-block;font-weight: normal; }
.relatedlist .mbttitle {font-size:13px; color:#000; font-weight:normal;margin:5px auto; text-decoration:none;display:block}
.relatedlist .mbttitle:hover, .relatedlist .itotal a:hover {color:#6bb7e2; text-decoration:none;}
.relatedlist .iedit a{text-decoration:none; color:#999; cursor:pointer}
.relatedlist .iedit:before, .relatedlist .iauthor:before, .relatedlist .itag:before, .relatedlist .icomments:before, .relatedlist .idate:before, .relatedlist .itotal span:before{font-family:fontAwesome; position:relative; padding-right:8px; color:#999;}
.relatedlist .iauthorpic{width: 17px;height: 17px;border-radius: 50%;
float: none; display: inline-block; margin:0; padding-right:3px; position:relative; top:3px;}
.relatedlist .itag{color: #fff;position: absolute;left: 7px;top: 12px;display: inline-block;}
.relatedlist .itag a{background:#000;background:rgba(0,0,0,0.7);text-decoration:none;color:#fff;padding:4px 5px;text-transform:uppercase;font-size: 8px!important;letter-spacing:1px;display:none}
.relatedlist .itag a:first-child{display:block}
.relatedlist .itag a:hover{background:#000; color:#6bb7e2; text-decoration:none;}
.iFeatured{overflow:hidden;position:relative;float:left;margin:0 5px 10px 0;padding:0;}
.iFeatured a {padding:0 7px 0 0;display: block;margin:5px auto 0}
.iFeatured img{width:132px;height:85px;-moz-transition:all .3s;-webkit-transition:all .3s;transition:all .3s;}
.iFeatured:hover img{ opacity:1;}
.relatedlist .icomments a{color:#0080ff;font-size:12px;}
.relatedlist .icomments a:hover{text-decoration:underline}
.relatedlist .icomments:before {content:'\f086'; padding:0px 3px 0px 7px; color:#84DB06;}
.relatedlist .idate:before {content:'\f073';padding-right:3px}
.relatedlist .iedit:before {content:'\f040';}
.relatedlist .imore {font-size:16px; font-weight:bold; text-decoration:none; color:#666;}
.relatedlist .itotal {color:#333; padding:5px 0px; }
.relatedlist .itotal a {font-size:12px; font-weight:normal; color:#0080ff; text-decoration:none}
.relatedlist .itotal span:before {content:'\f07c';}
.relatedlist .itotal span font {padding:0px 3px; color:#333;font-size:15px; font-weight:bold}
Step 3:- Now you have to press CTRL + F and search ]]></b:skin> or </style> tag.
Step 4:- Now you have to paste the copied code above the ]]></b:skin> or </style> tag and click on the Save button.
Step For Add Resent Posts Widget
blogger dashboard >> Layout >> click on Add a gadget.
A box will open , Now You Will Find codes In The Box below . Select And This Codes and paste the code into the box
Code For Style 1:-
<script type="text/javascript">
var ListCount = 4;
var ListLabel = "";
var ChrCount = 45;
var TitleCount = 66;
var ImageSize = 200;
var showcomments = "off";
var showdate = "on";
var showauthor = "on";
var showthumbnail = "on";
var showlabel = "on";
var showcontent = "off";
var showTotal = "off";
//################ Function Start
function relatedlist(json) {
document.write('<ul class="relatedlist">');
for (var i = 0; i < ListCount; i++)
{
//################### Variables Declared
var listing= ListImage = ListUrl = ListTitle = ListImage = ListContent = ListConten = ListAuthor = ListTag = ListDate = ListUpdate = ListComments = thumbUrl = TotalPosts = sk = AuthorPic= ListMonth = Y = D = M = m = YY = DD = MM = mm = TT = "";
//################### Category
if (json.feed.entry[i].category != null)
{
for (var k = 0; k < json.feed.entry[i].category.length; k++) {
ListTag += "<a href='/search/label/"+json.feed.entry[i].category[k].term+"'>"+json.feed.entry[i].category[k].term+"</a>";
if(k < json.feed.entry[i].category.length-1)
{ ListTag += " ";}
}}
//################### URL
for (var j = 0; j < json.feed.entry[i].link.length; j++) {
if (json.feed.entry[i].link[j].rel == 'alternate') {
break;
}
}
ListUrl= "'" + json.feed.entry[i].link[j].href + "'";
//################### Info
TotalPosts = json.feed.openSearch$totalResults.$t;
if (json.feed.entry[i].title!= null)
{
ListTitle= json.feed.entry[i].title.$t.substr(0, TitleCount);
}
if (json.feed.entry[i].thr$total)
{
ListComments= "<a href='"+json.feed.entry[i].link[j].href+"#comment-form'>"+json.feed.entry[i].thr$total.$t+"</a>";
}
ListAuthor= json.feed.entry[i].author[0].name.$t.split(" ");
ListAuthor=ListAuthor.slice(0, 1).join(" ");
AuthorPic = json.feed.entry[i].author[0].gd$image.src;
//################### Content Check
ListConten = json.feed.entry[i].content.$t;
ListContent= ListConten.replace(/(<([^>]+)>)/ig,"").substring(0, ChrCount);
//################### Date Format
ListMonth= ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
ListDate= json.feed.entry[i].published.$t.substring(0,10);
Y = ListDate.substring(0, 4);
m = ListDate.substring(5, 7);
D = ListDate.substring(8, 10);
M = ListMonth[parseInt(m - 1)];
ListUpdate= json.feed.entry[i].updated.$t.substring(0, 16);
YY = ListUpdate.substring(0, 4);
mm = ListUpdate.substring(5, 7);
DD = ListUpdate.substring(8, 10);
TT = ListUpdate.substring(11, 16);
MM = ListMonth[parseInt(mm - 1)];
//################### Thumbnail Check
// YouTube scan
if (json.feed.entry[i].content.$t.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/) != null)
{
var youtube_id = json.feed.entry[i].content.$t.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/).pop();
if (youtube_id.length == 11) {
var ListImage = "'//img.youtube.com/vi/"+youtube_id+"/0.jpg'";
}
}
else if (json.feed.entry[i].media$thumbnail)
{
thumbUrl = json.feed.entry[i].media$thumbnail.url;
sk= thumbUrl.replace(/.*?:\/\//g , "//").replace("/s72-c/","/s"+ImageSize+"/");
ListImage= "'" + sk.replace(/.*?:\/\//g , "//").replace("?imgmax=800","") + "'";
}
else if (json.feed.entry[i].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/) != null)
{
// Support For 3rd Party Images
ListImage = json.feed.entry[i].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/)[1];
}
else
{
ListImage= "'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9UsJ3yQAPz6z6ZFfdhRkcUleix-EFNkE_RscDS5shS1LHIL4Kn7BPD1tPt8g7ZMRLB5bzs5WPwOXaTaeyvLkvADm9LiQoLSt2eKzLlkDKhg15IYxh-fT7EbZvcwd2fuVIrn7xtzV4_ds/s1600/bungfrangki_no_image_340.png'";
}
//################### Printing List
document.write( "<li class='node"+[i]+"' >");
if (showthumbnail == 'on'){
document.write("<div class='iFeatured'><a href="
+ ListUrl+
"><img src="
+ListImage+
"/></a></div>");
}
if (showlabel == 'on'){
document.write("<span class='itag'>"
+ListTag +
"</span>");
}
document.write("<a class='mbttitle' href="
+ ListUrl+
">"
+ ListTitle+
"</a><div class='iline'>");
if (showauthor == 'on'){
document.write("<span class='iauthor'><img class='iauthorpic' src='"+AuthorPic+"'/>"
+ListAuthor+
"</span>");
}
if (showcomments == 'on'){
document.write("<span class='icomments'>"
+ListComments +
"</span> ");
}
if (showdate == 'on'){
document.write("<span class='idate'>"
+ M +
" "
+ D +
"</span>");
}
if (showcontent == 'on'){
document.write("<div class='icontent'>"
+ListContent +
"...</div> ");
}
document.write("</div></li>");
}if (showTotal == 'on'){
document.write("<div class='itotal'><span> <a href='/search/label/"+ListLabel+"'>View all <font>"+TotalPosts+"</font> posts in → " +ListLabel+" </a></span></div>");
}
document.write("</ul>");
}
document.write("<script src='/feeds/posts/default?alt=json-in-script&callback=relatedlist'></"+"script>");
</script>
Code For Style 2:-
<style type="text/css">
img.recent-post-thumbnail{float:right;height:50px;width:50px;margin:5px -5px 0px 0px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;padding:3px;background: #fff}
ul.recent-posts-wrap {background: #fff;list-style-type: none; margin: 5px 0px 5px 0px; padding: 0px;font:12px 'Ubuntu Condensed', sans-serif;}
ul.recent-posts-wrap li:nth-child(1n+0) {background: #FCD092; width: 94%}
ul.recent-posts-wrap li:nth-child(2n+0) {background: #FFE0B4; width: 94%}
ul.recent-posts-wrap li:nth-child(3n+0) {background: #FFF59E; width: 94%;}
ul.recent-posts-wrap li:nth-child(4n+0) {background: #E1EFA0; width: 94%;}
ul.recent-posts-wrap li:nth-child(5n+0) {background: #B1DAEF; width: 94%;}
ul.recent-posts-wrap li {padding:5px 10px;list-style-type: none; margin: 0 0 -5px; color: #777;}
.recent-posts-wrap a { text-decoration:none; }
.recent-posts-wrap a:hover { color: #222;}
.post-date {color:#e0c0c6; font-size: 11px; }
.recent-post-title a {font-size: 14px;font-weight: bold;color: #444;}
.recent-post-title {padding: 6px 0px;}
.recent-posts-details a{ color: #222;}
.recent-posts-details {padding: 5px 0px 5px; }
</style>
<script type="text/javascript">
function showrpwiththumbs(t){document.write('<ul class="recent-posts-wrap">');for(var e=0;e<posts_number;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var l=n.link[o].title,m=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}var u;try{u=n.media$thumbnail.url}catch(h){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgedHDaK4maVNKxWzqItD9shMcD1xOAdbBW42W6O3xysLtaPnsPxCwztN3yHU4oSykIse7VoIn0b3yy-BcsAqeZpreVTvvVRxLplszwH4jsfx63Qt1H9K9N2kDIKVXEiboIViPx2wUsRan/s1600/no-thumb.png"}var p=n.published.$t,f=p.substring(0,4),g=p.substring(5,7),v=p.substring(8,10),w=new Array;if(w[1]="Jan",w[2]="Feb",w[3]="Mar",w[4]="Apr",w[5]="May",w[6]="Jun",w[7]="Jul",w[8]="Aug",w[9]="Sep",w[10]="Oct",w[11]="Nov",w[12]="Dec",document.write('<li class="recent-posts-list">'),1==showpostswiththumbs&&document.write('<a href="'+r+'"><img class="recent-post-thumbnail" src="'+u+'"/></a>'),document.write('<div class="recent-post-title"><a href="'+r+'" target ="_top">'+i+"</a></div>"),"content"in n)var A=n.content.$t;else if("summary"in n)var A=n.summary.$t;else var A="";var k=/<\S[^>]*>/g;if(A=A.replace(k,""),1==post_summary)if(A.length<summary_chars)document.write(A);else{A=A.substring(0,summary_chars);var y=A.lastIndexOf(" ");A=A.substring(0,y),document.write(A+"...")}var _="",$=0;document.write('<br><div class="recent-posts-details">'),1==posts_date&&(_=_+w[parseInt(g,10)]+" "+v+" "+f,$=1),1==insidereadmorelink&&(1==$&&(_+=" | "),_=_+'<a href="'+r+'" class="url" target ="_top">Read more</a>',$=1),1==showcomments&&(1==$&&(_+=" <br> "),"1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),l='<a href="'+m+'" target ="_top">'+l+"</a>",_+=l,$=1),document.write(_),document.write("</div>"),document.write("</li>")}document.write("</ul>")}
</script>
<script type="text/javascript">
var posts_number = 5;
var showpostswiththumbs = true;
var insidereadmorelink = true;
var showcomments = false;
var posts_date = true;
var post_summary = true;
var summary_chars = 70;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrpwiththumbs"></script>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css' />
Customize the widget according to your requirements and save and you are done.
0 comments