Making Rounded Corners With CSS3 On Blogger

Few people kept mailing me regarding the rounded corners in blogger/blogspot blogs. They wanted to show rounded corners rather than the straight edges. Since the number of mails kept increasing regarding this tutorial, I thought to make a post about them. Pretty good example to illustrate this would be consider the following boxes. Just look at the corner sections of each box.

CSS ROUNDED CORNERS EXAMPLE

CSS STRAIGHT CORNERS EXAMPLE

The former looks curved while the latter is flat. That's the trick we are going to learn in this post, that is, to add rounded corners on blogger/blogspot blogs. You may use them in displaying a note(like I do) or may be on the navigation bars or to display HTML codes withing blogger posts and so on. So, you may use them where ever you want. Remember that, this trick will  be visible only in the latest versions of Mozilla Firefox, Chrome, Safari and Opera and not in IE. Check out the browser specific attributes table below.

Enough of the stories!!! Let's implement this trick on our blogs now!!! Just, follow these simple steps.

1. Login to your dashboard. Navigate to "Layout>>Edit HTML" from your dashboard. Make a back up of your template before you do any changes in the template. 

2. Search for the following code in your blog. You may use "CTRL+F" to fasten your search results.

]]></b:skin>

3. Now, paste the corresponding piece of code just above the line you searched in step 2. Paste according to your choice; not all of them.

EXAMPLE 1 - THIS BOX WAS IMPLEMENTED USING THE FOLLOWING CODE.

.example1 {
background-color:#F1F1F1;
border:3px solid #DDD;
text-align:left;
width: 525px;
margin:15px 35px 15px 15px;
padding:5px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

EXAMPLE 2 - THIS BOX WAS IMPLEMENTED USING THE FOLLOWING CODE.

.example2 {
background-color:#F1F1F1;
border:3px solid #DDD;
text-align:left;
width: 525px;
margin:15px 35px 15px 15px;
padding:5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

EXAMPLE 3 - THIS BOX WAS IMPLEMENTED USING THE FOLLOWING CODE.

.example3 {
background-color:#F1F1F1;
border:3px solid #DDD;
text-align:left;
width: 525px;
margin:15px 35px 15px 15px;
padding:5px;
-webkit-border-radius: 36px 12px;
-moz-border-radius: 36px 12px;
border-radius: 36px 12px;
}

EXAMPLE 4 - THIS BOX WAS IMPLEMENTED USING THE FOLLOWING CODE.

.example4 {
background-color:#F1F1F1;
border:3px solid #DDD;
text-align:left;
width: 525px;
margin:15px 35px 15px 15px;
padding:5px;
-webkit-border-top-left-radius: 30px;
-webkit-border-top-right-radius: 30px;
-moz-border-radius-topleft: 30px;
-moz-border-radius-topright: 30px;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
}

4. Once you have pasted the code. Save the template. Now, your ready to display them in the place you want. Just use a span or div tag to use the CSS3 of your choice. That is, paste the following code any where in the template area or as a HTML/JavaScript using "Add A Gadget" option on blogger design page or within your posts.

<div class="example1">PLACE YOUR CONTENT HERE</div>

5. Now, save your code. That's it!!!

Instead of adding pictures for rounded corners, if you make use of CSS, the time to load your site will be reduced enourmously. That's the biggest advantage with this trick. You might consider reading the following articles for speeding up your blogger/blogspot blog - Article 1 : Speed Up Your Blogger Blog, Article 2 : Speed Up Your Blogspot Blog, Article 3:  Tips And Tools For Speeding Up Your Blog. Express your views about this post via comments!!!

Click4more... 21 Comments

Floating Subscribe Buttons To Blogger/Blogspot Blogs

Recently, one of my readers asked for a widget that will display the subscribe icons fixed on his blog, that is, he wanted to display the subscribe icons static as the page is scrolled to the top or to the bottom. It's pretty simple to add this widget on your blogger or blogspot blog. Just have a look at the final preview of the widget for better understanding.

I hope you are excited about the widget. Create a back up of your template before you modify your template. To do this, navigate to "Design->Edit HTML" and make a backup of your template by clicking on the "Download full template" link at the top. Once the back up is over, follow these steps carefully.

1. Search for the following of code in your template. Use "CTRL+F" to fasten your search results. 

<div id='main-wrapper'>

2. Paste the following piece of code just below the line you searched in step 1.

<div style='position: fixed; bottom: 1%; left: 1%;'>
<table border="0"><tr><td>
<a href="http://feeds.feedburner.com/YOURFEEDNAME" target="_blank"><img alt="Rss Feed Options" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiznYCN1hwH_8fJ4pIr8mOBZfEHQiMCi1ivp7AwXwdrlvJyqQBhTPbqxLTGWxmc1XcVmhPumIL8wP7mbDBN6YUuXV1FQouR3f1bv2pTohLfiBmBN7hHV4KMcRMcmSGj6jW42l4NlXvMx-w/s800/RSS%20Tab.gif" /></a>
</td><td>
<a href='http://feedburner.google.com/fb/a/mailverify?uri=YOURFEEDNAME&loc=en_us' target="_blank"><img alt="Subscribe Via Email Rss" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirVgvGKVFzycmfYtOs-nW7D-2Oi5-UIKoyqgyfxkjBuGvvqzAWgE4tyQVdopvBHMssJtD-tMglhGRH-RxrGy2bLw4MvIlWXelrO62iM1UB_ErFVPEvVbB-uqrY6vDDSF5DibTWYJW-3iM/s800/Email%20RSS%20Tab.gif" /></a>
</td></tr><tr><td>
<a href='YOUR FACEBOOK PROFILE URL' target="_blank"><img alt="Find Us On Facebook" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilmaKy0TsaNUdFIbccP4fSZUrrbDq3WPWyobd3VKrPUSk_jjd9VC_DXRTBEdvvwgjXZZzPOqH6LHH0yRm5vEXbAKNxCq0CbDZ2eWFLme2YsdgdGYYnq5x0Wi1cN18rWx69QXqV5LAbmoY/s800/Facebook%20Fan%20Tab.gif" /></a>
</td><td>
<a href='http://twitter.com/YOUR TWITTER USERNAME' target="_blank"><img alt="Follow Us On Twitter" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu1ZSD2kv8HEJzVl4kwJ01xcUxX76l__LsRMZoTwcTaG1FTFBdMMd1G6qVf4MvepFFBKkaJAEYVhOrZsbRa6ZgI5Vktu2JNV2iBSBrNQtC30OGOP8qfFJvNcg1PkHzOqnzH-E0CjOdqrc/s800/Twitter%20Follow%20Tab.gif" /></a>
</td></tr></table>
</div>

Note: You may add the above code as "Page Element" too. Just navigate to "Design->Page Elements->Add A Gadget" from blogger dashboard and choose "HTML/JavaScript" and paste the code in the window that appears and save it.

3. That's it!!! Save your template!!!

CUSTOMIZATION:

Once you add the above code, you need to make the first four changes in the code (those highlighted in green). First, change the text "YOURFEEDNAME" to the feed name of your blog. You can find this when you login to your FeedBurner Account. Next, replace "YOUR FACEBOOK PROFILE URL" with the URL of your Facebook fan page. Last but not the least, replace "YOUR TWITTER USERNAME" with the user name of your twitter profile. Make sure you save these changes!!!

I hope you like this widget. You may express your views about this widget and if you need some widget of your choice, please do post them via comments and I will try to figure out the code for them. We always love to hear from you!!!

Click4more... 5 Comments

Infolinks Review - Make Money With Infolinks

Hi friends, it's been quite long since I made a post about making money online. Though many people would be familiar with Infolinks, I just wanted to share my experience with them. To start off, you first should know what is a text link advertising? Basically, text link advertising means to advertise using the text in our blog, that is, advertiser chooses a keyword for his advertising campaign. When that keyword matches with the content on your blog, they get displayed.

HOW DO I EARN MONEY WITH INFOLINKS???

It's very simple. As I said, when the keywords match, the advertisement gets displayed. When people click on these ads, you earn for every click they make. It's pretty simple to understand. To display the ads on your blog, you need to add a small piece of code on your blog. It's very simple. Once you sign up with them, you will be asked to verify your email address. After you complete the initial setup, login to the dashboard and navigate to "Integration Guide". 

Copy the code present on the "1-minute Integration" page. Now, navigate to your "Blogger Dashboard>> Design>> Edit HTML". Search for the </body> tag in your template. Paste the code "Infolinks code" on just above the </body> tag. Basically, you can paste the code any where in between the body tags but,  I prefer placing them at the bottom because scripts placed at the end will load our site faster. Meaning to say that people will see the content first and later the ads which is the right way to optimize your site. For more details on loading your page faster on blogger, you may refer to the following articles : Article 1 - How To Speed Up Your Blogger/Blogspot Blog?, Article 2 - How To Speed Up Your Blogger/Blogspot Blog?, Article 3 - Speed Up Your Blog - Tips And Tools
 

CUSTOMIZATION:

Infolinks offer the 4 customizations namely, the ability to change the color, style of underline (dotted or double underlined), set the maximum number of links per page, category which best suits your blog. It is pretty easy to customize. Just login to your Infolinks Dashboard and navigate to "Integration Guide>>Advanced Integration Wizard". Once you reach this page, it's going to be self explanatory. 

PROS:

One main advantage with Infolinks is that you can happily run the Infolinks ad with the Google Adsense. I guarantee you that there will be no PR ban nor the cancellation of Adsense account. The other advantage would be the newly introduced related tags. You may place them below every post or below the title of your post or below the navigation bar to increase your earnings by more than 30%.

CONS:

One main drawback with Infolinks is that they don't match exactly with the content of our blog rather they match with the normal words in our blog. To illustrate this, consider the following example. I found the word "matching" that displays a link to "shaadi.com", which is completely not in match with my blog's content. This is the only drawback which I found about Infolinks.

If you know more about Infolinks, please share your view via comments. Comments are always appreciated and we always love to hear from you!!!

Click4more... 35 Comments

Common SEO Mistakes That You Should Avoid

Over the past few months, we see that there are hundreds and thousands of new bloggers evolving on the blogosphere. However, over a prolonged period, only few sustain. Why does this happen? Where do people go wrong? One simple reason could be an improper Search Engine Optimization. Rather than aiding SEO, people with or without their knowledge make the situation worse. I have enlisted few commonly made SEO mistakes that one should avoid.

CHOOSING UNRELATED URL OR TITLE
This is the most commonly made mistake by many newbies. They buy a domain name or choose one from the available blogspot domains keeping in mind to right some content say about "Making Money Online", "About Blogging" or some other stuff. But over a period of time, as they run out of content/topics, they tend to change their track and write a content which is completely not related to their title/URL. This happened to one of my fellow blogger and do you know the final result??? His blog was blacklisted on Google!!!

NEGLECTING ON-SITE SEO
There is a lot of buzz when it comes to ON-SITE SEO and OFF-SITE SEO.  The basic reason being the difficulty in understanding the two SEO's. Later, comes the problem of optimization. Though I myself have a lot of difficulties in finding the difference between the two, I would suggest you to have the following for your blog - proper TITLE TAGS for your post, INDIVIDUAL META TAGS For Your Post apart from the REGULAR META TAGS, proper links within your site - INTERNAL LINKS, ensuring that images have PROPER ALT TAGS and so on. Note: I don't stress too much on META KEYWORDS tag because, I never experienced any improvement having placed that tag on my blog.

FAILING TO RESEARCH YOUR KEYWORDS
One common fault which I encountered personally from my experience and through repeated search for SEO mistakes was to identify the potential keywords for your blog. I know it becomes a hectic process to identify the exact keywords for your blog. You might consider an SEO expert to do the job for you. If you are a blogspot user like me, the forget this point because we can't do much about it.

However, a person planning to host his/her website should consider doing a keyword research before building his/her website to know, what exactly people are searching for. With the automatic suggestions enabled on Google Toolbar or the search box, it has become a little easy to know what people usually search for in their niche. So, I would suggest you to optimize your site for those suggested keywords on Google.

FAILING TO CREATE A SITEMAP
Sitemaps are the most essential structures when comes to SEO. Every blog should posses a structured sitemap so that the search engine robots can easily distinguish those pages which are already indexed and those which need to be indexed. I will soon publish an article for creating a structured sitemap for blogspot users. However, you need to create a sitemap using Google Webmaster Tools. I assume that many would have done this essential step. If not, do it now!!!

I know many people who indexed their pages would have used "atom.xml" when they created a sitemap for their blog. Doing so will index only a maximum of 25 URLs. Use the text "atom.xml?redirect=false&start-index=1&max-results=100" to get 100 posts indexed on your blog. You can vary the number as you want. I don't know how well it works. But, I use both for my blog. You can have a look at the screen shot above to understand this better.

CLICK THE PICTURE TO ENLARGE

Though there are a number of mistakes which we bloggers make, I enlisted only very few of them. However, I will be posting more about this topic in the upcoming weeks. If you know more about this stuff and you wish to share with us, you can consider writing a guest post on our blog - Guest Posting Guidelines, or just leave a comment below. We would love to hear from you!!!

Click4more... 11 Comments

Ultimate Blogging Theme For Blogger - It's Free Now!!!

Hi friends!!! I'm happy to announce that this is the 100th post on my blog "Everything About Blogging". I want to celebrate this little joy by sharing 'The $147 WP Theme - Ultimate Blogging Theme" for blogger with my readers. If you are a WP user, then I'm very sorry to tell you that the theme is not available for free. There's no other go!!! You need to download the theme for $147 from Carl Ocab's website. Anyway, blogspot users can download this template for free!!!

Take a look at the above screen shot to preview the template. Excited about the template? Not convinced??? Then, check out the features of this template by clicking the link below.

FEATURES OF ULTIMATE BLOGGING THEME FOR BLOGGER

Still not satisfied??? May be you are tough-skinned person. Then, check out the LIVE DEMO by clicking the link below.

LIVE DEMO OF ULTIMATE BLOGGING THEME FOR BLOGGER

I hope you are convinced with the template. Apart the features you read about this template here - Features Of Ultimate Blogging Theme For Blogger, I included the basic version of newer post and older posts link below every post page. I plan to include the WordPress style comments for blogger on this template as well. The features will be updated as and when I fix them.

I have a small request to people who use this template - "Please, don't remove the credits section on this template. You may modify them as you want. Please, leave at least one link pointing to my site". Moreover, I'm happy to announce that my previous release namely, "MY WORLD BLOGGER TEMPLATE" has gained a lot of reputation around the blogosphere. I found it accepted on 'BloggerStyles' and 'btheme.info'. It's been used by "Best Blogger Templates" and the list goes on.

I don't want to waste too much of your time. So, click the link  below to download the Ultimate Blogging Theme For Blogger and have a blast!!!!

DOWNLOAD ULTIMATE BLOGGING THEME FOR FREE NOW

Note: Step by Step customization for the above template will be posted in the upcoming weeks. It's better you subscribe to my blog, so that you don't miss the updates regarding this template. Any way, I would love to hear your feedback about this template. Let me know what more features you want on this template. I will try to add them as well!!! So, feel free to leave your comments.

Click4more... 27 Comments

15 Excellent Free Social Bookmarking Icons

Social media has revolutionized the world of blogging. With more than hundreds of thousands of Twitter users and Facebook users, we can truly say that, we are currently in the social media age. It is very important that you connect yourself with the social media to make the best out of your blog. Displaying unique and eye catching icons play a vital role in increasing the number of visitors to connect with you on the social networking sites. So, I have compiled a small list of the attractive icons in this post. Just have a look at them!!!

ICONS SET 01 - CLICK HERE TO DOWNLOAD THE ABOVE SET

ICONS SET 02 - CLICK HERE TO DOWNLOAD THE ABOVE SET

ICONS SET 03 - CLICK HERE TO DOWNLOAD THE ABOVE SET

ICONS SET 04 - CLICK HERE TO DOWNLOAD THE ABOVE SET

ICONS SET 05 - CLICK HERE TO DOWNLOAD THE ABOVE SET

ICONS SET 06 - CLICK HERE TO DOWNLOAD THE ABOVE SET

ICONS SET 07 - CLICK HERE TO DOWNLOAD THE ABOVE SET

ICONS SET 08 - CLICK HERE TO DOWNLOAD THE ABOVE SET

ICONS SET 09 - CLICK HERE TO DOWNLOAD THE ABOVE SET

ICONS SET 10 - CLICK HERE TO DOWNLOAD THE ABOVE SET

ICONS SET 11 - CLICK HERE TO DOWNLOAD THE ABOVE SET

ICONS SET 12 - CLICK HERE TO DOWNLOAD THE ABOVE SET

ICONS SET 13 - CLICK HERE TO DOWNLOAD THE ABOVE SET

ICONS SET 14 - CLICK HERE TO DOWNLOAD THE ABOVE SET

ICONS SET 15 - CLICK HERE TO DOWNLOAD THE ABOVE SET

I hope you found some interesting icons in the above list. If you did not find one of your kind, then please do wait for few more days. I will publish another set of icons in the upcoming weeks. Subscribe to my blog, so that you don't miss the updates!!!

Click4more... 5 Comments