Blogger Tutorial Guide and Tips

How to Add Adsense Code below Post Titles in Blogger

2011-10-14T18:23:00.001+07:00

One Way to make money with Blogger is by using Google Adsense.
Google Adsense is a service which is owned by large corporations, Google search engine.

There are many blogs that have been integrated with Google Adsense.

How will you get paid by Google?

Once you registered to Google Adsense and your Blog approved, you just need to write articles and setting adsense code in your blog. Advertisement from adsense will appear within your post articles. If there are visitors click on adsense ads on your blog, you will be paid by Google. Simply like that.

If you have not registered with Google Adsense, please sign up at Google Adsense
For detail with Google Adsense is Adsense Help

Now, I will show you How to put adsense code under the post title using Blogger.
In below steps, i use New Interface Blogger.

Step 1. Login to your Blogger

Step 2. Click the Drop Down menu like in the picture, then select "Layout."

Step 3. Click Edit on the Blog Posts widget.

Step 4. Mark "Show Ads Between Posts" text box, and "Configure Inline Ads" will appear.

You can set your Adsense Ads through "Configure Inline Ads".
On the "Format" section:
- Drop down menu, choose 336x280 large Rectangle or 300x250 Medium Rectangle
- Choose "Text and image" radio button.

Why I recommend selecting an ad format above?
Because it will be easier to bring in clicks from visitors and certainly also will increase your Adsense income.

Step 5. After finished setting Your Adsense Ad, Click "Save" Button

Step 6. Click the Drop Down menu like in the picture at step.2, then select "Template", in "Live On Blog" Section click "Edit HTML" and "Proceed" Button.

Before editing your template, you may want to save a copy of it. Choose "Backup/Restore" and click "Download Full Template"

Step 7. Check Box "Expand Widget Template"

Find the below script, you can find the codes by using "CTRL+F" to search. In this case, I am using “Blogger Template Simple”.

If you can't find above code, you can find in codes below, cause there are few blog templates also using this codes below

- Then "Cut and Paste" above code and put before <data:post.body/>

- Add this below blue script :

- Save Template.

P.S.
float:left --- If you want your Adsense Codes in Left
float:right --- If you want your Adsense Codes in Right

!= in <b:if cond='data:blog.pageType != "item "'>
Your Adsense Codes appear in Full Post

== in <b:if cond='data:blog.pageType == "item "'>
Your Adsense Codes appear in between Posts on main page

You Can Put Your Adsense Code before <data:post.body/> in like this:

Remember!!
Before your Paste Adsense Codes, convert your adsense code with Blogger Ad Code Converter

Hopefully these tips could increase your adsense revenue with bloggers

ProBlogger: Secrets for Blogging Your Way to a Six-Figure-Income

2011-07-21T11:11:00.000+07:00

Turn your Passion for blogging into extra revenue

There are no magic wands, hidden tricks, or secret handshakes that can bring you immediate success in the blogging world, but with the help of this book, you can get there. Written by two leading authorties on creating and monetizing blogs, ProBlogger carefully lays out the steps you need to follow to create a revenue-generating blog. From choosing a topic and publishing your first post to promoting your site using social media and receiving your first check, you'll find out what really works.

Packed with practical, tried and tested advice, this guide shows you how to:
- Choose the right blog tools and platforms
- Find your niche so you can excel
- Start writing in a way that attract visitors
- Follow winning strategies on how to earn income with your blog
- Drive readers to your blog through Twitter, Facebook, and Digg
- Select the best advertising services
- Uncover the secrets of successful blogs

Build a Better Blog in 31 days 2nd Edition

2010-12-23T11:00:00.003+07:00

31 Days to Build a Better Blog is a downloadable e-book designed to help you revitalize your blog by giving you 31 tasks that will all help to turn it into the page view powerhouse you’ve always dreamed of.

While originally designed for bloggers to work through over a month – the feedback that we’ve been hearing from bloggers indicates that 31DBBB is being used in a variety of ways including:
Intense Training – bloggers setting aside weekends or weeks to go through multiple tasks at once
1 Task a Day – the way we designed it – one day at a time
1 Task a Week – bloggers taking their time with the challenge and making the tasks week long tasks
Monthly Cycle – bloggers using the tasks again and again each month as a monthly routine for their blogging.
Occasional Inspirational Resource – bloggers dipping into 31DBBB on a more occasional basis – using it on days when they have time or lack inspiration.

Who is this Workbook for?

31 Days to Build a Better Blog is for bloggers at different stages of their blogging including:

those who have just started a blog but who don’t know what to do next
those who have had a blog for a while but it’s stalled in its growth
bloggers with bloggers block and lacking inspiration.

By the end of the 31 Days you’ll have:

written a variety of different types and styles of posts
learned techniques for coming up with new post ideas
promoted your blog in a variety of ways
built relationships with readers
reached out to and developed working relationships with other bloggers
developed an editorial calendar for your blog going forward
discovered ways to be more connected to your niche/topic
designed a plan for the next month of your blogging

How to Add Amazon Associate ID Links in Blogger

2010-07-11T12:21:00.002+07:00

An alternative to get money from your blog is by selling products from amazon.com. You could put hundred to thousand amazon products by creating link to your blog. If any visitor buy certain amazon products from your blog, amazon will pay you up to 15% of products' total price.
For detail Amazon Associate Fee, Click this Associates Program Advertising Fee Schedule

To link your blog to amazon.com you have to join Amazon Associates. Here are simple steps to start:
1. Sign in to your blog at blogger.com
2. Choose Monetize link at one of your blog

3. Choose tab Amazon Associates
4. In Setup Amazon Associates,
- If you do not have amazon Associates ID, you must choose I want to create a new Associates ID and klik SET UP AMAZON ASSOCIATES Button to register as amazon Associate member.
- If you already have an amazon Associates ID, you must choose I already have an Amazon.com Associates ID, fill your Amazon Associates ID and klik SET UP AMAZON ASSOCIATES Button.

Everytime you post a new article, you will find Amazon Associates Box at right side to find amazon products so you could add its Link to your article.

Hope you get advantage from this post.
I will show how to insert other Tips of amazon associate in next time.

Free icons set in blogs, websites and templates

2009-05-14T23:13:00.001+07:00

Color Brush Pack icons

Color Brush Pack icons by eponas deeway at 256x256 pixels with PNG format such as Dossiers & drives, software, system, others.
They are free to use in websites, templates and software projects and get bonus wall-Cherrytree wallpaper 1024x 768 to set as desktop background.

Download: Color Brush Pack icons

Socialize Icon Set, version 1.0

Socialize Icon Set, version 1.0 from Dryicons are available in mac(.icns), linux(.png with dimensions 16x16, 24x24, 32x32, 48x48, 64x64, 128x128) pixels and windows(.ico) format ready to be used in your blog or website.

Download: Socialize Icon Set, version 1.0

Socialize Icons Set with drink web 2.0

Drink web 2.0 from icontexto is avalaible PNG format at 32x32, 48x48, 64x64, 128x128, 256x256) pixels and drink web 2.0 wallpapers 1280x800, 1024x768 to set as desktop background.

Download: Socialize Icons Set with drink web 2.0

Page Peel Social Media Iconset

Page Peel Social Media Iconset from web icon gallery With 16 Transparent PNG format (.png) at 128x128 and 64x64 pixels. Designed by Gopal Raju

Download: Page Peel Social Media Iconset

Blossom Icons set

Blossom Icons set from Dryicons contains 52 high quality icons at PNG format with dimensions 16x16, 24x24, 32x32, 48x48, 64x64, 128x128 pixels.
Blossom designed only two color are black and white and managed to produce one very stylish, 3D looking, modern.

Download: Blossom Icons set

Technorati Tags: social+networks, free+icons

Google Blogger For Dummies

2009-04-30T15:21:00.002+07:00

Are you bemused by blogs? Eager to become a blogger? Google Blogger For Dummies can help you start blogging sooner than you think.

More than 14 million people are promoting a business, connecting with family and friends, and sharing opinions with Google Blogger. This book helps you start a Blogger account, create content, build an audience, make money from your blog, and more, all without learning to program.

You’ll be able to:

- Learn the parts of a blog, what Blogger does, and how to choose goals and blog topics
- Choose a domain name, learn to use the dashboard, pick a template, and configure settings
- Dress up your blog with themes and find out where to get plenty of free ones
- Learn blogging etiquette and some secrets for long-term success
- Make money from your blog with Google Adsense, contextual and text link ads, and merchandising with CafePress
- Set up multi-user blogs or branch into mobile blogging, podcasting, or video blogging
- Take advantage of social networking sites and learn simple search engine optimization techniques
- Maintain your blog with tools like Blog This! and Quick Edit
- Moderate comments effectively, track your stats, and more

Google Blogger is a great choice for beginning bloggers, and Google Blogger For Dummies gives you the know-how to venture confidently into the blogosphere.

Back Cover

Here's what you need to know to get started with Google Blogger

Want to share your opinions, promote your business, network with others, and maybe pick up a few extra dollars, all without learning to program? Millions of people are doing it with Google Blogger, and you can too. This book helps you create a Blogger account, write compelling content, build an audience, make money from your blog, and more!

- What's a blog, and what's Blogger? — learn the parts of a blog, what Blogger does, and how to choose goals and blog topics
- Nuts and bolts — choose a domain name, learn to use the dashboard, pick a template, and configure settings
- Blog effectively — learn blogosphere etiquette and some secrets for long-term success
- Fun bells and whistles — dress up your blog with templates (lots of them are free!)
- Does making dollars make sense? — explore options for Google Adsense®, contextual and text link ads, paid posts, and merchandising with CafePress
- Spread the word — promote your blog through search engines and social networking sites
- A family of blogs — set up multi-user blogs or branch into mobile blogging, podcasting, or video blogging
- Get more Google — use Picasa®, YouTube, Feedburner, and more

Open the book and find:
- How to choose a blog topic and personalize your blog
- What you should know about moderating comments
- How to maintain your blog with tools like Blog This! and Quick Edit
- Simple search engine optimization techniques
- Tips for tracking your blog traffic
- Where to find cool free templates
- How to make money from your blog
- Ten useful social networking sites

Technorati Tags: Blogger Tutorial

Add technorati tags in Blogger

2009-02-18T22:03:00.000+07:00

Technorati tags functions as a key to any postings. If you click the tags you will directed to technorati based on the tag you click.

For example, you click the tag Happiness you will be brought to technorati site where you can find billions of websites and blogs related to happiness.

Want to register your website or blog on technorati?
Please click How to approve web blog in Technorati

How to make technorati tag on every article posted?

To make tag on your web or blog:
<a href="http://www.technorati.com/tags/[tagname]" rel="tag">[tagname]</a>
<a href="http://www.technorati.com/tags/[tagname]+[tagname]" rel="tag" gt;[tagname] [tagname]</a>

Example:
<a href="http://www.technorati.com/tags/Real+Happiness" rel="tag">Real Happiness</a>

Make sure the technorati tag you create is related to the posting and only contains one or two words per-tag.

Easy step to create Technorati tag, you can check in Andrew Beacock blog, find and click "Oddiophile's Rather Fab Technorati Tags Bookmarklet" link to get some technorati tags code then paste to your posting.

Technorati Tags: Technorati, Blog

How to add blog in Technorati

2009-02-17T22:19:00.000+07:00

Technorati is an Internet search engine for searching blogs, competing with Google and Yahoo. Everyday, thousands of visitor search for information through it.

If your blog is registered in technorati, a bigger chance it will be seen by visitors.
This can increase your SEO Blog rank.
To register in Technorati, follow below simple steps:

1. Sign In on Technorati, if not register, please Join on Technorati
2. Click your account (your userID), it's near signout link.
3. Click Claimed Blogs tab.
4. Click Claim a new blog link below.
5. Enter your Blog URL then click Begin Claim Button.

Now, your blog is registered in technorati.

Next time, i will discuss about how to add technorati tag on every posting.

Technorati Tags: Technorati, Blog

Change Social Bookmark, Network and Feed icons for your Blog websites

2008-11-21T00:46:00.001+07:00

Bored with your regular social bookmark, network and Feed icons display in your blog, websites, desktops and softwares?

Some options, you may choose any icons you like to change your old social bookmark and network and Feed icons in your blog.

Icons of Web 2 Social Bookmarks and Networks such as:
Blinklist, BlogMarks, Delicious, Digg, Diigo, FaceBook, Favorite, Feeds, FeedBurner, Flickr, Furl, Google, Magnolia,
Misterwong, Myspace, Newsvine, Netvibes, Reddit, Simpy, Stumbleupon, Technorati, Twitter, Youtube.

Get these free to download !!

Aquaticus.Social

Include 4 sizes: sizes 16×16, 24×24, 48×48, 60x60 for Window Linux(.png) and MacOS.

Download here:

Linux .png
Macintosh

Web 2 Icons

Include 7 sizes: 16×16, 24×24, 32x32, 48×48, 128x128 256x256 512x512 for Window(.ico), Linux(.png) and MacOsx

Download here:

Window .ico
Linux .png
Macintosh

FastIcon Smashing Feed Icons

Include 7 sizes: 16×16, 24×24, 32x32, 48×48, 128x128 256x256 512x512 for Window(.ico), Linux(.png) and MacOsx

Download here:

Window .ico
Linux .png
Macintosh

Technorati Tags: Blogger Tutorial, Social Bookmarks, Social Networks, Icons

How to Add an email subscription with FeedBurner

2008-11-19T08:36:00.000+07:00

Email subscriptions allow people to subscribe to the blog or website where they can get alert of new posting through email.

One blog that give free facility of email subcription and the most favourable by bloggers is FeedBurner Email.

You only need few steps to add email subcription in your blog with Feedburner Email:

Step 1. Login to your Feedburner Account. If you are not registered, please register at Feedburner

Step 2. Click on the Publicize tab

Step 3. Choose Email Subscription on the left sidebar

Step 4. You will be given 3 options feed-via-email service provider such as Feedburner, FeedBlitz and Rmail.
I Choose FeedBurner for this tutorial (You may choose FeedBlitz or Rmail)

Step 5. Click "Activate" Button and Get your Code.

You will be given two options to display the Email Subcription:

1. Subcription Form
You need to copy and paste the code into your blog. Then, your Email subscription form will be automatically inserted each time the page is loaded.
Readers can subscribe to receive daily email of your newest content from that form.

2. Subscription Link
You can also offer email subscriptions from a link rather than a form. Similar to the form, just copy the link code and insert to your blog.
Users who click it can fill their email address in the form that appears.

Note: If your sidebar’s width is larger than 160 pixels (160px), you should use Subscription Form because a form will attract more readers than a Subcription link.

Step 6. Paste the code to your blog.

For any trouble with above tutorial, feel free to ask me here.

Technorati Tags: Blogger Tutorial, Feedburner, Feed Email, Email Subcription

Add Digg, Technorati, Stumble Upon, Delicious buttons in Blogger

2008-10-09T15:51:00.000+07:00

Social Bookmarks or Networks is one good resource to increase a traffic of your blog.
Thousands members has joined in social bookmarks such as:

Digg, Technorati, Delicious, StumbleUpon, Reddit, Blink List, Furl, Mixx, Facebook, Google Bookmarks, Yahoo My Web and etc..

Here are some simple steps to add social bookmarks button to your Blogger:

1. Log in to your Blogger Account

2. Go to Layout > Edit HTML in your Blogger dashboard and check the Expand Widgets Templates box.
Note: Save a copy of your Blogger template before Edit!!

3. Now Search (Ctrl+F) for this tag: <data:post.body/> or <data:post.body/>

4. Copy and paste the following code below or after <data:post.body/> or <data:post.body/>tag.

New Update:

<a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img border='0' alt='Digg' title='Digg' src='http://benny.ayong.googlepages.com/digg.png'/></a>

<a expr:href='"http://technorati.com/faves?add=" + data:post.url' target='_blank'><img border='0' alt='Technorati' title='Technorati' src='http://benny.ayong.googlepages.com/technorati.png'/></a>

<a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img border='0' alt='Delicious' title='Del.icio.us' src='http://benny.ayong.googlepages.com/delicious.png'/></a>

<a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img border='0' alt='StumbleUpon' title='Stumble Upon' src='http://benny.ayong.googlepages.com/stumbleupon.png'/></a>

<a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img border='0' alt='Reddit' title='reddit' src='http://benny.ayong.googlepages.com/reddit.png'/></a>

<a expr:href='"http://www.blinklist.com/index.php?Action=Blink/addblink.php&Url=" + data:post.url + "&Title=" + data:post.title' target='_blank'><img border='0' alt='BlinkList' title='BlinkList' src='http://benny.ayong.googlepages.com/blinklist.png'/></a>

<a expr:href='"http://www.furl.net/storeIt.jsp?t=" + data:post.title + "&u=" + data:post.url' target='_blank'><img border='0' alt='Furl' title='Furl' src='http://benny.ayong.googlepages.com/furl.png'/></a>

<a expr:href='"http://www.mixx.com/submit?page_url=" + data:post.title + "&u=" + data:post.url' target='_blank'><img border='0' alt='Mixx' title='Mixx' src='http://benny.ayong.googlepages.com/mixx.png'/></a>

<a expr:href='"http://www.facebook.com/sharer.php?t=" + data:post.title + "&u=" + data:post.url' target='_blank'><img border='0' alt='Facebook' title='facebook' src='http://benny.ayong.googlepages.com/facebook.png'/></a>

<a expr:href='"http://www.google.com/bookmarks/mark?op=edit&output=popup&bkmk=" + data:post.url + "&title=" + data:post.title' title="Google Bookmark" target="_blank"><img alt='Google Bookmark' border='0' src='http://benny.ayong.googlepages.com/googlebookmark.png'/></a>

<a expr:href='"http://myweb2.search.yahoo.com/myresults/bookmarklet?t=" + data:post.title + "&u=" + data:post.url' target='_blank'><img border='0' alt='Yahoo' title='Yahoo Myweb' src='http://benny.ayong.googlepages.com/yahoomyweb.png'/></a>
 

<a expr:href='"http://ma.gnolia.com/bookmarklet/add?url=" + data:post.url + "&title=" + data:post.title' title='ma.gnolia' target='_blank'><img border='0' alt='ma.gnolia' src='http://benny.ayong.googlepages.com/magnolia.png'/></a>

<a expr:href='"http://www.squidoo.com/lensmaster/bookmark?=" + data:post.url' title='squidoo' target='_blank'><img border='0' alt='squidoo' src='http://benny.ayong.googlepages.com/squidoo.png'/></a>

<a expr:href='"http://www.newsvine.com/_wine/save?u=" + data:post.url + "&h=" + data:post.title' title='newsvine' target='_blank'><img border='0' alt='newsvine' src='http://benny.ayong.googlepages.com/newsvine.png'/></a>

<a expr:href='"https://favorites.live.com/quickadd.aspx?url=" + data:post.url + "&title=" + data:post.title' title='live' target='_blank'><img border='0' alt='live' src='http://benny.ayong.googlepages.com/live.png'/></a>

<a expr:href='"http://www.netscape.com/submit/?U=" + data:post.url + "&T=" + data:post.title' title='netscape' target='_blank'><img border='0' alt='netscape' src='http://benny.ayong.googlepages.com/netscape.gif'/></a>

<a expr:href='"http://tailrank.com/share/?text=&link_href=" + data:post.url + "&title=" + data:post.title' title='tailrank' target='_blank'><img border='0' alt='tailrank' src='http://benny.ayong.googlepages.com/tailrank.png'/></a>

<a expr:href='"http://www.mister-wong.com/addurl/?bm_url=" + data:post.url + "&bm_description=" + data:post.title' title='mister-wong' target='_blank'><img border='0' alt='mister-wong' src='http://benny.ayong.googlepages.com/misterwong.gif'/></a>

<a expr:href='"http://blogmarks.net/my/new.php?mini=1&simple=1&url=" + data:post.url + "&title=" + data:post.title' title='blogmarks' target='_blank'><img border='0' alt='blogmarks' src='http://benny.ayong.googlepages.com/blogmarks.png'/></a>

<a expr:href='"http://slashdot.org/bookmark.pl?title=" + data:post.title + "&url=" + data:post.url' title='slashdot' target='_blank'><img border='0' alt='slashdot' src='http://benny.ayong.googlepages.com/slashdot.png'/></a>

<a expr:href='"http://www.spurl.net/spurl.php?url=" + data:post.url + "&title=" + data:post.title' title='spurl' target='_blank'><img border='0' alt='spurl' src='http://benny.ayong.googlepages.com/spurl.png'/></a>

5. Save Your Templates!!

Final Result is like these:

Now, Your Social Bookmarks button is work and ready to increase more traffic on your Blogger!!

New Update:

If above tag code it doesn't work,
Try change "&" tag become "&" code.

Example:

<a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img border='0' alt='Digg' title='Digg' src='http://benny.ayong.googlepages.com/digg.png'/></a>

<a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img border='0' alt='Digg' title='Digg' src='http://benny.ayong.googlepages.com/digg.png'/></a>

Hope it's work in your Website or Blog.

Change the Title Tags to increase Traffic in Blogger

2008-10-07T17:53:00.000+07:00

Based on default, Title tags in blogger can only show the first title set in the blog.

It will be hard to increase the blog traffic and SEO (Search Engines Optimization) because the keywords appeared would not match the Post title.

Then, how to make the title tags appear as the Post titles?

It is simple. Some steps you have to do:

1. Log in to your Blogger Account.
2. Go to Layout > Edit HTML in your Blogger dashboard.
3. Search (CTRL+F) for this tag: <data:blog.pagetitle>
4. Add this code (Bold) with the following:

<b:if cond='data:blog.pageType == "index "'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>

5. Save your Templates.

Now, everytime you post, title tags will appear according to your post title, prove it!!
Hope this simple trick useful in increasing your blog traffic.

Add Favicon in your blogger

2008-09-11T00:28:00.000+07:00

Have you ever seen an icon image on your URL address just like the famous google and amazon? Do you want to change your Blogger icon into your own icon like in this image?

Isn't it cool to have your own personalize image appear in front of your own blog or website address The icon preceded to the URL address is usually called FAVICON (read:fav-eye-con). Favicon can be an identity of a company which is implemented in a blog or a website.

There are only 3 simple steps to create favicon. Want to give it a try?
Okay, let's start!

Step 1.

Make sure your image that you want it to be a favicon has been converted as .ico file, common size 16x16. You can convert the file using one of these free softwares, get them for free:
- Sib Icon Editor
- Icon FX

If you use Adobe Photoshop, be sure to install ico format plugin that you can download for free in Icon Plugin There are also hundreds free beautiful icons in Favicon Generator & Gallery ONLINE - that you can edit for your favicon blog or website.

Step 2.

You need to have an account like google page creator to store an image or file. You may want to register to google page creator and upload your new favicon.

- Log in to your Blogger dashboard.
- Go to Layout > Edit HTML
- Add below code (one of) between <head> and </head> or after <head>

<link href='http://youraccount.googlepages.com/favicon.ico' rel='shortcut icon'/>

<link href='http://youraccount.googlepages.com/favicon.ico' rel='icon'/>

P.S:
- Change your account with the name of your account when registering in google page creator
- Change Favicon.ico with the name of your icon file

Example:
- Account in Google page creator : benny.ayong
- Name of Favicon uploaded : bloggertutorial1.ico

<link href='http://benny.ayong.googlepages.com/bloggertutorial1.ico' rel='shortcut icon'/>

Step 3.
Save your template and click view blog. If your favicon does not appear, refresh it (F5).