ads
ads
As you can see, most of the widgets explained in this blog are quite easy to understand and implement, so for this widget too, I have decided to explain the easier method.
I you want to display a widget, showing the latest posts of your blog, with a brief summary in the sidebar, or anywhere in the blog, then follow these steps to create it within minutes.
If you already have burnt your blog's feed with feedburner, then it' fine , if not then follow these 3 steps first:
1. Go to FeedBurner.com
2. Enter the address/url of your blog in the space provided and click on Next.
3. Now select the second radio button, and click on Next. And then click on Activate Feed, Now you can "Skip To Feed Management"
Those familiar with Feedburner, log in to it.
Then click on Publicize tab at the top, then click on the BuzzBoost Link in the left side bar links.
Now select the appropriate settings, and then click on "Activate" button, and then copy the HTML code in to your website. You can see the recent posts widget in my blog at the bottom left !
*Update:
If you are facing any problems in the widget described above, then use this one:
Log in to Blogger, go to Layout and click on "Add a Gadget", and select it as "HTML/JavaScript type".
Now add this code in to the widget:
<script>
function rp(json) {
document.write('<ul>');
for (var i = 0; i < numposts; i++) {
document.write('<li>');
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
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;
}
}
posttitle = posttitle.link(posturl);
var readmorelink = "(more)";
readmorelink = readmorelink.link(posturl);
var postdate = entry.published.$t;
var cdyear = postdate.substring(0,4);
var cdmonth = postdate.substring(5,7);
var cdday = postdate.substring(8,10);
var monthnames = new Array();
monthnames[1] = "Jan";
monthnames[2] = "Feb";
monthnames[3] = "Mar";
monthnames[4] = "Apr";
monthnames[5] = "May";
monthnames[6] = "Jun";
monthnames[7] = "Jul";
monthnames[8] = "Aug";
monthnames[9] = "Sep";
monthnames[10] = "Oct";
monthnames[11] = "Nov";
monthnames[12] = "Dec";
if ("content" in entry) {
var postcontent = entry.content.$t;
} else if ("summary" in entry) {
var postcontent = entry.summary.$t;
} else
var postcontent = "";
var re = /<\S[^>]*>/g;
postcontent = postcontent.replace(re, "");
document.write(posttitle);
if (showpostdate == true) document.write(' - ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday);
if (showpostsummary == true) {
if (postcontent.length < numchars) {
document.write(postcontent);
} else {
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0,quoteEnd);
document.write(postcontent + '...' + readmorelink);
}
}
document.write('</li>');
}
document.write('</ul>');
}
</script>
<script>
var numposts = 7;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;
</script>
<script src="http://YOUR_BLOG.BLOGSPOT.COM/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp"></script><br/><span style="font-size: x-small;"><a href="http://bloggerstop.net">Blogger Widgets</a></span>
The code in blue is what you have to change (replace the entire code in blue with your blog's address)
And the code in red, is optional to change.
Auto-Scrolling [Text Or Image Slide Shows] Widgets For BlogSpot / Blogger Blogs
In case you have a lot of links in your blog's BlogRoll, or if you want to show all your favorite books list, but have limited space in the sidebar the this widget will be a great help for you !
You can put as many links/ listed items as you want in this widget, they will scrolling automatically unless the visitors hovers the mouse cursor on the widget, and as long as the cursor is placed on over the widget, the scrolling will be paused, and it will only resume after removing the mouse-cursor from the widget.
You can put as many links/ listed items as you want in this widget, they will scrolling automatically unless the visitors hovers the mouse cursor on the widget, and as long as the cursor is placed on over the widget, the scrolling will be paused, and it will only resume after removing the mouse-cursor from the widget.
It will be displayed like this:
| BlogRoll |
|---|
Here's the simple procedure of adding the widget to your blog:
Log in to Blogger
Go to Layout section, and click on "Add a Gadget", select as "HTML/JavaScript"
Now this is the format to enter the content in to the widget:
<div class="textwidget"><marquee direction="up" width="105" onmouseover="this.stop()" scrollamount="2" onmouseout="this.start()" height="200" align="left">LINE OR IMAGE 1LINE OR IMAGE 2LINE OR IMAGE 3LINE OR IMAGE 4LINE OR IMAGE 5
ETC.
</marquee></div>
NOTE: You can adjust or modify the colored content, so as to suit your choice or blog.
And You can put some linked/unLinked images too:
| Featured Posts |
|---|
Or you can even use a simpler version of this code:
<marquee behavior="scroll"direction="left"><img src="http://path_to_your_image.jpg/" alt="Title of image" height="Height of image" width="Width of image" /> <img src="http://path_to_your_image.jpg/" alt="Title of image" height="Height of image" width="Width of image" /> <img src="http://path_to_your_image.jpg/" alt="Title of image" height="Height of image" width="Width of image" /> <img src="http://path_to_your_image.jpg/" alt="Title of image" height="Height of image" width="Width of image" />
</marquee>
And it will be displayed like this:
Next Gen Computers 
500 GB Disks 
Flash Drives 
Mobile Phones How To Create A Multi-Tab Widget In BlogSpot/Blogger Blogs
*UPDATE: Three new multi tabbed widgets are added in this blog, the coding work is equally simple. So first have a look here: ads
Your post is really wonderful..thanks for posting...your post is very informative
i m glad i found ur blog.Not everyone can provide information with proper flow. Good post. I am going to save the URL and will definitely visit again. Keep it up.