Sunday, September 23, 2012

How to Add Paypal Donate Button to Blogger ?

| |
0 comments
If you do hard-working for your blog or website by showing the readers the tricks and tutorials for Blogger, Wordpress or any kinds of tips but you couldn't make any bucks from it. That's the reason some bloggers that put the Paypal Donate Button to their blog tips to encourage their readers to say big thanks you for helping them out.

Paypal Donate Button

However, not all the readers will donate the money for your works but there are still some generous soul readers will willingly donate for you to give you a big thanks such as a cup of coffee or a cigarette.

How to Add a Paypal Donate Button to Blogger (Sidebar or Footer Gadget)

1. Get yourself a Paypal account if you don't already have one

2. Login to your Paypal account

3. Click on the Merchant Services tab

Select Paypal Merchant Services Tab
4. Choose Donations from the list of key features displayed in the right sidebar of the PayPal Website Payments Standard Option (first of 3 payment solutions)
Note Paypal have changed its interface. You now need to select PayPal Website Payments Standard from Merchant Services drop down and then under the buttons in option 1 you will see in pretty tiny writing I must say "There are also buttons for donations and gift certificates." Click on donations.

Select Donations link in Paypal from Paypal Website Payments Standard Options 1 to add a donations button to Blogger Blogspot blog

Reference >> window 7 themes free

5. From the Paypal Create a Donation Button screen choose Create Your Button Now link (one of two).



6. Stick with the default button unless you wish to customize it

7. Choose your currency depending on your needs and location

8. Choose Donors enter their own contribution amount radio button unless you want to have a set amount

Paypal Create Button Steps
9. Ensure the Secure Merchant ID radio button is selected. This will prevent spammers getting hold of your email address

10. At Step 2 it is worth saving your button

11. At Step 3 Customize your checkout page by allowing donors to write a short comment by selecting the Yes radio button to special instructions to seller

12. Select the No radio button for Customer's Shipping Address

13. Select the Create Button button

14. Once Paypal creates the donate button code copy it by right clicking your mouse and choosing copy

15. Logout of Paypal

16. Login to Blogger if you are not already logged in

17. Go to Design > Page Elements

18. Click on the Add a Gadget link in the sidebar

19. Choose HTML/Javascript widget from the list provided

20. Paste the button code into the Content box of the dialog box that appears by placing the mouse inside the box and right clicking the mouse and then paste

21. Select a title like "Shout Me a Coffee Today!" or whatever you would like

22. Click on the Save button

23. Drag and drop your new donation gadget into the spot you want it to appear in

24. Click the Save button to ensure your changes are saved

25. Click View Blog to see your new donate button in the sidebar of your Blogger blog

26. Click on your new donate button and you will be taken to the Paypal Checkout screen

This tutorials base on Blogknowhow and thanks for sharing.
Read More

Saturday, September 15, 2012

Add meta tags to blogger

| |
0 comments
How add meta tags to blogger ? Meta Tags, add meta tags to blogger is the best way to push the information about our blog to the Search Engines (Google, Yahoo, Bing, Asks,…). It is the approach the search engines index our online content accurately. We can find that Meta Tags is a piece of HTML code inside a webpage, contains information about the page. 

It is easy for every blogger. This is step-by-step instruction:

Step 1: On your dashboard ==> click the 'Layout' button

Step 2: Click the 'Edit html' tab

Step 3: Find this code:
<b:include data='blog' name='all-head-content'/>
Step 4: Now add below code just after the above code.Look at below
<meta content='DESCRIPTION HERE' name='description'/>
<meta content='KEYWORDS HERE' name='keywords'/>
<meta content='AUTHOR NAME HERE' name='author'/>
DESCRIPTION HERE: some word about your blog description
KEYWORDS: some keywords of your blog
AUTHOR NAME: Your name

Step 5: Save your template.

Post: Blog tips World
Read More

add facebook like button to blogger

| |
0 comments
How add facebook like button to blogger ? Like button and add facebook like button to blogger on facebook now is not only to express the interesting in contents on Facebook’s wall but also allows visitors to share your blog posts with their friends with just one click, so why not add it to Blogger. After the launch of this button, it’s being replaced with the old share buttons.

This is how to add it to bloggers’ blog
Step 1: Go to the "Facebook Developers" page:
http://developers.facebook.com/docs/reference/plugins/like

Step 2: Set the options you want
Specifically, make a decision if you want a "Like" or a "Recommend" button. The sample button on the page is automatically updated as selection.

Step 3: Leave the "URL to Like" field blank

Step 4: Click "Get Code".

And you’ll see:
<iframe src="http://www.facebook.com/plugins/like.php?href=
http%253A%252F%252Fexample.com%252Fpage%252Fto%252Flike&layout=standard&
show_faces=false&width=450&action=like&colorscheme=light"
scrolling="no" frameborder="0" allowTransparency="true" style="border:none;
overflow:hidden; width:450px; height:px"></iframe>
Step 5: Replace the text:
src= above with:
expr:src='
http%253A%252F%252Fexample.com%252Fpage%252Fto%252Flike&layout part with:
" + data:post.url + "&layout
light" with:
light"'
-- notice the new trailing apostrophe
height:px with:
height:35px
-- otherwise, Firefox will make the iframe really big.
Save this final code to transfer to the bloggers’ blog - add facebook like button to blogger

Step 6: Go to your Blogger Dashboard.

Step 7: Open your blog's layout and click Edit HTML.

Step 8: Back up your template! Do this by clicking Download Full Template.

Step 9: Check Expand Widget Templates.

Step 10: Find a place to put the Facebook "Like" code into your HTML layout. A good location is directly after or below:
<div class='post-footer'>
Step 11: Save and check that the Like button is on the blog

Post: Blog tips - Computer tips - Blogger tips
Read More

Wednesday, September 12, 2012

How to add recent comments widget to Blogger ?

| |
0 comments
There are many tutorials that show you how to add recent comments widget to Blogger - Blog tips World but today my blogger tricks is very easy to set up that you just only set up the new widget for your website.

Here is the instruction to set it up for your blog :

Step 1 : Blogger Dashboard -> Layout -> Add a Widget -> Feed


Recent Comments Widget For Blogger

Step 2 : Add your feed URL to this Feed like the link below

 http://YOURSITE.blogspot.com/feeds/comments/default
Recent Comments Widget For Blogger
  
Step 3 : Click " Continue "
Recent Comments Widget For Blogger
Step 4 : Change the title of the widget such as " Lastest Comments or Recent Comments " .
Step 5 : Done ! Now your blog will be looked more professional. 
Read More

Thursday, September 6, 2012

Adding Simple Recent Posts Widget in Blogger

| |
0 comments
This tutorial show you how to add the recent posts widget in Blogger but it is very simple that only display the post title without thumbnail. In addition, it is also including changing the number of posts, changing the number of character of the post snippet., showing the posts date.

It looks like the photo below :

Adding Simple Recent Posts Widget in Blogger

Here is the instruction how to add recent posts widget in Blogger:

Step 1. Log in to your Blogger Dashboard >> go to Design >> Add a Gadget >> choose HTML/JavaScript
Step 2. Choose & Copy the code of one of the options below and paste it into the new HTML/JavaScript:

Option 1: Recent posts widget with snippets
<div id="hlrpsa">
<script src="http://helplogger.googlecode.com/svn/trunk/recent-posts-with-snippets.js">
</script>
<script>
var numposts = 5;var showpostdate = false;var showpostsummary = true;var numchars = 100;var standardstyling = true;
</script>
<script src="http://your-blog.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts">
</script></div>
<div id="rpdr" style="font-family: arial, sans-serif; font-size: 9px;">
<a href="http://helplogger.blogspot.com/2012/04/recent-posts-widget-for-bloggerblogspot.html" target="_blank" title="Grab this Recent Posts Widget">Recent Posts Widget</a> by <a href="http://helplogger.blogspot.com" title="Recent Posts Widget">Helplogger</a></div>
<noscript>Your browser does not support JavaScript!</noscript>
<style type="text/css">
#rpdr {background: url(http://3.bp.blogspot.com/-WM-QlPmHc6Y/T5wJV58qj9I/AAAAAAAACAk/1kULxdNyEyg/s1600/blogger.png) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}
#rpdr, #rpdr a {color:#808080;}
#hlrpsa { border-bottom:1px #cccccc dotted; margin-top:-10px; padding-bottom:10px;}
.hlrps a {font-weight:bold; }
.hlrpssumm {}
</style>
Reference >> add facebook like button to blogger

Option 2: Recent Posts Widget Showing Post Titles Only
<div id="hlrpsb">
<script style="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/recent-posts-with-titles-only.js"></script>
<script style="text/javascript">var numposts = 10;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script>
<script src="http://your-blog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script></div>
<div style="font-family: arial, sans-serif; font-size: 9px;" id="rpdr"><a href="http://helplogger.blogspot.com/2012/04/recent-posts-widget-for-bloggerblogspot.html" title="Grab this Recent Posts Widget" target="_blank">Recent Posts Widget</a> by <a href="http://helplogger.blogspot.com" title="Recent Posts Widget">Helplogger</a></div><noscript>Oops! Make sure JavaScript is enabled in your browser.</noscript>
<style type=text/css>
#rpdr {background: url( http://3.bp.blogspot.com/-WM-QlPmHc6Y/T5wJV58qj9I/AAAAAAAACAk/1kULxdNyEyg/s1600/blogger.png ) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}
#rpdr, #rpdr a {color:#808080;}
#hlrpsb { }
.bbrecpost2 {
padding-top:6px;
padding-bottom:6px;
border-bottom: 1px #cccccc dotted; }
</style>

Step 3. Change 5 (option 1) and 10 (option 2) with the number of posts you want to show. Change false to true if you want the posts dates to appear, and change 100 (option 1) if you want more characters to be displayed.
Don't forget to change your-blog text with the name of your blog or if you have a custom domain change all the bolded line with your address.

Step 4: Done, now enjoy your template

Base on : Helpblogger
Read More

Tuesday, September 4, 2012

Add customize Google +1 Button in Blogger

| |
0 comments
This tutorial help your Google + Button is more attractive to the readers and impress them click more to share your information in their Google + . When your website or your article get more share from Google + that is very good for SEO because Google can recognize that your article or your website is qualified and useful for the readers.

Reference >> add meta tags to blogger

Google +1 Button in Blogger

Here is the instruction that help you to add customize Google +1 Button in Blogger :

Step 1 : Blogger Dashboard -> Template -> Edit HTML
Step 2 : Search for this code


</head>
Step 3 : Paste this code below above </head>
<script type="text/javascript" src="http://apis.google.com/js/plusone.js"> {lang: 'en-US'} </script>
Step 4 : Click on " Expand Widget Templates " and search for this code :

<data:post.body>
Step 5 : Paste the code below above it 
<div style='float:left'>
<g:plusone size="standard" expr:href="data:post.url"/>
</div>
  • You can display it to "left" and "right" by adjusting left
  • You can change standard to medium, small or tall. Choose the size that may blend your template.
Tall, small, Medium Respectively:
imageimage
image
Step 6 : Save it and enjoy your template


We have the Google+1 Button Widget in blogger , but with this tricks that helps you to change the standard of Google +1 Button to be smaller , bigger that depends on you.
Read More

Tuesday, August 21, 2012

Add Breadcrumb Navigation to Blogger for Improving SEO

| |
1 comments
The benefit of adding breadcrumb navigation to blogger is make your readers easily to recognize where's locations of your article. It also improves SEO for your blog tips cause of major search engines such as Google, Bing, Yahoo... treat anchor text links as very important. Blogger is not really strong platform for SEO like Wordpress or Joomla , so we should do everything as we can to improve it. This post i will show you how to add breadcrumb navigation to Blogger.

It is the example of breadcrumb navigation of my blog

Here is the instruction step by step. It is not difficult to your blog but it does involve adding a snippet of code to your template.

Step 1 : "Blogger Dashboard"-> "Template"-> "Edit HTML" -> "Proceed"
Step 2:  Back up your template before you do next step
Step 3: Click on " Expand Widget Template"
Step 4: Add the following CSS code above this line ]]></b:skin>

.breadcrumbs {float: left;width: 590px;font-size: 11px;margin: 5px 10px 20px 10px;padding: 0px 0px 3px 0px;border-bottom: double #EAEAEA;}

Once your breadcrumb is working modify this if you need to so that it blends with the look and style of your template.

Reference >> window 7 wat remover

Step 5: Find this line of code <b:includable id='main' var='top'>
Step 6: Replace the entire block of code below

<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<data:adStart/>


to be

<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>
<!-- disable default status message
<b:include data='top' name='status-message'/>default status message disabled -->
<b:include data='posts' name='breadcrumb'/><data:adStart/>
Step 7 : Now immediately before <b:includable id='main' var='top'> paste the following large block of code:

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on front page -->
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumbs'>
Browse » <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'> » <a expr:href='data:label.url' rel='tag'><data:label.name/></a> </b:if> </b:loop>
» <span><data:post.title/></span> </b:if> </b:loop> </div>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<div class='breadcrumbs'>
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/> </div> <b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » All posts <b:else/>
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> »
Posts filed under <data:blog.pageName/>
</b:if> </div> </b:if> </b:if> </b:if>
</b:if>
</b:includable>

Step 8 : Click " Save " and done !
Read More

Thursday, July 26, 2012

Improving SEO for Blogger by Adjusting Blogger Title Tags

| |
3 comments
This post is another basic tips to optimize SEO for Blogger platform that improve your title tag blog in the search engine by adjusting blogger title tags and drive more traffic to your blog.

By default , Blogger title tags does not optimize for search engine because the order of the title of the posts is not correct. For example, the title of my blog is " Blog Tips | Computer Tips | BlogTipsWorld.com " if we don't fix the title tags when you read this post, the title of this post will be appeared like this in every search engine.
" Blog tips | Computer Tips | BlogTipsWorld.com | Improving SEO for Blogger by Adjusting Blogger Title Tags "

Reference >> add meta tags to blogger

Improving SEO for Blogger by Adjusting Blogger Title Tags

Why is it not good for SEO ? You can see the title tags of blogger default is very long and when it is appeared in the search engine, it will lose the keywords of this post such as " Blog Tips | Computer Tips | BlogTipsWorld.com | Improving SEO for  .... " so that's meant when people search the keywords " Adjust Blogger Title Tags " your blog have no chance to appear in the search engine.

If you adjust blogger title tags , your title of post will appear such as " Improving SEO for Blogger by Adjusting Blogger Title Tags | Blog Tips .... " so that is the big different. Your website is more friendly in search engine and if luckily your post will be on top of search engine with longtail keywords of some of your posts.

Here is the instruction how to adjust blogger title tags :

Step 1 : Blogger Dashboard -> Template -> Edit HTML -> Proceed

Step 2 : Find this code :

<title><data:blog.pageTitle/></title>


Step 3 : Replace it with this code below :

<b:if cond='data:blog.pageType == &ampquot;item&ampquot;'>
<title><data:blog.pageName/> |
<data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>


Step 4 : Save your template and done. It is so simple , isn't it ?
 
I can't say that when you apply this tip for your template, your website will get more traffic. However, when i finish the series of SEO Tips for Blogger and you apply to your website and build the great content, you will see the difference.
Read More

Friday, July 20, 2012

SEO Tips: Custom Permalinks for Blogger Post

| |
1 comments
This is the second post of Blog tips, SEO tips for Blogger that is about creating custom permalinks for Blogger Posts. Before Blogger doesn't have this option and the link of the Blogger posts is very hard for SEO or it is not friendly for the search engine. That's also the reason why many bloggers prefer Wordpress more than Blogger. However, Blogger upgraded this custom permalinks last months for better SEO.

Now i will show you how to create custom permalinks for Blogger Posts:

Before you could not edit the links of every post in Blogger and its very easy to miss the keywords in the link of these posts.

Step 1 : " Dashboard " go to " Create a new post "

Step 2 : Look at the sidebar of the " Post Settings ". Under " Schedule " you will see new option for Custom " Permalink "

Step 3 : You just create the normal title of the post like usual,and now you have to do brainstorm which main keyword do you want to put on the link. For example, this post is show you how to " Custom permalinks for Blogger Posts" so i will create the permalink for this post is "create-permalinks-for-blogger-posts". Look the picture below for more understanding.


That's all ! you shouldn't think that tips is not really effect to SEO because it is one of the most important thing for On-page SEO in every websites. So i would like to recommend that you should take spend few minutes before finishing your post by create custom permalinks for your posts.

First post of SEO Tips for Blogger : How to Add Meta Tags to Blogger for better SEO ?

Thanks

More >> ios 6 beta 3 ipsw
Read More
Powered by Blogger.