How to Add a Dropdown Menu with Submenu on Blogger?

Hi bloggy readers,

Dropdown menu or horizontal submenu is a great option for bloggers and web designers in creating a simple but complete package of menu navigation. This kind of dropdown menu navigation will not only modernize the interface on you blog, but also, your blog will get a futuristic and modern look without being burdened with any javascript code whatsoever. Yeah, that's because by adding only some CSS styles and HTML codes, your blog will get a complete package of navigation menu, but also fast in page loading.

Anyway, in my other post about

Making a Blogger Menu to your blog,

you can see that the blogger menu in that article can only show you 1 link per 1 navigation. So i decide to write this article.

Now, we will be able to make a dropdown menu that will drop many links when being pointed by the mouse cursor. By moving the mouse cursor inside the area of one of the menus, it will drop you another dropdown submenu along with the links, just like being shown in the picture below.

So, if you are interested on adding this dropdown menu on your Blogger blog, read the full post to figure it out how. Okay, if you are ready, then..

Anyway, the dropdown menu tutorial i am giving to you right now is also great to use to your blog because this dropdown menu only contains some CSS without any Javascript, so it will not weight up your blog in loading. There are many ways to make this dropdown menu, in this article, i will only teach you the 2 of many methods you can find around the internet.

First method ofAdding Drop-Down Menu 1. Login to Blogger Account
Now to begin this tutorial, let's go to Blogger.com and then Log in to your Blogger account using your own username along with the password.

2. Go to Layout and Edit HTML
In the Dashboard page, go to Layout/Design of your blog, and in the Page Element, press the sub-tab Edit HTML to begin editing the whole code of your template.

3. Find the code
By pressing the Ctrl + F buttons at the same time, you will enter the find mode. In this mode, you will be able to find any specific code in the template. Now find the code below:

]]></b:skin>

Anyway, before doing any kind of customization, i strongly suggest you to save your current template just in case you did something wrong with the template. Now click at the link Download Full Template.

4. Copy the code
Now copy the code of dropdown menu, and then paste it over ]]></b:skin>

/* ================================================================
This copyright notice must be untouched at all times.
The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/drop_definition2.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any
way to fit your requirements.
=================================================================== */
#menu {list-style-type:none; margin:5px; padding:0;}
#menu li {float:left; padding:0; margin:0 1px 0 0; position:relative; width:150px; height:3em; z-index:100;}
#menu li dl {position:absolute; top:0; left:0;padding-bottom:5px;}
#menu li a, #menu li a:visited {text-decoration:none;}
#menu li dd {display:none;}
#menu li a:hover {border:0;}
#menu li:hover dd, #menu li a:hover dd {display:block;}
#menu li:hover dl, #menu li a:hover dl {padding-bottom:10px;}
#menu table {border-collapse:collapse; padding:0; margin:-1px; font-size:1em;}
#menu dl {width: 150px; margin: 0; padding: 0; background: #c9ba65;}
#menu dt {margin:0; padding: 5px 5px 5px 20px; font-size: 1.1em; color: #fff; border-bottom:1px solid #fff; border-top:1px solid #fff;}

#menu .one {background: #827b6b; border-top:5px solid #dca;}
#menu .two {background: #646e4c; border-top:5px solid #bb9;}
#menu .three {background: #a4a88d; border-top:5px solid #eec;}
#menu .four {background: #a29f68; border-top:5px solid #f8f8b8;}

#menu .one dt {background: #b2ab9b;}
#menu .two dt {background: #949e7c;}
#menu .three dt {background: #d4d8bd;}
#menu .four dt {background: #e2dfa8;}

#menu dd {margin:0; padding:0; color: #fff; font-size: 1em; text-align:left;}
#menu .one dd {border-bottom:1px solid #aaa;}
#menu .two dd {border-bottom:1px solid #e8e8e8;}
#menu .three dd {border-bottom:1px solid #eee;}
#menu .four dd {border-bottom:1px solid #999;}
#menu dd.last {border-bottom:1px solid #fff;}

#menu dt a, #menu dt a:visited {display:block; color:#444;}

#menu dd a, #menu dd a:visited {color:#fff; text-decoration:none; display:block; padding:4px 5px 4px 20px; width:125px;}

#menu .one dd a {background:#949e7c; color:#eee;}
#menu .two dd a {background:#d4d8bd; color:#346;}
#menu .three dd a {background:#e2dfa8; color:#654;}
#menu .four dd a {background:#b2ab9b; color:#ff8;}

#menu .one dd a:hover {background: #b2ab9b; color:#345;}
#menu .two dd a:hover {background: #949e7c; color:#543;}
#menu .three dd a:hover {background: #d4d8bd; color:#123;}
#menu .four dd a:hover {background: #e2dfa8; color:#534;}

5. Find the code
Now enter again the search mode by pressing Ctrl + F at the same time. And then go to the bottom and find this header section on the bottom position of the HTML code:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='your' type='Header'/> </b:widget> </b:section>

6. Replace the code
And then, replace the whole code on number 5 by using the code below:

<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='Blogging Images (Header)' type='Header'/>
</b:section>

7. Save the current change and go to Page Element
Now press the Save Template button to save the current changes! And after that, switch back the sub-tab to Page element to begin embedding the HTML code of Drop-Down Menu.

8. Find the suitable area for the Drop-Down Menu
In the Page Element, now your task is to find the best position of the dropdown menu. I suggest you to use the top position of the layout because that is the suitable place for this widget.

9. Press the Add a Gadget link
After finding the best and suitable position for the dropdown menu, now in the area of that element, there is a link "Add a Gadget". Now press that link and you will be prompted with many options of what kind of gadgets do you want to embed to your blog. Now choose "HTML/javascript" in those options. After that, copy the code below and then paste it to the HTML/javascript box.

<ul id="menu"><!-- drop down menu start -->

<li>

<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->

<dl class="one">

<!-- Alter the links with your own -->

<dt><a href="Link URL address I">DEMOS</a></dt>

<dd><a href="Link URL address I" title="Sub-Menu Title I">Sub-Menu Title I</a></dd>

<dd><a href="Link URL address I" title="Sub-Menu Title I">Sub-Menu Title I</a></dd>

<dd><a href="Link URL address I" title="Sub-Menu Title I">Sub-Menu Title I</a></dd>

<dd><a href="Link URL address I" title="Sub-Menu Title I">Sub-Menu Title I</a></dd>

<dd><a href="Link URL address I" title="Sub-Menu Title I">Sub-Menu Title I</a></dd>

<dd><a href="Link URL address I" title="Sub-Menu Title I">Sub-Menu Title I</a></dd>

<dd><a href="Link URL address I" title="Sub-Menu Title I">Sub-Menu Title I</a></dd>

<dd><a href="Link URL address I" title="Sub-Menu Title I">Sub-Menu Title I</a></dd>

<dd class="last"><a href="../menu/em_images.html" title="Sub-Menu Title I">Sub-Menu Title I</a></dd>

</dl>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->

</li>

<li>

<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->

<dl class="two">

<dt><a href="Home Link URL address I">Home</a></dt>

<dd><a href="Link URL address I" title="Sub-Menu Title II">Sub-Menu Title I</a></dd>

<dd><a href="Link URL address I" title="Sub-Menu Title II">Sub-Menu Title I</a></dd>

<dd><a href="Link URL address I" title="Sub-Menu Title II">Sub-Menu Title I</a></dd>

<dd><a href="Link URL address I" title="Sub-Menu Title II">Sub-Menu Title I</a></dd>

<dd><a href="Link URL address I" title="Sub-Menu Title II">Sub-Menu Title I</a></dd>

<dd><a href="Link URL address I" title="Sub-Menu Title II">Sub-Menu Title I</a></dd>

<dd class="last"><a href="Link URL address I" title="Sub-Menu Title I">Sub-Menu Title I</a></dd>

</dl>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->





</li>

<li>

<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->

<dl class="three">

<dt><a href="Link URL address">LAYOUTS</a></dt>

<dd><a href="Link URL address" title="Sub-Menu IIIt">Sub-Menu III</a></dd>

<dd><a href="Link URL address" title="Sub-Menu III">Sub-Menu III</a></dd>

<dd><a href="Link URL address" title="Sub-Menu III">Sub-Menu III</a></dd>

<dd><a href="Link URL address" title="Sub-Menu III">Sub-Menu III</a></dd>

<dd class="last"><a href="Link URL address" title="Sub-Menu III">III</a></dd>

</dl>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->

</li>

<li>

<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->

<dl class="four">

<dt><a href="Link URL address">MOZILLA</a></dt>

<dd><a href="Link URL address" title="Sub-Menu IV">Sub-Menu 1</a></dd>

<dd><a href="Link URL address" title="Sub-Menu IV">Sub-Menu 2</a></dd>

<dd><a href="Link URL address" title="Sub-Menu IV">Sub-Menu 3</a></dd>

<dd><a href="Link URL address" title=":Sub-Menu IV">Sub-Menu 4</a></dd>

<dd><a href="Link URL address" title="Sub-Menu IV">Sub-Menu 5</a></dd>

<dd><a href="Link URL address" title="Sub-Menu IV">Sub-Menu 6</a></dd>

<dd class="last"><a href="Link URL address" title="Sub-Menu IV">Sub-Menu 7</a></dd>

</dl>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->





</li>

</ul><!-- end of drop down menu -->

10. Save the change
Now save the template by pressing the Save button and it's now done. Now you can see the result directly to your blog.

Troubleshooting: What if the Dropdown Menu i've already added to my blog doesn't have a good look on certain browsers?After finished adding the dropdown menu into your blog, you might be baffled with why the dropdown menu you've added doesn't look good on other browser. Okay, this is the solution. By repeating the step from number 1 to 7 in the first method, the second method below will show you how to put the HTML codes for the dropdown menu when we still in the Edit HTML page, without having to enter the Page Element to Add a Gadget.

2nd method: Adding the Drop-Down Menu through the Edit HTML page
1. Remove the Dropdown Menu from the Page Element
In order to apply the second method, you only need to delete the HTML code you've already added (number 9 on the first method). Just go to Page Element and delete the existing widget you've just added with the dropdown menu code.

2. Go to Edit HTML
And then switch back the sub-tab to the Edit HTML again.

3. Find the code
By pressing the Ctrl + F again and find the code below

<div class='descriptionwrapper'> <p class='description'><span><data:description></data:description></span></p> </div>

4. Replace the code
Now block the whole codes on number 3 and then replace it with the code below:

<ul id="menu"><!-- drop down menu start -->

<li>

<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->

<dl class="one">

<!-- Alter the links with your own -->

<dt><a href="Link URL address I">Sub-Menu I</a></dt>

<dd><a href="Link URL address I" title="Sub-Menu Title I">Sub-Menu Title I</a></dd>

<dd><a href="Link URL address I" title="Sub-Menu Title I">Sub-Menu Title I</a></dd>

<dd><a href="Link URL address I" title="Sub-Menu Title I">Sub-Menu Title I</a></dd>

<dd><a href="Link URL address I" title="Sub-Menu Title I">Sub-Menu Title I</a></dd>

<dd><a href="Link URL address I" title="Sub-Menu Title I">Sub-Menu Title I</a></dd>

<dd><a href="Link URL address I" title="Sub-Menu Title I">Sub-Menu Title I</a></dd>

<dd><a href="Link URL address I" title="Sub-Menu Title I">Sub-Menu Title I</a></dd>

<dd><a href="Link URL address I" title="Sub-Menu Title I">Sub-Menu Title I</a></dd>

<dd class="last"><a href="../menu/em_images.html" title="Sub-Menu Title I">Sub-Menu Title I</a></dd>

</dl>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->

</li>

<li>

<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->

<dl class="two">

<dt><a href="Home Link URL address I">Home</a></dt>

<dd><a href="Link URL address I" title="Sub-Menu Title II">Sub-Menu Title I</a></dd>

<dd><a href="Link URL address I" title="Sub-Menu Title II">Sub-Menu Title I</a></dd>

<dd><a href="Link URL address I" title="Sub-Menu Title II">Sub-Menu Title I</a></dd>

<dd><a href="Link URL address I" title="Sub-Menu Title II">Sub-Menu Title I</a></dd>

<dd><a href="Link URL address I" title="Sub-Menu Title II">Sub-Menu Title I</a></dd>

<dd><a href="Link URL address I" title="Sub-Menu Title II">Sub-Menu Title I</a></dd>

<dd class="last"><a href="Link URL address I" title="Sub-Menu Title I">Sub-Menu Title I</a></dd>

</dl>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->





</li>

<li>

<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->

<dl class="three">

<dt><a href="Link URL address">LAYOUTS</a></dt>

<dd><a href="Link URL address" title="Sub-Menu IIIt">Sub-Menu III</a></dd>

<dd><a href="Link URL address" title="Sub-Menu III">Sub-Menu III</a></dd>

<dd><a href="Link URL address" title="Sub-Menu III">Sub-Menu III</a></dd>

<dd><a href="Link URL address" title="Sub-Menu III">Sub-Menu III</a></dd>

<dd class="last"><a href="Link URL address" title="Sub-Menu III">III</a></dd>

</dl>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->

</li>

<li>

<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->

<dl class="four">

<dt><a href="Link URL address">MOZILLA</a></dt>

<dd><a href="Link URL address" title="Sub-Menu IV">Sub-Menu 1</a></dd>

<dd><a href="Link URL address" title="Sub-Menu IV">Sub-Menu 2</a></dd>

<dd><a href="Link URL address" title="Sub-Menu IV">Sub-Menu 3</a></dd>

<dd><a href="Link URL address" title=":Sub-Menu IV">Sub-Menu 4</a></dd>

<dd><a href="Link URL address" title="Sub-Menu IV">Sub-Menu 5</a></dd>

<dd><a href="Link URL address" title="Sub-Menu IV">Sub-Menu 6</a></dd>

<dd class="last"><a href="Link URL address" title="Sub-Menu IV">Sub-Menu 7</a></dd>

</dl>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->





</li>

</ul><!-- end of drop down menu -->

5. Save the change
Save the template and now you can see the result.

Configuration of the Dropdown MenuAfter finished adding this dropdown menu to your blog, now i want to show you how to customize the dropdown menu you've already added.

Inside the code on number 9 of the first method or number 4 of the second method, there are some specific codes i've already marked for you. Let's start with the code Link URL address and Sub-Menu I.

<dt><a href="Link URL address">Sub-Menu I</a></dt>
<dd><a href="Link URL address" title="Sub-Menu I">Sub-Menu I</a></dd>

As you can see in that code, the code Link URL address code must be changed with the URL address of your own blog or other websites. For example, try to change the code Link URL address with the code http://www.whatmakesblog.com.

And then for the code Sub-Menu I is the code of what title do you want to display on the dropdown menu. This Sub-Menu I code must be replaced with your preferred title. For example, try to change the code Sub-Menu I with the code "Blogger Team" or any title you really want.

How to differ the code for the Menu Title with the code of Sub-Menu Title?Anyway, there is something i must tell you to finish this tutorial. You must also know how to differ the part for the Main Title and the part of the Sub-Menu Title. Menu Title is the anchor part from the dropdown menu, it's the part of the menu that will be shown without being pointed by mouse cursor. On the other side, The Sub-Menu Title is the part from the menu that will be shown when our mouse cursor is moved to the area of the menu. By doing so, the dropdown menu contains many links will be shown. Okay, now pay attention to this code:

<dt> </dt>

and also the code:

<dd> </dd>

If you can see those codes in the HTML code of dropdown menu, the code which begins with the tag codes <dt> <dt> indicates the main title or the main menu, not the sub-menu. And then for the tag code which begins with <dd> </dd> is the Sub-Menu title.

Okay, that's it for now. Hope you like this tutorial and consider to share it to Digg.com and other Social Media around the web. If you have something to ask to me, just type your question on the comment section below and i'll try my best to give you the best solution for your problem.

Good luck bloggers!

Careers in ASP.NET

ASP.NET allows programmers to create dynamic web applications. ASP.NET can be used to create anything from small, personal websites through to large, enterprise-class web applications.

ASP.NET is one of the most exciting web development technologies on offer today. When Microsoft released the first version a few years ago, many web developers thought all their dreams had come true.

ASP.NET is a technology for developing web applications. A web application is just a fancy name for a dynamic web site. Web applications usually (but not always) store information in a database, and allow visitors to the site to access and change that information. Many different programming technologies and supported languages have been developed to create web applications; PHP, JSP, Ruby on Rails, CGI, and ColdFusion are just a few of the more popular ones. However, rather than tying you to a specific technology and language, ASP.NET lets you write web applications using a variety of familiar programming languages.

ASP.NET is a server-side technology; that is, it runs on the web server. Most web designers start their careers learning client-side technologies like HTML, JavaScript, and Cascading Style Sheets (CSS). When a web browser requests a web page created with only client-side technologies, the web server simply grabs the files that the browser (or client) requests and sends them down the line. The client is entirely responsible for reading the markup in those files and interpreting that markup to display the page on the screen.

Server-side technologies, like ASP.NET, are different. Instead of being interpreted by the client, server-side code (for example, the code in an ASP.NET page) is interpreted by the web server. In the case of ASP.NET, the code in the page is read by the server and used to generate HTML, JavaScript, and CSS that is then sent to the browser. Since the processing of the ASP.NET code occurs on the server, it's called a server-side technology. 

Reference: http://www.jobsatnelito.com/Career_in_ASP_Net.htm

10 Real Reasons to Prefer a Career in PHP Development in India

To make a career choice in the recession hit present day scenario is a difficult thing. But when you think of better options then it is clear that jobs in the web development niche are more reliable as compared to others. Though PHP is a well known server side scripting language only few have been able to use the PHP development in India platform to the fullest. If you pursue harder then there are all chances of you ruling the niche as a PHP developer in India.

Here are 10 more reasons to convince you to take up a career in PHP development in India niche and be one of the most sought after PHP developers in India:

1) Support from 1000 + PHP communities : If any time a PHP developer in India is stuck with a PHP development in India query they can use different PHP communities as reference to find the answer where to their queries.

2) Less expensive : Unlike other software development platforms PHP is open source and hence involves no cost to the PHP developer. They simply have to download PHP frameworks and tools online and can start working on projects for PHP development in India.

3) Effective Security : Most of the programmers are aware of what is in the open source and hence it is natural that a PHP developer will make all efforts possible to ensure that the application is secure. Having said this it is also important that the PHP developer avoids silly mistakes.

4) Learn by Examples : Thousands of sites on the internet are dedicated to PHP. These sites contain information on how the coding should be done in case of developing difficult PHP development applications.

5) Many code frameworks : Though a recent entrant in the PHP niche code frameworks are known to make the job of the PHP developer in India easy and less confusing. They have given boost to companies involved in PHP development in India.

6) Web 2.0 friendly : PHP is the best tool to develop an interactive website and provide rich user experience. Easy to grasp commands like curl or fopen help PHP developer in India to get data from other websites. It makes it practically possible to develop more interactive applications for any PHP development in India project.

7) Many PHP based CMS : Most of the widely used CMSs like Drupal, Jhoomla and Wordpress are based on PHP. Hence if you aspire to be one of the best website tools then you stand a good chance to benefit from your skills for PHP development in India.

8) High Scalability : Software once developed needs regular changes to meet the present day requirements. Making amendments in the existing application is much easy if the application is PHP based.

9) PHP Development in India is vast : Many web development companies in India support PHP so it is not difficult for a PHP developer to survive in the niche.

10) Code the Easy Way : Frameworks and various other tools related to PHP make coding really painless. If in case you are stuck somewhere you can refer to code libraries to find answers to most of your queries.

Reference: http://www.sooperarticles.com/careers-articles/career-management-articles/10-real-reasons-prefer-career-php-development-india-131693.html

Software Engineering

Software Engineering

The fact is that the industry has placed India in a spotlight and also fulfilled the dreams of many as software engineer! Attractive pay-scale, enticing opportunities and overall, the plethora of options have made software engineering a sort of unique profession!

India certainly holds the lion’s share of the IT outsourcing market; there is also indigenous growth within the country that makes our IT sector, a promising sector for career opportunities! So what makes software engineering, all that interesting apart from the fascination of pay, travel and growth? If we think about it, then we can say that the potential for working on innovative things would definitely be on the top of the list. Software engineering has created a platform that gives food for your thoughts. This ideal nature of creativity in software engineering makes one’s job interesting as a software engineer. It also paves way to career enhancements based on one’s capability; not only as an individual performer, but also in a team; his/her approach to complex problems; adaptability characteristics, as they would be repeatedly shifted to various platforms (domains) to learn different applications; and their eagerness to learn new skills and also earnestness to update them technologically till date… Thus, such jobs in turn enhance the knowledge dormitory of an individual, thereby shaping his/her personality.
Software engineering is playing a leading role in almost all the business fields, because of its dynamic business applications, which is efficient enough of solving complicated problems. According to a recent survey, the average salary of Sr. Software Engineer / Developer / Programmer ranges from Rs. 410, 321 – Rs. 724, 568. The software engineering and its related degrees is yielding a bigger and better salary, when compared to other degrees: the average salary of B.E. ranges from Rs. 390, 700 – Rs. 720, 500; for M.C.A (Master of Computer applications), it ranges from Rs. 390, 000 – Rs. 650, 000; for B. Tech, it ranges from Rs. 370, 000 – Rs. 700, 000. Thus, such huge amount of salaries too, plays one of the major reasons of attracting the students towards the software engineering studies.
In fact, the software industries in India have made a big difference in an average life of an individual in the society. It is in the blooming period of such industries, people working in the software field enjoyed enormous benefits, such as, multiple credit cards; loan facilities; insurance facilities; reimbursements features… This has also created a big impact in the other areas, which includes, banking sectors; real estate; insurance companies… It did made people’s life, more sophisticated; it allowed them to dream bigger; it even bestowed its people with a status in their living environment. It didn’t stop with all these; people, who are working in the software companies, are provided with the opportunities to go aboard (to their client’s places) for projects (work) and these people would be given double the salary, when they are in their deputation period. This has helped the people to explore the opportunities available in the foreign countries and also to get settled in their life; it increased the buying power of the people, which resulted in increasing the real estate value in the country. Hence, there is no way to chip off the growth altitude of the software industries and its jobs; even by the drastic economical crisis! It’s obvious that these jobs has honored the people with confidence; personality attributes and social status; more than a career!
Reference: http://careers.icbse.com/software-engineering/