A Simple Drop-Down Menu Using Jquery

UPDATE:  I updated some of my posts, this post I update 17+ Drop Down Menu Widget in Blogger - Horizontal Menus With CSS & HTML Codes........

STEP1:
Log in to Blogger, go to "Layout" -> "Edit HTML"Now find this code:

</head>

and immediately BEFORE/ABOVE it, paste this code:

<!--jquery-DD-Menu-Starts--><style type="text/css">/* menu styles */#jsddm{ margin: 0;padding: 0}#jsddm li{ float: left;list-style: none;font: 12px Tahoma, Arial}#jsddm li a{ display: block;background: #324143; /*DARK-GREEN*/padding: 5px 12px;text-decoration: none;border-right: 1px solid white;width: 70px;color: #EAFFED;white-space: nowrap}#jsddm li a:hover{ background: #24313C}#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: #A9C251; /*LIGHT-GREEN*/color: #24313C}#jsddm li ul li a:hover{ background: #8EA344}</style><!-- script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script --><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script><script type="text/javascript">var timeout = 500;var closetimer = 0;var ddmenuitem = 0;function jsddm_open(){ jsddm_canceltimer();jsddm_close();ddmenuitem = $(this).find('ul').eq(0).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><!--jquery-DD-Menu-Stops-http://bdlab.blogspot.com-->

Now before you save the template, make these changes in the code :

To get the HTML color codes, you can refer to this image: http://homepages.ulb.ac.be/~dgonze/INFO/htmlcolors.png and go to "Layout" -> "Page Elements" and click on "Add a Gadget", select it as "HTML/JavaScript" type and finally paste this code in to the new widget:

<!--BODY-CODE--><ul id="jsddm"><li><a href="#">JavaScript</a><ul><li><a href="#">Drop Down Menu</a></li><li><a href="#">jQuery Plugin</a></li><li><a href="#">Ajax Navigation</a></li></ul></li><li><a href="#">Effect</a><ul><li><a href="#">Slide Effect</a></li><li><a href="#">Fade Effect</a></li><li><a href="#">Opacity Mode</a></li><li><a href="#">Drop Shadow</a></li><li><a href="#">Semitransparent</a></li></ul></li><li><a href="#">Navigation</a></li><li><a href="#">HTML/CSS</a></li><li><a href="http://bdlab.blogspot.com">Blogger Help</a></li></ul>

Now Click Save

How to add a Recent Comments Widget to Blogger blog

UPDATE:  I updated some of my posts, this post I update Recent Comments Widget For Blogger / Blogspot with Top Commenters........

STEP #1 Log in to Blogger, go to Layout ->Add a Gadget of HTML/JavaScript type. 

 Then add this code in to it: 

<script style=text/javascript src=http://safir85.ucoz.com/bdlab-blogspot/24work/recent-comments/rc-freewebs.js ></script><script style=text/javascript >var a_rc=5;var m_rc=false;var n_rc=true;var o_rc=100;</script><script src=http://bdlab.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments ></script><div><small>^ <a href=http://24work.blogspot.com/>Grab This </a><a href=http://24work.blogspot.com/ target=_blank title=recent comments widget>Widget</a></small></div>

…src=”http://YourOwnB1og.blogspot.com/feeds/comments/default…

…and replace the blog address (indicated in color blue below) with your own blog address

…src=”http://YourOwnB1og.blogspot.com/feeds/comments/default…

(For self-hosted blogs)…

…src=”http://www.YourOwnB1og.com/feeds/comments/default…

Now Click Save 

How to add Flying "Scroll to Top" button to your Blogger blog using Jquery

STEP #1 Log in to Blogger, go to Layout -> Edit HTML Now find this code:

</body>

And immediately BEFORE/ABOVE it, paste this code:

<a href="#" id="backtotop">^ Scroll to Top</a>

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

<script type='text/javascript'>

/*-----------------------

*Scroll to top


-----------------------*/



$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr("href");if($(window).scrollTop()!="0"){$(this).fadeIn("slow")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()=="0"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}});$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}});



$(function() {

$("#toTop").scrollToTop();

});

</script>

and,Now find this code:

]]></b:skin>

Add before

#backtotop { width:100px;background:#F4FFBF;border:1px solid #ccc;text-align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#666;text-decoration:none; }

Now Click Save Template 

Recent Posts with Thumbnails Widget for Blogger

UPDATE:  I updated some of my posts, this post I update Recent Posts with Thumbnails Widget for Blogger / Blogspot........

STEP #1

Log in to Blogger, go to Layout ->Add a Gadget of HTML/JavaScript type. 

Then add this code in to it:

<div id="24work">

<a href='http://bit.ly/work24'><img alt='blogger widgets' src='https://sites.google.com/site/bdlab12/24work/blogspot%2btutorial.png'/></a><script language="JavaScript">

imgr = new Array();



imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglIi1s5p0FlI8lv8rdxNhO4NUkE3_SZOhGE4qsX3XN3xzIoywpUa5Qac7nQVPN4xh2vQrsZHei9akCF8omIxKT41hsFuFhefuSibNDrfUuGwrFyun7-J9C6JRBrkPWJSMwyut25P0e1pc/s400/noimage.png";



imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglIi1s5p0FlI8lv8rdxNhO4NUkE3_SZOhGE4qsX3XN3xzIoywpUa5Qac7nQVPN4xh2vQrsZHei9akCF8omIxKT41hsFuFhefuSibNDrfUuGwrFyun7-J9C6JRBrkPWJSMwyut25P0e1pc/s400/noimage.png";



imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglIi1s5p0FlI8lv8rdxNhO4NUkE3_SZOhGE4qsX3XN3xzIoywpUa5Qac7nQVPN4xh2vQrsZHei9akCF8omIxKT41hsFuFhefuSibNDrfUuGwrFyun7-J9C6JRBrkPWJSMwyut25P0e1pc/s400/noimage.png";



imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglIi1s5p0FlI8lv8rdxNhO4NUkE3_SZOhGE4qsX3XN3xzIoywpUa5Qac7nQVPN4xh2vQrsZHei9akCF8omIxKT41hsFuFhefuSibNDrfUuGwrFyun7-J9C6JRBrkPWJSMwyut25P0e1pc/s400/noimage.png";



imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglIi1s5p0FlI8lv8rdxNhO4NUkE3_SZOhGE4qsX3XN3xzIoywpUa5Qac7nQVPN4xh2vQrsZHei9akCF8omIxKT41hsFuFhefuSibNDrfUuGwrFyun7-J9C6JRBrkPWJSMwyut25P0e1pc/s400/noimage.png";





showRandomImg = true;

tablewidth = 298;

cellspacing = 8;

borderColor = "#ffffff";

bgTD = "#ffffff";



imgwidth = 80;

imgheight = 80;



fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";



text = "no";



showPostDate = false;



summaryPost = 50;

summaryFontsize = 11;

summaryColor = "#666";

icon2 = " ";



numposts = 5;



home_page = "http://24work.blogspot.com/";



</script>

<script src="http://safir85.ucoz.com/bdlab-blogspot/24work/rec-thumbnail/recentposts_thumbnail-1.js"></script>

<span style="font-size:5px;position:absolute;"><a title='blogger widget' href="http://24work.blogspot.com" target='_blank'>Blogspot Tutorial</a></span></div>

Explanation:

(Edit the values to fit your blog)







tablewidth - Width of the widget



cellspacing - Space between cells (default one is good)



borderColor - Border color (add the background color of your template to perfectly blend it in the template)



thumbwidth & thumbheight - Width and Height of the thumbnail (default are good)



fntsize - Font size of the title



acolor - Color of the titleaBold - you want bold titles? (true or false)



numposts - How many posts you want to show?



home_page : http://24work.blogspot.com/ (change this to your blog url)







And now click Save