RECENT POST AUTO IN SIDE BAR

Tuesday, 27 May 2014

RECENT POST AUTO IN SIDE BAR

----------------------------------------------------------------------------------------------------------
COPY AND PASTE BELOW CODE
------------------------------------------------------------------------------------------------------------

<html>
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*

-----------------------------------------------
Blogger Template Style
Name: RECENT POST AND RECENT COMMENTS IN SIDEBAR
Designer: FB GADGETS
http://fbgadgets.blogspot.co.uk/
----------------------------------------------- */
.quickedit{display:none;}
.navbar {
visibility: hidden;
display: none;
}

/*******************
* RESET *
*******************/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}a {text-decoration:none;}

.clear{clear:both}
.right {float:right;}
.left {float:left;}

/*******************
* OVERALL *
********************/
body {
background:#e6e6e6 url(http://lh3.ggpht.com/_9nphYWWWTBQ/TLdrgF2D_EI/AAAAAAAAEEc/s8fh6bBdy3s/background.png);
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
magrin:0;
padding:0;
}

#wrapper {
background:#fff;
width:940px;
border:1px solid #ddd;
margin:15px auto;
padding:10px 15px 15px;
}

/*******************
* LINKS *
********************/
a,a:visited {
color:#333;
text-decoration:none;
}

a:hover {
text-decoration:underline;
}

#main {

margin:0 auto;
}

/*******************
* SIDEBAR *
********************/
#sidebar {
float:right;
width:320px;
margin:0;
padding:0;
}

.topwidget .widget-content,.leftwidget .widget-content,.rightwidget .widget-content {
background:#fff;
color:#333;
line-height:18px;
margin:10px 0;
padding:0;
}

#sidebar .widget a {
color:#333;
}

#sidebar .leftwidget {
float:left;
width:153px;
margin:0;
padding:0;
}

#sidebar .rightwidget {
float:right;
width:153px;
margin:0;
padding:0;
}

#sidebar h2 {
background:#EAEAEA;
color:#000;
font-size:14px;
font-weight:700;
border-bottom:2px solid #e6e6e6;
margin:15px 0 0;
padding:7px;
}

/*******************
* sidebar tabber *
********************/

.tab-widget-menu {
background:#FAFAFA url(http://img802.imageshack.us/img802/1904/bgtitle.jpg) repeat-x left center;
border-bottom:1px solid #ECEDE8;
font-size:11px;
font-weight:700;
}

.tab-widget-menu li {
float:left;
display:block;
border-right:1px solid #ECEDE8;
height:30px;
line-height:30px;
cursor:pointer;
text-transform:uppercase;
color:#555;
text-align:center;
padding:0 12px;
}

.tab-widget-menu li.selected {
background:#FFF;
position:relative;
line-height:29px;
bottom:-1px;
}
#tab-sidebar img{
-moz-border-radius:5px 5px 5px 5px;
-khtml-border-radius:5px 5px 5px 5px;
-webkit-border-radius:5px 5px 5px 5px;
border-radius:5px 5px 5px 5px;
}
#tab-sidebar .widget1 {
background:#FFF;
padding:0;
}

#tab-sidebar .widget1 ul li {
padding:10px 10px 5px;
}

#tab-sidebar .widget1 ul li img {
border:1px solid #ECEDE8;
float:left;
margin:0 10px 5px 0;
padding:4px;
}

#tab-sidebar .info {
display:table;
}

#tab-sidebar a.comments-link,#tab-sidebar .meta {
display:block;
font-family:Arial,serif;
font-size:11px;
color:#999;
text-transform:uppercase;
}

#tab-sidebar #recent-comments a {
color:#999;
}

#tab-sidebar #recent-comments a span.comment-author {
color:#004276;
}

#tab-sidebar #recent-comments a:hover span.comment-author {
color:#B8240D;
}

.widget_tag_cloud a {
white-space:nowrap;
padding:0 3px;
}

#tab-sidebar .widget1 > div,#tab-sidebar .widget_tag_cloud div,#tab-sidebar .textwidget {
border-top:0;
}

]]></b:skin>



<script type='text/javascript'>
var defaultnoimage="http://lh3.ggpht.com/_9nphYWWWTBQ/TLmC-EdNZxI/AAAAAAAAEFY/HpLyVN91AVY/no_image.jpeg";
var maxresults=6;
var splittercolor="#d4eaf2";
var relatedpoststitle=" ";
</script>

<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function(){
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 7000, true);
});
</script>

<script type='text/javascript'>
imgr = new Array();

imgr[0] = "http://lh3.ggpht.com/_9nphYWWWTBQ/TLmC-EdNZxI/AAAAAAAAEFY/HpLyVN91AVY/no_image.jpeg";

showRandomImg = true;

aBold = true;
summaryPost1 = 250;
summaryPost = 60;
summaryTitle = 25;

numposts = 4;
numposts1 = 5;
numposts2 = 2;
numposts3 = 1;
function removeHtmlTag(strx,chop){
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
s = s.join("");
s = s.substring(0,chop-1);
return s;
}

function showrecentposts4(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();

for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var pcm;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}

for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
pcm = entry.link[k].title.split(" ")[0];
break;
}
}

if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";

postdate = entry.published.$t;

if(j>imgr.length-1) j=0;
img[i] = imgr[j];

s = postcontent ; 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!="")) img[i] = d;

//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';

var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

var day = postdate.split("-")[2].substring(0,2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];

for(var u2=0;u2<month.length;u2++){
if(parseInt(m)==month[u2]) {
m = month2[u2] ; break;
}
}

var daystr = day+ ' ' + m + ' ' + y ;

if (i==0) {
var trtd = '<li class="clear" style="border-top: 0pt none;"><a href="'+posturl+'"><img width="40" height="40" src="'+img[i]+'"/></a><div class="info"><a href="'+posturl+'">'+posttitle+'</a><span class="meta">'+daystr+'</span></div></li>';
document.write(trtd);
}
if ((i>0)&&(i<numposts))
{
var trtd = '<li class="clear"><a href="'+posturl+'"><img width="40" height="40" src="'+img[i]+'"/></a><div class="info"><a href="'+posturl+'">'+posttitle+'</a><span class="meta">'+daystr+'</span></div></li>';
document.write(trtd);
}

j++;
}

}
</script>

</head>

<body>
<div id='wrapper'>
<div id='main'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
<b:includable id='main' var='top'>
<div class='blog-posts hfeed'>
<b:loop values='data:posts' var='post'>
<b:include data='post' name='post'/>
</b:loop>
</div>
</b:includable>
<b:includable id='backlinkDeleteIcon' var='backlink'/>
<b:includable id='backlinks' var='post'/>
<b:includable id='comment-form' var='post'/>
<b:includable id='commentDeleteIcon' var='comment'/>
<b:includable id='comment_count_picker' var='post'/>
<b:includable id='comment_picker' var='post'/>
<b:includable id='comments' var='post'/>
<b:includable id='feedLinks'/>
<b:includable id='feedLinksBody' var='links'/>
<b:includable id='iframe_comments' var='post'/>
<b:includable id='mobile-index-post' var='post'/>
<b:includable id='mobile-main' var='top'/>
<b:includable id='mobile-nextprev'/>
<b:includable id='mobile-post' var='post'/>
<b:includable id='nextprev'/>
<b:includable id='post' var='post'>
<data:post.body/>
</b:includable>
<b:includable id='postQuickEdit' var='post'/>
<b:includable id='shareButtons' var='post'/>
<b:includable id='status-message'/>
<b:includable id='threaded-comment-form' var='post'/>
<b:includable id='threaded_comment_js' var='post'/>
<b:includable id='threaded_comments' var='post'/>
</b:widget>
</b:section>
<div class='clear'/>
</div>

<div id='sidebar'>
<div class='300x250'>
<b:section id='300x250' preferred='yes'/>
</div>

<div class='topwidget'>
<b:section id='topwidget' preferred='yes'/>
</div>


<div id='tab-sidebar'>
<h2 class='title'>Recent Posts</h2>
<div class='widget1' id='recent-posts'>
<ul>
<script>
document.write("<script src=\"/feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts4\"><\/script>");
</script>
</ul>
</div> 
</div>
<div class='clear'/>

</div>
</div>

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

</body>
</html>

----------------------------------------------------------------------------------------------------------
OR USE THIS BRIEF CODE
----------------------------------------------------------------------------------------------------------

/*******************
* sidebar tabber *
********************/

.tab-widget-menu {
background:#FAFAFA url(http://img802.imageshack.us/img802/1904/bgtitle.jpg) repeat-x left center;
border-bottom:1px solid #ECEDE8;
font-size:11px;
font-weight:700;
}

.tab-widget-menu li {
float:left;
display:block;
border-right:1px solid #ECEDE8;
height:30px;
line-height:30px;
cursor:pointer;
text-transform:uppercase;
color:#555;
text-align:center;
padding:0 12px;
}

.tab-widget-menu li.selected {
background:#FFF;
position:relative;
line-height:29px;
bottom:-1px;
}
#tab-sidebar img{
-moz-border-radius:5px 5px 5px 5px;
-khtml-border-radius:5px 5px 5px 5px;
-webkit-border-radius:5px 5px 5px 5px;
border-radius:5px 5px 5px 5px;
}
#tab-sidebar .widget1 {
background:#FFF;
padding:0;
}

#tab-sidebar .widget1 ul li {
padding:10px 10px 5px;
}

#tab-sidebar .widget1 ul li img {
border:1px solid #ECEDE8;
float:left;
margin:0 10px 5px 0;
padding:4px;
}

#tab-sidebar .info {
display:table;
}

#tab-sidebar a.comments-link,#tab-sidebar .meta {
display:block;
font-family:Arial,serif;
font-size:11px;
color:#999;
text-transform:uppercase;
}

#tab-sidebar #recent-comments a {
color:#999;
}

#tab-sidebar #recent-comments a span.comment-author {
color:#004276;
}

#tab-sidebar #recent-comments a:hover span.comment-author {
color:#B8240D;
}

.widget_tag_cloud a {
white-space:nowrap;
padding:0 3px;
}

#tab-sidebar .widget1 > div,#tab-sidebar .widget_tag_cloud div,#tab-sidebar .textwidget {
border-top:0;
}

]]></b:skin>

----------------------------------------------------------------------------------------------------------
BEFORE HEAD TAG
------------------------------------------------------------------------------------------------------------

<script type='text/javascript'>
imgr = new Array();

imgr[0] = "http://lh3.ggpht.com/_9nphYWWWTBQ/TLmC-EdNZxI/AAAAAAAAEFY/HpLyVN91AVY/no_image.jpeg";

showRandomImg = true;

aBold = true;
summaryPost1 = 250;
summaryPost = 60;
summaryTitle = 25;

numposts = 4;
numposts1 = 5;
numposts2 = 2;
numposts3 = 1;
function removeHtmlTag(strx,chop){
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
s = s.join("");
s = s.substring(0,chop-1);
return s;
}

function showrecentposts4(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();

for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var pcm;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}

for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
pcm = entry.link[k].title.split(" ")[0];
break;
}
}

if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";

postdate = entry.published.$t;

if(j>imgr.length-1) j=0;
img[i] = imgr[j];

s = postcontent ; 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!="")) img[i] = d;

//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';

var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

var day = postdate.split("-")[2].substring(0,2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];

for(var u2=0;u2<month.length;u2++){
if(parseInt(m)==month[u2]) {
m = month2[u2] ; break;
}
}

var daystr = day+ ' ' + m + ' ' + y ;

if (i==0) {
var trtd = '<li class="clear" style="border-top: 0pt none;"><a href="'+posturl+'"><img width="40" height="40" src="'+img[i]+'"/></a><div class="info"><a href="'+posturl+'">'+posttitle+'</a><span class="meta">'+daystr+'</span></div></li>';
document.write(trtd);
}
if ((i>0)&&(i<numposts))
{
var trtd = '<li class="clear"><a href="'+posturl+'"><img width="40" height="40" src="'+img[i]+'"/></a><div class="info"><a href="'+posturl+'">'+posttitle+'</a><span class="meta">'+daystr+'</span></div></li>';
document.write(trtd);
}

j++;
}

}
</script>

</head>

----------------------------------------------------------------------------------------------------------
FINAL STEP WHERE U WANT TO SHOW RECENT POST
------------------------------------------------------------------------------------------------------------

<div id='tab-sidebar'>
<h2 class='title'>Recent Posts</h2>
<div class='widget1' id='recent-posts'>
<ul>
<script>
document.write("<script src=\"/feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts4\"><\/script>");
</script>
</ul>
</div> 
</div>
<div class='clear'/>

------------------------------------------------------------------------------------------------------------

READ MORE:

http://fbgadgets.blogspot.co.uk/2014/05/recent-or-featured-post-and-recent_27.html