Drop Down Navigation Menu for Blogger

Now I am about to share the easy sink navigation menu for blogger. this can be vital for each blogger to form the navigation easier of their blogs owing to many reasons and sink navigation  menu is a perfect issue for it. In these quite menus, once somebody hovers the mouse pointer on any specific class then it drops some sub classes of it within the vertical vogue. And owing to this result, it's called best menu vogue. Well, before putting in this in your blog let me tell you one thing regarding this.

Drop Down Navigation Menu for Blogger:

This is the easy sink navigation menu that is constructed with clear HTML, CSS3 and JQuery. it's a grey color as a result of it's user friendly and it'll not have an effect on the visitors' eyes. you recognize some serious colors like Purple, Blue and Orange have an effect on the visitors' eyes and most net designers use lightweight colors. thus this menu shows the vertical sub classes once you may place the mouse on any sink menu. It conjointly encompasses a focus or click result. you'll be able to have a glance at this by visiting the below demo link.

Let's get started,

• Go to your "Blogger Dashboard" and click on the blog to which you would like to add the Drop Down Navigation Menu.
• From the options to left of webpage, select and click on "Layout".
• Next, click "Add a  Gadget".
• A popup window opens, now copy and paste the below code in the content box.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"> </script> <script type="text/javascript"> $(function() { //We initially hide the all dropdown menus $('#dropdown_nav li').find('.sub_nav').hide(); //When hovering over the main nav link we find the dropdown menu to the corresponding link. $('#dropdown_nav li').hover(function() { //Find a child of 'this' with a class of .sub_nav and make the beauty fadeIn. $(this).find('.sub_nav').fadeIn(100); } , function() { //Do the same again, only fadeOut this time. $(this).find('.sub_nav').fadeOut(50); } ); } ); </script> <style> #dropdown_nav a { font-family:Georgia, Sans-Serif; font-size:15px; font-weight:bold; color:#525252; text-decoration:none; } #dropdown_nav { width:960px; padding:0px; display:inline-block; list-style:none; -moz-box-shadow:inset 0px 0px 1px #fff; -webkit-box-shadow:inset 0px 0px 1px #fff; border:1px solid #ccc; -moz-border-radius:5px; -webkit-border-radius:5px; background:#e2e2e2; background:-moz-linear-gradient(#f3f3f3, #e2e2e2); background:-webkit-gradient(linear, 0 0, 0 100%, from(#f3f3f3), to(#e2e2e2)); } #dropdown_nav li { padding:10px 0px 10px 0px; float:left; position:relative; display:inline-block; } #dropdown_nav li a { padding:10px 15px 10px 15px; text-shadow:-1px 1px 0px #f6f6f6; -moz-box-shadow:inset 0px 0px 1px #fff; -webkit-box-shadow:inset 0px 0px 1px #fff; border-right:1px solid #ccc; } #dropdown_nav li a:hover { background:#f9f9f9; background:-moz-linear-gradient(#f9f9f9, #e8e8e8); background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9f9f9), to(#e8e8e8)); } #dropdown_nav li a:active { background:#e2e2e2; background:-moz-linear-gradient(#e2e2e2, #f3f3f3); background:-webkit-gradient(linear, 0 0, 0 100%, from(#e2e2e2), to(#f3f3f3)); } #dropdown_nav li a.first { -moz-border-radius:5px 0px 0px 5px; -webkit-border-radius:5px 0px 0px 5px; } /*#dropdown_nav li a.last { -moz-border-radius:0px 5px 5px 0px; -webkit-border-radius:0px 5px 5px 0px; } */ /* Sub-Nav styling */ #dropdown_nav .sub_nav { width:160px; padding:0px; position:absolute; top:38px; left:0px; border:1px solid #ccc; background:#e2e2e2; } #dropdown_nav .sub_nav li { width:160px; padding:0px; } #dropdown_nav .sub_nav li a { display:block; border-bottom:1px solid #ccc; background:-moz-linear-gradient(#f3f3f3, #e2e2e2); background:-webkit-gradient(linear, 0 0, 0 100%, from(#f3f3f3), to(#e2e2e2)); } #dropdown_nav .sub_nav li a:hover { background:#f9f9f9; background:-moz-linear-gradient(#f9f9f9, #e8e8e8); background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9f9f9), to(#e8e8e8)); } #dropdown_nav .sub_nav li a:active { background:#e2e2e2; background:-moz-linear-gradient(#e2e2e2, #f3f3f3); background:-webkit-gradient(linear, 0 0, 0 100%, from(#e2e2e2), to(#f3f3f3)); } </style> <!-- Navigation Start --> <ul id="dropdown_nav"> <li><a class="first" href="http://www.viniwebworld.blogspot.com/">Home</a></li> <li><a href="#">HTML</a> <ul class="sub_nav"> <li><a href="#">Topic 1 #1</a></li> <li><a href="#">Topic 2 #2</a></li> <li><a href="#">Topic 3 #3</a></li> <li><a href="#">Topic 4 #4</a></li> <li><a href="#">Topic 5 #5</a></li> <li><a href="#">Topic 6 #6</a></li> </ul> </li> <li><a href="#">Videos</a> <ul class="sub_nav"> <li><a href="#">VIDEOS #1</a></li> <li><a href="#">VIDEOS #2</a></li> <li><a href="#">VIDEOS #3</a></li> </ul> </li> <li><a href="#">Freebies</a> </li> <li><a class="last" href="#">Other Stuff</a> <ul class="sub_nav"> <li><a href="#">Tools #1</a></li> <li><a href="#">Optimization Stuff #2</a></li> <li><a href="#">articles #3</a></li> <li><a href="#">Other Stuff #4</a></li> </ul> </li> </ul>

• Replace # in <a href="#"> with your links and place your tab names in <li><a href="#">Topic 1 #1</a></li>.
• Click save button.
• Now click "save arrangement" tab on the top right to save the settings.
• That's it.

After applying the steps above on your blog, just refresh your blog to see whether it works.

For further information or any queries, please comment in comment area.

To receive updates, subscribe to ViNi Web World.

Read More

Simple Horizontal Navigation Menu

In this topic, I will discuss on how to add a simple Navigation Menu to your Blog or Website with simple steps.

Let's allow visitors to navigate to all the pages in your Blog or Website through a simple and stylish Navigation Menu bar. This allows your visitors to crawl up on all your web pages easily.

let's get started,

Horizontal Navigation Menu Bar

• Go to your "Blogger Dashboard" and click on the blog to which you would like to add the Navigation Menu Bar.
• From the options to left of webpage, select and click on "Layout".
• Next, click "Add a  Gadget".
• A popup window opens, now copy and paste the below code in the content box.

<style> ul { list-style-type:none; margin:0; padding:0; overflow:hidden; } li { float:left; } a:link,a:visited { display:block; width:120px; font-weight:bold; color:#FFFFFF; background-color:#008B8B; text-align:center; padding:4px; text-decoration:none; text-transform:uppercase; } a:hover,a:active { background-color:#20B2AA; } </style> <ul> <li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> </ul>

• Click "Save" to save the Widget.
• Now click on "Save Arrangement" and refresh your blog to see whether it works.

Vertical Navigation Menu Bar 

• If you would like to add vertical navigation menu bar on your blog or website, just copy and paste the below code.
  
  

<style> ul { list-style-type:none; margin:0; padding:0; } a:link,a:visited { display:block; font-weight:bold; color:#FFFFFF; background-color:#008B8B; width:120px; text-align:center; padding:4px; text-decoration:none; text-transform:uppercase; } a:hover,a:active { background-color:#20B2AA; } </style> <ul> <li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> </ul>

Customizing the Navigation Menu Bar:

You can customize the Navigation Menu Bar, by changing the specific values.

• To change the back ground color, change the values here " background-color:#008B8B;". replace "#008B8B" with other values.
• To change the hover background color, change the values here 

 a:hover,a:active
 {
background-color:#20B2AA;
}.

• To change the font color, change the values here font-weight:bold; color:#FFFFFF; .

•  To link the pages to the Menu tabs, just replace "#tab name" with your URL links of the pages in <a href="#home">. For instance, If I would like to add my home page to Home tab, I will paste my link in the place of  " #home " which looks like <a href="http://viniwebworld.blogspot.com/">.
• You can also add extra menu tabs just by adding  "<li><a href="#tab url">your tab name</a></li>" between <ul> and </ul>.

Just apply these simple steps on your blog and check whether it works. For any queries or further information, subscribe to ViNi Web World.

Read More

Facebook Like Box Popup Widget for Blog or Website

Facebook Like box pop-up is very easy to install on your site or blog. I will let you know how to add this simple widget to your website or blog in this topic.

Everyone would like to increase Facebook likes for their websites or blogs. Get this exciting Facebook Like Box Poop-up Widget showing up on your website or blog.

Read More

Facebook Fan or Like Box Widget to blogger's Blog or Website

Facebook like box conjointly referred to as Facebook fan box has become a requirement part for several web site. It permits web site house owners to supply their users with a straightforward thanks to be a part of their facebook community and obtain updates right in their Facebook news feed.

In this topic, I will discuss on how to add Facebook Fan page or Like box widget to your blog or website in simple steps.

Read More

How to Add Custom CSS Styles to Blogger's Blog

In this post, I will discuss on the ways to add CSS designs to your blogger's blog template.

CSS designs square measure necessary for your diary to show contents superbly, you can redesigning any a part of your diary parts with CSS, however wherever to place that code ?

Exactly, you'll get the solution during this tutorial, you'll comprehend it simply with footage demonstration with gradual procedures.

Read More

Prevent Your Blogger's Blog Re-directing from Country Specific Domain or URL's

In this post, I will discuss on the topic how to prevent Blogger from Redirecting to Country-Specific Domains or URL's.

This country primarily based URL redirection will mean some negative consequences to your Blogger journal. For example:

• The social stats – or Facebook Likes, Google +1s and Tweet counts – for your site(Blog or website) stories is also diluted because the URLs for an equivalent story become totally (different|completely different) from different guests.

• You'll have associate degreealogous (the same)drawback if you're mistreatment an external commenting platform like Discuss or Facebook Comments.

Read More

Disable users from choosing and copying text,pictures on Blog or Website

In this section, I will discuss on topic how to disable users from selecting and copying text, images on our Blog or Website. This would definitely help us to get rid from the user's to copy our content.

We can disable the choice of text or pictures on any web site or blog to command others from repetition your contents. It can be done using CSS simply. you simply need to build some tiny customization counting on your wants.

Read More

Learn How To Add floating social media sharing buttons to your Blog

Here is a Post on a way to add a floating social media bar to a blog. I created it into a device, thus you do not need to go in your template HTML to put in (or remove) them. simply drop the total code into a HTML/JavaScript gadget. I even have enclosed Facebook Like, Re Tweet, StumbleUpon, Digg This and Google+ buttons within the bar and every of them comes with a live counter. you'll add additional social bookmarking or sharing buttons later if you want.

Read More

Create Expandable Sections in your Blog Posts on Blogger

Did you ever needed to own sections within your post body that is facultative for the browser to read or see ?

In some cases you would possibly feel want for a district of your article to be hidden and solely visible once the readers desires it to be. however in basic choice we tend to get in Blogger or the other WYSIWG editor this is often insufferable. But wait, it does not imply it cannot be done.

There's nothing special, it simply a hide or show box within that, you'll place content of your selection. it isn't one thing that everybody would possibly want for his or her diary posts however after you want it is not simple to search out easy-to-follow instruction on the web therefore i made a decision to form such a box and place up its directions for blogger.

Read More