1 Add navigation or drop down menu in blogger

Here is an easy tutorial to add Navigation Menu or Drop Down Menu in Blogger. With this navigation Menu widget you can display most important links or categories in drop Down Menu format. This navigation Menu is very tiny and you can display as many links you want.

Let us see how to add this Navigation menu widget in Blogger :

Here is the Default code of Navigation menu :

<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1 name=menu>

<option value=0 selected> Type your Navigation Menu Title Here! </option>
<option value=" Url of your Link here "> Title of your link </option> </select></form>

in this above code , you need to edit the text in red to add links .

The text in green color is meant to open links in new window. If you want the links to be opened in same window then replace the text in green to this blank . ( that is delete _ )

if you want to add more links then add the last three lines in violet repeatedly as many times you want.

Look At My code below so that you can get an idea :

<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1 name=menu>

<option>- Blogger Accessories- </option>

<!-- change the links with your own -->

<option value="http://bloggeracs.blogspot.com/2008/07/jumong-three-column-blogger-template.html">Jumong Blogger Template</option>

<option value="http://bloggeracs.blogspot.com/2008/07/show-date-before-each-post-in-blogger.html">Show Date before each post</option>

<option value="http://bloggeracs.blogspot.com/2008/07/related-posts-widget-for-blogger.html">Related Posts Widget</option>

<option value="http://bloggeracs.blogspot.com/2008/07/hide-navigation-bar-in-blogger.html">Hide Navigation menu bar in blogger</option>

</select></form>

the result is :

- Blogger Accessories- Jumong Blogger TemplateShow Date before each postRelated Posts WidgetHide Navigation menu bar in blogger

How to Add this Navigation menu / Drop down Menu To my blog ?

It's very simple . First edit the code according to your wish and copy the code .

* Go to Layout section of your template .

* Click Add PageElement tab in sidebar

* Select HTML/JAVASCRIPT subtab

* Paste the Navigation Menu code you copied before there and save .

that's it now you can see a beautiful Navigation Menu in your blog.

See you soon with a new hack .

6 Related Posts Widget for Blogger

Related Posts Widget for blogger is what everybody is looking for, In Most of the sites we will find only javascript code and HTML tag for related posts widget. After adding the code to your blog , you can see just a list of related posts without any arrows or style css. So i wanted to embed both in order to make the widget links looks beautiful.

First let's see the usual javascript and HTML Tag. Step 1 : Add the following Javascript code below ]]></b:skin> , thats between ]]></b:skin> and </head> .

<script type="'text/javascript'">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length &amp;&amp; i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>

Step 2 : Check expand widgets and search for <b:loop values='data:post.labels' var='label'> , Now copy and paste the following code in blue between <b:loop values='data:post.labels' var='label'> and </b:loop>

<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/> </b:if> </b:loop>

customize the text in green to show as many links you want.

Step 3 : Now paste the following script the code just below <p><data:post.body/></p> .

code :

<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script>

Thats it , now look at the page , it will look like this

You can see there is no styling , I wanted to make it look beautiful . So i made the following changes . Both step 1 and 2 are same , just in step three make some changes .

<div id='related-posts'>
<h2>Other Recommended Posts on This Category</h2>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script><
/div>

now its time to add css part for this div section .

/*-- (Related posts widget -below posts) --*/
#related-posts {
float:center;
width:450px;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts .widget{
padding-left:6px;
margin-bottom:10px;
background-color:#fff
}
#related-posts .widget h2, #related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: #0000FF;
font-family: Georgia, "Times New Roman", Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:#A10000;
}
#related-posts a:hover{
color:#A10000
}
#related-posts ul{
list-style-type:none;
margin:0 0 0px 0;
padding:0px;
text-decoration:bold;
font-size:15px;
text-color:#000000
}
#related-posts ul li{
background:transparent url(http://img152.imageshack.us/img152/3756/bulletzc2.gif) no-repeat ;
display:block;
list-style-type:none;
margin-bottom: 13px;
padding-left: 30px;
padding-top:0px;}

Now look at the page again ,

You can even customize the link color , arrow style , font-size , etc I hope you liked this related posts widget , see you soon with another widget or hack.

1 Star Ratings or Voting Widget for Blogger

One of the disadvantages for authors who use blogger is that there is no rating/voting widget . Because of that authors don't know how much the visitors liked their posts. After a longtime , now draft.blogger has found a trick . They recently posted that bloggers can now add Ratings widget on their blog through draft blogger .

Let us see how to add ratings widget for Blogger:

Step 1 :

In layout section , under body layout click edit . A new pop-up window will open like this , here you need to check the Show Star Ratings

If you are using template provided by blogger then you can see the widget after doing step 1. If you are using some other custom template then you need to add the following code below <div class='post-footer-line post-footer-line-1'> or similar .

<span class='star-ratings'> <b:if cond='data:top.showStars'> <div
expr:g:background-color='data:backgroundColor' expr:g:text-color='data:textColor' expr:g:url='data:post.absoluteUrl' g:height='42' g:type='RatingPanel' g:width='180'/> </b:if> </span>

by adding this code there , the star ratings widget will appear below each post. If you want to add it below the post title , then add the above code immediately below <div class='post-header-line-1'/>let's see how it looks ,

you can also add that code anywhere you want. if you want to add style CSS like padding , color , etc add <div style='padding-left:50px; and other CSS part '>

star- ratings code

</div>Thats it , hope you guys will like this new star ratings widget. See you soon with a new widget .For future updates , subscribe to my blog

3 Social Bookmarking widget for blogger

On all Blogger's mind there will be just one question , How to drive traffic to our blog ?
We need to have quality content and backlinks to drive traffic to our blog and occupy first place on google search engines. First one Quality content is in hands of the admin who writes the post. he need to put the main keywords for the article in the post . But for the second one , the author can't just submit each and every post to bookmarking sites . Its very time consuming. But It's a very effective way of driving traffic to our blog. We need a widget for blogger so that visitors/readers can submit our article to bookmarking sites.

This Social bookmarking widget contains Post Link submission to major bookmarking sites like Digg , technorati , Blinklist , Del.icio.us , Furl , Stumble Upon , Reddit , yahoo , Simpy and Spurl .
I hope those are the most famous social bookmarking sites with higher pagerank and traffic .

Just Follow this simple steps to add social bookmarking sites widget to blogger :

Step 1 :

Log in to your Blogger Account and navigate to Layout Section. Then go to Edit HTML Page and check the Expand Widgets box.

Step 2 :

Now search this code : <p><data:post.body/></p>


Step 3 :

Copy and paste the below code immediately below red text.

<p><data:post.body/></p>
<!-- Start of social bookmarks. Check http://bloggeraccessories.blogspot.com/ for updates -->
<span class='post-author' style='font-size: 95%;'><br/>
Add Post To: |
<a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'>Digg</a>|
<a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url' target='_blank'>Technorati</a>|
<a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'>del.icio.us</a>|
<a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'>Stumbleupon</a>|
<a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'>Reddit</a>|
<a expr:href='&quot;http://www.blinklist.com/index.php?Action=Blink/addblink.php&amp;Url=&quot; + data:post.url + &quot;&amp;Title=&quot; + data:post.title' target='_blank'>BlinkList</a>|
<a expr:href='&quot;http://www.furl.net/storeIt.jsp?t=&quot; + data:post.title + &quot;&amp;u=&quot; + data:post.url' target='_blank'>Furl</a>|
<a expr:href='&quot;http://www.spurl.net/spurl.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'>Spurl</a>|
<a expr:href='&quot;http://myweb2.search.yahoo.com/myresults/bookmarklet?t=&quot; + data:post.title + &quot;&amp;u=&quot; + data:post.url' target='_blank'>Yahoo</a>|
<a expr:href='&quot;http://www.simpy.com/simpy/LinkAdd.do?href=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'>Simpy</a>|
<br/></span>
<!-- End of social bookmarks -->

that's it Now you can see social Bookmarking sites widget to your blog.

I hope you like this widget , see you soon with a new hack . please tell us your suggestion about this widget.