Discover how you can deliver a much richer experience for your audience by increasing the level of engagement on your website using a revolutionary WordPress plug-in. We’ll show you how to install this plug-in and get it setup with your WordPress blog. Then get your readers to start conversations on a contextual level revolving around words, sentences and images found on your website.

The Highligher plug-in is the latest offering from the masterminds behind Unique Blog Designs. Below is a quick video overview of what the hype is all about.

Most blog readers are used to leaving comments at the bottom of each post. This traditional way of commenting can get frustrating especially on popular posts where you will need to scroll all the way down just to leave a comment. It can also be cumbersome when you’re trying to follow specific conversations and there’s no easy way to visually identify the topic and the involved parties.

With the Highlighter, readers can now highlight any word, sentence or image and immediately leave a comment right there and then (see Figure 1.0). Additional sharing options are also available particularly via Email, Facebook and Twitter. The beauty about this is that other readers will see which words, sentences and/or images have been highlighted and can just easily mouse over them to view the comments.

Figure 1.0 – Highlighter sharing via Comment

Publishers need not worry as the plug-in offers support for Akismet spam filtering to battle those annoying spammers and also supports comment moderation.

One of the most powerful features of Highlighter is its ability to capture your reader’s email address and get it automatically added to your email list. As of this writing only Aweber, MailChimp and GetResponse are supported. For Campaign Monitor users have no fear, I did get in touch with Highlighter’s Co-Founder Matthew Blancarte a couple of days ago and here’s what he had to say,

"We actually have someone in our community that is looking into building this feature by next week! Please visit this thread to stay up to date. "

Highlighter not only makes your readers happy by enriching their engagement experience, it also increases the publishers opportunity to monetize their sites. The best part of it all is that this plug-in is free!

How To Install and Setup Highlighter in WordPress

This tutorial is only targeted for self-hosted WordPress blogs.

STEP 1: Download Highlighter

STEP 2: Log into your WordPress account (www.yourdomain.com/wp-admin) and on the left column under Plugins, click on “Add New”.

STEP 3: Under the Install Plugins click on “Upload”.

STEP 4: Browse to your downloaded zip file called Highlighter.zip.

STEP 5: Click Install then Activate.

In five easy steps, you should have Highlighter downloaded and activated. Now let’s get it setup so your readers can start Highlighting!

In your WordPress Dashboard, you should now have a Highlighter menu option on the left menu. Click on it to access Highlighter’s setup options.

General Tab

Under the General tab, you have the option of selecting an email marketing provider. Depending on what you select you may need to get your respective email list name, email list ID and/or API Key.

Appearance Tab

Under the appearance tab you can change the highlight colour and as of this writing there are only two available colour schemes.

In the next section, I’ve enabled the Count Chiclet (see Figure 2.0) which will appear above your posts. I’ve also enabled the Highlight Box (see Figure 3.0) which will appear below your post. It is important to specify a certain width to accommodate your page layout. In the following example, I’ve set the width to 570px.

Advanced Tab

In the advanced tab, make sure to tick the first two boxes to enable Akismet spam filtering and highlight/comment moderation.

If you’ve configured everything correctly, you should now be able to highlight any word, sentences and/or images in each of your blog post page and have the highlighter pop-up menu come up.

You should also have the following components installed: Highlighter Widget, Highlighter Count Chiclet and Highlighter Highlight Box.

Figure 2.0 – Count Chiclet showing one highlight

Figure 3.0 – Highlight Box

Quick Tip For The Technically Inclined

It is important that

<?php wp_head(); ?>

and

<?php wp_footer(); ?>

are called inside your header.php and footer.php files respectively. Otherwise Highlighter will not work.

That’s all there is to it! Happy Highlighting!

Photo by: Just Jefa

Related Posts

• Google AdSense Ninja Tactics
• Widgetize your WordPress Sidebar
• Install Google Gears for WordPress
• Learning WordPress

Discover how you can easily create fresh looking buttons with CSS3′s box shadow, text shadow, border radius and with the exciting RGBA properties. We also show you how to get that subtle shiny button effect using Adobe Photoshop.

TUTORIAL FILES

PREVIEW

Below is what we’re after under supported browsers.

On the other hand this is what we’re least impressed with under unsupported browsers.

The CSS3 Code

/* CSS3 /////////////////////////////////////////////////////// */
/* Inspired by the geniuses at ZURBs Playground /////////////// */
/* button ----------------------------------------------------- */
.fresh_button {
	background: #222 url(img/fresh-button.png) repeat-x;
	display: inline-block;
	padding: 5px 10px 6px;
	color: #fff;
	text-decoration: none;
	font-weight: bold;
	line-height: 1;
	-moz-border-radius: .5em;
	-webkit-border-radius: .5em;
	border-radius: .5em;
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
	border-bottom: 1px solid rgba(0,0,0,0,0.25);
	position: relative;
	cursor: pointer;
	}
	.fresh_button:hover {
		background-color: #111;
		color: #fff;
		text-decoration: none;
	}

/* sizes ------------------------------------------------------- */
.large { font-size: 1.4em; padding: 8px 14px 9px; }
.medium { font-size: 1.3em; }
.small { font-size: 1.1em; }

/* colours ----------------------------------------------------- */
.orange { background-color: #F36E21; }

<a class="large fresh_button" href="#">Fresh Button &#187;</a>
<a class="large orange fresh_button" href="#">
        Fresh Button &#187;</a>
<a class="medium orange fresh_button" href="#">
        Fresh Button &#187;</a>
<a class="small orange fresh_button" href="#">
        Fresh Button &#187;</a>

We use an em instead of px for our border radius for scalability.

-moz-border-radius: .5em;
-webkit-border-radius: .5em;
border-radius: .5em;

The same reason we need to use RGBA to set our shadow colours instead of using a static hex code like #222222 which doesn’t scale well.

-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
box-shadow: 0 1px 3px rgba(0,0,0,0.5);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);

If you omit the RGBA then you will get an undesired shadow effect in darker backgrounds similar to the screenshot below.

We could have used progid:DXImageTransform.Microsoft.gradient, -webkit-gradient and -moz-linear-gradient to achieve our button’s gradient effect but using a single PNG file as a background is easier and a lot more fun to implement.

background: #222 url(img/fresh-button.png) repeat-x;

How To Create The Button Gradient

STEP 1

Create a new web file in Photoshop and give it 200px width, 30px height and a transparent background. Rename the first layer to bg and create a second layer called shine.

STEP 2

Fill the bg layer with a solid colour like #222.

STEP 3

Press G to access your Gradient Tool. Change your foreground to #FFF and select Foreground to Transparent as your gradient preset. Create a gradient starting at the top of the button while holding down SHIFT. You can adjust the opacity to get the desired effect.

STEP 4

Press C to access your Crop Tool. Change the crop width to 1px and crop height to 30px. Now make your crop selection. Disable the visibility of the bg layer and now you’re ready to save the file as a PNG.

You can set your height to any pixel value greater than 30px when creating your own gradient background back in STEP 1. You can adjust the gradient background’s vertical position via CSS to accommodate the gradient’s varying intensity.

background: #222 url(img/fresh-button.png) repeat-x 0 -10px;

That’s it you’re finished.

Many thanks goes to ahisgett for supplying the main photo for this post.

Related Posts

• Create a Custom GoogleApps Login Portal
• Create a Christmas Tree Vector Collage
• Recreate The 9rules Logo

The Like Button is one of Facebook’s social plug-ins that you can add to your website. This tutorial will guide you step-by-step into getting it working for yours. Get the low down on the Open Graph protocol and find out how to add the button into your WordPress blog.

Recommended Reading

There’s been a huge buzz on Facebook’s move from the ‘Be a Fan’ button to ‘Like’ buttons. Facebook believes that this change offers their users a more light-weight and standard way to connect with people, things and topics in which they are interested.

There are two types of Like buttons. The iframe version is the easiest to implement. The second version is via the <fb:like> XFBML tag which requires the use of JavaScript SDK. The second version allows users to add a comment to their like as it is posted back to Facebook.

This tutorial will demonstrate the iframe implementation utilizing the Open Graph protocol. This tutorial assumes you have basic HTML knowledge and administrative access to your web page.

STEP 1

Add the following code within your <html> tag.

<html xmlns="http://www.w3.org/1999/xhtml"
           xmlns:og="http://opengraphprotocol.org/schema/"
           xmlns:fb="http://developers.facebook.com/schema/">

STEP 2

Next add the following Open Graph META tags in between the <head> and </head> tags. The following example below is taken from Australia’s Wedding Celebrant website. Make sure to change what is inside the content to your own.

<meta property="og:title" content="Australia's Wedding Celebrant" />
<meta property="og:type" content="website" />
<meta property="og:url"
      content="http://australiasweddingcelebrant.com.au" />
<meta property="og:image"
      content="http://australiasweddingcelebrant.com.au
                   /img/assets/video_preview.jpg" />
<meta property="fb:admins" content="angelobeltran001" />
<meta property="og:site_name"
      content="australiasweddingcelebrant" />
<meta property="og:description" content="Your wedding day is
your special day. It is an honour and my pleasure to be part of
something special. Let's make it a day to remember." />

For the fb:admins property enter your Facebook username. You can enter more than one admin just make sure to separate each entry with a comma.

For the og:image property it must be an image on your web page. The image must be at least 50px by 50px and have a maximum aspect ratio of 3:1.

For the og:type property, put ‘movie’ if you’re promoting a movie or ‘song’ if it’s a soundtrack. View the complete list of types here.

STEP 3

Next we need to get the iframe snippet using a tool from Facebook’s website. As you will see from the screenshot below you can tweak your Like button by changing properties like its width, font and style.

A live preview gets updated on the right as you make the changes. Once you’re happy go ahead and click on the button Get Code.

Your snippet should look something like this.

<iframe src="http://www.facebook.com/plugins/like.php?href=
http%3A%2F%2Faustraliasweddingcelebrant.com.au&
layout=standard&show_faces=true&width=450&
action=like&font=verdana&colorscheme=light"
scrolling="no" frameborder="0" allowTransparency="true"
style="border:none; overflow:hidden; width:450px;
height:px"></iframe>

To install this snippet in your WordPress blog just replace the url to <?php the_permalink(); ?> and paste inside index.php, single.php and archive.php.

<iframe src="http://www.facebook.com/plugins/like.php?href=
<?php the_permalink(); ?>&
layout=standard&show_faces=true&width=450&
action=like&font=verdana&colorscheme=light"
scrolling="no" frameborder="0" allowTransparency="true"
style="border:none; overflow:hidden; width:450px;
height:px"></iframe>

To fix the 2″ bottom margin bug that some people are reporting, all you need to do is tweak your iframe code by entering a value for the height in px (pixels).

You could try wrapping your iframe tag with a div tag like this.

<div id="iframe-wrap">
<iframe ... > </iframe>
</div>

Then in your stylesheet put this new id.

#iframe-wrap {
   width: 300px;
   height: 100px;
}

STEP 4

Now paste your iframe snippet into your web page. Your Like button should be similar to the screenshot below.

That’s it you’re all done!

The Like button will know if your website visitor is currently logged in to their Facebook account or not. Otherwise it will ask the user to login. If the user is currently logged in to their account when they visit your website, your Like button will be personalized for them by showing a list of their friends that’s already liked your web page.

When a visitor Likes your page, their Current Activity Stream will get updated with that activity. These entries will contain a link back to your website. If you’re using og:type such as movie, tv_show, song or book it will also update their INFO tab under their respective types. Facebook’s Like Button plug-in will rock the social networking cloud.

For those who’s not interested in utilizing the power of Open Graph protocol and just want the plain Facebook Like button. Then all you have to do is go to Facebook’s Like Button tool found at the bottom of that page. Make sure to enter your website address. Change the iframe settings like the width, style and font. Grab the code snippet and paste it into your web page.

Hope this helps if you have any questions I will try my best to answer them or you can always head to Facebook’s Help Center and for the tech savvy to Facebook Developer Forum.

Related Posts

• Your Facebook Account Has Been Hacked
• Use Facebook as Your Page

Christmas is fast approaching and if you’re getting in with the season you’re going to love this tutorial. We’re going to create several digital Christmas inspired illustrations in Adobe Illustrator then we’re going to use them to create a Christmas tree vector collage. All tutorial files are available for download.

TUTORIAL FILES

Let’s start by sketching Christmas inspired illustrations on a piece of paper. Try to get as many as 16-20 items. You can download the sketch piece I put together if you want to skip this part. Once you’re finished go ahead and scan it into your computer.

Fire up Adobe Illustrator and place the sketch file onto the new document. Label this layer sketch and lock it.

Next we’re going to use the Pen Tool to trace at least 16 illustrations from your sketch. Do this on a new layer and label it. If you’re using my sketch let’s start off with the shoe as illustrated below.

The finished piece will have a red background so go ahead create another layer and fill the entire background with a red box. Lock this layer. You can put this layer below your traces but above the sketch.

Continue to trace over the shoe as illustrated below. Feel free to fill in your traces with any colour. I used black and white for this tutorial.

Next select all four objects and from the Pathfinder Panel (SHIFT+CTRL+F9) select Minus Front to create a new compound shape. Now your shoe illustration is one vector piece instead of having four objects.

Next we trace another object from your sketch. I traced over the star in my sketch. I actually used the Star Tool to cheat this one out. Hold SHIFT while you drag with your mouse to constrain the proportions.

Select your star go to Object > Path > Offset Path…. Change your Offset value to -2px and enable preview to see how it will look. Click OK once you’re happy with the preview. This will create another star on top of the stack.

Next trace over the shades and fill them with a solid colour.

Select the 2 stars and fill them with white colour.

I went ahead and filled the shades with red so I can make a feel of what it will look like once we “minus front” the shades. You don’t have to do this step.

Select both stars and from the Pathfinder Panel select Merge which will merge both stars into one. Make sure not to merge the shades with it.

Next we select the star and the shades. From the Pathfinder Panel select Minus Front.

Now we have 2 finished traces let’s move on to the mistletoe. The secret to the Pen Tool is lots and lots of patience.

Don’t hesitate to Undo (CTRL+Z) if you make mistakes. Practice makes perfect.

Use the Ellipse Tool (L) and hold down SHIFT to make a perfect circle. Give them a white fill. Select all the objects making up the mistletoe and group them (CTRL+G).

Alternatively, you can use the Pathfinder Tool to merge all objects into one.

Let’s trace another and this time if you’ve downloaded my sketch, we’re going to trace over the snowman.

Feel free to add more details to your traces as you see fit.

Give it a white fill to give it the final touch. Now he’s looking more like a snowman!

So basically you keep doing the same steps moving on to the next object from your sketch and tracing them over with the pen tool. Using the Pathfinder Tool to clean up the traces or grouping them.

Never forget that the finished copy will have a red background so having a white solid fill is best.

Keep tracing away until you have at least 16-20 objects.

This next step is optional but it may be optimal to do it.

Select each traced object and drag them into the Symbols Panel. If you don’t see it press SHIFT+CTRL+F11 or from Window > Symbols.

After dragging an object into the Symbols Panel you will get the Symbols Options Pane. Select Graphic as your type and type in a name for that symbol. Do this for every object and once you’re finished you can save it as a Symbol Library from the upper right hand corner of the Symbols Panel.

Next we create a new layer and draw an outline of a Christmas tree. Lock this layer.

Create a new layer on top of the Christmas tree outline.

If you saved your traced objects as symbols you can just pick and drag them over to fill the outline. Try to randomize things a bit. Make some of objects smaller or bigger than the others. Use Rotate, Reflect and Scale to spice things up a bit.

Do not rush. Be patient.

Try to fill any gaps that you may see to give it a solid feel. Zoom out of the entire document to get a good perspective.

I went ahead and added some more finishing touches in Adobe Photoshop. That’s it we are done!

Related Posts

• Recreate The 9rules Logo
• Pushing Your Buttons With CSS3
• Create a Custom GoogleApps Login Portal
• How to Create a Twitter Icon

The famous 9rules logo was created by the genius Mike Rundle and is one of my favourite logos ever designed. The logo wants to represent something “organic” or “always changing” hence the 9 layered leaves or petals. I’m going to show you how to recreate it using Adobe Illustrator CS4 and its all-too-powerful Pen Tool.

Let’s fire up Adobe Illustrator and create a new document. Using the Pen Tool (P) let’s draw our first leaf shape.

Let’s give it a fill colour using this hex code #9CCE2E.

Create a 2nd layer and draw the second leaf. I like to disable the fill colour when drawing with the Pen Tool so I can see clearly.

Fill it with this hex code #A0DD36.

Create a 3rd layer and draw your third leaf. You can try to copy the 1st leaf (CTRL+C) and paste it to front (CTRL+F). Then rotate it (R) to the left and resize it down while holding SHIFT.

Fill it in with this hex code #FFEC00.

Create a 4th layer and draw our fourth leaf or you may copy (CTRL+C) the previous leaf and paste it to front (CTRL+F) and rotate it (R) to the left.

Then fill it with this colour #FFEC00.

Create a 5th layer and copy (CTRL+C) our previous leaf and paste it to front (CTRL+F). Hold down SHIFT while we resize it down. It may benefit you if you use the Direct Selection Tool (A). Click on one of the anchor points on your newly pasted leaf. You should see 2 handle bars which you can play with to adjust the shape or curvature of your leaf.

Fill it with this colour #F7AC16.

Create a 6th layer, copy (CTRL+C) the previous leaf and paste it to front (CTRL+F). Adjust the size and its curvature using the same technique. Then colour it in with #F96114.

Only 3 more leaves to go! We’re almost there. Create a 7th layer and draw a new leaf.

TIP: Each leaf should have at most 2 anchor points only. Otherwise stop now and start again. Practice makes perfect.

Then we fill it with #70CE34.

Create our 8th layer and draw a new leaf. Again you can try to copy (CTRL+C) the previous leaf and paste it to front (CTRL+F), rotate (R) and resize it while holding down SHIFT to constrain the proportions. Use the Direction Selection Tool (A) if you need better control.

Then we fill it with #BFBB1F.

Create a 9th layer and draw our last leaf in. Again you can try to use the copy, paste, rotate, and resize techniques already mentioned above.

Do try to get the hang of the Direct Selection Tool (A) for better curvature control via the handle bars. Then fill it with #588E03.

Alright we got all 9 leaves done! Now for the stem. Use the Pen Tool (P) to carefully draw up our stem. Try to get it with 4 anchor points. Colour it in with #588E03.

Our final illustration!

I used Adobe Photoshop for my finishing touches.

Create a new document with a transparent background. Give it a radial gradient with these colours #074166 to #000000 (black).

Go back to Adobe Illustrator and make sure all layers are unlocked. Select all (CTRL+A) and copy (CTRL+C). Paste it as a Smart Object in Adobe Photoshop.

Hold down the SHIFT and resize with the mouse as needed. Press ENTER to place the file.

Add a Layer Style and select Stroke. Change the stroke size to 10px, position of outside, blend mode to normal and colour to white.

Great work! We’re done!

NOTE: The colours including the geometrical value of the shapes used in this tutorial are not the exact match of the original design.

DOWNLOAD TUTORIAL FILES

Related Posts

• Create a Christmas Tree Vector Collage
• How to Create a Twitter Icon
• Pushing Your Buttons With CSS3
• Create a Custom GoogleApps Login Portal

We’re going to create a shiny Twitter icon like the one you see here on the upper right hand corner of this blog. We will be using Adobe Illustrator CS4 to demonstrate this tutorial.

Open up a new web document in Adobe Illustrator and press D to reset your fill and stroke colours back to their defaults. Select the Rounded Rectangle Tool and draw a square. Before releasing your mouse you can press up or down on your keyboard to adjust the radius on all the corners. Hold Shift as you draw your shape to constrain the proportions. This should give you a perfect square with rounded corners.

Press V to activate the Selection Tool and click on your square. Now press G to activate the Gradient Tool. Double-click the middle of your square and the gradient annotator should appear. If you’re having problems getting it to come up you can just open up you Gradient Panel, select Linear Gradient under the drop down menu then press G.

The gradient annotator is like the gradient slider found on the gradient panel. The circle on the left is your point of origin. You can drag it with your mouse to move the annotator around. The arrow on the right can be dragged left or right to shorten or lengthen the slider. If you place your mouse just on the tip of this arrow you will see a rotate icon which will allow you to rotate the annotator.

Double-click on the first colour stop to the left of the annotator. Under Web RGB type in this hex code #63D2F4. On the second colour stop furthest right give it this hex code #10B8EC.

You can remove the stroke of your square at this point. Press X once or twice and then /.

Select your square copy it (CTRL+C) and paste it on front (CTRL+F). Now you should have 2 squares one on top of the other. We need to decrease the size of the square sitting on top by Holding SHIFT+ALT then grab the bottom right corner and slowly bring it towards the middle of the square.

The other elegant way to do this is to select your initial square, on the toolbar select Object > Path > Offset Path. On the Offset Path pane click on preview so you can preview the desired effect. Type in a value between -5px to -2px depending on the size of your square as your Offset value then click OK.

Once you have your 2 squares, press R to activate the rotate tool and rotate your inner square 180 degrees to the left while holding down SHIFT.

Now select both squares and rotate them both 90 degrees to the right while holding down SHIFT.

Download the twitter font and install it in your OS.

You may need to restart Adobe Illustrator so it can load up your new font so save your work before you restart.

Lock the layer where your 2 squares are then create a new layer on top.

Press T to activate the type tool. Under the character panel look for the font Pico Black. Type in the letter “t” in the new layer. Now right-click on the “t” and select Create Outlines.

Resize the “t” until desired size while holding down SHIFT. Give it a white fill and a stroke point of 4pt (it may vary depending on the size of your “t”). Now give the stroke colour a hex code of #2CB7E2.

Press A to activate the Direct Selection Tool. Click on your “t”. Notice the tiny points all over it. They are called anchor points. Select the 10 anchor points furthest to the right with the direct selection tool. You can select them all by bounding them in a box using your mouse instead of clicking the points one by one.

Now with your keyboard press on the right arrow key to drag the anchor points to the right. Keep doing so until you get your desired look. Re-position the “t” so it’s sitting in the middle of the inner square.

Create a new layer on top of the other 2. This is where we are going to put our shine effect. Now lock the “t” layer and unlock the layer with the 2 squares.

Select the inner square copy it (CTRL+C) and paste it on front (CTRL+F) on the new layer you just created. Now you should have a 3rd square and is sitting in the new top layer.

Press L to activate the Ellipse Tool. Draw an ellipse shape just above the 3rd square.

Press V to activate the Selection Tool. Select both the ellipse and the 3rd square. Press and hold SHIFT+CTRL+F9 together to bring up the Pathfinder Panel or on the toolbar select Window > Pathfinder. Under Shape Modes select Intersect.

Your new compound shape should still be selected if not select it and press G. You should see the gradient annotator. Rotate the annotator 90 degrees to the left while holding down SHIFT. Re-position the annotator by dragging the point of origin and resize it using the arrow.

You can achieve the same effect by using the Gradient Panel, selecting linear gradient and giving it a 90 degree angle.

Double-click on the bottom colour stop and give it a white colour.

Now adjust the opacity down to 50% or until desired effect. We’re done!

DOWNLOAD TUTORIAL FILES

Related Posts

• Recreate The 9rules Logo
• Create the Twitter Icon in Illustrator CS4
• Go GaGa on These Twitter Pages
• Create a Christmas Tree Vector Collage