Simple Featured Post

This widget shows 4 post inside your blog as a highlighted featured post. It has no animation, but it show a snippet post with thumbnail.

Just a simple featured post. It's just an edited random post in some shaded box and table (Last post : Simple random post with thumb widget. I'm suggesting this because of the linkwithin (you might read this / called simmilar post) that give your pagerank / SEO downrank.

With this, readers have some idea what is in your site and might want to read more!

Just a simple HTML widget
To install click ==>> Layout ==> add a gadget ==> Find Html widget ==> copy this html

Copy / paste this code into your site

<div style="background-color:#D8D8D8;"><table style="border:1px solid black;"><tr><td><!-- Style block for fancying-up the appearance --><style> .rp-post-link { font-weight: bold !important; font-size: 120% !important; } .rp-summary { margin-top: 3px !important; font-size: 95% !important; line-height: 1.3em !important; word-wrap: break-word !important; } .rp-thumbnail { margin: 2px 2px 2px 0px !important; float: left !important; } .rp-pubdate { font-style: italic !important; margin-bottom: 3px !important; } </style><!-- end style block --><!-- Begin the script! --><script type="text/javascript"> var randarray = new Array(); var l=0; var flag; var lengthsummary = 105; //Number of characters to limit summary to var numofpost=2; //Number of random posts to display function randomposts(json){ var total = parseInt(json.feed.openSearch$totalResults.$t,10); //fetch some random posts, making sure none are the same for(i=0; i < numofpost;){ flag=0; randarray.length=numofpost; l=Math.floor(Math.random()*total); for(j in randarray){ if(l==randarray[j]){ flag=1; } } if(flag==0&&l!=0){ randarray[i++]=l; } } //Fetch the info from the posts and write them out document.write('<div>'); for(n in randarray){ var p=randarray[n]; var entry=json.feed.entry[p-1]; //the object holding the feed data for a post var item =""; //holds the string to write out, containing all post info //----Post title link ---- var posttitle = entry.title.$t || "[Untitled]"; //A post with no title is called "[Untitled]" //Looks like the 'alternate' link is *usually* last, //but we don't know if it's *always* last, so loop backwards //for efficiency and correctness! for(k=entry.link.length -1; k >= 0 ; k--){ if(entry.link[k].rel=='alternate'){ item +="<a class='rp-post-link' href='" + entry.link[k].href + "'>" + posttitle + "</a>"; break; } } //----end post title link --- item += "<br" //this weirdness is because the Blogger post editor is STUPID... sorry. item += "/>" //----publication date ---- var pubdate = new Date(entry.published.$t).toDateString(); item +="<span class='rp-pubdate'>Posted On " + pubdate +"</span>"; //----end publication date ---- //----Thumbnail images ---- if('media$thumbnail' in entry)item += "<img class='rp-thumbnail' src='" + entry.media$thumbnail.url + "'>" //----end thumbnail images ---- //---summary text ---- var summary = ""; //Feed will have EITHER "summary" or "content" variables, depending on feed settings if ("content" in entry) { summary = entry.content.$t; } else if ("summary" in entry) { summary = entry.summary.$t; } //Strip HTML tags out of post summary var re = /<\S[^>]*>/g; summary = summary.replace(re, ""); item += "<p class='rp-summary'>" + summary.substring(0,lengthsummary) + " ...</p>"; //----end summary text --- document.write(item); //write out the data from the post } document.write('</div>'); //we've written out all the random post data! Done! } </script><!-- the following calls the randompost function and passes it, essentially, the blog's feed --><script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script><a href="httphttp://freewidget4u.blogspot.com/2013/12/simple-featured-post.html" target="_blank"><small>GetThis!</small></a></td> <td><!-- Style block for fancying-up the appearance --><style> .rp-post-link { font-weight: bold !important; font-size: 120% !important; } .rp-summary { margin-top: 3px !important; font-size: 95% !important; line-height: 1.3em !important; word-wrap: break-word !important; } .rp-thumbnail { margin: 2px 2px 2px 0px !important; float: left !important; } .rp-pubdate { font-style: italic !important; margin-bottom: 3px !important; } </style><!-- end style block --><!-- Begin the script! --><script type="text/javascript"> var randarray = new Array(); var l=0; var flag; var lengthsummary = 105; //Number of characters to limit summary to var numofpost=2; //Number of random posts to display function randomposts(json){ var total = parseInt(json.feed.openSearch$totalResults.$t,10); //fetch some random posts, making sure none are the same for(i=0; i < numofpost;){ flag=0; randarray.length=numofpost; l=Math.floor(Math.random()*total); for(j in randarray){ if(l==randarray[j]){ flag=1; } } if(flag==0&&l!=0){ randarray[i++]=l; } } //Fetch the info from the posts and write them out document.write('<div>'); for(n in randarray){ var p=randarray[n]; var entry=json.feed.entry[p-1]; //the object holding the feed data for a post var item =""; //holds the string to write out, containing all post info //----Post title link ---- var posttitle = entry.title.$t || "[Untitled]"; //A post with no title is called "[Untitled]" //Looks like the 'alternate' link is *usually* last, //but we don't know if it's *always* last, so loop backwards //for efficiency and correctness! for(k=entry.link.length -1; k >= 0 ; k--){ if(entry.link[k].rel=='alternate'){ item +="<a class='rp-post-link' href='" + entry.link[k].href + "'>" + posttitle + "</a>"; break; } } //----end post title link --- item += "<br" //this weirdness is because the Blogger post editor is STUPID... sorry. item += "/>" //----publication date ---- var pubdate = new Date(entry.published.$t).toDateString(); item +="<span class='rp-pubdate'>Posted On " + pubdate +"</span>"; //----end publication date ---- //----Thumbnail images ---- if('media$thumbnail' in entry)item += "<img class='rp-thumbnail' src='" + entry.media$thumbnail.url + "'>" //----end thumbnail images ---- //---summary text ---- var summary = ""; //Feed will have EITHER "summary" or "content" variables, depending on feed settings if ("content" in entry) { summary = entry.content.$t; } else if ("summary" in entry) { summary = entry.summary.$t; } //Strip HTML tags out of post summary var re = /<\S[^>]*>/g; summary = summary.replace(re, ""); item += "<p class='rp-summary'>" + summary.substring(0,lengthsummary) + " ...</p>"; //----end summary text --- document.write(item); //write out the data from the post } document.write('</div>'); //we've written out all the random post data! Done! } </script><!-- the following calls the randompost function and passes it, essentially, the blog's feed --><script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script>..</td></tr></table></div>

Reminder ===> put this widget above or below post ==> also put some text for the title (recommend Featured Post)

***** Alert *****
the script above have error. Click this link and copy the html/javascript code
http://www.mediafire.com/view/cj114voyswwj4mw/FeaturedPost-freewidget4ublogspot.txt

Floating Ads Widget Blogger Javascript

A simple Float Widget in javascript which put your ads floating and always pinned at the left side, in your blog. Include with close(x) button as reader can get rid if it.

Copy / paste this code into your site

<style>#Freewidget4ufloatads { background: #333333 url('..'); background-repeat:repeat-x; text-align:right; padding-top:4px; } #freewidget4uadsbase{ height:600; margin:0auto; width:auto; background:#fff; border-bottom:2px #333333 solid; border-right:2px #333333 solid; border-left:2px #333333 solid; text-align:center; padding:4px; } #freewidget4uadsheadline{ opacity:1.0; height:auto; width:auto; position:fixed; top:-20px; left:10px; border-bottom:1px #005094 solid; border-bottom:0px blue solid; color:#333; padding:0px; z-index:1001; font-size:13px;} </style><script type="text/javascript">function getValue() { document.getElementById("freewidget4uadsheadline").style.display = 'none'; } function link() { window.open('http://freewidget4u.blogspot.com/2013/12/floating-ads-widget-blogger-javascript.html', 'newwindow', 'width=600, height=400'); return false; } </script><div id="freewidget4uadsheadline"><div id="Freewidget4ufloatads"><div id="freewidget4uadsbase"><br /><span style="color:#fff;font-size:13px;font-weight:bold;text-shadow:black 0.1em 0.1em 0.1em"></span> <span style="color:#fff;font-size:13px;font-weight:bold;text-shadow:black 0.1em 0.1em 0.1em;float:right;padding-top:3px;padding-right:10px"><a onclick="getValue(),link()">close(x)</a></span> <!-- PASTE HTML/JAVASCRIPT ADS HERE --> <!-- PASTE HTML/JAVASCRIPT ADS HERE --> </div></div></div>

And search for tag

<!-- PASTE HTML/JAVASCRIPT ADS HERE -->

Paste your ads code or anything in html code between it

<!-- PASTE HTML/JAVASCRIPT ADS HERE -->

Free Stylish Tab Widget

A Stylish Tab Widget / gadjet  using only HTML / Javascript, easy and no jQuery. But need some configuration in HTML / Javascript. Up to 5 tab and you can save space in your blogspot


### Start Copy except this line ###


<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">
<script language="JavaScript" type="text/javascript">
function st2(t){
for(i=1;i<=5;i++){
ts=document.getElementById('tt'+i);
tr = document.getElementById('dd'+i);
ta = document.getElementById('aa'+i);
if(t==i){
if(t==1) ts.className="Tab1";
if(t==2) ts.className="Tab2";
if(t==3) ts.className="Tab3";
if(t==4) ts.className="Tab4";
if(t==5) ts.className="Tab5";
ta.className="srchlinksel2";
ts.style.borderBottom="1px solid #FFFFFF";
tr.style["display"]="block";
tr.style["visibility"]="visible";
}
else{
ts.className="tb2";
ta.className="srchlink2";
ts.style.borderBottom="1px solid #B5D6EF";
tr.style["display"]="none";
tr.style["visibility"]="hidden";
}
}
}
</script>


<style type="text/css">.f10 {
FONT-SIZE: 10px; FONT-FAMILY: arial
}
.f11 {
FONT-SIZE: 11px; FONT-FAMILY: arial
}
.f12 {
FONT-SIZE: 12px; FONT-FAMILY: arial
}
.f12r {
FONT-SIZE: 12px; LINE-HEIGHT: 13px; FONT-FAMILY: arial
}
.f12n {
FONT-SIZE: 12px; LINE-HEIGHT: 1.3em; FONT-FAMILY: arial
}
.ft11a {
FONT-SIZE: 11px; LINE-HEIGHT: 13px; FONT-FAMILY: Tahoma
}
.fv9 {
FONT-SIZE: 9px; FONT-FAMILY: verdana
}
.fv10 {
FONT-SIZE: 10px; FONT-FAMILY: verdana
}
.ft11 {
FONT-SIZE: 11px; LINE-HEIGHT: 14px; FONT-FAMILY: Tahoma
}
.fmicro9 {
FONT-SIZE: 9px; FONT-FAMILY: Microsoft Sans Serif
}
A.srchlink:link {
COLOR: #2864b4; TEXT-DECORATION: none
}
A.srchlink:visited {
}
A.srchlinksel:link {
CURSOR: text; COLOR: #000000; TEXT-DECORATION: none
}
A.srchlinksel:visited {
CURSOR: text; COLOR: #000000; TEXT-DECORATION: none
}
A.srchlink2:link {
COLOR: #2864b4; TEXT-DECORATION: underline
}
A.srchlink2:visited {
COLOR: #2864b4; TEXT-DECORATION: underline
}
A.srchlinksel2:link {
CURSOR: text; COLOR: #000000; TEXT-DECORATION: none
}
A.srchlinksel2:visited {
CURSOR: text; COLOR: #000000; TEXT-DECORATION: none
}
.tb2 {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:'#EEF5FB',EndColorStr:'#D9E9F6');BACKGROUND-COLOR: #d9e9f6
}
.tbmain2 {
BACKGROUND-COLOR: #ffffff
}
.lfttbl {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:'#DEFFC6',EndColorStr:'#B7E4A2'); BACKGROUND-COLOR: #deffc6
}
.rttbl {
BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef 1px solid; FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:'#EEF5FB',EndColorStr:'#DEEFF7'); BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM: #b5d6ef 1px solid; BACKGROUND-COLOR: #eef5fb
}
.rttblx {
BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef 1px solid; BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM: #b5d6ef 1px solid; BACKGROUND-COLOR: #ffffff
}
.rt_tbl {
BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: 0px; BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM: #b5d6ef 1px solid; BACKGROUND-COLOR: #b0dafd
}
.toptbl {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:'#4A84AD',EndColorStr:'#00426B'); BACKGROUND-COLOR: #00426b
}
.srchtbl {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:'#FFFFFF',EndColorStr:'#A5DEDE'); BACKGROUND-COLOR: #a5dede
}
.Tab1 {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:'#FEDFB3',EndColorStr:'#FFFFFF');
BACKGROUND-COLOR: #ffffff
}
.Tab2 {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:'#B39DFE',EndColorStr:'#FFFFFF');
BACKGROUND-COLOR: #ffffff
}
.Tab3 {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:'#F6FE9D',EndColorStr:'#FFFFFF');
BACKGROUND-COLOR: #ffffff
}
.Tab4 {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:'#FEAF9D',EndColorStr:'#FFFFFF');
BACKGROUND-COLOR: #ffffff
}
.Tab5 {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:'#9DFEA5',EndColorStr:'#FFFFFF');
BACKGROUND-COLOR: #ffffff
}
A {
TEXT-DECORATION: none
}
A:hover {
TEXT-DECORATION: underline}
</style>


<table border="0" cellspacing="0" cellpadding="0"
width="295">
<tbody>
<tr>
<td id="tt1"
style="BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef
1px solid; BORDER-LEFT: #b5d6ef 1px solid" width="59"
class="Tab1" height="22" onclick="st2('1')" align="middle"><a id="aa1"
class="srchlinksel2" href="javascript:undefined"><font
class = f12><b><center>


<!--TAB1 NAME-->   Tab 1  <!--TAB1 NAME-->
 
</center></b></font
class></a></td>
<td style="BORDER-BOTTOM: #b5d6ef 1px solid" width="2">
<table border="0" cellspacing="0" cellpadding="0" width="2">
<tbody>
<tr>
<td width="2"></td></tr></tbody></table></td>
<td id="tt2"
style="BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef
1px solid; BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM:
#b5d6ef 1px solid" width="59"
class="tb2" height="22" onclick="st2('2')" align="middle"><a id="aa2"
class="srchlink2" href="javascript:undefined"><font
class = f12><b><center>


<!--TAB2 NAME-->   Tab 2  <!--TAB2 NAME-->
 
</center></b></font
class></a></td>
<td style="BORDER-BOTTOM: #b5d6ef 1px solid" width="2">
<table border="0" cellspacing="0" cellpadding="0" width="2">
<tbody>
<tr>
<td width="2"></td></tr></tbody></table></td>
<td id="tt3"
style="BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef
1px solid; BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM:
#b5d6ef 1px solid" width="59"
class="tb2" height="22" onclick="st2('3')" align="middle"><a id="aa3"
class="srchlink2" href="javascript:undefined"><font
class = f12><b><center>


<!--TAB3 NAME-->   Tab 3  <!--TAB3 NAME-->
 
</center></b></font
class></a></td>
<td style="BORDER-BOTTOM: #b5d6ef 1px solid" width="2">
<table border="0" cellspacing="0" cellpadding="0" width="2">
<tbody>
<tr>
<td width="2"></td></tr></tbody></table></td>
<td id="tt4"
style="BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef
1px solid; BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM:
#b5d6ef 1px solid" width="59"
class="tb2" height="22" onclick="st2('4')" align="middle"><a id="aa4"
class="srchlink2" href="javascript:undefined"><font
class = f12><b><center>


<!--TAB4 NAME-->   Tab 4  <!--TAB4 NAME-->
 
</center></b></font
class></a></td>
<td style="BORDER-BOTTOM: #b5d6ef 1px solid" width="2">
<table border="0" cellspacing="0" cellpadding="0" width="2">
<tbody>
<tr>
<td width="2"></td></tr></tbody></table></td>
<td id="tt5"
style="BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef
1px solid; BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM:
#b5d6ef 1px solid" width="59"
class="tb2" height="22" onclick="st2('5')" align="middle"><a id="aa5"
class="srchlink2" href="javascript:undefined"><font
class = f12><b><center>


<!--TAB1 NAME-->   Tab 5  <!--TAB1 NAME-->
 
</center></b></font
class></a></td></tr>
<tr>
<td colspan="9">
<div style="BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP:
0px; BORDER-LEFT: #b5d6ef 1px solid; WIDTH: 295px;
BORDER-BOTTOM: 0px"
><!-- Main Headlines Begin //-->
<table border="0" cellspacing="0" cellpadding="0"
width="295" height="5">
<tbody>
<tr>
<td height="5"></td></tr></tbody></table>
&nbsp;&nbsp;




<div id="dd1" style="BORDER-RIGHT: #b5d6ef 0px solid;
BORDER-TOP: 0px; DISPLAY: block; VISIBILITY: visible;
BORDER-LEFT: #b5d6ef 0px solid; WIDTH: 295px; BORDER-BOTTOM:
#b5d6ef 1px solid"
>
<table border="0" cellspacing="0" cellpadding="0"
width="295">
<tbody>
<tr>
<td width="14"></td>
<td valign="top"><font color="#16387c" class="f12n">


<!—put your widget for tab 1 -->




<!-- Script Html Widget for Tab 1-->


</!—put></font></td>
</tr>
<tr>
</tr>
<tr>
<td height="4"></td></tr></tbody></table></div><!-- Main
Headlines End //--></div>
<div id="dd2" style="BORDER-RIGHT: #b5d6ef 1px solid;
BORDER-TOP: 0px; DISPLAY: none; VISIBILITY: hidden;
BORDER-LEFT: #b5d6ef 1px solid; WIDTH: 295px; BORDER-BOTTOM:
#b5d6ef 1px solid"
><!-- News Begin //-->
<table border="0" cellspacing="0" cellpadding="0"
width="295">
<tbody>
<tr>
<td width="14"></td>
<td valign="top"><font color="#16387c" class="f12n">


<!—put your widget for tab 2 -->




<!-- Script Html Widget for Tab 2-->


</!—put></font></td></tr>
<tr>
</tr>
<tr>
<td height="4"></td></tr></tbody></table><!-- News End
//--></div>
<div id="dd3" style="BORDER-RIGHT: #b5d6ef 1px solid;
BORDER-TOP: 0px; DISPLAY: none; VISIBILITY: hidden;
BORDER-LEFT: #b5d6ef 1px solid; WIDTH: 295px; BORDER-BOTTOM:
#b5d6ef 1px solid"
><!-- Business Begin //-->
<table border="0" cellspacing="0" cellpadding="0"
width="295">
<tbody>
<tr>
<td width="14"></td>
<td valign="top"><font color="#16387c" class="f12n">


<!—put your widget for tab 3 -->






<!-- Script Html Widget for Tab 3-->


</!—put></font></td></tr>
<tr>
</tr>
<tr>
<td height="4"></td></tr></tbody></table><!-- Business End
//--></div>
<div id="dd4" style="BORDER-RIGHT: #b5d6ef 1px solid;
BORDER-TOP: 0px; DISPLAY: none; VISIBILITY: hidden;
BORDER-LEFT: #b5d6ef 1px solid; WIDTH: 295px; BORDER-BOTTOM:
#b5d6ef 1px solid"
><!-- Movies Begin //-->
<table border="0" cellspacing="0" cellpadding="0"
width="295">
<tbody>
<tr>
<td width="14"></td>
<td valign="top"><font color="#16387c" class="f12n">


<!—put your widget for tab 4 -->




<!-- Script Html Widget for Tab 4-->


</!—put></font></td>
</tr>
<tr>
</tr>
<tr>
<td height="4"></td></tr></tbody></table><!-- Movies End
//--></div>
<div id="dd5" style="BORDER-RIGHT: #b5d6ef 1px solid;
BORDER-TOP: 0px; DISPLAY: none; VISIBILITY: hidden;
BORDER-LEFT: #b5d6ef 1px solid; WIDTH: 295px; BORDER-BOTTOM:
#b5d6ef 1px solid"
><!-- Sports Begin //-->
<table border="0" cellspacing="0" cellpadding="0"
width="295">
<tbody>
<tr>
<td width="14"></td>
<td valign="top"><font color="#16387c" class="f12n">


<!—put your widget for tab 5 -->






<!-- Script Html Widget for Tab 5-->


</!—put></font>
</td></tr>
<tr>
</tr>
<tr>
<td
height 4=></td
height></tr></tbody></table></div></td></tr></tbody></table></div>

<br/><a href="http://adf.ly/2Puky">Grab This!</a><div style="text-align:right">

</div>




<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div>

### End Copy except this line ###


** Instructions Note**

* Copy and paste inside blogspot --> Design -->Add New Gadget

* Find  

<!--TAB1 NAME-->   Put the tab label here   <!--TAB1 NAME-->


* Find

<!—put your widget for tab 5 -->

example paste HTML / Javascript content inside the tab

<!-- Script Html Widget for Tab 5-->


* The background are transparent. Please put some html code for font

example for white font

<!—put your widget for tab 5 -->
<font color="#FFFFFF">
example paste HTML / Javascript content inside the tab
</font>
<!-- Script Html Widget for Tab 5-->

 

=== Demo ===

Tab 1		Tab 2		Tab 3		Tab 4		Tab 5

Grab This!

Note updated 2012 - Try this new improve tabbed widget with javascript

Animated Scrolling Recent Post Widget

free animated scrolling
recent post widget

This is a cool scrolling and animated widget for your blog. Very stylish and can save space inside your blog. You need to copy and paste the html/javascript code here and paste inside the third party program in dashboard > design > add a gadget > HTML/javascript. Try it first because it have been tested inside blogspot. If you not satisfied, just delete it.

If you have a problem to install html/java script it in blogspot, please click [here]

Grab Yours Today!



==== start copy except this line ====

<center><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--

#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff repeat-x;
border:1px solid #ddd;
}

#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}

.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}

-->
</style>
<script language='javascript'>

imgr = new Array();
imgr[0] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
imgr[1] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
imgr[2] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
imgr[3] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
imgr[4] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://URL BLOG.blogspot.com/";
limitspy=4
intervalspy=4000
</script>

<div id="spylist">
<script src='https://sites.google.com/site/unwanted86/javascript/animatedrecentpost.js' type='text/javascript'></script>
</div>
</center>
<center><small><a href="http://adf.ly/2Pupw" target="_blank">get this widget here</a></small></center>

==== end copy except this line ====

**note find the URL BLOG and replace with your url**

Stylish Guestbook with 5 Tab inside, Save Space and Stylish

Have problem with allot of widget and your blog look messy. Hurry and get a Stylish Guestbook with 5 Tab inside, Save Space and Stylish

Guestbook Tab Widget at the upper right

The script in HTML so add on your blog widget starting below here

For more guestbook image http://freewidget4u.blogspot.com/2011/12/hidden-guestbook-blog-widget.html
 

Copy / paste this code into your site

<style type="text/css">#gb{ position:fixed; top:0px; z-index:+1000; } * html #gb{position:relative;} .gbtab{ height:100px; width:30px; float:left; cursor:pointer; background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3bZ1Xn_q9QEFHCE5quKET-IIYL42-lp3dIuxv7LH12e8hQjDZ09yZa6PZjA4bC28AkTBsUkCU5OhxjE67Pmh_XG-HZzew5pCSfcHxlXu3_ZtBTwXNc_xXd9lwTaKppQgKpQuyplLnsVs4/s1600/tabs.png') no-repeat; } .gbcontent{ float:left; border:2px solid #A5BD51; background:#F5F5F5; padding:10px; } </style><script type="text/javascript">function showHideGB(){ var gb = document.getElementById("gb"); var w = gb.offsetWidth; gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0); gb.opened = !gb.opened; } function moveGB(x0, xf){ var gb = document.getElementById("gb"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; gb.style.right = x.toString() + "px"; if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);} } </script><div id="gb"><div class="gbtab" onclick="showHideGB()"> </div><div class="gbcontent"><script language="JavaScript" type="text/javascript">function st2(t){ for(i=1;i<=5;i++){ ts=document.getElementById('tt'+i); tr = document.getElementById('dd'+i); ta = document.getElementById('aa'+i); if(t==i){ if(t==1) ts.className="Tab1"; if(t==2) ts.className="Tab2"; if(t==3) ts.className="Tab3"; if(t==4) ts.className="Tab4"; if(t==5) ts.className="Tab5"; ta.className="srchlinksel2"; ts.style.borderBottom="1px solid #FFFFFF"; tr.style["display"]="block"; tr.style["visibility"]="visible"; } else{ ts.className="tb2"; ta.className="srchlink2"; ts.style.borderBottom="1px solid #B5D6EF"; tr.style["display"]="none"; tr.style["visibility"]="hidden"; } } } </script> <style type="text/css">.f10 { FONT-SIZE: 10px; FONT-FAMILY: arial } .f11 { FONT-SIZE: 11px; FONT-FAMILY: arial } .f12 { FONT-SIZE: 12px; FONT-FAMILY: arial } .f12r { FONT-SIZE: 12px; LINE-HEIGHT: 13px; FONT-FAMILY: arial } .f12n { FONT-SIZE: 12px; LINE-HEIGHT: 1.3em; FONT-FAMILY: arial } .ft11a { FONT-SIZE: 11px; LINE-HEIGHT: 13px; FONT-FAMILY: Tahoma } .fv9 { FONT-SIZE: 9px; FONT-FAMILY: verdana } .fv10 { FONT-SIZE: 10px; FONT-FAMILY: verdana } .ft11 { FONT-SIZE: 11px; LINE-HEIGHT: 14px; FONT-FAMILY: Tahoma } .fmicro9 { FONT-SIZE: 9px; FONT-FAMILY: Microsoft Sans Serif } A.srchlink:link { COLOR: #2864b4; TEXT-DECORATION: none } A.srchlink:visited { } A.srchlinksel:link { CURSOR: text; COLOR: #000000; TEXT-DECORATION: none } A.srchlinksel:visited { CURSOR: text; COLOR: #000000; TEXT-DECORATION: none } A.srchlink2:link { COLOR: #2864b4; TEXT-DECORATION: underline } A.srchlink2:visited { COLOR: #2864b4; TEXT-DECORATION: underline } A.srchlinksel2:link { CURSOR: text; COLOR: #000000; TEXT-DECORATION: none } A.srchlinksel2:visited { CURSOR: text; COLOR: #000000; TEXT-DECORATION: none } .tb2 { FILTER: progid:DXImageTransform.Microsoft.Gradient (GradientType:0,StartColorStr:'#EEF5FB',EndColorStr:'#D9E9F6');BACKGROUND-COLOR: #d9e9f6 } .tbmain2 { BACKGROUND-COLOR: #ffffff } .lfttbl { FILTER: progid:DXImageTransform.Microsoft.Gradient (GradientType:0,StartColorStr:'#DEFFC6',EndColorStr:'#B7E4A2'); BACKGROUND-COLOR: #deffc6 } .rttbl { BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef 1px solid; FILTER: progid:DXImageTransform.Microsoft.Gradient (GradientType:0,StartColorStr:'#EEF5FB',EndColorStr:'#DEEFF7'); BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM: #b5d6ef 1px solid; BACKGROUND-COLOR: #eef5fb } .rttblx { BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef 1px solid; BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM: #b5d6ef 1px solid; BACKGROUND-COLOR: #ffffff } .rt_tbl { BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: 0px; BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM: #b5d6ef 1px solid; BACKGROUND-COLOR: #b0dafd } .toptbl { FILTER: progid:DXImageTransform.Microsoft.Gradient (GradientType:0,StartColorStr:'#4A84AD',EndColorStr:'#00426B'); BACKGROUND-COLOR: #00426b } .srchtbl { FILTER: progid:DXImageTransform.Microsoft.Gradient (GradientType:0,StartColorStr:'#FFFFFF',EndColorStr:'#A5DEDE'); BACKGROUND-COLOR: #a5dede } .Tab1 { FILTER: progid:DXImageTransform.Microsoft.Gradient (GradientType:0,StartColorStr:'#FEDFB3',EndColorStr:'#FFFFFF'); BACKGROUND-COLOR: #ffffff } .Tab2 { FILTER: progid:DXImageTransform.Microsoft.Gradient (GradientType:0,StartColorStr:'#B39DFE',EndColorStr:'#FFFFFF'); BACKGROUND-COLOR: #ffffff } .Tab3 { FILTER: progid:DXImageTransform.Microsoft.Gradient (GradientType:0,StartColorStr:'#F6FE9D',EndColorStr:'#FFFFFF'); BACKGROUND-COLOR: #ffffff } .Tab4 { FILTER: progid:DXImageTransform.Microsoft.Gradient (GradientType:0,StartColorStr:'#FEAF9D',EndColorStr:'#FFFFFF'); BACKGROUND-COLOR: #ffffff } .Tab5 { FILTER: progid:DXImageTransform.Microsoft.Gradient (GradientType:0,StartColorStr:'#9DFEA5',EndColorStr:'#FFFFFF'); BACKGROUND-COLOR: #ffffff } A { TEXT-DECORATION: none } A:hover { TEXT-DECORATION: underline} </style> <table border="0" cellspacing="0" cellpadding="0" width="295"><tbody><tr><td id="tt1" style="BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef 1px solid; BORDER-LEFT: #b5d6ef 1px solid" width="59" class="Tab1" height="22" onclick="st2('1')" align="middle"><a id="aa1" class="srchlinksel2" href="javascript:undefined"><font class = f12><b><center>EDIT TAB 1</center></b></font class></a></td><td style="BORDER-BOTTOM: #b5d6ef 1px solid" width="2"><table border="0" cellspacing="0" cellpadding="0" width="2"><tbody><tr><td width="2"></td></tr></tbody></table></td><td id="tt2" style="BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef 1px solid; BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM: #b5d6ef 1px solid" width="59" class="tb2" height="22" onclick="st2('2')" align="middle"><a id="aa2" class="srchlink2" href="javascript:undefined"><font class = f12><b><center>EDIT TAB 2</center></b></font class></a></td><td style="BORDER-BOTTOM: #b5d6ef 1px solid" width="2"><table border="0" cellspacing="0" cellpadding="0" width="2"><tbody><tr><td width="2"></td></tr></tbody></table></td><td id="tt3" style="BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef 1px solid; BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM: #b5d6ef 1px solid" width="59" class="tb2" height="22" onclick="st2('3')" align="middle"><a id="aa3" class="srchlink2" href="javascript:undefined"><font class = f12><b><center>EDIT TAB 3</center></b></font class></a></td><td style="BORDER-BOTTOM: #b5d6ef 1px solid" width="2"><table border="0" cellspacing="0" cellpadding="0" width="2"><tbody><tr><td width="2"></td></tr></tbody></table></td><td id="tt4" style="BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef 1px solid; BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM: #b5d6ef 1px solid" width="59" class="tb2" height="22" onclick="st2('4')" align="middle"><a id="aa4" class="srchlink2" href="javascript:undefined"><font class = f12><b><center>EDIT TAB 4</center></b></font class></a></td><td style="BORDER-BOTTOM: #b5d6ef 1px solid" width="2"><table border="0" cellspacing="0" cellpadding="0" width="2"><tbody><tr><td width="2"></td></tr></tbody></table></td><td id="tt5" style="BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef 1px solid; BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM: #b5d6ef 1px solid" width="59" class="tb2" height="22" onclick="st2('5')" align="middle"><a id="aa5" class="srchlink2" href="javascript:undefined"><font class = f12><b><center>EDIT TAB 5</center></b></font class></a></td></tr><tr><td colspan="9"><div style="BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: 0px; BORDER-LEFT: #b5d6ef 1px solid; WIDTH: 295px; BORDER-BOTTOM: 0px" ><!-- Main Headlines Begin //--><table border="0" cellspacing="0" cellpadding="0" width="295" height="5"><tbody><tr><td height="5"></td></tr></tbody></table><span style="gt;Widget edited by <a" href="#" target="_blank">freeWIDGET4u </span> <div id="dd1" style="BORDER-RIGHT: #b5d6ef 0px solid; BORDER-TOP: 0px; DISPLAY: block; VISIBILITY: visible; BORDER-LEFT: #b5d6ef 0px solid; WIDTH: 295px; BORDER-BOTTOM: #b5d6ef 1px solid" ><table border="0" cellspacing="0" cellpadding="0" width="295"><tbody><tr><td width="14"></td><td valign="top"><font color="#16387c" class="f12n"> <!—Put your widget for TAB 1 --> <!-- Script Html Widget for Tab 1--> </font></td></tr><tr></tr><tr><td height="4"></td></tr></tbody></table></div><!-- Main Headlines End //--></div><div id="dd2" style="BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: 0px; DISPLAY: none; VISIBILITY: hidden; BORDER-LEFT: #b5d6ef 1px solid; WIDTH: 295px; BORDER-BOTTOM: #b5d6ef 1px solid" ><!-- News Begin //--><table border="0" cellspacing="0" cellpadding="0" width="295"><tbody><tr><td width="14"></td><td valign="top"><font color="#16387c" class="f12n"> <!—Put your widget for TAB 2 --> <!-- Script Html Widget for Tab 2--> </font></td></tr><tr></tr><tr><td height="4"></td></tr></tbody></table><!-- News End //--></div><div id="dd3" style="BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: 0px; DISPLAY: none; VISIBILITY: hidden; BORDER-LEFT: #b5d6ef 1px solid; WIDTH: 295px; BORDER-BOTTOM: #b5d6ef 1px solid" ><!-- Business Begin //--><table border="0" cellspacing="0" cellpadding="0" width="295"><tbody><tr><td width="14"></td><td valign="top"><font color="#16387c" class="f12n"> <!—Put your widget for TAB 3 --> <!-- Script Html Widget for Tab 3--> </font></td></tr><tr></tr><tr><td height="4"></td></tr></tbody></table><!-- Business End //--></div><div id="dd4" style="BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: 0px; DISPLAY: none; VISIBILITY: hidden; BORDER-LEFT: #b5d6ef 1px solid; WIDTH: 295px; BORDER-BOTTOM: #b5d6ef 1px solid" ><!-- Movies Begin //--><table border="0" cellspacing="0" cellpadding="0" width="295"><tbody><tr><td width="14"></td><td valign="top"><font color="#16387c" class="f12n"> <!—Put your widget for TAB 4 --> <!-- Script Html Widget for Tab 4--> </font></td></tr><tr></tr><tr><td height="4"></td></tr></tbody></table><!-- Movies End //--></div><div id="dd5" style="BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: 0px; DISPLAY: none; VISIBILITY: hidden; BORDER-LEFT: #b5d6ef 1px solid; WIDTH: 295px; BORDER-BOTTOM: #b5d6ef 1px solid" ><!-- Sports Begin //--><table border="0" cellspacing="0" cellpadding="0" width="295"><tbody><tr><td width="14"></td><td valign="top"><font color="#16387c" class="f12n"> <!—Put your widget for TAB 5 --> <!-- Script Html Widget for Tab 5--> </font></td></tr><tr></tr><tr><td height 4=></td height></tr></tbody></table></div></td></tr></tbody></table><br/><a href="http://adf.ly/XWa1p"><small>widget4u</small></a><div style="text-align:right"><a href="javascript:showHideGB()">[close] </a></div></div></div><script type="text/javascript">var gb = document.getElementById("gb"); gb.style.right = (30-gb.offsetWidth).toString() + "px"; </script>

Attention
Find the script like below and paste the HTML widget that you want to paste inside the tab. Find all the 5 tabs

Example:

<!—Put your widget for TAB 3 -->

paste the HTML widget between the red script --like this—(paste here)

<!-- Script Html Widget for Tab 3-->

and

find and change the red edit tab to display the  name of your widget