I was going around the web looking for some interesting tutorials and found this one I would like to share. This is an elastic thumbnail menu which combines HTML, CSS and jQuery to create a cool zoom effect and expand upwards when an image is hovered over.

The HTML Code (plain and simple):

<div id="menuwrapper">
	<div id="menu">
		<a href="#" class="menuitem"><img src="image.jpg"/></a>
	</div>
</div>

The CSS Code:

This menu will be a bit different from conventional menus and the when the user hovers over the thumbnail, the image will expand to the right and upwards.

The main piece to acheive this effect is position:fixed;, which keeps the thumbnails aligned to the bottom.

#menuwrapper{ position:relative; height:210px; }

#menu{position:absolute; bottom:0;}

.menuitem{ position:fixed relative; bottom:0px; display:inline-block; }

img { -ms-interpolation-mode: bicubic; }

Note that for this effect to work in Internet Explorer, we need to add img { -ms-interpolation-mode: bicubic; } to our CSS file.

The jQuery Code:

$(document).ready(function(){
	$('.menuitem img').animate({width: 100}, 0);
    //Set all menu items to smaller size

	$('.menuitem').mouseover(function(){ //When mouse over menu item

		gridimage = $(this).find('img'); //Define target as a variable
		gridimage.stop().animate({width: 200}, 150);
    	//Animate image expanding to original size

	}).mouseout(function(){
    //When mouse no longer over menu item

		gridimage.stop().animate({width: 100}, 150);
        //Animate image back to smaller size

	});
});

See the demo here

Source: build internet

What is best way to keep your visitors entertained and make them stay longer on your blog? One way is to list the most popular content in your sidebar. The following code will display the top five posts with the most comments in your site. All you need to do is to paste the code below into your sidebar.php file and you are good to go.

<h2>Popular Posts:</h2>
<ul>
< ?php $result = $wpdb->get_results
("SELECT comment_count,ID,post_title FROM $wpdb->posts ORDER BY comment_count DESC
 LIMIT 0 , 5");
foreach ($result as $post) {
setup_postdata($post);
$postid = $post->ID;
$title = $post->post_title;
$commentcount = $post->comment_count;
if ($commentcount != 0) { ?>
<li><a href="<?php echo get_permalink($postid); ?>" title="< ?php echo $title ?>">
< ?php echo $title ?></a> {< ?php echo $commentcount ?>}</li>
< ?php } } ?>
</ul>

Credit: WPRecipes

A few weeks ago I posted the article Create a “Send to Twitter” button for your WordPress blog, in which you can create a button that will share what you are reading with your followers.

This week I will show you how you can add a “Share on Facebook” button in your WordPress blog to bring in more visitors. This is very simple, just like the Twitter button tutorial.

Open your single post file (single.php) file from your theme directory and insert the following code within the loop:

<a href="http://www.facebook.com/sharer.php?u=<?php the_permalink();?>
&t=< ?php the_title(); ?>" target="_blank">Share on Facebook</a>

To make things more interesting, you can use getTinyUrl() function to send a short URL to Facebook:

< ?php $turl = getTinyUrl(get_permalink($post->ID)); ?>
<a href="http://www.facebook.com/sharer.php?u=<?php echo $turl;?>&t=
< ?php the_title(); ?>" target="_blank">Share on Facebook</a>

That’s it! Now your readers will able to share your posts in their Facebook. This is a great way to boost your site’s traffic!

Source: WPRecipes