Add Star Rating On Blogger post

If we go searching on the internet and we read some articles on Blog, sometimes we wonder how to rate this Blog? is there any tool to rate how good article?. Moreover, giving a comment is the common way to show their expression about article. Now, there have a tool of making a rating to show how good the article is which is called "Star Rating". Adding star rating widget help you to know how good your article. it means that after you write the article and post it, when people read and interest with the article they can determine by clicking any rating here. One site that provide the best widget rating star is www.outbrain.com. Today Blog tutorial i will share how to add star rating on Blog. The screenshot will look like below:

O)k, let's begin to do it, all are easy as long as you follow my instruction below:

• Open to www.outbrain.com
• Choose "Get Blog Widget", select thumbnail and star rating the picture like below:

• Next, choose your platform, in here you choose "Blogger blogspot", and check i agree then "Install"

• You will be brought to your Blogger account, log in and select a blog and title, then "Add Widget"

• Finally you can see the widget star rating appear on your Widget. Easy right, keep making Blog look more professional with following me. See you on the next post "HAPPY BLOGGING". 

How To become Hostgator Affiliate marketing

In some previous post we already learn so many thing about blog tutorial. Today i want to share with you relating about how to make money online through affiliate program and one of the best affiliate program is "Hostgator". what is Affiliate program? you can read here. This is a webhosting affiliate program which is popular at this moment with a cheap price. Moreover, with many webmaster use this as their hosting for business, we can take a big opportunity to become affiliate marketing by selling to them. Beside that, you also be able to get money from your referral means that people sign up under your url or name. some of benefit that Hostgator offer to you can be seen below picture: "INTEREST?"

let's start making money now, follow some simple steps below to add hosgator link affiliate:

• Log in to hostgator http://secure.hostgator.com/~affiliat/cgi-bin/affiliates/clickthru.cgi?id=alxsnr
• Sign up to be affiliate hostgator

• Under hostgator affiliate, you will see many features availabe there, choose "Banner Link"
• Here you can choose what type both dimension and category of banner you want to appear on your blog. Let's say you choose "View Shared Yellow Banners".

• Click Get code and copy all script
• Now, log in to blogger account
• Choose design > Add Gadget > Add HTML
• Paste code here and save it
• It is done, you can see by clixk view blog and your hostgator banner appear on your gadget. All are easy right.

When people buy through your affiliate program under your name, they will pay out to you and the good thing is Hostgator does not make any minimum payout, no matter how many you can sell it, they will pay you out. But, mostly the payout is about 60 days after people do a registration and using a Paypal.

Customize Feedburner by Adding Background Image and Color

One thing that i want to share for today post is how to make your subscribe email become more beautiful by adding some color as well as background picture. This is great for improving your blog appearance. Considering a Blog design is one of important part bacause people always look at your design before they decide whether they are subscribing or not in stead of rich content. OK, let's begin to do a Blog tutorial for modifying sunscribe email. The famous subscribe tool like feedburner always be used by webmaster (if you have not register yet to feedburner, read my last article here). We are gonna learn 4 simple steps below:

STEP 1 Change Background Color

• Firstly, the original feedburner code will look like below:

<form style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Your Feed ID', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Enter your email address:</p><p><input type="text" style="width:140px" name="email"/></p><input type="hidden" value="Your Feed ID" name="uri"/><input type="hidden" name="loc" value="en_US"/><input type="submit" value="Subscribe" /><p>Delivered by <a href="http://feedburner.google.com" target="_blank">FeedBurner</a></p></form>

• All you have to do is to find the code below:

text-align:center

• Then add script ;background:#00CCFF;"  

<form style="border:1px solid #ccc;padding:3px;text-align:center;background:#00CCFF;"


STEP 2 Add a Background Image

• find the code below

text-align:center;background:

• Add the following script something like this url(http://www.example.com/image.jpg);" 

 <form style="border:1px solid #ccc;padding:3px;text-align:<br /> center;background: url(http://www.example.com/image.jpg);"



STEP 3 Change The Width Of the Textbox

• Change the width with any number pixel and try more until suit with your Blog width:140px (change the red color)

 <input type="text" style="width:140px" name="email"/>

• If you want to change the height of the textbox just simply change height:20px (change the red color)

 <input type="text" style="width:140px;height:20px;" name="email"/>



STEP 4 Remove "Delivery by Feedburner" Link

• you need to find the script below and remove it 

<p>Delivered by <a href=http://feedburner.google.comtarget="_blank"><br /> FeedBurner</a></p>

How To Create Facebook Developer In Blogger

Last post we ever talk about how to connecting the most popular social network like facebook. Recently, there have so many application and webmaster which teach you to connect it, of course they have their own way to apply it. Basically, under facebook developer they also have many variety of facebook plugins to help you connect with them. Some of plugins that facebook already have like showing below:

• Activity Feed
• Comments
• Facepile
• Like Box
• Like Button
• Live Stream
• Login Button
• Recommendations
• Send Button

All above facebook plugin has own unique appearance, so that you can get what you like and suit with your Blog. Today I want to tell you how to place it into your blog widget. All you have to do is just follow some simple steps below:

1. Visit http://developers.facebook.com/docs/reference/plugins/activity/ to come into facebook developer.
2. If you see on the left side, there have at least 9 difference plugin, you can put more than 1 plugin, just choose where you like “click it”.

3. Next, before you get the code, it is better you do an adjustment such as width, height, color scheme, font and border color. The preview of each plugin is shown beside the box. Click “Get Code”

4. Next, the code will appear whether you want to use iframe or XFBML (for Blog choose iframe). Copy and paste the code into your Blog.
5. Log in to your Blogger account > choose design > add gadget > choose HTML (paste the code here and save it).
6. Now see by click preview your Blog, your facebook attribute will appear on your side as a widget. Very simple right? You can see my blog also use facebook plugin. See you on the next post.  

How To make Label Scroll Function In Blogger

How To make Label Scroll Function In Blogger

How does your blog guys? I hope you have many improvement on your Blog. Along this week, I was surfing on the internet from one Blog to another Blog and I look at the sidebar which some of them create a “Label”. This was actually good to create a Label so that people will know what kind of category they have. But, for Blog which has a many categories, this goes down vertically so long that take more space. Alternatively, I think that why do not make it shorter in order to look professional. For those of you who have many categories, it is better to make it label scroll. The screenshot will look like below:

Looks great right, Today I would like to tell you how to make Label scroll on your Blog, simply follow my steps below:

1. Log in to your blogger account
2. Choose design and Add gadget to choose Label
3. Give name of topic, let’s say “Category” then save it.
4. Now, go to edit HTML
5. Remember always backup your template (this will help you if anything goes wrong in adding or changing HTML code).
6. Find the script like below

<b:widget id='Label1' locked='false' title='category' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
<div style='overflow:auto; width:ancho; height:250px;'>

<b:if cond='data:display == &quot;list&quot;'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>
</li>
</b:loop>
</ul>
<b:else/>
<b:loop values='data:labels' var='label'>
<span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span class='label-count' dir='ltr'>(<data:label.count/>)</span>
</b:if>
</span>
</b:loop>
</b:if>
<b:include name='quickedit'/>

</div>

</div>
</b:includable>

</b:widget>

7. Some of you may have the code like below, try by use CTRL+F and find the code below, means that you must add the code with red color immediately BELOW this code.

<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'> 

8. or if you do not find code above try to find alternative code below

<div class='widget-content'>

9. The only thing you have to focus is the red color, means that you just need to add the code with the red color above in between, do not wrong place the red color code. Just simple follow the same script above. Save it.

10. You can definitely change Height:250px to suit with your Blog, try it until you get it right. Keep making a professional Blog.

Creating Read More To Your Blog

If you have a good article and this may take a long reading, it is better you make it short while you are posting your article on your Blog. For Blog tutorial today, we learn about Read More. One of best way is by creating a “Read More”, means that you write a long content but you just need to show in the beginning of your article or a half of article only, you cut the rest. Moreover, using read more will make good looking on your Blog appearance and professional. Most people read the title first and go on to the beginning of the article, if they feel interest they can click read more to read the rest of your article. Does look good right? Ok, let me show you how to do it

I will guide you step by step so that you can create successfully, there are two part of doing it:

PART I

1. Log in into your Blogger Account
2. Click Setting
3. Choose format
4. on the bottom page under format there have an empty box, now you need to fill up the code below inside the empty box

<span class=”fullpost”>

</span>

5. Then Save it

PART II

1. Choose Design > Edit HTML (important note: do not forget to backup your template )
2. check the box Expand Template Widget
3. Find the code below, use CTRL+F to search the code

            <data:post.body/>

4. Or another code like below

             <p><data:post.body/></p>

5. After you find it, replace the code above with the following code below

        <b:if cond='data:blog.pageType == "item"'>
        <style>.fullpost{display:inline;}</style>
        <p><data:post.body/></p>
        <b:else/>
        <style>.fullpost{display:none;}</style>
        <p><data:post.body/>
        <a expr:href='data:post.url'><strong>Read More...</strong></a></p>
        </b:if>

6. Save the template.

In addition, you can definitely change the sentence of “READ MORE” with any sentence like “CONTINUE READING”, or anything else. I am going to show you the way of using read more like example below:

Write Here to show of your article until where you want to cut it<span class=”fullpost”>Write the rest of your article Here</span>

The result looks like below:

The best thing to improve our Blog is by using search engine optimization and this Blog provides any blog tutorial step by step to help people modify easily read more....

How To Change Sidebar title Customization In Blogger

Last post we already learn how to make a box separately on each gadget, but sometimes having just box is not good enough without background color on the title of gadget especially for sidebar position. Today, let me show you the way of changing sidebar titles customization. In this section, you will be able to add background color as well as picture next to the title. Moreover, we divide into three tutorial such as adding background color, adding background picture behind sidebar title, adding background picture instead of title.  To do this tutorial we need to modify a html code but do not worry, all are easy as long as you follow my guidelines.

Let’s begin, Adding Background Color tutorial

• Firstly, Log in to your Blogger account
• Choose design > edit HTML
• Before you change or add anything, please backup your template first (very important)
• Find out the code ]]></b:skin> , if you feel difficult to find it try CTRL+F
• After you find it, place the following code below ABOVE ]]></b:skin> something like below

              .sidebar h2 {
              background:#E17820;

              margin:0;
              padding:0 0.2em;

              line-height:1.5em;

              }
              ]]></b:skin>

• Then save it, the green color means you can definitely change the color what you like, you can find the color code here. Furthermore, suit your sidebar by adjusting margin and padding (I recommend to often try it until match with your gadget).

Adding Background Picture tutorial behind sidebar title

• Create the picture usually using Photoshop and the picture i used is 220px wide, and has 53px height.

• When the pic is ready, you have to upload it to a free web host like Photobucket, Picasa, TinyPic to get the URL. Now, insert the following code below the same like above and change the green color with your picture URL.

             .sidebar h2 {
             background:url(URL OF THE PICTURE)no-repeat;
             margin:0px;
             padding:0px 0.9em;
             line-height:53px;

             }

             ]]></b:skin>

• Then save it, adjust alignment both margin and padding until you get it right.

Adding background Picture instead of title

• Now, this is a cool one. The idea is to remove (hide) the default header of sidebar title, and to place a picture (image) instead of it.
• You need to make the picture or find one that you like. make sure that your pic will fit in the sidebar without being cropped. size it properly. try a few times, and you'll get it.
• Next, upload it to a free web host like Photobucket, Tinypic to get the URL address.
• Go to template Layout > Page element, and click on Add a Gadget in the sidebar. Choose HTML / JavaScript from the list. Place the following code inside the box (leave the title empty) just change the green part with the URL address of your hosted picture, Save Settings.

           <img src="URL OF YOUR PIC"/>

• Now, there it is. only thing left to do is to arrange it ("drag" it), so the Gadget with a picture will be above the "Blog Archive" Gadget. Like so:
  that's it. Do the same for "Labels", "About me" and everything else you want

Finally, you can create three different way of your sidebar title and the best thing is you also can combine three of them or use your creation to make it beautiful. Good Luck