Animated Bubble Buttons Using CSS3 On Blogger

I'm sure my last tutorial about "Text with Moving Backgrounds" was quite complex. It would have been very difficult for the newbies to get hold of. So, I thought I should come up with a simple, yet stunning design tutorial that even the newbies can enjoy about. Well, that idea drove to me to present you this tutorial about "Animated Bubble Buttons Using CSS3". Take a look at the demo below.

LIVE DEMO LIVE DEMO LIVE DEMO

Hit any of the buttons above to check the other styles as well. I think, I need not explain more about the effect that you'll be able to achieve on completing this tutorial. It's pretty clear from the demo button / link above. I wish to let you know that these effects are visible only on browsers that support CSS3. However, we've incorporated a fall back color with the bubble effect for browsers that do not support CSS3 thereby, preventing your design from causing various layout issues.

Enough of stories I guess! So, let me start with the tutorial. I'll split the tutorial into 2 parts - HTML and CSS. The HTML involved behind these buttons are very simple. You need to add a corresponding class (based on the size and the color of button) to the anchor tag. Just use the following tags anywhere in your template - anywhere between your body tags.

HTML FOR LARGE SIZED BUTTONS (USE ANYONE BASED ON COLOR)

<a class="button big blue" href="LINK">LINKNAME</a>
<a class="button big green" href="LINK">LINKNAME</a>
<a class="button big orange" href="LINK">LINKNAME</a>
<a class="button big gray" href="LINK">LINKNAME</a>

HTML FOR MEDIUM SIZED BUTTONS (USE ANYONE BASED ON COLOR)

<a class="button blue medium" href="LINK">LINKNAME</a>
<a class="button green medium" href="LINK">LINKNAME</a>
<a class="button orange medium" href="LINK">LINKNAME</a>
<a class="button gray medium" href="LINK">LINKNAME</a>

HTML FOR SMALL SIZED BUTTONS (USE ANYONE BASED ON COLOR)

<a class="button small blue" href="LINK">LINKNAME</a>
<a class="button small green" href="LINK">LINKNAME</a>
<a class="button small orange" href="LINK">LINKNAME</a>
<a class="button small gray" href="LINK">LINKNAME</a>

Note: Replace LINK with the link you wish to point to. Similarly, LINKNAME with the name/title of your link.

The CSS involved behind these buttons are pretty complex. I don't want to explain in detail about the same and confuse you - especially, if you are a newbie. So, just download this file -  CSS FOR ANIMATED BUBBLE BUTTONS, and paste the code present in it just above/before skin in your blogger template and save your template. That's it!

Well, if your a CSS geek, then you may tweak the CSS mentioned in the text doc above to add further effects. The content mentioned in the text document involves the CSS for all types of buttons - be it any size or color. If you are one, who is obsessed with reducing the load time of your site (like me), then define the CSS only for those buttons you intend to use. For further assistance or suggestions about this article, leave a comment below.
Design Inspiration - Tutorialzine.

Click4more... 30 Comments

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.

TEXT WITH MOVING BACKGROUND ON BLOGGER - LIVE DEMO

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.

USING PHOTOSHOP TO CREATE THE MASK

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.

HTML

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>
</div>

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.

CSS

1. Search for the following code in your template.

]]></b:skin>

2. Paste the following piece of code just above the line mentioned in step 1.

.scrollBg {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyabrkBnmLA5Ib-D1_5HEaTYP1uQp91vwYF5ftEaorX594wYfI7kF8bDVp9ZFAwO5a2Nl9Y25tzeWfL3IvFyxSR4o9OzMQW4V0Mc3t3XB7AMlHsu4B5d4o9Y5Bxo2HAoIVQ6gNU5jvctSx/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.

JAVASCRIPT/JQUERY

1. Search for the following code in your template.

</head>

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.

Click4more... 7 Comments

Tips To Reduce Your Blog Bounce Rate

Every blog that exists on the blogosphere, has some motive behind it. Some bloggers may want to share their ideas with the world, some just want a medium to write, and few write on a mission to help others with their own experience. However, there's one thing common between the blogs i.e. to attract as many as visitors to the blog.

To increase the number of followers who come and read what you have written. One should keep track of the blog’s visitors which gives you an idea of how many people are visiting your blog per day or in a month. This will also give you an insight on the traffic which is bouncing off i.e. the bounce rate of the blog.

For that, we need to know what exactly this Bounce Rate means? Everyday some new visitors come to the blog, some come through search engines and some come through links or references. However some or most of the visitors leave your blog as they land on it. They leave your blog by simply closing it down or by hitting the back button.

What can be the reasons for it?

1. The content is not relevant to the search term that brought them to your blog.


2. The information provided on the site is not that useful.


3. The site is not appealing enough to grab the attention of the visitor.


4. The load time of the site is very slow.

HOW TO TRACK THE BOUNCE RATE

One can track the blog’s bounce rate by signing up for Google Analytics. They will provide you with the tracking code which you need to add to all the blog pages. This will provide you with all the tracking data in your analytics account dashboard.

The formula used for calculating Bounce Rate is

Bounce Rate = Total single page view visits / Total number of visits.

So, what do you do to reduce the bounce rate i.e. the number of people leaving the blog. Try some tips and tricks to make your blog more practical and useful to the visitors. Improve the blog quality to persuade people to spend time on your blog. Each and every single visitor is important and valuable for your blog and your blogging business. Mentioned below are few tips, which might be useful to make your blog effective and valuable for your visitors.

KEEP IT SIMPLE

Keep your blog post content simple and use apt and clear titles for them. Provide the information in most simple way. Support it with auxiliary images. If the visitor gets what they want in first glance, then there is less chance of them bouncing out.

MAKE YOUR BLOG USER FRIENDLY

Make the navigation system of your blog simple. The design should be easy and user friendly so that users can find what they want in two to three clicks. This will make it easier for the visitors to get what they are searching for; that is all they really want, so chances are they will come back the next time too.

FOCUS ON YOUR BLOG USP

Highlight your popular post which can help you to target those repeat visitors as well as target the new ones. Try to focus on the topics which have exhibited a good response in the past.

ANALYZE THE DATA

Analyze the Google analytics data of your blog, study the behavior of the visitors i.e. know which page they are visiting the most. Study which page has the highest bounce rate. On analyzing the data, you'll probably be able to understand which keyword has brought the maximum visitors to your blog.

GIVE MORE THAN WHAT THEY ASK FOR

Provide complete information about the topic that you are discussing in your article. If you don’t offer an option for your readers to look for more, they will most probably leave your site.

USE PROPER CATEGORIES FOR YOUR BLOG POST

Using categories in your blog, gives your visitor a sort of menu to your blog. It becomes easy for them to choose the category they most desire and probably read articles that are of their interest than just hopping around your blog for no use.

USE HIGHEST QUALITY CONTENT

Content is what makes a blog good or bad. There is nothing more important than quality content in a blog which makes a visitor interested in your blog. Always come up with creative ideas to share with your readers. Be unique and useful. Don’t try to be just “different” in your niche. Make your niche by providing quality content.

SPEED UP YOUR BLOG

Keep the technical stuff up to date. Use the latest technology in your blog. Everyone is busy in their life, so no one has the time to wait for the blog to load. Keep the loading time some where between 5 to 10 seconds at the max. Your page should load in fractions of seconds. Make sure your blog code is clean and clutter free. I recommend you to read the following articles to speed up your blog - Speed Up Your Blog : Tips And Tools.

So, use these tips to improve your blog’s bounce rate. If you have something to add to the list, then share it via comment. You might be interested to read the following articles as well - How To Reduce Your Blog's Bounce Rate?

Click4more... 10 Comments

Add An Animated Tabbed Widget To Blogger

Well, we've seen so many blogs come up with tabbed widgets for blogger. What if we add some simple animations to such widgets using Jquery. Will it not make the widget and blog, more attractive and unique? I feel it should. So, in this article, I'll teach you about adding one such animated widget with ease on blogger. Take a look at the demo using the link below and we'll get started.

ANIMATED TABBED WIDGET FOR BLOGGER - LIVE DEMO

Pretty interesting, isn't it? Well, let's dive into the tutorial straight away. I'll split the article into three parts - HTML, CSS and JavaScript so that you can rather take a break as and when you need, than working out the complete tutorial at a stretch. Well, so follow these steps to get the animated tab working on your blog.

CSS
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. Save your template.

.tabbed_content {
background-color: #000000;
width: 620px;
}
.tabs {
height: 62px;
position: relative;
}
.tabs .moving_bg {
padding: 15px;
background-color:#7F822A;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-u30qJqRpR_FMgxyjvDCq6jcyqZS2doWEP-e3Yh_fUNyItLUzmY67qKGJwmodq1OWQ4LXuhT-txM9t_ddVA_1rU2J2XFh7o7L7iiTds8qJTrkU99y4sz9UlGxhi59RLEC2LHIflJGPSps/s800/arrow_down_green.gif);
position: absolute;
width: 125px;
z-index: 190;
left: 0;
padding: 25px 15px;
background-position: bottom left;
background-repeat: no-repeat;
}
.tabs .tab_item {
display: block;
float: left;
padding: 15px;
width: 125px;
color: #ffffff;
text-align: center;
z-index: 200;
position: relative;
cursor: pointer;
}
.tabbed_content .slide_content {
overflow: hidden;
background-color: #000000;
padding: 10px 0 10px 20px;
position: relative;
width: 600px;
}
.tabslider {
width: 5000px;
}
.tabslider ul {
float: left;
width: 560px;
margin: 0px;
padding: 0px;
margin-right: 40px;
list-style-type:none;
}
.tabslider ul a {
color: #ffffff;
text-decoration: none;
}
.tabslider ul a:hover {
color: #aaaaaa;
}
.tabslider ul li {
padding-bottom: 7px;
}

Possible customizations include changing the list-style for the elements, background color, text color and the spacings. Please note that, I've used an image for the arrow mark. So, if you change the background color, ensure that the image showing arrow mark is also changed to match with that of the background.

HTML
1. Search for the following piece of code in your template.

<b:section class='main' id='main' showaddelement='no'>

2. Paste the following block of code just above the line mentioned in step 1.

<div class='tabbed_content'>
<div class='tabs'>
<div class='moving_bg' style='left: 155px;'/>
<span class='tab_item'>TAB TITLE</span>
<span class='tab_item'>TAB TITLE</span>
<span class='tab_item'>TAB TITLE</span>
<span class='tab_item'>TAB TITLE</span>
</div>               
<div class='slide_content'>                       
<div class='tabslider' style='margin-left: -600px;'>
<ul>
<li><a href='#'>LINK NAME</a></li>
<li><a href='#'>LINK NAME</a></li>
<li><a href='#'>LINK NAME</a></li>
<li><a href='#'>LINK NAME</a></li>
<li><a href='#'>LINK NAME</a></li>
</ul>

<ul>
<li><a href='#'>LINK NAME</a></li>
<li><a href='#'>LINK NAME</a></li>
<li><a href='#'>LINK NAME</a></li>
<li><a href='#'>LINK NAME</a></li>
<li><a href='#'>LINK NAME</a></li>
</ul>

<ul>
<li><a href='#'>LINK NAME</a></li>
<li><a href='#'>LINK NAME</a></li>
<li><a href='#'>LINK NAME</a></li>
<li><a href='#'>LINK NAME</a></li>
<li><a href='#'>LINK NAME</a></li>
</ul>

<ul>
<li><a href='#'>LINK NAME</a></li>
<li><a href='#'>LINK NAME</a></li>
<li><a href='#'>LINK NAME</a></li>
<li><a href='#'>LINK NAME</a></li>
<li><a href='#'>LINK NAME</a></li>
</ul>
</div>
<br style='clear: both;'/>
</div>
</div>

3. Replace # at every instance with the links you wish to point to. Similarly, replace LINK NAME  at every instance with the name of your links - probably post titles. Don't forget to replace TAB TITLE with the your title for the tabs. Save your template temporarily before we add the final jquery magic.
You can add the HTML codes anywhere in your template - not necessary that you add it above the line mentioned in step 1. But, when you place them elsewhere, you need to adjust the width of the widget correspondingly in the CSS part to fit your layout.

JAVASCRIPT/JQUERY
1. Search for the following piece of code in your template.

</head>

2. Paste the following piece of code in the text document - SCRIPT FOR ANIMATED TABBED WIDGET, just above the line mentioned in step 1.
Note: You need not include the first line in the script mentioned above (the one in the text document), provided you already have the latest jquery file running on your blog.
3. Save your template and check out the animated tab running on your blog.

I've tested the above widget to work fine on all the major browsers which include, but not limited to, IE, FF, Chrome, Opera and Safari. If you need assistance in adding the same, then leave a comment below and get it clarified. Do share your opinions about the article via comments.

Click4more... 14 Comments

Google Sitelinks Updated - An Improved Version

Google has constantly been rolling out some prominent changes via updates on PR, Google+ Games, Authorship Markups, etc... Today, I noticed one such update which is about, the way in which the sitelinks show up on Google search. If you wonder what sitelinks are, they are basically links from your blog that appear below your domain name which Google feels useful to the reader - usually appears when a person searches for your domain name.

Earlier, Google used to display eight sitelinks - just links. But, now it's completely different. The recent update shows 12 sitelinks with a small snippet about your articles - not a snippet, probably the first phrase from your article. You may check out the screen shot below to better understand about the way in which the new sitelinks are displayed - sitelinks generated for "newbloggingtipz" on 19th August.

Since sitelinks are auto generated by Google with their special algorithms specifically written for the same, no one can actually tell you about getting sitelinks for your blog. However, I recommend you to read the following article which might probably fetch you one - How To Get Google Sitelinks For Your Blog? I also recommend you to install breadcrumbs for better results - Add Breadcrumb Navigation To Blogger.

Now, what if your unhappy with a link that appears below your domain name and you wish to remove the same. Very Simple! Login to your "Webmaster Tools" account and navigate to "Site Configuration>>Sitelinks" from your dashboard. Now, paste the URL you wish to remove and hit the "Demote" tab. That's it! Your done. 

You'll not see that link from the next day - takes time to process your request. As such, you can demote upto 100 URLs and they are effective only for 90 days which means they might pop up again after a period of 90 days. So, you need to demote them every 90 days. You can read more about this topic here - Sitelinks.

Let me know if you made use of the demote/deletion tool to display better links to your readers? And do share your knowledge about Sitelinks with us via comments...

Click4more... 17 Comments

The Hazards and Rewards of Hiring a SEO Firm

Optimizing your blog or website for search engine results can be an impossible task if you don't know where to begin. Days, weeks, months, and eventually years go by as no new unique visitors view your page because your site isn't search-able, and your melancholy only increases with your feelings of helplessness.

But, for those bloggers or online business entrepreneurs who don't have the time or confidence to research and execute search engine optimization (SEO) measures: there is hope! Many users opt to hire optimizers to increase the visibility of their sites so they themselves don't have to wrangle with that challenge. 

There are, however, a few guidelines you should follow if you are considering hiring a SEO firm, to protect the quality of your site and its reputation, even for experienced bloggers.

DO YOUR RESEARCH

When searching for a SEO firm, investigate it's potential thoroughly, and avoid ones that make outrageous claims about guaranteeing a top ranking for your website, or others that offer their services to you unsolicited. As a useful and beneficial as an honest, credible SEO can be to your site, a dishonest or belligerent firm can hurt your website's image, and even remove your site from a search engine's index.

Do everything you can to examine a firm's practices, especially concerning what exactly you are paying them for. Some SEO firms prey on uninformed clients and have various misleading and outright devious ways to fool you into hiring them. Try to uncover:

• Shadow domains — affiliated websites created by SEO firms that redirect traffic from your website to theirs. Owning the rights to the site, the SEO may choose to sell the shadow domain to another website owner, effectively using your money to help advertise someone else's site.


• Doorway pages with links to other clients. Practices such as ranking guarantees, address bar keyword sales, and placing links to your page in the advertising rather than the search results section of a page.

ASK QUESTIONS

Never be satisfied with the information an SEO representative gives you. Delve deeper into the firm and don't commit until you are absolutely certain that it can deliver the results it claims to. Try to obtain the following information from any prospective SEO firm you are considering:

• A list of clients the firm has worked with in the past, and a few samples of their work.


• The extent of the firm's experience in your industry and area.


• Whether the firm provides any additional services outside of SEO, such as strategies or consultations.


• The level of communication you can expect from the firm while working together.

KNOW THE PROS AND CONS

So far, this has been a primarily cautionary guide to SEOs; there are many benefits, though, to hire a SEO expert that match the risks, if not outweigh them. A good SEO can train website owners how to continue to optimize their site's search results, assist in developing site content and managing development campaigns, offer critiques and expert opinions that can help improve the structure of your site, and much more.

The key is to find a quality SEO firm that is dedicated to improving your site, not to siphoning money from you. Once you find the right firm, your site views could increase immensely, and faster than you can click your mouse.

Click4more... 1 Comment