Awiolobby " The home of Tactical Articles and General Topics"

Many websites or blogs have more than 2-3 posts at homepage. I find it very irritating to scroll down to bottom manually. Using a simple JavaScript Code we can scroll to top or bottom of a page at lightening speed.

How to add Go to top and bottom button:

a) CSS Code: Copy and paste the following code between and . Most advisable place would be just before ]]> or

.gototop{
background:url(http://wolverinehacks.googlepages.com/arrow_top.gif)no-repeat;
display:block;_display:none;
position:fixed;
z-index:9999;
text-indent:-9999px;
width:17px;
height:17px;
overflow:hidden;
outline:none;
left:3px;
bottom:30px;}

.gotobottom {
background:url(http://wolverinehacks.googlepages.com/arrow_down.gif)no-repeat;
width:17px;
height:17px;
display:block;
_display:none;
position:fixed; z-index:9999;
text-indent:-9999px;
overflow:hidden;
outline:none;
left:3px;
bottom:5px;
}

b) HTML Code: Copy and paste the following code between and .

TopBottom

Save it and check your blog.

How to customize CSS and HTML Code

a) CSS Code:

.gototop{
background:url(http://wolverinehacks.googlepages.com/arrow_top.gif)no-repeat;
display:block;_display:none;
position:fixed;
z-index:9999;
text-indent:-9999px;
width:17px;
height:17px;
overflow:hidden;
outline:none;
left:3px;
bottom:30px;}

.gotobottom {
background: url(http://wolverinehacks.googlepages.com/arrow_down.gif)no-repeat;
width:17px;
height:17px;
display:block;
_display:none;
position:fixed; z-index:9999;
text-indent:-9999px;
overflow:hidden;
outline:none;
left:3px;
bottom:5px;
}

1. Change the background image link in red to the desired image source.
2. To change the position of these Buttons, change the values in red of left:3px;bottom:5px;. For example if you want to place these buttons to right bottom, then replace left:3px;bottom:5px; to right:3px;bottom:5px;

b) HTML Code:

TopBottom

Go to bottom button is set to #footer. If you do not have #footer in your CSS then, search for #footer-wrapper or #footer-wrap.

Final Words
I hope this tutorial is easy to understand. If you do not understand anything then leave a comment. I will reply asap. So, what do you have to say about it?

I am using a fixed menu at left side of my other Blog Free Downloadz since a long time. Today i came across a same menu at Blogfixes.com. So, i thought i should write about it and explain how to customize. Some of the features of Fixed Menu.

• It is a Fixed menu.
• It can be placed anywhere on the blog
• It can be placed horizontally as well as vertically
• It has Mouse Hover Effect

Demo: Top of this blog or Free Downloadz

How to add WH Fixed Menu for bloggers

a) CSS Code: Copy and paste the following code between and . Most advisable place would be just before ]]> or

.fixed_menu {
position: fixed; /*set the position type for non IE systems*/
top: 140px;
left: 0px;
width: auto;
margin: 0 0px 0px 0px;
background: #ffffff;
opacity:.900;
filter: alpha(opacity=90);
padding: 7px 5px 5px 5px;
-moz-border-radius-topright: 10px;
-moz-border-radius-topleft: 0px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 0px;
}

.fixed_menu a:hover img {
position: relative;
top: 2px;
left: 2px;
border-top: 1px solid #b3b3b3;
border-left: 1px solid #b3b3b3;
border-bottom: 2px solid #999999;
border-right: 2px solid #999999;
}

.fixed_menu a { display: block; } /*Optional : This puts each link in the menu on a new line, remove if you want a horizontal menu*/

* html .fixed_menu {position:absolute;} /*IE only change the position mode of the menu*/

How to customize HTML Code

you can change the position of the menu, color, background color, margin, padding and so on.

b) HTML Code: Copy and paste the following code between body and /body.


How to customize HTML Code

Download Following images and save it to your server or googlepages.

• Home Icon
• Email Icon
• Post Feed Icon - Blue
• Comment Feed Icon - orange
• Go to Top icon

Now edit links in red to desired links.


Final Words
I hope you understood everything. I am using horizontal fixed menu for Wolverine Hacks Blog. You can check it on top of this page. Soon, i will write how to make a nice horizontal fixed menu for blogger.Any doubts, comments here. So what do you have to say on this?

One of the most popular and useful blogger hack or blogger widget is Recent Posts. This blogger hack lets you display recent posts of your blog. Maximum number of bloggers use blogger feed for this purpose. But, this method one limitation, i.e. only 5 most recent posts can be displayed.

How to show 10 recent posts

I tried to edit the blogger code to make this possible but all in vain. Thus, I used JavaScript to show more than 5 recent posts. Here is the code:

Grab this Widget

If you want to use this blogger hack, just copy this code to a new HTML/Javascript Gadget.

Final Words

I hope you will find it useful for your blog. Give it a try and leave your feedback or query here. What do you want me to write next?

Demos:

FaceBox used to display an image:

Girl listening to music

Girl listening to music

FaceBox used to display an inline DIV:

View DIV with id="mydiv" on the page
This is the contents of a hidden DIV on the page, with ID="mydiv" and style set to "display:none".

Dynamic Drive

View DIV with id="mydiv" on the page

FaceBox used to display an external page (on same server) using Ajax:

View "External.htm" fetched via Ajax

View "External.htm" fetched via Ajax

FaceBox used to display an external page, plus apply a CSS class to the container (to further style it):

View "External.htm" fetched via Ajax, , further styled via ".thickstyle" CSS class.


"

View "External.htm" fetched via Ajax, further styled with ".thickstyle" CSS class

Note the valid doctype declaration at the very top of the code, which is required unless your page already has one defined. Facebox consists of 2 .js files, 1 .css file, plus several images that make up its interface (such as round corner images). Download facebox1.1.zip, which consists of all those files:

* facebox1.1.zip
* facebox.css
* facebox.js
* jquery-1.2.2.pack.js
* Facebox images

By default the zip file should be unzipped to the same directory as the page using Facebox (a sub directory facefiles/ is added). If you wish to create a dedicated directory for the above zip file, you'll want to open up facebox.js and edit the images references near the top to point to the correct locations afterwards. The references inside the code of Step 1 should also be updated accordingly.

Step 2: All that's left now is to define your Facebox "thumbnail" links on the page, by giving the link a rel="facebox" attribute, plus set its href attribute to point to either an image, the ID of a hidden DIV, or a URL to the page on your server, depending on the content type you wish to load. For example:

Girl listening to music

View "External.htm" fetched via Ajax

See the demos at the top of the page and their corresponding HTML code for more info.
Notes

You can directly load some content into the Facebox container via scripting, instead of the conventional path of setting up a thumbnail link. The method to call is:

jQuery.facebox('Some content to show')

You can directly close the Facebox container once it's open via scripting, instead of the default path of the user clicking on the "close" button. The method to call is:

jQuery(document).trigger('close.facebox')