Thursday, April 22, 2010

How to Add a Widget Beside Blogger Header?

I am using a three column template and I want or Page Element just beside my Blogger's header / title, so I can easily , texts, links or other things.

So, here is the . This will also work for two columns template.

1. Log-in to your Blogger Account and click Dashboard.

2. Go to Layout, then go to Edit HTML.

3. Look for the code below and add , width: 400px;

#header {
margin: 25px 80px 0;
width: 400px;
text-align: left;
color:$pagetitlecolor;
}

4. Copy the code below and just after the code above.

#header-right {
margin: 5px;

width: 250px;
float: right;
color:$pagetitlecolor;
}

5. The code should look like this.

#header {
margin: 25px 80px 0;
width: 400px;
text-align: left;
color:$pagetitlecolor;
}

#header-right {
margin: 5px;
width: 250px;
float: right;
color:$pagetitlecolor;
}

6. Now, look for another code in your template.

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='YOUR BLOG TITLE (Header)' type='Header'/>
</b:section>
</div>

7. the code with the code below.

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='YOUR BLOG TITLE (Header)' type='Header'/>
</b:section>
<b:section class='header' id='header-right' showaddelement='yes'>
</b:section>

</div>

8. Now, you have divided the header's section. Go to your Page Elements' area and you add a new .

You can always the width to perfectly fit your title/.

Enjoy!

How To Remove Header Borders in Blogger?

How To Remove Header Borders in Blogger

Do you want of your / title in your Blogger blogsite? If yes, just follow the simple steps below.

1. Log-in to your Blogger Account.

2. Dashboard and click Layout, then Edit HTML.

3. Look for the codes below.

#header-wrapper {
width: 80%;
margin:0 auto 25px;
border:1px solid $bordercolor;
}

and

#header {
margin: 20px;
border: 1px solid $bordercolor;
text-align: left;
color:$pagetitlecolor;
}

4. Remove or delete the code

border: 1px solid $bordercolor;

5. Click Preview to see the results and when you are done.

You have successfully !

Just incase you change your mind and you want the again in your Blogsite's / header, follow the same step above and add this code (border: 1px solid $bordercolor;) again.

Sunday, April 18, 2010

How To Add Widget Below Blogger Header?

 above or below the title / header of my is not as complicated as I thought. You just need to follow the instructions in order to create a new widget or element like the sample image below.

-----------------------------------------------------------------------------

-----------------------------------------------------------------------------

Once there is an element, you can also apply and save other applications like Adsense.  above.


And here is the technique:

1. your Blogger Account.

2. Go to Layout and to Edit HTML.

3. Click Download Full Template and save it. It is important to have a of your template, in case something goes wrong.

4. Find the code below. One way to easily locate the code is to click CTRL+F, then type section class and click Enter.

<section class="header" id="header" maxwidgets="1" showaddelement="no">

5. Change the code with the one below.

<section class='header' id='header' preferred='yes'>

6. Save the template.

7. Go to back to Layout then .

8. You can see that a new element has been added just . Now, click Add a Page Element.

9. You can choose and add a widget that you want, for example .

10. If you want the widget (ex. Adsense) to be placed exactly below the header, go back to Page Element section and simply drag the widget.

11. Click Save at the top of the page when you are done.

If you want the Adsense to appear as (the same as what I did with the image above), look for Adsense in Page Element area and click Edit. Change the format to 728x15 horizontal row.

That's all.

Saturday, April 17, 2010

How to Create a Background Image in Blogger?

to a blogsite is one way to enhance its appearance. It helps the site to look attractive and unique. Blogger did not provide a menu or to easily add our own images, however, there are other ways to apply this in our blogsites.

Here are the steps.

1. the image that you want to add as a background in your site. The usual size for a background image is 1024 (width) x 768 (height) and in a jpeg format.

2. Copy the url or the of the image (ex. http: //imageshack.us/image.jp). If you want to use your own picture, you need to upload it first to , like imageshack, photobucket, tinypic and imageboo.

3. Go to your Blogger account - Dashboard - Layout - Edit HTML and click 'Expand Template Widget'.

4. Find the code below.

body {
background-image: $bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

5. Change the code above with the new code below.

body {
background-image: $bgcolor;
background:#fff url("http://img72.imageshack.us/img72/1516/pen4bg.jpg");
background-position: top-left;
background-repeat: no-repeat;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

6. Save the template and view your blog.

That's all! You have already created a background image in Blogger / .


Note:

1. For background-position, you can choose other options such as center, right, left, bottom, top, top-right, etc.

2. For background-repeat, you can other options such as repeat, repeat-x and repeat-y.

Friday, April 16, 2010

Best Three-Column Blogger Template Tutorial

how to create a three column blogger template

I often see some blogsites having a and I begin to wonder, 'How can I also do that?'.

I'm actually using Minima Template in Blogger or blogspot with . I really want to expand it so I can maximize the space and thus I can place more widgets on it. I already looked around because maybe there are buttons that must be clicked in order to template for my blogsite. But in this case, there are no buttons to be clicked.

There are , but you must do it manually in 'Edit HTML', where you need to change or add some codes in your template. But no worries, it doesn't require a blogger to be a programmer in order to do the coding. Everyone can possibly turn their 2-column blogsite into a three column one (like this blogsite).

I try a lot of , but this site gives the best result. The templates are also for free and the instructions are , even if you're just a newbie like me. So, if you also want to create a three column in your blogger template, I suggest to use this link, Zimbio Three-Column Template.

How to Hide Blogger Navigation Bar?

Improving my own blog site is fun and challenging, yet technically complicated especially for beginners, like me. But still, it feels good that I succeeded in applying some changes in this site, like hiding the or Navbar. I think, changing or adding some codes in the template requires full concentration and patience from a blogger.

how to hide blogger navbar

Some blogger may want or delete the horizontal navigation bar on the top part of the blogsite, but I suggest to just hide it, for it might be a of blogger rules. Better check their policies for more detailed information.


Here are some easy steps to .

1. Log in to your blogger account.

2. Go to Layout and click Edit HTML.

3. It is important to save your file first. You can click on to have a back up of your file.

4. Look for the body in your template.

5. Above the body, insert or copy & paste the .

#navbar {
height: 0px;
visibility: hidden;
display: none;
}

5. The code should look like this.

#navbar {
height: 0px;
visibility: hidden;
display: none;
}


body {
background-image: url();
background-repeat: no-repeat;
background-position: right bottom;

6. Save your template and view your blog.

You can always hide or show the blogger navigation bar whenever you want. And if you want to in your blogsite, simply delete the code you inserted above the body.

Basic Search Engine Optimization Guide

SEO, an acronym for , is a vital tool that makes a certain site visible in search engines. It improves the interaction between a site and its main consumers, thus, making it easier for search engines to on your site. Also, it affects only organic search results, not paid or sponsored ones such as Google Adwords.

As a newbie in this blogging world, SEO seems too broad and too complicated for me, that's why I created this . Hope that you find this article helpful, too.

Some important things that you can consider in .

1. Create a unique and concise page title. refers to the topic of a particular page in your site. Avoid using a single title tag or title that is too long.

2. Make use of the . It gives the search engines a summary of what the page is all about. It can be made of sentences or a short paragraph.

3. Create a URL that is simple, easy to remember and relevant to your content. You can rewrite or make some complex URLs in your page easier, shorter and friendlier.

4. You can create related topic listing under a page that are really related with the content.

5. Create a site that is very easy to navigate.

6. Create a HTML Sitemap Page on your site or use a XML Sitemap file.

7. Create a useful or simply add a 404 Page Widget in you site. Whenever a user comes to a page that doesn't exist on your site due to broken lines or by just placing the wrong URL, 404 Page can guide them back to working pages. This will improve the user's experience in your site.

8. Make sure that your content is fresh, interesting, unique and understandable. Use texts that are easy to read. Avoid too many grammatical errors or misspelled words and avoid embedding text in images just for .

9. Write short and descriptive anchor text. tells about the content of the page you're linking to. Avoid using URL or text like 'page' or 'click here'.

10. "Alt" text or of an image provides information about the picture and makes it easier for Google Search to understand your image is all about. Take advantage of it, but avoid writing extremely long 'alt' text or pasting the entire sentences on it.

11. Use rel="nofollow" if you don't trust the link or if the link will only affect the reputation of your site. You can also add "" to some links in your 'comments' area, guestbooks and forums, if you think that they're just spamming.

12. Promote your website via offline promotion, like attaching your business URL to your business cards, posters and newsletters. You can actually place your business in Google's Local Business Center.

13. Use free Webmaster Tool to improve the search results of your site, like Google's Webmaster Tools, Yahoo! Site Explorer and Live Search Webmaster Tools.

14. Make use of Web Analytics program to better understand how the users reach your site and how they interact with the contents on your site.

15. Try to experiment with the pages in your site using .

This article is based on Google's Search Engine Optimization Guide Version 1.1, the latest version at Google Webmaster Central that is published on November 13, 2008. Google Search Engine Optimization Complete Guide

You can also check Google Search Engine Optimization (SEO)

Common Google Adsense Rules

A has a big role of complying to all , or else, his/her blogs or websites will be banned. And as a new publisher, I've looked around for some reasons why most publishers have their .

With this, here are some things that a publisher should AVOID.

1. click on your own ads. Do not even hesitate to click your ads, by any means of curiosity or for the purpose of testing. It will be counted as an invalid click and it may even be a reason for you to be banned.

2. Do not encourage others to click your ads. Don't even put texts that imply to the ads in your site.

3. Do not join in , paid to surf, and paid to read programs. Do not put the ads in places that can generate traffic from different sites.

4. Do not place adsense codes in emails and pop-ups.

5. Do not place or link google ads in sites that contain pornography, violent, gambling and illegal activities.

6. You can have adsense and other advertiser in one site as long as the competitors do not look like Google. Try to use different font sizes, font styles and colors for each advertisers.


It is a must for all publishers to adhere to all with regards to Google Adsense. For more information, visit Google Adsense Program Policies.

All publishers, webmasters or bloggers must be cautious and must pay attention to every rules and guidelines unwanted consequences.

Open a Technorati Account

If you want to improve your pagerank's performance and search engine results, it is better make use of Technorati tags. determines those tags that authors had submitted in their website and helps a site or a blog in the search results.

?

1. Go to Technorati and register for a free account.

2. Follow the instructions and fill the form with all the necessary information.

3. the link in the email address that you provided when you signed up.

4. Once you completed, you can immediately log-in to to your technorati account using your username and password.

5. You can now your profile, account setting and submit a Blog Claim.

How to Claim a Token in Technorati?

I started a  in Technorati and it was . I filled all the blanks with all the necessary information like, my blog's URL, my blog's RSS Feed URL and possible tags for it.

After submitting the Blog Claim, the next step is to "". It means that Technorati will verify if I am the real author of the site and they will look for a in my site. They will assign a (ex. A8632434YG5) for that claim. But the problem is, what will I do with the token? There's no exact instruction so you will find it confusing.


These are the things that you need to know.

1. Copy the Claim Token (ex. A8632434YG5). You can find it directly in or in your email address.

2-A. Go to your Blogger Account and to your Edit Posts area. Open your latest post and paste the Token code (ex. A8632434YG5) anywhere in your post's content.

2-B. Or if you want, just create a New Post. You can put whatever title you want, ex. Technorati Code. Then paste the Claim Token (ex. A8632434YG5) in the content section. You will see that it is the only content of your post, but that's okey.

3. Go back to Technorati site and . Wait while they evaluate or read your site's data. In my case, it took a couple of minutes before I got a confirmation below.



4. Once you received that , you can go back to Blogger and delete the post that you have created.

5. Wait until Technorati completed their review over your blog.

In my experience, it took more than 5 hours to . After that, the site will be listed in the Technorati Blog Directory.


Updated (2010-04-20)

I have submitted a Blog Claim in Technorati and noticed that they have improved the instructions on how to Claim a Token. Now, it's absolutely easier and clearer to follow the Blog Claiming procedures.

How To Display HTML Source Code in Web Page?

For me, it is quite difficult to come up with an accurate . Thinking on the html code in my webpage was frustrating. I tried different ways to make it, but I failed a lot of times. Well, is not my line, so I immediately turned to my pc and searched for some possible tips from HTML experts.

For example, I want the html code below to display as a instead of being interpreted as a code. I want it to appear exactly the same as what it looks like.



However, whenever you try to the code, it turns like the one below.

So here is one possible for this matter.

1. Go to the Edit Posts Area in your Blogger account.

2. Copy the html code you want. (I will use the other one below.)



3. Copy your code and paste it to HTML Convertion Site. This is the site where you can easily convert your codes.

4. Click the Convert button and copy its equivalent - which is in 'html source code' format.

5. Go back to your Edit Posts Page in Blogger and apply the (html source code).

6. Preview or Publish your post to check the result.


That's it! I hope that I have helped you in this matter.

Thursday, April 15, 2010

How To Create an HTML Text Box Code?

I have encountered a lot of websites and blogsites and I got curious about the boxes placed together with their contents. For me, a site looks more professional if the content contains .

I am talking about the basic text box code below.



You can also use the "" code below if you don't want other people to copy the contents you made.



In the Edit Post Page (Compose) in Blogger, you can the box by just clicking and stretching it out and you can drag or move it, too.

And if you want something like a for your website, see the example code below.

<form method="post" action="">
<textarea name="comments" cols="40" rows="5">
Leave your comments here...
</textarea>>
<input type="submit" value="Submit" />
</form>

And this is in the your website.





There are various ways to your text box. So, if you want to learn how to add borders, and how to change its color, visit Quackit.

What are Technorati Tags?

Are you also about this technical term and really don't understand how to apply this in your blog posts? Ok, we are in the same situation! Although it is complicated, it is an effective way for our website to achieve a higher ranking in the .

I don't have a technical mind so let's try to figure this out in such a way.

A  refers to the keywords that are used to describe a blog post, events, images and links. It serves as a , a simple explanation or a short phrase of what the topic or content is all about. In Blogger, labels work like tags. This helps a searcher to find articles, photos, websites and videos in the web.

For example, my post is about "Parenting". In this case, I will use tags like "parents", "children", "behavior", "family" and "experience".


Use Technorati Tags?

In the 'edit post area', where you usually edit the content of your post, you can do the .Technorati tags are not case-sensitive, meaning, it doesn't matter if you used capital letters or not.  Just take note of the html codes below. I will use "Parenting" as an example.



If you want to tag more than 1 word, just put (+) between the words. See the example html codes below using tags "Parenting Guide".



You can also make the tags invisible to your readers but still being tagged on Technorati. You only need to leave it blank. However, if you are planning on doing this, I advise that you read their TOS first. See the sample codes of  below.



After tagging, you need to publish it and .


Note:

1. Tagging a blog (known as Listing) is different from tagging an individual post in a blog.

2. Tag Spamming - having too many tags in one post, which are irrelevant to the content or topic. Though you are trying to drive more traffic to your sites, there is also a possibility for your sites to be .

Wednesday, April 14, 2010

10 Tips to Increase Blog Traffic

I'm just a in this blogging industry. And my site is only gaining poor traffic. I want to to this site. Therefore, I searched and gathered some useful information on how webmasters increase or attract more unique traffics to their sites.

10 Tips to Increase Blog Traffic

Here are from webmasters or expert bloggers on how to get to your blog or website.

1. Before publishing a content, it is important to conduct a 'keyword research' to know how the actual searches is working in the search engines. Two examples of that you can use are Keyword Research Tool Keyword Discovery.

2. Create your own with powerful articles and valuable insights. Better check your grammar and spelling. No one is perfect. But strive hard to make your articles understandable.

3. Add tags/keywords or simply use Technorati Tags or Simple Tags everytime you finish your content. Try to use , feedburner and favicon, too.

4. Make the keywords or tags more of 'phrases' rather than 'words'.

5. Add your URL in your profile in Facebook, Friendster, Multiply, Twitter, Youtube and the likes.

6. Join some related to your site and other online social groups. You can join adsense forum, blogwalking, entrecard, reddit, stumbleupon, theoma, seo, onlywire, digg, myLot, widgetbucks, webmasterworld, etc.

7. Submit your site to different search engines like AltaVista, Yahoo, Alexa, Live, Google, Theoma, MSN, , AOL, Netscape, Directories, Webcrawler, Ask, etc.

8. Visit other people's blogs or websites, in return they will also view your site. Add some 'worthy' comments, or else, they will think that you're just them.

9. Try to add fun stuffs to your site such as Picture Gallery, Message Board, Guest Book, Quotes of the Day, Horoscopes, Daily Health & Beauty Tips, Funny Videos, etc. This will make your your visitors stay longer in your site and there will be a higher percent of visitors coming back to your site.

10. Check your site's so you know your standing. With that in mind, you can do something to improve your site.

What is a Blog?

Some of us might be thinking is. Some might have heard about it, but need further explanation. So, to better understand what a blog is, take a look at the simple meanings below.

what is a blog

A is;

1. About anything or -  experiences, news, information, family, technology, culture, travel, hobbies, business, passion, sports, fashion, icon, politics, people, etc.

2. A of  insights and thoughts towards different matters.

3. A website that is created and updated by all - whether you are a programmer or a simple user.

4.  A of posts, that contain texts, images, links, videos and other data.

5. A journal or a that is available in the web.

6. A shortened term of the word '' and is regularly updated by a blogger using html codes.

There are other from veterans and simple bloggers. You can search them to be fully aware of what a blog is.

Dear friends, you can also share "What a Blog is?" in your .

How To Create a Blogger Account?

Before you start blogging, you need to have your .

wt=

There a lots of where you can create your own blog, but we will use Google Blogger this time. Signing up is for and the process will only take a couple of minutes. So, let's get started!

1. Go to http://www.blogger.com/ .

2. Click "" button.

3. Follow the instructions and choose a template for your blog.

4. You can begin to post and things that you are interested of and start customizing  the layout of your blog.

Remember your email address and password. You will be needing them in able to Sign-In to your .

My First Ever Post Here

my first ever blog post

Hello, Readers! My name is and I would like to welcome you here in my new blog site entitled "". A site that is mainly about blogging using blogger/blogspot and all the things that is related to it.

I am not an internet savvy, a computer genius or a programmer, but blogger/blogspot helped me understand how to come up with , to customize it according to my preferences and to it on my own.

All the posts that are posted and will be posted here are based on my own reflections, opinions and/or experiences. It serves a memory of my journey in this blogging world. A of all the technical terms I encountered while managing the progress of my blogsites.

The best part of this, I can always go back to some of the topics here whenever I want to and whenever I need it. Some tips and helpful information will always be available to lighten up or solve one's problem. All will be saved here for present and for .

Hoping that it will not only benefit me, but also, all the people who wants to start their own blogsites using .

I'm not a great and so if you find mistakes in my grammar, spelling, etc., please accept my apologies.

for visiting my blog site and I would definitely appreciate if you leave some comments.

I'm looking forward of seeing you again and again..