Adding Google Plus Share Button In Blogger

In the last post, I had written about what is Google Plus, read here. Actually, the new features like Google Plus will help blogger to connect closer to reader because you have another more alternative social network to share what had been posted your article recently. In this tutorial, i would like to show you with two ways of adding Google Plus. The screenshoot will look like below

The first way is to add on your sidebar as a widget, for this way is not so difficult just follow simple steps below:

1. Visit Google plus button official site.
2. To create a custom +1 button, you need to choose size in this case there have 4 size like small, standard, medium, tall as well as what language you want to use it. For button review you can see on the right side.
3. Below custom attribute, there has a script just copy and paste the following code into your Blog.
4. Log in to your blogger account, choose design> add HTML widget, paste here and save it.

The second way can be done by adding script in your HTML code, all you have to do is to follow guides below:

1. Go to blogger Dashboard > choose Design > Edit HTML.
2. Before add or change something make sure you back up your template.
3. Next, you must tick the Expand Widget Templates checkbox on top right of the code window.
4. Find the code below in your HTML:

<data:post.body/>

5. After you find it, Paste the Google plus button code immediately below (after) it:

<!-- Google +1 button Start -->

<b:if cond='data:blog.pageType != "static_page"'>

<p></p>

<div style='float:left;padding:10px;'>

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

<g:plusone expr:href="data:post.url" size="standard" count="true"></g:plusone>

</div>

</b:if>

<!-- Google +1 button End -->

6. You can replace the size of by replacing the value of  size attribute. (change red color above with one of them : small, standard, tall or medium)
7. For changing the button positioning if you wish, if you want to position it on top of post just place the button code before (instead of after) <data:post.body/>. And for Position on the right just change the float in line 4 from left to right.
8. Save and look the result, the Google +1 button will appear on your Blog. Cool right. Watch Video here.

How To Add Related Post In Your Blog

If we look at on every Blogger site, when you are finishing read the article, sometimes they have another suggestion like related post or "you might also like". This means that you may find another aticle which provide similar topic related with the topic you has been read before. Actually, by adding this feature it can help you get comprehensive article so that you know much better than just one topic. the best thing if you add this feature is to make reader stay longer in your blog because they will find more than one interesting articles in what they look for. This is also increase the chance of subscribing your Blog because they think this blog provide much information. The screenshoot will look like below picture:

Today, i would like to help you how to make related post. Ok, just follow some simple step below:

• Firstly, come visit www.linkwithin.com this site will healp you to create related post like professional. Fill up all information on the box below, you also can choose how many relate article will be appear on your Blog.

                                  

• After that you will see the instruction how to add linkwithin in your Blog, just follow these instruction and click install widget.

• Next, you will choose where you want to add this feature in your Blog, then "Add Widget"

• finally, you will see the related post "You might also like" appear on your Blog, in my suggestion, place this feature on the botton of article page. This will help people find easily especially after they read the article and you can provide some suggestion articles with picture as well. good Luck

How To Add Or Change Favicon URL Address In Blogger

Hi all, have you ever notice when you come into other blog, there have an image next to the web address which is called “Favicon” means Favourit Icons. It is usually suppose to be “Blog icon” right, can we change the icon with our own image? How to change it? Today post I am going to share and tell you how to change blog icon with your own icon. Furthermore, this can make your Blog look professional and of course looks better than original Blog icon.

Actually, you can create the icon in many ways like using photoshop, using favicon generator, download any software like imagicon, Dynamicdrive site or even using Google page creator. The most important are these sites must be able to convert the image into “.ico” format, because most of them always use ico format. Moreover, the best size is to create 16x16 or 32x32.

All you have to do is to follow my simple steps below:

• Firstly you must have or change image to .ico format or it is possible to have other image .png,.jpeg,.gif format as well. I use gif format.
• To get any format above, you can use favicongenerator visit here http://www.favicongenerator.com.
• Click at the Browse button to insert any image you want to use it.
• Click at Generate Favicon button.
• After the process is complete, click at "Click Here to Download your favicon".
• Save into your hardisk
• Next is you must upload your Favicon to free image hosting, I choose picasa because belong to google and support Blogspot as well (read article here how to upload photo in Picasa).
• To get URL address (Note: make sure you set to public when you upload the image), simply click your image that you have been downloaded from favicon generator then on the right side tick “Image only (No Link)” and copy URL “embedded image” see screenshot below:

• Then copy the URL address like below screenshot:

• Now, Login to your blogger acccount
• Choose Layout > Edit HTML  
• Make sure you Download full template (Important Note: this is important in case of anything goes wrong).
• You need to find the code:   <title><data:blog.pageTitle/></title> click Ctrl+F to find it.
• Place the code below just after above code (change and paste code the URL address in the red color).

          <link href='YOUR URL ADDRESS' rel='shortcut icon'/>

• Click "Save Template" button.

While you can see the Favicon in Mozilla Firefox, many have problems seeing the Favicon in Internet Explorer. This is a known problem and has been a sore point with many IE users. In some versions of IE, bookmarking the site will display the Favicon. This is not necessarily so in IE7 that we are using. In fact, when we bookmarked the highly popular search engine sites, their Favicons don't show in our IE bookmarks too although they show well in Firefox. Perhaps this is one more reason to download Mozilla Firefox if you have not already done so. Good luck see you on the next post. Happy Blogging

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". 

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

How To Add Textarea HTML Code In Blogger

On the previous post we had learned so many things about blog tutorial, hope you can definitely get many benefit. By the way, at the time you are visiting any blog tutorial, you will notice some of them may use the box which called “Textarea”. It is very useful to place any HTML code like a script inside the box. The benefit is of course you can save space as many as possible. Moreover, do you know that if you are putting so many codes or have a long sentence, sometimes it will take much space so that the article looks very long. This way is not good for your article beside that people may lazy to read because too long. That is why I would like to help you in order to make it simple and efficient. By using textarea around your post area, you will be able to save space as many as possible. Basically, textarea is used by webmaster to put some HTML code and it will look more professional.

Ok, let start now by following my instruction below:

1. Firstly, Log in to your blogger Account
2. Choose New Post
3. By the time you want to insert the code just choose edit HTML, paste the code around your post 
4. Generally, there have many type of making textarea, let me show you one by one

Textarea Wrapping

<textarea cols=”20 row=”5” wrap=”hard”>

Type Your text area in here

</textarea>

<br /> <br /> Type Your text area in here<br /> <br />

Textarea No Wrapping

<textarea cols=”20 row=”5” wrap=”off”>

Type Your text area in here

</textarea>

<br /> <br /> Type Your text area in here<br /> <br />

If you want to add color as well just add the following code below

<textarea name="code" rows="2" cols="42" style="background:#A9F5A9;  color:#295F00; border:2px #295F00 dashed; line-height:1.5em;  padding:5px;"> TYPE YOUR TEXT AREA IN HERE </textarea>

TYPE YOUR TEXT AREA IN HERE


The red color above you can change it according to what you like. And the blue color is where you write your text or insert your HTML code. The wrap attribute refers to how the text reacts when it reaches the end of each row in the text field. Wrapping can be one of three settings such as soft, hard, off

• Soft forces the words to wrap once inside the text area but when the form is submitted, the words will no longer appear as such (Line breaks will not be added).

• Hard wraps the words inside the text box and places line breaks at the end of each line so that when the form is submitted it appears exactly as it does in the text box.

• Off sets a textarea to ignore all wrapping and places the text into one ongoing line.

5. Choose one of script HTML code above, Copy and Paste the code into your post (you can place the code anywhere around your post)

6. Then save it, to look a preview just view Blog. If nothing is wrong you will see the textarea appear together with script code inside the box. All are easy right, optimize your Blog now and “NEVER STOP TO LEARN” guys. See you on the next post. Good luck