First, i would like to thank Wpcandy & Liquidicity for release a great wp help sheet that help improve my productivity. You can download the .pdf from here 592kb

I like the sheet but it is in .pdf file. The thing is i don’t like the format. It’s big in size and difficult to copy and paste the code. So i decide to transform the whole thing to .html file. Yeah! Light and smaller size, guess what? 10kb.

What is WP Help sheet?
It is just a file with all common code that most wordpress developer use in wp.

Why we need?
Huh? It save time btw. You don’t have to search Google or open theme file just to search one code. Increase productivity

View : Wp Help Sheet

Download : Wp Help Sheet

Just print and paste it on the wall beside the screen. Have a nice day.

Been thinking or wondering how they did custom social button? In this article i will show how to create custom social bookmark button with working link.

Anyway, it is pretty easy if you understand the wordpress template tag. #.

The idea

The Code

1. Digg submit url
http://digg.com/submit/?phase=2&url=

2. Post permalink
<?php the_permalink() ?>

Digg submit url + Post permalink(1+2)
http://digg.com/submit/?phase=2&url=<?php the_permalink() ?>

To make a working submit button or link, just add some simple code.
<a href=”#” mce_href=”#”>link</a>

The code you should include somewhere in index.php or single.php
<a href=”http://digg.com/submit/?phase=2&url=<?php the_permalink() ?>”>Digg this post</a>

Other social bookmarking sites

del.icio.us
http://del.icio.us/post?url=<?php the_permalink() ?>

blinklist
http://blinklist.com/index.php?Action=Blink/addblink.php&Url=<?php the_permalink() ?>

ma.gnolia
http://ma.gnolia.com/bookmarklet/add?url=<?php the_permalink() ?>

StumbleUpon
http://www.stumbleupon.com/submit?url=<?php the_permalink() ?>

Technorati
http://www.technorati.com/faves?add=<?php the_permalink() ?>

Twitter
http://twitthis.com/twit?url=http%3A%2F%2F<?php the_permalink() ?>

Note: this is site submit url + post permalink code.

Result

Turn a link into a cool button with some cool css.

Examples

wefunction

Psdtuts

webdesignerwall

Don’t forget to

Digg! this post.

Good luck!

I am regular visitor at vimeo.com and i love the site. Their main design is focus in simplicity.

So in this post I will show you how to create a multi color header like Vimeo staffpick header. Like this

1. Create a new document. 300×300 pixels. Fill the background with white (#ffffff).

2. Activate the ruler by pressing ctrl + r and make sure it is in pixels mode.

3. I create a section with line at 50 pixels width.

4. We are going to use this as color pallet.

5. By using Rectangular tool (U) create a 50 x 300 pixels box. Fill it with blue (#3399fe). Rename it as Layer 1.

6. Duplicate the layer 1(right click at layer no 1 and click duplicate) and rename the new layer as no 2. Drag layer 2 to the right.

7. Fill the new layer with #485077. Continue repeat the step. (duplicate the layer, rename it, drag to right and fill with color) Until you get this.

8. Now, use ruler and create a new section 50 pixels height (horizontal).

9. Use Rectangular tool (U). Make a new box with white color. Rename it as layer ‘a’. Duplicate the layer a(right click at layer ‘a’ and click duplicate) and rename the new layer as ‘b’. Drag layer b to the bottom.

10. Repeat the step no 9 until you get this.

11. Now lets just adjust some opacities of layer a, b, c, d, e, and f.

12. Save it as image.jpg file.

13. Create a new document. (950 x 300 pixels). Open image.jpg. Drag it to the new document.

14. Duplicate the image that you move just now. Drag to right. Repeat like 4 times.

15. Job done.

Example :

Demo & download : Mini-wp Deutsch

Instead just apply the picture as a wallpaper. It is more nicer if it come with Polaroid. I made a Polaroid template in .PSD format. You can just simply edit and change the image. Save it as picture, and apply it as wallpaper.

Preview :

How to change with other picture?
Just go to this folder, and replace it whit any pictures.
ps: make sure you crop you image and make it smaller than polaroid border.

Download : Polaroid – PSD