How to Add Simple Floating Drop Down Menu in Blogger with HTML & CSS

Blogging is one of the simple, easy & an interesting way to share your ideas, technology, tricks, tips & information with the world. Blogger.com provides free blogs & templates. Now you can easily make your free blog with the help of blogger. There are millions of people who are writing blogs & are also liked by the readers.This blog - Wide Info Blog provides blogger tips, tricks & tutorials. Previously we have discussed about AdSense Code Converter.
   Now, In this article we will learn - How to Add Simple Floating Drop Down Menu in Blogger with HTML & CSS. Here are the steps for this: 

Step - 1. Login into your blogger account & select the blog into which you want to add a floating Drop Down Menu.

Step - 2. Now Go to Layout Section & click to add "Add a Gadget" tab. Now Click on the "HTML / JavaScript" widget to add.

Step - 3. Now copy the code given below & paste into the HTML / JavaScript widget >> "Click Save" & you are done.

Code :

<style>#sbfixed {position:fixed;top:-10px;left:0;width:100%;height:25px;z-index:999;}#sbfixedinner{text-

align:center;background:transparent;height:25px;position:relative;z-index:999;}* html, * html body{overflow-y:hidden;height:100%;}* html #sbfixedinner

{margin-right:-113px;voice-family: ""}""; voice-family:inherit; }* html #sbfixedinner{margin-right:2px;}* html #sbfixed {position:absolute;}#sbtop-wrapper

{background:black;width:100%;float:left;margin:0 auto;padding:0 auto;-moz-box-shadow:0 3px 3px 3px rgba(0,0,0,0.4);-webkit-box-shadow:0 3px 3px 3px rgba

(0,0,0,0.4);border-bottom:1px solid #444;border-top:3px solid rgb(72, 161, 250);}#sbtopbar{width:1050px;height:15px;margin:0 auto}#sbtop{width:100%}

#sbtop,#sbtop ul{list-style:none;font-family:Arial, serif;margin:0;padding:0}#sbtop a{display:block;text-decoration:none;font:bold 15px Arial;text-

transform:none;color:white;border-right:1px solid #FFFFFF;border-left:1px solid #FFFFFF;padding:7px 7px 7px}#sbtop a.arrow{background-image:url

(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwYuXlztSJQGPH0FM5BLjOS-jih-PXPrYO52VLGNgdfIZqTWJI5kyR2azn_cehm_gqBhwc3AH91xwxmhLeGXoV7q6RIwZCRJepRHzPMRWcLK3_6v53DmnvglXKstVSl4buyPT0yD29vTA/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right 

center;padding:7px 7px 7px 2px}#sbtop li{float:left;position:static;width:auto}#sbtop li ul,#sbtop ul li{width:170px}#sbtop ul li a{text-

align:left;color:#0000FF;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 2px}#sbtop li ul{z-

index:100;position:absolute;display:none;background:#222;padding-bottom:0px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.4);-webkit-box-shadow:0 2px 2px rgba

(0,0,0,0.4)}#sbtop li:hover a,#sbtop a:active,#sbtop a:focus,#sbtop li.hvr a{background-color:#222;color:#fff}#sbtop li:hover ul,#sbtop li.hvr ul

{display:block}#sbtop li:hover ul a,#sbtop li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none}#sbtop li ul li.hr{border-bottom:0px 

solid #333;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:0px 0}#sbtop ul a:hover{background-color:rgb(72, 161, 250)!

important;color:#fff!important;text-decoration:none}#sbtop a span,#sbtop a.arrow span{font:bold 12px Arial;color:#888;display:block;line-height:12px;text-

transform:uppercase;text-shadow: 1px 2px 2px #000}#sbtop li:hover a span,#sbtop li:hover a.arrow span{color:#f1c822}</style>

<div id="sbfixed"><div id="sbfixedinner"><div id="sbtop-wrapper"><div id="sbtopbar">

<ul id="sbtop">

<li><a href='#'>Home Page</a></li>

<li><a href='#'>DropDown 1</a>

<ul>

<li><a href='#'>DropDown 1.1</a></li>

<li><a href='#'>DropDown 1.2</a></li></ul></li>
<li><a href='#'>DropDown 2</a></li>

<li><a href='#'>DropDown 3</a></li>

<li><a href='#'>DropDown 4</a>

<ul>

<li><a href='#'>c</a></li>

<li><a href='#'>DropDown 4.2</a></li>

<li><a href='#'>DropDown 4.3</a></li>

<li><a href='#'>DropDown 4.4</a></li>

<li><a href='#'>DropDown 4.5</a></li>

</ul>

</li>

<li><a href='#'>DropDown 5</a></li>

<li><a href='#'>DropDown 6</a></li>

<li><a href='#'>DropDown 7</a></li>

<li><a href='#'>DropDown 8</a></li>

<li><a href='#'>DropDown 9</a></li>

</ul></div></div></div></div>

Now you can visit you blog. You will see a Floating Drop Down Menu bar on the top. You can customize this drop Down menu as shown below:

1. Replace # with your page or label links.
2. Replace DropDown 1 by the text you want to display.
3. Replace DropDown 1.1 by Menu Text you want to Add in Drop Down.

Keep Learning & sharing with your friends. Any Question ???. Ask in the Comments. For latest blogs, visit - Wide Info blog

Read More »

How to Add a Simple Contact Form in Blogger

Blogger is one of the interesting & simple way to share information. Previously we have discussed the Topic  How to Add Custom CSS to Blogger. To see Latest Blogs Click WideInfoBlog. ( Keep Visiting & Sharing ). Today We are discussing - How to Add a Simple Contact Form in Blogger. Contact form is one of the simple, quick & easy way to interact with your audience. Now contact form is also available in blogger. Now We are discussing - How to Add Contact Form in Blogger step by step.

Steps for Adding Contact Form to Blogger:

Step - 1. Login into your blogger account & Select the blog to which you want to add contact form.

Step - 2. Now click On the More Options Tab (DropDown) as Shown below & Now Click On the Layout Tab.

Step - 3. In the Layout Section Click On the Add a Gadget (In Sidebars & Footer Widgets where you want to add your contact form)

Step - 4. Now a popup window will open as shown in the fig. given below & click on the More Gadgets Tab.

Step - 4. When you click on More Gadgets Tab the list of Gadgets Changes & Now on the top you will see a Contact form Gadget. 

Step - 5. Now Click On + icon in front of this Contact form. Click Save button & you are done. 

Now the Last step is to open your blog & you will see a simple Contact form as shown below.

These are the simple steps for adding contact form to your blog. Please share the information with your friends. Keep learning & sharing. Click Wide Info Blog for latest blogs. if U have any question ask in comments.

Read More »