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

Do you use Twitter on a daily basis? If so, you know how good Twitter is for sharing with everyone what you find interesting around the web. Here’s a great way to give your readers a chance to share your Wordpress blog posts with their friends and bring more visitors to you.

This is a very simple Worpress hack where you will create a link to Twitter with a status parameter. We will use the function the_permalink() to get the page URL:

<a href="http://twitter.com/home?status=Currently reading <?php the_permalink();?>"
title="Click to send this page to Twitter!" target="_blank">Share on Twitter</a>

You can add this line of code to your single post file (single.php) in order to display it on each individual post and also add it to your main index template (index.php) to display under each post title in the blog’s index page.

Source: How to: Create a “Send this to Twitter” button.

Enjoy!