To add a widget similar to these, follow these steps:
STEP1:
Log in to Blogger, go to "Layout" -> "Edit HTML"
STEP2:
Now find this code:
</head>
and immediately BEFORE/ABOVE it, paste this code:
<!--jquery-DD-Menu-Starts-->
<style type="text/css">
/* menu styles */
#jsddm
{ margin: 0;
padding: 0}
#jsddm li
{ float: left;
list-style: none;
font: 12px Tahoma, Arial}
#jsddm li a
{ display: block;
background: #324143; /*DARK-GREEN*/
padding: 5px 12px;
text-decoration: none;
border-right: 1px solid white;
width: 70px;
color: #EAFFED;
white-space: nowrap}
#jsddm li a:hover
{ background: #24313C}
#jsddm li ul
{ margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white}
#jsddm li ul li
{ float: none;
display: inline}
#jsddm li ul li a
{ width: auto;
background: #A9C251; /*LIGHT-GREEN*/
color: #24313C}
#jsddm li ul li a:hover
{ background: #8EA344}
</style>
<!-- script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
function jsddm_open()
{ jsddm_canceltimer();
jsddm_close();
ddmenuitem = $(this).find('ul').eq(0).css('visibility', 'visible');}
function jsddm_close()
{ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}
function jsddm_timer()
{ closetimer = window.setTimeout(jsddm_close, timeout);}
function jsddm_canceltimer()
{ if(closetimer)
{ window.clearTimeout(closetimer);
closetimer = null;}}
$(document).ready(function()
{ $('#jsddm > li').bind('mouseover', jsddm_open);
$('#jsddm > li').bind('mouseout', jsddm_timer);});
document.onclick = jsddm_close;
</script>
<!--jquery-DD-Menu-Stops-http://bloggerstop.net-->
Now before you save the template, make these changes in the code :
To get the HTML color codes, you can refer to this image:
http://homepages.ulb.ac.be/~dgonze/INFO/htmlcolors.png
STEP3:
and go to "Layout" -> "Page Elements"
and click on "Add a Gadget", select it as "HTML/JavaScript" type
and finally paste this code in to the new widget:
<!--BODY-CODE-->
<ul id="jsddm">
<li><a href="#">JavaScript</a>
<ul>
<li><a href="#">Drop Down Menu</a></li>
<li><a href="#">jQuery Plugin</a></li>
<li><a href="#">Ajax Navigation</a></li>
</ul>
</li>
<li><a href="#">Effect</a>
<ul>
<li><a href="#">Slide Effect</a></li>
<li><a href="#">Fade Effect</a></li>
<li><a href="#">Opacity Mode</a></li>
<li><a href="#">Drop Shadow</a></li>
<li><a href="#">Semitransparent</a></li>
</ul>
</li>
<li><a href="#">Navigation</a></li>
<li><a href="#">HTML/CSS</a></li>
<li><a href="http://bloggerstop.net">Blogger Help</a></li>
</ul>
And save the widget.
Showing posts with label Blogging tricks. Show all posts
Showing posts with label Blogging tricks. Show all posts
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:
 | |
|---|---|
| |
Presently 125x125 ad-spots are the most famous ad dimensions in the blogosphere. For both publishers and advertisers these dimensions are perfect to display text & pictures attractively and at the same time these ads do not interfere much with the blog's content.
So if you are too planning to sell some place on your blog with these 125x125 ad spots, then follow these simple instructions:
Although many bloggers place and control these ad-spots through CSS but I am using simple HTML tables, so as to keep the process simple and so that you can easily customize it later.
So if you are too planning to sell some place on your blog with these 125x125 ad spots, then follow these simple instructions:
Although many bloggers place and control these ad-spots through CSS but I am using simple HTML tables, so as to keep the process simple and so that you can easily customize it later.
STEP 1:
Log in to Blogger, go to "Layout", and click on "Add a Gadget" -> select it as "HTML/JavaScript".
Paste this code into the HTML box:
<center><table border="0"><tr>
<th width="126" height="126" align="center"><img src="http://i44.tinypic.com/2v97vv9.jpg"/></th>
<th width="126" height="126" align="center"><img src="http://i44.tinypic.com/2v97vv9.jpg"/></th>
</tr><tr>
<td width="126" height="126" align="center"><img src="http://i44.tinypic.com/2v97vv9.jpg"/></td>
<td width="126" height="126" align="center"><img src="http://i44.tinypic.com/2v97vv9.jpg"/></td>
</tr></table></center>
The code in blue represents "no. of columns" (2 blue lines=2 columns) and code in purple represents "no. of rows" (2 purple lines=2 rows).
STEP 2:
Save the widget.
STEP 3:
As soon as an advertiser approaches you, replace the links in RED in the code above with the new ads.
TIP: Instead of showing all 4 banners as "Advertise Here", it is better to use 2 or 3 of them to show any affiliate ads and keep the last one as "Advertise Here" banner.
You may use any of these "Advertise Here" banners:
 |  |
|---|---|
 |  |
This tutorial was requested by Mohammad Mustafa Ahmedzai from TNT-by-STC.
Here's a highly useful tool, through which you can easily embed almost any type of file anywhere in the web. Click on the logo below:
EmbedIt.in
As an example here's a .doc file (MS Word document) uploaded by me:
From their FAQ section, I considered these points as important for you:
What kinds of files can I embed?
- Pretty much any kind of document, image, or text file. To be specific:
* Documents: doc, docx, xls, xlsx, ppt, pptx, pdf, wpd, odt, ods, odp
* Images: png, jpg, gif, tiff, bmp, eps, ai
* Text: txt, rtf, csv, html
What's the largest file I can upload?
- 20 megabytes.
Can I make an embed private?
Nope.
Can other people embed my file?
Yes; since everything on embedit.in is open to the public, there's nothing stopping somebody else from copying and pasting the code from your webpage or blog.
If you think about it, there would be nothing stopping people from downloading your file and copying it to their website, anyway.
Can I download the file later?
You sure can. Use the button with the arrow on it: Download_button
*Update: Embedit.in has been taken over by Box.net
Box.net being an experienced file hosting service, now you may expect an uptime of 99.9% for Embedit.in too
The previous embeddable MP3 player discussed on BloggerStop had many limitations and was quite complicated in terms of customizing it.
So this tutorial will help you to easily select the music player of your choice and create your own playlist, with your selected uploaded songs.
For this tutorial you need to open accounts at two websites:
1. MyDataNest, and
2. MixPod.com (Account activation required through email, even for existing members)
Now upload songs and your MP3 files to your newly registered MyDataNest account,
And save all the DIRECT LINKS to your music files in a text file on your PC.
Then go to MixPod - Make MP3, and start creating your music player.
Click on Add URL
And enter the DIRECT LINK of the MP3, you got from MyDataNest.com
Similarly add more tracks to your player.
Select the perfect player for your blog:
You may change the color of the player, and other settings like autoplay etc. before saving your playlist.
Finally save your Playlist, copy the code, embed it in your blog & Let The Music Play
As already discussed here in this blog, social networking buttons widget is a must for blogs and moreover you must be very creative while adding these buttons.
To make your work easier, here's an attractive bookmarking widget, that by default partially hides the buttons and shows them only when a visitor hovers his mouse-cursor over the icons.
Screen-Shot:
So have a look on this widget, designed by Eight7Teen [Live Demo]
To add this widget to your blog, follow these instructions:
Step 1:
Log in to Blogger, go to Layout -> Edit HTML and mark the "Expand Widget Templates" box.
Step 2:
Now find (CTRL+F) this in the code:
</head>
And immediately BEFORE/ABOVE it, paste this code:
<!--HIDDEN-BOOKMARKS-STARTS-->
<style type='text/css'>
div.beauty-bookmarks {
height:54px;
background:url('http://i43.tinypic.com/2ueii3t.png') no-repeat left bottom;
position:relative;
width:540px;
}
div.beauty-bookmarks span.beauty-rightside {
width:17px;
height:54px;
background:url('http://i43.tinypic.com/2ueii3t.png') no-repeat right bottom;
position:absolute;
right:-17px;
}
div.beauty-bookmarks ul.socials {
margin:0 !important;
padding:0 !important;
position:absolute;
bottom:0;
left:10px;
}
div.beauty-bookmarks ul.socials li {
display:inline-block !important;
float:left !important;
list-style-type:none !important;
margin:0 !important;
height:29px !important;
width:48px !important;
cursor:pointer !important;
padding:0 !important;
}
div.beauty-bookmarks ul.socials a {
display:block !important;
width:48px !important;
height:29px !important;
font-size:0 !important;
color:transparent !important;
}
.beauty-furl, .beauty-furl:hover, .beauty-digg, .beauty-digg:hover, .beauty-reddit, .beauty-reddit:hover, .beauty-stumble, .beauty-stumble:hover, .beauty-delicious, .beauty-delicious:hover, .beauty-yahoo, .beauty-yahoo:hover, .beauty-blinklist, .beauty-blinklist:hover, .beauty-technorati, .beauty-technorati:hover, .beauty-facebook, .beauty-facebook:hover, .beauty-twitter, .beauty-twitter:hover, .beauty-myspace, .beauty-myspace:hover, .beauty-mixx, .beauty-mixx:hover, .beauty-script-style, .beauty-script-style:hover, .beauty-designfloat, .beauty-designfloat:hover, .beauty-syndicate, .beauty-syndicate:hover, .beauty-email, .beauty-email:hover {
background:url('http://i44.tinypic.com/1znbj83.png') no-repeat !important;
}
.beauty-furl {
background-position:-300px top !important;
}
.beauty-furl:hover {
background-position:-300px bottom !important;
}
.beauty-digg {
background-position:-500px top !important;
}
.beauty-digg:hover {
background-position:-500px bottom !important;
}
.beauty-reddit {
background-position:-100px top !important;
}
.beauty-reddit:hover {
background-position:-100px bottom !important;
}
.beauty-stumble {
background-position:-50px top !important;
}
.beauty-stumble:hover {
background-position:-50px bottom !important;
}
.beauty-delicious {
background-position:left top !important;
}
.beauty-delicious:hover {
background-position:left bottom !important;
}
.beauty-yahoo {
background-position:-650px top !important;
}
.beauty-yahoo:hover {
background-position:-650px bottom !important;
}
.beauty-blinklist {
background-position:-600px top !important;
}
.beauty-blinklist:hover {
background-position:-600px bottom !important;
}
.beauty-technorati {
background-position:-700px top !important;
}
.beauty-technorati:hover {
background-position:-700px bottom !important;
}
.beauty-myspace {
background-position:-200px top !important;
}
.beauty-myspace:hover {
background-position:-200px bottom !important;
}
.beauty-twitter {
background-position:-350px top !important;
}
.beauty-twitter:hover {
background-position:-350px bottom !important;
}
.beauty-facebook {
background-position:-450px top !important;
}
.beauty-facebook:hover {
background-position:-450px bottom !important;
}
.beauty-mixx {
background-position:-250px top !important;
}
.beauty-mixx:hover {
background-position:-250px bottom !important;
}
.beauty-script-style {
background-position:-400px top !important;
}
.beauty-script-style:hover {
background-position:-400px bottom !important;
}
.beauty-designfloat {
background-position:-550px top !important;
}
.beauty-designfloat:hover {
background-position:-550px bottom !important;
}
.beauty-syndicate {
background-position:-150px top !important;
}
.beauty-syndicate:hover {
background-position:-150px bottom !important;
}
.beauty-email {
background-position:-753px top !important;
}
.beauty-email:hover {
background-position:-753px bottom !important;
}
</style>
<!--HIDDEN-BOOKMARKS-STOPS-http://bloggerstop.net-->
NOTE: To show the phrase "Sharing Is Caring" instead of "Sharing Is Sexy", edit the above code like this:
Replace the text highlighted in BLUE color, i.e. instead of left bottom and right bottom use left top and right top.
Step 3:
Now find this in the code:
<data:post.body/>
And BELOW/AFTER that, paste this code:
<b:if cond='data:blog.pageType == "item"'>
<div class='beauty-bookmarks'>
<ul class='socials'>
<li class='beauty-delicious'><a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='beauty-digg'><a expr:href='" http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='beauty-technorati'><a expr:href='" http://technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='beauty-reddit'><a expr:href='" http://www.reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='beauty-stumble'><a expr:href='" http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='beauty-designfloat'><a expr:href='"http://www.designfloat.com/submit.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='beauty-facebook'><a expr:href='" http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='beauty-twitter'><a expr:href='"http://twitter.com/home/?status=Chk Out-" + data:post.title + " " + data:post.url' target='_blank'/></li>
<li class='beauty-furl'><a expr:href='" http://www.furl.net/storeIt.jsp?u=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='beauty-syndicate'><a href='http://feeds.feedburner.com/bloggerstopnet' title='Subscribe to RSS'/></li>
<li class='beauty-email'><a expr:href='" mailto:?subject=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
</ul>
<span class='beauty-rightside'/></div>
</b:if>
You may of course remove any button code, if you do not want to show it.
Now save the template.
That's it. Now just write some good posts worth bookmarking ;)
I think better than words these images will explain you, what this hack/widget is all about:
Sliding Side-Menu in it's normal position
Sliding Side-Menu expanded on mouse hover
And to see the widget in action, click on this link: Dark Wooden Template
Now if you are impressed with the widget and want to add a similar widget to your blog, then simply follow these steps:
1. Download these two javascript files from DynamicDrive:
ssm.js, and
ssmItems.js [LINK to DynamicDrive]
2. Now open the second file (ssmItems.js) with note/text pad, and edit it :
<!--
/*
Configure menu styles below
NOTE: To edit the link colors, go to the STYLE tags and edit the ssm2Items colors
*/
YOffset=150; // no quotes!!
XOffset=0;
staticYOffset=30; // no quotes!!
slideSpeed=20 // no quotes!!
waitTime=100; // no quotes!! this sets the time the menu stays out for after the mouse goes off it.
menuBGColor="black";
menuIsStatic="yes"; //this sets whether menu should stay static on the screen
menuWidth=150; // Must be a multiple of 10! no quotes!!
menuCols=2;
hdrFontFamily="verdana";
hdrFontSize="2";
hdrFontColor="white";
hdrBGColor="#170088";
hdrAlign="left";
hdrVAlign="center";
hdrHeight="15";
linkFontFamily="Verdana";
linkFontSize="2";
linkBGColor="white"; //White color behind links
linkOverBGColor="#FFFF99"; //Blue Color Behind Menu and External Links
linkTarget="_top";
linkAlign="Left";
barBGColor="#444444"; //Gray color behind Side Menu
barFontFamily="Verdana";
barFontSize="2";
barFontColor="white";
barVAlign="center";
barWidth=20; // no quotes!!
barText="SIDE MENU"; // <IMG> tag supported. Put exact html for an image to show.
///////////////////////////
// ssmItems[...]=[name, link, target, colspan, endrow?] - leave 'link' and 'target' blank to make a headerssmItems[0]=["Menu"] //create headerssmItems[1]=["BloggerStop", "http://bloggerstop.net", ""]ssmItems[2]=["Contact Us", "http://bloggerstop.net/2008/09/contact-us.html",""]ssmItems[3]=["Earn Money", "http://join-ziddu.co.cc/", ""]ssmItems[4]=["Cheap Domain", "http://main.bloggerstop.net/contests/1and1/1and1.html", "_new"]ssmItems[5]=["Blogger Templates", "http://bloggerstop.net/2008/09/blogger-help-free-blogger-templates.html", ""]ssmItems[6]=["Blogger Help", "http://bloggerstop.net/2008/09/blogger-help.html", ""]ssmItems[7]=["FAQ", "http://any_FAQ_PAGE", "", 1, "no"] //create two column rowssmItems[8]=["Email", "http://Your_Email_Add", "",1]ssmItems[9]=["External Links", "", ""] //create headerssmItems[10]=["JavaScript Kit", "http://www.javascriptkit.com", ""]ssmItems[11]=["Gallery", "http://gallery.main.bloggerstop.net/image1.htm", ""]ssmItems[12]=["Reviews", "http://review-the-web.blogspot.com", ""]
buildMenu();
//-->
Now change everything in RED, GREEN and BLUE as per your requirements.
The code shown in purple color are comments, you can change them to modify the background colors.
Now after editing, save the file.
3. Now upload these two files to MyDataNest.com (You have to register for free as a member to upload files).
4. Then copy the direct links to these files.
5. Finally change the links (in red color) in the following code with your new links from MyDataNest.com
<!--SIDE-MENU-STARTS-->
<STYLE>
<!--
A.ssmItems:link {color:black;text-decoration:none;}
A.ssmItems:hover {color:black;text-decoration:none;}
A.ssmItems:active {color:black;text-decoration:none;}
A.ssmItems:visited {color:black;text-decoration:none;}
//-->
</STYLE>
<SCRIPT SRC='http://dsai.588.googlepages.com/ssm.js' language='JavaScript1.2'>
//Dynamic-FX slide in menu v6.5 (By maXimus, maximus@nsimail.com)
//Site: http://maximus.ravecore.com/
//For full source, and 100's more DHTML scripts, visit http://www.dynamicdrive.com
</SCRIPT>
<SCRIPT SRC='http://dsai.588.googlepages.com/ssmItems.js' language='JavaScript1.2'/>
<!--SIDE-MENU-STOPS-->
Go to your blog template (Log in to Blogger -> Go to Layout -> Edit HTML), and find (CTRL+F) this code:
</head>
And paste the code (obtained from step 5) just BEFORE/ABOVE it.
Credits: DynamicDrive and MaXimus
Feel free to ask your doubts...
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.
The previous widget for showing Popular posts (most commented), has been stopped working, so here's a new code for the widget.
Steps to follow:
Log in to Blogger
Go to Layout -> Add a Gadget -> HTML/JavaScript
Now copy and paste this code in to the widget:
Widget Style #1
<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ul style="text-transform: capitalize;">');
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "'";
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write('</ul>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=28a6afad7c6ba1288c1b738277e42385&url=http%3A%2F%2FYOUR_BLOG_ADDRESS_HERE_WITHOUT_http://&num=10" type="text/javascript"></script>
<a href="http://bloggerstop.net" target="_blank"><span style="font-size: xx-small;">Popular Posts Widget</span></a>
NOTE: REPLACE everything in RED color in the code above with your blog's address without typing http://
The above code displays 10 posts, you can change it by editing the number being displayed in blue !
The above widget code, displays the links/titles like this:
Post one (18)
Post two (14) etc.
If you want to display them like this:
Post one (18 comments)
Post two (14 comments),
then use this code :
Widget Style #2
<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ol style="text-transform: capitalize;">');
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "'";
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write('</ol>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=ML4p0UfW3RGgS7iN1JzWFw&url=http%3A%2F%2FYOUR_BLOG_ADDRESS_WITHOUT_http://&num=10" type="text/javascript"></script>
<span style="font-size: 80%">Widget by <a href="http://www.bloggerstop.net">Blogger Widgets </a></span>
And in case, you want to display the popular posts without the number of comments (as requested by Ben), use this code:
Widget Style #3
<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ol style="text-transform: capitalize;">');
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "'";
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write('</ol>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=1a1c6e4e6d4f148e3650fda46910e15f&url=http%3A%2F%2FYOUR_BLOG_ADDRESS_WITHOUT_http://&num=10" type="text/javascript"></script>
<span style="font-size: 80%">Widget by <a href="http://www.bloggerstop.net">Blogger Widgets </a></span>
P.S. : Please do not remove the footer link...
To add Related posts/Similar posts widget below every post on your blog, follow these simple steps:
First of all download this file:
relatedPosts_ForBlogger2.js
Zipped File
And upload the file (relatedPosts_ForBlogger2.js) to SigMirror.com or HotLinkFiles.com to get a DIRECT LINK to that file.
1. Go to Blogger.com
2. Now go to "Layout", then to "Edit HTML" section
3. Back up your present template, by "Downloading it"
4. Now click on "Expand widget templates"
5. Find this code: </head>
Now, just before this code paste this
<!--RelatedPostsStarts-->
<style>
#related-posts {
float : left;
width : 540px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
color : #940f04;
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
color : #054474;
font-size : 11px;
text-decoration : none;
}
#related-posts a:hover {
color : #054474;
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url("http://www.gigaimage.com/images/brrl1rtaziisu0yj6kj6.gif") no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 16px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}
</style>
<script src='http://sigmirror.com/............/relatedPosts_ForBlogger2.js' type='text/javascript'/><!--RelatedPostsStops-->
Replace the link in RED with the DIRECT LINK, you got in the previous step.
6. Now search for this code line:
<data:post.body/>
And after this, paste these code lines
<!--RELATED-POSTS-STARTS--><b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<font face='Arial' size='3'><b>Related Posts: </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != "true"'>,</b:if><b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script></div></b:if><!--RELATED-POSTS-STOPS-->
To change the number of similar/related posts to be displayed, change the code max-results=xx
Finally save your template, and you will see related posts after all your posts(Remember to add labels after your posts, during publishing them)
The last two drop down menu tutorials on this blog use background images in the menu-tabs, and hence it is not so easy to customize them for your blogs. So here's a new widget code, in which you can easily change the colors of the menu so as to match with your blog.
Live demo can be seen here:
Demo1: ClubVista Blogger Template (In Green)
Demo2: JavaScript-Array (In Blue) (Widget author's blog)
To add a widget similar to these, follow these steps:
STEP1:
Log in to Blogger, go to "Layout" -> "Edit HTML"
STEP2:
Now find this code:
</head>
and immediately BEFORE/ABOVE it, paste this code:
<!--jquery-DD-Menu-Starts-->
<style type="text/css">
/* menu styles */
#jsddm
{ margin: 0;
padding: 0}
#jsddm li
{ float: left;
list-style: none;
font: 12px Tahoma, Arial}
#jsddm li a
{ display: block;
background: #324143; /*DARK-GREEN*/
padding: 5px 12px;
text-decoration: none;
border-right: 1px solid white;
width: 70px;
color: #EAFFED;
white-space: nowrap}
#jsddm li a:hover
{ background: #24313C}
#jsddm li ul
{ margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white}
#jsddm li ul li
{ float: none;
display: inline}
#jsddm li ul li a
{ width: auto;
background: #A9C251; /*LIGHT-GREEN*/
color: #24313C}
#jsddm li ul li a:hover
{ background: #8EA344}
</style>
<!-- script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
function jsddm_open()
{ jsddm_canceltimer();
jsddm_close();
ddmenuitem = $(this).find('ul').eq(0).css('visibility', 'visible');}
function jsddm_close()
{ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}
function jsddm_timer()
{ closetimer = window.setTimeout(jsddm_close, timeout);}
function jsddm_canceltimer()
{ if(closetimer)
{ window.clearTimeout(closetimer);
closetimer = null;}}
$(document).ready(function()
{ $('#jsddm > li').bind('mouseover', jsddm_open);
$('#jsddm > li').bind('mouseout', jsddm_timer);});
document.onclick = jsddm_close;
</script>
<!--jquery-DD-Menu-Stops-http://bloggerstop.net-->
Now before you save the template, make these changes in the code :
To get the HTML color codes, you can refer to this image:
http://homepages.ulb.ac.be/~dgonze/INFO/htmlcolors.png
STEP3:
and go to "Layout" -> "Page Elements"
and click on "Add a Gadget", select it as "HTML/JavaScript" type
and finally paste this code in to the new widget:
<!--BODY-CODE-->
<ul id="jsddm">
<li><a href="#">JavaScript</a>
<ul>
<li><a href="#">Drop Down Menu</a></li>
<li><a href="#">jQuery Plugin</a></li>
<li><a href="#">Ajax Navigation</a></li>
</ul>
</li>
<li><a href="#">Effect</a>
<ul>
<li><a href="#">Slide Effect</a></li>
<li><a href="#">Fade Effect</a></li>
<li><a href="#">Opacity Mode</a></li>
<li><a href="#">Drop Shadow</a></li>
<li><a href="#">Semitransparent</a></li>
</ul>
</li>
<li><a href="#">Navigation</a></li>
<li><a href="#">HTML/CSS</a></li>
<li><a href="http://bloggerstop.net">Blogger Help</a></li>
</ul>
And save the widget.
Once you have seen the picture above [working demo here], I hope there's nothing more to explain what exactly are you going to add to your blog, after you implement this hack.
The process is quite easy, and the overall widget is completely editable, so that you can tweak it even more. But remember this has been created and copyrighted by STYLED MENUS.
Simply log in to Blogger, go to "Layout" and "Add a Gadget" of HTML/JavaScript type.
Simply log in to Blogger, go to "Layout" and "Add a Gadget" of HTML/JavaScript type.
Then in the content, paste this code:
<center><div id="menu"><ul><li><a class="current" href="http://bloggerstop.net">home</a></li><li><a href="http://about.com">about us</a></li><li><a href="http://google.com">Google</a></li><li><a href="http://wikipedia.com">Wikipedia</a></li><li><a href="http://bloggerstop.net/2008/09/contact-us.html">contact us</a></li></ul></div></center>
<style>
/* --------------------------
AUTHOR : STYLED MENUS
URL : http://www.styledmenus.com
Copyrights by STYLED MENUS
Widget From http://bloggerstop.Net
----------------------------*/
*{
margin:0;
padding:0;
}
#menu{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW9naaMMMiFSeXiVz93-B-jJgtOIG3_BffEWYhrrcC0mL5uVAK-Y5xQhU9MaOsQjDF9RLm6C0niWktf9I9fHz89OramIjYvHBwVsKAGIIuIG-eInN1Xoyy_0Dsx3td3oyzrMv2XW4aoO0/s1600/menu_026_bg.jpg) no-repeat;
width:172px;
height:191px;
padding:15px;
}
#menu ul{
list-style:none;
padding:0 0 0 8px;
}
#menu li{
list-style:none;
display:block;
padding:10px 0;
}
#menu li a{
list-style:none;
display:block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP2PlSNjmaVXrBQc0lz9s0J_9mtZuzJTGURBlnmXBq1q4H3aLq14HtFkqP7TlbEJ2UixuPgOf651NCSn3JX9sLLJyqqB1DQiLedYTsk5OdmjIlz4SfFOxSUTWftSOCK7Kc1dbs9JTxWnY/s1600/menu_026_b.gif) no-repeat left center;
color:#ffe991;
font-weight:bold;
text-transform:uppercase;
font-size:11px;
line-height:1.2em;
text-decoration:none;
padding:0 5px 0 25px;
}
#menu li a:hover{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZGbjuGstwjTsxCXPPKAMHtzMdPXyyGZHYfOyv6TTtu-7-JIsA_sdLpNdDzpVajSPmQyFLsKr9VeRxqaId6rrOpSQUAdYEnkYFROr44N9Zzmw3HLYmdFPHyBDyohlCWpAnWl2uToVVP0s/s1600/menu_026_h.gif) no-repeat left center;
color:#fff;
text-decoration:none;
}
#menu li .current{
list-style:none;
display:block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZGbjuGstwjTsxCXPPKAMHtzMdPXyyGZHYfOyv6TTtu-7-JIsA_sdLpNdDzpVajSPmQyFLsKr9VeRxqaId6rrOpSQUAdYEnkYFROr44N9Zzmw3HLYmdFPHyBDyohlCWpAnWl2uToVVP0s/s1600/menu_026_h.gif) no-repeat left center;
color:#fff;
font-weight:bold;
text-transform:uppercase;
font-size:11px;
text-decoration:none;
padding:0 5px 0 25px;
}
#menu li a.current, #menu li a:hover.current{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZGbjuGstwjTsxCXPPKAMHtzMdPXyyGZHYfOyv6TTtu-7-JIsA_sdLpNdDzpVajSPmQyFLsKr9VeRxqaId6rrOpSQUAdYEnkYFROr44N9Zzmw3HLYmdFPHyBDyohlCWpAnWl2uToVVP0s/s1600/menu_026_h.gif) no-repeat left center;
color:#fff;
text-decoration:none;
}
</style>
The code in red color, is what you have to edit. And the code lines in blue color are the images being used in this widget, so you can use some other background image too (of similar dimensions) in case the above image is not looking good with your template.
