How to add a Beautiful JQuery Drop-Down Menu For Blogger Blogspot

Alright, this time, we are going to make a stylish and simple jQuery drop down menu. The main objective is to make it as simple as possible, with some little jQuery effect and easy to customize/ apply different style on it. To style it into your own design, you just have to modify the a tag CSS style. You can change colors or put background images, or the size and color of text.

Steps Adding the jQuery Drop-Down menu

Step 1. Go to Dashboard - Template - Edit HTML - Proceed


Step 2. Expand Widget Template (make a backup)
    jquery drop-dowm menu


    Step 3. Search for the following code:

     ]]></b:skin>

    Step 4. Add the following CSS code before/above it:

     #jsddm {
    height: 40px;
    margin: 0;
    overflow: visible;
    z-index: 2;
    padding: 15px;
    position:relative;
    }
    #jsddm li {
    float: left;
    list-style: none;
    font: 12px Tahoma, Arial;
    }
    #jsddm li a {
    display: block;
    white-space: nowrap;
    margin:1px 3px;
    border: 1px solid #AAAAAA;
    background: #cccccc;
    background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#cccccc));
    background: -moz-linear-gradient(top, #ebebeb, #cccccc);
    padding: 5px 10px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    text-shadow: #ffffff 0 1px 0;
    color: #363636;
    font-size: 15px;
    font-family: Helvetica, Arial, Sans-Serif;
    text-decoration: none;
    vertical-align: middle;
    }
    #jsddm li a:hover {
    background: #C8C8C8;
    }
    #jsddm li ul {
    margin: 0;
    padding: 0;
    position: absolute;
    visibility: hidden;
    border-top: 1px solid white;
    }
    #jsddm li ul li {
    float: none;
    display: inline;
    }
    #jsddm li ul li a {
    width: auto;
    background: #CAE8FA;
    }
    #jsddm li ul li a:hover {
    background: #A3CEE5;
    }

    Step 5. Now find this piece of code:

     </head>

    Step 6. Add this code immediately before/ABOVE it:

     <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js' type='text/javascript'/>
      <script type='text/javascript'>
      //<![CDATA[
    var timeout    = 500;
      var closetimer = 0;
      var ddmenuitem = 0;
    function jsddm_open()
      {  jsddm_canceltimer();
      jsddm_close();
      ddmenuitem = $(this).find('ul').css('visibility', 'visible');}
    function jsddm_close()
      {  if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}
    function jsddm_timer()
      {  closetimer = window.setTimeout(jsddm_close, timeout);}
    function jsddm_canceltimer()
      {  if(closetimer)
      {  window.clearTimeout(closetimer);
      closetimer = null;}}
    $(document).ready(function()
      {  $('#jsddm > li').bind('mouseover', jsddm_open)
      $('#jsddm > li').bind('mouseout',  jsddm_timer)});
    document.onclick = jsddm_close;
      //]]>
      </script>

    Step 7. Click on Save Template button.

    Step 8. Go to Layout > click on "Add a gadget" link


    Step 9. Choose HTML/JavaScript from the pop-up window 



    Step 10. Paste the following code in the empty box:

     <ul id="jsddm">
      <li><a href="#">Home</a>
      <li><a href="#">Link 1</a>
      <ul>
      <li><a href="#">Drop 1-1</a></li>
      <li><a href="#">Drop 1-2</a></li>
      <li><a href="#">Drop 1-3</a></li>
      </ul>
      </li>
     <li><a href="#">Link 2</a>
      <ul>
      <li><a href="#">Drop 2-1</a></li>
      <li><a href="#">Drop 2-2</a></li>
      </ul>
      </li>
     <li><a href="#">Link 3</a>
      <ul>
      <li><a href="#">Drop 3-1</a></li>
      <li><a href="#">Drop 3-2</a></li>
      <li><a href="#">Drop 3-3</a></li>
      <li><a href="#">Drop 3-4</a></li>
      </ul>
      </li>
     <li><a href="#">Link 4</a></li>
      <li><a href="#">Link 5</a></li>
      <li><a href="#">Link 6</a></li>
      </li></ul>

    Note :

    You must change links titles and replace the # symbol with the URL address of each of your links

    Step 11. Click on Save

    Important:

    - if your menu is on the sidebar, or footer, just drag it to your page header and click and click Save again.
    - if drop down links are not showing, do the following:

    Go back to Template > Edit HTML and search (CTRL + F) for this code:

     <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

    You should change 1 with 3 and no with yes like this:

     <b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>

    Save the Template.

    Next thing to do is to go to Layout and drag your menu immediately below your header


    Then click on Save Arrangement


    Enjoy!

    What is the blue screen of death?

    What is the blue screen of death?  What causes it and how can it be fixed?  The blue screen of death is an error that occurs when a critical error causes your PC to stop working like it is supposed to.
    Many different things can cause the critical error to take place.  Outdated or corrupted drivers are the number one cause of this error.  If you want to avoid this error in the future, you should update your drivers.  Install a driver update software and let it do its job.  After this is done, your driver errors will be nonexistent.
    The same applies to registry errors, which are the number two cause of blue screen of death errors.  If you install a registry cleaner program (highly recommended!) and let it scan your computer, it will clean out your registry for you in a matter of minutes and fix your registry errors.
    Finally, if you have issues revolving around memory, it may be time to replace your memory stick.  It is good to replace your memory stick every now and then to increase maximum space on your PC.  If you follow these tips, your computer will no longer show you the blue screen of death error.

    How To Add Snow Fall Effect To Your Blog/Website?

    This is Christmas season and everyone (including the biggies) are passionate about having some Christmas effects over there blogs/websites, the most popular practice of making your blog Christmas ready is add a Santa’s Cap over the logo of the website or simply by adding the snow effect to your website.

    how to SnowFall effect on your blog website How To Add Snow Fall Effect To Your Blog/Website?

    How To Add Snow Fall Effect For Your Blogger Blog?
    • First of all login to your Blogger Dashboard (I need not tell you about it, right?)
    • In the dashboard click on “More Options” and then click on “Layout” (here is the screenshot of the new blogger dashboard for your reference, for the old layout just click on “Layout beneath the blog).


    blogger edit layout in new dashboard1 How To Add Snow Fall Effect To Your Blog/Website?

    • Now in the new page layout click on “Add a Gadget”, a new pop-up windows will be opened, just scroll down the page and click on + (symbol) beside “HTML/JavaScript”.

    add html javascript in blogger dashboard How To Add Snow Fall Effect To Your Blog/Website?

    • The page will be refreshed and the open fields to enter the text will be appeared, just paste the following code in the content area and click on Save.

    <script src="http://snow-effect.googlecode.com/files/snow.js" type="text/javascript"></script>

    That’s it, the cool snow effect will be live on your blog, do let me know if you encounter with any of the errors in setting up the snow effect on your blogger blog.










    Become an Advertiser

    Become an Advertiser
    BidVertiser  As an advertiser, you will be able to create text ads, place them on sites of your choice and pay only for clicks your receive. You will start receiving new targeted leads in less than 10 minutes. Advertiser benefits:  Advertising on sites of your choice  Pay only for the clicks you receive  Set the max price you are willing to pay per click  Choose your geographical targeting  Create your ads in minutes  Monitor the performance of your ads

    As an advertiser, you will be able to create text ads, place them on sites of your choice and pay only for clicks your receive. You will start receiving new targeted leads in less than 10 minutes.
    Advertiser benefits:

    • Advertising on sites of your choice
    • Pay only for the clicks you receive
    • Set the max price you are willing to pay per click
    • Choose your geographical targeting
    • Create your ads in minutes
    • Monitor the performance of your ads





    And best of all - you can now add funds to your advertiser account using PayPal!
    Clicking "Become an Advertiser" below will automatically create an advertiser account for you, using the same information you provided during your signup as a publisher.

    You will be redirected to the script in

    seconds