Okay, this tutorial is long awaited and I’ve tried to make it as easy as possible. It’s not easy and you need to know a bit about your layout already. This tutorial shows you how to add it to one of my public themes, and unfortunately each theme maker may/or may not use the same names within the css.

Step 1: locate you post links css. In my themes, I call this ‘top’, which will look something like this (highlighted in pink). If you don’t have any post links in your theme already, then you can skip this step.

Step2: Replace the highlighted css with this code (CLICK HERE). If you don’t have any post links at the present within your theme, you can just add the code to you css.

You will need to customize the code, especially the width of the hover over. Each theme will have a different post size to the one i’m using & so this needs to be changed EVERY TIME.

Step 3: This complicated bit! the name highlighted in blue on the left (‘post’) needs to match the name given to the css that designs the posts on your blog. Again, this could have any name, depending on the theme maker. It could be anything. Genuinely the css should look a little like below (right). If you’re using on my themes, you’ll find I use ‘post’. Next, you need to check whether your post css is div id or div class… The top right is a div id with the # infront, and the bottom right is a div class with a . infront. It needs to be a div class for this to work. So if you have a div id, then just change the # to a . as shown on the right. If you already use a div class then skip the next step.

Step 4: You need to scroll down until you find your content for your posts, which should (fingers crossed) begin with a block:posts, you need to change the two id’s highlighted to class. So instead of div id, it reads div class. Note, that the div id=post needs to match the css name for your posts.

Step 5:  Save and it should work!