Create Drop-Down Menu in Blogger

Blogger is one best free platforms. You just have to have a Google ID(Gmail account) to be able to create a blogger account. It comes with few default templates & layouts which one can customize however they want. You don't necessarily have to have a knowledge of HTML &CSS languages, but having a little knowledge is going to help you in further customization. The HTML widget lets you add any type of customized web elements like the menu bar, sidebar et.al., & the Add CSS option in the Blogger template designer lets you add style's to the HTML code.

There was a Youtuber & blogger who have uploaded a good amount of helpful tutorials 2 years ago about how to set up a blog and customize it the way you want it. Though her blogger site doesn't have all the resources she presents in her video's, the video's itself are pretty helpful for a newbie.

In one of her video's, she explains in detail about how to Create Menu bar's in Blogger & provide a drop down menu to the menu items.

Unfortunately, the HTML & CSS code that she has mentioned in the video is not available on her blog, but you can find a similar code in one of the comments by DreamerBros, which is

Try this codes guys...not the same code but something is better than nothing.

First Code(HTML code)
<div id='menubar'> <ul id='menus'> <li> <a href='Link'>Home</a> </li> <li> <a href='Link'>About Me</a> </li> <li> <a href='Link'>MenuItem</a> <ul> <li><a href='Link'>SubMenuItem</a></li> <li><a href='Link'>SubMenuItem</a></li> <li><a href='Link'>SubMenuItem</a></li> </ul> <li> <a href='Link'>MenuItem</a> <ul> <li><a href='Link'>SubMenuItem</a></li> <li><a href='Link'>SubMenuItem</a></li> <li><a href='Link'>SubMenuItem</a></li> </ul> <li> <a href='#'>MenuItem</a> <ul> <li><a href='Link'>SubMenuItem</a></li> <li><a href='Link'>SubMenuItem</a></li> <li><a href='Link'>SubMenuItem</a></li> </ul> </li> </ul> </div> Search for ]]></b:skin> and Paste the second code just above ]]></b:skin>
Second Code:(CSS code) /-------- Begin Drop Down Menu ~~-----~~/ #menubar { background: #8E8E8E; width: 840px; color: #FFF; margin: 0px; padding: 0; position: relative; border-top:1px solid #B2FFFF; height:35px; } #menus { margin: 0; padding: 0; } #menus ul { float: left; list-style: none; margin: 0; padding: 0; } #menus li { list-style: none; margin: 0; padding: 0; border-left:1px solid #1A6680; border-right:1px solid #1A6680; height:35px; } #menus li a, #menus li a:link, #menus li a:visited { color: #FFF; display: block; font:normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif; margin: 0; padding: 9px 12px 10px 12px; text-decoration: none; } #menus li a:hover, #menus li a:active { background: #130000; /* Menu hover */ color: #FFF; display: block; text-decoration: none; margin: 0; padding: 9px 12px 10px 12px; } #menus li { float: left; padding: 0; } #menus li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 160px; margin: 0; padding: 0; } #menus li ul a { width: 140px; } #menus li ul ul { margin: -25px 0 0 160px; } #menus li:hover ul ul, #menus li:hover ul ul ul, #menus li.sfhover ul ul, #menus li.sfhover ul ul ul { left: -999em; } #menus li:hover ul, #menus li li:hover ul, #menus li li li:hover ul, #menus li.sfhover ul, #menus li li.sfhover ul, #menus li li li.sfhover ul { left: auto; } #menus li:hover, #menus li.sfhover { position: static; } #menus li li a, #menus li li a:link, #menus li li a:visited { background: #B3B3B3; /* drop down background color */ width: 120px; color: #FFF; display: block; font:normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif; margin: 0; padding: 9px 12px 10px 12px; text-decoration: none; z-index:9999; border-bottom:1px solid #1A6680; } #menus li li a:hover, #menusli li a:active { background: #130000; /* Drop down hover */ color: #FFF; display: block; margin: 0; padding: 9px 12px 10px 12px; text-decoration: none; } /-------- End Drop Down Menu ~~-----~~/

There are other videos & blogs by few other bloggers too, who use a different but similar code.

1.All in One

All in One

The code provided in the video and blog is

HTML code

<ul id='cssnav'>
<li class="active"><a href='http://satunes4u.blogspot.com/'>Home</a></li>
<li class="sub"><a href=''>Menu-1</a>
<ul>
<li><a href=''>Submenu-1</a></li>
<li><a href=''>Submenu-2</a></li>
<li><a href=''>Submenu-3</a></li>
</ul>
</li>
<li><a href=''>Menu-2</a>
<ul>
<li><a href=''>Submenu-1</a></li>
<li><a href=''>Submenu-2</a></li>
<li><a href=''>Submenu-3</a></li>
<li><a href=''>Submenu-4</a></li>
</ul>
</li>
<li><a href=''>Menu-4</a>
<ul>
<li><a href=''>Submenu-1</a></li>
<li><a href=''>Submenu-2</a></li>
<li><a href=''>Submenu-3</a></li>
<li><a href=''>Submenu-4</a></li>
<li><a href=''>Submenu-5</a></li>
<li><a href=''>Submenu-6</a></li>
</ul></li>
<li><a href=''>Menu-5</a>
<ul>
<li><a href=''>Submenu-1</a></li>
<li><a href=''>Submenu-2</a></li>
<li><a href=''>Submenu-3</a></li>
</ul>
</li>
<li><a href=''>Menu-6</a>
</li></ul>

CSS code

uot;Trebuchet MS", Trebuchet, Verdana, sans-serif; font-size: 13.2px; height: 300px; overflow: auto; width: 529px;"> /* ----- CSS Nav Menu Styling ----- */

#cssnav {
margin: 0px 0 0 -10px;
padding: 0px 0px 0px 0px;
width: 1050px; /* Set your width to fit your blog */
font: $(tabs.font); /* Template Designer - Change Font Type, Size, Etc */
color: $(tabs.text.color); /* Template Designer - Change Font Size */
}

#cssnav ul {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none; /* Template Designer - Change Menu Background */
height: 20px; /* Change Height of Menu */
list-style: none;
margin: 0px;
padding: 0px;
}

#cssnav li {
float: left;
padding: 0px;
}

#cssnav li a {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none; /* Template Designer - Change Menu Background */
display: block;
margin: 0px;
font: $(tabs.font); /* Template Designer - Change Font Type, Size, Etc */
text-decoration: none;
}

#cssnav > ul > li > a {
color: $(tabs.text.color); /* Template Designer - Change Font Color */
}

#cssnav ul ul a {
color: $(tabs.text.color); /* Template Designer - Change Color */
}

#cssnav li > a:hover, #cssnav ul li:hover {
color: $(tabs.selected.text.color); /* Template Designer - Change Font Color on Hover */
background-color: $(tabs.selected.background.color); /* Template Designer - Change Font Background on Hover */
text-decoration: none;
}

#cssnav li ul {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none; /* Template Designer - Change Menu Background */
display: none;
height: auto;
padding: 0px;
margin: 0px;
position: absolute;
width: 200px; /* Change Width Of DropDown Menu */
z-index:9999;
}

#cssnav li:hover ul {
display: block;
}

#cssnav li li {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none; /* Template Designer - Change Background */
display: block;
float: none;
margin: 0px;
padding: 0px;
width: 200px; /* Change Width Of DropDown Menu */
}

#cssnav li:hover li a {
background: $(tabs.selected.background.color); /* Template Designer - Change Background of Link on Hover */
}

#cssnav li ul a {
display: block;
height: auto;
margin: 0px;
padding: 10px;
text-align: left;
}

#cssnav li ul a:hover, #cssnav li ul li:hover > a {
color: $(tabs.selected.text.color); /* Template Designer - Change Text Color on Hover */
background-color: $(tabs.selected.background.color); /* Template Designer - Change Background on Hover */
border: 0px;
text-decoration: none;
}
#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 14px;padding: 5px 12px;margin-right:5px; color: #666; background-color:#eee;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#359BED;text-decoration:none;color: #fff;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#359BED;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;}

2.Random Juvament

Random Juvament

The code posted in his blog is

HTML code

<div id='menubar'>
<ul id='menus'>
<li>
<a href='#'>MenuItem</a>
</li>
<li>
<a href='#'>MenuItem</a>
</li>
<li>
<a href='#'>MenuItem</a>
</li>
<li>
<a href='#'>MenuItem</a>
<ul>
<li><a href='#'>SubMenuItem</a></li>
<li><a href='#'>SubMenuItem</a></li>
<li><a href='#'>SubMenuItem</a></li>
</ul>
</li>
</ul>
</div>

CSS code

/*-------- Begin Drop Down Menu -------*/

#menubar {
background: #8E8E8E;
width: 840px;
color: #FFF;
margin: 0px;
padding: 0;
position: relative;
border-top:1px solid #B2FFFF;
height:35px;
}

#menus {
margin: 0;
padding: 0;
}

#menus ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}

#menus li {
list-style: none;
margin: 0;
padding: 0;
border-left:1px solid #1A6680;
border-right:1px solid #1A6680;
height:35px;
}
#menus li a, #menus li a:link, #menus li a:visited {
color: #FFF;
display: block;
font:normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif; margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}

#menus li a:hover, #menus li a:active {
background: #130000; /* Menu hover */
color: #FFF;
display: block;
text-decoration: none;
margin: 0;
padding: 9px 12px 10px 12px;
}

#menus li {
float: left;
padding: 0;
}

#menus li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0;
padding: 0;
}

#menus li ul a {
width: 140px;
}

#menus li ul ul {
margin: -25px 0 0 160px;
}

#menus li:hover ul ul, #menus li:hover ul ul ul, #menus li.sfhover ul ul, #menus li.sfhover ul ul ul {
left: -999em;
}

#menus li:hover ul, #menus li li:hover ul, #menus li li li:hover ul, #menus li.sfhover ul, #menus li li.sfhover ul, #menus li li li.sfhover ul {
left: auto;
}

#menus li:hover, #menus li.sfhover {
position: static;
}

#menus li li a, #menus li li a:link, #menus li li a:visited {
background: #B3B3B3; /* drop down background color */
width: 120px;
color: #FFF;
display: block;
font:normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border-bottom:1px solid #1A6680;
}

#menus li li a:hover, #menusli li a:active {
background: #130000; /* Drop down hover */
color: #FFF;
display: block; margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}

/*-------- End Drop Down Menu -------*/

Power Query - "SUBSTITUTE" Function: Remove/Replace multiple values in a column in One Step.

Often times, when you get data from a source, there will most probably be something incorrect that needs to be fixed using an ETL process of Power Query. And most of those transformations would require either Replacing or Removing string's that are not necessary. For example, if you extract any financial data from a source which has multiple currency symbols, there's a chance that the numbers get extracted along with the currency symbols like "$700"/"€700" instead of 700. And these type of cases makes it tough to Transform the Data to our wish as the value will be considered as a text instead of a number. In those type of cases, we would most likely have to create multiple steps to remove the multiple currency symbols from the Column. But thanks to the solution provided by Marcel for one of the questions posted on Stack Overflow, with a little manipulation of the Query language (M), we can replace/Remove multiple strings in one step using the List. ...

Guru-G

Search This Blog