More and more people are realising that blogging is one of the best ways to start your own online business. It requires minimal start up costs, you can build an impressive and loyal readership over time and once you know how to monetize your blog it can also bring in a decent income that will keep on coming even on the days when you don’t update your blog.

There are several ways to set up a blog online. You could use WordPress, Blogger, or another free site that hosts your blog for you; or alternatively you can set up your own blog under your own domain name.Here I have given some screen-shots and steps for starting a blog in Blogger platform

Step 1: Choose a free blogging software.

Visit the Blogger.com home page and select the "Create Your Blog Now" button to begin the process to start your new Blogger.com blog.

Step 2: Create a Google Account

If you don't already have a Google account, you'll need to create one by completing the form on this page.

Step 3: Sign In with Your Google Account

If you already have a Google account then you can bypass the step of creating a new  Google Account and just sign in with your existing Google account with your own username and password. BTW,every single Google account is valid for entering into the Blogging world .It can be with yours or you can create another if you want your id to be hidden.

Step 4: Name Your New Blog

Enter the blog name and corresponding domain name (*****.blogspot.com') in the spaces provided.

Step 5: Choose a Template

Select a standard template for your new blog.

Step 6: Congratulations - Your New Blog is Active!

Your blog is now live and ready for you to start writing content.

Step 7: Write Your First Post

That's all there is to it! You're now ready to write your first blog post in your new Blogger.com blog and join the blogosphere.

Step 8:Publish

After writing your first post,click publish for the world to see.Success!!You are almost done :)

Once you’re ready to set your blog up you’ll need to choose a good theme and layout for it. There are also thousands of templates available for you to use – a simple search on Google will reveal the ones that will be best suited to your topic.But perhaps the most important question is what you are going to blog about. The whole world is your oyster here – some people blog about their lives in general; some blog about their jobs; some blog about their hobbies; some tell the world about their kids and what it’s like to be a parent, and still others blog about the weird world of celebrities. But whatever you choose to blog about it needs to be something you are passionate about.

Next under Blogging section we will be seeing 

How to make money by Blogging

Category: articles

Read More...

Google Plus one is a new feature by Google to help your blogs/websites to get notified easily in Search engines mainly Google .After a grand 'Au Revoir ' to Google Buzz , its descendant Google Plus One reforms to add more functionality to its Social page Google Plus and offering a social stamp recommending to the public .Adding a Plus One feature into your blog posts recommends it to search engines.The more the plus one ,the more your posts get notified and there ranking in the front page of the Google which in turn increases traffic to your websites.

Adding a Plus One feature is very simple.One way is to use the Google codes which provides a platform to customize and provide you codes of how you want your Plus one button to look like with +1 Snippet.

1. Use  Google Webmasters +1 button to organize your code.Then copy the codes and follow the instructions in the <!--Comment section --> telling you where to place the codes. 

2. Another simple and easy way is add the code yourself into the Edit Html of your Blogs/websites.In there, add a single line ,

<script src='https://apis.google.com/js/plusone.js' type='text/javascript'/>

just below the </head> .

Then, add <g:plusone></g:plusone> where you want to render your Plus One Button.

Appearance :

If you can change the code according to the appearances like Small (15px),Medium(20px),Standard (24px) and Tall (60px) , just change the second code accordingly

Example : <g:plusone size="tall"></g:plusone>

                <g:plusone size="standard"></g:plusone>

To Place in the required place in your Blog Posts 

Use [CTRL + F ] in Edit Html (after expanding ) to find the required codes.

1.In order to make Plus One button to appear below and near the Title of your Blog Posts , place it just below this line.

<div class='post-header-line-1'/>

2.In order to make Plus One button to appear near the entry of the contents ,place the code below this line

<div class='post-body entry-content'>

3.In order to make Plus One button to appear near the end of your blog post in the footer, place the codes just below this line

<div class='post-footer'>

Now, you will have your Google Plus One Button the way you wish it to be in a hassle free way.

Do Plus One this post above if you like this post .

Category: articles

Read More...

Twitter , a famous Social Networking  site also marks way of promoting your page links  through Twitter Resources like Follow Button,Tweet Button,Twitter icons/logos and Twitter Widgets.Using these inbuilt codes in Twitter ,you can customize them to your needs if you have a Twitter account.(check later)

How to add a horizontal scroll for Twitter Tweets?


Backup your templates in case you need them

1. Login Blogger and got to your dashboard-> Design-> Edit HTML

2. Using "Ctrl+F" , search for <b:/skin> by expanding the html codes . Before it place the below ajax codes

/* The container for the module */
   #twitter {
    background: #f1f2f8;
 
    width: 553px; /* Up to you but remember to change the div width below as well if you change it */
    padding: 0 10px;
 
    overflow: hidden; /* clearfix */
 
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    -ms-border-radius: 5px;
    border-radius: 5px;
   }
 
    #twitter h5 {
     float: left; /* We'll make the heading sit on its own line next to the tweets */
     width: 120px; /* Might wanna change this depending on the text in the heading */
     margin: 0;
     padding: 6px 0; /* I'll set the top and bottom padding here rather than in the container so as not to cut off any text */
 
     font-size: 12px;
     color: #4b9fff;
     line-height: 1;
    }
 
    /* The marquee plug-in turns a marquee element into a div */
    #twitter p,
    #twitter marquee, 
    #twitter div {
     float: right;
     width: 430px; /* Container width - heading width - 10px (for some right padding) */
     margin: 0;
     padding: 6px 0; /* Again we set the padding in here so as not to cut text */
     line-height: 1;
    }
 
     /* All the tweets will be links pointing to your page on twitter */
     #twitter marquee a, 
     #twitter div a {
      margin: 0 10px 0 0;
      color: #333;
      text-decoration: none;
     }
 
      /* The i is used to display the date of the tweet */
      #twitter marquee a i, 
      #twitter div a i {
       font-style: normal;
       color: #999;
      }  

The above codes defines how our feeds would like ,basically the skins.Save it (Important).

3. Now, find and place the below javascript code before it

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'/> 
  <script src='http://writershome.googlecode.com/files/jquery.marquee.js'/> 
  <script type='text/javascript'>
      //<![CDATA[ 
   var Twitter = {
    init: function () {
     // Pass in the username you want to display feeds for
   this.insertLatestTweets('writershome');
    }, 
 
    // This replaces the <p>Loading...</p> with the tweets
    insertLatestTweets: function (writershome) {
     var limit = 5; // How many feeds do you want?
     var url  = 'http://twitter.com/statuses/user_timeline.json?screen_name=' + writershome + '&count=' + limit + '&callback=?';
 
     // Now ajax in the feeds from twitter.com
     $.getJSON(url, function (data) {
      // We'll start by creating a normal marquee-element for the tweets
      var html = '<marquee behavior="scroll" scrollamount="1" direction="left">';
 
      // Loop through all the tweets and create a link for each
      for (var i in data) {
       html += '<a href="http://twitter.com/' + writershome + '#status_' + data[i].id_str + '">' + data[i].text + ' <i>' + Twitter.daysAgo(data[i].created_at) + '</i></a>';
      }
 
      html += '</marquee>';
 
      // Now replace the <p> with our <marquee>-element
      $('#twitter p').replaceWith(html);
 
      // The marquee element looks quite shite so we'll use Remy Sharp's plug-in to replace it with a smooth one
      Twitter.fancyMarquee();
     });
    }, 
 
    // Replaces the marquee-element with a fancy one
    fancyMarquee: function () {
     // Replace the marquee and do some fancy stuff (taken from remy sharp's website)
     $('#twitter marquee').marquee('pointer')
      .mouseover(function () {
       $(this).trigger('stop');
      })
      .mouseout(function () {
       $(this).trigger('start');
      })
      .mousemove(function (event) {
       if ($(this).data('drag') == true) {
        this.scrollLeft = $(this).data('scrollX') + ($(this).data('x') - event.clientX);
       }
      })
      .mousedown(function (event) {
       $(this).data('drag', true).data('x', event.clientX).data('scrollX', this.scrollLeft);
      })
      .mouseup(function () {
       $(this).data('drag', false);
      });
    }, 
 
    // Takes a date and return the number of days it's been since said date
    daysAgo: function (date) {
     // TODO: Fix date for IE...
     if ($.browser.msie) {
      return '1 day ago';
     }
 
     var d = new Date(date).getTime();
     var n = new Date().getTime();
 
     var numDays = Math.round(Math.abs(n - d) / (1000 * 60 * 60 * 24));
     var daysAgo = numDays + ' days ago';
 
     if (numDays == 0) {
      daysAgo = 'today';
     }
     else if (numDays == 1) {
      daysAgo = numDays + ' day ago';
     }
 
     return daysAgo;
    }
   };
 
   Twitter.init();
   //]]>
    </script>

Replace writershome marked in red with your own twitter id in the above code. Again, Save this template(Important)

4. Next, go to the Page elements and add a HTML widget and paste this below code

<div id="twitter"> 
                        <h5>Latest tweets</h5>
    <p>Loading...</p> 
 
   <noscript>This feature requires JavaScript</noscript> 
 
  </div>

5.Save it and now view your blog ..tada :)

Finally I have learned how to do this in a easy way : D

Category: articles

Read More...

Adsense is an important tool by Google targeting the advertisers to cast their ads and publishers to promote their web sites by providing links in blogs and websites.This in turn provides the content writers as a way to earn publishing ads relevant to their content.The other is through Adwords -  a paid advertisement to drive traffic to your website.

We can set up the adsense code by two means : one is by the Adsense build-in widget and the other is by getting the codes from Adsense setup.The former is done by going to your dashboard and then click add gadget .There, again click Adsense .You will be provided with a pop-up where you can select the type of ad your site needs and click save .(See the image below)

Use and Limitations:
This type of ad can be placed only through three ad units in the blogger which means that your ad place is limited like say you cant place the built-in Adsense ads within a post.Another limitation is that you can’t use channels to track the performance of each ad units.This limitation can be overcome by  getting the code directly through your Goggle Adsense.

Getting Adsense codes from Adsense setup
You might have noticed the below image in your Adsense account,In there, click Adsense Setup and follow the steps directed in creating your ads :

and get your codes .

After getting your Adsense code from the Adsense website , do the following :

1. Parse the code to replace special characters with HTML entities [Important- see below]
2. In Blogger, go to Layout, then choose Edit HTML.Dont forget to create a backup of your template by clicking Download Full Template
3. Click Expand Widget Templates and search for <data:post.body/> or <p><data:post.body/></p>
4. Place your Adsense code on the line immediately above this
5. Finally ,save the template

Note : Place your adsense code within a floating div, so that the text wraps around it.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <div class='post-body entry-content'> <div style='float: left;'> &lt;script type=&quot;text/javascript&quot;&gt;&lt;!-- google_ad_client = &quot;pub-xxxxxxxxxxxxxxxx&quot;; google_ad_host = &quot;pub-xxxxxxxxxxxxxxxx&quot;; google_ad_slot = &quot;xxxxxx&quot;; google_ad_width = 336; google_ad_height = 280; //--&gt; &lt;/script&gt; &lt;script type=&quot;text/javascript&quot; src=&quot;http://pagead2.googlesyndication.com/pagead/show_ads.js&quot;&gt; &lt;/script&gt; </div> <p><data:post.body/></p>

Your code will look like the above .This helps in getting your ads wrapped along with your contents in your blog posts.Placing adsense codes inside blog posts helps in getting more clicks which in turn helps you to increase your CTR. Remember,that blogger displays only three ads unit maximum, so if you have more than three than your extra ad is likely to be blank.

Parsing Tool

Happy Adsensing!

Category: articles

Read More...