Text With Moving Background On Blogger

Inspired from the tutorial written by "GayaDesign" about text with moving background, I wanted to write an article so that, users on blogger/blogspot can enjoy the same effect. The article will guide you to create a text mask using PhotoShop and use the same to realize the final effect with some CSS and Jquery. I suggest you to take a look at the live demo by using the link below.


Cool... Isn't it? Well, let's get this installed on our blogs as well. I've split the tutorial in 4 parts - Photoshop, HTML, CSS and Jquery. The article is quite big. So, without wasting time, let me dive into the first phase of the tutorial straight away.

1. Open a new file with the following dimensions: 600x100px (width - 600px and height - 100px). Now, pour some color using the paint brush tool. You may add some gradient shades, like I did, if you wish to make it more appealing.
2. Now, create a new layer using the icon that appears on the layers panel. I suggest you to take a look at the screen shot shown below. Now, hit the "Text/Horizontal Type Tool" and type the text of your choice on the canvas.
3. Just move to the layer's panel and select the newly created text layer by holding "CTRL" key on your keyboard. You'll notice the text layer alone being selected. Just go to "Select > Inverse" using the menu-bar at the top or simply hold the keys "Shift+Ctrl+I" to select the inverse layer. You should probably have a selection similar to the one shown below.
4. Now, simply select the other layer (Layer 1) in the layers panel and hit the icon that says "Add Mask Layer". Just refer to the following screen shot to better understand about the same.
5. Next, hide the text layer - remove the eye icon from the layers panel. Refer to the screen shot below.
6. Now, you should be able to see your masked text image as shown below. Save this image in PNG format. and upload the same to your picasa album or any image hosting site. I've saved it using Mask. So, when I refer to Mask.png anywhere in the article, it refers to this mask image.
Note: The mask which you've just created using PhotoShop (Mask.png) will be used in the HTML part. It is not necessary that you maintain the image dimensions as mentioned in step 1. However, when you vary the image dimensions, you should make the corresponding changes in the CSS part as well.

1. Navigate to "Design>>Edit HTML" and make a backup of your template by clicking on the "Download full template" link at the top of the page. Once the back up is over, search for the following piece of code.
<b:section class='main' id='main' showaddelement='no'>
2. Paste the following piece of code just above the line mentioned in step 1.
<div class='scrollBg'>
<a href='http://www.newbloggingtipz.com/'><img src='Mask.png'/></a>
3. Replace "Mask.png" in the above code with the URL of the uploaded image Mask.png as mentioned earlier in the tutorial and save your template. Similarly, replace the URL pointing to my website  in the anchor tag with the one of your choice.
Note: You can add the HTML codes anywhere in your template - not necessary that you add it above the line mentioned in step 1.

1. Search for the following code in your template.
2. Paste the following piece of code just above the line mentioned in step 1.
.scrollBg {
background-image: url(https://lh4.googleusercontent.com/-ZkujcrvGd90/TlPy4OQYwiI/AAAAAAAABgA/sAN8xE_katY/s800/love-pattern-new.png);
background-color: #000000;
width: 600px;
height: 100px;
.scrollBg img {
display: block;
border:2px #000 solid;
3. Save your template. 
Note: You may change the background image by changing the URL highlighted in green - try to maintain the image dimension as mentioned in the CSS to avoid confusions.

1. Search for the following code in your template.
2. Paste the following piece of code present in this text document - SCRIPT FOR TEXT WITH MOVING BACKGROUND, just above the line mentioned in step 1.
Note: You may omit the first line the script mentioned above provided you have the latest jquery file running on your blog.
3. That's it! Save your template and your done!

If you are a person obsessed with page speed of your blog but you like this widget, then ping me via gtalk and I'll help you out. I'll just tell you to define the JavaScript internally than fetching it from Google Sites where I hosted it. That's it:)

The above effect was tested to work perfectly fine on all the major browsers that include, but not limited to, FF, IE, Chrome, Safari and Opera. If you need further assistance in applying this effect anywhere on your blog, then leave a comment below and get it clarified. Do share your opinions about the article/effect via comments.

Word-Wrap : An Extremely Useful CSS Property

CSS-LogoI'm pretty addicted to web design and photo-shop these days. So, you might encounter a lot of articles related to web design & CSS in the upcoming weeks. Well, just because I post a lot about these stuffs, it does not mean that they are not useful being a blogger. All those tutorials and tricks that I post here will have some relation to your blog. And one such extremely useful but rarely used CSS property is "Word-Wrap"

What does Word-Wrap actually do? To keep it simple, it actually wraps the word or in other words, breaks the word to a new line without exceeding the specified boundaries. For example, when you  look at coding part in some of my tutorials, they would extend beyond the specified boundary(grey box). Have a look at the following picture and you'll understand what I mean!
I hope you understood the importance of this extremely useful CSS property - "Word-Wrap".  To illustrate this, I recommend you to read this article - How to add HTML codes in Blogger Posts? So, you got to know "How to include HTML codes in your post?". Generally, this problem of text extending beyond the specified boundary occurs with IE. To make your posts with HTML codes compatible with all browsers(IE 5.5+, Firefox, Safari, Chrome), just follow these steps assuming that you installed the coding as mentioned in the reference article above.

1. Navigate to "Design >> Edit HTML" from your blogger dashboard and search for the following  piece of CSS code in your template.
.codeview {
2. Just add following piece of code below the line mentioned in step 1.
word-wrap: break-word;
3. That's it!!! Save your template.

For users who blog on WP or any other platform, just specify the following tag in the CSS part of your template. It's not necessary that you use it only for displaying the coding stuff - use it anywhere you want the word to wrap by itself within the specified boundaries.
word-wrap: break-word;
To extend them beyond the boundaries (definitely not the idea behind this post), either remove the tag specified above or change the parameter from break-word; to normal;

I hope this simple tip enhances the design of your blog - to keep it neat and clean. This CSS property comes in handy especially for webmasters and web designers. So, share your views about this post. Your comments are always welcome!

Unique Navigation Bars Using CSS Sprites

In my previous article about CSS Sprites - Introduction, I told you about the hover effect with an example. We did mention that we would come up with more practical examples so that you realize the importance of CSS Sprites. So, we have come up with step by step instructions (including a little bit of PhotoShop tutorials) for creating a unique navigation bar based on CSS Sprites.

To create a navigation bar that stands unique from the rest of the other blogger templates, it becomes a little mandatory that you know a little about PhotoShop. So, we will just let you know how to create one.

1. Open Adobe PhotoShop. Create a new transparent file with the dimensions you want. Most of the blogs usually have a navigation bar of width 960px and height varies between 30-50px. In this tutorial, we will be working with an example of dimension 495 x 48px.
2. Now, let your imagination run wild. Create a unique navigation bar as per your wish. Try different fonts, change pixel sizes, change the text color (or) include images next to each text. It's your navigation bar. So, have it your way. The design which I made is a simple one with icons next to each text as shown below.
3. Save this image as "Nav-01" using "File>>Save for Web..." option to obtain a .png image. This image will serve as the base image below which we will build another image for the hover effect. So, create another new file with same width as that of the initial image but double the height. In my example, I had an initial image with dimensions 495 x 48 px. The new image should be 495 x 96 px.
4. Now, open "Nav-01.png" and copy the entire image to the new file which you created. Place the image to fit the window dimensions. You will find a new layer being created that has a label "Layer 1". Have a look at the following picture for better understanding.
5. Now, duplicate that layer (Layer 1) as shown below.
6. We need to show a difference when the mouse is hovered over the link. For this very reason, place the duplicate layer below the first layer and work on the duplicate layer alone. You may show difference by changing the text color (or) have gradient effects...
7. In my case, I have just added a small box to appear above each link. So, the final outcome would be something like the one shown below.
Well, save this image as "Final-Nav-Bar.png" and upload the same to PICASA or ImageShack or any image up-loader. Obtain the URL and save it to a temporary text file!!!

"I'm sure you would have gone nuts before you got the exact look you had in your mind! Assuming that you got one, you may have a cup of coffee to relax yourself before we move the next part in the tutorial."

The HTML coding involved with the navigation bar is pretty simple. We make use of an unordered list with 4 list items present it. We make use of span tags in the HTML part so that, the search engines index the text along with the image rather than only the image. Well, you may extend the list to any number as you want. Make sure the text on the image and text in between the span tag matches else you will end up flagged. You may place the following piece of code anywhere in between body tags to realize the effect.
<ul id='nav-example'>
<li id='nav-example-1'>
<a href='#'><span>Home</span></a></li>
<li id='nav-example-2'>
<a href='#'><span>Advertise</span></a></li>
<li id='nav-example-3'>
<a href='#'><span>Contact</span></a></li>
<li id='nav-example-4'>
<a href='#'><span>Portfolio</span></a></li>
Save your template once you add the above code! You may replace the '#' symbol with the links you wish to point to. It's pretty self-explanatory!

The CSS part will vary from person to person depending upon the image size you chose and other specifications. However, the basic layout will remain the same. You just need to vary few parameters in the coding below to match your creative work.
#nav-example {
background:url("https://lh4.googleusercontent.com/-xbhbCcnBhYI/Tft-OgZOwTI/AAAAAAAABII/lh1EAkmm0ps/s800/final-nav-bar.png") no-repeat;
#nav-example span {
display: none;
#nav-example li, #nav-example a {
#nav-example li {
#nav-example-1 {width: 125px;}
#nav-example-2 {width: 122px;}
#nav-example-3 {width: 122px;}
#nav-example-4 {width: 123px;}
#nav-example-1 a:hover {background:url("https://lh4.googleusercontent.com/-xbhbCcnBhYI/Tft-OgZOwTI/AAAAAAAABII/lh1EAkmm0ps/s800/final-nav-bar.png") 0px -48px no-repeat; }
#nav-example-2 a:hover {background:url("https://lh4.googleusercontent.com/-xbhbCcnBhYI/Tft-OgZOwTI/AAAAAAAABII/lh1EAkmm0ps/s800/final-nav-bar.png") -125px -48px no-repeat; }
#nav-example-3 a:hover {background:url("https://lh4.googleusercontent.com/-xbhbCcnBhYI/Tft-OgZOwTI/AAAAAAAABII/lh1EAkmm0ps/s800/final-nav-bar.png") -247px -48px no-repeat; }
#nav-example-4 a:hover {background:url("https://lh4.googleusercontent.com/-xbhbCcnBhYI/Tft-OgZOwTI/AAAAAAAABII/lh1EAkmm0ps/s800/final-nav-bar.png") -369px -48px no-repeat; }
If you are blogger - blogspot user, then place the above code just before the following line. Use "CTRL+F" to search your blogger template.
Finally, replace the link which points to my example to your image URL - the one which you temporarily saved on a text document. Just replace the code highlighted in blue with your link. Save your template!

1). The very basic step in customizing the CSS part to match your navigation bar would be to change the width and the height of the bar. As mentioned earlier in the post, I worked on 495 x 48 px version while your navigation bar could be much larger or smaller. So, vary the code that is highlighted in green to match the dimensions of your navigation bar and save them.

2). Note the codes highlighted in orange. These codes specify the width of the lists in the navigation bar. In my example, the first list occupies a width of 125px while the second one occupies a width of 122px and so on... You may vary this as per your design. It's better to use the option of "Rulers" in PhotoShop to know the exact width of each item. Make the respective changes as per your design and save them!

3). The background position for the a:hover state is pretty easy to fix. The vertical position will never vary because you have to display the complete bar. So, you can simply mention the height with a negative sign prefixed to it. To find the horizontal position ( Highlighted with Rose Color), initially you start off from 0px. The next position shall be obtained by subtracting from the nav-example-01 state, that is, 0 - 125 = -125 px. Similarly for the next position, obtain it from nav-example-02, -125 - 122 = -247px. This shall be done for your entire list. That's it! Save the template and your done!

Your final output should be as shown in the following DEMO LINK - NAVIGATION BAR USING CSS SPRITES, provided you followed all the steps correctly! Just hover your mouse over the lists on the page and enjoy the effect!!! Another great example to let you know how creative your work could be - CSS Navigation Bar Example.

"If you wish to have unique navigation bars for your blog without any hassle, then reach us via Our Services page. We'll design distinct navigation bars for you and set them on your blog too!!! Why to break your head when we are there to do that:)"

I tried to keep things as simple as possible! If you find any difficulties, our comments section is always welcome. Leave a comment and clear your doubts. We'll see you in another interesting tutorial!

Using CSS Sprites On Blogger - Introduction

I'm sure many of you would have visited websites like Yahoo!, YouTube, Facebook, etc.. Have you ever wondered how quick these websites load though they possess a lot of images in the background? How is it possible? Is it possible only for websites - not for blogs on blogger? Definitely not, we can have these effects on blogger too. But how? Answer: Using CSS Sprites!!!

Well, the name might be little misleading. Sprites are not small tiny pictures as you imagine. A sprite is one big image - usually a cluster of small images used on a website. By using CSS Sprites, we achieve the following advantages.
  • Total image size is generally less when compared to the size of the combined individual images. So, a considerable bandwidth is saved. 
  • Few images for the browser to load which means fewer HTTP requests (per page view). Multiplying this with the number of visitors per day, per week, per month, per year. Definitely a lot of saving... Isn't it?
  • Most important - no JavaScript, no jQuery - only CSS!!!
Well, I guess the question of "Whether Sprites are useful?" has got erased from your mind now. Moreover, we recently heard from Google that page speed will be reflected on the respective blog's PageRank. So, if you wish to have a better PR by increasing the page speed of your blog, then Sprites would come in handy!

In this article, I will just illustrate the very basics of CSS Sprites - to get hold of "What's CSS Sprites". In the upcoming articles, you will find a detailed explanation about how sprites could be applied to all the images in a blog. Here, we restrict ourselves to one simple trick - Hover Effect Using Sprites. Take a look at the demo before we proceed to the tutorial. Hover your mouse onto the tweety bird to the right. Cool Effect! Isn't it?

Wondering where to use this effect? It's most effective on navigation bars. Other areas include highlighting a link (or) usage in the header of your blog - anywhere you need a hover effect. I would like to illustrate this effect with my very own example - tweety bird. Before we get into the coding part, make sure you have identical images - same width and height.

The first image (PREVIEW) which I used is just the outline of the tweety bird while the second one (PREVIEW) is filled with colors. Later, I clubbed both the images onto a single file using Photoshop. Clubbed??? It's just placing one image below an another. You place the images horizontally one after another (or) place them one below another. I chose to place them one below another. Have a look at the final image - PREVIEW. The final image is the one which will be used for the hover effect using CSS Sprites.

The following piece of code is the HTML part for the above effect.
<a href='#' id='logo-link1'/>
Note: Make sure the ID used is unique (code highlighted in pink). You may place it anywhere in between your body tags to invoke the effect. I have used it in my post area in this article. You may point to any URL by replacing # with the link your wish to point to - it's pretty self-explanatory.

1. Navigate to "Design>>Edit HTML" and make a backup of your template by clicking on the "Download full template" link at the top of the page. Once the back up is over, search for the following piece of code.
2. Place the following piece of code just above the line mentioned in step 1.
background-position:0px -288px;
background-position:0px 0px;
Note: When the browser loads the image, I want the outline alone. For this reason, I set the background position of the image to 0px horizontally & -288px vertically (code highlighted in green). On hover, I need the colored version. So, I just move the vertical position from -288px to 0px (code highlighted in orange). That's it!
3. Save your template. That's it!

Pretty simple!!! Isn't it? Since this is an introductory article on sprites, it looks very easy.  Moreover, we have dealt with only one image. Imagine when it multiplies for all the images on your blog. It will be very difficult to exactly position your images and get the padding right. We will illustrate with better examples in the upcoming articles. Share your opinions or clear your doubts about sprites via comments!