How To make "Go To Top" Link | Blogger JQuery Tips

Some of my visitors suggest me to write an article on how to put a "Go To Top" navigation link on Blogger. There are many ways to do it. I have used JQuery here. If a page is very large in height then one has to use scrollbar for moving bottom to top. Instead of scrolling, Blogger can provide a link for visitors which will move the the page to top by just one click. It will just make your blog or site more user friendly,flexible and professional.
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.

How To Add Scroll on Top Button | Blogger JQuery Tips

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 .

How To Make Background Scrollable | Blogger Tips

This tutorial tells you about the process to make background of a blog scrollable. It means if the body's size of blog goes out of screen size, a scroll will be appeared automatically. Let's see the step by step processes. Jquery is used here.
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 .

Recent MultiTab Widget For Blogger | JQuery Tips

This post describes step by step process to add latest MultiTab widget for Blogger with JQuery. Before that you may look

• simple Tab View
• 3d Tab View Widget
• Beautiful MultiTab Gadget

Choose any one style you prefer than apply to blog. Please feel free to Contact Me for any suggestion.

How To Add "Contact Me" Page | Blogger JQuery Tips

This post describes how to create a contact me page for Blogger/BlogSpot. Blogger.com does not give any built-in option(gadget)which supports form submission. So you should borrow code from third party sites. One question arises why should one use a contact page for blog or site? There are some logics behind this. You may look contact me or contact us page at each renowned sites or blogs. Contact Page is used to for interaction between authors/owners and readers. One reader may want to share something with author about the post or he may suggest new idea for site's owners on improvement the site or blog.

How To Add Horizontal LinkList Blogger Jquery Tips

1.Log in to your dashboard--> layout- -> Edit HTML
2.Scroll down to where you see </b:skin>tag.
3.Now copy below code and paste it just before </b:skin> tag .

#nav, #nav ul{
margin:0;
padding:0;
list-style-type:none;
list-style-position:outside;
position:relative;
line-height:26px;
}
#nav a:link,
#nav a:active,
#nav a:visited{
display:block;
color:#FFF;
text-decoration:none;
background:#444;
height:26px;
line-height:26px;
padding:0 6px;
margin-right:1px;
}
#nav a:hover{
background:#0066FF;
color:#FFF;
}
#nav li{
float:left;
position:relative;
}
#nav ul {
position:absolute;
width:12em;
top:26px;
display:none;
}
#nav li ul a{
width:12em;
float:left;
}
#nav ul ul{
width:12em;
top:auto;
}
#nav li ul ul {margin:0 0 0 13em;}
#nav li:hover ul ul,
#nav li:hover ul ul ul,
#nav li:hover ul ul ul ul{display:none;}
#nav li:hover ul,
#nav li li:hover ul,
#nav li li li:hover ul,
#nav li li li li:hover ul{display:block;}

Jquery Read More-Expandable Post | Blogger Tips

This tutorial describes how to add "Read More" link in homepage for expandable post.
1.Login to your blogger dashboard--> layout- -> Edit HTML
2.Click on "Expand Widget Templates"
3.Scroll down to where you see </head>tag .
4.Copy below code and paste it just beforethe </head> tag .

Related Posts Widget | Blogger JQuery Tips

1.Login to your blogger dashboard--> layout- -> Edit HTML
2.Click on "Expand Widget Templates"
3.Scroll down to where you see<p><data:post.body/></p> .
4.Copy below code and paste it just afterthe <p><data:post.body/></p> .