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>

Rollover Images Using CSS

    How about images that changes its appearance whenever your viewers hover their mouse on them. How would this be useful to your blog? Well, instead of having the regular buttons for navigation, social widgets and a lot of other stuffs, you can have a stylish rollover image link instead. Here are some samples below, try to place your cursor over them.

    Now let us see how the magic works. Below are the original images that you are seeing from the samples above. Using CSS, we set the images as backgrounds of divs. Then the CSS code for the hover state would change the background position of the div causing the div's background to display the lower part of the image.



    In this sample, the divs height and width is 64x64 which would be exactly fit to display only one side of the image, and then we modify the position of the divs background by setting the background-position of the div to 0px -64px, wherein the values would be the x and the y of the background's position. The value of the y would be determined by the height of your image - which would be half the height of your image and in a negative value.

    This is the best rollover approach for images since the browser won't need to load another image once the element is in a hover state. Now let us see the code for these rollover images.

Show or Hide Code for Rollover Sample 1

Shopping Basket
Code:

<!--CSS-->
<style type="text/css">
#RolloverImageSample1{
    height: 64px;
    width: 64px;
     background: url('http://lh6.googleusercontent.com/-5YfUvf_GSeo/TlzhQRIgl8I/AAAAAAAAC50/rEn_LgycC3g/s128/Shopping%2520Basket.png') no-repeat;
    float: left;
}

#RolloverImageSample1:hover{
    background-position: 0px -64px;
}
</style>
<!--@CSS-->

<!--HTML-->
<div id="RolloverImageSample1"></div>
<!--@HTML-->

Show or Hide Code for Rollover Sample 2

Shopping Cart
Code:

<!--CSS-->
<style type="text/css">
#RolloverImageSample2{
    height: 64px;
    width: 64px;
    background: url('http://lh4.googleusercontent.com/-RQExtQbfu44/TlzhRPpDVaI/AAAAAAAAC58/-GOvIjTbF9k/s128/Shopping%2520Cart.png') no-repeat;
    float: left;
}

#RolloverImageSample2:hover{
    background-position: 0px -64px;
}
</style>
<!--@CSS-->

<!--HTML-->
<div id="RolloverImageSample2"></div>
<!--@HTML-->

Show or Hide Code for Rollover Sample 3

Shop Close or Open Sign
Code:

<!--CSS-->
<style type="text/css">
#RolloverImageSample3{
    height: 64px;
    width: 64px;
    background: url('http://lh5.googleusercontent.com/-L_eHzkAXpA4/TlzhQl561NI/AAAAAAAAC54/QIgLWkOq330/s128/Shopping%2520Stat.png') no-repeat;
    float: left;
}

#RolloverImageSample3:hover{
    background-position: 0px -64px;
}
</style>
<!--@CSS-->

<!--HTML-->
<div id="RolloverImageSample3"></div>
<!--@HTML-->

    If you merge the images horizontally, you would need to change the x and y value, wherein the x would have the value now instead of y. For instance in this sample, it would be background-position: -64px 0px; See the sample below.

Show or Hide Code for Rollover Sample 4

Horizontal Sample
Code:

<!--CSS-->
<style type="text/css">
#RolloverImageSample4{
    height: 64px;
    width: 64px;
    background: url('http://lh6.googleusercontent.com/-ezC2vS_BMaQ/T7KWXzvYfmI/AAAAAAAADPU/dzKkBNqF6ys/s128/Basket.png') no-repeat;
    float: left;
}

#RolloverImageSample4:hover{
    background-position: -64px 0px;
}
</style>
<!--@CSS-->

<!--HTML-->
<div id="RolloverImageSample4"></div>
<!--@HTML-->

Rollover Links Using CSS

    The rollover effects can be easily obtained via CSS pseudo-classes. It is the effect when you point your mouse over a certain HTML element. If you are not quite familiar with CSS, you might want to play the code by copy pasting it to your blog post and observe how things work.

    Text links can have an underline, change color or anything you want it to be. See some samples below.

I turn red when you hover your mouse on me.

I will have an underline when you hover your mouse on me.

I change size when you hover your mouse on me.

    A pointer on rollover effects, it is better off not deforming the rest off the contents through changing the link through size, weight etc. This can potentially irritate the readers. Below are the CSS codes for the samples.

Show or Hide First Sample Code

First Sample
Code:

#RolloverSample1{
    color: #0099ff;
}

#RolloverSample1:hover{
    color: red;
    text-decoration: none;
}

Show or Hide Second Sample Code

Second Sample
Code:

#RolloverSample2{
    color: #0099ff;
}

#RolloverSample2:hover{
    text-decoration: underline;
}

Show or Hide Third Sample Code

Third Sample
Code:

#RolloverSample3{
    color: #0099ff;
}

#RolloverSample3:hover{
    font-size: 20px;
    text-decoration: none;
}

    You see, when you declare a :hover pseudo-class for an element in the stylesheet, it can have a completely different style from before. Though it will inherit all the style of the non hover version, the properties declared in the hover version will overwrite the ones from the non hover version.

    Now, how is this important to your blog? For starters some users won't be able to target their cursor at the specified point they want to most of the time. The hover gives a good style and functionality in telling the user that their mouse is hovered on a specific link.

Add a Cinema Mode to Your Blog

    Do you need a cinema mode wherein your audience can click a button and poof, the rest of the page darkens - leaving the flash videos highlighted. Now you can have this feature in your blog and keep your audience focused on your videos. Click on the sample link below and see for yourself.

Cinema Mode On



Show or Hide Cinema Mode Codes

Cinema Mode
Code:

<!--Cinema Mode-->
<div style="display: none;" id="CinemaOn"></div>

<script type="text/javascript"> $('.CinemaToggle').click(function(){ $('#CinemaOn').toggle(); $('#CinemaOn').fadeTo(0, .9);}); $('#CinemaOn').click(function(){$('#CinemaOn').hide(); }); </script>

<style type="text/css"> #CinemaOn{background: #000; height: 100%; width: 100%; position: fixed; top: 0px; left: 0px; z-index: 1000;} </style>
<!--@Cinema Mode-->

    To install the cinema mode into your blog, follow the steps below. Please refer to INSTALLING JQUERY TO YOUR BLOG for instructions in adding the JQuery.

1 Make sure that you have JQuery installed in your blog.

2 Go to Layout >> Add a Gadget.

3 When the pop-up box appears, choose HTML/Javascript.

4 Copy the code above and paste it into the content box.

5 Leave the title box blank if you want it not to show up on your page.

6 Press save.

    Now that you have installed the core code into your blog, you will need to add a button, wherein the user may click it to enter the cinema mode. You can add as much button as you want by just adding a class named "CinemaToggle" into the HTML element. Below are some examples.

Example 1:
Anchor Link Sample

Code: <a href="javascript:void" class="CinemaToggle">Anchor Link Sample</a>

Example 2:


Code: <button class="CinemaToggle">Button Sample</button>

Example 3:

Image Sample

Code: <img class="CinemaToggle" src="https://lh6.googleusercontent.com/-qErZNeUiwAw/T7FMLrL-2cI/AAAAAAAADPI/VDDXJUzhUIk/s128/lightbulb.png" />

External Links and Opening Links in a New Tab

    An external link is a hyperlink that directs users somewhere outside the current domain. For instance the domain in this blog is bloggersbazaar.blogspot.com, so any link that directs the user besides the aforementioned domain would be considered an external link.

    Opening external links in a new tab is a good practice, because first of all, once your readers click on an external link they won't instantly leave your blog, thus giving them a quick way to get back to what they were reading in you blog. By default, links in blogger will automatically open on the current tab, in which replaces your blog with the external link that the visitor has clicked.

    A simple line of code should cause the anchor tags to open in a new tab. Adding the following code in red within your anchor tags would be necessary to let them open in new tabs once they are clicked. You can also replace the "_Blank" with "new" to open pages in a new window.

Open in New Tab
Code:

<a href="URL" target="_Blank">Link</a>

Recommended Readings:
ADDING ICONS TO EXTERNAL LINKS

Adding Icons Beside External Links

    Adding an icon next to the external link would benefit much your reader for this will inform them that they will leave the site once they click the link. Please refer to EXTERNAL LINKS AND OPENING LINKS IN A NEW TAB post to know more about the external links.

Sample:
Sample Look

CSS Approach
    You will need to insert a CSS code and manually edit the external links by adding classes to them. Below is the step by step procedure to accomplish this task.

CSS Approach
Code:

.ExternalLink{
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifBQRFN_FmesAoIiTKKpnkdzUjePLd9CDMUawhKTAxQ-ViTE1jNj1YqKCDXkea2cahPP9wozRzGmMjNXbClUsEa77kQkc8Hn0ALs16pChd-4Xk2u2d5BcQyiLlZDLv7LojXqVHLFmiHkY/s12/ExternalIcon.png') no-repeat right center;
    padding-right: 15px;
}

1 Go to Template >> Customize >> Advanced >> Add CSS.

2 Copy the code above and paste in into the Add Custom CSS Box.

3 Press Apply to blog.

     Now that you have installed the code into your blog, you will need to format your links in HTML mode by adding a line of code within the anchor tag <a class="ExternalLink" href="URL" target="_Blank">Link</a>. After you have properly added the class the icon should appear at the right side.

Installing JQuery to Your Blog

    Installing the JQuery library to your blog is a good way of having greater opportunities to enhance the design and interactivity of your blog. If you happen to be a know nothing at web development, then this post will guide you with an easy step by step instruction on how to install the JQuery into your blog.

Easy Approach
    The easy approach will simplify the process for you. No uploading files, no complicated stuff, etc. Below are the steps to quickly install a JQuery for your blog. One disadvantage though, the gadget that contains the code for this approach should be at the top most part of the layout, since every JQuery scripts above it will not work.

1 Go to Google Developers.

2 Click on the link named "JQuery".

3 Scroll down until you reach the JQuery (Do not mistake with the JQuery UI).

4 Copy the link in the category "path"

    Now that you have the link to the latest JQuery, you will need to paste a code into your blog. But remember, the "path" is the compressed version of the JQuery and the "path(u)" is the uncompressed version, which is usually only used by web developers. So the next time you update your JQuery to the latest version always choose the "path" for the link. Now for the installation of the script to your blog part.

5 Replace the URL from the code below with the link that you have copied.

JQuery Installation
Code:

<script type="text/javascript" src="URL" />

6 Copy the code with the new URL and go to Layout >> Add a Gadget.

7 When a pop-up box appears, choose HTML/Javascript.

8 Paste the code in the content box.

9 Leave the title box empty.

10 Press save.

    If you have successfully installed the JQuery into your blog, JQuery plugins and scripts will surely work perfectly. If you are having a difficult time trying to figure things out, here is a sample code below, but take note that the JQuery below might be outdated so check the official JQuery site.

JQuery Installation
Code:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" />

Manipulating the Blogger Navbar

   The blogger navbar, in default is displayed at the top of all the Blogger blogs. Most of the time bloggers tend to hide it for some reasons such as, aesthetically it won't match the blog's template.

   In this post, you will be able to learn how to manipulate the blogger navbar. Listed below are some techniques to manipulate the Blogger navbar.

• Removing the Navbar
• Hiding the Navbar

Removing the Navbar

    There is a big difference from hiding the navbar from removing the navbar. Hiding the navbar will only allow you to hide the navbar from your blog, but the code for the navbar would still be found in your page, thus allowing you to unhide it. In this navbar manipulation on the other hand, you will permanently remove the navbar and its source or codes.

Click here to completely destroy the navbar above!

Wow, seems that you have permanently deleted my navbar!
In this case you can refresh this page to restore it.

    It only takes a single script to remove the navbar, once the script is loaded, the navbar code is deleted. The process is reversible by deleting the "navbar removing code" itself.

JQuery Approach
    In this approach, JQuery is used, wherein you will be required to install the JQuery Library, refer to INSTALLING JQUERY TO YOUR BLOG post for a step by step instruction. Below are the steps for you to follow in removing the navbar completely.

Show or hide the code for Jquery Approach (Removing the Navbar)

Jquery Approach (Removing the Navbar)
Code:

<script type="text/javascript">
    $('#navbar').remove();
</script>

1 Make sure that you have JQuery installed in your blog.

2 Go to Layout >> Add a Gadget.

3 When the pop-up box appears, choose HTML/Javascript.

4 Copy the code above and paste it into the content box.

5 Leave the title box blank if you want it not to show up on your page.

6 Press save.


Hiding the Navbar

    Hiding the navbar is far easier than removing it, plus, you get to unhide it whenever you want to. Below are different approaches in hiding and unhiding the navbar.

Hide or unhide the navbar (Won't work if you destroyed it)

CSS Approach
    CSS or Cascading Style Sheet is the easiest approach to hide the navbar. By adding a simple block of code, you get to hide the navbar. Below are steps on how to hide the navbar using CSS.

Show or hide the code for CSS Approach (Hiding the Navbar)

CSS Approach (Hiding the Navbar)
Code:

#navbar{
    display: none;
}

1 Copy the code above.

2 Go to Template >> Advanced >> Add CSS.

3 Paste the code in the Add custom CSS Box and press Apply to blog.

    To reverse the process go back to Template >> Advanced >> Add CSS and delete the code that you have added.

Baby Patches Quoteblock Designs

    Below are some designs for your quotebox. Please refer to ADDING A "QUOTE BOX" TO YOU BLOG post for instructions on how to use these designs as you blog's quotebox. The codes for the items are at the end of the post.

    This is a sample quotebox...

~Blue Baby Patch

    This is a sample quotebox...

~Pink Baby Patch

    This is a sample quotebox...

~Green Baby Patch

    This is a sample quotebox...

~Yellow Baby Patch

    Baby Patches Quoteblock Desgins has a light background color and bordered with stitch looking design. It is ideal for blogs that has a light color palette. Note, the round corners will not work if the viewers browser does not support CSS3.

Please choose a design below and click the link to show or hide the code.
Blue Baby Patch Code

Blue Baby Patch
Code:

quoteblock{
    width: 230px;
    height: auto;
    background: #D1EBFF url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKZuf-t04q1vdsc0g0i18f8NLtyIER4riAMTuwa2ElfjPNSu4OieptFe2p4VxJ0mJbotGVOI3OXuudbITiwqOmWAqJZDg9Le9NJ0S3R5vCe6YMqh7mBC3wYBWpggM_X1zTpkLjjhk5E0Y/s1600/Quote.png') no-repeat;
    background-position: 5px 5px;
    padding: 10px 10px 10px 50px;
    display: block;
    border: 2px dashed #0099ff;
    border-radius: 10px;
    text-shadow: 1px 1px 1px #fff;
    font-size: 15px;
    font-weight: bold;
    margin: 5px;
}

Pink Baby Patch Code

Pink Baby Patch
Code:

quoteblock{
    width: 230px;
    height: auto;
    background: #FFC9F7 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKZuf-t04q1vdsc0g0i18f8NLtyIER4riAMTuwa2ElfjPNSu4OieptFe2p4VxJ0mJbotGVOI3OXuudbITiwqOmWAqJZDg9Le9NJ0S3R5vCe6YMqh7mBC3wYBWpggM_X1zTpkLjjhk5E0Y/s1600/Quote.png') no-repeat;
    background-position: 5px 5px;
    padding: 10px 10px 10px 50px;
    display: block;
    border: 2px dashed #FF7CED;
    border-radius: 10px;
    text-shadow: 1px 1px 1px #fff;
    font-size: 15px;
    font-weight: bold;
    margin: 5px;
}

Green Baby Patch Code

Green Baby Patch
Code:

quoteblock{
    width: 230px;
    height: auto;
    background: #C9FFE6 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKZuf-t04q1vdsc0g0i18f8NLtyIER4riAMTuwa2ElfjPNSu4OieptFe2p4VxJ0mJbotGVOI3OXuudbITiwqOmWAqJZDg9Le9NJ0S3R5vCe6YMqh7mBC3wYBWpggM_X1zTpkLjjhk5E0Y/s1600/Quote.png') no-repeat;
    background-position: 5px 5px;
    padding: 10px 10px 10px 50px;
    display: block;
    border: 2px dashed #34EF92;
    border-radius: 10px;
    text-shadow: 1px 1px 1px #fff;
    font-size: 15px;
    font-weight: bold;
    margin: 5px;
}

Yellow Baby Patch Code

Yellow Baby Patch
Code:

quoteblock{
    width: 230px;
    height: auto;
    background: #FFF6D3 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKZuf-t04q1vdsc0g0i18f8NLtyIER4riAMTuwa2ElfjPNSu4OieptFe2p4VxJ0mJbotGVOI3OXuudbITiwqOmWAqJZDg9Le9NJ0S3R5vCe6YMqh7mBC3wYBWpggM_X1zTpkLjjhk5E0Y/s1600/Quote.png') no-repeat;
    background-position: 5px 5px;
    padding: 10px 10px 10px 50px;
    display: block;
    border: 2px dashed #F7CE00;
    border-radius: 10px;
    text-shadow: 1px 1px 1px #fff;
    font-size: 15px;
    font-weight: bold;
    margin: 5px;
}

Adding a "Quote Box" to Your Blog

    A "Quote Box" or quoteblock is a handy add-on to your blog if you want the quotes in your posts to be highlighted. A few simple steps will be needed to accomplish this task. Below are some samples of a quote box and the steps on how to add quote boxes in your blog posts.

Samples:

    By three methods we may learn wisdom: First, by reflection, which is noblest; Second, by imitation, which is easiest; and third by experience, which is the bitterest.

~Confucius

    The quoteblock will automatically adjust its height depending on its contents. The width is fixed but you can easily adjust it by tweaking the width property in the code.

    This quotebox has fewer contents. See how the height changes automatically.

You can still format the text inside the quotebox, add colors, change font size, style, etc.

Red, Blue, Green...
Arial, Times, Helvetica...
Size 12, Size 14, Size 16...
Normal, Bold, Italic, Underline...

    The alignment of the quoteblock can also be adjusted by simply modifying the HTML code of the quoteblock into this <quoteblock style="float: direction"></quoteblock> wherein the direction would be either left or right.

    This quotebox is aligned right...

Steps:

1 Choose a design for your quote box from the links below.

• Baby Patches Quoteblock Designs

2 Copy the code for the design that you have chosen.

3 Go to Template >> Customize >> Advanced >> Add CSS.

4 Paste the code in the Add custom CSS Box and press Apply to blog.

5 To apply the quotebox in your post, simply click on the Quote Button.

Note: Your Template might have included a default style for your quotebox. Simply delete the code you've added to revert it to your Template's preferences. Replace the code you've added with the new code for other designs that you want to use in order to prevent conflicts.