Wolverine Hacks

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 <head> and </head>. Most advisable place would be just before ]]></b:skin> or </b:skin>

.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.

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?

Continue Reading {..}

The biggest problem of a blog is space. We do not have much space to show more ads. To overcome this problem, I was searching for a widget which can display rotating ads. But, all in vain. In the end, i used JavaScript and designed a auto refreshing ad Widget. This Widget helps you to show advertisements in all sizes. You can set ad refreshing time as per your convenience.

Demo: check this widget on left sidebar of this blog(below Entrecard)

How to add WH rotating ad widget

Go to layout, click on add a widget/gadget. A pop box will appear, just add the following code to content area and save.

Save it and check your blog.

How to customize WH rotating ad widget

a) Edit image source:

var imgs1 = new Array("http://entrecard.s3.amazonaws.com/eimage/51524.jpg","http://wolverinehacks.googlepages.com/WBN125x125memberbanner.png",);

Change image source in red or add more after these links. I would really appreciate if you keep Wolverine Hacks Banner as it is.

b) Edit Links:

var lnks1 = new Array("http://clwolvi.blogspot.com","http://wbnetwork.blogspot.com");

Change image source in red or add more after these links.

c) Edit refresh Time:

window.setInterval("cycle1()",5000);

5000 refers to 5 seconds (i.e. 5000 milisecond). Change this as per your requirement.

d) Edit following line:

<a href=""http://clwolvi.blogspot.com"" id="adLink1" target="_blank">
<img src="http://entrecard.s3.amazonaws.com/eimage/51524.jpg" id="adBanner1" border="0" width="125" height="125"></a>

Change links in red and width and height of the widget.

Final Words

This is the default widget. If you want to use the same widget twice or more than you need to make some changes. Leave a comment here to know more.

I hope you will like this widget. Comments, requests and suggestions are most welcome. So what do you have to say about it?

Continue Reading {..}