My Blog Widgets: With Hover Effect

Drop
 down menus are very important in blogging and these kinds of stuff is 
also considerable for the visitors be'coz visitor when firstly see your 
menus and other widget and if he like that then she/he wish to visit 
again itself and content also very important fro the every blogger. 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhstkr5YMbFxt364-dEOz1dKGgYZQJR_FfrWfnrbCLRSh9augkM0T8WPgqocoioP2_EK5wqfWn_yasajsZGGuVJ0k8eaRXvekbWlPYskkOsJCpFaCBq0Vp2MO1iBwbByti3gL9YlZgRKlal/s1600/How+to+Add+Professional+Dropdown+Menu+in+Blogger.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="296" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhstkr5YMbFxt364-dEOz1dKGgYZQJR_FfrWfnrbCLRSh9augkM0T8WPgqocoioP2_EK5wqfWn_yasajsZGGuVJ0k8eaRXvekbWlPYskkOsJCpFaCBq0Vp2MO1iBwbByti3gL9YlZgRKlal/s640/How+to+Add+Professional+Dropdown+Menu+in+Blogger.gif" width="640" /></a></div>
Step 1: How to Add Professional Dropdown Menu in Blogger. Now let's start adding it... Step 2: Login to Your Blogger Account.Go to your Blogger Dashboard>Layout>Add a Gadget. 
<div style="background-color: white; color: #333333; line-height: 19.19999885559082px;">
 </div>
<div style="background-color: white; color: #333333; line-height: 19.19999885559082px;">
Step 3: After click on Add a Gadget link A pop-up box will open now</div>
<div style="background-color: white; color: #333333; line-height: 19.19999885559082px;">
 </div>
<div class="separator" style="background-color: white; clear: both; color: #333333; line-height: 19.19999885559082px; text-align: center;">
</div>
<div class="separator" style="background-color: white; clear: both; color: #333333; line-height: 19.19999885559082px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2NBHy5gDBgEgcJxXLh_uiUcubKIfCWObP_PsxBB1lJOBdgv_IFLDpDcW7-a9VdOR1ihQexmiqwtC3lJh7V7TXfilbhjVGhPuVMzbRLrlQH7vivr3FbaIkrcfRGTCKzuvdNOxvLd3VYtjT/s1600/2013-12-07_051839.png" imageanchor="1" style="color: #999999; margin-left: 1em; margin-right: 1em; text-decoration: none;"><img border="0" height="106" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2NBHy5gDBgEgcJxXLh_uiUcubKIfCWObP_PsxBB1lJOBdgv_IFLDpDcW7-a9VdOR1ihQexmiqwtC3lJh7V7TXfilbhjVGhPuVMzbRLrlQH7vivr3FbaIkrcfRGTCKzuvdNOxvLd3VYtjT/s400/2013-12-07_051839.png" style="-webkit-transition: all 0.4s ease-in-out; border: 1px solid rgb(192, 192, 192); height: auto; max-width: 95%; padding: 4px; transition: all 0.4s ease-in-out;" width="400" /></a></div>
<div style="background-color: white; color: #333333; line-height: 19.19999885559082px;">
 Select "HTML/JavaScript" from the gadget options by clicking the blue plus sign for that gadget.</div>
<div style="background-color: white; color: #333333; line-height: 19.19999885559082px;">
 </div>
<div style="background-color: white; color: #333333; line-height: 19.19999885559082px;">
Step 4: Select 'HTML/Javascript' and add the one of code given below.</div>
<div style="background-color: white; color: #333333; line-height: 19.19999885559082px;">
 </div>
<blockquote class="tr_bq">
<style> 
 
/* Blue Dropdown Menu by www.myblog-widgets.blogspot.com/ */ 
#nav { 
display:inline-block; 
width:100%; 
margin:0px auto; 
padding:0; 
background:#335599 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-BBxRdrWbZvjpxE0Vcrk6H2-mbspdxED4HFg3sxxPQ7vqv6T2nOrk8dkyE1eLJPkdUYoAjQlY5N9NKaKLYnIuboznUoS2JVcXI7yPnwu4PjmD1TPMWuPFx5Dfp0B-C9xDEtWBiplV4XW4/s320/bg-ABT.png)
 repeat-x 0 -110px;border-radius:10px; /*some css3*/ 
-moz-border-radius:10px; 
-webkit-border-radius:10px; 
box-shadow:0 2px 2px rgba(0,0,0, .5); 
-moz-box-shadow:0 2px 2px rgba(0,0,0, .5); 
-webkit-box-shadow:0 2px 2px rgba(0,0,0, .5); 
} 
#nav li { 
margin:10px; 
float:left; 
position:relative; 
list-style:none; 
} 
#nav a { 
font-family:verdana; 
font-weight:bold; 
color:#e7e5e5; 
text-decoration:none; 
display:block; 
padding:8px 20px;border-radius:10px; /*some css3*/ 
-moz-border-radius:10px; 
-webkit-border-radius:10px; 
text-shadow:0 2px 2px rgba(0,0,0, .7); 
}/* selected menu element */ 
#nav .current a, #nav li:hover > a { 
background:#7788aa 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-BBxRdrWbZvjpxE0Vcrk6H2-mbspdxED4HFg3sxxPQ7vqv6T2nOrk8dkyE1eLJPkdUYoAjQlY5N9NKaKLYnIuboznUoS2JVcXI7yPnwu4PjmD1TPMWuPFx5Dfp0B-C9xDEtWBiplV4XW4/s320/bg-ABT.png)
 repeat-x 0 -20px; 
color:#000; 
border-top:1px solid #f8f8f8;box-shadow:0 2px 2px rgba(0,0,0, .7); /*some css3*/ 
-moz-box-shadow:0 2px 2px rgba(0,0,0, .7); 
-webkit-box-shadow:0 2px 2px rgba(0,0,0, .7); 
text-shadow:0 2px 2px rgba(255,255,255, 0.7); 
}/* sublevels */ 
#nav ul li:hover a, #nav li:hover li a { 
background:none; 
border:none; 
color:#000; 
} 
#nav ul li a:hover { 
background:#335599 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-BBxRdrWbZvjpxE0Vcrk6H2-mbspdxED4HFg3sxxPQ7vqv6T2nOrk8dkyE1eLJPkdUYoAjQlY5N9NKaKLYnIuboznUoS2JVcXI7yPnwu4PjmD1TPMWuPFx5Dfp0B-C9xDEtWBiplV4XW4/s320/bg-ABT.png)
 repeat-x 0 -100px; 
color:#fff;border-radius:10px; /*some css3*/ 
-moz-border-radius:10px; 
-webkit-border-radius:10px; 
text-shadow:0 2px 2px rgba(0,0,0, 0.7); 
}#nav ul li:first-child > a { 
-moz-border-radius-topleft:10px; /*some css3*/ 
-moz-border-radius-topright:10px; 
-webkit-border-top-left-radius:10px; 
-webkit-border-top-right-radius:10px; 
} 
#nav ul li:last-child > a { 
-moz-border-radius-bottomleft:10px; /*some css3*/ 
-moz-border-radius-bottomright:10px; 
-webkit-border-bottom-left-radius:10px; 
-webkit-border-bottom-right-radius:10px; 
}/* drop down */ 
#nav li:hover > ul { 
opacity:1; 
visibility:visible; 
} 
#nav ul { 
opacity:0; 
visibility:hidden; 
padding:0; 
width:175px; 
position:absolute; 
background:#aabbcc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-BBxRdrWbZvjpxE0Vcrk6H2-mbspdxED4HFg3sxxPQ7vqv6T2nOrk8dkyE1eLJPkdUYoAjQlY5N9NKaKLYnIuboznUoS2JVcXI7yPnwu4PjmD1TPMWuPFx5Dfp0B-C9xDEtWBiplV4XW4/s320/bg-ABT.png) repeat-x 0 0; 
border:1px solid #7788aa;border-radius:10px; /*some css3*/ 
-moz-border-radius:10px; 
-webkit-border-radius:10px; 
box-shadow:0 2px 2px rgba(0,0,0, .5); 
-moz-box-shadow:0 2px 2px rgba(0,0,0, .5); 
-webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);-moz-transition:opacity .25s linear, visibility .1s linear .1s; 
-webkit-transition:opacity .25s linear, visibility .1s linear .1s; 
-o-transition:opacity .25s linear, visibility .1s linear .1s; 
transition:opacity .25s linear, visibility .1s linear .1s; 
} 
#nav ul li { 
float:none; 
margin:0; 
} 
#nav ul a { 
font-weight:normal; 
text-shadow:0 2px 2px rgba(255,255,255, 0.7); 
} 
#nav ul ul { 
left:160px; 
top:0px; 
} 
 
</style> 
 
    <ul id="nav"> 
        <li><a href="#">Home</a></li> 
        <li><a href="#">Tutorials</a> 
            <ul> 
                <li><a href="#">HTML / CSS</a></li> 
                <li><a href="#">JS / jQuery</a> 
                    <ul> 
                        <li><a href="#">jQuery</a></li> 
                        <li><a href="#">JS</a></li> 
                    </ul> 
                </li> 
                <li><a href="#">PHP</a></li> 
                <li><a href="#">MySQL</a></li> 
                <li><a href="#">XSLT</a></li> 
                <li><a href="#">Ajax</a></li> 
            </ul> 
        </li> 
        <li><a href="#">Resources</a> 
            <ul> 
                <li><a href="#">By category</a> 
                    <ul> 
                        <li><a href="#">PHP</a></li> 
                        <li><a href="#">MySQL</a></li> 
                        <li><a href="#">XSLT</a></li> 
                        <li><a href="#">Ajax</a></li> 
                    </ul> 
                </li> 
                <li><a href="#">By tag name</a> 
                    <ul> 
                        <li><a href="#">captcha</a></li> 
                        <li><a href="#">gallery</a></li> 
                        <li><a href="#">animation</a></li> 
                    </ul> 
                </li> 
            </ul> 
        </li> 
        <li><a href="#">About</a></li> 
        <li><a href="http://myblog-widgets.blogspot.com/">FAQ's</a></li> 
    </ul></blockquote>
 
Make Changes.....!!! 
1. Replace it # with your link.  
2. Replace all Green Area with your showing menu name.

How to Add Professional Dropdown Menu in Blogger

Drop down menus are very important in blogging and these kinds of stuff is also considerable for the visitors be'coz visitor when firstly see your menus and other widget and if he like that then sh…

This is very simple and easy you only follow below steps and add this widget in your blog. Related posts 
widget is very important for a blog, because it increases 
the number of page views and also help the visitor to view other posts 
related to blog. Now here is wonderful trick to display links to related
 posts beneath each posts. At their blogs today there are many types of 
related post widget, and related items thumbnail images using HTML, Java
 script, etc. .. Here I will show a method that is easy to show 
install.It only title jQuery.It related post widget will look like a 
picture below. 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHmiKAybsSn3c09hbLVYESo2C2ic6I3JwfnJqOMng3jb8PyBWqfCFiX5_rWNu9BuiW5X4g02h9sG2g-tfsLmCFwVuwxIzC8-kpzepmDo98CnUcvLI1wFBkGDx9nnjtcaz2wkzWtjBXDFjE/s1600/Related+Posts+Widget+01.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="304" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHmiKAybsSn3c09hbLVYESo2C2ic6I3JwfnJqOMng3jb8PyBWqfCFiX5_rWNu9BuiW5X4g02h9sG2g-tfsLmCFwVuwxIzC8-kpzepmDo98CnUcvLI1wFBkGDx9nnjtcaz2wkzWtjBXDFjE/s640/Related+Posts+Widget+01.jpg" width="640" /></a></div>
 
Step 1: Now let's start adding it... 
 
Step 2: Login to Your Blogger Account.Go to your Blogger Dashboard>Template> Edit HTML> Proceed. 
 
Step 3: Find [by pressing <kbd style="border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid gray; box-shadow: rgb(238, 238, 238) 1px 0px 1px 0px, rgb(204, 204, 204) 0px 2px 0px 2px, rgb(68, 68, 68) 0px 2px 0px 3px; font-size: 1.2em; margin: 2px 3px; padding: 1px 5px;">Ctrl</kbd> + <kbd style="border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid gray; box-shadow: rgb(238, 238, 238) 1px 0px 1px 0px, rgb(204, 204, 204) 0px 2px 0px 2px, rgb(68, 68, 68) 0px 2px 0px 3px; font-size: 1.2em; margin: 2px 3px; padding: 1px 5px;">F</kbd> ] this code in the template: 
<blockquote class="tr_bq">
<div class='post-footer-line post-footer-line-1'/></blockquote>
 
If you cant find it then try finding this 
<blockquote class="tr_bq">
 </blockquote>
OR 
<blockquote class="tr_bq">
<div class='post-footer-line post-footer-line-2'/> <div class='post-footer-line post-footer-line-3'/> </div> </div> </blockquote>
 
 And immediately Below/After it, paste this code: 
<blockquote class="tr_bq">
<script 
src='http://dl.dropboxusercontent.com/s/c65xwzi0gc8z906/related-posts-min-1-ycode.js'
 type='text/javascript'/><link 
href='http://dl.dropboxusercontent.com/s/tu8qgyfxt2cze7k/related-posts-min-1.css'
 rel='stylesheet' type='text/css'/><a 
href='http://myblog-widgets.blogspot.com/' rel='dofollow' target='_blank' 
title='My Blog Widgets'><img alt='My Blog Widgets' border='0' 
src='https://bitly.com/24workpng1' style='position: fixed; bottom: 10%; 
right: 0%; top: 0px;'/></a><a 
href='http://myblog-widgets.blogspot.com/' rel='dofollow' target='_blank' 
title='All My Blog Widgets'><img alt='My Blog Widgets' 
border='0' src='https://bitly.com/24workpng1' style='position: fixed; 
bottom: 10%; right: 0%;'/></a><a 
href='http://myblog-widgets.blogspot.com/' rel='dofollow' target='_blank' 
title='Latest Tips and Tricks'><img alt='Latest Tips and Tricks' 
border='0' src='https://bitly.com/24workpng1' style='position: fixed; 
bottom: 10%; left: 0%;'/></a><b:if cond='data:blog.pageType 
== &quot;item&quot;'><div id='related-posts'><b:loop
 values='data:post.labels' var='label'><b:if 
cond='data:label.isLast != 
&quot;true&quot;'></b:if><b:if 
cond='data:blog.pageType == &quot;item&quot;'><script 
expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name +
 
&quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> 
<h2 class='title' style='color:#fff;background-color:#000;width:150px;'>Related Topics</h2> 
<script type='text/javascript'> 
var currentposturl=&quot;<data:post.url/>&quot;; 
var maxresults=5;  
removeRelatedDuplicates(); printRelatedLabels(); 
</script> 
</div> 
</b:if></blockquote>
 
Step 4: Customizations 
          You can adjust the maximum number of related posts being displayed by editing this line in the code. 
<blockquote class="tr_bq">
max-results=5</blockquote>
and 
<blockquote class="tr_bq">
var maxresults=5;</blockquote>
show the text 'Related Topics' on title. 
<blockquote class="tr_bq">
<h2 class='title' style='color:#fff;background-color:#000;width:150px;'>Related Topics</h2></blockquote>
 
Steo 5: Now you have done save this open your site.

Beautiful Related Posts Text Widget With Hover Effect for Blogger

This is very simple and easy you only follow below steps and add this widget in your blog. Related posts widget is very important for a blog, because it increases the number of page views and also h…

AddThis

How to Add Professional Dropdown Menu in Blogger

Beautiful Related Posts Text Widget With Hover Effect for Blogger

AddThis Smart Layers