Vertical drop down menu with jQuery

jGlideMenu is a vertical menu that can be dragged and dropped so that the reader can place it anywhere, and in addition, he can browse through the tabs in a very peculiar manner that comes with a sliding effect giving a sexy touch.

One of the advantages is that it can store a large number of links and can be removed anytime if we want.

To understand this menu better and to see it in action, visit this demo blog. There we can drag the menu, navigate through its tabs or close.

To add this vertical menu on your blog, just follow these steps:

1) From your Blogger dashboard, go to Template > Edit HTML and before the </head> tag, add these scripts:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js' type='text/javascript'/>
<script src='http://helplogger.googlecode.com/svn/trunk/jQuery.jGlideMenu.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$('#jGlide_001').jGlideMenu({
tileSource : '.jGlide_001_tiles' ,
demoMode : false
}).show();

$('#switch').click(function(){$(this).jGlideMenuToggle();});
});
//]]>
</script>

2) Now paste before ]]></b:skin> these styles:

.jGM_box {
position: absolute; /* Change absolute with fixed if you want it to float */
top: 50px; /* Distance from above */
right: 760px; /* Distance from right */
width: 227px;
height: 317px;
background: #fff; /* Background color */
margin: 0;
padding: 0;
border: 1px solid #ccc; /* Border */
overflow: hidden;
}
.jGM_header {
position: absolute;
top: 0;
left: 0;
height: 18px;
width: 227px;
background: #d1d1d1; /* Background color for the up bar */
color: #fff;
text-align: right;
vertical-align: middle;
line-height: 18px;
cursor: move;
}
.jGM_header a {
margin-right: 12px;
text-decoration: none;
color: #000 !important;
cursor: pointer;
}
.jGM_wrapper {
position: absolute;
top: 19px;
left: 0;
width: 2270px;
height: 288px;
margin: 0;
padding: 0;
border: 0;
}
.jGM_tile {
position: absolute;
top: 0;
left: 7px;
width: 213px;
height: auto;
overflow: hidden;
margin: 0;
padding: 0;
border: 0;
display: block;
}
.jGM_cats {
width: 100%;
height: 64px;
overflow: hidden;
vertical-align: middle;
text-align: left;
}
.jGM_cats h4 {
font-family: Verdana,Arial,serif;
font-size: 1.8em;
margin: 0;
padding: 2px 0;
line-height: 1.8em;
color: #414141;
font-weight: normal;
}
.jGM_cats p {
font-family: Verdana,tahoma,arial;
font-size: 1em; /* Font size of the description */
margin: 0;
padding: 0;
line-height: 1.2em;
color: #858585; /* Description color */
font-weight: normal;
}
.jGM_pager {
height: 18px;
width: 213px;
line-height: 18px;
margin: 0;
border: 0;
padding: 0;
background: #f6f6f6;
text-align: center;
vertical-align: middle;
}
.jGM_pager a {
text-decoration: none;
font-weight: bold;
text-decoration: none;
display: block;
}
.jGM_pager a:hover { background: #d1d1d1; }
.jGM_pager img { border: 0; margin: 6px 0; }
.jGM_content {
width: 213px;
height: 150px;
margin: 1px 0;
padding: 0;
border: 0;
overflow: hidden;
}
.jGM_content a {
font-family: Tahoma,arial;
text-decoration: none;
color: #333 !important;
height: 18px;
width: 100%;
display: block;
line-height: 18px;
padding: 0 0 0 10px;
background-color: #e6e7e9;
margin: 1px 0;
}
.jGM_content a:hover {
color: #fff !important;
background-color: #4D4E67; /* Bar color on mouseover */
}
.jGM_more {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqGMLGp7xBKG6FqNCR_Y1C_W6UUWMP4MvKoqaETmSq7NJaXaNgQOvnugEpEV_NeE_W4gFMJ34U0gF-PBxhdnZIBHVp8lHXiUTXlHJ7aQUca6lwdAsb_Wlog7OqwVBuf0MNuzhUL16wtxw/s1600/arrow.gif);
background-repeat: no-repeat;
background-position: 203px 50%;
}
.jGM_back {
position: absolute;
top: 255px;
right: 0;
height: 18px;
width: 52px;
background: #d1d1d1;
line-height: 18px;
vertical-align: middle;
text-align: center;
margin: 10px 0 0 0;
padding: 0;
border: 0;
z-index: 99;
}
.jGM_back a {
height: 100%;
width: 100%;
text-decoration: none;
color: #000 !important; /* Color of the "Back" link */
display: block;
}
.jGM_back a:hover {
color: #fff !important; /* Color of the "Back" link on mouseover */
background: #4D4E67;
}
.jGM_reset {
position: absolute;
top: 255px;
right: 62px;
height: 18px;
width: 52px;
background: #d1d1d1;
line-height: 18px;
vertical-align: middle;
text-align: center;
margin: 10px 0 0 0;
padding: 0;
border: 0;
z-index: 99;
}
.jGM_reset a {
height: 100%;
width: 100%;
text-decoration: none;
color: #000 !important; /* Color of the "Home" link */
display: block;
}
.jGM_reset a:hover {
color: #fff !important; /* Color of the "Home" link on mouseover */
background: #4D4E67;
}

3) Now go to Layout and paste the structure of the menu inside a HTML/Javascript gadget:

<div class="jGM_box" id="jGlide_001">

<!-- Here all the links of the first level -->
<ul id="tile_001" class="jGlide_001_tiles" title="Menu" alt="Description of the first level">
<li rel="tile_002">Link 1</li>
<li rel="tile_003">Link 2</li>
<li rel="tile_004">Link 3</li>
<li rel="tile_006">Link 4</li>
<li rel="tile_007">Link 5</li>
<li><a href="URL address">Link 6</a></li>
<li><a href="URL address">Link 7</a></li>
<li><a href="URL address">Link 8</a></li>
<li><a href="URL address">Link 9</a></li>
<li><a href="URL address">Link 10</a></li>
<li><a href="URL address">Link 11</a></li>
</ul>

<!-- Here all the links of the second level -->
<ul id="tile_002" class="jGlide_001_tiles" title="Menu" alt="Description of the second level">
<li rel="tile_005">Link 1.1</li>
<li><a href="URL address">Link 1.2</a></li>
<li><a href="URL address">Link 1.3</a></li>
<li><a href="URL address">Link 1.4</a></li>
</ul>

<ul id="tile_003" class="jGlide_001_tiles" title="Menu" alt="Description of the second level">
<li><a href="URL address">Link 2.1</a></li>
<li rel="tile_008">Link 2.2</li>
<li><a href="URL address">Link 2.3</a></li>
</ul>

<ul id="tile_004" class="jGlide_001_tiles" title="Menu" alt="Description of the second level">
<li><a href="URL address">Link 3.1</a></li>
<li><a href="URL address">Link 3.2</a></li>
<li><a href="URL address">Link 3.3</a></li>
</ul>


<ul id="tile_006" class="jGlide_001_tiles" title="Menu" alt="Description of the second level">
<li><a href="URL address">Link 4.1</a></li>
<li><a href="URL address">Link 4.2</a></li>
<li><a href="URL address">Link 4.3</a></li>
</ul>

<ul id="tile_007" class="jGlide_001_tiles" title="Menu" alt="Description of the second level">
<li><a href="URL address">Link 5.1</a></li>
<li><a href="URL address">Link 5.2</a></li>
</ul>


<!-- Here all the links of the third level -->
<ul id="tile_005" class="jGlide_001_tiles" title="Menu" alt="Description of the third level">
<li><a href="URL address">Link 1.1.1</a></li>
<li><a href="URL address">Link 1.1.2</a></li>
</ul>


<ul id="tile_008" class="jGlide_001_tiles" title="Menu" alt="Description of the third level">
<li><a href="URL address">Link 1.2.1</a></li>
<li><a href="URL address">Link 1.2.2</a></li>
</ul>

</div>

Add the URLs of the links and the names of the tabs and that's it.
If you want to add more links to the first level, then add another line like this:

<li><a href="URL address">Link 12</a></li>

If you want to add another level to the link, then the line should be like this:

<li rel="tile_0010">Link 5</li>

Then in the area of ??the second or third level, add a piece like this:

<ul id="tile_0010" class="jGlide_001_tiles" title="Menu" alt="Description of the second level">
<li><a href="URL address">Link 5.1</a></li>
<li><a href="Url address">Link 5.2</a></li>
</ul>

Here you should keep something in mind, if you look closely the link takes the REL attribute which must be the same as the ID we put on the second level, these IDs should not repeat and always be unique.
Yes, it sounds complicated, but once you understand the concept, you'll see that is actually pretty simple.
In the area of ??the styles, there are the parts that can be customized. If you want the menu to be static, let's say you want to add it in the sidebar, then delete the first code of the script that is in italics. And in the CSS styles, remove this part:

position: absolute; /* Change absolute with fixed if you want it to float */
top: 50px; /* Distance above */
right: 760px; /* Distance to the right */

When there are many links then, there will be showing some arrows, so when you mouseover them, it will show the rest of the links either up or down.

Throughout the menu structure we can change the Menu name and the descriptions as well.

As this menu is made with JQuery, it is recommended to verify to have only one version of it.

Making a gadget visible only to the blog administrator

And the post title says it all. There are gadgets that sometimes we want to be visible only to us and not to our blog readers, perhaps a Survey already ended that we want to keep, a counter, or any gadget that while we customize, we don't want anyone else to see until the final result is ready.

 The procedure is simple, we just have to add two lines to our gadget that we want to hide.

First thing to do is to go to Template > Edit HTML and then search for the gadget's code we want to hide. It will be easier using the CTRL + F keys and locating the name of the gadget/widget.

For example, in a HTML/Javascript gadget, we will see a code like this:

<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:includable id='main'>
<span class='item-control blog-admin'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</span>
</b:includable>
</b:widget>

All you have to do is add the parts in red and ready. If you close the session go to your blog you'll not be able to view the gadget that you have hidden, but as soon as you sign in you will see that it is visible to you.
Not all gadgets have the same structure like in my example, but it will be easier to guide you, just place the first code in red just after <b:includable id='main'>

And the second red code just before </b:includable>
Note: to look inside the widget's code, click on the sideways arrow next to the widget's id.

And with that the gadget will be hidden for readers except you.

Upload images and get the URL of the image

As each day there are lots of new users joining the world of blogging, it's important to discuss about some basic topics that would raise some recurring questions such as how we could get the URL of an image?

On the Internet there are many both free as well as paid web hosting services where we can host images, but since we use Blogger, then there is nothing better than using the same hosting service that Google gives us, which is Picasa.

The fastest way to upload an image is by going to the Blogger post editor. From your Blogger Dashboard, go to your blog, then click on the New post button. And preferably, from the Edit HTML tab, click on the image icon.

When the pop-up window opens, click on the Choose files button, browse for your image(s), double click or click on Open and then hit Add selected.

Once it has been uploaded, you will see in the post editor the html code of the image.

That code contains the URL of your picture. The two URLs (Web addresses) that you will see, would look like this:

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu2u0Mh7XwLCO0dFe5fqLC4F3kOtKRo_Az2qSilG4hOBI5IDPvf2WK_c_l_athalCCqboQNyoQpZkWvFrg3fSa1hA6s8kzSbMD2JLfTn5MFfae9yQBFhROnlH-HW-EtWu1iEtYuJaLIxz1/s1600/Bliss-Windows-XP.png" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu2u0Mh7XwLCO0dFe5fqLC4F3kOtKRo_Az2qSilG4hOBI5IDPvf2WK_c_l_athalCCqboQNyoQpZkWvFrg3fSa1hA6s8kzSbMD2JLfTn5MFfae9yQBFhROnlH-HW-EtWu1iEtYuJaLIxz1/s320/Bliss-Windows-XP.png" /></a>

The first is the URL of the image that you need to copy. It's not required to publish this entry where you uploaded the photo; you could as well not publish it, leave it as Draft or delete it. The image will be saved anyway on PicasaWeb (unless when you removed the draft, you have also selected the option to remove the image).

You could also upload image directly from Picasa:
Just login to PicasaWeb, select the album where you want to host the image, and click on Add photos.

Select the image from a location on your computer and upload it.

After it has been uploaded, click OK. Now you will see the thumbnail, along with other photos if there are more.

To get the URL of the image from Picasa, click on the image to open in full size > right click on the picture and select the following option depending on the browser you are using...

On Google Chrome > select Copy Image URL:

If you are using Mozilla Firefox  > select Copy Image Location:

If you are using Opera > select Copy Image URL:

If you are using Safari > select Copy Image Address:

If you are using Internet Explorer (I hope not) > first select Properties, a window will open and there you will find the Address section from where you can select the URL of the image. Copy it:

Once you have selected any of these options, you'll have the URL of the image copied to the clipboard. It's that easy!

Related: How to Optimize Images for Better SEO

Remember that all images you upload on Blogger, are stored in your Picasa account. So, if you find an image previously uploaded on your blog, just go to your Picasa account, select the album containing the name of your blog and there find the picture you need. The method to get the URL of the image is the same as explained above.

Possibly the most simple jQuery Slider

Do you have jQuery in your site or blog and space to insert 10 lines of code? If the answer is yes, and you want to have an automatic slideshow, this is the simplest code I've seen so far. So, having a succession of images added inside a box with a common general container, would give this result:

Related: Image Slider using only CSS

How to add a Simple jQuery Slider to Blogger

Step 1. Adding the JavaScript

If you don't have jQuery, then you should add this line just above the </head> tag to make the slideshow work:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js' type='text/javascript'/>

Where the </head> tag can be found? Go to Template > Edit HTML > click anywhere inside the code area and press the CTRL + F keys. Inside the search box, type this tag and hit Enter to find it:

</head>

Once confident that you have the library in your template, let's add the below script as well, which will make the set of images load as a slider:

<script type="text/javascript">//<![CDATA[
$(function(){
    $('#slider div:gt(0)').hide();
    setInterval(function(){
      $('#slider div:first-child').fadeOut(0)
         .next('div').fadeIn(1000)
         .end().appendTo('#slider');}, 4000);
});
//]]></script>

Finally, save the changes by clicking the "Save Template" button. And now, that we finished adding the scripts, let's add the images to where we want to show...

2. Create/Add the HTML for the Slider

After implementing the above scripts in the template (although, we could add them directly into a gadget, on a page or even inside the post HTML), we will create the slider like the one above.

Use the following HTML structure to show the image slider:

<div id="slider">
    <div><img src="IMAGE_URL"/></div>
    <div><img src="IMAGE_URL"/></div>
    <div><img src="IMAGE_URL"/></div>
</div>

- as a gadget: go to Layout, click "Add a gadget" and choose the "HTML/JavaScript" option
- inside a post/page: create a new post and paste the code inside the HTML box.

So this is all you need. For me, it is quite lightweight and efficient, much more than most libraries that are used nowadays - perhaps, too often.

jQuery Slider Settings

The last three numbers of this slider will allow us to adjust some things. All of them are expressed in milliseconds (4000 = 4 seconds):

fadeOut(0): Time for the outgoing image
fadeIn(1000): Time for the next image
('#slider');},4000): Time spent in each image

How it Works

$('#slider div:gt(0)').hide();
With gt(x) we select all the divs from the number (x). In this case, 0 is the first, so what this line does is to hide (hide()) all the boxes - except the first, that will be the image visible initially.

setInterval(function(){ [what we will do] }, 4000);
We need to reiterate a few things from time to time and we can accomplish this with setInterval - the delay time between each set.

$('#slider div:first-child').fadeOut(0)
Within each of these intervals, we remove (fadeOut) the first box (div:first-child) with a fade out effect, so that images are out of visibility...

.next('div').fadeIn(1000)
...and make the following box (next) to appear gradually (fadeIn).

.end().appendTo('#slider');
Finally, this will show the first image and will move it to the end (appendTo) of the "list".

end() resets the number of elements that we move forward with next(). Thus, the first child made earlier to disappear, is the one that is sent down the stack, and not the image that is currently visible.

3. Customizing the Slider

Even though, we don't need CSS to make the slider work, we can still change its look to display images in different sizes, include captions, or even improve the transition. Here are some ideas:

Text 1

Text 2

Text 3

This is a long text 4

In the above example, we limited the size of the container and prevented the overflow of larger images. Finally, we added rounded borders and centered the slider.

#slider {
overflow: hidden;
width: 500px;
height: 300px;
border:3px solid #242424;
border-radius: 40px;
margin: 0 auto;
padding: 0;
position: relative;
}

If we would have made the parent box of the images positioned absolutely, they would have overlapped each other. For this reason, we have set the "position" of the container to "relative".

As for the images, we will set the width to 100% to make them fill the entire container and the min-height to 300px, to fill up all the available height of the parent box, so that there will be no empty space around them.

#slider > div {
position:absolute;
top:0;
left:0;
}
#slider img {
width:100%;
min-height:300px;
margin:0;
padding:0;
border:0;
}

To add more elements like a text or caption, we will enclose the text in span tags and will set the position to "absolute". And to make the text appear at the bottom of the image, we will use the bottom property:

#slider span {
position: absolute;
bottom: 17px;
display: block;
width: 100%;
margin:0;
padding: 15px 0;
color: #fff;
background: #242424;
font-size: 18px;
line-height:18px;
text-align:center;
}

If you want change the look of this slider - go to Template, hit the Customize button and click on the Advanced > Add CSS tab and paste the above CSS codes inside the empty box.

The HTML markup for this last example, would look like this:

<div id="slider">
<div><a href="Link_URL1"><img src="Image_URL1" /></a><span>TEXT1</span></div>
<div><a href="Link_URL2"><img src="Image_URL2" /></a><span>TEXT2</span></div>
<div><a href="Link_URL3"><img src="Image_URL3" /></a><span>TEXT3</span></div>
</div>

Please note that if you add it inside the post's HTML, don't switch back to the compose tab, as this might remove the span tags of the image captions and the text might not be displayed properly.

Horizontal menu with sub-tabs in two columns for Blogger

This is a very nice horizontal menu in which its sub-tabs are displayed in two columns and is also made with CSS, without any scripts.

The "advantage" so to speak, is that the sub-tabs when arranged in two columns are not very long, so it will be neat and less space along. You can see an example here:

• Tab 1 Title Here
• Tab 2 Title Here
• Tab 3 Title Here
  • Sub Tab 3.1
  • Sub Tab 3.2
  • Sub Tab 3.3
  • Sub Tab 3.4
  • Sub Tab 3.5
  • Sub Tab 3.6
• Tab 4 Title Here
  • Sub Tab 4.1
  • Sub Tab 4.2
  • Sub Tab 4.3
  • Sub Tab 4.4
  • Sub Tab 4.5
  • Sub Tab 4.6
• Tab 5 Title Here
  • Sub Tab 5.1
  • Sub Tab 5.2
  • Sub Tab 5.3
  • Sub Tab 5.4
  • Sub Tab 5.5
  • Sub Tab 5.6
  • Sub Tab 5.7
  • Sub Tab 5.8
• Tab 6 Title Here

Adding A Horizontal Menu With Sub Tabs in Two Columns To Blogger

STEP 1: In Blogger, go to your "Layout" and on the "Page Elements" section.

• Click on the "Add a Gadget" link just under your header image
• From the Gadget's List, select "HTML/JavaScript" option.

STEP 2: Simply copy and paste this ENTIRE code into your widget. Note: Leave the "Title" section of this widget blank.

<div id='menucol'>
<div id='topwrapper'>
<ul id='top'>
<li><a href='http://YOUR URL HERE.com'>Tab 1 Title Here</a></li>
<li><a href='http://YOUR URL HERE.com'>Tab 2 Title Here</a></li>
<li><a class='submenucol' href='#'>Tab 3 Title Here</a>
<ul>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 3.1</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 3.2</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 3.3</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 3.4</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 3.5</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 3.6</a></li>
</ul>
</li>
<li><a class='submenucol' href='#'>Tab 4 Title Here</a>
<ul>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 4.1</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 4.2</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 4.3</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 4.4</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 4.5</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 4.6</a></li>
</ul>
</li>
<li><a class='submenucol' href='#'>Tab 5 Title Here</a>
<ul>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.1</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.2</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.3</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.4</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.5</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.6</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.7</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.8</a></li>
</ul>
</li>
<li><a href='http://YOUR URL HERE.com'>Tab 6 Title Here</a></li>

</ul>
<br class='clearit'/>
</div>
</div>

Customize your main tabs by changing the Tab Titles to whatever you want. Include a URL for each one if you want it to be 'clickable'. If not, you can just put a # sign where it says http://YOUR URL HERE.com

You can add or delete as many of the main tabs as you need, just make sure to copy the entire code for the main tab for each additional tab you want:

<li><a href='http://YOUR URL HERE.com'>Tab 7 Title Here</a>
<ul>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 7.1</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 7.2</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 7.3</a></li>
</ul>
</li>

STEP 3: Now let's go a step further and add the CSS style in our Template

• Go to Template > Edit HTML

• Click on the sideways arrow next to <b:skin>...</b:skin> 

• Then click anywhere inside the code area and search - using CTRL + F keys - for the ]]></b:skin> tag and just above ]]></b:skin> add this code:

/* Horizontal menu with 2 columns
----------------------------------------------- */
#menucol {
width:940px;
height:37px;
background-image: -moz-linear-gradient(top, #666666, #000000);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #666666), color-stop(1.0, #000000));
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#666666,endColorStr=#000000);
border-bottom:1px solid #666666;
border-top:1px solid #666666;
margin:0 auto;padding:0 auto;
overflow:hidden;
}
#topwrapper {
width:940px;
height:40px;
margin:0 auto;
padding:0 auto;
}
.clearit {
clear: both;
height: 0;
line-height: 0.0;
font-size: 0;
}
#top {
width:100%;
}
#top, #top ul {
padding: 0;
margin: 0;
list-style: none;
}
#top a {
border-right:1px solid #333333;
text-align:left;
display: block;
text-decoration: none;
padding:10px 12px 11px;
font:bold 14px Arial;
text-transform:none;
color:#eee;
}
#top a:hover {
background:#000000;
color:#F6F6F6;
}
#top a.submenucol {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicLN-spPV2NXupysnIz11h2caEmDSDtHsR3WrwE7eYGDLPJcW5pjfH4N2Fx4QeadbQ0K3Pd7CLeuMhhgr5awhES4eaj6hE6DMHTBYcDxc8CtriJkmEWchZSBb5QJ1aFSVSN1RFBK1JZUQ/s1600/arrow_white.gif);
background-repeat: no-repeat;
padding: 10px 24px 11px 12px;
background-position: right center;
}
#top li {
float: left;
position: relative;
}
#top li {
position: static !important;
width: auto;
}
#top li ul, #top ul li {
width:300px;
}
#top ul li a {
text-align:left;
padding: 6px 15px;
font-size:13px;
font-weight:normal;
text-transform:none;
font-family:Arial, sans-serif;
border:none;
}
#top li ul {
z-index:100;
position: absolute;
display: none;
background-color:#F1F1F1;
margin-left:-80px;
padding:10px 0;
border-radius: 0px 0px 6px 6px;
box-shadow:0 2px 2px rgba(0,0,0,0.6);
filter:alpha(opacity=87);
opacity:.87;
}
#top li ul li {
width:150px;
float:left;
margin:0;
padding:0;
}
#top li:hover ul, #top li.hvr ul {
display: block;
}
#top li:hover ul a, #top li.hvr ul a {
color:#333;
background-color:transparent;
text-decoration:none;
}
#top ul a:hover {
text-decoration:underline!important;
color:#444444 !important;
}

• Now find (CTRL + F) this line:

/* Tabs

• It will also have some little lines beneath:

/* Tabs
----------------------------------------------- */

• And just below these little lines, delete the code below until you reach at:

/* Columns
----------------------------------------------- */

• Instead of the code that you have removed, add this one:

#crosscol ul {z-index: 200; padding:0 !important;}
#crosscol li:hover {position:relative;}
#crosscol ul li {padding:0 !important;}
.tabs-outer {z-index:1;}
.tabs-inner {padding: 0 0px;}

See this screenshot for more info:

STEP 4: The final step is to Save the Template and you are done!

Visit your blog to see a beautiful navigation menu just below header.
If you have any questions or need help, leave a comment below.

Fade In/Out Page Loading Effect On Blogger Posts

A very common effect in jQuery is the fade effect that hides or shows an element by fading it, and we can use it in many ways as for example in the blog's navigation. The following script does just that, by loading the page with a fading effect when we browse on internal links that are in the blog, such as post titles, labels links, archive, navigation links, etc..

You can see an example in this demo blog, click on the title of any post and see the fading effect when the page is loading.

How To Implement the Fade In Loading Effect

1) To put this fading effect on your blog, go to your Template > Edit HTML :

2) Click anywhere inside the code area and search for the </head> tag using CTRL + F keys:

3) Then, just above </head> add the following code:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$("body").css("z-index", "-10");
$("body").fadeIn(0);

$("a").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(500, redirectPage); });
function redirectPage() {
window.location = linkLocation;
}
});
//]]>
</script>
<style>
html {
background-color: #F2F2F2; /* Color fading */
}
</style>

4) Save the changes and that's it. In green you can see where to change the color that fades on a loading page.

The original script hides the body of the page while loading, I prefer to change that property with a negative z-index to avoid problems with the search engine robots that may effect the positioning.

Problems?

Consider that such effects could increase the blog loading time, so I recommend using it only when your blog loads fast and does not have too many scripts.

If you already use another version of jQuery remove the other, leaving only this which will be readed first.

If you are using Mootools or Scriptaculous, then you have to make some modifications to the code in order to be compatible.
If you have another script with a fade effect, then it could interfere with this and you might not see anything on the page except the color fading, in such cases it is better without this script.

You can also use this effect only on some links, for example, if you want to appear only when you click on the post titles in the navigation links (older posts and newer posts), and on the top tabs, then replace this line:

$("a").click(function(event){

With this:

$(".post-title a, .blog-pager-older-link, .blog-pager-newer-link, .tabs").click(function(event){

In some cases, the page can load for a second and then load with the fade effect, this may be "normal" because the browser is slow to read the script on page load.

Apart from these drawbacks, I think it's a very elegant way to load blog pages while browsing them, don't you think?

Using the :before and :after Pseudo Elements on Sidebar Titles

This is another method of using the :after and :before properties and it will work without too many problems in any browser, including IE8. What this trick will do is to divide the header bar into left and right sections, where the left will contain an explanatory title and the right, a related link.

The idea of generating Adobe-like Arrow Headers was actually discussed by css-tricks and adapted to Blogger.

How to Add Adobe-like Headers to Blogger

Step 1. Log in to your Blogger dashboard > go to Template > Edit HTML, then click anywhere inside the code area to search - using the CTRL + F keys - for the following tag:

</head>

Step 2. Just above it, copy and paste this code:

 <style>
.module h2 {
  background-color: #D5D5D5;
  border-radius: 20px 0 0 20px;
  color: #FFFFFF;
  font-family: Verdana;
  font-size: 14px;
  line-height: 32px;
  margin: 0;
  padding: 0 0 0 20px;
  text-shadow: 2px 1px 1px #222;
}

.module h2 a {
    border-left: 5px solid #ffffff;
    color: #101921;
    float: right;
    font-size: 14px;
    text-decoration: none;
    text-shadow: none;
    padding: 0 10px;
    position: relative;
   -moz-transition: padding 0.1s linear;
   -webkit-transition: padding 0.1s linear;
   -ms-transition: padding 0.1s linear;
   -o-transition: padding 0.1s linear;
}
.module h2 a:hover {
  padding: 0 32px;
}

.module h2 a:before, .module h2 a:after {
    content: &quot;&quot;;
    height: 0;
    position: absolute;
    top: 50%;
    width: 0;
}
.module h2 a:before {
    border-bottom: 8px solid transparent;
    border-right: 8px solid #ffffff;
    border-top: 8px solid transparent;
    left: -12px;
    margin-top: -8px;
}
.module h2 a:after {
    border-bottom: 6px solid transparent;
    border-top: 6px solid transparent;
    left: -6px;
    margin-top: -6px;
}

.module.blue h2 a {background-color: #A2D5EC;}
.module.blue h2 a:hover {background-color: #C5F0FF;}
.module.blue h2 a:after {border-right: 6px solid #A2D5EC;}
.module.blue h2 a:hover:after {border-right-color: #C5F0FF;}

.module.yellow h2 a {background-color: #FCE98D;}
.module.yellow h2 a:hover {background-color: #FFD700;}
.module.yellow h2 a:after {border-right: 6px solid #FCE98D;}
.module.yellow h2 a:hover:after {border-right-color: #FFD700;}

.module.green h2 a {background-color: #bada55;}
.module.green h2 a:hover {background: #C7E176;}
.module.green h2 a:after {border-right: 6px solid #bada55;}
.module.green h2 a:hover:after {border-right-color: #C7E176;}

.module.red h2 a {background-color: #F0A5B5;}
.module.red h2 a:hover {background-color: #FFC7D2;}
.module.red h2 a:after {border-right: 6px solid #F0A5B5;}
.module.red h2 a:hover:after {border-right-color: #FFC7D2;}
</style>

Step 3. Save the Template.

Screenshot:

Step 4. Now go to Layout and Add a new HTML/JavaScript Gadget with one of the codes below for each of the widget title:

Background in blue:

<div class="module blue">
<h2>Title in <a href="Link URL">Blue</a></h2>
</div>

Background in yellow:

<div class="module yellow">
<h2>Title in <a href="Link URL">Yellow</a></h2>
</div>

Background in green:

<div class="module green">
<h2>Title in <a href="Link URL">Green</a></h2>
</div>

Background in red:

<div class="module red">
<h2>Title in <a href="Link URL">Red</a></h2>
</div>

Note: Change "Title in" text with your widget's title and Blue, Yellow, Green and Red with the text on the right, then add a Link URL to it.
Step 5. After you saved the HTML/Javascript gadgets containing the codes above, drag and drop them just above the widgets you want to show... and Save the Arrangement.

DEMO

You can see how the sidebar titles has been replaced with some cool header bars on this demo blog.