Senin, 25 Januari 2010

Tutorial to Create Blogger Template

This tutorial is to create simple blogger template, with simple methods. The easiest way to create blogger template is by edit a template. But don't worry, although this is a simple methods but it can produce a beautiful template, it depend on how you design it. This tutorial is not to create blogger template from beginning but this is to create template by editing an available template.

Well, lets begin. Before we begin I suggest you to create a new blog, I don't wont to destroy your blog. To follow this tutorial you have to download this template first. We will create a template that contain four main elements, (Background, Header, Main and Footer). So you have to create the four elements, You can use Image editor software like Adobe Photoshop, CorelDraw, Paint, etc.

Here's the detail to design it:
  1. Create a design like above image.
  2. On the background part it should be a Pattern/Tile.
  3. Cut for every part (Background, Header, Main and Footer) it should be like this :
    • background
    • header
    • main
    • footer
  4. Upload your part image on the webhosting or on the image hosting like photobucket.


All right, now we will arrange these part to the HTML.
1. Go to blogger then go to "EDIT HTML" menu.
2. Click on the "Brows" button to upload above template or this template
3. Find this code

body { margin: 0px; padding: 0px; text-align: left; font:$bodyfont; color:$textcolor; background: #323232 url('http://blogoholic.info/files/bg.jpg') repeat-x top left; }

4. Change the bold text with your image location
5. Then find this code, and change the blod text with your image location :

#center {background: #ffffff url('http://blogoholic.info/files/body.jpg') repeat-y top center;}

6. Find the code below and change the bold text with your image location:

#header { margin: 0; height:196px; width:898; color: $pagetitlecolor; background: url('http://blogoholic.info/files/head.jpg') no-repeat top center; }

7. Find the code below and change the bold text with your image location:

#footer { margin: 0; width: 898px; height:80px; padding: 0px; background: url('http://blogoholic.info/files/foot.jpg') repeat-y top center; }

8. Now find the code below

#outer-wrapper { width: 898px; margin: 0px auto 0; text-align: justify; }

this code width: 898px it's the width of your blog, change it according to your image.

#main { float: left; width: 445px; margin: 5px; padding: 0px 0px 0px 10px; line-height: 1.5em; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; }

This code width: 445px; is size/width of main, you can change it.

#sidebar { float: right; width: 153px; padding-right: 50px; font-size: 83%; color: $sidebartextcolor; line-height: 1.4em; word-wrap: break-word; overflow: hidden; }
#ads-wrapper {float: left; width: 195px; padding-left: 10px; word-wrap: break-word; overflow: hidden; }

This code width: 153px; is width of your right sidebar. and this code width: 195px; is width your left sidebar. And this code padding-right: 50px; is gap of text on the right sidebar with right line. And this code padding-left: 10px; is gap of text on the left sidebar with left line.

#header { margin: 0; height:196px; width:898; color: $pagetitlecolor; background: url('http://blogoholic.info/files/head.jpg') no-repeat top center; }

This code height:196px; width:898; is height and width of your header, Change it according to your Header Image.

#footer { margin: 0; width: 898px; height:80px; padding: 0px; background: url('http://blogoholic.info/files/foot.jpg') no-repeat top center; }

This code width: 898px; height:80px; is width and height of your footer.

9. Try to modify and preview it until looks good.
10. If it looks good you can save it.

Minggu, 24 Januari 2010

How to Settings your blog?

If your blog want carried by google, you must doing several settings. This is how to setting your blog:
1. Login to blogger.com with your ID.
2. If your blog more than 1, click at the blog title want to setting.
3. Click Setting and then click Basic. Several form that must in the contents to the menu basic:
  • Title : Content with your blog title. Example : Blog Tutorial.
  • Description : Content with your description blog. Example : All about blogging can find here.
  • Add your blog to our listing : chose Yes, so that every time posting always entered the Blogger.com list.
  • Show Quick Editing on your blog : Choose Yes.
  • Show Email post link : It is best to chose Yes, but if you chose No also it's allright.
  • Show compose Mode for all your blog : Chose Yes.
  • Show transliteration button for your post : chose Yes if the you wanted to be button to change normally alphabet to hindi (India) alphabet, Chose No if being the reverse.
  • Click Save Settings.
  • Finish.
4. Click Publishing to arrange the publishing menu.
  • Blog’Spot Address : Content with your blog address. Example : kolom-tutorial.
  • Send Pings : Chose Yes.
  • Click Save Settings.
  • Finish.

5. Click Formatting to arrange the formatting menu.
  • Show : Chose the number of post want you to display in your blog. Example : Show : 6 post, it's means your posting will display in your page Totally six posting. Chose Post (don't days) at pulldown menu
  • Date header Format : Chose the style of date/month what you wanted, this date/month will display above your post.
  • Archive Index Date Format : Chose the style for your archive
  • Timestamp Format : Chose the style of the time, what you wanted.
  • Time Zone : Chose the matching zone with your place. Example for WIB : [UTC+7.00] jakarta.
  • Language : Chose language what you wanted.
  • Convert line break : Chose Yes, but if you chose No it's allright.
  • Show Link Field : Chose No, but if you chose Yes it's allright.
  • Enable Float aligment : Chose Yes, but if you chose No it's allright.
  • Click Save Settings.
  • Finish.

6. Click Comment to arrange the Comment menu.
  • Comments : Chose Show.
  • Who Comment? Chose Anyone. It's means anyone can comment to your post.
  • Comments Default for Post : Chose New post Have Comments
  • Back links : Chose Show. It's means you will know if another people has linked to your post.
  • Backlinks default for Posts : Chose New post have Backlinks.
  • Show comments in a popup window? : Chose Yes. It's means when the people click Comment link your blog not lost.
  • Show word verification for comments? : It's better to chose Yes
  • Enable comment moderation? : Chose No, but if you wanted chose Yes it's allright.
  • Show profile images on comments? : Chose Yes. It's means the photo of commentator of blogger member can display.
  • Comment Notification Address : Content with your email address.
  • Click SAVE SETTINGS.
  • Finish.

7. Click ARCHIVING to arrange the archiving menu.
  • Archive Frequency : Chose monthly.
  • enable Post Pages? : Chose Yes.
  • Click SAVE SETTINGS.
  • Finish.
8. Click Site Feed.
  • Publish Site Feed : Chose Yes.
  • Descriptions : Chose Full
  • Article Footer : If you have advertising code like Google Adsense, you can insert the code here.
  • Click SAVE SETTINGS.
  • Finish.

Selasa, 05 Januari 2010

How to make a blog using blogspot

If we want to make a blog, we start to make an ordinary e-mail such as gmail first as an account. Then, please to register yourself in free blog provider such http://www.blogger.com. Click the picture below to register.
After we arrive in Blogger.com, you will see picture like shown above. Now, follow my instruction.
  1. Click an arrow sign, inscribed with “CREATE YOUR BLOG NOW”
  2. Complete the ‘e-mail address’ form, with your own e-mail address (of course with the valid one).
  3. Rewrite your e-mail address in form ‘retype e-mail address’
  4. Type the password as you wanted to. Type it in form, ‘enter a password’
  5. Retype your password in form ‘type password again’
  6. Type the password as you wanted to. Type it in form, ‘enter a password’
  7. Retype your password in form ‘type password again’
  8. Type the word which has shown, in form ‘word verification’. Click the white little square beside the sentence, ‘I accept the Terms of Service’.
  9. Click an arrow sign inscribed with “CONTINUE”
  10. Write the title of your blog that you desire (you can change it later) in form ‘Blog Title’
  11. Type the name of your site in form ‘Blog Address (URL)’ .
  12. Type verification word which shown in form ‘word verification’. After that, click an arrow image inscribed with word, ‘CONTINUE’.
  13. Choose one template that you wanted to (You can change it later, if you want), then click again an arrow sign inscribed with word ‘CONTINUE’.
  14. Wait a moment. After you meet a sentence ‘Your blog has been created’. Click an arrow sign (again) which inscribed with “BEGIN POSTING’. Feel please to fill up your blog with everything you want to. After you finish with your first posting, just click the sentence, ‘PUBLISH YOUR POSTING’, Please write What you want, if being finished then click of the publish button.
  15. It's Done.