VaSsCeR

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, althought this is a simple methods but it can produce a beautifull 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 a template. Ok lets begin.
Before we begin I suggest you to create a new blog,weI don't wont to destroy your blog.
To follow this tutorial you have to download this template first. downlad template.


We will create a template that contain four main elements, (Bakground, Header, Main and Footer) Like the image :



So you have to create the four elements, You can use Image editor software like Adobe Photoshop, Corel Draw, Paint, etc.
Here's the detail to design it:
1. Create a design like above image.
2. On the backgroun 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 like geocities or on the image hosting like photobucket.

Alll 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 widht 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/widht 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 widht of your right sidebar. and this code width: 195px; is widht 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 widht 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 widht and height of your footer.

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

GOOOD LUCK!!!!!!

1. Login to blogger, then choose "Layout --> Edit HTML". Don't forget to backup your template first.
2. Check the "Expand Widget Templates" box.
3. Copy this script and put it before ]]></b:skin> or copy to your CSS area.

.comment-body-author {
background: #E6E6E6; /* Background color*/
color: #000; /* Text color*/
border-top: 1px dotted #223344;border-bottom: 1px dotted #223344;border-left: 1px dotted #223344;border-right: 1px dotted #223344;
margin:0;
padding:0 0 0 20px; /* Posotion*/
}

4. Then find this code:

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
said...
</dt>

<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>

<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>

</b:if>

<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

5. The red color text is the code that you have to add to your script. The position must be right.
6. And then save your template.

* You have to login into your blogger account before to give comments.

In this episode I will explain to you "how to make your blog more expressive with smile icon" without copy an image and put to your blog, but with only little code and then it will be smile icon image automatically. For example, if you type this code :) it will atomatically change to this image :) , this code :p will be like this :p and etc. Do you interest? if no, go from my blog :D
here's the trick:

1. Login to blogger then chose "layout --> Edit HTML"
2. Find this code ]]></b:skin>, if you found it then put the code below under it.

<script src='http://kendhin.890m.com/smile/smile.js' type='text/javascript'/>

3. Save your editing.

* Before you type the code you have to press "space" first"

here is the code to show smile icon

:) --> :)
:( --> :(
:p --> :p
:D --> :D
:$ --> :$
;) --> ;)
:@ --> :@
:# --> :#
:k --> :k
:x --> :x
:o --> :o
:O --> :O
:L --> :L
:r --> :r
:s --> :s
:y --> :y
:~ --> :~
:v --> :v
:f --> :f
:d --> :d
:c --> :c
:z --> :z

1.Download a template file (Zip / Rar) and unzip. (Screenshot 1)



2. Log in to Blogger.
3. Go to "Layout" under "Dashboard". (Screenshot 2)



4. Click "Edit HTML" under "Layout". (Screenshot 3)



5. Don't forget for backup your old template. (Screenshot 4)



6. Find and Upload the new Blogger template. (Screenshot 5)


6. If a warning: Your new template does not include the following widgets, click "KEEP WIDGETS". (Screenshot 6)



5. Finish, Enjoy your new blog design.

↑ Back to TOP


How to Show or Hide "Navbar Blogger"

Before erasing navbar blogger (Navigation Bar), it’s better if I inform that this method is one of the Blogger TOS violation. If you still want to erase it, you can use the script below:


Hide Navbar:
#navbar-iframe { display:none}

Show Navbar:
#navbar-iframe { display:block }

Auto Hide:
#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}

How to do:
In the Edit HTML page, put the code above under the code <b:skin><![CDATA[/* and then save template.


↑ Back to TOP


How can I edit the Navigation Menu link of my template?

1. Most templates have a menu that can only be changed from the HTML (Dashboard → Layout → Edit HTML). In many cases the code to look for is:

Just find the similar code like this:

<li><a href='/'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Post RSS</a></li>
<li><a href='#'>Comment RSS</a></li>
<li><a href='#'>Edit</a></li>

For set link on Menu, your just find a code like this href='#' and change symbol # with link what you want.

Or, if you find the similar code like this:

<li class='current'><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'>Posts RSS</a></li>
<li><a expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;'>Comments RSS</a></li>
<li><a href='#'>Edit</a></li>

There you can change the expr:href='#' with your own links: href='mylink'. Also see the instructions in your template for more information.


2. Some templates include a gadget to edit the menu directly from the Dashboard (Dashboard → Layout → Page Elements).


↑ Back to TOP


How to Set SEO for Meta Title, Keyword and Description

Find This Code:
<title><data:blog.pageTitle/></title>

And Change with this code:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/> | (example: ZoomTemplate)</title>
<b:else/>
<title><data:blog.pageTitle/> | (example: ZoomTemplate)</title>
</b:if>
<meta content='your description here' name='description'/>
<meta content='keyowrd1, keyowrd1, etc..' name='keywords'/>
<meta content='INDEX, FOLLOW' name='ROBOTS'/>



↑ Back to TOP


How to display the last Posts or Comments on the sidebar?

1. Enter the administrator page elements (Dashboard → Layout).
2. Add a new feed widget, with the following URL’s:



To show the recent posts:

http://BlogName.blogspot.com/feeds/posts/default


To display the latest comments:

http://BlogName.blogspot.com/feeds/comments/default


↑ Back to TOP


Can I remove the credit link for the template?

No, the vast majority of templates are licensed under a Creative Commons, GPL or similar license, thus removing the credits would be using an illegal copy of the same. All free blogger themes on Zoomtemplate.com comes under a creative license. You can use all themes in any way you want. All you need to do is just keep the footer credit links intact.

On Zoomtemplate.com you are free to download the templates or themes with no charge, and you are free to submit templates or themes of your own creation. You need to know that all the templates or themes on this blog are the responsibility of the authors or designers. Thus, Zoomtemplate.com is not responsible if there is any loss or mistake in the future, or there is any other party who claims one or more of the templates or themes in the future.

Blogger templates Gallery here are subject to their author’s and/or designer’s licenses. All of the Blogger Templates provided on this blog are licensed under Creative Commons Attribution 3.0 Unported, which permits both personal and commercial use. However, to satisfy the attribution clause of the licence, you are required to keep the footer links intact which provides due credit to its authors and designers.