Chủ đề tổng hợp

header ads

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

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:"http://2.bp.blogspot.com/-C3Mo0iKKiSw/VGdK808U7rI/AAAAAAAAAmI/W7Ae_dsEVAE/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://2.bp.blogspot.com/-C3Mo0iKKiSw/VGdK808U7rI/AAAAAAAAAmI/W7Ae_dsEVAE/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:"http://2.bp.blogspot.com/-C3Mo0iKKiSw/VGdK808U7rI/AAAAAAAAAmI/W7Ae_dsEVAE/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:"http://2.bp.blogspot.com/-C3Mo0iKKiSw/VGdK808U7rI/AAAAAAAAAmI/W7Ae_dsEVAE/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="http://2.bp.blogspot.com/-giova1ZCh-A/Uzq6L8QTJNI/AAAAAAAAAJc/USXictTq_xs/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('http://1.bp.blogspot.com/-QaYiqOCLsao/Uypu_bcmtgI/AAAAAAAACy4/NuRzsl7cCc0/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 = "http://1.bp.blogspot.com/-aEZpLC-PlYA/Uyp3GlvWxtI/AAAAAAAACzI/sX-DH5iyzJU/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/ 

Đăng nhận xét

0 Nhận xét