How To Add Automatic Post Summaries With Image Thumbnails in blogger

In this tutorial i will show you how to add automatic post summaries with image thumbnails in blogger in right way. After blogging for a while i felt the need of this trick that could automatically split my post into summaries of equal length so i don't have to split my post into summaries manually and finally i got my hands on a JavaScript technique that was just kind of a thing i was looking for

But as we know that we can't specify the dimensions in JavaScript like we so in CSS because it won't render it the same way as a web browser does. That's why you have to play around with the dimensions to get what you want. But there are some advantages of this one over some older techniques. This was actually a technique used to display popular and recent post with short summaries and small thumbnail but we can use it to display post summaries with thumbnails in blogger with some tweaking.

1. As soon as you implement this technique all of your blog post will be automatically striped out into post summaries. You won't have to go back and split older posts into summaries manually.
2. Thumbnails will be equally sized throughout the blog that will look more natural and professional. You can get rid of images that are messing up your blog design.

How to add post summaries with image thumbnails in blogger

• I assume that you are logged in to blogger dashboard, now go to Design > Edit HTML and check the expand widget template.
• Press CTRL+F and find </head> tag.
• Copy the following code and paste it above </head> tag.

• Again press CTRL+F and find <data:post.body/>.
• Replace it with following code.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot;   data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>
createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<div style='clear: both;'/>
<span class='rmlink' style='font-weight:bold;padding:5px;float:right;text-align:right;'><a expr:href='data:post.url' >Read more ... </a></span>
</b:if>
</b:if>

Configuration:

summary_noimg = 500;
This is the number of characters shown if the post does not contain any image.

summary_img = 500;
This is the number of characters shown if the post contains image.

img_thumb_height = 130;
Height of the thumbnail created.

img_thumb_width = 130;
Width of the thumbnail created.

Note:  The problem here is that if you have used different image sizes in your design then they wont be equal in size. Take a look at the image below to understand what i mean.

So make sure that you are using images of the same size in the blog to keep the consistency. currently with this configuration i am using images of 200 x 200 pixels in my blog. You can use image size that better suits your blog design and of course you have to play with the configurations also to get what you want.

Conclusion:

In case of any trouble implementing this in your blog, you can comment below. I am here to help. But i will recommend trying on your own first. GOOD LUCK..!

Read More

Best Open Source Comment Systems For Your Blog

Today we're going to talk about comments, why they are an effective tool to keep your blog readers engaged and how much they are helpful in developing relationship with your blog readers? And then we will talk about some 3rd party open-source comment systems that you can use on your blog if yo are fed up with old WordPress or blogger comment system, or even if you want to tackle the spam problem.

Reasons why you may need to use 3rd party comment system

Spam. Almost every one is facing comment spamming problem and these 3rd party comment systems have proved that they have much better protection against spam.

Integration. The best thing about these 3rd party open source comment systems is that they have some really intelligent and awesome design that can easily blend in with your blog template and it integrates seamlessly with your blog no matter if it is on blogger, WordPress or any other platform. With default comment systems it is a bit tricky to customize the nested comments, author comments etc. So why not avoid that trouble and let the 3rd party comment systems handle that for you.?

Managing All Comments. This is what I love about blog comment systems is that it gives you the ability to manage comments and interactions on your blog, but also gives you the ability to manage and review comments you’ve left on other blogs, as well as see responses left for you by that blog’s author. Now that’s awesome!

I am sure there are much more benefits of 3rd party comment systems along with some drawbacks and you can help me with those by sharing your experience in comments below. So here are some best comment systems for your web sites and blog and these are all free to use.


DISQUS is the most awesome comment system preferred by most of the bloggers. I have used this on one of my blogs earlier and here are some good things about DISQUS.

Comment management and moderation options are flexible. Comment access options are also great and the best thing is that you can customize its look with CSS. you can read there design customization guide for further help.

Notification system is also convenient which lets the author know when a comment is posted and also lets the commenter know when author has replied his comment through email.

Another great feature in DISQUS is its social media integration and trackbacks which lets the author know who is sharing his blog post on social media like twitter etc..

Very powerful combat system against spam which also allows you to white-list or blacklist any ip for further comments. I will recommend using DISQUS in first place.

Intense Debate design and features almost look like DISQUS. You can see Intense Debate comment system in action below on this blog. I was using DISQUS on this blog before but switched to Intense Debate a while back to experience this one and its still on. Here are some good features of Intense Debate.

Intense Debate also has a very good email notification system just like DISQUS.

It also does a great job against spam with giving you the option of comment moderation and management.

I like their idea of "Voting" and "Reputation" which allows the blog readers to vote for the good comments and also allows the blog reader to post valuable comments to increase their rank.

They do have social media integration but i think this function is much better in DISQUS comment system.

LiveFyre is another real-time blog comments system similar to DISQUS and Intense Debate. Although I haven’t personally used it, from what I’ve seen it is probably most similar to Intense Debate in terms of functionality. Though they only support WordPress and tumbler so far but they are launching Blogger, Joomla and  Drupal support very soon. As i haven't personally tried it yet so i will not recommend it, but it doesn't mean you can't use it. At least you can try it just to share your experience with others who haven't yet.

Pynxe is newly introduced comment system. I learned about it a few days back but i haven't tried it yet on my test blogs to give you a detailed review. But as far as i know they are more then a comment system. They have support for all kind of website platforms. They have a Forum It Widget, a Comment System Widget. Really easy to use. I will suggest you try it on your test blogs and see if you are able to comment below to share your experience to help other readers. Till then i will try to find some more cool open source comment systems to update this post.

Conclusion

I hope this post will be helpful for you and i am also pretty sure that there are some other free Comment systems that i haven't listed here and i don't know about them so feel free to mention them in your comments and also share your experience with others to help them....Have a good day..!!

Read More

Large Drop Down Main Navigation Menu With jQuery & CSS3

Main navigation menu is the first place where an end user will look for the sake of information and if your main navigation bar is looking UN-professional and sloppy then it will play a major role in making your site non trust worthy.Because if you cannot spend a little time on making your website user friendly then how can you provide them good information's that they can trust.?? So the best practice is to first of all organize your website in such a manner that visitor can easily navigate through your site. If you have large number of contents on your website then you must use a large drop down menu with sub and sub categories on it.

People love things that they can easily get and this is what that makes them come back to your site again and again and make them loyal to you. So here is a large horizontal drop down main navigation menu with css3 and jQuery available in 8 different themes. It is also divided into sub categories which is really awesome and user friendly. I will recommend using this one if you have lot of contents on your site. Feel free to choose any navigation bar menu that best fits in your blog or website.

Advantages of this Large Drop Down jQuerry menu

> Cross browser compatibility.
> Simple structure makes it easy to setup and update without messing with main blog template.
> Multiple pre-designed color schemes.
> Fully customizable with CSS.
> Fantastic transition, scrolling and hover effects.
> Powered by jQuery and CSS3.

LIVE DEMO

• Login to your blogger account.
• Go to Design > Page  Elements > Add a Gadget > HTML/JavaScript.
• Copy the following link structure and paste it in there. ( This is just a demonstration, you can edit the list items according to your needs later, but lets keep it this way for now).

<ul id="ldd_menu" class="ldd_menu">
    <li>
    <span>Vacations</span><!-- Increases to 510px in width-->
    <div class="ldd_submenu">
    <ul>
     <li class="ldd_heading">By Location</li>
     <li><a href="#">South America</a></li>
     <li><a href="#">Antartica</a></li>
     <li><a href="#">Africa</a></li>
     <li><a href="#">Asia and Australia</a></li>
     <li><a href="#">Europe</a></li>
    </ul>
    <ul>
     <li class="ldd_heading">By Category</li>
     <li><a href="#">Sun &amp; Beach</a></li>
     <li><a href="#">Adventure</a></li>
     <li><a href="#">Science &amp; Education</a></li>
     <li><a href="#">Extreme Sports</a></li>
     <li><a href="#">Relaxing</a></li>
     <li><a href="#">Spa and Wellness</a></li>
    </ul>
    <ul>
     <li class="ldd_heading">By Theme</li>
     <li><a href="#">Paradise Islands</a></li>
     <li><a href="#">Cruises &amp; Boat Trips</a></li>
     <li><a href="#">Wild Animals &amp; Safaris</a></li>
     <li><a href="#">Nature Pure</a></li>
     <li><a href="#">Helping others &amp; For Hope</a></li>
     <li><a href="#">Diving</a></li>
    </ul>
    <a class="ldd_subfoot" href="#">   New Deals</a>
    </div>
    </li>
    <li>
    <span>Equipment</span>
    <div class="ldd_submenu">
    <ul>
     <li class="ldd_heading">By Location</li>
     <li><a href="#">South America</a></li>
     <li><a href="#">Antartica</a></li>
     <li><a href="#">Africa</a></li>
     <li><a href="#">Asia and Australia</a></li>
     <li><a href="#">Europe</a></li>
    </ul>
    <ul>
     <li class="ldd_heading">By Category</li>
     <li><a href="#">Sun &amp; Beach</a></li>
     <li><a href="#">Adventure</a></li>
     <li><a href="#">Science &amp; Education</a></li>
     <li><a href="#">Extreme Sports</a></li>
     <li><a href="#">Relaxing</a></li>
     <li><a href="#">Spa and Wellness</a></li>
    </ul>
    <ul>
     <li class="ldd_heading">By Theme</li>
     <li><a href="#">Paradise Islands</a></li>
     <li><a href="#">Cruises &amp; Boat Trips</a></li>
     <li><a href="#">Wild Animals &amp; Safaris</a></li>
     <li><a href="#">Nature Pure</a></li>
     <li><a href="#">Helping others &amp; For Hope</a></li>
     <li><a href="#">Diving</a></li>
    </ul>
    <a class="ldd_subfoot" href="#">   New Deals</a>
    </div>
    </li>
    <li>
    <span>Locations</span>
    <div class="ldd_submenu">
    <ul>
     <li class="ldd_heading">By Location</li>
     <li><a href="#">South America</a></li>
     <li><a href="#">Antartica</a></li>
     <li><a href="#">Africa</a></li>
     <li><a href="#">Asia and Australia</a></li>
     <li><a href="#">Europe</a></li>
    </ul>
    <ul>
     <li class="ldd_heading">By Category</li>
     <li><a href="#">Sun &amp; Beach</a></li>
     <li><a href="#">Adventure</a></li>
     <li><a href="#">Science &amp; Education</a></li>
     <li><a href="#">Extreme Sports</a></li>
     <li><a href="#">Relaxing</a></li>
     <li><a href="#">Spa and Wellness</a></li>
    </ul>
    <ul>
     <li class="ldd_heading">By Theme</li>
     <li><a href="#">Paradise Islands</a></li>
     <li><a href="#">Cruises &amp; Boat Trips</a></li>
     <li><a href="#">Wild Animals &amp; Safaris</a></li>
     <li><a href="#">Nature Pure</a></li>
     <li><a href="#">Helping others &amp; For Hope</a></li>
     <li><a href="#">Diving</a></li>
    </ul>
    <a class="ldd_subfoot" href="#">   New Deals</a>
    </div>
    </li>
    </ul>


<style>
ul.ldd_menu{
 margin:0px;
 padding:0;
 display:block;
 height:50px;
 background-color:#D04528;
 list-style:none;
 font-family:"Trebuchet MS", sans-serif;
 border-top:1px solid #EF593B;
 border-bottom:1px solid #EF593B;
 border-left:10px solid #D04528;
 -moz-box-shadow:0px 3px 4px #591E12;
 -webkit-box-shadow:0px 3px 4px #591E12;
 -box-shadow:0px 3px 4px #591E12;
}
ul.ldd_menu a{
 text-decoration:none;
}
ul.ldd_menu > li{
 float:left;
 position:relative;
}
ul.ldd_menu > li > span{
 float:left;
 color:#fff;
 background-color:#D04528;
 height:50px;
 line-height:50px;
 cursor:default;
 padding:0px 20px;
 text-shadow:0px 0px 1px #fff;
 border-right:1px solid #DF7B61;
 border-left:1px solid #C44D37;
}
ul.ldd_menu .ldd_submenu{
 position:absolute;
 top:50px;
 width:550px;
 display:none;
 opacity:0.95;
 left:0px;
 font-size:10px;
 background: #C34328;
 border-top:1px solid #EF593B;
 -moz-box-shadow:0px 3px 4px #591E12 inset;
 -webkit-box-shadow:0px 3px 4px #591E12 inset;
 -box-shadow:0px 3px 4px #591E12 inset;
}
a.ldd_subfoot{
 background-color:#f0f0f0;
 color:#444;
 display:block;
 clear:both;
 padding:15px 20px;
 text-transform:uppercase;
 font-family: Arial, serif;
 font-size:12px;
 text-shadow:0px 0px 1px #fff;
 -moz-box-shadow:0px 0px 2px #777 inset;
 -webkit-box-shadow:0px 0px 2px #777 inset;
 -box-shadow:0px 0px 2px #777 inset;
}
ul.ldd_menu ul{
 list-style:none;
 float:left;
 border-left:1px solid #DF7B61;
 margin:20px 0px 10px 30px;
 padding:10px;
}
li.ldd_heading{
 font-family: Georgia, serif;
 font-size: 13px;
 font-style: italic;
 color:#FFB39F;
 text-shadow:0px 0px 1px #B03E23;
 padding:0px 0px 10px 0px;
}
ul.ldd_menu ul li a{
 font-family: Arial, serif;
 font-size:10px;
 line-height:20px;
 color:#fff;
 padding:1px 3px;
}
ul.ldd_menu ul li a:hover{
 -moz-box-shadow:0px 0px 2px #333;
 -webkit-box-shadow:0px 0px 2px #333;
 box-shadow:0px 0px 2px #333;
 background:#AF412B;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(function() {
    /**
     * the menu
     */
    var $menu = $('#ldd_menu');
    
    /**
     * for each list element,
     * we show the submenu when hovering and
     * expand the span element (title) to 510px
     */
    $menu.children('li').each(function(){
     var $this = $(this);
     var $span = $this.children('span');
     $span.data('width',$span.width());
     
     $this.bind('mouseenter',function(){
      $menu.find('.ldd_submenu').stop(true,true).hide();
      $span.stop().animate({'width':'510px'},300,function(){
       $this.find('.ldd_submenu').slideDown(300);
      });
     }).bind('mouseleave',function(){
      $this.find('.ldd_submenu').stop(true,true).hide();
      $span.stop().animate({'width':$span.data('width')+ 'px'},300);
     });
    });
            });
        </script>

• Save the gadget and you are done.
• Now check if it is working fine, then come back and change the contents in navigation menu according to your need.
• You can also change the theme of your navigation bar. Just replace the CSS code with any of the followings. To do so look at the above CSS Code in black between <style> and </style> and replace it with one of the following styles.
• Its a lot of code up there so be careful with that.

ul.ldd_menu{
 margin:0px;
 padding:0;
 display:block;
 height:50px;
 background-color:#890200;
 list-style:none;
 font-family:"Trebuchet MS", sans-serif;
 border-top:1px groove #890200;
 border-bottom:1px groove #EF593B;
 -moz-box-shadow:0px 3px 4px #591E12;
 -webkit-box-shadow:0px 3px 4px #591E12;
 -box-shadow:0px 3px 4px #591E12;
}
ul.ldd_menu a{
 text-decoration:none;
}
ul.ldd_menu > li{
 float:left;
 position:relative;
}
ul.ldd_menu > li > span{
 float:left;
 color:#FFB39F;
 background-color:#890200;
 height:50px;
 line-height:50px;
 cursor:default;
 padding:0px 20px;
 text-shadow:0px 0px 1px #fff;
 border-right:1px solid #DF7B61;
 border-left:1px solid #C44D37;
}
ul.ldd_menu .ldd_submenu{
 position:absolute;
 top:50px;
 width:550px;
 display:none;
 opacity:0.95;
 left:0px;
 font-size:10px;
 background: #890200;
 border-top:1px solid #EF593B;
 -moz-box-shadow:0px 3px 4px #591E12 inset;
 -webkit-box-shadow:0px 3px 4px #591E12 inset;
 -box-shadow:0px 3px 4px #591E12 inset;
}
a.ldd_subfoot{
 background-color:#965251;
 color:#E7EACE;
 display:block;
 clear:both;
 padding:15px 20px;
 text-transform:uppercase;
 font-family: Arial, serif;
 font-size:12px;
 text-shadow:0px 0px 1px #fff;
 -moz-box-shadow:0px 0px 2px #777 inset;
 -webkit-box-shadow:0px 0px 2px #777 inset;
 -box-shadow:0px 0px 2px #777 inset;
}
ul.ldd_menu ul{
 list-style:none;
 float:left;
 border-left:1px solid #DF7B61;
 margin:20px 0px 10px 30px;
 padding:10px;
}
li.ldd_heading{
 font-family: Georgia, serif;
 font-size: 13px;
 font-style: italic;
 color:#FFB39F;
 text-shadow:0px 0px 1px #B03E23;
 padding:0px 0px 10px 0px;
}
ul.ldd_menu ul li a{
 font-family: Arial, serif;
 font-size:10px;
 line-height:20px;
 color:#E7EACE;
 padding:1px 3px;
}
ul.ldd_menu ul li a:hover{
 -moz-box-shadow:0px 0px 2px #333;
 -webkit-box-shadow:0px 0px 2px #333;
 box-shadow:0px 0px 2px #333;
 border:1px groove #FFB39F;
 border-radius:2px;
 -webkit-border-radius:2px;
 -moz-border-radius:2px;
}

ul.ldd_menu{
 margin:0px;
 padding:0;
 display:block;
 height:50px;
 background-color:#3F3F3F;
 list-style:none;
 font-family:"Trebuchet MS", sans-serif;
 border-top:1px solid #777777;
 border-bottom:1px solid #777777;
 border-left:10px solid #3F3F3F;
 -moz-box-shadow:0px 3px 4px #591E12;
 -webkit-box-shadow:0px 3px 4px #591E12;
 -box-shadow:0px 3px 4px #591E12;
}
ul.ldd_menu a{
 text-decoration:none;
}
ul.ldd_menu > li{
 float:left;
 position:relative;
}
ul.ldd_menu > li > span{
 float:left;
 color:#fff;
 background-color:#3F3F3F;
 height:50px;
 line-height:50px;
 cursor:default;
 padding:0px 20px;
 text-shadow:0px 0px 1px #fff;
 border-right:1px solid #777777;
 border-left:1px solid #777777;
}
ul.ldd_menu .ldd_submenu{
 position:absolute;
 top:50px;
 width:550px;
 display:none;
 opacity:0.95;
 left:0px;
 font-size:10px;
 background: #878787;
 border-top:1px solid #fff;
 -moz-box-shadow:0px 3px 4px #591E12 inset;
 -webkit-box-shadow:0px 3px 4px #591E12 inset;
 -box-shadow:0px 3px 4px #591E12 inset;
}
a.ldd_subfoot{
 background-color:#3F3F3F;
 color:#fff;
 display:block;
 clear:both;
 padding:15px 20px;
 text-transform:uppercase;
 font-family: Arial, serif;
 font-size:12px;
 text-shadow:0px 0px 1px #fff;
 -moz-box-shadow:0px 0px 2px #777 inset;
 -webkit-box-shadow:0px 0px 2px #777 inset;
 -box-shadow:0px 0px 2px #777 inset;
}
ul.ldd_menu ul{
 list-style:none;
 float:left;
 border-left:1px groove #fff;
 margin:20px 0px 10px 30px;
 padding:10px;
}
li.ldd_heading{
 font-family: Georgia, serif;
 font-size: 13px;
 font-style: italic;
 color:#444;
 text-shadow:0px 0px 1px #B03E23;
 padding:0px 0px 10px 0px;
}
ul.ldd_menu ul li a{
 font-family: Arial, serif;
 font-size:10px;
 line-height:20px;
 color:#fff;
 padding:1px 3px;
}
ul.ldd_menu ul li a:hover{
 -moz-box-shadow:0px 0px 2px #333;
 -webkit-box-shadow:0px 0px 2px #333;
 box-shadow:0px 0px 2px #333;
 background:#3F3F3F;
 border-radius:2px;
 -webkit-border-radius:2px;
 -moz-border-radius:2px;
}

ul.ldd_menu{
 margin:0px;
 padding:0;
 display:block;
 height:50px;
 border-top:1px groove #fff;
 border-bottom:1px groove #fff;
    font-weight:bold;
 background: #eeeeee; /* Old browsers */
background: -moz-linear-gradient(top, #eeeeee 0%, #cccccc 63%); /* FF3.6  */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(63%,#cccccc)); /* Chrome,Safari4  */
background: -webkit-linear-gradient(top, #eeeeee 0%,#cccccc 63%); /* Chrome10 ,Safari5.1  */
background: -o-linear-gradient(top, #eeeeee 0%,#cccccc 63%); /* Opera 11.10  */
background: -ms-linear-gradient(top, #eeeeee 0%,#cccccc 63%); /* IE10  */
background: linear-gradient(top, #eeeeee 0%,#cccccc 63%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
 list-style:none;
 font-family:"Trebuchet MS", sans-serif;
 -moz-box-shadow:0px 3px 4px #591E12;
 -webkit-box-shadow:0px 3px 4px #591E12;
 -box-shadow:0px 3px 4px #591E12;
}
ul.ldd_menu a{
 text-decoration:none;
}
ul.ldd_menu > li{
 float:left;
 position:relative;
}
ul.ldd_menu > li > span{
 float:left;
 color:#444;
background: #eeeeee; /* Old browsers */
background: -moz-linear-gradient(top, #eeeeee 0%, #cccccc 63%); /* FF3.6  */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(63%,#cccccc)); /* Chrome,Safari4  */
background: -webkit-linear-gradient(top, #eeeeee 0%,#cccccc 63%); /* Chrome10 ,Safari5.1  */
background: -o-linear-gradient(top, #eeeeee 0%,#cccccc 63%); /* Opera 11.10  */
background: -ms-linear-gradient(top, #eeeeee 0%,#cccccc 63%); /* IE10  */
background: linear-gradient(top, #eeeeee 0%,#cccccc 63%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
 height:50px;
 line-height:50px;
 cursor:default;
 padding:0px 20px;
 text-shadow:0px 0px 1px #fff;
 border-right:1px groove #ffffff;
}
ul.ldd_menu .ldd_submenu{
 position:absolute;
 top:50px;
 width:550px;
 display:none;
 opacity:0.95;
 left:0px;
 font-size:10px;
 background: #28343b; /* Old browsers */
background: -moz-linear-gradient(top, #28343b 0%, #828c95 64%, #b5bdc8 100%); /* FF3.6  */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#28343b), color-stop(64%,#828c95), color-stop(100%,#b5bdc8)); /* Chrome,Safari4  */
background: -webkit-linear-gradient(top, #28343b 0%,#828c95 64%,#b5bdc8 100%); /* Chrome10 ,Safari5.1  */
background: -o-linear-gradient(top, #28343b 0%,#828c95 64%,#b5bdc8 100%); /* Opera 11.10  */
background: -ms-linear-gradient(top, #28343b 0%,#828c95 64%,#b5bdc8 100%); /* IE10  */
background: linear-gradient(top, #28343b 0%,#828c95 64%,#b5bdc8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#28343b', endColorstr='#b5bdc8',GradientType=0 ); /* IE6-9 */
 border-top:1px groove #fff;
 -moz-box-shadow:0px 3px 4px #591E12 inset;
 -webkit-box-shadow:0px 3px 4px #591E12 inset;
 -box-shadow:0px 3px 4px #591E12 inset;
}
a.ldd_subfoot{
 background: #eeeeee; /* Old browsers */
background: -moz-linear-gradient(top, #eeeeee 0%, #cccccc 63%); /* FF3.6  */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(63%,#cccccc)); /* Chrome,Safari4  */
background: -webkit-linear-gradient(top, #eeeeee 0%,#cccccc 63%); /* Chrome10 ,Safari5.1  */
background: -o-linear-gradient(top, #eeeeee 0%,#cccccc 63%); /* Opera 11.10  */
background: -ms-linear-gradient(top, #eeeeee 0%,#cccccc 63%); /* IE10  */
background: linear-gradient(top, #eeeeee 0%,#cccccc 63%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
 color:#840707;
 display:block;
 clear:both;
 padding:15px 20px;
 text-transform:uppercase;
 font-family: Arial, serif;
 font-size:12px;
 text-shadow:0px 0px 1px #fff;
 -moz-box-shadow:0px 0px 2px #777 inset;
 -webkit-box-shadow:0px 0px 2px #777 inset;
 -box-shadow:0px 0px 2px #777 inset;
}
ul.ldd_menu ul{
 list-style:none;
 float:left;
 border-left:1px groove #fff;
 margin:20px 0px 10px 30px;
 padding:10px;
}
li.ldd_heading{
 font-family: Georgia, serif;
 font-size: 13px;
 font-style: italic;
 font-weight:bold;
 color:#fff;
 text-shadow:0px 0px 1px #B03E23;
 padding:0px 0px 10px 0px;
}
ul.ldd_menu ul li a{
 font-family: Arial, serif;
 font-size:10px;
 line-height:20px;
 color:#fff;
 padding:1px 3px;
}
ul.ldd_menu ul li a:hover{
 -moz-box-shadow:0px 0px 2px #333;
 -webkit-box-shadow:0px 0px 2px #333;
 box-shadow:0px 0px 2px #333;
 background:#3F3F3F;
 border-radius:2px;
 -webkit-border-radius:2px;
 -moz-border-radius:2px;
}

ul.ldd_menu{
 margin:0px;
 padding:0;
 display:block;
 height:50px;
 border-top:1px groove #444;
 border-bottom:1px groove #444;
    font-weight:bold;
 background: #7d7e7d; /* Old browsers */
background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%); /* FF3.6  */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4  */
background: -webkit-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Chrome10 ,Safari5.1  */
background: -o-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Opera 11.10  */
background: -ms-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* IE10  */
background: linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
 list-style:none;
 font-family:"Trebuchet MS", sans-serif;
 -moz-box-shadow:0px 3px 4px #591E12;
 -webkit-box-shadow:0px 3px 4px #591E12;
 -box-shadow:0px 3px 4px #591E12;
}
ul.ldd_menu a{
 text-decoration:none;
}
ul.ldd_menu > li{
 float:left;
 position:relative;
}
ul.ldd_menu > li > span{
 float:left;
 color:#ADADAD;
background: #7d7e7d; /* Old browsers */
background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%); /* FF3.6  */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4  */
background: -webkit-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Chrome10 ,Safari5.1  */
background: -o-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Opera 11.10  */
background: -ms-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* IE10  */
background: linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
 height:50px;
 line-height:50px;
 cursor:default;
 padding:0px 20px;
 text-shadow:0px 0px 1px #fff;
 border-right:1px groove #C4C4C4;
}
ul.ldd_menu .ldd_submenu{
 position:absolute;
 top:50px;
 width:550px;
 display:none;
 opacity:0.95;
 left:0px;
 font-size:10px;
 border-top:1px groove #444;
 background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* FF3.6  */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed)); /* Chrome,Safari4  */
background: -webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Chrome10 ,Safari5.1  */
background: -o-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Opera 11.10  */
background: -ms-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* IE10  */
background: linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
 -moz-box-shadow:0px 3px 4px #591E12 inset;
 -webkit-box-shadow:0px 3px 4px #591E12 inset;
 -box-shadow:0px 3px 4px #591E12 inset;
}
a.ldd_subfoot{
 background: #7d7e7d; /* Old browsers */
background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%); /* FF3.6  */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4  */
background: -webkit-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Chrome10 ,Safari5.1  */
background: -o-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Opera 11.10  */
background: -ms-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* IE10  */
background: linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
 color:#fff;
 display:block;
 clear:both;
 padding:15px 20px;
 text-transform:uppercase;
 font-family: Arial, serif;
 font-size:12px;
 text-shadow:0px 0px 1px #fff;
 -moz-box-shadow:0px 0px 2px #777 inset;
 -webkit-box-shadow:0px 0px 2px #777 inset;
 -box-shadow:0px 0px 2px #777 inset;
}
ul.ldd_menu ul{
 list-style:none;
 float:left;
 border-left:1px groove #fff;
 margin:20px 0px 10px 30px;
 padding:10px;
}
li.ldd_heading{
 font-family: Georgia, serif;
 font-size: 13px;
 font-style: italic;
 font-weight:bold;
 color:#878787;
 text-shadow:0px 0px 1px #B03E23;
 padding:0px 0px 10px 0px;
}
ul.ldd_menu ul li a{
 font-family: Arial, serif;
 font-size:10px;
 line-height:20px;
 color:#878787;
 padding:1px 3px;
}
ul.ldd_menu ul li a:hover{
 -moz-box-shadow:0px 0px 2px #333;
 -webkit-box-shadow:0px 0px 2px #333;
 box-shadow:0px 0px 2px #333;
 background:#DDDDDD;
 color:#000000;
 border-radius:2px;
 -webkit-border-radius:2px;
 -moz-border-radius:2px;
}

ul.ldd_menu{
 margin:0px;
 padding:0;
 display:block;
 height:50px;
 border-top:2px groove #87E9FF;
    font-weight:bold;
 background: #93cede; /* Old browsers */
background: -moz-linear-gradient(top, #93cede 0%, #75bdd1 41%, #49a5bf 100%); /* FF3.6  */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#93cede), color-stop(41%,#75bdd1), color-stop(100%,#49a5bf)); /* Chrome,Safari4  */
background: -webkit-linear-gradient(top, #93cede 0%,#75bdd1 41%,#49a5bf 100%); /* Chrome10 ,Safari5.1  */
background: -o-linear-gradient(top, #93cede 0%,#75bdd1 41%,#49a5bf 100%); /* Opera 11.10  */
background: -ms-linear-gradient(top, #93cede 0%,#75bdd1 41%,#49a5bf 100%); /* IE10  */
background: linear-gradient(top, #93cede 0%,#75bdd1 41%,#49a5bf 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#93cede', endColorstr='#49a5bf',GradientType=0 ); /* IE6-9 */
 list-style:none;
 font-family:"Trebuchet MS", sans-serif;
 -moz-box-shadow:0px 3px 4px #591E12;
 -webkit-box-shadow:0px 3px 4px #591E12;
 -box-shadow:0px 3px 4px #591E12;
}
ul.ldd_menu a{
 text-decoration:none;
}
ul.ldd_menu > li{
 float:left;
 position:relative;
}
ul.ldd_menu > li > span{
 float:left;
 color:#ffffff;
background: #93cede; /* Old browsers */
background: -moz-linear-gradient(top, #93cede 0%, #75bdd1 41%, #49a5bf 100%); /* FF3.6  */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#93cede), color-stop(41%,#75bdd1), color-stop(100%,#49a5bf)); /* Chrome,Safari4  */
background: -webkit-linear-gradient(top, #93cede 0%,#75bdd1 41%,#49a5bf 100%); /* Chrome10 ,Safari5.1  */
background: -o-linear-gradient(top, #93cede 0%,#75bdd1 41%,#49a5bf 100%); /* Opera 11.10  */
background: -ms-linear-gradient(top, #93cede 0%,#75bdd1 41%,#49a5bf 100%); /* IE10  */
background: linear-gradient(top, #93cede 0%,#75bdd1 41%,#49a5bf 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#93cede', endColorstr='#49a5bf',GradientType=0 ); /* IE6-9 */
 height:50px;
 line-height:50px;
 cursor:default;
 padding:0px 20px;
 text-shadow:0px 0px 1px #fff;
 border-right:2px groove #87E9FF;
}
ul.ldd_menu .ldd_submenu{
 position:absolute;
 top:50px;
 width:550px;
 display:none;
 opacity:0.95;
 left:0px;
 font-size:10px;
 background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* FF3.6  */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed)); /* Chrome,Safari4  */
background: -webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Chrome10 ,Safari5.1  */
background: -o-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Opera 11.10  */
background: -ms-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* IE10  */
background: linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
 -moz-box-shadow:0px 3px 4px #591E12 inset;
 -webkit-box-shadow:0px 3px 4px #591E12 inset;
 -box-shadow:0px 3px 4px #591E12 inset;
}
a.ldd_subfoot{
 background: #93cede; /* Old browsers */
background: -moz-linear-gradient(top, #93cede 0%, #75bdd1 41%, #49a5bf 100%); /* FF3.6  */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#93cede), color-stop(41%,#75bdd1), color-stop(100%,#49a5bf)); /* Chrome,Safari4  */
background: -webkit-linear-gradient(top, #93cede 0%,#75bdd1 41%,#49a5bf 100%); /* Chrome10 ,Safari5.1  */
background: -o-linear-gradient(top, #93cede 0%,#75bdd1 41%,#49a5bf 100%); /* Opera 11.10  */
background: -ms-linear-gradient(top, #93cede 0%,#75bdd1 41%,#49a5bf 100%); /* IE10  */
background: linear-gradient(top, #93cede 0%,#75bdd1 41%,#49a5bf 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#93cede', endColorstr='#49a5bf',GradientType=0 ); /* IE6-9 */
 color:#fff;
 display:block;
 clear:both;
 padding:15px 20px;
 text-transform:uppercase;
 font-family: Arial, serif;
 font-size:12px;
 border-top:2px groove #87E9FF;
 text-shadow:0px 0px 1px #fff;
 -moz-box-shadow:0px 0px 2px #777 inset;
 -webkit-box-shadow:0px 0px 2px #777 inset;
 -box-shadow:0px 0px 2px #777 inset;
}
ul.ldd_menu ul{
 list-style:none;
 float:left;
 border-left:1px groove #fff;
 margin:20px 0px 10px 30px;
 padding:10px;
}
li.ldd_heading{
 font-family: Georgia, serif;
 font-size: 13px;
 font-style: italic;
 font-weight:bold;
 color:#878787;
 text-shadow:0px 0px 1px #B03E23;
 padding:0px 0px 10px 0px;
}
ul.ldd_menu ul li a{
 font-family: Arial, serif;
 font-size:10px;
 line-height:20px;
 color:#878787;
 padding:1px 3px;
}
ul.ldd_menu ul li a:hover{
 -moz-box-shadow:0px 0px 2px #333;
 -webkit-box-shadow:0px 0px 2px #333;
 box-shadow:0px 0px 2px #333;
 color:#000000;
 border-radius:2px;
 -webkit-border-radius:2px;
 -moz-border-radius:2px;
} 

ul.ldd_menu{
 margin:0px;
 padding:0;
 display:block;
 height:50px;
 border-top:2px groove #87E9FF;
    font-weight:bold;
 background: #93cede; /* Old browsers */
background: -moz-linear-gradient(top, #93cede 0%, #75bdd1 41%, #49a5bf 100%); /* FF3.6  */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#93cede), color-stop(41%,#75bdd1), color-stop(100%,#49a5bf)); /* Chrome,Safari4  */
background: -webkit-linear-gradient(top, #93cede 0%,#75bdd1 41%,#49a5bf 100%); /* Chrome10 ,Safari5.1  */
background: -o-linear-gradient(top, #93cede 0%,#75bdd1 41%,#49a5bf 100%); /* Opera 11.10  */
background: -ms-linear-gradient(top, #93cede 0%,#75bdd1 41%,#49a5bf 100%); /* IE10  */
background: linear-gradient(top, #93cede 0%,#75bdd1 41%,#49a5bf 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#93cede', endColorstr='#49a5bf',GradientType=0 ); /* IE6-9 */
 list-style:none;
 font-family:"Trebuchet MS", sans-serif;
 -moz-box-shadow:0px 3px 4px #591E12;
 -webkit-box-shadow:0px 3px 4px #591E12;
 -box-shadow:0px 3px 4px #591E12;
}
ul.ldd_menu a{
 text-decoration:none;
}
ul.ldd_menu > li{
 float:left;
 position:relative;
}
ul.ldd_menu > li > span{
 float:left;
 color:#ffffff;
background: #93cede; /* Old browsers */
background: -moz-linear-gradient(top, #93cede 0%, #75bdd1 41%, #49a5bf 100%); /* FF3.6  */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#93cede), color-stop(41%,#75bdd1), color-stop(100%,#49a5bf)); /* Chrome,Safari4  */
background: -webkit-linear-gradient(top, #93cede 0%,#75bdd1 41%,#49a5bf 100%); /* Chrome10 ,Safari5.1  */
background: -o-linear-gradient(top, #93cede 0%,#75bdd1 41%,#49a5bf 100%); /* Opera 11.10  */
background: -ms-linear-gradient(top, #93cede 0%,#75bdd1 41%,#49a5bf 100%); /* IE10  */
background: linear-gradient(top, #93cede 0%,#75bdd1 41%,#49a5bf 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#93cede', endColorstr='#49a5bf',GradientType=0 ); /* IE6-9 */
 height:50px;
 line-height:50px;
 cursor:default;
 padding:0px 20px;
 text-shadow:0px 0px 1px #fff;
 border-right:2px groove #87E9FF;
}
ul.ldd_menu .ldd_submenu{
 position:absolute;
 top:50px;
 width:550px;
 display:none;
 opacity:0.95;
 left:0px;
 font-size:10px;
 background: #f2f9fe; /* Old browsers */
background: -moz-linear-gradient(top, #f2f9fe 0%, #d6f0fd 100%); /* FF3.6  */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f9fe), color-stop(100%,#d6f0fd)); /* Chrome,Safari4  */
background: -webkit-linear-gradient(top, #f2f9fe 0%,#d6f0fd 100%); /* Chrome10 ,Safari5.1  */
background: -o-linear-gradient(top, #f2f9fe 0%,#d6f0fd 100%); /* Opera 11.10  */
background: -ms-linear-gradient(top, #f2f9fe 0%,#d6f0fd 100%); /* IE10  */
background: linear-gradient(top, #f2f9fe 0%,#d6f0fd 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f9fe', endColorstr='#d6f0fd',GradientType=0 ); /* IE6-9 */
 -moz-box-shadow:0px 3px 4px #591E12 inset;
 -webkit-box-shadow:0px 3px 4px #591E12 inset;
 -box-shadow:0px 3px 4px #591E12 inset;
}
a.ldd_subfoot{
 background: #93cede; /* Old browsers */
background: -moz-linear-gradient(top, #93cede 0%, #75bdd1 41%, #49a5bf 100%); /* FF3.6  */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#93cede), color-stop(41%,#75bdd1), color-stop(100%,#49a5bf)); /* Chrome,Safari4  */
background: -webkit-linear-gradient(top, #93cede 0%,#75bdd1 41%,#49a5bf 100%); /* Chrome10 ,Safari5.1  */
background: -o-linear-gradient(top, #93cede 0%,#75bdd1 41%,#49a5bf 100%); /* Opera 11.10  */
background: -ms-linear-gradient(top, #93cede 0%,#75bdd1 41%,#49a5bf 100%); /* IE10  */
background: linear-gradient(top, #93cede 0%,#75bdd1 41%,#49a5bf 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#93cede', endColorstr='#49a5bf',GradientType=0 ); /* IE6-9 */
 color:#fff;
 display:block;
 clear:both;
 padding:15px 20px;
 text-transform:uppercase;
 font-family: Arial, serif;
 font-size:12px;
 border-top:2px groove #87E9FF;
 text-shadow:0px 0px 1px #fff;
 -moz-box-shadow:0px 0px 2px #777 inset;
 -webkit-box-shadow:0px 0px 2px #777 inset;
 -box-shadow:0px 0px 2px #777 inset;
}
ul.ldd_menu ul{
 list-style:none;
 float:left;
 border-left:1px groove #fff;
 margin:20px 0px 10px 30px;
 padding:10px;
}
li.ldd_heading{
 font-family: Georgia, serif;
 font-size: 13px;
 font-style: italic;
 font-weight:bold;
 color:#878787;
 text-shadow:0px 0px 1px #B03E23;
 padding:0px 0px 10px 0px;
}
ul.ldd_menu ul li a{
 font-family: Arial, serif;
 font-size:10px;
 line-height:20px;
 color:#878787;
 padding:1px 3px;
}
ul.ldd_menu ul li a:hover{
 -moz-box-shadow:0px 0px 2px #333;
 -webkit-box-shadow:0px 0px 2px #333;
 box-shadow:0px 0px 2px #333;
 color:#000000;
 border-radius:2px;
 -webkit-border-radius:2px;
 -moz-border-radius:2px;
}

ul.ldd_menu{
 margin:0px;
 padding:0;
 display:block;
 height:50px;
 background: #cedce7; /* Old browsers */
background: -moz-linear-gradient(top, #cedce7 0%, #596a72 100%); /* FF3.6  */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cedce7), color-stop(100%,#596a72)); /* Chrome,Safari4  */
background: -webkit-linear-gradient(top, #cedce7 0%,#596a72 100%); /* Chrome10 ,Safari5.1  */
background: -o-linear-gradient(top, #cedce7 0%,#596a72 100%); /* Opera 11.10  */
background: -ms-linear-gradient(top, #cedce7 0%,#596a72 100%); /* IE10  */
background: linear-gradient(top, #cedce7 0%,#596a72 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cedce7', endColorstr='#596a72',GradientType=0 ); /* IE6-9 */
 list-style:none;
 font-family:"Trebuchet MS", sans-serif;
 border-top:1px solid #979FA3;
 border-bottom:1px solid #979FA3;
 -moz-box-shadow:0px 3px 4px #591E12;
 -webkit-box-shadow:0px 3px 4px #591E12;
 -box-shadow:0px 3px 4px #591E12;
}
ul.ldd_menu a{
 text-decoration:none;
}
ul.ldd_menu > li{
 float:left;
 position:relative;
}
ul.ldd_menu > li > span{
 float:left;
 color:#444;
 font-style:italic;
 font-weight:bold;
 background: #cedce7; /* Old browsers */
background: -moz-linear-gradient(top, #cedce7 0%, #596a72 100%); /* FF3.6  */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cedce7), color-stop(100%,#596a72)); /* Chrome,Safari4  */
background: -webkit-linear-gradient(top, #cedce7 0%,#596a72 100%); /* Chrome10 ,Safari5.1  */
background: -o-linear-gradient(top, #cedce7 0%,#596a72 100%); /* Opera 11.10  */
background: -ms-linear-gradient(top, #cedce7 0%,#596a72 100%); /* IE10  */
background: linear-gradient(top, #cedce7 0%,#596a72 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cedce7', endColorstr='#596a72',GradientType=0 ); /* IE6-9 */
 height:50px;
 line-height:50px;
 cursor:default;
 padding:0px 20px;
 text-shadow:0px 0px 1px #fff;
 border-right:1px solid #979FA3;
}
ul.ldd_menu .ldd_submenu{
 position:absolute;
 top:50px;
 width:550px;
 display:none;
 opacity:0.95;
 left:0px;
 font-size:10px;
background: #eeeeee; /* Old browsers */
background: -moz-linear-gradient(top, #eeeeee 0%, #eeeeee 100%); /* FF3.6  */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#eeeeee)); /* Chrome,Safari4  */
background: -webkit-linear-gradient(top, #eeeeee 0%,#eeeeee 100%); /* Chrome10 ,Safari5.1  */
background: -o-linear-gradient(top, #eeeeee 0%,#eeeeee 100%); /* Opera 11.10  */
background: -ms-linear-gradient(top, #eeeeee 0%,#eeeeee 100%); /* IE10  */
background: linear-gradient(top, #eeeeee 0%,#eeeeee 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */
 border-top:2px groove #D8E8BE;
 -moz-box-shadow:0px 3px 4px #591E12 inset;
 -webkit-box-shadow:0px 3px 4px #591E12 inset;
 -box-shadow:0px 3px 4px #591E12 inset;
}
a.ldd_subfoot{
 background: #cedce7; /* Old browsers */
background: -moz-linear-gradient(top, #cedce7 0%, #596a72 100%); /* FF3.6  */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cedce7), color-stop(100%,#596a72)); /* Chrome,Safari4  */
background: -webkit-linear-gradient(top, #cedce7 0%,#596a72 100%); /* Chrome10 ,Safari5.1  */
background: -o-linear-gradient(top, #cedce7 0%,#596a72 100%); /* Opera 11.10  */
background: -ms-linear-gradient(top, #cedce7 0%,#596a72 100%); /* IE10  */
background: linear-gradient(top, #cedce7 0%,#596a72 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cedce7', endColorstr='#596a72',GradientType=0 ); /* IE6-9 */
 color:#444;
 font-weight:bold;
 font-style:italic;
 display:block;
 clear:both;
 padding:15px 20px;
 text-transform:uppercase;
 font-family: Arial, serif;
 font-size:12px;
 text-shadow:0px 0px 1px #fff;
 -moz-box-shadow:0px 0px 2px #777 inset;
 -webkit-box-shadow:0px 0px 2px #777 inset;
 -box-shadow:0px 0px 2px #777 inset;
}
ul.ldd_menu ul{
 list-style:none;
 float:left;
 border-left:2px groove #979FA3;
 margin:20px 0px 10px 30px;
 padding:10px;
}
li.ldd_heading{
 font-family: arial;
 font-size: 13px;
 font-style:normal;
 font-weight:bold;
 color:#979FA3;
 text-shadow:0px 0px 1px #B03E23;
 padding:0px 0px 10px 0px;
}
ul.ldd_menu ul li a{
 font-family: Arial, serif;
 font-size:10px;
 line-height:20px;
 color:#444;
 padding:1px 3px;
}
ul.ldd_menu ul li a:hover{
 -moz-box-shadow:0px 0px 2px #333;
 -webkit-box-shadow:0px 0px 2px #333;
 box-shadow:0px 0px 2px #333;
 font-size:11px;
}

Conclusion

I hope this post was helpful. I have spent lot of time on this large drop down menu to make it best as i can so don't go without saying any thing and without sharing the love. Good Luck

Read More

How To Build High Authority Links Like .edu .gov .mil

 If you have read my previous article about link building  Link Building Walk-through then you might have noticed that i have emphasized on high PR and authority links. But that was just an over view of link building and i haven't explained some important parts more specifically, and one of them is How to get authoritative links. Remember when i say high Page Rank, i don't mean that green little toolbar that show you the page rank of a web page and when i say Authoritative Links, i don't mean only high PR links. Ok now this needs a bit of explaining. First of all page rank of a website is not what page rank toolbar shows you and high page rank sites are not the only authority sites.

Years back search system of search engines was very simple but things are changed now,search process has become more complex. Spammers took the advantage of search engines and used unethical tactics [ keyword spamming, ghost writing, and other black hat seo tricks] to get high ranking in search engines which forced the search engines to take some serious steps to improve the ranking system and to provide the searcher with best relevant results, so they came up with another ranking system so called Trust Rank to measure the credibility of a web site.

What Are High Authority BackLinks??

A while back links coming from High Page Rank site was considered to be an Authoritative link, and still link from High Page Rank sites have great impact on search engine ranking but basically educational institution & universities sites ( .edu ), government sites ( .gov ) and military sites ( .mil ) are considered as high authority sites because these are non commercial sites and are very trusted. Assumption is that good sites only link to good sites because they don't want to harm themselves by linking to junk sites. So when search engine will crawl these High Authority sites he will find links to high quality sites, he will follow those sites and will find that those sites are also linking to quality sites. Now question is How To Get Authority Links ? without buying them so search engines show some respect to your site.

How To Find & Get Links From High Authority Sites?

Those who realize the importance of High Authority ( .edu, .gov , .mil ) links will surely jump to this post without reading the previous part of the article, i totally understand the excitement so lets get straight to the point.

Spy On Your Competitors

SEO Experts says that they have seen proven results that even a single back link from High Authority sites ( .edu, .gov, .mil ) can push your ranking to an un expected good position. So spying on your competitor is a great thing to do, If he is doing great in search engines then its obvious that he has a really good link profile or there are some links from High Authority sites pointing to his site. So check your competitor's incoming links and pay special attention to the sites you think are High profile that you might have missed. I recommend using Yahoo site explorer and back link watch for this purpose. Once you found those sites, visit them and figure out what kind of links are those, they are comment links, profile links or links coming from author boxes. Then try to get those links. Most of the time webmasters accept links that are relevant to the topic and have some good information, so if your site is good resource of information, you won't have trouble getting those links.

Find Out ( .edu, .gov, .mil ) Sites Linking To Your Competitor

One of the online tool that i use most of the time is  WooRank. It provides great information about on-page and of-page seo of any site. Use this tool to check hoe many .gov, .edu and .mil links are pointing to your competitor's site. You can also use this simple Yahoo search command for this purpose.

linkdomain:www.domain.com site:edu

If you go to Yahoo Search and type linkdomain:www.google.com site:edu, you will get all the EDU sites that are linking to google.com. Now you can put your competitor's site in place of www.google.com and you can also change edu to gov, mil. Find out why those sites are linking to your competitor. If that  link is coming from an article then write a better version of that article and you can ask the webmaster to include your article too because of relevancy and good contents.

Get Links From ( .edu, .gov, .mil ) Blogs On Your Niche

One of the great thing you can do is that you can find .edu, .gov and .mil blogs in your niche. Which is easy way to get High Authority links. There is a simple Google search command that can help you finding the High Authority blogs in your niche.. Go to google and type the following:

Keyword+inurl:blog site:.edu

 Replace “keyword” with your targeted keyword or key phrase. For example If I’m looking for edu blogs that talk about Blogger Tricks or Blogger Widgets, i can search for Blogger Tricks+inurl:blog site:.edu. And it will give me a good list of blogs that has talked about blogger Tricks. So if you have some top notch articles about those topics that authors are talking about on that blog then webmaster will link to your blog to provide his readers more valuable contents. Be careful with the keywords because some time Google returns with some junk links if there are not much relevant information about your targeted keyword or it is confusing..

There might be some other ways to find High Authority sites and get free links from them, but i know this much and these are also easy to use techniques. Don't expect for magics. If you use the above mansion methods, you will find lot of High Authority sites that can link to you and you won't have to pay for that but it might not be easy. you have to work hard to make them believe that your site really worth linking to.

Read More

Beautiful Navigation bar menues with cool JQuery Hover Effect - Part - 1

A very professional and elegant looking navigation menu for blogger with cool JQuery hover effect. Now available in 6 different color variations and each one is just great. compatible with all browsers with lot of unique features. You can install this navigation menu on your blogs and can use it any way you want.

jQuery Menu Features

•     Full cross-browser compatibility
•     Fully accessible even when JavaScript is turned off, as a pure CSS menu
•     Search engines optimized
•     Clear unordered list (LI and UL HTML tags) structure of jQuery menu
•     Easy to setup and update
•     Fantastic animation and transition effects
•     Multiple pre-desinded color schemes
•     Completely customizable styling with CSS
•     Powered by jQuery
•     Extremely small - 3kb uncompressed 

Demos

• Yellow Green jQuey Nav Bar
• Black jQuery Nav Bar
• Deep Sky Blue jQuery Nav Bar

License

Free to use on both personal and commercial sites but you have to place following link in your blog / website footer or any where you want.

<a href="http://apycom.com/">Menus</a>.<a href="http://bloggeranalytics.blogspot.com/">Blogger Widgets</a>

Yellow Green Navigation Bar With Jquery Hover Effects

How To install......

1 Login to blogger.
2 Go to Design > Page Elements > Add a new html / JavaScript Gadget.
3 Copy the following code and paste in in Html / JavaScript Gadget.

<div id="menu">
  <ul class="menu">
   <li><a href="#" class="parent"><span>Home</span></a>
    <div><ul>
     <li><a href="#" class="parent"><span>Sub Item 1</span></a>
      <div><ul>
       <li><a href="#" class="parent"><span>Sub Item 1.1</span></a>
        <div><ul>
        <li><a href="#"><span>Sub Item 1.1.1</span></a></li>
        <li><a href="#"><span>Sub Item 1.1.2</span></a></li>
        </ul></div>
       </li>
       <li><a href="#"><span>Sub Item 1.2</span></a></li>
       <li><a href="#"><span>Sub Item 1.3</span></a></li>
       <li><a href="#"><span>Sub Item 1.4</span></a></li>
       <li><a href="#"><span>Sub Item 1.5</span></a></li>
       <li><a href="#"><span>Sub Item 1.6</span></a></li>
       <li><a href="#" class="parent"><span>Sub Item 1.7</span></a>
        <div><ul>
        <li><a href="#"><span>Sub Item 1.7.1</span></a></li>
        <li><a href="#"><span>Sub Item 1.7.2</span></a></li>
        </ul></div>
       </li>
      </ul></div>
     </li>
     <li><a href="#"><span>Sub Item 2</span></a></li>
     <li><a href="#"><span>Sub Item 3</span></a></li>
    </ul></div>
   </li>
   <li><a href="#"><span>Product Info</span></a>
    <div><ul>
     <li><a href="#" class="parent"><span>Sub Item 1</span></a>
      <div><ul>
      <li><a href="#"><span>Sub Item 1.1</span></a></li>
      <li><a href="#"><span>Sub Item 1.2</span></a></li>
      </ul></div>
     </li>
     <li><a href="#" class="parent"><span>Sub Item 2</span></a>
      <div><ul>
      <li><a href="#"><span>Sub Item 2.1</span></a></li>
      <li><a href="#"><span>Sub Item 2.2</span></a></li>
      </ul></div>
     </li>
     <li><a href="#"><span>Sub Item 3</span></a></li>
     <li><a href="#"><span>Sub Item 4</span></a></li>
     <li><a href="#"><span>Sub Item 5</span></a></li>
     <li><a href="#"><span>Sub Item 6</span></a></li>
     <li><a href="#"><span>Sub Item 7</span></a></li>
    </ul></div>
   </li>
   <li><a href="#"><span>Help</span></a></li>
   <li class="last"><a href="#"><span>Contacts</span></a></li>
  </ul>
 </div>

4 Replace the" # " in above code with your menu links and delete the extra list items.
5 Save the Gadget and drag it to the top navigation bar position.
6 Now go to Edit HTML tab and click Expand Widget Template check box.
7 Now copy the following code and paste it above the </head> tag.

<script type="text/javascript" src="http://webrank.opendrive.com/files/46826701_33SLA_a3b2/jquery.js"></script>
<script type="text/javascript" src="http://webrank.opendrive.com/files/46826698_3CxQ7/menu.js"></script>

8 Now find ]]></b:skin> and paste following CSS code above it.

/**
 *********************************************
 * Prototype of styles for horizontal CSS-menu
 * @data 30.06.2009
 *********************************************
 * (X)HTML-scheme:
 *  <div id="menu">
 *      <ul class="menu">
 *          <li><a href="#" class="parent"><span>level 1</span></a>
 *              <ul>
 *                  <li><a href="#" class="parent"><span>level 2</span></a>
 *                      <ul><li><a href="#"><span>level 3</span></a></li></ul>
 *                  </li>
 *              </ul>
 *          </li>
 *          <li class="last"><a href="#"><span>level 1</span></a></li>
 *      </ul>
 *  </div>
 *********************************************
 */

/* menu::base */
div#menu {
    height:41px;
    background:url(https://lh4.googleusercontent.com/-HnDV7PPfoPY/ToKG3czQ2cI/AAAAAAAAAYM/mwAZfL5i0WI/main-bg.png) repeat-x;
}

div#menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
}
div#menu ul.menu {
    padding-left: 30px;
}

div#menu li {
    position: relative;
    z-index: 9;
    margin: 0;
    padding: 0 5px 0 0;
    display: block;
    float: left;
}
div#menu li:hover>ul {
    left: -2px;
}

div#menu a {
    position: relative;
    z-index: 10;
    height: 41px;
    display: block;
    float: left;
    line-height: 41px;
    text-decoration: none;
    font: normal 12px Trebuchet MS;
}
div#menu a:hover, div#menu a:hover span { color: #fff; }
div#menu li.current a {}

div#menu span {
    display: block;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: 95% 0;
}
div#menu ul ul a.parent span {
    background-position:95% 8px;
    background-image: url(https://lh4.googleusercontent.com/-Mnf-3dHMRTg/ToKG22eWa1I/AAAAAAAAAYA/Zrcr4-1h3As/item-pointer.gif);
}
div#menu ul ul a.parent:hover span {
    background-image: url(https://lh3.googleusercontent.com/-n9MQ76JC-Bw/ToKG2wiNTVI/AAAAAAAAAX8/cDHRoltqCrw/item-pointer-mover.gif);
}

/* menu::level1 */
div#menu a {
    padding: 0 10px 0 10px;
    line-height: 30px;
    color: #e5e5e5;
}
div#menu span {
    margin-top: 5px;
}/**@replace#1*/
div#menu li { background: url(https://lh5.googleusercontent.com/-049CCj35JKg/ToKG3bSFADI/AAAAAAAAAYQ/KMgPSMukKH8/main-delimiter.png) 98% 4px no-repeat; }
div#menu li.last { background: none; }

/* menu::level2 */
div#menu ul ul li { background: none; }
div#menu ul ul {
    position: absolute;
    top: 38px;
    left: -999em;
    width: 163px;
    padding: 5px 0 0 0;
    background: rgb(45,45,45);
    margin-top:1px;
}
div#menu ul ul a {
    padding: 0 0 0 15px;
    height: auto;
    float: none;
    display: block;
    line-height: 24px;
    color: rgb(169,169,169);
}
div#menu ul ul span {
    margin-top: 0;
    padding-right: 15px;
    _padding-right: 20px;
    color: rgb(169,169,169);
}
div#menu ul ul a:hover span {
    color: #fff;
}
div#menu ul ul li.last { background: none; }
div#menu ul ul li {
    width: 100%;
}

/* menu::level3 */
div#menu ul ul ul {
    padding: 0;
    margin: -38px 0 0 163px !important;
    margin-left:172px;
}

/* colors */
div#menu ul ul ul { background: rgb(41,41,41); }
div#menu ul ul ul ul { background: rgb(38,38,38); }
div#menu ul ul ul ul { background: rgb(35,35,35); }

/* lava lamp */
div#menu li.back {
    background: url(https://lh4.googleusercontent.com/-lpyp3La3Kvc/ToKG3GUpDZI/AAAAAAAAAYI/aY1pyty7hTo/lava.png) no-repeat right -44px !important;
    background-image: url(https://lh3.googleusercontent.com/-O-6TZeTfSAQ/ToKG2zOVK4I/AAAAAAAAAYE/Y0M6JKTFC90/lava.gif);
    width: 13px;
    height: 44px;
    z-index: 8;
    position: absolute;
    margin: -1px 0 0 -5px;
}
div#menu li.back .left {
    background: url(https://lh4.googleusercontent.com/-lpyp3La3Kvc/ToKG3GUpDZI/AAAAAAAAAYI/aY1pyty7hTo/lava.png) no-repeat top left !important;
    background-image: url(https://lh3.googleusercontent.com/-O-6TZeTfSAQ/ToKG2zOVK4I/AAAAAAAAAYE/Y0M6JKTFC90/lava.gif);
    height: 44px;
    margin-right: 8px;
}

9 Click the Preview button, if all correct then Save the template.
10 That's it. Your navigation menu is installed. You can get rid of your older navigation menu now.

Black Navigation Bar With Jquery Hover Effects

How To install......



> Follow the first 6 steps from above.
> Now in step 7 copy the following code and paste it above the </head> tag.

<script type="text/javascript" src="http://webrank.opendrive.com/files/47958980_Rzojz/jquery.js"></script>
 <script type="text/javascript" src="http://webrank.opendrive.com/files/47958977_6iKxU/menu.js"></script>

> Now find ]]></b:skin> and paste following CSS code above it.

/**
 *********************************************
 * Prototype of styles for horizontal CSS-menu
 * @data 30.06.2009
 *********************************************
 * (X)HTML-scheme:
 *  <div id="menu">
 *      <ul class="menu">
 *          <li><a href="#" class="parent"><span>level 1</span></a>
 *              <ul>
 *                  <li><a href="#" class="parent"><span>level 2</span></a>
 *                      <ul><li><a href="#"><span>level 3</span></a></li></ul>
 *                  </li>
 *              </ul>
 *          </li>
 *          <li class="last"><a href="#"><span>level 1</span></a></li>
 *      </ul>
 *  </div>
 *********************************************
 */

/* menu::base */
div#menu {
    height:41px;
    background:url(https://lh3.googleusercontent.com/-3KyQN5m2uEo/To91Nd3mINI/AAAAAAAAAhw/DHf7OCY-w6c/s41/main-bg.png) repeat-x;
}

div#menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
}
div#menu ul.menu {
    padding-left: 30px;
}

div#menu li {
    position: relative;
    z-index: 9;
    margin: 0;
    padding: 0 5px 0 0;
    display: block;
    float: left;
}
div#menu li:hover>ul {
    left: -2px;
}

div#menu a {
    position: relative;
    z-index: 10;
    height: 41px;
    display: block;
    float: left;
    line-height: 41px;
    text-decoration: none;
    font: normal 12px Trebuchet MS;
}
div#menu a:hover, div#menu a:hover span { color: #fff; }
div#menu li.current a {}

div#menu span {
    display: block;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: 95% 0;
}
div#menu ul ul a.parent span {
    background-position:95% 8px;
    background-image: url(https://lh4.googleusercontent.com/-Wo13rm3ATMk/To91M1hFPNI/AAAAAAAAAhc/UDA-WliYpIQ/s10/item-pointer.gif);
}
div#menu ul ul a.parent:hover span {
    background-image: url(https://lh3.googleusercontent.com/-jtf5gWMjvmU/To91M0mEzII/AAAAAAAAAhg/DYSYtwsohOw/s10/item-pointer-mover.gif);
}

/* menu::level1 */
div#menu a {
    padding: 0 10px 0 10px;
    line-height: 30px;
    color: #e5e5e5;
}
div#menu span {
    margin-top: 5px;
}/**@replace#1*/
div#menu li { background: url(https://lh6.googleusercontent.com/-p9PoLfvkgB4/To91NaM9mNI/AAAAAAAAAhs/T7EhzCKtcbE/s32/main-delimiter.png) 98% 4px no-repeat; }
div#menu li.last { background: none; }

/* menu::level2 */
div#menu ul ul li { background: none; }
div#menu ul ul {
    position: absolute;
    top: 38px;
    left: -999em;
    width: 163px;
    padding: 5px 0 0 0;
    background: rgb(45,45,45);
    margin-top:1px;
}
div#menu ul ul a {
    padding: 0 0 0 15px;
    height: auto;
    float: none;
    display: block;
    line-height: 24px;
    color: rgb(169,169,169);
}
div#menu ul ul span {
    margin-top: 0;
    padding-right: 15px;
    _padding-right: 20px;
    color: rgb(169,169,169);
}
div#menu ul ul a:hover span {
    color: #fff;
}
div#menu ul ul li.last { background: none; }
div#menu ul ul li {
    width: 100%;
}

/* menu::level3 */
div#menu ul ul ul {
    padding: 0;
    margin: -38px 0 0 163px !important;
    margin-left:172px;
}

/* colors */
div#menu ul ul ul { background: rgb(41,41,41); }
div#menu ul ul ul ul { background: rgb(38,38,38); }
div#menu ul ul ul ul { background: rgb(35,35,35); }

/* lava lamp */
div#menu li.back {
    background: url(https://lh3.googleusercontent.com/-GLCuHKR1zjw/To91NPCb80I/AAAAAAAAAho/WLgr0WxzJ1Y/s229/lava.png) no-repeat right -44px !important;
    background-image: url(https://lh3.googleusercontent.com/-78qgmsz_XAE/To91My68dgI/AAAAAAAAAhk/wO3RVPK5718/s229/lava.gif);
    width: 13px;
    height: 44px;
    z-index: 8;
    position: absolute;
    margin: -1px 0 0 -5px;
}
div#menu li.back .left {
    background: url(https://lh3.googleusercontent.com/-GLCuHKR1zjw/To91NPCb80I/AAAAAAAAAho/WLgr0WxzJ1Y/s229/lava.png) no-repeat top left !important;
    background-image: url(https://lh3.googleusercontent.com/-78qgmsz_XAE/To91My68dgI/AAAAAAAAAhk/wO3RVPK5718/s229/lava.gif);
    height: 44px;
    margin-right: 8px;
}

9 Click the Preview button, if all correct then Save the template.
10 That's it. Your navigation menu is installed. You can get rid of your older navigation menu now.

Deep Sky Blue Navigation Bar With Jquery Hover Effects

 How To install......

> Follow the first 6 steps from above.
> Now in step 7 copy the following code and paste it above the </head> tag.

<script type="text/javascript" src="http://webrank.opendrive.com/files/47957412_9PSsY/jquery.js"></script>
 <script type="text/javascript" src="http://webrank.opendrive.com/files/47957409_e4pIq/menu.js"></script>

> Now find ]]></b:skin> and paste following CSS code above it.

/**
 *********************************************
 * Prototype of styles for horizontal CSS-menu
 * @data 30.06.2009
 *********************************************
 * (X)HTML-scheme:
 *  <div id="menu">
 *      <ul class="menu">
 *          <li><a href="#" class="parent"><span>level 1</span></a>
 *              <ul>
 *                  <li><a href="#" class="parent"><span>level 2</span></a>
 *                      <ul><li><a href="#"><span>level 3</span></a></li></ul>
 *                  </li>
 *              </ul>
 *          </li>
 *          <li class="last"><a href="#"><span>level 1</span></a></li>
 *      </ul>
 *  </div>
 *********************************************
 */

/* menu::base */
div#menu {
    height:41px;
    background:url(https://lh6.googleusercontent.com/-Io7SSjcDMYI/To92Wk7o69I/AAAAAAAAAiM/JF6dkw_UKAQ/s41/main-bg.png) repeat-x;
}

div#menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
}
div#menu ul.menu {
    padding-left: 30px;
}

div#menu li {
    position: relative;
    z-index: 9;
    margin: 0;
    padding: 0 5px 0 0;
    display: block;
    float: left;
}
div#menu li:hover>ul {
    left: -2px;
}

div#menu a {
    position: relative;
    z-index: 10;
    height: 41px;
    display: block;
    float: left;
    line-height: 41px;
    text-decoration: none;
    font: normal 12px Trebuchet MS;
}
div#menu a:hover, div#menu a:hover span { color: #fff; }
div#menu li.current a {}

div#menu span {
    display: block;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: 95% 0;
}
div#menu ul ul a.parent span {
    background-position:95% 8px;
    background-image: url(https://lh3.googleusercontent.com/-s36BxCFiVok/To92XP_7_vI/AAAAAAAAAiU/NfFQ82eQ2MQ/s10/item-pointer.gif);
}
div#menu ul ul a.parent:hover span {
    background-image: url(https://lh3.googleusercontent.com/-nquIeTVAb4o/To92WPp3vAI/AAAAAAAAAiA/tbU2-W8245c/s10/item-pointer-mover.gif);
}

/* menu::level1 */
div#menu a {
    padding: 0 10px 0 10px;
    line-height: 30px;
    color: #e5e5e5;
}
div#menu span {
    margin-top: 5px;
}/**@replace#1*/
div#menu li { background: url(https://lh6.googleusercontent.com/-dN11DSko_1M/To92W0cfYvI/AAAAAAAAAiQ/e6h0r2dbf1c/s32/main-delimiter.png) 98% 4px no-repeat; }
div#menu li.last { background: none; }

/* menu::level2 */
div#menu ul ul li { background: none; }
div#menu ul ul {
    position: absolute;
    top: 38px;
    left: -999em;
    width: 163px;
    padding: 5px 0 0 0;
    background: rgb(45,45,45);
    margin-top:1px;
}
div#menu ul ul a {
    padding: 0 0 0 15px;
    height: auto;
    float: none;
    display: block;
    line-height: 24px;
    color: rgb(169,169,169);
}
div#menu ul ul span {
    margin-top: 0;
    padding-right: 15px;
    _padding-right: 20px;
    color: rgb(169,169,169);
}
div#menu ul ul a:hover span {
    color: #fff;
}
div#menu ul ul li.last { background: none; }
div#menu ul ul li {
    width: 100%;
}

/* menu::level3 */
div#menu ul ul ul {
    padding: 0;
    margin: -38px 0 0 163px !important;
    margin-left:172px;
}

/* colors */
div#menu ul ul ul { background: rgb(41,41,41); }
div#menu ul ul ul ul { background: rgb(38,38,38); }
div#menu ul ul ul ul { background: rgb(35,35,35); }

/* lava lamp */
div#menu li.back {
    background: url(https://lh5.googleusercontent.com/-mBDSaGOPOFc/To92WayAaEI/AAAAAAAAAiI/hxFjQi16yCY/s229/lava.png) no-repeat right -44px !important;
    background-image: url(https://lh4.googleusercontent.com/-MFPAhA_mMxs/To92WdjbLpI/AAAAAAAAAiE/_kVUozlvUps/s229/lava.gif);
    width: 13px;
    height: 44px;
    z-index: 8;
    position: absolute;
    margin: -1px 0 0 -5px;
}
div#menu li.back .left {
    background: url(https://lh5.googleusercontent.com/-mBDSaGOPOFc/To92WayAaEI/AAAAAAAAAiI/hxFjQi16yCY/s229/lava.png) no-repeat top left !important;
    background-image: url(https://lh4.googleusercontent.com/-MFPAhA_mMxs/To92WdjbLpI/AAAAAAAAAiE/_kVUozlvUps/s229/lava.gif);
    height: 44px;
    margin-right: 8px;
}

Click the Preview button, if all correct then Save the template.
10 That's it. Your navigation menu is installed. You can get rid of your older navigation menu now.

Read More

Use Syntax Highlighter To Display Source Codes In blog Post

Previously i have written a post How to Display Scripts and Codes in Blogger Posts. Which was simple tutorial and also easy to use. Today i am going to show you how you can use Syntax Highlighter to display scripts and codes in your blog post more professional and nice way. You may have seen Syntax Highlighter on many wordpress blogs, it displays the codes with syntax coloring as displayed in Html or any other scripting language editor. I recommend using Syntax Highlighter in your blog posts when ever you have to display some source codes and i hope you will love it.

How to install syntax highlighter in blogger

1. Login to blogger click Design > HTML Editor .
2. Copy the following CSS code and paste it above ]]--></b:skin>

.dp-highlighter
{
 font-family: "Consolas", "Monaco", "Courier New", Courier, monospace;
 font-size: 12px;
 background-color: #E7E5DC;
 width: 99%;
 overflow: auto;
 margin: 18px 0 18px 0 !important;
 padding-top: 1px; /* adds a little border on top when controls are hidden */
}

/* clear styles */
.dp-highlighter ol,
.dp-highlighter ol li,
.dp-highlighter ol li span 
{
 margin: 0;
 padding: 0;
 border: none;
}

.dp-highlighter a,
.dp-highlighter a:hover
{
 background: none;
 border: none;
 padding: 0;
 margin: 0;
}

.dp-highlighter .bar
{
 padding-left: 45px;
}

.dp-highlighter.collapsed .bar,
.dp-highlighter.nogutter .bar
{
 padding-left: 0px;
}

.dp-highlighter ol
{
 list-style: decimal; /* for ie */
 background-color: #fff;
 margin: 0px 0px 1px 45px !important; /* 1px bottom margin seems to fix occasional Firefox scrolling */
 padding: 0px;
 color: #5C5C5C;
}

.dp-highlighter.nogutter ol,
.dp-highlighter.nogutter ol li
{
 list-style: none !important;
 margin-left: 0px !important;
}

.dp-highlighter ol li,
.dp-highlighter .columns div
{
 list-style: decimal-leading-zero; /* better look for others, override cascade from OL */
 list-style-position: outside !important;
 border-left: 3px solid #6CE26C;
 background-color: #F8F8F8;
 color: #5C5C5C;
 padding: 0 3px 0 10px !important;
 margin: 0 !important;
 line-height: 14px;
}

.dp-highlighter.nogutter ol li,
.dp-highlighter.nogutter .columns div
{
 border: 0;
}

.dp-highlighter .columns
{
 background-color: #F8F8F8;
 color: gray;
 overflow: hidden;
 width: 100%;
}

.dp-highlighter .columns div
{
 padding-bottom: 5px;
}

.dp-highlighter ol li.alt
{
 background-color: #FFF;
 color: inherit;
}

.dp-highlighter ol li span
{
 color: black;
 background-color: inherit;
}

/* Adjust some properties when collapsed */

.dp-highlighter.collapsed ol
{
 margin: 0px;
}

.dp-highlighter.collapsed ol li
{
 display: none;
}

/* Additional modifications when in print-view */

.dp-highlighter.printing
{
 border: none;
}

.dp-highlighter.printing .tools
{
 display: none !important;
}

.dp-highlighter.printing li
{
 display: list-item !important;
}

/* Styles for the tools */

.dp-highlighter .tools
{
 padding: 3px 8px 3px 10px;
 font: 9px Verdana, Geneva, Arial, Helvetica, sans-serif;
 color: silver;
 background-color: #f8f8f8;
 padding-bottom: 10px;
 border-left: 3px solid #6CE26C;
}

.dp-highlighter.nogutter .tools
{
 border-left: 0;
}

.dp-highlighter.collapsed .tools
{
 border-bottom: 0;
}

.dp-highlighter .tools a
{
 font-size: 9px;
 color: #a0a0a0;
 background-color: inherit;
 text-decoration: none;
 margin-right: 10px;
}

.dp-highlighter .tools a:hover
{
 color: red;
 background-color: inherit;
 text-decoration: underline;
}

/* About dialog styles */

.dp-about { background-color: #fff; color: #333; margin: 0px; padding: 0px; }
.dp-about table { width: 100%; height: 100%; font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; }
.dp-about td { padding: 10px; vertical-align: top; }
.dp-about .copy { border-bottom: 1px solid #ACA899; height: 95%; }
.dp-about .title { color: red; background-color: inherit; font-weight: bold; }
.dp-about .para { margin: 0 0 4px 0; }
.dp-about .footer { background-color: #ECEADB; color: #333; border-top: 1px solid #fff; text-align: right; }
.dp-about .close { font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; background-color: #ECEADB; color: #333; width: 60px; height: 22px; }

/* Language specific styles */

.dp-highlighter .comment, .dp-highlighter .comments { color: #008200; background-color: inherit; }
.dp-highlighter .string { color: blue; background-color: inherit; }
.dp-highlighter .keyword { color: #069; font-weight: bold; background-color: inherit; }
.dp-highlighter .preprocessor { color: gray; background-color: inherit; }
  
    

3. Then copy the following code and paste it before </head> tag.

4. Scroll to the bottom of your blogger template and paste the following code above </body> tag

<!-- Add-in Script for syntax highlighting -->  
<script language='javascript'>  
dp.SyntaxHighlighter.BloggerMode();  
dp.SyntaxHighlighter.HighlightAll('code');  
</script>

5. Use the "Preview" button to make sure your website is correct, then click "Save Template".
6. When composing a blog entry that contains source code, click the "Edit Html" tab and put your source code (with html-escaped characters) between these tags:

<pre name="code" class="cpp">  
    ...Your html-escaped code goes here...  
    </pre> 

In the end

Replace "cpp" with whatever language you're using, like HTML, CSS, JavaScript, XHTML,C++ etc. Check out complete list of programing languages here.

Make sure that you enter only HTML escaped code to stay out of trouble. Entering codes directly will lead to UN-predictable formatting. You can Google for HTML escaper or you can use this one.

Read More