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!

My latest project has just gone live. Amuse Resort Wear is a start-up company based in Portland, Oregon dedicated in serving women with design fashion from the world’s most exciting vacation places. The simple site now serves as an online presence with many more features to come. Check them out at www.amuseresortwear.com!

1. CSS Short-Hand Code:

When writing your CSS, you may want include many properties that could make your CSS code a bit messy. You can solve this problem by using CSS short-hand code to make your code neat and clean. The most common CSS properties that allow you to use short-hand code are font, margin, padding, background and border. The properties must be put into a specific order for your web browser to read them.

In the examples below you can see how much shorter and simpler your code can get:

Font:

#some-div{
font-family: Helvetica, Arial, Sans-Serif;
font-style: oblique; 
font-weight: bold; 
font-size: 16px; 
}

#some-div{
font: oblique bold 16px Helvetica, Arial, Sans-Serif;
}

Margin/Padding Properties:

This example also shows how to use the short-hand code for margin and the short-hand CSS for padding works the same, just replace margin with padding.

#some-div{
margin-top: 5px; margin-right: 10px; margin-bottom: 20px; margin-left: 15px;
}

#some-div{
margin: 5px 10px 20px 15px;
}

If your top and bottom have the same margin and the left and right have the same margin you can use the code below. This also works the same for padding.

#some-div{
margin-top: 10px; margin-right: 30px; margin-bottom: 10px; margin-left: 30px;
}

#some-div{
margin: 10px 30px;
}

Background Property

#some-div{
background-color: #000;
background-image: url(image.jpg);
background-position: left top;
background-repeat: no-repeat;
}

#some-div{
background: #000 url(image.jpg) top left no-repeat;
}

Border Property

#some-div{
border-width: 2px; border-style: solid; border-color: #000;
}

#some-div{
border: 2px solid #000;
}

You can also use this short-hand CSS with border-top, border-right, border-left, and border-bottom.

#some-div{
border-top: 2px; border-right: 5px; border-left: 10px; border-bottom: 3px;
}

#some-div{
border: 2px 5px 10px 3px;
}

2. Multiple classes together in one element

If you want to apply multiple classes to a certain element of your page, you can combine them as shown in the example below. All you need is to separate the classes with a space and voilá. Remember that CSS cascades so if you have the same properties in your second class as your first it will be overwritten by your second.

<div class="classOne classTwo">content here</div>

3. Underscore (_) and asterix (*) to hack multiple browsers

Sometimes coding for multiple browsers can be a pain as your styles can look different in each. A simple but effective solution is to add an asterix (for Internet Explorer 6 and below) or an underscore (for Internet Explorer 7 and above) in front of your property and that fixes your problems. In the example below we can have a margin-bottom property that will work differently for Firefox, Internet Explorer 6 and 7.

#some-div{
margin-top: 25px; *margin-top: 20px; _margin-top: 35px;
}

Firefox will give the element above a top margin of 25px while Internet Explorer 6 will give a 20px margin and Internet Explorer 7 a 35px margin. Pretty cool, huh?

Thanks for ready and please leave some feedback!