Devil's Workshop - Blogger

DEMO           DOWNLOAD

This is one of my favorite template and I'm using it on my other blog onlineustaad.com. This template has many useful features and potential. Following are some best features of this template:

• Has very user friendly design
• SEO friendly
• Top Navagation Bar
• Ad Space in the header
• Single Left Sidebar
• Stay Connected Widget

However, the black border which is showing in below picture is not added to the coding, so if want to add this cool border then after installing this template go to...

• Template >> 
• HTML >> 
• Proceed 

and find this code #wrap and just after the: background: #Ffffff; paste below code: 

border-right: 15px solid #333;
border-left: 15px solid #333;
border-top: 15px solid #333;
border-bottom: 15px solid #333;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
box-shadow: #333 0px 1px 3px;

Adding CSS Codes into Blogger

• Go to Blogger Dashboard
• Template >> HTML >> Proceed 
• Now Find this code </b:skin>
• Now copy below code paste right before </b:skin>

#navMenu {
margin:0;
width:auto;
margin-bottom:5px;
}
#navMenu ul {
margin:0;
padding:0;
line-height:30px;
}
#navMenu li {
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
background:#369;
}
#navMenu ul li a {
text-align:center;
height:30px;
width:140px;
display:block;
font-family:"Georgia", cursive;
text-decoration:none;
color:#FFF;
border:1px solid #FFF;
text-shadow:1px 1px 1px #000;
}
#navMenu ul ul {
position:absolute;
visibility:hidden;
top:30px;
}
#navMenu ul li:hover ul {
visibility:visible;
z-index:9999;
}
/*sets top level hover color*/
#navMenu li:hover {
background:#09F;
}
/*sets link items hover color and background*/
#navMenu ul li:hover ul li a:hover {
color:#000;
background:#CCC;
}
/* Changes text color on hover for main menu hover*/
#navMenu a:hover {
color:#000;
}
/* Contains the Float */
.clearFloat {
clear:both;
margin:0;
padding:0;
}
/* IE7 Display Fix */
#navMenu ul li {
display: inline;
}

Save your template and you've successfully added the CSS part of this drop down menu.

Adding HTML codes to your blog:

Now after having added the css part, you'll have to add the HTML part of this menu, because CSS is just for styling the menu, while by using HTML you will display the menu on your blog. Mostly the menu is kept in the header or in navigation bar, so you should keep at below the header. Now follow steps to add HTML codes:

• Go to Blogger >> Layout
• Add a Gadget >> Select the HTML/JavaScript Gadget from the list 
• Copy below code and paste it inside that HTML/JavaScript Widget

<div align="center">
<div id="navMenu">
<ul>
<li> <a href="#">Ms Office</a>
<ul>
<li><a href="#">Office in Urdu</a></li>
</ul> <!-- end inner UL -->
</li> <!-- end main LI -->
</ul> <!-- end main UL -->
<ul>
<li> <a href="#">Graphics Designing</a>
<ul>
<li><a href="#">Graphics in Urdu</a></li>
</ul> <!-- end inner UL -->
</li> <!-- end main LI -->
</ul> <!-- end main UL -->
<ul>
<li> <a href="#">Web Designing</a>
<ul>
<li><a href="#">Web Designing</a></li>
</ul> <!-- end inner UL -->
</li> <!-- end main LI -->
</ul> <!-- end main UL -->
<ul>
<li> <a href="#">Web Development</a>
<ul>
<li><a href="#">Web Development</a></li>
</ul> <!-- end inner UL -->
</li> <!-- end main LI -->
</ul> <!-- end main UL -->
<ul>
<li> <a href="#">SEO & Others</a>
<ul>
<li><a href="#">SEO</a></li>
<li><a href="#">Blogger SEO </a></li>
</ul> <!-- end inner UL -->
</li> <!-- end main LI -->
</ul> <!-- end main UL -->
<ul>
<li> <a href="#">Accounting</a>
<ul>
<li><a href="#">Accounting</a></li>
</ul> <!-- end inner UL -->
</li> <!-- end main LI -->
</ul> <!-- end main UL -->
<ul>
<li> <a href="#">Making Money</a>
<ul>
<li><a href="#> Earn Money Online</a></li>
<li><a href="#">Google Adsense</a></li>
<li><a href="#">Affiliate Marketing</a></li>
<li><a href="#">Earn with PPC</a></li>
<li><a href="#">Freelancing</a></li>
</ul> <!-- end inner UL -->
</li> <!-- end main LI -->
</ul> <!-- end main UL -->
</ul> <!-- end main UL -->
<br class="clearFloat" />
</div> </div><!-- end navMenu -->

Save the widget, drag it below the header, see the example image below:

Customization:

You can easily customize this menu by yourself. I'll give you the important parts which you can customize according to your requirements.

• The 30px  value is set for the height of the UL tag, so if you need larger or lesser than that you can edit increase or decrease it. 
• The #369  value is set for the background of an LI tag, so you can change it with any color you like.
• 30px pink color is value is the hieght of the link, so it should be as same as the line height of an UL. 
• The 140px  value is for the with of the link, so if you have large text and that is not fixing in the current width, you can increase it, also you can decrease the width of the link. 
• More customization is also possible, you can custimize each part of this menu by changing the values of CSS properties.
• Also change the anchor texts to your own which are these web designing, graphics, SEO & Others, Ms Office, Accounting etc, these are the texts you can change with your own. And to change the link for each of the text just replace the (#) sign with your link.
• If you want to remove or add more links or tabs then simply copy the one block code and paste below or in between. If you want to add an entire tab then simply copy a code like below one and add it or in between the menu: 

<ul>
<li> <a href="#">saqisoft</a>
<ul>
<li><a href="#">Saqisoft</a></li>
</ul> <!-- end inner UL -->
</li> <!-- end main LI -->
</ul> <!-- end main UL -->

• And if you want to increase a link inside the drop down list then simply copy below line and paste it repeatedly as many as you want below the same line. 

<li><a href="#">saqisoft</a></li>

            U R Done....

Subscribe To Get FREE Updates!