Add Reflection to Images

    Images give a big impression to your readers. It gives them some idea on what the post is all about; but sometimes images can be dull or lifeless, adding a reflection can sometimes solve this problem by bringing a nifty art to the readers eyes.

    With ReflectionMaker you can add reflection to your images in no time, no need for photoshop or other fancy image editing applications. With easy to follow steps you can accomplish adding this effect in no time.

1 Go to www.reflectionmaker.com

2 Upload an image via image URL or image filename.

3 Set the reflection size and background color.

4 Click on the generate button.

5 Download the generated image.

6 Upload the image to your blog or picasa web albums.

Test Your Blog's Loading Speed and Find What Slows it Down

    There is always room for improvement, but sometimes improving the aesthetics and functionality of our blogs costs us the precious loading time. Loading time plays an essential role in preserving the interest of your audience towards the contents of your site. So in this post, you will test your blog's loading speed so you can analyze the possible elements that slow down your page.

    With pingdom's "Test the load time of a web page" tool you will have information about your site's total loading time. This tool will give you plenty of information just all about loading time; they even grade your site's overall performance in loading. They provide you with details such as graphs for the actions done to load each element found in the page that you have queried, page speed performance ratings, analysis report, and even the history from your previous tests with a matching line graph. This comprehensive test should give you the knowledge on where to focus in getting your site that extra loading performance, so what are you waiting for, go and test your site now, just enter your site's URL below.

    Still being hesitant? Here i another benefit in testing your blog in pingdom, you will have your site listed in their recent tests which could probably boost your chances of having more traffic. So what are you waiting for, it is a win - win situation for you.

Making Preview Posts Clickable

    If you have tried the preview function while making a blog post, you must have noticed that you won't be able to click anything in your blog during the preview mode.

    With a short line of code, you can now click things in the preview mode, making it easier if you have written some code in the post that just makes it dynamic. Just click on the Add to Blogger button below and everything will be taken care of once you add the widget to your blog.

    How did it work? Well, the preview mode has a script that keeps on creating a click trap wherein your cursor would be useless because of an invisible div. The widget above alters that invisible click trap div so that you can now try clicking things within the preview mode.

Cinema Mode Widget

    On the previous post "ADDING A CINEMA MODE TO YOUR BLOG" I have discussed the manual process of adding the cinema mode in to your blog. Now, I bring to you, the automatic cinema mode installer. With just a few clicks away, you can have your very own cinema mode in your blog, which is probably a lot easier and faster than adding it on your own.

    Try the sample below. And if you are ready to add this to your blog, click on the Add to Blogger button. You can tweak the code to have other buttons for the cinema toggle. You can read the previous post on adding a cinema mode to your blog for a brief discussion on how to work around with this widget.

Cinema Mode On

Close Cinema Mode [X] Cinema Mode by bloggersbazaar.blogspot.com

    This widget takes advantage of the attribute of flash objects being always at the top of other elements. The CSS property z-index is supposed to organize the elements on what should be at the top of the other, but flash objects still neglect this even if you reach to the point of giving it a negative z-index.

Rollover Images Acting as Links

    If you are not yet familiar with the rollover images, try reading ROLLOVER IMAGES USING CSS first. Now, why can't you just add a link to the div like <a><div></div></a>, the answer is that, this code would be against the proper markup in writing HTML documents. Div tags are not supposed to be wrapped by anchor tags, though if you would try, there is a great chance of success. But this topic is about writing the valid markup for the rollover images with a link. Remember, this only applies to the approach I made in creating rollover images and those alike.

    The easiest way to get through this is by putting the anchor tag within the div tag like this <div><a></a></div>, a CSS will be needed in order to give the anchor tag the height and the width. So here is a step by step procedure in structuring the link.

1 Create your rollover image. If you do not know how to do so yet, read this post.

2 Add the anchor tags within the div tags like this <div><a href="URL"></a></div>

3 Replace the URL with your desired link. e.g. http://google.com

4 Add this line style="height: 100%; width: 100%; display: block;" within the anchor tag.

    You should end up with something like this <div id="RolloversID"><a style="height: 100%; width: 100%; display: block;" href="URL"></a></div>