Ads Nhà Tài Trợ
Nam Trung JSC Ván Gỗ Cao Su / Gỗ Tràm Ghép Thanh

Tổng hợp code recent post widgets cho bogger

Jesujuda
Author - personJesujuda
20:49
0
Mẫu code 1: 
<script type="text/javascript">

function showlatestpostswiththumbs(t){document.write('<ul   class="recent-posts-container">');for(var e=0;e<posts_no;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/AVvXsEitRt2_y6FpTT7MPIeqvWZghhHYqraSGu6m51ob08IfWoSF9ONXx9OKXR6Jar1Lx5KFsHNhps631wDEHVpE2t6i_7ZQjiOa2BLhLgBCuABQHPH7ATgqhGsxdF8NvaeO8Ok95aJ-1XQYDh4T/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==showpoststhumbs&&document.write('<a   href="'+r+'"><img class="recent-post-thumb"   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==readmorelink&&(1==$&&(_+=" |   "),_=_+'<a href="'+r+'" class="url" target ="_top">Read   more</a>',$=1),1==showcommentslink&&(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_no = 5;

var showpoststhumbs = true;

var readmorelink = true;

var showcommentslink = 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=showlatestpostswiththumbs"></script>

<a style="font-size: 9px; color: #CECECE; margin-top: 10px;"   href="http://helplogger.blogspot.com/2014/11/5-cool-recent-post-widgets-for-blogger.html"   rel="nofollow">Recent Posts Widget</a>

<noscript>Your browser does not support JavaScript!</noscript>

<link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css' />

<style type="text/css">

img.recent-post-thumb{width:50px;height:50px;float:right;margin:5px -5px   0px   0px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;padding:3px;background:   #fff}

ul.recent-posts-container {list-style-type: none; background:   #fff;padding: 0px;font:12px 'Ubuntu Condensed', sans-serif;margin: 5px   0px 5px 0px;}

ul.recent-posts-container li:nth-child(1n+0) {background: #F49A9A; width: 100%}

ul.recent-posts-container li:nth-child(2n+0) {background: #FCD092; width: 95%}

ul.recent-posts-container li:nth-child(3n+0) {background: #FFF59E; width: 90%;}

ul.recent-posts-container li:nth-child(4n+0) {background: #E1EFA0; width: 85%;}

ul.recent-posts-container li:nth-child(5n+0) {background: #B1DAEF; width: 80%;}

ul.recent-posts-container li {padding:5px 10px;list-style-type: none; margin: 0 0 -5px; color: #777;}

.recent-posts-container a { text-decoration:none; }

.recent-posts-container a:hover { color: #222;}

.post-date {color:#e0c0c6; font-size: 11px; }

.recent-post-title a {font-size: 14px;color: #444; font-weight: bold;}

.recent-post-title {padding: 6px 0px;}

.recent-posts-details a{ color: #222;}

.recent-posts-details {padding: 5px 0px 5px; }

</style>
Mẫu code 2: 
<div class="recentpoststyle">

<script type="text/javascript">

function showlatestposts(e){for(var t=0;t<posts_no;t++){var   r,s=e.feed.entry[t],n=s.title.$t;if(t==e.feed.entry.length)break;for(var     a=0;a<s.link.length;a++)if("alternate"==s.link[a].rel){r=s.link[a].href;break}n=n.link(r);var   i="... read more";i=i.link(r);var   l=s.published.$t,o=l.substring(0,4),u=l.substring(5,7),c=l.substring(8,10),m=new     Array;if(m[1]="Jan",m[2]="Feb",m[3]="Mar",m[4]="Apr",m[5]="May",m[6]="Jun",m[7]="Jul",m[8]="Aug",m[9]="Sep",m[10]="Oct",m[11]="Nov",m[12]="Dec","content"in   s)var d=s.content.$t;else if("summary"in s)var d=s.summary.$t;else var   d="";var   v=/<\S[^>]*>/g;if(d=d.replace(v,""),document.write('<li   class="recent-post-title">'),document.write(n),document.write('</li><div     class="recent-post-summ">'),1==post_summary)if(d.length<summary_chars)document.write(d);else{d=d.substring(0,summary_chars);var   f=d.lastIndexOf(" ");d=d.substring(0,f),document.write(d+"   "+i)}document.write("</div>"),1==posts_date&&document.write('<div   class="post-date">'+m[parseInt(u,10)]+" "+c+" "+o+"</div>")}}

</script>

<script type="text/javascript">

var posts_no = 5;var posts_date = true;var post_summary = true;var summary_chars = 80;</script>

<script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showlatestposts">

</script><a style="font-size: 9px; color:   #CECECE;margin-top:10px;"   href="http://helplogger.blogspot.com/2014/11/5-cool-recent-post-widgets-for-blogger.html"   rel="nofollow">Recent Posts Widget</a>

<noscript>Your browser does not support JavaScript!</noscript>

<style type="text/css">

.recentpoststyle {counter-reset: countposts;list-style-type: none;}

.recentpoststyle a {text-decoration: none;color: #49A8D1;}

.recentpoststyle a:hover {color: #000;}

.recentpoststyle li:before {content:   counter(countposts,decimal);counter-increment: countposts;float:   left;z-index: 1;position:relative;font-size: 15px;font-weight:   bold;color:#fff;background:#69B7E2; margin:13px 5px 0px   -6px;line-height:30px;width:30px;height:30px;text-align:center;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;}li.recent-post-title{margin-bottom:   5px;padding: 0;}

.recent-post-title a {color: #444;text-decoration: none;font: bold 13px   "Avant Garde",Avantgarde,"Century   Gothic",CenturyGothic,AppleGothic,sans-serif;}

.post-date {font-size: 11px;color: #999;margin:5px 0px 15px 32px;}

.recent-post-summ {border-left:1px solid #69B7E2; color: #777; padding:   0px 5px 0px 20px; margin-left: 10px; font: 15px   Garamond,Baskerville,"Baskerville Old Face","Hoefler Text","Times New   Roman",serif;}

</style></div>
Mẫu code 3: 
<script type="text/javascript">

function showlatestpostswiththumbs(t){document.write('<ul   class="recent-posts-container">');for(var e=0;e<posts_no;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/AVvXsEitRt2_y6FpTT7MPIeqvWZghhHYqraSGu6m51ob08IfWoSF9ONXx9OKXR6Jar1Lx5KFsHNhps631wDEHVpE2t6i_7ZQjiOa2BLhLgBCuABQHPH7ATgqhGsxdF8NvaeO8Ok95aJ-1XQYDh4T/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==showpoststhumbs&&document.write('<a   href="'+r+'"><img class="recent-post-thumb"   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==readmorelink&&(1==$&&(_+=" |   "),_=_+'<a href="'+r+'" class="url" target ="_top">Read   more</a>',$=1),1==showcommentslink&&(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_no = 5;

var showpoststhumbs = true;

var readmorelink = true;

var showcommentslink = true;

var posts_date = true;

var post_summary = true;

var summary_chars = 40;</script>

<script   src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>

<a style="font-size: 9px; color: #CECECE; margin-top: 10px;"   href="http://helplogger.blogspot.com/2014/11/5-cool-recent-post-widgets-for-blogger.html"   rel="nofollow">Recent Posts Widget</a>

<noscript>Your browser does not support JavaScript!</noscript>

<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>

<style type="text/css">

img.recent-post-thumb{padding:2px;width:65px;height:65px;float:left;margin:0px 10px 10px;border: 1px solid #69B7E2;}

.recent-posts-container {font-family:'Oswald', sans-serif;font-size:12px;}

ul.recent-posts-container li{list-style-type: none; margin-bottom: 10px;font-size:12px;float:left;width:100%}

ul.recent-posts-container {counter-reset: countposts;list-style-type:none;padding:0;}

ul.recent-posts-container li:before {content:   counter(countposts,decimal);counter-increment: countposts;z-index:   1;position:absolute; left: 0px; font-size: 13px;font-weight: bold;color:   #fff;background:   #69B7E2;line-height:25px;height:25px;width:25px;text-align:center;-webkit-border-radius:   50%;-moz-border-radius: 50%;border-radius: 50%;}

.recent-posts-container a{text-decoration:none;}

.recent-post-title {margin-bottom:5px;}

.recent-post-title a {font-size:12px; text-transform: uppercase; color: #2aace3;}

.recent-posts-details {margin: 5px 0px 0px 92px;font-size:11px;}

.recent-posts-details a{color: #777;}

</style>
Mẫu code 4: 
<script type="text/javascript">

function showlatestpostswiththumbs(t){document.write('<ul   class="recent-posts-container">');for(var e=0;e<posts_no;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(p){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/AVvXsEitRt2_y6FpTT7MPIeqvWZghhHYqraSGu6m51ob08IfWoSF9ONXx9OKXR6Jar1Lx5KFsHNhps631wDEHVpE2t6i_7ZQjiOa2BLhLgBCuABQHPH7ATgqhGsxdF8NvaeO8Ok95aJ-1XQYDh4T/s1600/no-thumb.png"}var     h=n.published.$t,f=h.substring(0,4),w=h.substring(5,7),v=h.substring(8,10),A=new     Array;A[1]="Jan",A[2]="Feb",A[3]="Mar",A[4]="Apr",A[5]="May",A[6]="Jun",A[7]="Jul",A[8]="Aug",A[9]="Sep",A[10]="Oct",A[11]="Nov",A[12]="Dec",document.write('<li     class="recent-posts-list">'),1==posts_date&&document.write('<div   class="post-date">'+A[parseInt(w,10)]+" "+v+"   "+f+"</div>"),1==showpoststhumbs&&document.write('<a   href="'+r+'"><img class="recent-post-thumb"   src="'+u+'"/></a>'),document.write('<div   class="recent-post-title"><a href="'+r+'" target   ="_top">'+i+"</a></div>");var   g="",k=0;document.write('<div   class="recent-posts-details">'),1==showcommentslink&&(1==k&&(g+="   <br> "),"1 Comments"==l&&(l="1 Comment"),"0   Comments"==l&&(l="No Comments"),l='<a href="'+m+'" target   ="_top">'+l+"</a>",g+=l,k=1),1==readmorelink&&(1==k&&(g+="   | "),g=g+'<a class="readmorelink" href="'+r+'" class="url" target   ="_top">Read   more</a>',k=1),document.write(g),document.write("</div>"),document.write("</li>")}document.write("</ul>")}

</script>

<script type="text/javascript">

var posts_no = 5;

var showpoststhumbs = false;

var readmorelink = true;

var showcommentslink = true;

var posts_date = true;

</script>

<script   src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>

<a style="font-size: 9px; color: #CECECE; float: right; margin-top:   5px;"   href="http://helplogger.blogspot.com/2014/11/5-cool-recent-post-widgets-for-blogger.html">Recent   Posts Widget</a>

<noscript>Your browser does not support JavaScript!</noscript>

<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>

<style type="text/css">

img.recent-post-thumb {padding: 2px;   width:35px;height:35px;float:right;margin: -14px 0px 0px 5px; border:   1px solid #cea5ac; border-radius: 10%;}

.recent-posts-container {font-family: 'Oswald', sans-serif;  float:   left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding:   0;font-size:12px;}

ul.recent-posts-container li {padding:5px 0px;min-height:65px; list-style-type: none; margin: 0px 10px 5px 35px;}

ul.recent-posts-container {counter-reset: countposts;list-style-type: none;}

ul.recent-posts-container li:before {content:   counter(countposts,decimal);counter-increment: countposts;z-index:   2;position:absolute; left: 5px; font-size: 16px;color:   #4D4D4D;background: #F7F7F7;padding: 9px 14px; border: 1px solid   #efefef;}

.recent-posts-container a { text-decoration:none; }

.recent-posts-container a:hover{color: #4DACE3;}

.post-date {color:#e0c0c6; font-size: 11px; }

.recent-post-title a {font-size: 13px; text-transform: uppercase; color: #5C4D4D;}

.recent-post-title { margin: 5px 0px; }

.recent-posts-details {border-top: 4px solid #AC707A; margin-top: 5px; padding-top: 5px;}

.recent-posts-details a{ color: #888;}

a.readmorelink {color: #4DACE3;}

</style>
Mẫu code 5: 
<script type="text/javascript">

function showlatestpostswiththumbs(t){document.write('<ul   class="recent-posts-container">');for(var e=0;e<posts_no;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(p){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/AVvXsEitRt2_y6FpTT7MPIeqvWZghhHYqraSGu6m51ob08IfWoSF9ONXx9OKXR6Jar1Lx5KFsHNhps631wDEHVpE2t6i_7ZQjiOa2BLhLgBCuABQHPH7ATgqhGsxdF8NvaeO8Ok95aJ-1XQYDh4T/s1600/no-thumb.png"}var     h=n.published.$t,f=h.substring(0,4),w=h.substring(5,7),v=h.substring(8,10),A=new     Array;A[1]="Jan",A[2]="Feb",A[3]="Mar",A[4]="Apr",A[5]="May",A[6]="Jun",A[7]="Jul",A[8]="Aug",A[9]="Sep",A[10]="Oct",A[11]="Nov",A[12]="Dec",document.write('<li     class="recent-posts-list">'),1==posts_date&&document.write('<div   class="post-date">'+A[parseInt(w,10)]+" "+v+"   "+f+"</div>"),1==showpoststhumbs&&document.write('<a   href="'+r+'"><img class="recent-post-thumb"   src="'+u+'"/></a>'),document.write('<div   class="recent-post-title"><a href="'+r+'" target   ="_top">'+i+"</a></div>");var   g="",k=0;document.write('<div   class="recent-posts-details">'),1==showcommentslink&&(1==k&&(g+="   <br> "),"1 Comments"==l&&(l="1 Comment"),"0   Comments"==l&&(l="No Comments"),l='<a href="'+m+'" target   ="_top">'+l+"</a>",g+=l,k=1),1==readmorelink&&(1==k&&(g+="   | "),g=g+'<a class="readmorelink" href="'+r+'" class="url" target   ="_top">Read   more</a>',k=1),document.write(g),document.write("</div>"),document.write("</li>")}document.write("</ul>")}

</script>

<script type="text/javascript">

var posts_no = 5;

var showpoststhumbs = true;

var readmorelink = true;

var showcommentslink = true;

var posts_date = true;

</script>

<script   src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"   rel="nofollow"></script>

<a style="font-size: 9px; color: #CECECE; float: right; margin-top:   5px;"   href="http://helplogger.blogspot.com/2014/11/5-cool-recent-post-widgets-for-blogger.html"   rel="nofollow">Recent Posts Widget</a>

<noscript>Your browser does not support JavaScript!</noscript>

<link href='http://fonts.googleapis.com/css?family=Lobster|Gloria+Hallelujah' rel='stylesheet' type='text/css' />

<style type="text/css">

img.recent-post-thumb {width:50px;height:50px;float:right;margin: -4px   -35px 0px 0px; border: 4px solid #FCD6CB; border-radius: 100%;}

.recent-posts-container {font-family: 'Gloria Hallelujah', cursive;    float: left;width: 100%;min-height: 55px;margin: 5px 0px 5px   0px;padding: 0;font-size:12px;}

ul.recent-posts-container {counter-reset: countposts;list-style-type: none; background: #fff; }

ul.recent-posts-container li:before {content:   counter(countposts,decimal);counter-increment: countposts;z-index:   2;position:absolute; left: -20px; font-size: 16px;color:   #616662;background: #FCD6CB;padding: 9px 14px; border-radius: 100%;   margin-top: 15px;}

ul.recent-posts-container li {padding:5px 0px;min-height:50px;   list-style-type: none; margin: -2px 5px 5px 5px;  border-top: 2px solid   #FCD6CB;}

ul.recent-posts-container {border: 2px solid #FCD6CB; }

.recent-posts-container a { text-decoration:none; }

.recent-posts-container a:hover { color: #222;}

.post-date {color:#e0c0c6; font-size: 11px; }

.recent-post-title a {font-size: 14px;color: #616662;}

.recent-post-title {padding: 6px 0px;}

.recent-posts-details a{ color: #888;}

.recent-posts-details {padding-bottom: 5px;}

a.readmorelink {color: #4DACE3;}

</style>
Mẫu code 6 (Recent posts with page navigation) : 
<script type='text/javascript'>  var numfeed = 4;  var startfeed = 0;  var urlblog = "http://www.thebloggerguide.com/";  var charac = 50;  var urlprevious, urlnext;    function cyberghost(ghost, banget) {    var showfeed = ghost.split("<");    for (var i = 0; i < showfeed.length; i++) {      if (showfeed[i].indexOf(">") != -1) {        showfeed[i] = showfeed[i].substring(showfeed[i].indexOf(">") + 1, showfeed[i].length);      }    }    showfeed = showfeed.join("");    showfeed = showfeed.substring(0, banget - 1);    return showfeed;  }    function showterbaru(json) {    var entry, posttitle, posturl, postimg, postcontent;    var showblogfeed = "";    urlprevious = "";    urlnext = "";    for (var k = 0; k < json.feed.link.length; k++) {      if (json.feed.link[k].rel == 'previous') {        urlprevious = json.feed.link[k].href;      }      if (json.feed.link[k].rel == 'next') {        urlnext = json.feed.link[k].href;      }    }    for (var i = 0; i < numfeed; i++) {      if (i == json.feed.entry.length) {        break;      }      entry = json.feed.entry[i];      posttitle = entry.title.$t;      for (var k = 0; k < entry.link.length; k++) {        if (entry.link[k].rel == 'alternate') {          posturl = entry.link[k].href;          break;        }      }      if ("content" in entry) {        postcontent = entry.content.$t;      } else if ("summary" in entry) {        postcontent = entry.summary.$t;      } else {        postcontent = "";      }      if ("media$thumbnail" in entry) {        postimg = entry.media$thumbnail.url;      } else {        postimg = "http://1.bp.blogspot.com/-eiX9aalicz8/VWEORfDN71I/AAAAAAAAHdg/vfHyEfYKBh0/s1600/no_image.gif";      }      showblogfeed += "<div class='cg-elemen'>";      showblogfeed += "<a =href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";      showblogfeed += "<h6><a href='" + posturl + "'>" + posttitle + "</a></h6>";      showblogfeed += "<p>" + cyberghost(postcontent, charac) + "...</p>";      showblogfeed += "</div>";    }    document.getElementById("terbaru").innerHTML = showblogfeed;    showblogfeed = "";    if (urlprevious) {      showblogfeed += "<a href='javascript:navigasifeed(-1);' class='previous'>&#9668; Previous</a>";    } else {      showblogfeed += "<span class='noactived previous'>&#9668; Previous</span>";    }    if (urlnext) {      showblogfeed += "<a href='javascript:navigasifeed(1);' class='next'>Next &#9658;</a>";    } else {      showblogfeed += "<span class='noactived next'>Next &#9658;</span>";    }    showblogfeed += "<a href='javascript:navigasifeed(0);' class='home'>Home</a>";    document.getElementById("cg-navigasifeed").innerHTML = showblogfeed;  }    function navigasifeed(url) {    var p, parameter;    if (url == -1) {      p = urlprevious.indexOf("?");      parameter = urlprevious.substring(p);    } else if (url == 1) {      p = urlnext.indexOf("?");      parameter = urlnext.substring(p);    } else {      parameter = "?start-index=1&max-results=" + numfeed + "&orderby=published&alt=json-in-script"    }    parameter += "&callback=showterbaru";    incluirscript(parameter);  }    function incluirscript(parameter) {    if (startfeed == 1) {      removerscript();    }    document.getElementById("terbaru").innerHTML = "<div id='cg-loading'></div>";    document.getElementById("cg-navigasifeed").innerHTML = "";    var archievefeed = urlblog + "/feeds/posts/default" + parameter;    var terbaru = document.createElement('script');    terbaru.setAttribute('type', 'text/javascript');    terbaru.setAttribute('src', archievefeed);    terbaru.setAttribute('id', 'MASLABEL');    document.getElementsByTagName('head')[0].appendChild(terbaru);    startfeed = 1;  }    function removerscript() {    var elemen = document.getElementById("MASLABEL");    var parent = elemen.parentNode;    parent.removeChild(elemen);  }  onload = function() {    navigasifeed(0);  }  </script>  <style>  /*Recent Post Navigation*/  a,  a:visited {    color: #555;    outline: none;    text-decoration: none;  }    a:hover,  a:focus,  a:visited:hover {    color: #22a1c4;    text-decoration: none;  }    .terbaru-container {    background: #fff;    width: 320px;    margin: 20px auto;    padding: 15px;    border: 1px solid #ccc;  }    #cg-terbaru {    border: 1px solid #585858;    width: 100%;    margin: 0 auto;  }    #terbaru {    margin: 0px;  }    .cg-elemen {    margin: 5px 0;    padding: 5px;    height: 79px;    background: #FFF url("http://smruthycollege.com/images/shadow2.png") no-repeat scroll center bottom;  overflow: hidden;    padding-bottom: 20px;  }    .cg-elemen img {    padding: 0;    float: left;    height: 70px;    margin-right: 15px;    width: 70px;  }    .cg-elemen h6,  .cg-elemen h6 a {    font-size: 14px!important;    font-weight: 500;    margin: 0;    color: #222;    font-family:'Oswald';    line-height: 18px;    text-transform: uppercase;    text-aligaln:'center';  }    .cg-elemen p {    font-size: 12px;    font-family: 'Oswald';    text-align: left;    color: #555;    line-height: normal;    margin: 5px 0;  }    #cg-loading {    color: #888;    font-family: inherit;    font-size: 100px;    letter-spacing: -10px;    text-align: center;    text-shadow: -5px 0 1px #444;    background: #fff url(http://4.bp.blogspot.com/-jSUS8v5kwpQ/U8Z_6Ufr-PI/AAAAAAAAEYY/o4cQPKvt8vQ/s1600/loading.gif) no-repeat 50% 50%;    height: 470px;  }    #cg-navigasifeed {    color: #bbb;    font-family: Oswald;    font-size: 12px;    text-align: center;    margin: 0px;  }    #cg-navigasifeed a {    color: #141414!important;    font-family: inherit!important;    font-size: 12px!important;    font-weight: 400!important;    display: block;    padding: 5px 10px;  }    #cg-navigasifeed span {    padding: 5px 10px;  }    #cg-navigasifeed .next {    float: right;  }    #cg-navigasifeed .previous {    float: left;  }    #cg-navigasifeed .home {    text-align: center;  }    #cg-navigasifeed a:hover,  #cg-navigasifeed span.noactived {    color: transparant!important;  }  @media screen and (max-width:700px) {      .terbaru-container, #terbaru, #cg-navigasifeed {          width:auto;      }  }      @media screen and (max-width:300px) {      .cg-elemen img {          display:none;      }  }      Lanjut, Sekarang Tinggal Memasukan Javascriptnya.  Cari     </style>  <div class="terbaru-container">      <div id="terbaru"></div>      <div id="cg-navigasifeed"></div>    </div>
Mẫu code 7 (Slider Recent Post) : 
<script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>    <script type="text/javascript" src="https://arlina-design.googlecode.com/svn/slider-post.js"></script>  <div id="featuredpost"></div>  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>  <script type='text/javascript'>  //<![CDATA[  $(document).ready(function () {  FeaturedPost({  blogURL:"http://www.thebloggerguide.com/",  MaxPost:8,  idcontaint:"#featuredpost",  ImageSize:500,  interval:10000,  autoplay:true,  tagName:false  });  });  //]]>  </script>      <style>  /* CSS Slider Recent Post */  #slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}  #slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}  #slides ul{height:320px}  #slides li{width:50%;height:100%;position:absolute;display:none}  #slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4), #slides li:nth-child(5){display:block}  #slides li:nth-child(1){left:0;top:0}  #slides li:nth-child(2){left:50%;width:25%;height:50%}  #slides li:nth-child(3){left:75%;width:25%;height:50%}  #slides li:nth-child(4){left:50%;top:50%;width:25%;height:50%}  #slides li:nth-child(5){left:75%;top:50%;width:25%;height:50%}  #slides li:nth-child(1) h4 {overflow:hidden;font-size:25px;bottom:0;color:#fafafa;width:100%;  padding:10px 10px 10px 90px;text-align:left;text-transform:uppercase;background:rgba(0,0,0,0.3);  height:90px;font-family:'Oswald';text-shadow:2px 2px 0 rgba(0,0,0,0.2);line-height:32px;left:0;}  #slides li:nth-child(1) .label_text {font-size:30px;display:block;bottom:10px;left:10px;  padding:0;font-family:'Oswald';box-shadow:5px 3px 0 rgba(0,0,0,0.2);}  #slides li:nth-child(1) span.dd {display:block;font-size:30px;padding:12px 15px;  background:#ff6553;margin:0;}  #slides li:nth-child(1) span.dm {display:block;font-size:14px;background:#333;color:#fff;  padding:5px 21px;text-transform:uppercase;margin:0;}  #slides li:nth-child(1) span.dy, #slides li:nth-child(1) span.autname{display:none;}  #slides a{display:block;width:100%;height:100%;overflow:hidden}  #slides img{display:block;width:100%;height:auto;border:0;padding:0;background-color:#333;-moz-transform:scale(1.0) rotate(0);-webkit-transform:scale(1.0) rotate(0);-ms-transform:scale(1.0) rotate(0);transform:scale(1.0) rotate(0);transition:all 0.6s linear;}  #slides li a:hover img {-moz-transform:scale(1.1) rotate(1deg);-webkit-transform:scale(1.1) rotate(1deg);-ms-transform:scale(1.1) rotate(1deg);transform:scale(1.1) rotate(1deg);transition:all 0.3s linear;}  #slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(http://2.bp.blogspot.com/-0haO2Mfkjjk/VDgZww2tfEI/AAAAAAAAHAk/zhu3INYSkHA/s1600/fade.png);background-position:50% 40%;background-repeat:repeat-x;}  #slides h4{position:absolute;bottom:40px;margin:0;font-size:13px;font-family:'Oswald';  left:10px;padding:5px 10px;color:#f9f9f9;z-index:3;line-height:20px;font-weight:normal;  background:rgba(41,41,41,0.7);text-align:left;text-transform:uppercase;margin-right:10px;}  #slides .label_text{font-size:12px;color:#fff;bottom:10px;z-index:3;left:10px;  position:absolute;background:rgba(255,101,83,0.8);padding:3px 6px;font-family:'Oswald';  text-transform:uppercase;}  #slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname,#slides li:nth-child(4) .autname,#slides li:nth-child(5) .autname{display:none;}  #slides .overlayx,#slides li{transition:all .4s ease-in-out}  #slides li:nth-child(1) .overlayx{display:none;}  #slides li:hover .overlayx{opacity:0.1}    @media only screen and (max-width:800px){  #slides li:nth-child(1) h4 {font-size:18px;line-height:24px;}}    @media only screen and (max-width:600px){    #slides ul{height:600px}    #slides li:nth-child(1){width:100%;height:50%}    #slides li:nth-child(2){top:50%;height:25%;left:0;width:50%}    #slides li:nth-child(3){left:50%;top:50%;width:50%;height:25%}    #slides li:nth-child(4){left:0;top:75%;height:25%;width:100%}    #slides li:nth-child(5){display:none;}}    @media only screen and (max-width:480px){  #slides li:nth-child(1) h4 {font-size:13px;line-height:16px;}}  </style>  <div id="wrapper">  <div id="featuredpost"></div>  </div>
Mẫu code 8 (Gallery Recent Post): 
<style>  /* CSS Recent Post Gallery */  .recent-gallery {padding:0;clear:both;}  .recent-gallery:after {content:"";display:table;clear:both;}  .recent-gallery .gallerytem{display:inline-block;position:relative;margin:6px 0;overflow:hidden;}  .recent-gallery .gallerytem a{position:relative;float:left;margin:0 6px;text-decoration:none}  .recent-gallery .gallerytem .ptitle{background:rgba(0,0,0,.7);display:block;clear:left;font-size:10px;line-height:1.3em;position:absolute;text-align:left;bottom:3px;left:3px;right:3px;top:3px;color:#fff;padding:5px;word-wrap:break-word;overflow:hidden;visibility:hidden;opacity:0;backface-visibility:hidden;transition:all .2s}  .recent-gallery .gallerytem:hover .ptitle{visibility:visible;opacity:1}  .recent-gallery a img{background:#fdfdfd;float:left;padding:2px;border:1px solid #e3e3e3;transition:all .3s}  .recent-gallery a:hover img {border-color:#bbb;}  </style>  <script type='text/javascript'>  //<![CDATA[  // Recent Post Gallery  function arlinagrid(a){for(var t=a.feed.entry||[],e=['<div class="recent-gallery">'],i=0;i<t.length;++i){for(var l=t[i],r=l.title.$t,n=l.media$thumbnail?l.media$thumbnail.url:"http://2.bp.blogspot.com/-4fCf53FqYKM/Vccsy7apoZI/AAAAAAAAK4o/XJkv3RkC0pw/s1600/default%2Bimage.png",s=n.replace("s72-c","s"+arlina_thumbs+"-c"),h=l.link||[],c=0;c<h.length&&"alternate"!=h[c].rel;++c);var d=h[c].href,m='<img src="'+s+'" width="'+arlina_thumbs+'" height="'+arlina_thumbs+'"/>',p=arlina_title?'<span class="ptitle">'+r+"</span>":"",g='<a href="'+d+'" target="_blank" title="'+r+'">'+m+p+"</a>";e.push('<div class="gallerytem">',g,"</div>")}e.push("</div>"),document.write(e.join(""))}  //]]>  </script>  <script>  var arlina_thumbs = 72;   var arlina_title = true;   </script>  <script src="/feeds/posts/summary?max-results=9&amp;alt=json-in-script&amp;callback=arlinagrid"></script>
Mẫu code 9 (Recent posts without thumbnails) : 
<style type='text/css'>  img.recent_thumb {width: 90px;height: 70px;float: left;  margin-right: 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://googledrive.com/host/0BzPgmXeCwsMRSGw0WUl4blJ3NmM'></script><script style='text/javascript'>  var numposts = 5;  var showpostthumbnails = false;  var displaymore = true;  var displayseparator = false;  var showcommentnum = false;  var showpostdate = true;  var showpostsummary = true;  var numchars = 100;</script>  <script src='/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>
Mẫu code 10 (Recent posts widget by label): 
<style>  /*Recent Post By tag*/  img.rct-thumb{float:left;margin-right:10px;height:72px;width:72px;}  .recent-by-tag{width:100%;margin:0;padding:0}  ul.recent-by-tag li{padding:10px 0;margin-bottom:0;border-bottom:1px solid #ddd}  .recent-by-tag li{font-size:13px;list-style:none;padding-left:0;margin:0;padding:0;overflow:hidden}  .recent-by-tag a{font-family:'Oswald',sans-serif;font-size:16px;font-weight:normal;margin:0;}  .recent-by-tag strong{padding-left:0}  span.showdates{font-size:16px;margin:10px 0 0}  </style>  <script type='text/javascript'>  var numposts = 5;  var showpostthumbnails = true;  var showpostdate = true;</script>  <script type='text/javascript'>  //<![CDATA[  // Recent Post By Tag  // Recent Post By Tag For Blogger by Kang Mousir  // http://gplus.to/mousir - http://kang-mousir.blogspot.com  function rcentbytag(e){document.write('<ul class="recent-by-tag">');for(var t=0;t<numposts;t++){var n=e.feed.entry[t];var r=n.title.$t;var i;if(t==e.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if(n.link[o].rel=="replies"&&n.link[o].type=="text/html"){var u=n.link[o].title;var f=n.link[o].href}if(n.link[o].rel=="alternate"){i=n.link[o].href;break}}var l;try{l=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);if(a!=-1&&b!=-1&&c!=-1&&d!=""){l=d}else l="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQrsgPePCxZWCQ9-_K8fPlU67pVQjjxXjh95GIbDgadNjtiZbSAdSwLB2MWntblV1EC8KcRfDN1ko7ycZknoRD5YdJ_Boxk9vxdJYFkcU_vIWwu9EgWbFCKYi7uogLytS2TzemlXYnMm8l/s70-c/KM+Icon.png"}var p=n.published.$t;var v=p.substring(0,4);var m=p.substring(5,7);var g=p.substring(8,10);var y=new Array;y[1]="Januari";y[2]="Februari";y[3]="Maret";y[4]="April";y[5]="Mei";y[6]="Juni";y[7]="Juli";y[8]="Agustus";y[9]="September";y[10]="Oktober";y[11]="November";y[12]="Desember";document.write('<li class="clear">');if(showpostthumbnails==true)document.write('<a href="'+i+'" target ="_blank" title="'+r+'"><img class="rct-thumb" alt="'+r+'" src="'+l+'"/></a>');document.write('<strong><a href="'+i+'" target ="_blank" title="'+r+'" rel="nofollow">'+r+'</a></strong>');document.write('<br>');var x="";var T=0;if(showpostdate==true){x='<span class="showdates">'+x+g+" "+y[parseInt(m,10)]+" "+v+"</span>";T=1}document.write(x);document.write("</li>");if(t!=numposts-1)document.write("")}document.write("</ul>")}  //]]>  </script>    <script>  document.write("<script src=\"http://www.thebloggerguide.com/feeds/posts/default/-/Widget?orderby=updated&alt=json-in-script&callback=rcentbytag\"><\/script>");  </script>
Mẫu code 11 (Colorful latest posts widget): 
  <style scoped="scoped">  #ptb-repost {  font:normal normal 11px/normal Arial;  color:#333;  margin:0 auto;  padding:0;  min-height:100px;  background:transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc8pliJ3r475uaUrjNHR8P6yHwVWjB4sNLo3FlIbkejrer4NitJLZMntMvcvY6bWEO7t75ZmkpZGdIixgp9JulLU3Qk6BZhnAO1mXH9q3ojGUzmCJX_oIZH9uR51mT2myQ8VwkyjJBOVo/s1600/loading.gif') no-repeat 50% 50%;  }  #ptb-repost li {  list-style:none;  margin:0;  padding:8px;  background-color:white;  border-bottom:1px solid #ddd;  }  #ptb-repost li a img:hover {  -webkit-transform: scale(1.1, 1.1);  -moz-transform: scale(1.1, 1.1);  -ms-transform: scale(1.1, 1.1);  -o-transform: scale(1.1, 1.1);  transform: scale(1.1, 1.1);opacity: 0.5;  }  #ptb-repost li a img {  float:left;  margin:0 10px 0 0;  padding:0;  border:none;  background:none;  outline:none;  }  #ptb-repost li a.title {  font:normal normal 12px/normal Oswald;  display:block;  text-decoration:none;  color:#fdfdfd;  }  #ptb-repost li a.title:hover {  text-decoration:none;  color:#ffffff;  }  #ptb-repost li:nth-child(1) {background-color:#E11E28;margin-right:0%}  #ptb-repost li:nth-child(2) {background-color:#FD3C03;margin-right:0%}  #ptb-repost li:nth-child(3) {background-color:#FECB09;margin-right:0%}  #ptb-repost li:nth-child(4) {background-color:#6EBE27;margin-right:0%}  #ptb-repost li:nth-child(5) {background-color:#149A48;margin-right:0%}  #ptb-repost li:nth-child(6) {background-color:#5BBFF1;margin-right:0%}  #ptb-repost ul li:nth-child(7) {background-color:#61469C;margin-right:0%}  #ptb-repost ul li:nth-child(8) {background-color:#863E86;margin-right:0%}  #ptb-repost li:nth-child(9) {background-color:#863E62;margin-right:0%}  #ptb-repost li:nth-child(10) {background-color:#815540;margin-right:00%}  </style>  <ul id="ptb-repost"></ul>  <script>  //<![CDATA[  var rp_homePage = "http://www.thebloggerguide.com/",      rp_numPosts = 5,      rp_thumbWidth = 50,      rp_numChars = 80,      rp_sortByLabel = false,      rp_noImage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisvOzwBEzEReZC6umAqSgQ7rk_IkTueYiE0kbJcKmtxKWl_wu4Q6BX8faaSim4vKq1UTo5CJ7Q2Ic-lXCkF6lLGxUhjRRUaDFD9L37eJ8q7KB5rkqE941WPcHeCUSD_FWxqgwMOXOg8gY/s1600/minismallest-img.png",      rp_newTabLink = false,      rp_loadTimer = "onload";  //]]>  </script>  <script src='https://mas-aldi.googlecode.com/svn/trunk/js/rp-warna-warni.js' type='text/JavaScript'></script>
Mẫu code 2: 
 
 
Từ khóa : recent post widgets cho bogger, 6 Stylish Recent Post Widgets Design for Blogger,
5 Cool Recent Post Widgets for Blogger,  
Link tham khảo : 
http://helplogger.blogspot.com/2014/11/5-cool-recent-post-widgets-for-blogger.html
http://www.thebloggerguide.com/recent-post-widgets-for-blogger/ 
http://www.superwebtricks.com/recent-blog-posts-widget/
Tags

Hiện thêm

Đăng nhận xét

0Nhận xét
Đăng nhận xét (0)
Chia sẻ với ứng dụng khác
Copy Post Link
Sở hữu một thiết kế thanh lịch và vô cùng đẳng cấp, mang trong mình một hiệu năng "cực khủng", chụp ảnh, quay phim chất lượng hàng đầu nhờ cụm 3 camera 50 MP. Thiết bị hoàn hảo dành cho dân làm việc văn phòng theo mô hình Workcation thích du lịch khám phá, làm Việc Từ Xa,... Thiết bị công nghệ số cực ngon dành cho TELEWORK, WFH, người làm nghề MMO, KOC / Streamer,...

Xem Giá Bán
Laptop Asus Gaming ROG Flow Z13 GZ301Z i7 12700H (LD110W), siêu phẩm hỗ trợ làm việc, học tập online, đem đến cho bạn những giây phút trải nghiệm giải trí cực đỉnh cùng laptop CPU thế hệ 12 mới nhất. Thiết kế lai giữa laptop gaming và máy tính bảng sáng tạo, sang chảnh, trang bị công nghệ tân tiến nhất, chinh phục mọi giới hạn cùng với cấu hình vượt trội.

Xem Giá Bán