Using CSS Sprites On Blogger - Introduction

CSS-Sprites
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!!!

WHAT ARE CSS SPRITES? ARE THEY USEFUL?
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!

SIMPLE HOVER EFFECT
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?












TUTORIAL
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.

HTML PART
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.

CSS PART
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:skin>
2. Place the following piece of code just above the line mentioned in step 1.
#logo-link1
{
width:271px;
height:288px;
text-decoration:none;
display:block;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidWYLWE03eetknHKFghyphenhyphenTAq2frq5FjvdgYEuJrgBOn4LW8OIIV72h4JkcMpdctKA5TaDtzacr2hzPwyx64gn7ZYQFXHz5NWFJCaORIBH9WfhmB90ZVSB6LY9eSYku_B54aPn7x79H87Mc/s800/tweety-sprites-tutorial.png);
background-position:0px -288px;
}
#logo-link1:hover,#logo-link1:active
{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidWYLWE03eetknHKFghyphenhyphenTAq2frq5FjvdgYEuJrgBOn4LW8OIIV72h4JkcMpdctKA5TaDtzacr2hzPwyx64gn7ZYQFXHz5NWFJCaORIBH9WfhmB90ZVSB6LY9eSYku_B54aPn7x79H87Mc/s800/tweety-sprites-tutorial.png);
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!

New Share Button With Counters On Blogger

sharethis
I'm sure you would have noticed the recent addition of share counters at the end of the article on my post pages. My friend, Paul Crowe from "Spice Up Your Blog", had posted a video tutorial about the same which you may check out on his blog. So, if you wish to have this new share counter on your blog, then just follow the steps in the tutorial given below.

What non-sense is he talking about? Is that the question that's running on your mind? Well, then have a look at the following picture to get a better idea about what I'm talking.
New-Share-Counters-For-Blogger
Before we start the actual tutorial, let's first get the scripts which make the share counters appear. Go the following link : Sharethis. Register with them and hit the "Publishers>>Get the Share Widget" tab. Select the following options on the page that appears.
1. Website or Blog? Choose website.
2. Pick your style - Third Option (Horizontal counters)
3. From the various networking sites, choose the ones which you want to have on your blog. Just use the left and right arrows to add and remove the various counters. The up and down arrows aligns your counters - which one should appear first in your list. It's pretty self-explanatory.
4. Choose the Oauth widget or Classic Widget.
5. Now, hit the "Get the button" tab and copy the scripts that are generated to two separate text documents temporarily and name them Script 1 (Script in the top/first box) and Script 2 (Script in the bottom/second box). 
share-button-tutorial
Now, you have the scripts with you. You need to place them on your blogger template with some CSS to make it more attractive. So, let's get it done!!!
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:skin>
2. Add the following code (CSS) just above the line mentioned in step 1.
.social {
border: dashed #ddd;
border-width:1px 0 1px 0;
margin: 10px auto 10px;
display:block;
padding: 3px 0 1px 0px;
overflow: hidden;
margin-left:0px;
}
3. Next, search for the following piece of code.
</head>
4. Place the coding present in the text document Script 2, just above the line mentioned in step 3.
5. Save your template. Then, expand your template and search for the following piece of code.
<div class='post-footer-line post-footer-line-1'/>
6. Add the following piece of code just below the line mentioned in step 5.
<b:if cond='data:blog.pageType == "item"'>
<span style='font-size:20px; font-family:Georgia; font-style: italic; line-height:21px; margin-top:1px; margin-bottom:-2px;'>Enjoyed the article?</span>
<div class='social'>
<div style='margin-left:10px; margin-top:0px; margin-bottom:3px;'>
YOUR SHARE THIS CODE FROM SCRIPT 1
</div>
</div>
<div class='clear'/>
</b:if>
7. Replace the line highlighted in green with the coding present in the text document Script 1.
8. That's it! Save your template. 

Note: The counters will be visible only on post pages. If you wish to have them on all the pages, then remove the first and the last line in the coding mentioned at step 6.

I would like to point out one advantage with this counter which is better loading time. That is, you get all the counters at one place. So, it saves a lot of time in loading your scripts. Hope you enjoyed this post. Share your opinions about the counter/post via comments!

Alexa Rank Vs. Google PageRank (PR)

alexa-rank-vs-google-pr
There's always a confusion when it comes to Alexa Rank and Google PageRank. Many of you would have gone through so many articles about the same on the web. Yet, you would not know on what basis they ranked us or how they generated the ranking for us? This time let's be clear about what to worry and what not to?

From the very beginning of my blogging experience, there is always a big question mark about Google PR. Their algorithm seems to be Greek and Latin to me. Well, even those could be understood I think. Moreover, I would like to bring to your notice that my site few months before, on the blogspot URL had a PR4 which dropped to PR0 once I made the shift to a custom domain. Interestingly, I found that one of my article namely, Increase Traffic To Your Blog With Meta Tag and SEO, still has PR2. So, this definitely confuses me. I'm sure many of you would face similar kind of problems when it comes to the PageRank.

On the other hand, Alexa Rank, as far as I know is based only on one factor - traffic. This simply means that more the amount of visitors to your site, better will be your ranking. However, few people complain that the rankings are biased between the ones who have their toolbar installed on the sites and the ones without it. I'm not sure how far this is true, but personally I did see an improvement on installing their site widget. 

I would rather see the widget as a tracking device. Just as Google Analytics asks you to install a script for working out your site statistics, Alexa asks you to install their widget for better results. Moreover, I personally noticed that when you update your site on a regular basis, your Alexa Rank would improve. Let's just list out our conclusions.
  • Alexa do not penalize websites whereas Google might.
  • Alexa Rank is purely based on traffic whereas Google PR depends on its algorithm.
  • Alexa Rank may vary from millions to as low as 1 whereas Google PR uses a floating number algorithm to rank a website on a scale of 10.
  • Other factors that contribute to Alexa Rank apart from traffic - their toolbar.
  • Other factors that contribute to Google PR apart from back-links - Page Speed and other unknown craps understood by SEO geeks.
Many advertisers except those text-link advertisers have started to look for Alexa Rank rather than Google PR which according to me, is a good strategy. So, should you be bothered about these ranks? Well, certainly not. Bottom line, just worry about the amount of traffic to your site. The rest will follow you!!! Share your knowledge about PR and Alexa Rank or an opinion about this post via comments. We would love to hear from you!

To know more about PR & back-links, check out these:
Article One - How to increase the page rank of my blog?
Article Two - How to increase back-links to my blog???

Shoutmeloud Thesis Theme Customization - Part 4

Thesis-Theme-Customization
It's been quite some time we posted about the customizations on Shoutmeloud thesis theme. So, we thought to provide one now. If you had missed the earlier series, then I recommend you to check out the various parts here - Part 1, Part 2 and Part 3. Well, this post deals with the issues related to block quotes and the text background color on hover in the post area.

Still confused about the changes which I highlighted earlier in this post? Just take a look at the following pictures to understand what changes have me made to the template and what will you achieve by following the tutorial in this post.
initial-blockquote-thesis-theme
INITIAL BLOCK QUOTES ON THESIS
blockquote-thesis-theme-new-look
THE NEW LOOK FOR BLOCK QUOTES
initial-link-hover-thesis-theme
INITIAL HOVER EFFECT ON LINKS
link-hover-thesis-theme-new-look
THE NEW LOOK FOR HOVER EFFECT ON LINKS
I think you now have an idea about the modifications we made on the template. You may check out the live demo about this hack on this article here - LIVE DEMO. So, let's get started with the tutorial on installing these effects on your blog. 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.

BLOCK QUOTE INSTALLATION
1. Once the back up is over, search for the following piece of code.
.post blockquote{
background:#007EC4;
margin:0 25px 15px;
padding:10px 20px 0 15px;
border-top:1px solid #DDD;
border-right:1px solid #666;
border-left:1px solid #DDD;
border-bottom:1px solid #666
}
2. Replace the above block of code with the following piece of code.
.post blockquote{
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEnV_LW-uJmYWldehyGljWMGu5jA5U6jIRsn6wKiq0rprFwn90OCfI6kL5KWI1cKzAuW6C0YqhOUQB2qPxIobFTquYIxdIAx6bVKRbywZNFtT7KMDf_-R1FCuegiSsplb9UvFvnAIb3eM/s800/blockquote.png") no-repeat scroll 5px 0 transparent;
font-size: 14px !important;
padding: 0 30px;
border-left: 0 none;
color: #9E9E9E;
font-style: italic;
margin: 2px 0 13px;
}
3. Save your template. That's it! Pretty simple, isn't it?

To make the block quotes actually work on your template, you need to use them in your posts. To do so, just mark the text which you want to appear as quotes and press the "Quote" icon -block-quote-on-blogger-post-editor-on the blogger post editor. That's it.

LINK HOVER EFFECT INSTALLATION
1. Search for the following piece of code.
]]></b:skin>
2. Place the following piece of code just above the line mentioned in step 1.
.pos-links a {
text-decoration: underline;
}
.pos-links a:hover {
text-decoration: none;
background-color: #0F4F7E;
color: #FFF;
}
.pos-links img{
text-decoration: none;
background-color: #FFF;}
.pos-links img:hover{
text-decoration: none;
background-color: #FFF;}
3. Save your template.
4. Navigate to your "Settings>>Formatting" page. Scroll down to the end of that page. In the field which says "Post Template", you will find an empty box next to it. Just paste the following code in that empty space.
<div class="pos-links">
</div>
5. Save your settings by hitting the "Save Settings" tab at the end.

By default, the upcoming articles on your blog will have the link hover effect. If you wish to have the same for your previous articles as well, then you need to edit your posts... However, you just need to add only only one tag at the start and end it at the last. So, it shouldn't be a tedious job provided you have lesser number of posts on your blog.

To edit your posts and have the link hover effect on your previous entries, navigate to "Posting>>Edit Posts" page and select the article which you want to edit. Just simply add the following tag at the start of the article.
<div class="pos-links">
Scroll to the end of your article. Close the div tag by adding the following tag at the end of your article.
</div>
That's it!! Nothing else!!!

If you wonder why I did not change the CSS for the post section and I went on with the alternate method to add individual div tags on each article, well the answer is simple. If I add these hover effects to the post section, then the images, social bookmarking icons above the posts, about the author widget and everything that comes under the post section will get affected. So, the only solution was to add the tags individually to the post.

I hope you understood the reason behind adding individual tags to each post. If you have any other alternative method, then let me know and we can discuss about that. Your opinions are always welcome - share it via comments. See you soon with another interesting customization!

Stylish Featured Content Slider For Blogger

Featured-Content-Wordcloud
It's been few days since I modified my template. Many people loved the new look while few highlighted mistakes which I'm rectifying from time to time. I found that many people loved the smooth sliding featured content on home page - recently removed for increasing the page speed. Want a slider running on your blog? Then, let's get started...

A LITTLE MORE ABOUT THE SLIDER
The slider works on jQuery and the styles are incorporated with a little CSS. The slider does feature a stop/start button and the animation goes a little farther than simply sliding to the left. Although I have modified the slider to my recommendations, the credit actually goes to "css-tricks.com". 
WHY THIS SLIDER???
The basic reason behind choosing this slider rather than the ones available on various other sites is that it occupies the least space on our blog and can be the JavaScript files can be defined internally on blogs which indirectly means that your site will load faster even with the scripts installed - no HTTP requests from the JavaScript file hosting sites. Secondly, it is more feasible and runs perfectly the same on all the web browsers. Finally, it is very easy to understand and customize the coding.

GET THIS INSTALLED ON YOUR BLOG
Let us split the customization into two parts. The first one deals with the CSS and JavaScript installation while the second part deals with the HTML coding. Now, let's get started with the first set of installation procedures.
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.
</head>
2. Download the following text document - JAVASCRIPT FOR THE SLIDER and paste the code present in it just above the line mentioned in step 1.
Note: The code which you pasted now, is the internally defined JavaScript that makes the slider work. The only possible customization here could be the timer which is by default set to 4000 milliseconds. You may vary it by changing the number in the following piece of code.
var delayLength = 4000;
3. Next, search for the following piece of code.
]]></b:skin>
4. Paste the following piece of code just above the line mentioned in step 3.
#slider{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlbVGAjBM8SP7wQE3UzybqqKQeDGA1-Mo_6fvaQDZT4hYwnPJXMr1V3QV2iNgPCDYMKE3bmoYyq1xtZdaSRUbG7eRG9M_GArN5ctWCbomgX12st68LTCLiruBMMOLsG74OSzq4vMnh0mM/s800/slider-bg-new-1.jpg) no-repeat; height:180px; overflow:hidden; margin-top:-3px; margin-bottom:7px;  position:relative; width:600px; border:1px solid #ddd}
#mover{width:2880px; position:relative}
.slide{padding:40px 30px; width:600px; float:left; position:relative}
.slide h1{color:#444; font-size:22px; font-family:Georgia,"Times New Roman",Times,serif; line-height:23px;  font-style:bold; font-weight:normal; margin-top:-25px;  margin-bottom:-8px;  color:#ac0000}
.slide p{color:#555; font-family:Georgia,"Times New Roman",Times,serif; font-size:15px; line-height:20px; width:370px}
.slide img{position:absolute; top:20px; left:420px}
#slider-stopper{position:absolute; top:1px; right:20px; background:#ac0000; color:white;  padding:3px 8px; font-size:10px; text-transform:uppercase; z-index:1000}
Note: The above mentioned code represents the CSS part of the slider. You may customize it the way you want. Various possible customizations include changing the width of the slider or the background picture of the slider. The font style can be varied to match the fonts present in your blog. I feel these are pretty self-explanatory.
5. I recommend you to save your template temporarily.

HTML PART OF THE CODING
1. Search for the following piece of code in your blogger template. Use CTRL+F to fasten your search results.
<b:section class='main' id='main' showaddelement='no'>
2. Paste the following piece of code just above the line mentioned in step 1.
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<div id='slider' style='margin-left:5px;'>
        <div id='mover'>
              <div class='slide' id='slide-1'>
                        <h1>Review On Camera</h1>
                      <div style='text-align: justify;'><span style='font-family:verdana; color: rgb(0, 0, 0);'><p>This Digital Camera comes with 12.1 Mp lens and great performance with tonnes of features. One of my friends purchased this camera and got it delivered few weeks before, after having a thorough analysis read in many websites about digital camera. First of all, lets talk about the package contents which includes...</p></span></div>
                        <a href='http://www.newbloggingtipz.com'><img alt='learn more' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifyy-KuQJG7NSOlWFKe2EikvKNJF59Bw7KfUe2MI90CLkh6VwFvxOaY_2iBaNUrTtF-XgaK9it2-Z8dD2MuqGPMVhrncbT7Vq6ylTk3Wer7csgYNIfjYEP7ArixEfxpLLsmqksFkiLpdg/s800/read-more.png'/></a>
                </div>
                <div class='slide' id='slide-1'>
                        <h1>Review On Blackberry Storm</h1>
                       <div style='text-align: justify;'><span style='font-family:verdana; color: rgb(0, 0, 0);'> <p>The new Vodafone&#8217;s BlackBerry Storm has stormed the market and has attracted the whole world. BlackBerry&#8217;s parent company says that this phone is something that will really compete with an iPhone. So, here goes an elaborate review about the phone. The Storm has a clickable touch screen, which is really...</p></span></div>
                        <a href='http://www.newbloggingtipz.com'><img alt='learn more' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifyy-KuQJG7NSOlWFKe2EikvKNJF59Bw7KfUe2MI90CLkh6VwFvxOaY_2iBaNUrTtF-XgaK9it2-Z8dD2MuqGPMVhrncbT7Vq6ylTk3Wer7csgYNIfjYEP7ArixEfxpLLsmqksFkiLpdg/s800/read-more.png'/></a>
                </div>
        </div>
</div>
</b:if>
3. Now, you need to vary the content and the titles along with the link to which they should point to. To do so, you need to vary the text highlighted in green. Just copy a snippet from your blog post or write an attractive one that will drive the readers to click the read more button.
4. Next, to change the title of your post, you need to  change the text highlighted in orange. Just erase the ones highlighted in orange and write the title of your posts. The last customization would be the links to which they should point to. To get this done, replace the link highlighted in pink with the URL of your posts. That's it!!!
5. To add more posts on your featured content widget, just add the following piece of code before the last two div tags and repeat the steps from 1 to 5 mentioned above.
                 <div class='slide' id='slide-1'>
                        <h1>TITLE OF YOUR POST</h1>
                       <div style='text-align: justify;'><span style='font-family:verdana; color: rgb(0, 0, 0);'> <p>WRITE YOUR CONTENT HERE</p></span></div>
                        <a href='URL TO YOUR POST'><img alt='learn more' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifyy-KuQJG7NSOlWFKe2EikvKNJF59Bw7KfUe2MI90CLkh6VwFvxOaY_2iBaNUrTtF-XgaK9it2-Z8dD2MuqGPMVhrncbT7Vq6ylTk3Wer7csgYNIfjYEP7ArixEfxpLLsmqksFkiLpdg/s800/read-more.png'/></a>
                </div>
6. Now, save your template and view your result. In fact, I recommend you to preview your results before you save them.

Note: The featured content will appear only on the homepage of your site. If you wish to have it on all your pages, then remove the first & the last line in the HTML part of your coding mentioned at step 2.

I hope I made this tutorial look simple and I assume that you enjoyed this post as well. If you feel it's difficult or face any problems during the installation, then you can always reach me via email and get your slider fixed. Please share your opinions about the posts via comments. See you soon in another interesting article!!!

The All New Blogger Dashboard and Design

blogger-in-draft-redesigned
Blogger today released the new design & interface for its dashboard which can be realized only on Blogger In Draft. It's a common methodology that is adopted by Google to test the new interface on Blogger In Draft and later, update to the main site. Note that this update will be visible only to a few randomly picked users while the rest will be updated soon!

MORE ABOUT THE NEW DESIGN
It is clearly stated that there is no activation or sign-up process is required to get the new UI (User Interface) for your dashboard. Fear not, you will soon be updated with new interface - probably within a couple of weeks time. First reason why you did not have the new design - may be your blog is very new. Second Reason - Since the update is a complete redesign from the scratch, it becomes very difficult for the blogger team to make the new UI available to all its users. You may read more about the new UI here - Official Blogger Blog.

PROS AND CONS
The new design looks more sleek and takes very little time to load when compared to the age old blogger editor. The second advantage with respect to the new design is the ability to translate or define within the post editor using the Define/Translate icon. A number of issues have been solved while the other features which are yet to come are as follows.

Updates to previous issues:
  • The “You have unsaved changes” error message after post publishing has been fixed.
  • The Labels button now changes status after labels get added. We've also added the labels list and “Click to add” function.
  • We've added the “Number of posts to show in one page” option.
  • We've fixed the “Back to Blogger” link on the Template Designer.
  • We've updated scheduled posting.
  • We've fixed the Javascript error on the image uploading from Edit HTML tab of Pages.
  • We've also made a variety of other small updates to the user interface.
A few things we're still working on:
  • The option to Show/Hide blog list on Global Dashboard.
  • Label auto complete.
  • Various updates to the user interface.
  • Small images embedded in the post, such as “Tweet this” or “Email this,” are enlarged and show up on the Dashboard.
Regarding the cons, the biggest disadvantage which I felt was the inability to edit our template. The only way to do so would be to download the template, make the required changes and upload the stuff back again. Another important feature that I repeat in my feedback forms to Google is about the comments section on blogger. I feel they should modify their algorithm to support threaded comments like WP blogs.
Blogger-New-Dashboard
NEW BLOGGER DASHBOARD, CREDIT : OFFICIAL BLOGGER BLOG
The post on Official Google blog says that "We’ve essentially rewritten the entire application from scratch, using the latest web technologies that will enable us to make future updates in more agile and flexible ways. We realize there might be some ‘rough edges’ but fear not, we’ll be continually updating and improving the experience until it’s ready to graduate from Blogger in Draft. So, let's keep our fingers crossed and wait for the best to happen.

You may send a feedback about the new UI to Google via the following form - Send Feedback. You might very well share the same with us via comments.

UPDATE
Read more about the new feature on this page - ONE CLICK FAVICON INSTALLATION. Scroll to the end of the article to find the updated version of the post.
[netinsert=0.0.1.11.14.1]