Add a Paypal donate button in Blogspot blog 2012

Paypal has now become the biggest way of receiving and sending money online, Paypal provides a wide variety of tools to help you earn more and one is the donation button, you will get to know how to easily add a Paypal donate gadget in Blogger.
If you are running a non profit organization or just a blog then you might want to add a donation button to increase your income and get donations from people without messaging each and every single person. Paypal donation buttons can be very helpful as i said that you can just put up it on your blog and website and any person that likes your blog or work can donate you for your work to keep on.
Demo : You can see on the right sidebar.
The reason i have put 2012 in the title is that there are many tutorials online about adding a Paypal button but they don't work now and many people don't get a proper answer about adding the feature on their blog or website.

Adding the donation feature

The adding process is as easy as copying and pasting, no need of any coding language. Please follow and read each and every step carefully to avoid any misunderstanding.

Setting up your Paypal

Note : If you haven't yet signed up for Paypal then do it here http://paypal.com
We were having difficulties receiving Payments in Personal Paypal account, so you have to make your Paypal account Premier in order to receive donations. Upgrading your account to Premier is absolutely free.
Login to your Paypal account -> On your account dashboard you will see the account type you have, if Personal is mention there, click on it and upgrade to Premier. That's it.

Generate the donation button

In many old tutorials you may have seen that you need to log into your account to get to a page where you can create the buttons, but Paypal interface and system has changed since the way to get a button is also different.
Paypal provides a free tool with which you can create a button, you just need to enter your details, that's not more than your Paypal email id and the organization name you want your donation received as.
Note : I suggest you to log out from Paypal while creating the button.

1. Go to this page and click on 'Create button' link https://www.paypal.com/us/cgi-bin/?cmd=_donate-intro-outside
2. Now when you are on the page with Paypal button creating tool you will see a drop down menu with different options (button type) choose Donations from the drop down.
3. Put your organization name and donation id (it's optional)
4. If you want a more customized button then you can use the customization options, you can put your own image instead of the normal donate button (optional)
5. Choose the currency. If you want a fixed amount to get donated from the donors then you can choose the 'Donors contribute a fixed amount.' and enter the amount.
6. The last and the most important step is to enter the email id for your Paypal
7. Skip Step 2 and 3 there and click on 'Create Button' and you will get the HTML code for your donate button. Copy that code.

Next is to add the code for Paypal donate button into your blog's sidebar.

Add the code in your blog

We are going to simply add the code into the blog by an HTML/JavaScript gadget. To do that go to your Blogger Dashboard -> Layout -> Add a gadget -> Select HTML/JavaScript from the list -> Title the gadget and in contents paste the HTML code you got from the Paypal donation button generator.
Save the gadget and that's it.
Tip : You can add the donation button HTML anywhere applicable, for example inside the posts.
Tip : If you want to add the gadget below your posts then this tutorial[click to open] will help you.

Yeah ! That's it

Wasn't it so simple ? Adding a Paypal donation button could be so easy with a latest tutorial. I will be publishing another tutorial on custom Paypal donate button, subscribe to our feed to get the updates.

Drop your awesome comments to give us a feedback of this post/tutorial, we will be glad to hear from you.

Choosing keywords that will drive more traffic to your blog

Your blog is not doing too well? Or can't decide what to write about on your blog ? Then this SEO tip will surely increase the visibility of your blog in search engine.
It's not easy to get a better position in search results, when writing a post you should always think of the keywords used in the search engines. Although just using the keywords in your blog won't work but calculating the position of your blog in particular search keywords can get you large organic traffic. That simply means you are increasing your revenue either by getting more customer for your products or by the advertising banners you have put on your blog or website.


You will find dozens of SEO tips on the web and most of them don't work now but finding a new and better SEO technique is awesome, just like i did. As a blogger you just don't have to write but also learn how search engine can help you get readers, once you have a good number of loyal readers you can just continue writing but as a beginner it is like writing in the dark and no body sees you, just to put some light you have to take help of the SEO tips you will find online. But always remember to use SEO tricks which is working and done in a legal way, using black hat SEO techniques can harm your stats on the Search engines and you can be removed.


Everything above was an introduction to the SEO and using it, for the SEO tip which i have mention is below.  

Decide what to write on

You can write anything you like on your blog but do you wonder what others on the web are looking for ? You don't need to think about everybody on the web but the people who are searching for a article or post that you can give them. Am not even talking about your current readers or contacts, there's still a large audience on the web to whom you can serve something that they would like to read, but the question is that how you can get to know what others are wanting from you ?

Discover what keywords are best for you

The idea is to first know that for what search keywords your blog is appearing at good positions on the search results pages. You will normally see search keywords related to the content you have on your blog but along with that you will also get position in the search results without having contents related to that keyword.

Use Google webmaster tools for keywords reasearch

I believe Google Webmaster is good tool for keywords research, usually people use it to see what keywords are working for their contents but we will use it to know which keywords will work for our future contents.
Note : If you haven't used Google Webmaster tools then get hands on it now and submit your sitemaps to get your blog indexed into search engine.

If you are already using the webmaster tools then you can see position of your blog for particular keywords. Log into Google Webmaster tools -> Select the site from the list (add a site) -> Traffic -> And click on the Search queries, you will see all the hit search requests for your blog and might also get good positions for search queries for which you don't have any post and that's where you can get better traffic. Analyze the Keywords and see what can help to create contents that can give you some handsome traffic.

You can get traffic for keywords that matches your blog but if you want regular readers try to make a post with complete information and most importantly make it genuine. And follow some more SEO tips for a complete optimization of your blog site.       

Support your country for London 2012 Olympic by your Blog

London 2012 Olympic is obviously trending up on the web and that's the magic of the Olympic games. As a blogger don't you feel like supporting your country by putting up a badge on your website or blog ?

If you are an ultimate lover of the Olympics and support you country to perform well in the games then you can do more to support them, if you are crazy about the London Olympics 2012 then you can run waving your country's flag  but that's just too tiring so if you are on Blogger and want to show love to the sports person of your country then why not put a badge in your blog ?

Badge for your blog

Adding the badge is easy, the badge is a logo of your country and it will link to anything you want, can be a blog post you made to support your country in the London 2012. We actually need just two things, HTML and CSS

Here is a demo for the badge

Demo

The HTML

The first step is to the add the HTML in your blogger template. This is the HTML we will use for the badge

<a class='sprt-country' href='#' target='_blank'>
<h4 class='hsupport'>I Support</h4>
<img src='http://www.printableworldflags.com/icon-flags/48/India.png' title='I am supporting my country for the Olympics'/>
<h4 class='hsupport2'>For the London 2012</h4>
</a>   

You need to make changes on couple of things in this HTML, main change is the flag image url in the <img> tag.

1. Line 1 : If you posted something related to the Olympics games on your blog or just a blog post to support you country then you can put the link in href='' just replace the hash (#) with your blog post URL
2. The <h4> tags contains some text, by default i have put it 'I support' for the first h4 and for the last it is 'For the london 2012', you can change it if you want it in your own language or just want to put your own words. 
3. Line 3 : This is the most important one, as it's your country's logo that will appear in the badge. To change the picture URL, go to this link, find your country name and click on it. You will be taken to a page with different sizes for your country flag picture. Choose the 48*48 and copy the image url by right clicking on it and replace the link in src='' in the line 3 which is an <img> tag 

You have to place your HTML in the template. Go to your Blogger Dashboard -> Template -> Edit HTML -> Proceed -> Find </body> tag in your template and paste the HTML just above/before the </body> tag, that's it. Save the template.

CSS for the badge

To make the badge beautiful and attracting we will use CSS. Here is the style codes for the badge.

.sprt-country {
    position: fixed;
    top: -10px;
    text-decoration:none;
    right: 15px;
    background-color: rgba(255, 255, 255, 0.87);
    text-align: center;
    padding: 12px;
    border: 2px solid #888888;
    width: 100px;
    border-radius: 0px 0px 20px 20px;
    font-family:'georgia';
    color:grey !important;
    text-shadow:1px 1px 1px white;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}
.sprt-country:hover {
    background-color: white;
    text-decoration:none;
    color:black !important;
}

You can add the CSS in via the template designer to do that go to the Blogger Dashboard -> Template -> Click on the Customize button -> Advanced -> Add CSS -> Now paste the CSS in the custom CSS box and hit Apply to Blog. [Click here to know how to add CSS]

Once the CSS is applied on your template you can see the badge in action on the top right corner of your blog. Now your readers will see you as a true lover of your country. 

Liked this tutorial

Did you find this badge useful and a good way to let your readers know about how you support your country in the London 2012 ? Then please share about this post. Drop your valuable comments below and enjoy discussing this post.

6 Reasons to stay on Blogger

Since the launch of WordPress and Blogger, there's war not between the two CMS but between it's users. Those who use Blogger takes the blogger's side and those who use WP stays at it's side. These two CMS have there own pros and cons and you can use any one, this post is just for a reference.
If you are in a forum or group with bloggers using different CMS, you will see them arguing over which is the better blogging platform. I am on Blogger and many blogger in my contact suggest me to join WordPress for many reasons and i won't have any problem switching to it but there are reasons why i don't switch to WordPress now.

If you had ever read an article for starting your blog with WordPress then you will want to join WordPress but there are several reasons you shouldn't join WordPress now and I am listing it below.

Six reasons to start blogging with Blogger

Note : These are my own personal opinion and i am not trying to force you to stay with Blogger.

1. Starting a blog with Blogger is easy

If you are starting a new blog then the most important thing you should always focus on is your writing and if you start blogging with Blogger then you don't have to worry about the anything else than your content.
But if you choose WP to begin a blogging career then you will put yourself into complicated process of setting up your blog and putting it online. Guys like me with web developing skills will find it easy and can setup WordPress blog but if you don't know about hosting files and databases on hosting servers then you can just mess your blog up.

2. Blogger is fully customizable

Blogger is more easy to customize with their template designer and custom CSS. You also have the access to your blog's template and you can edit the HTML source to put more features that any website can have, blogger is just like a normal site. There's not much difference in a Blogger site and a normal site then i don't understand why people using WordPress explains that blogger is not customizable? If you have the right idea then you can make any customization just like an WP blog.
WP is also customizable but if you are using the free version then you can't even add your own CSS whereas Blogger is free with all customization options.

3. Hosting? It's free and on Google

When you will use blogger you won't need to worry about the hosting, your blog's databases are secured on Google's CDN, what can be better than a Google hosted website/blog ? Again, it's all for free and the bandwidth is also unlimited.
Because a blogger blog's databases are hosted on people assumes that the blog is hosted by Google and it can delete your blog anytime ! But people with hosting service are completely safe ? No, your files can also be deleted anytime without any notice from your hosting server.
The owner of the main contents on your blog is you, thus you can download the backup files anytime and if you have a custom domain then you can easily transfer your backup on a new blog without even losing traffic and that's the beauty.

4. Coding knowledge is not necessary 

Let's say you want to start a blog to write about your pet store and you decided to start with WordPress, what you see is complicated procedure, first you have to start a blog, then signup for a hosting service then download and upload  WordPress on your server and then you can start blogging somewhere, this is not just time wasting but also you have to spend lots of money. You will get themes for your blog at rates starting from $40. At every point you will have to face difficulties and even there is a one line mistake on any of your database file on your server your whole website will stop working and you again have to redo it. And it seems impossible if you don't have good knowledge of coding, usually people start blog for their personal use and learning codes for setting up a blog is useless.
On Blogger, just sign up with a Google account, name your blog, choose a web address and a theme and get started. What can be easy as that ? You get everything for free from hosting to templates and you don't even need coding knowledge to design your weblog, just open the template designer in Blogger and give it the look you want..

5. Blogger is not good for SEO?

The sentence i hate the most from anybody, most of those who says this are generally from WordPress and some from Blogger (frustrated bloggers). People believe that WordPress is good for SEO and Blogger is not.Blogger is a Google product and you think Blogger is not good for SEO? Now i don't say that Blogger blogs get a plus point for SEO as for being from Google product but they would neither give Blogger a minus point in terms of SEO.
And why would Google start giving more importance to blog sorting by the CMS used ? Always remember CMS is just 'Content Management System' but the real contents comes from you, so whichever platform you are using don't worry about SEO as it depends on the content you create.      

6. Blogger is for Blogging

Blogger is actually for blogging. WordPress is used for multiple purposes, such as creating e-commerce site etc and that's why the procedure to set up a WP site is difficult because they are optimized for being blog and also a website.
For the blogging i will always choose Blogger, but for my Web Designing projects, Blogger won't work so well. But Blogger is a complete tool for writing and publishing it.  

+1 reason - Blogger blogs are spam free

Do you know why do you hear so many cases of blogger blog's getting deleted or removed ? That's because Google want to keep the Blogosphere clean and just to maintain that a blog that seems to be spam is reviewed and if it is found to be spam and violating the TOS it gets removed.
As far as i know WP don't delete blogs even if it is a spam but wait do you think they can make their way in ? To get a good popularity and most important good traffic they need better rankings on Google and if the blog is found to be spam then it will be removed instantly from Google search results and can be permanently banned.

I don't oppose WordPress

After reading the above stuffs you will call me a WordPress hater but i don't hate WordPress, it's also a great tool and that's why people use it and even i use it for my web designing projects but there are some myths about Blogger in people's mind and this post was written just to tell them that Blogger is not worth using and should be left just for WordPress.

What do you think ?

There are pros and cons of both the CMS i talk about in this blog post and shared my thought as a web designer. Tell us your own opinions for Blogger for Wordpress and also share your thought and experience with any of those CMS, we would like to here from you. 

HTML5: Past, Present and Future Infographic from Dot Com Infoway

HTML5, the newest web standard which is now globally used for a more interactive web.


If you are on the web from more than 3 or 4 years and online game lover then you may have possibly played flash games on your browser which requires Flash player but with HTML5 you don't need any extra plugin to play your game plus it has the ability to store your files locally once you loaded it.
HTML5 is not only for games but also for websites to improve it's user interface.

'Pictures says a 1000 words' but an Infographic says more than that, this Infographic is from Dot Com Infoway.

Hope you enjoy the Infographic. 

Speed up our blog by hosting CSS files externally

Nowadays, blogs and websites are ranked on basis of various factors and page load speed is also one of the factor on which your search rank depends.

If you are on Blogger then the reason you don't get good search results if compared to similar WordPress blogs is because WordPress sites load faster and that's because the CSS for the website is hosted externally.

In blogger templates the CSS styles are always internal and those CSS lines are 100s in number. The simple template in Blogger have more than 20kb of CSS styles inside the document.You maybe thinking how 20kb of CSS can slow down your page, 20kb can be downloaded easily with speed or even slow internet connection but here it's not about your internet connection speed, it is about your page's speed. Every single bytes can decide your rankings on search pages.

The first thing you must check is your current page speed marks, the highest score you can get is 100.

[Click here to check your Page Speed]

If you get less than 90 then you should now host the CSS externally and speed up your site.

Get your CSS codes into a stylesheet file

Note: The first step to out the CSS styles in your template on an external stylesheet file. To do that you have to make changes into your template, so i suggest you to keep a backup of your template for future.

You are now ready to remove the CSS from your template and put it into a CSS file. Follow the instruction below.

Create a CSS file

Before you take out the CSS codes from the template you have to make a stylesheet file. You don't need any special tool to create a .css file. You just need a plain text editor (notepad).

1. Open Notepad, don't type anything 
2. Click on the file menu and click on Save As
3. Locate where you want to Save the file
4. Now name your file with .css at end, in Save As type place select 'All Files' and in Encoding select 'UTF8' that is it. See what it should look like this
   

   

   [Click on Enlarge]

5. Save the file and it will be in a .css format if you did it right

Continue the next section to learn how to take out all the CSS in your blogger template and then put it into the stylesheet file

Move style code from template to stylesheet

Now you have to open up your template code, you can do it by going to Blogger Dashboard -> Template -> Edit HTML ->  and Proceed.

Now copy all the CSS codes you have in your template and paste it into the stylesheet file we just created and delete the codes from template as you have now pasted it already into the file.

Note: You can not normally use the Blogger's default CSS code which has dollar sign into it's values for example font: $(body.font); as the value of a property is fetched from database, so you can't use it into a normal stylesheet file. If you want to speed up your blog page more efficiently than you can ask me to make the blogger's CSS code compatible with a stylesheet for as low as $8 as a donation amount. Contact me on my email depy45631@gmail.com

Host the file

Now when you have made the stylesheet file ready with the codes you can now upload it to your hosting service [Click here to know how to use free DropBox as CDN]. When the file is uploaded, get the hotlink (direct link) to it.

Attach it to your template

This is the last step, you now have to link the hosted CSS file to your template so it fetches the styles from the stylesheet. To do that go to your Blogger Dashboard -> Template -> Edit HTML -> Proceed -> Use CTRL+F5 to find </head> and paste this code above </head> 

<link rel='stylesheet' type='text/css' href='http://host.com/files/stylesheet.css'/>

You obviously have to have the link in the href value, replace this link in above HTML

http://host.com/files/stylesheet.css

With the link to CSS file hosted by you.

Mission Accomplished

Yay ! congrats on improving your page load speed by using external CSS files, it not only optimize your page speed but also makes the page rendering easy. But the problem is that you can only put normal CSS in the stylesheet, if you want to make all the CSS codes compatible with a stylesheet you can contact me on depy45631@gmail.com  and yes you have to pay $8 for it.

Static update/notice message with hover effect for Blogger

Have you ever been away for your vacations and you can't update on your blog ? Don't you feel your readers would wonder why aren't you posting anymore, maybe they will even leave you blog because your blog is inactive. In this post i will be telling you how to add static message box on your blog.
It's very useful to keep your readers updated about your current status and that keeps them from assuming that your blog is inactive. I found it very useful when i changed my domain thus it was important to inform my readers about the domain change and it helped them understand the cause of redirection on my blog.

Demo

If you want some message that appears on all pages of your blog then try this tutorial, i am sure you will love this to inform your readers about anything. This plugin connects you more to your readers and give them importance, now follow the steps below to add it.

1. Add the HTML in your template

The first step is to add the HTML. We have used anchor HTML tag for the message box, it's because if you want the message to go on a link you can put the link in href value, you can write a blog post for more information related to the message.

The HTML code is as follows

<a class="stx-update" href="" target="_blank" title="A message">Thanks for visiting our blog you can join us by subscribing</a>

Changes you can make

1. Fill the href attribute's value with a link if you want your visitors to go on a link by clicking it. For example href="http://stramaxon.com/p/update.html" 
2. Change the value inside title attribute, the text inside the title value will appear when you will hover it. For example mouse over this text and see the box appear with the text in it's title attribute.
3. The main change you need to make is the text between <a> and </a>, it will appear to your visitors.

Once you have made the necessary changes to the HTML you can now continue adding it into your blogger blog. Check the next step to know how to easily add it.

Placing the HTML in your template

You need to add the HTML code in your template by following these steps : (backup your template beforehand)

1. Go to your Blogger Dashboard
2. Click on the Template tab
3. Then open Edit HTML and Proceed
4. Use CTRL+F to find </body> in the template and place the html code above </body>
5. Save the template

That's it ! Once the HTML is appearing in the blog, you are now ready to style it using CSS

The CSS design

CSS is what gives the basic anchor HTML an awesome look and feel. Check the CSS code below and learn what you can change in the CSS

.stx-update {
text-decoration: none !important;
position: fixed;
right:0px;
left:0px;
top: 0px;
display: block;
background-color: #49A2E7 !important;
text-align: center !important;
padding: 20px !important;
z-index: 9999 !important;
color: white !important;
font-size: 17px;
font-family: 'verdana' !important;
border-bottom: 8px solid rgba(255, 255, 255, 0.69);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
opacity: 0.8;
overflow: hidden;
}

.stx-update:hover {
opacity: 1.0;
}

You can make changes to the CSS, only make changes if you know what you are doing.

• Line 8 : Change the box color to your favorite or the color that looks good with your blog. Here's a list of basic CSS colors but you can also see the shades of those colors - CSS colors list
• Line 12 : This is the for the color of text into the message, check the link above for CSS color list.
• In fact you can modify anything in the CSS as per your needs, so enjoy, if you want any specific design message box you can contact me on depy45631@gmail.com

Now when you are done with modifying the CSS, read further to know how to add it to your blogspot blog.

Adding the CSS to blogger

You now have to add the CSS code in your template. To do that follow the steps below or just check this tutorial to know how to add CSS to template. 

1. Go to Blogger Dashboard
2. Locate the Template tab
3. You will see Customize button there, click it
4. You will be in the Template designer
5. Click on Advanced tab on the left pane
6. From the Advance tab, click on the Add CSS
7. And paste the CSS in custom CSS text area, preview it. If it seems to be correct and working then Apply to Blog.

Great ! If you did everything correct then you will see the new message box on top of your blog page.

Your Feedback and Suggestion

The design of this box was made simple but interactive, but if you think there's something that needs to improved then feel free to comment on our blog and also subscribe to our email feed updates.