Photo Stack Effect Using Only CSS3

There's a lot of buzz around the web about Google plus! I'm sure many, including me, are fascinated about circles! Well, did you find time to check out the other sections - albums on Google+? If not, try it now! You'll find a cool transition effect on hovering your mouse over the albums! Inspired by this, I googled about the same & found a solution to get it work on Blogger. Take a look at the demo here.

PHOTO STACK EFFECT - LIVE DEMO (LOOK AT THE SIDEBAR ON DEMO BLOG)

The main advantage with the above hack is that it works purely with CSS3. No Javascript nor Jquery - only CSS! However, there is one main disadvantage working with pure CSS3 - browser compatibility issues! The above hack works only on browsers that support CSS3! I'll try to get the same effect working on all browsers, with a gradual transition rather than the abrupt change, using Jquery in the upcoming weeks! Anyway, let's get started with this tutorial now...

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. Download the following text document - CSS FOR PHOTO STACK EFFECT and paste the code present in it just above the line mentioned step 1. 

3. Save your template. To realize the stack effect, declare image tags with class="photo1", class="photo2" and class="image3" respectively. Then, wrap them with an anchor tag using class="album". That's it! Difficult to understand?  Then, paste the following code anywhere on your template to realize the final effect.

<a class='album' href='#'>
<img class='photo1' src='IMAGE URL'/>
<img class='photo2' src='IMAGE URL'/>
<img class='photo3' src='IMAGE URL'/>
</a>

Note: Replace IMAGE URL highlighted in blue with your image URLs to realize the stack effect on your blog. If you wish to extend the same effect for more than 3 photos, then ping me via gtalk or leave a comment, I'll help out to achieve the same!

4. Save your template and view the same on a browser that supports CSS3 - possibly using FF3+!

Over the past few weeks, I've been trying to post articles that are pretty unique on blogger. I would like to receive your opinion about the same. I hope you enjoy the articles on my blog including the one above! Please share your views about the same via comments:) Check out the other interesting tutorials on CSS here - CSS Tricks

Click4more... 16 Comments

Adaptable View On Blogger - Introduction

It sounds pretty interesting rather strange to hear adaptable view. Isn't it? Well, adaptable view is basically an user interface pattern that allows people to change the visual appearance of the content/design on your blog. This offers more flexibility and control to the user over your content/design. A very good example to illustrate this effect could be on your delicious bookmarks.

Just navigate to the following link - Recent Bookmarks. Notice the three tabs/links that say "Low | Medium | High" once you hit the display options. Each one shall show you a different view: single, compact or full. So, how do I achieve a similar effect on blogger? Pretty simple, provided you have some knowledge about CSS and Jquery! Adaptable view can be used to change background colors, switch layouts, increase or decrease font size, darken or lighten the post area - as you see on Sohantaka's blog when you toggle the article view, etc...

In this article, I'll illustrate the above effect using two views: single-column and two-column view. Users can switch their views between single-column and two-column dynamically. I don't want to take too much of your time on explaining the same further. So, take a look at the live demo and let's get started...

ILLUSTRATING BASICS ABOUT ADAPTABLE VIEW ON BLOGGER - LIVE DEMO

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. Paste the following piece of code just above the line mentioned step 1.

#commands { margin-top:50px;}
#list { width:580px; margin:0px; padding:0px;}
#list li { list-style:none; display:block; width:560px; background-color:#D7D3E0; padding:5px; margin:5px;}
#list li span { font-size:1.2em; margin-right:10px; font-weight:bold;}
#list.compact li { float:left; width:270px;}

3. Next, search for the following piece of code.

</head>

4. Paste the following piece of code just above the line mentioned in step 3. Save your template.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$("#fullswitch").click(function() {
$("#list").removeClass("compact");
});
$("#compactswitch").click(function() {
$("#list").addClass("compact");
});
});
</script>

Note: You need not paste the first line (highlighted in orange) in the above coding if you already have the jquery file running on your blog.

5. Now, insert the following tags anywhere in your template - may be within the post editor or on  the sidebar or below the content wrapper. Replace CONTENT HERE with your content.

<div id="commands">
Click on icons to change view:
<a href="#commands" id="fullswitch">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_HZuX1Wy5dRiJVUUIwUT3vqqRR6tj79GifE3H1orLjpHeOCAKL1NWx6myiDTkdG_A9Tj6lnaTNGZ4rv0XWriVx1YrhCa1DV-YvkYhE4zRCwai98PkfmHtpu8CglwBD6ASBOyLSaVWbSI/s800/switch_full.png"/>
</a>
<a href="#commands" id="compactswitch">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxmC3BGksj2Rkmuu4tTFa4B_54OQg1UTtLVCTly3pfJkb2mK0qIW-YwnQf5Nb5Y2GZXZfIr7V6YD18G0XClKSv0OtZ8O0WltNzl11OJosaqcrMcUd18c6GedWyIDtz2_2uNGQYxTsVfe4/s800/switch_compact.png"/>
</a>
</div>
<ul id="list">
<li> CONTENT HERE </li>
<li> CONTENT HERE </li>
<li> CONTENT HERE </li>
<li> CONTENT HERE </li>
</ul>

6. That's it! Save your template just in case you made use of the code on your template else, publish the post  with the codes mentioned in step 5 and you're done!

I would like to provide the reference script (used within the post editor to illustrate adaptable view on  the demo blog) for those who find it difficult to work out step 5 in the above tutorial. Download the reference script here - REFERENCE.

The above effect was tested to work fine on all major browsers - IE, Firefox, Opera, Safari. I'll illustrate the same (adaptable view) with more examples in the upcoming articles on my blog. Subscribe to my blog so that you don't miss any article that might interest you like the one above:) Share your opinions via comments! You may read more about the tutorials on jquery here - Jquery.

Click4more... 6 Comments

Simple Slide Effect On Blogger Using Jquery

I've got another interesting tutorial using jQuery - four in a row. However, it's very important to note that all these effects are possible with the inclusion of one single jQuery file on your template which means no additional time to load your site. In this article, I'll teach you another simple slide effect or in other words, an up/down slide panel effect using jQuery. Take a look at the demo below...

SLIDE PANEL EFFECT ON BLOGGER USING JQUERY - LIVE DEMO

Interesting? Well, I have implemented the hack within the article on the demo blog whereas you can implement the same anywhere on your blogger template. Few examples include adding it to the sidebar with facebook like box, adding the hack to wrap the featured section, add the effect below your articles to show the share icons/author info widget, etc... So, let's get started.

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. Paste the following piece of code just above the line mentioned step 1.

#panel {
background: #D3D3D3;
height: 190px;
color:#000;
display: none;
margin-top:15px;
}
.slide-panel {
margin: 0;
padding: 0;
border-top: solid 0px #422410;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXnssFHhP35djP8H7JjqKbErsHRlRcXvNcjEffuGuu2_aGHtTo3g-tE5E183KoBt2yqApvW9eMMLFXNLyiYzPJ0GNd_z7M6c5LaK_sMmB3sz3WbO4R4hSW2Uc97IJkU8R_0x7HZfAtTQDe/s144/orange-slide.png) no-repeat center top;
}
.btn-slide {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEB98jgC_T-9fK9P6SHJkkbJSPcTFFwLjEtIG5Lm4UM0WI-vNtNCjMphXPAcB6FHbUQq2H82Nd8f8tpqfo7oI8Q29hbvznV-8ubQSAX1rG3FmCyxV3iDfusS7myvDARhm-0-94KUGvf2Pk/s800/white-arrow.gif) no-repeat right -50px;
text-align: center;
width: 144px;
height: 31px;
padding: 8px 10px 0 0;
margin: 0 auto;
display: block;
font: bold 120%/100% Arial, Helvetica, sans-serif;
color: #fff;
text-decoration: none;
}
.active {
background-position: right 12px;
}

Note: You may replace the color code highlighted in blue to change the background of the panel. Similarly, the text color by varying the code highlighted in green. To change the height of the panel, vary the code highlighted in orange. You can also change the color of the slide button by varying the URL highlighted in pink. We have provided six different buttons below. Pick one from the slot that interests you!

3. Next, search for the following piece of code.

</head>

4. Paste the following piece of code just above the line mentioned in step 3. Save your template.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>

$(document).ready(function(){

$(".btn-slide").click(function(){

$("#panel").slideToggle("slow");

$(this).toggleClass("active"); return false;

});

});

</script>

Note: You need not paste the first line (highlighted in orange) in the above coding if you already have the jquery file running on your blog.
5. Now, insert the following tags anywhere in your template - may be within the post editor (or) on your template. Replace YOUR CONTENT HERE with any content you want - it can be a script or an image or a link, anything under the earth... lol....

<div id="panel">
YOUR CONTENT HERE
</div>
<div class="slide-panel">
<a href="#" class="btn-slide">Slide Panel</a>
</div>

6. That's it! Save your template just in case you made use of the code on your template else, publish the post  with codes mentioned in step 5 and you're done!

The above slide panel effect was tested to work on all major browsers - IE, Firefox, Chrome, Opera. We are happy to inform our readers that some of my design articles have started to appear on the famous design site - Design News. I hope we'll be able to provide such quality articles in the future as well! Share your opinions via comments!

Click4more... 20 Comments

Simple Disappearing Effect Using Jquery

We can tweak our blogs run on blogger/blogspot with simple jQuery scripts to make it more unique and attractive. One such attractive effect is the disappearing effect. In this article, I'll explain a simple disappearing effect that you can apply to any widget on your blog. So, let's get started. Just click on the link below to see a live demo of the hack.

SIMPLE DISAPPEARING EFFECT - LIVE DEMO

Interesting, is it? Let's see how it works! Before I start off, I would like to inform you that this tutorial is just an example to illustrate the disappearing effect. You may apply the same to any widget on your blog provided the code is wrapped with a div tag that calls the class 'pane'.

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. Paste the following piece of code just above the line mentioned step 1.

.pane { margin:0; padding:0; }
.pane .delete { position: absolute; padding-left:560px; cursor: pointer;}

Note: You may change the padding as per your wish.

3. Next, search for the following piece of code.

</head>

4. Paste the following piece of code just above the line mentioned in step 3. Save your template.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function(){$(".pane .delete").click(function(){$(this).parents(".pane").animate({ opacity: 'hide' }, "slow");});
});
</script>

Note: You need not paste the first line (highlighted in orange) in the above coding if you already have the jquery file running on your blog. I suggest you to use the Google hosted jQuery files as mentioned in the coding above for better loading time.

5. Now, just insert the tag class="pane" with any div tag on your blog. Next, include a tag say class="delete" with your image or anchor tags and save your template. To better understand what I blabbered in the last line, take a look at the following example (the code which I used on the post editor to show you the live demo).

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="pane" style="border: 1px solid rgb(9, 68, 136); padding: 5px;">
<img class="delete" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm6Chr6NKQKYPNErSE6MFXuRN09_wkG0C-awVGR-CRtliOOORN1mI13UUaxTF9iT73_6tCplDm1q7ZhOsRZtFw8t2cBV6sotYAVeCY4XwjKCY02jXm3H0GMIOqGfS_7flC4O9xUpyzIWWs/s1600/btn-delete.gif"/>
<h3>Sample Heading</h3>
<div style="text-align: justify;">
This is just a sample post to check out the disappearing effect on blogger. If you like this effect, then read the tutorial on www.newbloggingtipz.com! We've more interesting tutorials out there! So, go check out the site right now!!!!</div>
</div>

Note: You may use the above coding in your post editor and realize the same effect on your blog, as well. To change the border color, change the color codes (highlighted in green). Change the heading (highlighted in blue) and content part (highlighted in pink) as you want! I guess the other customizations are pretty self-explanatory. So, give it a shot & I bet you'll like it!

I used the disappearing effect for the subscription box on my demo blog. Where do you intend to use this on your blog? Let us know via comments! Let's see the creativity in you:)

Click4more... 11 Comments

Want to Start a Blog About Marketing?

With the current economic downturn, marketing is increasingly important. Whether you’re a mom selling crafts and crocheted hats, or a start-up company looking to increase your brand recognition, effective (or ineffective) marketing can make or break you. Unless you have a marketing degree, however, this can be a confusing process.

Not everyone can afford to hire a marketing firm to promote their business; this is where blogs and how-to articles come in handy. The Internet provides easy access to thousands of articles and blogs intended to educate and enlighten readers, and is a veritable font of information. If you are a writer interested in marketing, here are a few suggestions for writing posts that will draw readers to your site and keep them there:

KNOW WHAT YOU ARE TALKING ABOUT

Don’t waste your time or that of your readers by writing about a topic that you are clueless about. If you are exploring new territory, take a few minutes to research, so that you can speak with a voice of authority. Your readers will assume that your information is valid and will likely follow your recommendations, so be sure to do it right the first time.

HAVE A GOAL BEFORE YOUR START AN ARTICLE

Unless you are a seasoned marketing guru and author, it is unlikely that you will be able to sit down and start writing off the cuff. Jot down the topic you would like to explore, a few important key points, and then start writing. This will give your article a more polished feel, and you will be able to be more concise, which is always good when writing a blog.

KNOW YOUR TARGET AUDIENCE

If you are writing about deals for dads, or money-making ideas for teens, make sure you are clear about your audience. A trick that writers are taught is to imagine someone reading their work. Imagine every detail, including clothing, hairstyle, facial expression, etc. Then, tailor your writing for that particular individual. This gives your writing a more personal feel, and will appeal to whom it should, thus guaranteeing loyal readers.

STAY UP-TO-DATE

Marketing strategies are constantly evolving, based upon the needs of consumers, advances in technology, changes in the economy, and other factors. Subscribe to newsletters, read recent articles and blogs, and be aware of changes that may affect the advice you are dispensing. Make sure that your writing always reflects current trends and ideas.

SHAMELESS SELF-PROMOTION WILL GET YOU EVERYWHERE

Once you have your blog up and running and are writing quality content, spread the word and draw readers to your site. This can be done through the use of social media, word-of-mouth, creative advertising, or other methods. Since you are writing about marketing, there’s no reason not to use some of the tools you are writing about, in order to gain readers and popularity.

The Internet has made authors out of unlikely people. The quiet kid in the corner now has an outlet for his ideas, without ever having to say a word; the know-it-all now has a platform from which to educate the masses. Everyone has strong opinions on at least one topic (if not more), and blogging enables people to gain an appreciative audience for their expertise. Why not make this work for you?

Click4more... 5 Comments

Blogging Should Be Fun

Alright, maybe blogging isn’t what you would do if someone handed you $500 and said go have fun for the day, but if it’s what you’re doing to make money or helping you make money it should be enjoyable. Work is work, but it’s a large part of life so you should be able to focus on the positives of what you do here in the blogosphere!

WRITE ABOUT WHAT YOU ENJOY

Hopefully you are writing about what you know and enjoy. Doing so makes it easy to type and share your knowledge and experience with others. It’s enjoyable to publicly share your information on the web, to see the article you’ve published and that is something to be proud of.

YOU ARE HELPING PEOPLE

Hundreds, thousands or millions of people may be checking out the article you’ve written and because of that are learning a new skill, gaining motivation or being entertained by what you have to say. It’s fun to know that you are hopefully having a positive influence on someone else’s life! People all over the Internet are seeking out content for various reasons so when you sit down to blog know what sort of an impact you might make!

YOU HAVE A FLEXIBLE SCHEDULE

Hey, I sit here writing this article later in the evening because during the day I was out doing something fun during the day. If you’re a blogger, appreciate the fact that you have a relatively flexible schedule and can feel free to work when your brain is ready to be productive. Most people in this world are set to work on a set schedule and while those known hours aren’t so bad, I love knowing that I can put in my hours when it fits into my schedule.

WRITE ABOUT WHAT YOU WANT

The beauty of blogging is that you can write about what you want. It’s amazing to have a voice, and typically those around you can only hear that voice. Having that flexibility and ability to share whatever it is that comes to your mind is an absolutely phenomenal feeling and when you blog you should cherish that freedom.

COMMENTS/SOCIAL MEDIA

The beauty of the comments area under your article is that now you are talking back and forth with the people who really enjoy what you say. Writing the article is one thing and knowing the article had page views is cool, but when people speak up and talk about what you’re saying that’s when the fun begins. Get into your comments and have great discussions with your peers around the globe. Hop on your facebook and twitter pages and dive in to what it is that you talk about and it will be a more rewarding experience that you enjoy.

So, what's your opinion about blogging? Share it via comments below!!! 

Click4more... 7 Comments

The New Auto "alt" and "title" Tag Generator For Images - Best Image SEO Solution For Blogger

I usually find comments around the web that say blogs run on blogger/blogspot are not optimized for search engines just because we need to manually add alt and title tags for each image you post on your blog. Isn't it kinda of irritating to add stuffs manually every time you post them??? Well, not any more! I found a script that'll automatically add the alt and title tag for the images that you post on your blog.

WHY THIS SCRIPT?

I recommend you to read the following article - 3 Tips To Make Images SEO Friendly On Blogger. I guess you understood the importance of alt and title tags on your blog. I can assure you that this script will rank your blog better, than before, on search engines. What's little more interesting about this script is that, it'll add alt and title tags for all the images - be it the one that your going to post or the ones that already exist in your blog.

HOW IT WORKS?

The script just uses the name of your image to auto generate the "alt" and "title" tags. In other words, the name of your image stands as the text for your alt and title tag. It picks up the next character after the last instance of "/" from the image URL as the starting letter of your alt or title tag. The ending character will be recognized using the last instance of "." from your image URL.

For example, you upload an image "super-script.jpg" using post editor. You'll find the image URL as "http://1.bp.blogspot.com/....../super-script.jpg". When you publish the article and go check out the source code of the same (source code of the image), you'll find the following tags in it - alt="super-script" and title="super-script". Isn't it cool? No more manual addition of tags! Just a proper name for the images and the script will do the rest! 

     Just keep these two things in your mind before you name an image.

     1. Dont' use / or . character when you name your images.

      2. Use a name that best explains the image for better SEO.

INSTALLING THE SCRIPT

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.

</body> 

2. Download this text document - IMAGE SEO SCRIPT FOR BLOGGER and paste the code present in it just above the line mentioned in step 1.

3. Save your template. That's it! Very simple! Isn't it?

Note: Usage of above script is subject to copyrights. Do not make any changes to the above code. If you do so, it'll attract a violation of copyrights and you'll be filed under DMCA. For webmasters, you can modify the script provided you give a credit to this article. It's my kind request to you guys!

The above script is found to work on all major browsers - IE, Firefox, Opera, Safari and Chrome. WordPress users can follow the same instructions to get this script working on their blogs as well. I'll soon post another script that makes your external links open on a new tab with an automatic "nofollow" tag attached to it - just to ensure that your link juice isn't spread to other blogs. I suggest you to subscribe to my blog so that, you don't miss it! Share your opinions about the magic script via comments!

Click4more... 63 Comments

Subscription Box Using Tooltip For Blogger

In my previous article about HTML Tooltip, I mentioned about "callingallgeeks.org". If you missed the article, then check out - Tooltip For Blogger Using jQuery & CSS. Harsh on his blog "callingallgeeks.org" used this effect to display the Tooltip over the share icons - RSS, Twitter, Facebook. You may experience the Tooltip effect on Yahoo! Cricket too - hover your mouse over the player names.

In this article, I'll just share the code which will create the Tooltip effect when you hover your mouse over the subscribe icons. If you need the code for the entire subscription box, well install the widget that appears on this article first - Tutorial to add the subscription box. Later, use the code that appears in this post to realize a proper subscription box. So, let's get started.

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. Paste the following piece of code just above the line mentioned in step 1.

#dhtmltooltip {
background-color: #484848;
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0mTTTa3auJQPZm4yiROYuXL3O2IqeTjZnOzQHlmkj1Ojqxu0oP6Z9-kNtOOiWZDgC8xht5yvpHbhY2oe-5pPs_HirLE8XT8WtwMiWOLur2NdzDEmkTWysWx2GpQzEIqHeuzFOfoUGF94/s800/mouse-hover-bg.png");
background-repeat: repeat-x;
border: 1px solid #AAAAAA;
color: #F2F2F2;
font-size: 12px;
font-weight: bold;
height: 27px;
line-height: 20px;
padding: 10px 20px;
position: absolute;
text-align: center;
z-index: 100;
visibility:hidden;
}
#dhtmlpointer{
position: absolute;
z-index: 101;
visibility:hidden;
}
.social-subscribe ul {
list-style: none outside none;
}
.social-subscribe li {
float: left;
}
.social-subscribe li a.rss {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs5Qn4ykM7hd54K_XH3Ms4YbiAI4o9UkZoAxYwj29XkvgzoykH6d9YLqfAXwBlS4RxVnsT4JDrigsX0VAb5KeZ_8vzIA3LzVK0CwhJ50X9qcsZ8P_NKClVKlkyykukuGazVCFWHIVsllQ/s800/icon-rss.gif") no-repeat scroll 0 0 transparent;
padding: 0 2px 0 0;
}
.social-subscribe li a {
display: inline-block;
height: 52px;
width: 57px;
}
.social-subscribe li a.facebook {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvpHSOFtVK-NhNGCYDLEaEah9nvfjKLIpBT1XH-mmiahNO-O9zvKtVbYVKZW1MuQ0bEEE3xaBbpUwzwuw0UudAzvaoNiytZsAIDASGFlb_V8Cl3jU-8Ar6SmbBpCmN5g3sRug7jGrmsMg/s800/icon-facebook.gif") no-repeat scroll 0 0 transparent;
padding: 0 2px 0 0;
}
.social-subscribe li a {
display: inline-block;
height: 52px;
width: 57px;
}
.social-subscribe li a.twitter {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ9W_sq6eD4pjkI3o7TByvAzqTBAKVWbO5nxzxPdDpXidMVXdCpIMzoBoC8pG7AagXWUS-sxhArrlwBsiapuiDRK6CksGwvfb1bOGsdX_Nx9GSd5DITpV9-CRmNBHQscMstYamUA40iR8/s800/icon-twitter.gif") no-repeat scroll 0 0 transparent;
padding: 0 2px 0 0;
}
.social-subscribe li a {
display: inline-block;
height: 52px;
width: 57px;
}

3. Save your template and navigate to "Design >> Page Elements >> Add a Gadget" and choose "HTML/Javascript".
4. Download the following text document - HTML FOR TOOLTIP EFFECT ON SUBSCRIBE ICONS. Just copy the code present in the text document and paste it on the window that pops up. Make the following customizations before you save the widget.

1. Replace FEEDNAME with the name of your feed obtained from FeedBuner. Your feed name is nothing but your feed title. So, open your FeedBurner account and check out the Feed details. There are two instances where you need to replace FEEDNAME with your feed name.
2. Replace TWITTER-USERNAME with your twitter user name. There are two instances where you need to replace the same.
3. Replace FAN-PAGE-URL with your facebook fan page URL. Similar to the previous two customizations, this replacement should also be made at two instances.

5. Once the above customizations are made, just save the widget and your done!

In case you find the customization part a bit difficult to understand, then take a look at the example coding which I used on my demo blog by downloading this text document - SAMPLE CODE. This effect was tested on all major browsers - Firefox, IE, Safari, Chrome, Opera. If you have some unique ideas to illustrate this same effect in a different manner, then share it via comments! Would love to hear from the CSS and Jquery geeks out there!

Click4more... 6 Comments

Cross-Browser Gradient Effect Using CSS

Many themes, be it blogger or WP, make use of gradient effects. About 95% of them, use an image to achieve the gradient effect. However, the same can be realized with CSS. In this tutorial, we'll let you know how to achieve this gradient effect on all major browsers - IE, Firefox 3.6+, Safari, Chrome and Opera. So, let's get started...

If you are a WordPress user, then you need to add the following CSS mentioned in the tutorial to your ".css file" and upload the same to your server. If you are blogspot user, then you need to add the following CSS codes just above the following code in your template - ]]></b:skin>. 

FOR WEBKIT BROWSERS

To realize the gradient effect on webkit browsers like Safari, Chrome, etc... just include the following line in the CSS part of your theme.

background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000));

FOR FIREFOX 3.6+

To visualize the gradient effect on Firefox, add the following piece of code in the CSS part of your template.

background: -moz-linear-gradient(top, #ccc, #000);

FOR INTERNET EXPLORER

Use the following code to enable the gradient effect on IE.

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000');

Note: You may change the color codes highlighted in green and blue as per your choice. The codes which are highlighted in green represent the starting color in the gradient effect while the code highlighted in blue represents the ending color. I suggest you to take a look at the following link to easily pick the color code of your choice - HTML Color Codes Generator.

To see the effect on all the browsers, simply combine the above mentioned codes. So, you'll have a browser compatible CSS gradient effect. However, I strongly suggest you to provide a simple color as a background in case the user is using a browser that does not support CSS3. Hence, your final code should be similar to the one shown below.

background: #ccc; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */
background: -moz-linear-gradient(top, #ccc, #000); /* for firefox 3.6+ */

If you feel the above the post is too complex to understand, then I suggest you to visit this link -  Ultimate CSS Gradient Generator and choose the gradient effect of your choice for different colors. Once you make a choice at the left, you can preview the same at the right. Moreover, the required CSS to be inserted in your theme will also be generated. So, just copy that & insert it in your template. That's it!

Why gradient effect using CSS? Simple! No external HTTP requests - increases the loading speed of your web page on all browsers... I recommend you to read the following articles to know more about page speed of your blog - Speed Up Your Blog - Tips And Tools, How To Speed Up Your Blogger Blog? and Using CSS Sprites On Blogger - Introduction. Share your opinions about the article via comments!

Click4more... 8 Comments

Tooltip For Blogger Using jQuery & CSS

Recently, I came across an interesting tutorial about displaying Tooltip using jQuery. You may refer to "callingallgeeks.org - subscription box" to see an example about the same. In this article, we'll be learning about adding a simple HTML Tooltip to our blogger posts/template. You may check out the live demo by hovering your mouse over the links below.

Creating Unique Navigation BarsThis article illustrates about creating unique navigation bars using Adode PhotoShop and CSS Sprites. By using CSS Sprites, we achieve the following advantages - save bandwidth (less image size), reduce the number of HTTP requests and make our blog browser compatible. | About CSS SpritesThis article explains the fundamentals about CSS sprites with a simple hover effect using the same.

Cool trick. Isn't it? Well, if your answer to the question is "Yes", then consider reading the rest of the article to get this hack installed on your blog as well. I have used the standard jQuery file that's hosted by Google in my tutorial. If you wish to host it on your blog ( for WordPress Users), then download the latest JavaScript file from jQuery website. Now, let's move to the tutorial.

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. Download the following text document (includes the CSS and JavaScript to run the widget) - CODE FOR TOOLTIP WIDGET. Replace the above code with the code present in the text document.

3. Save your template. That's it. 

To make the Tooltip actually work, you need to define an anchor tag and span tag in your post or anywhere in your template (within the body tags) with the following classes ( tip_trigger and tip) present in it. The coding should look similar to the one shown below.

<a href="YOUR LINK HERE" class="tip_trigger">
YOUR LINK TITLE
<span class="tip">
YOUR TEXT HERE
</span></a>

That's it! Replace "YOUR LINK TITLE" with the title of your link, "YOUR LINK HERE" with the URL you wish to point to and "YOUR TEXT  HERE" with the description you want to show the visitor on mouse hover. You need to repeat the same procedure to have multiple Tooltips on your blog. As far as the browser compatibility is concerned, the Tooltip hack is supported by the following major web browsers - Firefox, IE, Safari, Chrome, Opera, etc...

I hope you enjoyed this hack. Well, I'm just learning the basics about jQuery and CSS now. So, if there are any jQuery geeks out there, then I'm open to your suggestions. Share your opinions via comments. I'll soon post the coding for the subscription box using Tooltip similar to the one on "callingallgeeks".

Click4more... 11 Comments

Blogging - The Latest Business Marketing Tool

Blog happens to be an internet journal. These are employed like brief form of internet logs, meaning a listing of writings over the web. Generally, a blog could be a collection of current information, content pieces, personalized journal pages, photos, video clip, business details, item to be marketed, their promotion, etc... Well, the listing really is limitless.

Blogging, the latest buzzword within the business enterprise, is ultimately given a serious attention because of its use, works out well as an efficient marketing tool and as a publicity instrument. Right from the experts in the field of blogging to SOHOs, "how to blog" is the question asked by all with regard to business marketing.

Among the most famous blogs which happen to be business blogs, use their reach in order to market their goods plus establish a business enterprise. Right from the comfort of building towards the ease of connecting with achievable clients, blogging offers a fresh technique for entrepreneurs to accomplish the best promotional approach with regard to their product, so the company should learn all about "how to blog". So, in this article we'll be targeting the business elements of a blog. Moreover, we'll provide you with  tips that can be effectively utilized to advertise various solutions together along with your business.

1. Low-cost online marketing technique: Starting a blogging account over the Blogger happens to be absolutely free. Nevertheless, you should host your personal blog despite the fact that it utilizes a totally free blogging software program. Enrolling your personal domain name plus getting the blog upon your personal server area provides you with effective exposure within the search engine ratings. This suggestion is applicable to all - not specifically for newbies alone.

2. Develop your item or perhaps company image: It is possible to develop your company image by making use of your own blog. Individuals looking at your blog might be intrigued to be aware of exactly what you do and that is the reason, you should include your business button towards your blog. Publish the item information or perhaps submit an infomercial that will be beneficial, not for newbie individual only but for everyone, to reap benefits.

3. Keep a consumer dialog: Blogs need to be interactive, meaning that the visitors should be able to connect with you for your published remarks, and queries. It should facilitate advanced level queries, in certain cases.

4. Obtaining new clients: Several readers might suggest many others to read your blog providing you with new business opportunities. This will be considered useful, not for newbie individual only but for everyone, and will provide them with new clients.

5. Interaction along with other related businesses: Every business operates on inner and exterior networks. Checking up on related blogs, in addition to their posts can, provide you with a way to discuss their articles or blog posts whilst giving importance to these delivering your understanding about the subject. A viewer considering their blog might click-through towards your blog in order to study more. These types of click-through tend to be totally free and produce increased traffic towards the blog.

6. Excellent publicity outlet: In the event, your business suffers from some undesirable pressure, then your blog could be your probability to display a nice and clean standing. It is possible to take a position or perhaps question a public viewpoint.

7. Immediate Feedback: The additional essential feature of blogging is that it allows you to get immediate feedback plus evaluations upon your goods or provide you with suggestions concerning how to make required modifications. This quick, immediate feedback can help you tweak plus react better towards the sector you are hoping to aim. Yet again, keep in mind your followers tend to be your best lead.

Blogs, nowadays, have grown to be a fundamental element of any business. In case you examine best organizations, they have launched a blog to specifically connect with their potential audience. Furthermore, it is the convenient way of educating clients that attract most companies and entrepreneurs. Thus, do not wait and write a blog today to reap the maximum benefits offered by the web.

Click4more... 7 Comments

Shoutmeloud Thesis Theme Customization - Part 6

I would like to start the tutorial straight away because it's not going to be a cake walk unless your a webmaster like me (just kidding). I guess this was the most awaited customization "SML Featured Content Slider" that every SML blogger theme user wanted to have! I tried my best to match the one on SML however, it's little different from the ideal one! Check out the live demo below...

SHOUTMELOUD FEATURED CONTENT SLIDER - LIVE DEMO

Before I start off, I would like to tell you that this slider will auto slide until an user clicks on the content (the page navigation in the slider). It works with only one script which implies that it's gonna load faster than other sliders. Well, enough of stories... Let's get started!

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. Download the following text document (includes the CSS and JavaScript to run the widget) - CODE FOR SML FEATURED CONTENT SLIDER. Replace the above code with the code present in the text document.

3. Next, search for the following piece of code on your template.

<div id='main-wrapper'>

4. Place the following code just below the line mentioned at step 3.

<div class='sliderwrapper' id='slider1'>

<div class='contentdiv'>
<a href='YOUR POST URL'><h1>YOUR POST TITLE</h1></a>
Content 1 Here.
</div>

<div class='contentdiv'>
<a href='YOUR POST URL'><h1>YOUR POST TITLE</h1></a>
Content 2 Here.
</div>

<div class='contentdiv'>
<a href='YOUR POST URL'><h1>YOUR POST TITLE</h1></a>
Content 3 Here.
</div>

<div class='contentdiv'>
<a href='YOUR POST URL'><h1>YOUR POST TITLE</h1></a>
Content 4 Here.
</div>

<div class='contentdiv'>
<a href='YOUR POST URL'><h1>YOUR POST TITLE</h1></a>
Content 5 Here.
</div>

</div>
<div class='pagination' id='paginate-slider1'>
</div>
<script type='text/javascript'>
featuredcontentslider.init({
id: &quot;slider1&quot;, //id of main slider DIV
contentsource: [&quot;inline&quot;, &quot;&quot;], //Valid values: [&quot;inline&quot;, &quot;&quot;] or [&quot;ajax&quot;, &quot;path_to_file&quot;]
toc: &quot;#increment&quot;, //Valid values: &quot;#increment&quot;, &quot;markup&quot;, [&quot;label1&quot;, &quot;label2&quot;, etc]
nextprev: [&quot;Previous&quot;, &quot;Next&quot;], //labels for &quot;prev&quot; and &quot;next&quot; links. Set to &quot;&quot; to hide.
enablefade: [true, 0.2], //[true/false, fadedegree]
autorotate: [true, 3000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})
</script>

5. Save the template and your done!!!

Simple! Isn't it? Well, if you think it is, may be your wrong. The actual tutorial starts here! First, write your post title in between the "H1" tags (those highlighted in green). In other words, replace "YOUR POST TITLE" with your post title and don't forget to link it. Replace "YOUR POST URL" with the link to your post. 

Secondly, you need to replace "Content 1 Here" with the snippet available on your blog. Well, the coding will display anything that's under the heaven in the space that's provided for it. Well, coming back to business, it's better if you could find the coding from your "Blogger Post Editor" for every snippet for the featured content. 

Say, for example (from the demo blog), I wish to add "Review On Cannon Power G9" as a featured content on my slider. The first thing I should do is, navigate to "Posting >> Edit Posts" and select the "Edit" link of the corresponding post. In my case, I should select the "Edit" link for "Review On Cannon Power G9". Now, shift the tab from the "Compose" mode to 'Edit HTML" mode. 

Get the coding for the first paragraph of your article with the styles you chose to display the original post. That's it! Paste it instead of "Content 1 Here" in the coding mentioned at step 4. But, please ensure that your "div" or "span" tags are properly closed before you paste the coding and save them!

You may repeat the above mentioned steps for replacing the other contents in the coding mentioned at step 4. Little confused??? Well, just have a look at the example coding given below. The final coding should look something like the one mentioned in this text document - Example Code For SML Featured Content Slider.

I hope the tutorial was an easy fix! If you have any difficulties in getting the slider work or find any bugs, then please let me know via comments! I'll try to fix them! Your opinions about the widget are also welcome! So, share them too!

Click4more... 17 Comments

Add Admin Logo To Blogger Comments

I'm not sure if you noticed the comment section on blogs like "Techiemania" or "SML", they show a differentiation in comments between the admin and the visitor. Well, I do know that there are many tutorials around the web to achieve this effect on blogger but, I'm pretty sure none would be clear because, myself being a webmaster, end up on a confusing state once I complete reading the full article

So, I wanted this tutorial to be clear and pretty easy to install. I hope it is!!! Well, the final effect will be a simpler one - just an admin logo to differentiate between your comment and  your visitor's comment. You may have a look at following screen shot to realize the final effect.

The basic coding evolves from the coding for "Multiple Author Info Box Widget".  Well, in my example, I have used a very simple box-type image. You may replace it with any image of your choice. I recommend the logo used by "Spice Up Your Blog". Take a look at preview of the image  here - Admin Logo Image Preview. So, let's get this installed on our blog.

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, expand your template and search for the following block of code.

<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'>
<data:comment.body/>
</span>
<b:else/>
<p><data:comment.body/></p>
</b:if>

2. Just replace the above codes with the following block of codes.

<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'>
<data:comment.body/>
</span>
<b:else/>
<b:if cond='data:comment.author == "YOURNAME"'>
<div class='comment-admin'>
<p><data:comment.body/></p>
</div>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</b:if>

Note: We did not use "<b:if cond='data:comment.author == data:post.author'>". If we do so, then every guest author on a multiple author blog would become the admin. So, to avoid that, we've used the idea behind the multiple author widget. If you run a blog with two or more admins, we have the coding for you as well. The same thing has to be extended but I'm sure you will go mad if I explain that. So, it's better you contact me via email for the coding (More than one admin for a blogger blog).

3. Replace YOURNAME with the name of the admin as it appears on the blog post. Well, the major part is over! Now, we need to add the CSS for "comment-admin" div section. To do so, search for the following piece of code on your template.

]]></b:skin>

4. Add the following piece of code just above the line mentioned in step 3.

.comment-admin {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfm4CuEC6DAH400PSEF21KRtdzXBX_bMaymQ15UnZ3MjmmArxUfnb7qQ-1I9-jtKvBH-BsUGMW3XUEWkNFxLX2qdCMctV8gnlUAFBrOfqlffc6XGq_0P6U60BvGXtqL1R2K19wHixAS9z3/s800/admin-logo.png") no-repeat scroll right top #FFF; padding-right:40px; margin-right:10px;}
.comment-admin p{margin-left:0px; margin-right:28px;}

Note: As I said earlier in this article, I have used a simple box-type image to display the admin logo. You may use any image of your choice. If you wish to change the image, then change the image URL - the one highlighted in orange. The padding and margin positions may vary depending upon your blog.
5. That's it! Save your template.

"If you would like to have an unique comment section for your blogger blog, then contact us via our services page and we'll let you know if we can design one for you! We'll install it on your blog too!"

I hope you liked this post. If you face any difficulties, then leave a comment below and we'll try to fix up the issue for you. Share your opinions about this post too via comments!

Click4more... 6 Comments

Google Analytics Newsletter - Just an overview!

I know there are lot of softwares around the web to analyze the traffic, the source of traffic, landing pages and lots more about our website. One such useful software/site is the "Google Analytics". I'm sure many are familiar with it! So, what's new about Google Analytics? Is it the new interface? No! It's about their first volume of Benchmarking Newsletter...

Last night, while I was working on the "Featured Content Slider" for SML blogger theme (Check out the demo - SML Featured Content Slider; tutorial will soon be posted in the upcoming weeks), I received an email which said "Google Analytics Benchmarking Newsletter". I guess this is the first time that the Analytics team sent me an email. The screen shot of the email is shown in the link below.

SCREEN SHOT OF THE ANALYTICS NEWSLETTER

The screen shot says it all! If you find it difficult to understand, well, I'll just run through a short explanation about the five sections of the email which you may or may not have received.

1st Section - Introduction : This section is basically an introduction about the "Benchmarking Newsletter". It tells you why you received this email and what actually is present in the email (Comparison of metrics  between "November 2009 - Febrauary 2010" and "November 2010 - February 2011"). If you did not receive one, then you need to enable "Anonymous data sharing" for your Analytics Account.

2nd Section - Site Metrics : This section shows a comparison about the "Pages/visit, Average time on site and the bounce rate" for the period under observation (Nov 2010 - Feb 2011). A geographical based comparison about the statistics for your website is explained in the rest of the section. To know more about bounce rate, I recommend you to read the following article - How To Reduce Your Blog's Bounce Rate?

3rd Section - Traffic Sources : This section displays a table of comparison about the sources of traffic to our blog. It just displays the very basic details in the comparison - "Direct Traffic, Referral Traffic, Search Engine Traffic (the one to look out for) and other miscellaneous sources".

4th Section - Operating Systems : This deals with the operating systems that the user used over the period of comparison to visit your website. In my case, more than 3/4th of the users used Windows. I would be happy to see a comparison about the web browsers used to access my website rather than the OS details. What do you think?

5th Section - Comments : This section just deals with the feedback that you may send to the Analytics Team about the newsletter. You may send your opinions to the Team at the following email address -  analytics-benchmarking@google.com. 

Basically, the comparison is displayed in such a manner that even a newbie can easily understand about his/her stats. Well, to conclude, I feel this newsletter actually provides an overview about our stats rather than detailed insights to let us know whether we are on the right path to success. So, share your opinions about the the newsletter with us via comments!

Click4more... 9 Comments

Add Fancy Share Icons To Every Blogger Post

I'm sure everyone runs a social bookmarking widget on their blog. What if we add a little more interactivity & unique style to those icons. This is exactly what we're gonna do in this article! We plan to turn an unordered list of sharing icons into a fancy share box using little CSS & Jquery. The idea is to show the icons partially hidden. When hovered, they slide to the right & become completely visible.

FANCY SHARE ICONS USING CSS & JQUERY - LIVE DEMO

Well, I guess that the demo has impressed you. Before I proceed with the tutorial, I would like to inform you that this particular widget is browser compatible - works on all major browsers. The code was tested on the following major browsers - Firefox 3+, IE 6+, Safari, Chrome & Opera). Enough of the stories! Let's get this installed on our blog.

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, expand your template and search for the following piece of code.

<div class='post-footer-line post-footer-line-1'/>

2. Download the following text document - FANCY SHARE ICONS FOR BLOGGER. Paste the code mentioned in the text document just below the line mentioned at step 1.
3. Next, search for the following piece of code.

]]></b:skin>

4. Replace the above code with  following piece of code.

ul.sharebox { margin:0px; padding:0px; list-style:none; position:relative;}
ul.sharebox li { float:left; margin:0 0 0 0px; padding:0px; position:absolute; }
ul.sharebox li a { margin:0 0 0 -24px; display:block; }
ul.sharebox li a:hover { margin:0 0 0 -8px; }
ul.sharebox li img { border:none;}
]]></b:skin>
<script>
$(document).ready(function(){
var i = 10;
var j = 0;
$("ul#sharebox li").each(function() {
$(this).css("z-index", i)
if (j > 0)
$(this).css("left", j * 24 + 100 + "px");
i = i - 1;
j = j + 1;
});
});
</script>

7. That's it. Save your template.

Note: The effect is visible only on the post page, in other words, you need to visit the individual pages on your blog to realize the effect. If you want them to appear on all the pages, then just remove the first and the last line of the coding mentioned at step 2.

I hope you enjoyed this widget. If you wish to add a specific icon apart from the list mentioned in the article, please contact me via email with the icon and your template. We'll try to add them for you provided your template has already got this widget installed! Share your views via comments!

Click4more... 2 Comments