Tuesday, September 21, 2010

Getting a Domain or a Web Hosting, or Both

Difference between getting a domain or a web hosting, or both.
Why purchase a custom domain name?
Why purchase a web hosting?
Can I just purchase a custom domain for Blogger?
Why purchase a custom domain and a web hosting?
Explanation of getting a domain and a web hosting.

domain name extensions

---

Why purchase a custom domain name?

You purchase a domain because you want your website or blog to have a better link address. Unlike having a totally free blog on Blogger.com or Wordpress.com, where you're given a sub-domain like "abc.blogspot.com" or "abc.wordpress.com".

Getting a custom domain is basically about making it cooler, and probably shorter without the "blogspot.com" and "wordpress.com" extension. That means you get to have "abc.com" or "abc.net" etc.

---

Why purchase a Web Hosting?

Getting your own web hosting means you're having your website hosted, but with a fee included. You can pay it monthly, or yearly depending on your preference. However, sometimes it'll be cheaper if you pay yearly.

When you're on Blogger.com or Wordpress.com, you're actually hosting your blog on their site. Furthermore, it's free-of-charge and you don't have to worry about the hosting issues. You'll only be given the blogging interface and you blog, that's all.

But when you're on an external web hosting, you'll need to download a blogging platform (Wordpress is the common one), install it on the web host, set up your database, redirect your domain and blog.

---

Can I just purchase a custom domain for Blogspot?

Yes you can. If you have a blog on "abc.blogspot.com" and you purchase "abc.com", both links will bring you to the same blog/website.

In fact, you can purchase it via Blogger itself. Read: How to buy a custom domain for Blogger.

In this case, there's no new blog or old blog when you've only bought a domain for your Blogger.com blog - it's actually the same. Just the address has changed.

---

What about purchasing a domain and a web hosting?

For this matter, you'll have to host a self-hosted Wordpress (or your preferred blogging platform) blog, unlike Wordpress.com and Blogger.com.

If you get a web host, downloaded and installed Wordpress, it's a new Wordpress blog. (Click here to download Wordpress from Wordpress.org)

Don't worry about leaving your old Blogger.com blog posts, because you can import your old entries - there's a function in Wordpress that allows you to import entries from other blogs.

After you've gotten yourself a web host, "abc.blogspot.com" and "abc.com" (or any new domain) are two DIFFERENT websites.

Take note: Wordpress.com and Wordpress.org are not the same.

---

Simplified Explanation

Blogger with added domain = Same house, new address. But still use the old address.
Migrate to self-hosted Wordpress = New house, new address. Old address will bring you to your old home.

Saturday, September 18, 2010

How to Add Facebook Like Button on Blogger

How to add Facebook Recommend Button on Blogger blog?
How to add Facebook Like Button on Blogspot blog?
How to customize Facebook Like Button on Blogger?
How to customize Facebook Recommend Button on Blogger?

You want to add the official Facebook Like or Recommend Button at the end (or at the top) of each of your blog post, here's how.

facebook like button

Firstly, go to Dashboard > Design > Edit HTML. Then click Expand Widget Templates.

Search for this code:

<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->

Then, here's the code to add the Facebook Like Button.

<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/>

---

Where to add Facebook Like Button?

To add it above each blog post, add the code before <data:post.body/>.

To add it after each blog post, add the code after <div style='clear: both;'/> <!-- clear for photos floats -->.

To distance the button away from the blog post, add <br/> before or after the Facebook Like Button code depending on where to put it.

Click "Save Template" and you're done.

---

How to customize Facebook Like Button?

1) To show Facebook Profile pictures/faces of people who "Liked/Recommended" the blog post, change "false" to "true".

2) To use different action on the Facebook Button, change "like" to "recommend". Decide which is suitable for you.

3) To change the font, change "arial" to either "lucida+grande", "segoe+ui", "tahoma", "trebuchet+ms" or "verdana". Decide which is suitable for you.

4) To change the colour scheme, change between "light", "dark" or "dark". It represents the background colour your blog uses. If it's light colours use "light", if it's dark use "dark" and "evil" is somehow the same.

5) To change the width or height of the button, change them accordingly.

That's all for now!

Wednesday, September 8, 2010

How to Add Signature to Blog Posts

How to add signature to blog entry?
How to add photo at the bottom of blog post?
How to add photo at the bottom of each blog entry?
How to add image at the bottom of each blog post?
How to include signature at the blog post?
How to include signature to blog entry?
How to include photo at bottom of blog post?
How to include image at the blog post?

You want to add a permanent signature or a picture at the end of each of your blog post, here's how.

blog signature

Firstly, go to Dashboard > Design > Edit HTML. Then click Expand Widget Templates.

Search for this code:

<data:post.body/>

You'll need to include the signature below this code. There are 2 types of including signatures - Text and Image.

---

Signature 1 - Text

Then write your signature text below the <data:post.body/> code, and preview it so that you can make adjustments.

If it appears on the line right after the blog post ends, you can include <br/> before the signature text so that there will be a space between them.

That's it if you just want to have a text signature at the bottom of each of your blog entry.

---

Signature 2 - Image

You want to have an image as your signature, you should add this code below the <data:post.body/> code instead.

<img src='http://imagelink'/>

Replace the http://imagelink with your signature image URL link.

By default, it's aligned to the left.

To align it to the center, use this code.

<center><img src='http://imagelink'/></center>

To align it to the right, use this code.

<div style='text-align: right;'><img src='http://imagelink'/></div>

Remember to replace the http://imagelink with the your image URL link.

Preview, make adjustments with line break code - <br/> - if necessary. Save it and you're done.

---

If you want the image to have an invisible background, meaning that you just want the signature image/text to be displayed only without the background - you'll have to create one for yourself (with Photoshop) and save it as .png or .gif file without any background layer.

Monday, September 6, 2010

Blogger in Draft New Widgets - Popular Posts and Blog's Stats

How to add Popular Posts widget on Blogger blog?
How to display popular posts on Blogger blog?
How to show popular posts on Blogspot blog?

How to add Blog Stats widget on Blogger blog?
How to display blog's visitors and page views stats on Blogger blog?
How to show blog traffic statistics on Blogspot blog?

Blogger in Draft is out with 2 new widgets - the Popular Posts widget and Blog's Stats widget.

blogger popular posts and stats new widgets

Take note, they can only be seen when you're on Blogger in Draft. The normal Blogger doesn't have it yet.

On the Popular Posts widget, these are the available settings.

blogger popular posts widget

You can set the most view posts duration period and whether to include an image thumbnail (which is normally the first picture of the blog post) and also the snippet.

Unfortunately you can set the number of displayed blog posts right now. The fixed number is 10. Hopefully Blogger will add in the blog count feature as well later on.

On the Blog's Stats widget, these are the available settings.

blogger stats widget

Here, you can edit the stats style and the options.

That's all for now. Hopefully these additional Blogger widgets are useful for some of you!

Friday, September 3, 2010

How to Add Floating Twitter Button on Blogger Blog

How to add twitter button on Blogger blog?
How to add Follow Me on Twitter badge on Blogspot blog?
How to add Follow Us on Twitter badge on Blogspot blog?
How to add Twitter Follow Me button on blog?
How to add Twitter Follow Us button on blog?
How to add link to Twitter page on Blogger blog?

Firstly, go to Dashboard > Design > Edit HTML.

follow on twitter button

Then search for </b:skin> and add this code before it.

#twitter-follow { border: 0; position: fixed; top: 300px; right: 0;}

To change the position of the Twitter button, you can change "300" (distance from the top) and "right" to "left" if you want the button to be on the left.

Then search for </body> and add this code before it.

<div id='twitter-follow'> <a href='http://twitter.com/username' target='_blank'><img alt='Follow Me on Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOeKg0AmdWXOgzJz0JyWO5QasvsrKDYSPnuqeC2K1rWQe5ybvjACGYGD7w83RTTRISQrRS_-O0oRifxW6dm9VELAPytZelI_rmYgP3P33xLLub_m1DiA2VFslKwU_0GUtpEIws53DM4Hc/s1600/twitter+follow+me+button.gif'/></a></div>

twitter follow us button

Remember to change the "username" to your Twitter account username.

If you want it to be "Follow Us on Twitter", use this image link - https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9Y0E-SZ3sob3A3dgnKcz4NrxLk5tbYObJcll-XqNoljLbB0BAJtboX_D1QexX89sffI3X_XDxMSaklAojuWLAClIOlcXBLrFRJi4GkkRFqAbkGOMg_i0wvQdUNc3Shz-5za35lP32To8/s1600/twitter+follow+us+button.gif

twitter follow us button

Enjoy and all the best in getting more followers on Twitter!

Related Posts Plugin for WordPress, Blogger...
Follow Me on Twitter