How To Add jQuery Horizontal Sub Navigation to Blogger

1.Login to your blogger dashboard–> layout- -> Edit HTML

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </head> tag .

<style type='text/css'>

ul#topnav {
margin: 0; padding: 0;
float: left;
width: 100%;
list-style: none;
position: relative;
font-size: 1.2em;
background: #383838;
}
ul#topnav li {
float: left;
margin: 0; padding: 0;
border-right: 1px solid #fff;
}
ul#topnav li a {
padding: 10px 15px;
display: block;
color: #f0f0f0;
text-decoration: none;
}
ul#topnav li:hover { background: #1376c9 url() repeat-x; }
ul#topnav li span {
float: left;
padding: 15px 0;
position: absolute;
left: 0; top:35px;
display: none;
width: 100%;
background: #1376c9;
color: #fff;
-moz-border-radius-bottomright: 5px;
-khtml-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-khtml-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
}
ul#topnav li:hover span { display: block; }
ul#topnav li span a { display: inline; }
ul#topnav li span a:hover {text-decoration: underline;}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {

$(&quot;ul#topnav li&quot;).hover(function() { //Hover over event on list item
$(this).css({ 'background' : '#1376c9 url() repeat-x'}); //Add background color + image on hovered list item
$(this).find(&quot;span&quot;).show(); //Show the subnav
} , function() { //on hover out...
$(this).css({ 'background' : 'none'}); //Ditch the background
$(this).find(&quot;span&quot;).hide(); //Hide the subnav
});

});
</script>

Note:
You can change width,height,color,… as your choice.

4.Now go to Layout–>Page Element and click on “Add a gadget”.

5.Select “html/java script” and add one of code below and click save.

<ul id="topnav">

<li><a href="#">Home</a></li>
<li>
<a href="#">Blogger</a>
<span>
<a href="#">Widgets</a> |
<a href="#">Tip And Tricks</a> |
<a href="#">Basic</a>
</span>
</li>
<li>
<a href="#">Tutorials</a>
<span>
<a href="#">HTML</a> |
<a href="#">Java Script</a> |
<a href="#">CSS</a>
<a href="#">jQuery</a>
<a href="#">MooTools</a>
</span>
</li>
<li>
<a href="#">Templates</a>
<span>
<a href="#">1 Column</a> |
<a href="#">2 Column</a> |
<a href="#">3 Column</a> |
<a href="#">4 Column</a> |
<a href="#">Premium</a>
</span>
</li>
<li><a href="#">Subscribe</a></li>
<li><a href="#">Advertise</a></li>
<li><a href="#">Contact</a></li>

</ul>

It will look like this:

How To Add jQuery 3D Horizontal Link List to Blogger

1.Login to your blogger dashboard–> layout- -> Edit HTML

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </head> tag .

<style type='text/css'>
ul#topnav {
margin: 10px 0 20px;
padding: 0;
list-style: none;
font-size: 1.1em;
clear: both;
float: left;
width: 99%;
}
ul#topnav li{
margin: 0;
padding: 0;
overflow: hidden;
float: left;
height:40px;
}
ul#topnav a, ul#topnav span {
padding: 10px 20px;
float: left;
text-decoration: none;
color: #fff;
text-transform: uppercase;
clear: both;
height: 20px;
line-height: 20px;
background: #1d1d1d;
}
ul#topnav a { color: #7bc441; }
ul#topnav span {
display: none;
}

ul#topnav.v2 span{
background: url(https://bloggertipandtricks.files.wordpress.com/2009/10/a_bg.gif) repeat-x left top;
}
ul#topnav.v2 a{
color: #555;
background: url(https://bloggertipandtricks.files.wordpress.com/2009/10/a_bg.gif) repeat-x left bottom;
}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>


$(document).ready(function() {


$(&quot;#topnav li&quot;).prepend(&quot;<span/>&quot;); //Throws an empty span tag right before the a tag

$(&quot;#topnav li&quot;).each(function() { //For each list item...
var linkText = $(this).find(&quot;a&quot;).html(); //Find the text inside of the a tag
$(this).find(&quot;span&quot;).show().html(linkText); //Add the text in the span tag
});

$(&quot;#topnav li&quot;).hover(function() { //On hover...
$(this).find(&quot;span&quot;).stop().animate({
marginTop: &quot;-40&quot; //Find the span tag and move it up 40 pixels
}, 250);
} , function() { //On hover out...
$(this).find(&quot;span&quot;).stop().animate({
marginTop: &quot;0&quot; //Move the span back to its original state (0px)
}, 250);
});


});
</script>

Note:
Please host image yourself.
You can change width,height,color,… as your choice.

4.Now go to Layout–>Page Element and click on “Add a gadget”.

5.Select “html/java script” and add one of code below and click save.

Code 1:

<div class="container">

<ul id="topnav" class="v2">

<li><a href="http://bloggertipandtrick.blogspot.com">Home</a></li>
<li><a href="http://bloggertipandtrick.blogspot.com/search?max-results=999">TOC</a></li>
<li><a href="http://www.bloggertipandtrick.blogspot.com/search/label/widget?max-results=1000">Widgets</a></li>
<li><a href="http://bloggertipandtrick.blogspot.com/search/label/Templates?max-results=1000">Templates</a></li>
<li><a href="http://bloggertipandtrick.blogspot.com/search/label/jQuery?max-results=1000">jQuery</a></li>
<li><a href="http://bloggertipandtrick.blogspot.com/2009/01/blogger-tips-and-tricks-ads-details.html">Advertise</a></li>
<li><a href="http://bloggertipandtrick.blogspot.com/2009/01/contact-me.html">Contact</a></li>

</ul>

</div>

Result:

Code 2:

<div class="container">

<ul id="topnav">

<li><a href="http://bloggertipandtrick.blogspot.com">Home</a></li>
<li><a href="http://bloggertipandtrick.blogspot.com/search?max-results=999">TOC</a></li>
<li><a href="http://www.bloggertipandtrick.blogspot.com/search/label/widget?max-results=1000">Widgets</a></li>
<li><a href="http://bloggertipandtrick.blogspot.com/search/label/Templates?max-results=1000">Templates</a></li>
<li><a href="http://bloggertipandtrick.blogspot.com/search/label/jQuery?max-results=1000">jQuery</a></li>
<li><a href="http://bloggertipandtrick.blogspot.com/2009/01/blogger-tips-and-tricks-ads-details.html">Advertise</a></li>
<li><a href="http://bloggertipandtrick.blogspot.com/2009/01/contact-me.html">Contact</a></li>

</ul>

</div>

Result:

How To Add jQuery�s hover() Method To Blogger

1.Login to your blogger dashboard–> layout- -> Edit HTML

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </head> tag .

<script type='text/javascript'>
window.onload = function() {
var paras = document.getElementById('content').getElementsByTagName('p');
if(paras.length) {
paras[0].className = paras[0].className + ' intro';
}
};
</script> <style type='text/css'>
#hover-me  { padding:50px 100px; border:2px solid #fc0; background:#d3ea74; }
</style>
<script src='http://ajax.googleapis.com/ajax/libs/mootools/1.2.3/mootools.js' type='text/javascript'/>
<script type='text/javascript'>

/* usage */
window.addEvent('domready',function() {

/* hover! */
Element.implement({
 'hover': function(fn1,fn2) {
  this.addEvents({
   'mouseenter': function(e) {
    fn1.attempt(e,this);
   },
   'mouseleave': function(e) {
    fn2.attempt(e,this);
   }
  })
 }
});

$('hover-me').hover(function(e) {
 this.fade('out');
}, function(e) {
 this.fade('in');
});
});

</script>

4.Whenever you have to write some codes or text,write it between the following tags :

<div id="hover-me">

Your Text/Code

</div>

View Demo

How To Add MooTools Link Fading To Blogger

1.Login to your blogger dashboard–> layout- -> Edit HTML

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </head> tag .

<script type='text/javascript'>
window.onload = function() {
var paras = document.getElementById('content').getElementsByTagName('p');
if(paras.length) {
paras[0].className = paras[0].className + ' intro';
}
};
</script> <style type='text/css'>
#link1  { color:#f00; }
#link2  { color:#00f; }
#link3  { color:#000; }
</style>
<script src='http://ajax.googleapis.com/ajax/libs/mootools/1.2.3/mootools.js' type='text/javascript'/>
<script type='text/javascript'>
window.addEvent('domready',function() {
$each($('.fade'), function(el) {
 var original = el.getStyle('color');
 var morph = new Fx.Morph(el,{ 'duration':'300', 'link':'cancel' });
 el.addEvents({
  'mouseenter' : function() { morph.start({ 'color':'#ffffff' }) },
  'mouseleave' : function() { morph.start({ 'color': original }) }
 });
});
});
</script>

4.Click on “save Template”.

5.Now when you add Links add it as below example

<a id="link1" href="javascript:;" class="fade">Link Fade 1</a>

<a id="link2" href="javascript:;" class="fade">Link Fade 2</a>

<a id="link3" href="javascript:;" class="fade">Link Fade 3</a>

View Demo

How To Add jQuery Scroll To Top Link To Blogger

1.Login to your blogger dashboard–> layout- -> Edit HTML

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </head> tag.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>

//<![CDATA[

/*
Author: mg12
Update: 2008/05/05
Author URI: http://www.neoease.com/
*/
(function() {

function $(id) {
return document.getElementById(id);
}

function setStyleDisplay(id, status) {
$(id).style.display = status;
}

function goTop(a, t) {
a = a || 0.1;
t = t || 16;

var x1 = 0;
var y1 = 0;
var x2 = 0;
var y2 = 0;
var x3 = 0;
var y3 = 0;

if (document.documentElement) {
 x1 = document.documentElement.scrollLeft || 0;
 y1 = document.documentElement.scrollTop || 0;
}
if (document.body) {
 x2 = document.body.scrollLeft || 0;
 y2 = document.body.scrollTop || 0;
}
var x3 = window.scrollX || 0;
var y3 = window.scrollY || 0;

var x = Math.max(x1, Math.max(x2, x3));
var y = Math.max(y1, Math.max(y2, y3));

var speed = 1 + a;
window.scrollTo(Math.floor(x / speed), Math.floor(y / speed));
if(x > 0 || y > 0) {
 var f = "MGJS.goTop(" + a + ", " + t + ")";
 window.setTimeout(f, t);
}
}

function switchTab(showPanels, hidePanels, activeTab, activeClass, fadeTab, fadeClass) {
$(activeTab).className = activeClass;
$(fadeTab).className = fadeClass;

var panel, panelList;
panelList = showPanels.split(',');
for (var i = 0; i < panelList.length; i++) {
 var panel = panelList[i];
 if ($(panel)) {
  setStyleDisplay(panel, 'block');
 }
}
panelList = hidePanels.split(',');
for (var i = 0; i < panelList.length; i++) {
 panel = panelList[i];
 if ($(panel)) {
  setStyleDisplay(panel, 'none');
 }
}
}

function loadCommentShortcut() {
$('comment').onkeydown = function (moz_ev) {
 var ev = null;
 if (window.event){
  ev = window.event;
 } else {
  ev = moz_ev;
 }
 if (ev != null && ev.ctrlKey && ev.keyCode == 13) {
  $('submit').click();
 }
}
$('submit').value += ' (Ctrl+Enter)';
}

function getElementsByClassName(className, tag, parent) {
parent = parent || document;

var allTags = (tag == '*' && parent.all) ? parent.all : parent.getElementsByTagName(tag);
var matchingElements = new Array();

className = className.replace(/\-/g, '\\-');
var regex = new RegExp('(^|\\s)' + className + '(\\s|$)');

var element;
for (var i = 0; i < allTags.length; i++) {
 element = allTags[i];
 if (regex.test(element.className)) {
  matchingElements.push(element);
 }
}

return matchingElements;
}

window['MGJS'] = {};
window['MGJS']['$'] = $;
window['MGJS']['setStyleDisplay'] = setStyleDisplay;
window['MGJS']['goTop'] = goTop;
window['MGJS']['switchTab'] = switchTab;
window['MGJS']['loadCommentShortcut'] = loadCommentShortcut;
window['MGJS']['getElementsByClassName'] = getElementsByClassName;

})();


//]]>

</script>

4.Now scroll down where you see </body> tag.

5.Copy below code and paste it just before the </body> tag.

<a href='#' onclick='MGJS.goTop();return false;'><b>Go To Top</b></a>

6.Click on save template and you are done.

Demo

How To Remove Dotted Outlines From Links

Don’t you like the dotted outlines there around your links?Then do the simple steps below to remove dotted outlines from your links.

1.Login to your blogger dashboard–> layout- -> Edit HTML

2.Scroll down to where you see ]]></b:skin> tag .

3.Copy below code and paste it just before the ]]></b:skin> tag.

This image has a Dotted Outline

a {outline: none;}

4.Now save your template and your done.

CSS Rounded Corners DIV Section-Without Images

1.Login to your blogger dashboard–> layout- -> Edit HTML

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </head> tag.

<style type="text/css">
.rcornerdiv {
     width:400px;
     border:solid #647aae;
     border-width:0 1px;
     background:#b0c0e6;
}
.rcornerdiv div {
position:relative;
top: -1px;
left: 0;
border:solid #647aae;
border-width:1px 0 0;
}
.rcornerdiv div div {
     top: 2px;
     border-width:0 0 1px;
     padding: .3em .3em .1em;
}
</style>

Note: You can change width,colors,… as your choice.

4.Now save your template.

5.Go to Layout–>Page Elements and click on “Add a gadget”.

6.Select “html/java script” and add the code given below and click save or you can add this to your blog post.

<div class="rcornerdiv">
<div>
<div>

Enter-Your-Content-Here

</div>
</div>
</div>

You are done.

How To Add jQuery Scroll To Top Button To Blogger

1.Login to your blogger dashboard–> layout- -> Edit HTML

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </head> tag .

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[

$(function(){

$('a[href*=#top]').click(function() {

if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname) {

var $target = $(this.hash);

$target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');

if ($target.length) {

var targetOffset = $target.offset().top;

$('html,body').animate({scrollTop: targetOffset}, 1000);

return false;

}

}

});

});
//]]>
</script>
<!-- end scrolltop -->

4.Now scroll down where you see <body> tag .

5.Replace <body> tag with <body id=’top’> .

6.Now again scroll down where you see </body> tag .

7.Copy below code and paste it just before </body> tag:

<div id='goingtop'>
<a href='#top' title='Go Top'><img src='https://bloggertipandtricks.files.wordpress.com/2009/10/top1.png' style='right:20px; bottom:20px; position: fixed;'/></a></div>

Note: You can use any image instead of above image.

8.Click on save template and you are done.

Demo

How To Add jQuery Scroll Background To Blogger

1.Login to your blogger dashboard–> layout- -> Edit HTML

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </head> tag .

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
$(function(){

// ***
// Scrolling background
// ***

// height of background image in pixels
var backgroundheight = 4000;

// get the current minute/hour of the day
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();

// work out how far through the day we are as a percentage - e.g. 6pm = 75%
var hourpercent = hour / 24 * 100;
var minutepercent = minute / 30 / 24 * 100;
var percentofday = Math.round(hourpercent + minutepercent);

// calculate which pixel row to start graphic from based on how far through the day we are
var offset = backgroundheight / 100 * percentofday;

// graphic starts at approx 6am, so adjust offset by 1/4
var offset = offset - (backgroundheight / 1);

function scrollbackground() {
// decrease the offset by 1, or if its less than 1 increase it by the background height minus 1
offset = (offset < 1) ? offset + (backgroundheight - 1) : offset - 1;
// apply the background position
$('body').css("background-position", "50% " + offset + "px");
// call self to continue animation
setTimeout(function() {
scrollbackground();
}, 70
);
}

// Start the animation
scrollbackground();
});
//]]>
</script>

4.Now scroll down to where you see like this code:

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Note:above code can be different in your template.But important part is body { .

5.Replace above code with below code:

body {
background:url(https://bloggertipandtricks.files.wordpress.com/2009/10/bgscroll1.jpg);
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Note: You can use any suitable image instead of above image.

6.Click on save template and you are done.

Demo

Complete SEO Guide For Blogger|Blogspot

This Article will provide you complete guide on search engine optimization (SEO) for blogger templates.If you have any other ideas please leave a comment.

Meta Keywords and Description

Meta tags are very important for SEO.So you must add meta tags to your blogger blog for improve your seo.

• How Add META TAGS to Blogger(blogspot) blogs
• Add Different Meta tags to Different Blogger Posts
• How To Install Dynamic Meta Description Tags

Submit Your Sitemap to Search Engines

• HOW TO SUBMIT BLOGGER SITEMAP TO GOOGLE
• How To Submit Blogger Sitemap to MSN and Ask.com
• How To Submit blogger sitemap to yahoo

Change Blogger Default Title Tag

Default page title for a single Blogger post is BLOG TITLE: POST TITLE. You can improve SEO by changing the title tags to POST TITLE ~ BLOG TITLE.

• How To Change Default Title Tag on Blogger for SEO

Change Blogger Default Heading Tag

Heading Tag (h1, h2, h3, h4, h5) is also important for SEO. All of Blogger widgets (gadgets) title use h2 or h3 tags. If you want to improve SEO, you need to use h1 tag for post title.

• How To Change Heading Tag For Better SEO in Blogger

Use Social Bookmarking Services

Adding social bookmarking links can help you build your traffic and improve SEO.

• How To Add Big Social Bookmarking buttons
• How To Add jQuery Social Bookmarks icons
• How To Add Sexy Social Bookmark to Blogger
• How To Add Addtoany Social Bookmarking Widget
• How To Add SocioFluid Bookmarking Widget
• How To Add Retweet Button in Blogger
• How To Add Save to del.icio.us button with Hit counts
• How To Add ‘Digg it !!!’ Link to blogger posts
• How To Add ‘Stumble it’ Link to blogger posts
• How To Add ‘Reddit’ Link to your blogger posts
• How To Add ‘Twit this’ Links to blogger posts
• How To Add ‘del.icio.us’ Links to blogger posts
• How To Add ‘Share on Technorati’ Links to blogger

Use Related Posts Widget

• How To Add jQuery Related Posts Widget for Blogger
• Nice Related Post Widget For Bloggers
• Add Related Post Widget to Blogger-Original Templates
• Add Related Post Widget to Blogger-Modified Templates
• Instant Related Post Widget For Blogger

Use Read More… Feature

• Auto ‘Read More’ Feature with Thumbnails
• Jquery Read More-Expandable Post in Blogger
• Add Auto ‘Read More’ Feature to blogger
• Add ‘Read More’ Feature to blogger
• How To Create Expandable Post Summaries

Use Recent Posts,Recent Comments Widgets

• How To Add Recent Posts Widget with Thumbnails
• How To Add Recent Posts Widget to blogger
• Add Scrolling Recent Posts Widget to blogger
• Add Recent Comments Widget For Blogger Blog

Use Popular Post Widget

• Add Popular Post Widget – with comments count
• Add Popular Post Widget-without comments count

Use Labels / Tag Clouds

• How To Add New Blogger Tag /Label Cloud Widget
• Add Flash Animated Label Cloud Widget to Blogger

Use Breadcrumb

You can use breadcrumb to provide easy navigation for your visitor and increase page views.

• How To Add Breadcrumb to Blogger

Submit Blog to Blog Directories

• Submit Blog to Blog Directories to increase Traffic