New 2

- See more at: http://www.helperblogger.com/2012/06/create-multi-level-drop-down-menu-in.html#sthash.ynIqQ2aj.dpuf

Sunday, June 30, 2013

Hiroshima, Mon Amour.

I Lost My Husband to Cancer

Hiroshima, Mon Amour.

By: sweetmeisje
Written on April 8th, 2010
You saw nothing in Hiroshima. Nothing.
Cancer, and death. Cancer, unfairness, death, solitude, pain, and war inside a body that was not designed to fight this threat. I saw nothing, and yet, felt how every day the deadly potency of the illness in his body consumed it. Like the Hiroshima bomb, this cancer was dropped in his heart and destroyed it completely to the core. 


I saw the patience, the innocence, the apparent meekness with which the temporary survivors of Hiroshima adapted to a fate so injust that the imagination, usually so fertile, is silent before it.
After they informed of his deadly cancer, and later the methastasis in his eyes, I tried hard to be strong while watching him dying slowly. No, it was not a death like in Hiroshima, where the city was suddenly lifted and then burned to its roots, but to me the effect was as impressive and anihilating. It was killing me too, eating all the flesh and bone slowly, and removing the spirit. He was always smiling, though, he was always happy and energetic, and I tried to keep up with his pace, as usual. "Everything will be alright", he told me repeatedly. Deep inside I knew it wouldn't... not then, not ever again...
 
Like you, I am endowed with memory. I know what it is to forget.
Like you, I too have struggled with all my might, not to forget. Like you, I forgot.
Like you, I longed for a memory beyond consolation, a memory of shadows and stone. 
 
For my part I struggled everyday with all my might against the horror of no longer understanding the reason to remember. Why deny the obvious necessity of remembering?
And yet the pain of your skin missing on mine, your voice that I cannot hear anymore, the memories fading slowly about your laughter, the feeling of your fingers on my back, your scent on the shirts hurts so much sometimes I wish I could forget... but no, I promised you I would never forget, and I never will. 
I meet you. I remember you. Who are you? You're destroying me. You're good for me. How could I know this city was tailor made for love? How could I know you fit me like a glove? I like you. How unlikely. How low all of a sudden. How sweet. You cannot know.
I don't scream anymore. I've become reasonable. They say "she's become reasonable".
Of course, as everyone says, life goes on. I must get up every morning, and be as well as possible, fulfill my job responsibilities, and then go back home, to spend a nice evening there, trying to enjoy the sensations. The problem is now everything is numb. Not completely, but it is not how it used to anymore. Now it is numb and scarred, and that is how I found the strength to continue without you, knowing your skin is forever unreachable.
I yearn for you so badly. I can't bear it anymore.
It hurts deep inside missing you... needing you by my side. Listening to our songs, and crying, knowing all is lost, and forever. I can see hope, and light at the end of the tunnel. I have found love, and honesty, and friendship, and I am grateful, but still it is unbearable to miss you like I do now, and always will.
And then one day, my love, your eternity comes to an end. My life that goes on, your death that goes on.
I stayed by his body all that day, and all the following night. He grew cold beneath me, little by little. He took so long to die! I was lying on top of him. The moment of his death actually escaped me, because at that moment, and even afterwards, I couldn't find the slightest difference between his dead body and my own. His body and mine seemed to me to be one and the same.
We were in a hotel, our favourite hotel, where we had spent the night after a great dinner. We woke up early, as always. I am not a morning person, but feeling he was drifting away from my hands like water, I wanted to take any chance everyday to stare deep into his eyes and know he was real, that he was with me still, holding, kissing, calling my name swiftly. We called and ordered breakfast, and had it while holding hands, drinking our glasses with champagne while giggling and getting naked, and excited. 
Soon I was over him, like so many other times, and kissed him deeply. "When I first saw you I fell in love, and you smiled because you knew". My exquisite lover, reciting Shakespeare while making love, while sweating, staring deep into my eyes. I could feel both our bodies trembling, shaking, with pleasure, and suddenly he felt it, his heart finally failing on him. He grabbed me close, and kissed me, while tears filled his beautiful blue eyes. "Promise me you will be happy". I couldn't respond, as I felt life left him slowly, and consciousness of this world and its problems were not in his mind anymore. 
I held on to him for a while, trying to hear another heartbeat on his chest, another slow breath from his mouth. Nothing.
Devour me, deform me to your likeness, so that no one after you will ever again understand the reason for so much desire. We'll be alone, my love. Night will never end.
The complicity and secrets we share, my love, will always be only ours, and they went away with you forever...
Time will pass. Only time. And a time will come when we can no longer name what it is that binds us. Its name will gradually be erased from our memory until it vanishes completely.

Saturday, June 29, 2013

Multi Drop Down CSS Menu for Blog and HTML Sites

Multi Drop Down CSS Menu for Blog and HTML Sites

In this Post I am going to tell you how to add a beautiful and Professional Drop Down Menu any Site or Blog,as i told this is Css drop-down Menu and in Five different Color :-Orange,Red,Green,Blue and Purple.
Note:-If you want this menu in different color you ask in Comment ,i can make it for you .

CSS EFFECT..

Now First we will add the CSS Code in Blogger Template ..  so follow my Simple below Instruction..
  • Login to Blogger  >> Click on drop down menu >>then select "Template".
  • Now you will see  "EDIT HTML" Button ,Click on it >>  and then click Proceed button .
  • Now find this tag </head> by using CTRL +
  • Paste below code Just Before/above </head> tag  and Save the Template.

<link charset='utf-8' href='http://cloud.github.com/downloads/egytricks/codes/stencil.menu.css' media='screen' rel='stylesheet' title='no title'/>
<link charset='utf-8' href='http://cloud.github.com/downloads/egytricks/codes/stencil.menu.colors.css' media='screen' rel='stylesheet' title='no title' type='text/css'/>

MENU CODE

Now we can  use below code to add menu any where we want. you can add it as HTML WIDGET in blogger layout,But i will  Recommend You to Replace this menu code in your Blogger Template with already existing one., or add below code before or after already existing one menu code ..

<div class="navigation" style="z-index: 9;">
<ul class="stn-menu red">
<li><a href="javascript:;">Item #1</a></li>
<li class="hasSubNav hasArrow">
<a href="javascript:;">Item #2</a>
<span class="arrow"></span>

<ul>
<li><a href="javascript:;">Sub Item</a></li>
<li><a href="javascript:;">Sub Item</a></li>
<li>
<a href="javascript:;">Sub Item</a>
<span class="arrow"></span>

<ul>
<li><a href="javascript:;">Sub Item</a></li>
<li><a href="javascript:;">Sub Item</a></li>
<li><a href="javascript:;">Sub Item</a></li>
<li>

<a href="javascript:;">Sub Item</a>
<span class="arrow"></span>

<ul>
<li><a href="javascript:;">Sub Item</a></li>
<li><a href="javascript:;">Sub Item</a></li>
<li><a href="javascript:;">Sub Item</a></li>
<li><a href="javascript:;">Sub Item</a></li>
</ul>
</li>
</ul>

</li>
<li><a href="javascript:;">Sub Item</a></li>
<li><a href="javascript:;">Sub Item</a></li>
</ul>
</li>
<li class="hasSubNav hasArrow">
<a href="javascript:;">Item #3</a>
<span class="arrow"></span>

<ul>
<li><a href="javascript:;">Sub Item</a></li>
<li><a href="javascript:;">Sub Item</a></li>
<li><a href="javascript:;">Sub Item</a></li>
<li><a href="javascript:;">Sub Item</a></li>
</ul>
</li>
<li class="hasSubNav hasArrow">
<a href="javascript:;">Item #4</a>
<span class="arrow"></span>

<ul>
<li><a href="javascript:;">Sub Item</a></li>
<li><a href="javascript:;">Sub Item</a></li>
<li><a href="javascript:;">Sub Item</a></li>
<li><a href="javascript:;">Sub Item</a></li>
</ul>

</li>
<li><a href="javascript:;">Item #5</a></li>
</ul>
</div>

CHANGING COLOR OF MENU

To change the you have to find
<ul class="stn-menu red">

and Replace with

For Orange
<ul class="stn-menu">


For Red
<ul class="stn-menu red">


For Green
<ul class="stn-menu green">


For Blue
<ul class="stn-menu blue">


For Purple
<ul class="stn-menu purple">

Hope you Like this Menu ...You See a Live Demo Here

NOTE:-DON'T COPY THIS POST OR CONTENT WITHOUT LINK-BACK THIS POST ,I HAVE SPENT HOURS ON THIS ... 
 
http://1vikash.blogspot.com/2012/12/multi-drop-down-css-menu-for-blog-and.html

Tuesday, June 18, 2013

Create Horizontal Navigation Menu With Drop Down Submenus Using CSS

Create Horizontal Navigation Menu With Drop Down Submenus Using CSS

2
The following drop down menu is made only with CSS, is a horizontal menu with sub-tabs and the right side has a rounded search. A menu is handy for those who do not require complex menus or prefer not to use one that requires scripts and/or too many images, also the installation and customization is quite simple, and to top it off is quite functional.

To see this drop down menu in action, visit this demo blog

blogger menu, drop down menu, css menu

Prior to doing anything, if you are using a Template made through Blogger Template Designer, then you should consider doing these changes in the template, otherwise the menu might not be displayed correctly:

From your Blogger's Dashboard, go to Template (make a backup < see the screenshot) > Edit HTML:


and search (CTRL + F) for the following line:

<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>

Screenshot

Remove the code in red.
You may have many parts as the one in red, delete all you find.

....then find this section in your template:
/* Tabs
----------------------------------------------- */

...and remove all that is within it, until you reach to the Headings part.

/* Tabs
----------------------------------------------- */
.tabs-outer {
overflow: hidden;
position: relative;
background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll 0 0;
}

#layout .tabs-outer {
overflow: visible;
}

.tabs-cap-top, .tabs-cap-bottom {
position: absolute;
width: 100%;

border-top: 1px solid $(tabs.border.color);

}

.tabs-cap-bottom {
bottom: 0;
}

.tabs-inner .widget li a {
display: inline-block;

margin: 0;
padding: .6em 1.5em;

font: $(tabs.font);
color: $(tabs.text.color);

border-top: 1px solid $(tabs.border.color);
border-bottom: 1px solid $(tabs.border.color);
border-$startSide: 1px solid $(tabs.border.color);
}

.tabs-inner .widget li:last-child a {
border-$endSide: 1px solid $(tabs.border.color);
}

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
background: $(tabs.selected.background.color) $(tabs.background.gradient) repeat-x scroll 0 -100px;
color: $(tabs.selected.text.color);
}

/* Headings
----------------------------------------------- */

Then add this to where the code has been removed (instead of the code in green):
#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 .widget ul, .tabs .widget ul {overflow: visible;}
Having done this, we can finally add our menu.

How To Add Horizontal Drop Down Menu to Blogger

To put this horizontal menu with submenus in your blog, then follow the next steps:

Step 1. From Template, go to Edit HTML and just above ]]></b:skin> paste these styles:
/* Horizontal drop down menu
----------------------------------------------- */
#menuWrapper {
width:100%; /* Menu width */
height:35px;
padding-left:14px;
background:#333; /* Background color */
border-radius: 10px; 
}
.menu {
padding:0;
margin:0;
list-style:none;
height:35px;
position:relative;
z-index:5;
font-family:arial, verdana, sans-serif;
}
.menu li:hover li a {
background:none;
}
.menu li.top {display:block; float:left;}
.menu li a.top_link {
display:block;
float:left;
height:35px;
line-height:34px;
color:#ccc;
text-decoration:none;
font-family:"Verdana", sans-serif;
font-size:12px; /* Font size */
font-weight:bold;
padding:0 0 0 12px;
cursor:pointer;
}
.menu li a.top_link span {
float:left;
display:block;
padding:0 24px 0 12px;
height:35px;
}
.menu li a.top_link span.down {
float:left;
display:block;
padding:0 24px 0 12px;
height:35px;
}
.menu li a.top_link:hover, .menu li:hover > a.top_link {color:#fff; }
.menu li:hover {position:relative; z-index:2;}
.menu ul,
.menu li:hover ul ul,
.menu li:hover ul li:hover ul ul,
.menu li:hover ul li:hover ul li:hover ul ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

.menu li:hover ul.sub {
left:0;
top:35px;
background:#333; /* Submenu background color */
padding:3px;
white-space:nowrap;
width:200px;
height:auto;
z-index:3;
}
.menu li:hover ul.sub li {
display:block;
height:30px;
position:relative;
float:left;
width:200px;
font-weight:normal;
}
.menu li:hover ul.sub li a{
display:block;
height:30px;
width:200px;
line-height:30px;
text-indent:5px;
color:#ccc;
text-decoration:none;
}
.menu li ul.sub li a.fly {
/* Submenu Background Color */
background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikhJ8q-rc7kCSBktK5qMYJviYGSdp4hKN0zicLH-D688vbpzxhR0cXFQFY6-356Uvz6i2HwSgo3b-ORCVe9pWbhZI07uOusdTG4MPjiUSFtuHQzt6msFhEum0IubUhyf4TUfRSg-65gI4/s1600/arrow_over.gif) 185px 10px no-repeat;}
.menu li:hover ul.sub li a:hover {
background:#515151; /* Background Color on mouseover */
color:#fff;
}
.menu li:hover ul.sub li a.fly:hover, .menu li:hover ul li:hover > a.fly {
/* Background on Mouseover */
background:#646464 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikhJ8q-rc7kCSBktK5qMYJviYGSdp4hKN0zicLH-D688vbpzxhR0cXFQFY6-356Uvz6i2HwSgo3b-ORCVe9pWbhZI07uOusdTG4MPjiUSFtuHQzt6msFhEum0IubUhyf4TUfRSg-65gI4/s1600/arrow_over.gif) 185px 10px no-repeat; color:#fff;}

.menu li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul {
left:200px;
top:-4px;
background: #333; /* Background Color of the Submenu */
padding:3px;
white-space:nowrap;
width:200px;
z-index:4;
height:auto;
}
#search {
width: 228px; /* Width of the Search Box */
height: 50px;
float: right;
z-index: 2;
text-align: center;
margin-top: 5px;
margin-right: 6px;
/* Background of the Search Box */
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbwBypuJl0mjHxthkfEI_Mx2haToKdce6VwIuZp3XITgYMsMmnHPPNW4U6hsiAQv9is6RRNnpq5ilNHn5iQ3mAWCQrC0hyFQGs_ejjcUQOMjygmUy9-WyRqRJqOkIbCFsj-zliyg_LuAY/s1600/searchBar1.png) no-repeat;
}
#search-box {
margin-top: 3px;
border:0px;
background: transparent;
text-align:center;
}


Screenshot
Step 2. Save the Template


Step 3. Go to Layout > click on Add a Gadget link


Step 4. Choose HTML/Javascript and paste the following inside the empty box:

<div id='menuWrapper'>
<ul class='menu'>
<li class='top'><a class='top_link' href='Link URL'><span>Title 1</span></a></li>

<li class='top'><a class='top_link' href='Link URL'><span class='down'>Title 2</span></a><ul class='sub'><li><a class='fly' href='Link URL'>Submenu 2.1</a><ul>
<li><a href='Link URL'>Submenu 2.1.1</a></li>
<li><a href='Link URL'>Submenu 2.1.2</a></li>
<li><a href='Link URL'>Submenu 2.1.3</a></li>
</ul>
</li>
<li class='mid'><a class='fly' href='Link URL'>Submenu 2.2</a>
<ul>
<li><a href='Link URL'>Submenu 2.2.1</a></li>
<li><a href='Link URL'>Submenu 2.2.2</a></li>
<li><a href='Link URL'>Submenu 2.2.3</a></li>
<li><a class='fly' href='Link URL'>Submenu 2.2.4</a>
<ul>
<li><a href='Link URL'>Submenu 2.2.4.1</a></li>
<li><a href='Link URL'>Submenu 2.2.4.2</a></li>
<li><a href='Link URL'>Submenu 2.2.4.3</a></li>
</ul>
</li>
<li><a href='Link URL'>Submenu 2.2.5</a></li>
<li><a class='fly' href='Link URL'>Submenu 2.2.6</a>
<ul>
<li><a href='Link URL'>Submenu 2.2.6.1</a></li>
<li><a href='Link URL'>Submenu 2.2.6.2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='Link URL'>Submenu 2.3</a></li>
<li><a href='Link URL'>Submenu 2.4</a></li>
<li><a href='Link URL'>Submenu 2.5</a></li>
</ul>
</li>

<li class='top'><a class='top_link' href='Link URL'><span class='down'>Title 3</span></a>
<ul class='sub'>
<li><a href='Link URL'>Submenu 3.1</a></li>
<li><a href='Link URL'>Submenu 3.2</a></li>
<li><a href='Link URL'>Submenu 3.3</a></li>
<li><a href='Link URL'>Submenu 3.4</a></li>
</ul>
</li>

<li class='top'><a class='top_link' href='Link URL'><span class='down'>Title 4</span></a>
<ul class='sub'>
<li><a href='Link URL'>Submenu 4.1</a></li>
<li><a class='fly' href='Link URL'>Submenu 4.2</a>
<ul>
<li><a href='Link URL'>Submenu 4.2.1</a></li>
<li><a href='Link URL'>Submenu 4.2.2</a></li>
<li><a href='Link URL'>Submenu 4.2.3</a></li>
<li><a href='Link URL'>Submenu 4.2.4</a></li>
<li><a href='Link URL'>Submenu 4.2.5</a></li>
<li><a href='Link URL'>Submenu 4.2.6</a></li>
</ul>
</li>
<li><a href='Link URL'>Submenu 4.3</a></li>
<li><a href='Link URL'>Submenu 4.4</a></li>
<li><a href='Link URL'>Submenu 4.5</a></li>
<li><a href='Link URL'>Submenu 4.6</a></li>
</ul>
</li>

<li class='top'><a class='top_link' href='Link URL'><span class='down'>Title 5</span></a>
<ul class='sub'>
<li><a href='Link URL'>Submenu 5.1</a></li>
<li><a href='Link URL'>Submenu 5.2</a></li>
<li><a href='Link URL'>Submenu 5.3</a></li>
</ul>
</li>


<!-- Search Bar -->
<li>
<form action='/search' id='search' method='get' name='searchForm' style='display:inline;'>
<input id='search-box' name='q' onblur='if (this.value == &quot;&quot;) this.value = &quot;Search here...&quot;;' onfocus='if (this.value == &quot;Search here...&quot;) this.value = &quot;&quot;;' size='28' type='text' value='Search here...'/></form>
</li>

</ul>
</div>

Customization:

- replace the text in blue and red with your links and titles.
- if you need more tabs, then add a line like this just above <!-- Search Bar -->

<li class="top"><a href="Link URL" class="top_link"><span>Title</span></a></li>

- if you want to add a tab with sub-tabs, then add this code:

<li class="top"><a href="Link URL" class="top_link"><span class="down">Title</span></a>
<ul class="sub">
<li><a href="Link URL">Submenu Title</a></li>
<li><a href="Link URL">Submenu Title</a></li>
<li><a href="Link URL">Submenu Title</a></li>
</ul>
</li>

- and if you want one of the other sub-tabs have sub-tabs then remove a line like the one in orange and change it to a code like this:

<li><a href="Link URL" class="fly">Submenu Title</a>
<ul>
<li><a href="Link URL">Other Submenu</a></li>
<li><a href="Link URL">Other Submenu</a></li>
<li><a href="Link URL">Other Submenu</a></li>
</ul>
</li>

And that's it! Now Save your Widget and enjoy your new drop down menu! ;)

35 comments:

  1. o great work, nice menu
    Reply
  2. Peter T.4/20/2013
    Super cool menu bar. But how do you make the gap smaller between the menu bar and the date field in the (post)?
    Reply
    Replies
    1. You could add this declaration to .tabs-outer {:
      margin-bottom: -50px;
      Increase/decrease the "-50px" value depending on your needs.
  3. Added this and it looks great! Quick question though when I hover over the menu the drop down opens but the drop down box isn't fully square. On the right it flows into the next menu title. Does this make sense?!
    Is there a way of customising the search box? I don't want it be be a box just purely 'SEARCH............... (Then the dotted to just be a line)
    Also is there a way of placing the menu above my header instead of underneath. Ideally I would like it to be top right. Tried doing this in the layout section of blogger but doesn't allow it.
    I absolutely love this blog. It's people like me that aren't very confident with HTML which it's great for. Your explanations are always so clear. Thank you!

    https://lucygarrick.com
    Reply
    Replies
    1. 1. Sorry but I don't see where's the issue, could you please make a screenshot?
      2. Just ABOVE ]]></b:skin> add back the CSS style for the search box found at step 1, that starts from #search { ... You can add a background to where are the annotations in green (just remove that URL and add a color hex or the url of your image (don't forget the semicolon)) or change the color of the search text (just below #search-box { add a new declaration, for eg. color: #689FD2; ). If you want to change the search text, replace the "Search here..." text from step 4, which is below the annotation in green (there are 3 of them)
      3. For adding the menu above the header, please refer to this tutorial.
  4. Hi, thanks for the tutorial. My new navigation bar is indented slightly though. How do I get it left aligned with my page title, blog post box, etc??

    Thanks
    Reply
    Replies
    1. Hi Will,

      Add this line just below #menuWrapper { (step 1):
      margin-left: -15px;

      The "-15px" value represents the distance from the right side (if you add a bigger value, it will move to the right).

      Sorry for the late reply!
  5. how do i direct the links to open up in new tabs
    Reply
  6. ok i got it by using the tag
    Reply
  7. What is red code that i ve to delete.shall remove all the code
    Reply
  8. Cool tutorial i have found a website with good menu bars and other css designs you may like the designs.

    http://freebietemplate.com/css-designs/css-designs.html

    have a nice day
    Reply
  9. thanks for this widget, by the way a saw your blog not using pages widget. can you please make a tutorial about modifying default pages on blogger?
    Reply
  10. Thanks! Only problem is my blogs don't show the child menu's when it's put under the header widget. It shows them when in the footer or sidebar, but not at the top. It's like it's hidden behind the blog.
    Reply
    Replies
    1. Thanks! Only problem is my blogs don't show the child menu's when it's put under the header widget. It shows them when in the footer or sidebar, but not at the top. It's like it's hidden behind the blog.
    2. Please add this code to Template > Customize > Advanced > Add CSS:

      .tabs .widget ul, .tabs .widget ul {
      overflow: visible;
      }

      Hope it works now...!
  11. can't find this part in my template:
    ***

    /* Tabs
    ----------------------------------------------- */
    .tabs-outer {
    overflow: hidden;
    position: relative;
    background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll 0 0;
    }

    #layout .tabs-outer {
    overflow: visible;
    }

    .tabs-cap-top, .tabs-cap-bottom {
    position: absolute;
    width: 100%;

    border-top: 1px solid $(tabs.border.color);

    }

    .tabs-cap-bottom {
    bottom: 0;
    }

    .tabs-inner .widget li a {
    display: inline-block;

    margin: 0;
    padding: .6em 1.5em;

    font: $(tabs.font);
    color: $(tabs.text.color);

    border-top: 1px solid $(tabs.border.color);
    border-bottom: 1px solid $(tabs.border.color);
    border-$startSide: 1px solid $(tabs.border.color);
    }

    .tabs-inner .widget li:last-child a {
    border-$endSide: 1px solid $(tabs.border.color);
    }

    .tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
    background: $(tabs.selected.background.color) $(tabs.background.gradient) repeat-x scroll 0 -100px;
    color: $(tabs.selected.text.color);
    }
    /* Headings
    ----------------------------------------------- */

    ***

    :( ..what should i do?
    Reply
    Replies
    1. Try to find the 1st line /* Tabs and delete the code until you reach to /* Columns, THEN replace it with the one above. Don't forget to make a backup first. Hope this will work for you.

      Thanks for visiting! :)
    2. .Cahaha. brother /sister
      i perfectly set this style drop down menu
      this site admin this site write this (go to blogger and temple and edit html then press (CTRL + F) and and search for the following line) edit html ctrl F press and search your desied word this search are do not work you have to do copy all html in edit html and paste it micro soft word then press ctrl F and you find you desied word edit html ctrl F a search do not you have to search manually line by line html in edit html ar html .....you know language bangla or hindi. i best write bangla language.

      blogger ar temple ar edit html ctrl F diya search a kaj kora na. edit html ar total html copy cora ms word paste kora ctrl F diya search koran. tahola paban. edit html ar html apnaka manually search korta haba. tahola paban
  12. How can I make top "Banner'' and full size it??
    my blog : www.oneem.blogspot.com
    Reply
    Replies
    1. I think you meant to ask how to reduce the space between social media icons and the blog's header? If so, then add the following code above ]]></b:skin> :

      #social-icons {
      margin-bottom: -50px;
      z-index: 2;
      position: relative;
      }
  13. "Great tips for bloggers. These tips are really very helpful and i will definitely apply them on my blogs.
    Thanks for share!"
    Reply
  14. Anonymous6/02/2013
    I don't understand which parts in red you're supposed to delete. Could you be more specific?

    I tried a few variations but nothing is working. All the submenus are all everywhere on the top, open, and without any styling.
    Reply
  15. Great post - really useful! Just a quick question: after putting the drop down menu's in, I now have a gap between the menu bar and where the content for the post starts. Is there any way of reducing this gap? You can see what I'm talking about here: http://stevenscaffardi.blogspot.co.uk/
    Reply
    Replies
    1. Hi Steven,

      Please find this code in your template:

      .main-inner .column-center-inner {

      ...and just below it, add this line:

      margin-top: -50px;

      Increase or decrease the -50px value to change the distance.
      Hope this works. Thanks for stopping by! :)
    2. BTW, if sidebars are on a lower level, then add margin-top: -50px; below this code:
      .main-inner {
      ALSO remove the padding-top: 35px; declaration from below.
  16. Hi,

    How can I add content to the submenus?
    Reply
  17. This menu is great, thanks so much for the thorough tutorial. The only thing I'm having trouble with is that I'd like to size the width to be the same size as the blog header image, but when I try changing some of the code that I thought would do that, the only thing I seem able to do is get your search bar to extend horizontally out to the right, I cant get it to adjust to be the same size as the image (see here: http://ppromstories.blogspot.com/) Any advice?
    Reply
    Replies
    1. @Erin,

      You should change the width percentage of 100 to 110%, which is just below #menuWrapper {
      Or you could add it in pixels:
      width: 840px;

      And to move it to the left, add this line below #menuWrapper {:
      margin-left: -50px;
      Where "-50px" is the distance from the left - you could also modify this value to be in line with your header.
    2. Perfect! Thanks! I used the px and wound up having to move the margin -30 px to the left but now its all aligned. You are a miracle worker!!
    3. You're welcome :)
  18. hello can somebody clear it which code to remove after this and only red part of each line to remove or whole line
    Reply
  19. Good article. Prefer pixels instead of percentage. for css drop down menus/ jquery menus with source code, http://www.fremenu.info/2013/06/js10.html
    Reply
  20. Just want to say your article is as astonishing. :) The clarity in your post is just great and i can assume you're an expert on this subject.
    Reply

Monday, June 17, 2013

How To Create a Mega Drop Down Menu in Blogger

How To Create a Mega Drop Down Menu in Blogger 

http://www.mybloggerlab.com/2012/09/how-to-create-mega-drop-down-menu-in.html

Advertisements
Over the previous couple of years, the world of the Blogosphere has progressed quite handsomely. Nowadays Bloggers and webmasters are concentrating more on their website’s designing rather than focusing on their content. Undoubtedly, having a beautiful website is the latest trend and even visitors admire those blogs which are highly professional in terms of their Layout, Header, Footer, Menu and etc. Therefore, having a clean and perfect navigation are the basic needs of each and every blog. However, majority of blogs are still using the old navigation menus which kills the complete presentation of a blog. If your site’s navigation is not perfect then how can you expect your visitors to search your website in depth? Today we will learn how to create a Fresh Mega Drop down Menu for blogger blogs.




Why To Use Mega Drop Menu:

The biggest advantage of having a Mega navigation menu is that it keeps the thinks together in one place, so your visitors won’t have to spend much time in searching for a specific category of their interest. On the other hand, it will keep your blog look clean and elegant because the complete site navigation keeps things together.

How Mega Drop Down Menu Looks Like:

Unlike other mega menus, it has an elegant design which will compliment your website or weblog because you can easily change its color according to your desired needs. It is thin in size so it’s quite clear that it can easily fit any site without any problem whatsoever. Following is the animated representation of the MBL Mega Drop Down Menu.


Some Key Features Of MBL Mega Drop Menu:

Following are some of the foremost features of the Drop menu which will not only amuse you but your visitors would love to play with it.
  • It supports almost every browser i.e. Firefox, Chrome and Internet explorer.  
  • You can easily change its color to match the color scheme of your website.
  • Unlike other menus, only one JavaScript is used so it is extremely light weighted.
  • It has a cute Email Subscription box in the drop down menu that will maximize your subscribers.

How To Create a Mega Drop Down Menu in Blogger:

Just like our previous tutorials, the steps are pretty much straightforward and world hardly take 10 minutes to complete the integration. Just follow the following instructions correctly.

  • Go To Blogger.com >> Your Site >> Template.
  • Try to make a habit of creating a Backup of templates before editing it.
  • Select Edit HTML >> Proceed.
  • Now within the template search for ]]></b:skin> and paste the following Style sheet coding.

  1. /*  MBL Mega Drop Down Menu Bar For Blogger (www.mybloggerlab.com) */
  2. ul.dropmenu{
  3. position: relative;
  4. margin: 0px;
  5. padding: 1px 0px 0px 0px;
  6. background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD_-31th2N0Ng42X1IJS6nDogpgSWG1CAg5vm6XvE5TcDbyW4O-Rn-QDchhkckkfpBNXzj-MMgeEMWwU2Q1dFSy6BxwSQ4_FVxxzDWUvUMa8VYMuJt5QSXbnPNcfeOg_MnVKkug9XN47k/s1600/navigation.png) repeat-x scroll 0 0;
  7. display:block;
  8. height: 35px;
  9. font-family:Verdana,Arial,Helvetica,sans-serif;
  10. font-size: 12px;
  11. }
  12. .dropmenu li{
  13. position: relative;
  14. list-style: none;
  15. float: left;
  16. margin: 0px;
  17. padding: 0px;
  18. }
  19. .dropmenu li a{
  20. height: 22px;
  21. padding: 9px 30px 0px 15px;
  22. display: block;
  23. cursor: point;
  24. border-right: solid 1px #4a779d;
  25. color: #FFFFFF;
  26. text-transform: uppercase;
  27. text-decoration: none;
  28. }
  29. .dropmenu li span{
  30. display: block;
  31. float: right;
  32. height: 10px;
  33. width: 10px;
  34. background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi51xfKtdXGYNA_g0XmapLEhfRQ2009NYpStCNSLo_fx5CV7NP3yWaD6EeOiiQrX3pk6BEj_MPwB_5ltFgUB2N0oNgqJ2Yz4Zc1LAtKaatciBR1GLm5DV7cfhHvPBI1D5zeUIc07bHTb80/s1600/arrow_up.png) repeat-x scroll 0 0;
  35. position: absolute;
  36. top: 12px;
  37. right: 10px;
  38. }
  39. .dropmenu li  a:hover span{
  40. background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhORfyWB4Nt-ltYmxggk91ZGXlgclS7oWH14JoAMRV77hEao_p93RdHXDaqSYFULA_IfxJIU5tUnbYjH071LxsDaoii6LxGYAbrekmNvh2b5qq_DtxYiCvejlywNKBZFRMiPEPbiWaNfbo/s1600/arrow_hover.png) repeat-x scroll 0 0;
  41. }
  42. .dropmenu li:hover ul, .dropmenu li:hover div{
  43. display: block;
  44. }
  45. .dropmenu ul{
  46. position: absolute;
  47. display: none;
  48. width: 140px;
  49. padding: 0px;
  50. margin: 0px;
  51. border-bottom: 1px solid #ccc;
  52. background: #FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk0kzEh1fBKqQADas0y1xcz86SA_DIMsoUCc3i-axOlymDbz1Lk5uDnzpcWYxvdN_iQHARfQtGw6jdYpFlNhxTVlRMiKOBAgEc2X4-kTcHS6xkqo-aXJ5m6qAZFUZ7LZo81PGUJBK4pVw/s1600/gradient.png) repeat-x scroll 0 0;
  53. }
  54. .dropmenu ul li{
  55. border: 0;
  56. float: none;
  57. }
  58. .dropmenu ul a {
  59.   border: 1px solid #ccc;
  60.   border-bottom: 0;
  61.   white-space: nowrap;
  62.   display:block;
  63.   color: #0657AD;
  64.   text-decoration: underline;
  65.   text-transform: none;
  66. }
  67. a.selected, a:hover{
  68. color: #0657AD !important;
  69. background: #FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk0kzEh1fBKqQADas0y1xcz86SA_DIMsoUCc3i-axOlymDbz1Lk5uDnzpcWYxvdN_iQHARfQtGw6jdYpFlNhxTVlRMiKOBAgEc2X4-kTcHS6xkqo-aXJ5m6qAZFUZ7LZo81PGUJBK4pVw/s1600/gradient.png) repeat-x scroll 0 0;
  70. }
  71. a.selected span{
  72. background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhORfyWB4Nt-ltYmxggk91ZGXlgclS7oWH14JoAMRV77hEao_p93RdHXDaqSYFULA_IfxJIU5tUnbYjH071LxsDaoii6LxGYAbrekmNvh2b5qq_DtxYiCvejlywNKBZFRMiPEPbiWaNfbo/s1600/arrow_hover.png) repeat-x scroll 0 0;
  73. }
  74. .dropmenu ul a:hover {
  75. color:#F67A00 !important;
  76. text-decoration: none;
  77. background-color: #F0F0F0;
  78. background-image: none;
  79. }
  80. .dropmenu div ul{
  81. position: relative;
  82. display: block;
  83. }
  84. .dropmenu li div{
  85. background: #FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk0kzEh1fBKqQADas0y1xcz86SA_DIMsoUCc3i-axOlymDbz1Lk5uDnzpcWYxvdN_iQHARfQtGw6jdYpFlNhxTVlRMiKOBAgEc2X4-kTcHS6xkqo-aXJ5m6qAZFUZ7LZo81PGUJBK4pVw/s1600/gradient.png) repeat-x scroll 0 0;
  86. border: 1px solid #ccc;
  87. padding: 5px;
  88. display: none;
  89. position: absolute;
  90. }
  91. .dropmenu li div ul{
  92. border: none;
  93. background: none;
  94. position: relative !important;
  95. }
  96. .dropmenu li div a{
  97. border: none;
  98. border-bottom: 1px solid #ccc;
  99. }
  100. .dropmenu li div div{
  101. display: block;
  102. position: relative;
  103. background: none;
  104. border: none;
  105. }
  106. .dropmenu li div div a{
  107. display: inline;
  108. border: none;
  109. color: #666;
  110. text-decoration: underline;
  111. padding: 0px;
  112. margin: 0px;
  113. text-transform: none;
  114. }
  115. .dropmenu li div div a:hover{
  116. color: #000;
  117. text-decoration: none;
  118. }
  119. ul.left{
  120. float: left;
  121. width: 145px;
  122. }
  123. ul.right{
  124. float: right;
  125. width: 145px;
  126. }
  127. .small{
  128. color: #666;
  129. font-size: 10px;
  130. padding: 10px 5px 8px 5px !important;
  131. display: block;
  132. clear: both;
  133. }
  134. .products{
  135. width: 300px;
  136. padding: 15px !important;
  137. }
  138. .products ul{
  139. width: 100%;
  140. }
  141. .products ul li{
  142. border-bottom: 1px solid #ccc;
  143. height: 40px;
  144. padding: 10px 0px;
  145. }
  146. .products h2{
  147. font-size: 16px;
  148. padding: 2px 0px 3px 0px;
  149. margin: 0px;
  150. }
  151. .products p{
  152. color: #666;
  153. font-size: 10px;
  154. padding: 0px;
  155. margin: 0px;
  156. }
  157. .products img{
  158. float: left;
  159. padding-right: 10px;
  160. }
  161. .products  ul li a{
  162. display: inline;
  163. border: none;
  164. color: #666;
  165. text-decoration: underline;
  166. padding: 0px;
  167. margin: 0px;
  168. text-transform: none;
  169. }
  170. .products  ul li  a:hover{
  171. color: #000 !important;
  172. text-decoration: none;
  173. background: none !important;
  174. }

  175. .tutorials{
  176. width: 300px;
  177. }


  178. input{
  179. border:1px solid #4A779D;
  180. padding: 3px 8px;
  181. margin-bottom: 8px;
  182. width: 164px;
  183. }
  184. label{
  185. padding: 0px 0px 4px 0px;
  186. display:block;
  187. }
  188. button{
  189. background: #4A779D url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD_-31th2N0Ng42X1IJS6nDogpgSWG1CAg5vm6XvE5TcDbyW4O-Rn-QDchhkckkfpBNXzj-MMgeEMWwU2Q1dFSy6BxwSQ4_FVxxzDWUvUMa8VYMuJt5QSXbnPNcfeOg_MnVKkug9XN47k/s1600/navigation.png) repeat-x scroll 0 0;
  190. color: #FFF;
  191. border:1px solid #4A779D;
  192. padding: 4px 10px;
  193. width: 180px;
  194. }

  195. .emailupdatesform{margin: 10px 0 5px 5px; width: 180px; float: left;}

  196. .emailupdatesform input.emailupdatesinput{background: #fff !important; float: left; border: 1px solid #d2d2d2; padding: 0px 8px 0px 8px; color: #a19999; font-size: 12px; height: 25px; width: 160px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}

  197. .emailupdatesform input.joinemailupdates{background:-moz-linear-gradient(top,#57ABFE 0%,#0080ff 100%); background:-webkit-gradient(linear,left top,left bottom,from(#57ABFE),to(#0080ff)); border: 1px solid #0080ff; text-transform: none; font:bold 12px arial; color: #fff; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; cursor:pointer;}

  • Again search for </head> and above it paste the following JQuery coding.



  1. <script type="text/javascript" src="https://mybloggerlab.googlecode.com/files/jquery.js"></script> 
  2. <script type="text/javascript" src="https://mybloggerlab.googlecode.com/files/dropdown.js"></script> 
  3. <script>
  4. $(document).ready(function(){
  5. $("#nav-one").dropmenu();
  6. });
  7. </script>
  • Now Save your template by pressing Save template button.

Adding the Mega Drop Down Menu To Blogger

Now with in your template search for the following chunk of coding. Remember it is not necessary that you have the exact same coding, just look for the similar coding. TIP: To Find the coding quickly Search for "Header1" or "(Header)". 



  1. <div id='header-wrapper'> 
  2. <div class='headerleft'> 
  3. <b:section class='headerleft' id='headerleft' maxwidgets='1' showaddelement='no'>
  4. <b:widget id='Header1' locked='true' title='My Blogger Lab (Header)' type='Header'/>
  5. </b:section> 
  6. </div>
Once you have found the Similar coding then below it paste the following Mega Menu HTML Coding. 




  1. <ul id="nav-one" class="dropmenu"> 
  2. <li> 
  3.     <a href="#">Home</a> </li><li> 
  4.     <a href="#">Forum</a><ul> 
  5.         <li><a href="#">Support</a></li> 
  6. <li><a href="#">Help</a></li> 
  7. <li><a href="#">Examples</a></li>
  8. <li><a href="#">Your work</a></li>
  9. </ul> 
  10. </li> 
  11. <li> 
  12.     <a href="#item3">Downloads</a><ul> 
  13.        <li><a href="#">Tools</a></li> 
  14.        <li><a href="#">Office</a></li> 
  15.        <li><a href="#">Custom projects</a></li> 
  16. </ul> 
  17. </li>  
  18. <li> 
  19. <a href="#">Products</a> 
  20. <div class="products">
  21. <ul> 

  22. <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzVTP6cmLq5CWwz9pa0Yu1WO6EG2BH3AatK83Mi3QTUxbwVWKmE9Gxhx4M6ZeoR5z4tjoqjCzAtwvoeDb5Bc4SshDPbN2ZPLyqGaehipheuKV0ork4jCiabEGB_eucPj9cS3nVzdwICOQ/s1600/1.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>Featured Box</h2><p><a href="#">More information about this product</a></p></li> 
  23. <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp3rPEEI0_3WEEZA0Oqrl4DHYU5H6pOPIqU5fjcyV5QNUTBK2ONAT8mcxXnNEdM23L-_hvBYbhFvuG3CQh2EkZuuG6fe4S3r16iH0dD-L6xz7br4gAqQPPRTka0cS6MQDZO0yvZ_8ArLk/s1600/2.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>Mod Rewriter</h2><p><a href="#">More information about this product</a></p></li> 
  24. <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEZrfevKoj1YVLDhgPKNlchMWAFd7ymrUXQCAxtcA0voXVtZSVnWdopwi50FnboM-qbgyH-lsaVKbuUxUuXOr3pNB_VE9eS7p65uv1LSLQwsqYCnj8qt8YLGQTDt5Cqqo0Qo2nCZz8b8M/s1600/3.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>Byte Scrambler</h2><p><a href="#">More information about this product</a></p></li> 
  25.  
  26. <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEZrfevKoj1YVLDhgPKNlchMWAFd7ymrUXQCAxtcA0voXVtZSVnWdopwi50FnboM-qbgyH-lsaVKbuUxUuXOr3pNB_VE9eS7p65uv1LSLQwsqYCnj8qt8YLGQTDt5Cqqo0Qo2nCZz8b8M/s1600/3.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>Image Processor</h2><p><a href="#">More information about this product</a></p></li> 
  27. <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1hg_7ysiiq6_YFmzI4wHaVOA8nKyWmX2Z3hXvDAhghu9niGcSXZ0n_7TOg6KP15iTsz-tD-WiBGl3K2XTF5HttpV4CnUgMb007zrED_xwc2KiVbyY5RwQuioAbruxFC0M8cmBYxGGrjc/s1600/5.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>Registry Class</h2><p><a href="#">More information about this product</a></p></li> 
  28. <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4LsNnEsN_12xUvf72gEzhcCPaxI3oUWkA_r6UTi0vNrwCDR9LdVs9GY-X3FFkjwgurPlTf4Jte4Qjhat23DaToPJRcSwgEKoF1dehBdpIMRQVJyhQre4oqZ66DF4oo4yQX8XVxQhM-Xo/s1600/6.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>Data Validation</h2><p><a href="#">More information about this product</a></p></li> 
  29. <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKVZFreMr5_vi34Gv_dkW4D0vjjsu14hSFn-Vjt89jZW7C2GD49Ixk-aDadGDAiM2zbEpfkwvFQ-Zo6qyDFtTXSGj3GMRvHzZqv46P4hj3iAub9TeJUXbVezgSEGq5RSguyy2PZMOI3JA/s1600/7.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>Ajax Tables</h2><p><a href="#">More information about this product</a></p></li> 
  30. </ul>

  31. <div class="small">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.</div>
  32. </div>
  33. </li>
  34. <li> 

  35. <a href="#">Tutorials</a> 
  36. <div class="tutorials">
  37. <ul class="left"> 
  38. <li><a href="#">Javascript</a></li> 
  39. <li><a href="#">Python</a></li> 
  40. <li><a href="#">PHP</a></li> 
  41. </ul>
  42. <ul class="right"> 
  43. <li><a href="#">HTML/CSS</a></li> 
  44. <li><a href="#">ASP.NET</a></li> 
  45. <li><a href="#">Actionscript</a></li> 
  46. </ul>
  47.  <div class="small">View <a href="#">all categories</a> or a <a href="#">list of the best tutorials</a>.</div>
  48. </div>
  49. </li>
  50. <li> 

  51. <a href="#">Links</a> <ul> 
  52.   <li><a href="#">Programming</a></li> 
  53.   <li><a href="#">Inspiration</a></li> 
  54.    <li><a href="#">My websites</a></li> 
  55.    <li><a href="#">Clients</a></li> 
  56.    <li><a href="#">Cool stuff</a></li> 
  57.    <li><a href="#">Sitebase</a></li> 
  58.    <li><a href="#">Other</a></li> 
  59. </ul> 
  60. </li>
  61. <li> 

  62. <a href="#">Subscribe Now</a> 
  63. <div class="emailsub">
  64.         <div class="emailupdatesform">
  65.         <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=MYBLOGGERLAB', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="emailupdatesinput" name="email" value="Enter your email here..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your email here...&#39;;}" onfocus="if (this.value == &#39;Enter your email here...&#39;) {this.value = &#39;&#39;;}" type="text" /><input value="tntbystc" name="uri" type="hidden" /><input value="Submit" class="joinemailupdates" type="submit" /></form></div></div>
  66. </li>
  67. </ul>
Customization:
Replace MYBLOGGERLAB with your RSS Feed Email Subscription Username.
Replace All Light Pink,Light Orange,Light Blue Links According to your needs.


From The Editor’s Desk:
We hope you have enjoyed the feast, this week we have shared almost three totally unique widgets i.e. Twitter Man, Sticky Footer and this Mega Menu. Our Developers are busy in creating a new Blogger Template so keep your figures cross. If you have any difficulty while adding this Mega Menu feel free to ask till then Peace, Blessings and Happy learning.