Subscribe Search to itis123
Subscribe
Via RSS By RSS
Via Mail By Mail
Showing posts with label blogger template tutorials. Show all posts
Showing posts with label blogger template tutorials. Show all posts

Thursday, January 15, 2009

How to install new templates without loosing any widgets?

Most of the blog owners think that it's not possible to change the blogger template without loosing any widgets. But that's not true. It's possible to do that. Just read this page and apply the techniques. Then you will find your answer and enjoy your new template.

No technical knowledge is required.
Just follow the steps.

Step 1: Save your current template
At first, save your current template. You must do it. If you don't know how to backup current template then go to How to Back-Up Your Blog's Template Design? It's very necessary to backup your template. Because if you don't successful then you can easily recover or get back to your old template world. So, never forget to save your current template before doing all these.

Step 2: Collect your new template and use a text editor
Are you still collect the desired template for your blog? If not, collect it form the internet. Search Google and you will find lots of free templates. If you have already one, no need to search.

Now, you need a text editor. You may use Notepad++. If you don't have, download Notepad++ Installer.exe file. You can use any type of editor also.

Step 3: Open the old template .xml files in the text editor
Open the old template file in Notepad++.

Step 4: Find the widgets code and copy them to a new file
This is the most important part and you have to handle it carefully.
a. First, find <body> tag. Before this tag, you don't need to look anything.
b. Now, remember the following lines:
  • all widgets code begins with <b:widget> and ends with </b:widget>.
  • all widgets code must be located between <b:section> and </b:section> tag.
  • all <b:section>...</b:section> must be located within <div id=...>...... </div>
Look the following example: each color code represent one widgets.


<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' showaddelement='no'>
<b:widget id='LinkList1' locked='true' title='Linkbar' type='LinkList'> ...
... some additional codes here ...
...
</b:widget>

<b:widget id='HTML1' .....;
...
</b:widget>
<b:widget id='Image1' .....;
...
</b:widget>

</b:section>
</div>

c. Remember, we only need widgets code and it begins with <b:widget> and ends with </b:widget> . So, <b:widget>....</b:widget> one block. Find and copy all blocks of code and paste them in a file such as "myWidget.txt". No need to do anything.

Step 5: Open the new template with notepad++
Open the new template file with notepad++.

Step 6: Finding <widget> and pasting in new template
a. First find the <b:section> code.
b. Paste all the text form "myWidget.txt" immediately after <b:section>
c. Save the new template now.

Step 7: Uploading the new template and saving
a. Go to Dashboard > Layout > Edit HTML > Browse(give the template location) > Upload.
b. After finished uploading, click SAVE TEMPLATE.

Step 8: Re-arranging all the wedgets
a. Go to Dashboard > Layout > Page Elements
b. Rearrange all the widgets as your own wish by dragging and dropping.
c. At last, click Save and click View to view your blog with new templates.

Are you finished? Yes,.... I think so.

So, is it very hard or difficult .......... ??

What do you think? I think, you will say "It's very easy".

This is the easiest way to keep all the widgets and change the templates. Many blog owner don't do it as they think they might lose their widgets. But if they go in this way, all's are possible. So, if you don't change your blog template, then do just now. It's very easy. One thing, before doing any type of changing don't forget to back up your blog's template.

Hope, you wish your blogging....

How to change blogger template?

People change blogger template just to new outlook of their blog. But before doing this, don't forget to backup of your existing template. How-to-back-up-your-blog will provide you the instructions to backup your blog.

No technical knowledge is required.
Just follow the instructions.


Note: At first select or download the template, which you want to use as your blogger new template. You can find many types of template (free) by searching Google.

You can change blogger template several ways. But the simplest way is described here:
  1. After logging www.blogger.com, click on Dashboard.
  2. Select the blog you want to change template. Click on Layout of the chosen blog.
  3. Now, select Edit HTML.
  4. When Edit html window appears, you will see an option mentioning Choose File. Click on that.
  5. Choose the desired .xml file from and select that and then press the Upload button.
  6. Now press SAVE TEMPLATE to save the new template.
Sometimes, it may ask Delete Some Widgets. So, delete them, Widgets are the extra page elements and you can add them easily later.

Pictorial Explanation:

And that's all, you are now ready to use your new template.

Hope, you enjoy your blogging.

Wednesday, January 14, 2009

Blogger blog's CSS Style Structure

In this part, a basic overview of CSS part will be introduced. Previous part (Code structure of blogger template ) only describes about the CSS style block names and what those can do. Here, the code structure of CSS part will be explained. The template of blogger varies. But the most important part is common to every blogger template. So, if you know the basic of the common part, you may be able to understand all's easily. Let's move to the basic CSS code style structures:

Part 1: Variables
Variables are used to define font and colors of the blogger template. Through this part template header, font color, style etc. are defined. You can change it's color and fonts from the following locations:

Layout > Fonts and Colors

Minima's variable deceleration is like the following:


/* Variable definitions */

<Variable name="bgcolor" description="Page Background Color"
type="color" default="#fff" value="#ffffff">

<Variable name="textcolor" description="Text Color"
type="color" default="#333" value="#333333">

<Variable name="linkcolor" description="Link Color"
type="color" default="#58a" value="#5588aa">

<Variable name="pagetitlecolor" description="Blog Title Color"
type="color" default="#666" value="#666666">

<Variable name="descriptioncolor" description="Blog Description Color"
type="color" default="#999" value="#999999">

<Variable name="titlecolor" description="Post Title Color"
..............................
..............................

Part 2 : Global

Firstly, the body of the template is mapped. It's the major part of your blog. Global part is defined by the word "body" and is defined "{" and "}". Here, the template background color, margin, font, font-size, text-align etc. are defined. Typical, "minima" template has the following type of global deceleration part.



/* global */

body {

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

Part 3: Header

Header wrapper related information is presented here. Header title, header description, color etc. information are presented here. The code segment looks like the following:

/* Header */

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
..............................
..............................

Part 4: Main Wrapper

Main-wrapper contains "date header", "post", "comment" etc. You can customize it, by adding page elements form the layout option. It controls size, appearance of your blog. "Minima" template has the following main wrapper code segments:


/* Main-Wrapper */

#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
..............................
..............................

Part 6: Sidebar Wrapper

Sidebar-wrapper contains several things like "Labels", "Blog Archive", "AdSense" adds, "Link Lists", "Picture", "Bookmarking" tabs etc. "Minima" template has the following sidebar wrapper code segments:


/* Sidebar-Wrapper */

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
..............................
..............................

Part 7: Miscellaneous
It's the additional part of your blogger template and contains several information like "About me" or your blog quote etc. It's actually the profile of the blog owner. The code segment of "Minima" template is like the followings:


/* Sidebar-Wrapper */

/* Profile */
.profile-img {
float: $startSide;
margin-top: 0;
margin-$endSide: 5px;
margin-bottom: 5px;
margin-$startSide: 0;
.............................
.............................

Part 8: Post-Footer:
The footer is the part below the post body. It contains the post related information like "Posted by PosterName", "Labels", "10 Comments", "Link to this post" etc. Sometimes, it may contains "Feed" also. The code segment of "Minima" template is like the followings:


/* Sidebar-Wrapper */

/* Profile */
.profile-img {
float: $startSide;
margin-top: 0;
margin-$endSide: 5px;
margin-bottom: 5px;
margin-$startSide: 0;
..............................
..............................

Part 9: Comment:
All the comment related information is presented here. Here you can define "comment header", "comment-author" etc. Typical, "minima" template has the following code segment:


/* Comments */

#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
..............................
..............................

Part 10: Footer:
Footer part contains related information about blog ownership, copyright notes. Moreover, you can add more stuffs like "Recent Posts", "AdSense" ads, "Popular Posts" etc. The code segment of the "Minima" looks like the followings:


/* Footer */

#footer {
width:660px;
clear:both;
margin:0 auto;
..............................
..............................

This is the basic style of CSS on blogger template. You just learn and remember them for advancing the next section. Remember, it's very simple to design blogger template.

Code structure of blogger template

A blogger template is made of codes. The code of the bog templates vary template to template. But most of the time there is some similarities. All blogs template must have header, content and footer. All these are sited on the body of the template. Whatever, here I want to discuss a very shortly the main important code structure of blogger template. I use "Minima" template for describing it. It's the default template of Blogger. To learn about blogger template structure, click here. "Minima" template can be downloaded freely form your blog. If you don't know to download, click here to download "Minima" template. You need to download it because this tutorials are based on that template. So, download that and learn all things clearly.

Blogger code structure can be divided into three basic sections. They are explained below:




Section 1: Header And Meta Tags Code

Header part is the most important thing of blogger template as it contains lots of valuable information. This section is only about header part. Actually, you don't have to think about this part. You don't need to change anything form here. But if you want to apply SEO for your blog then you have to add some meta tags of this section.

Section 2: Template Design Code

This part resolved template design issues. It is made of CSS(Cascading Style Sheets) code. CSS is one of the code which is used for designing template. Moreover, you have to know HTML. But in this days, you don't need to know all about the web programming code. Most of the things are drag and drop types. However, if you know this, you will do lots of things with your blogger template.

Section 3: Body code

This is the most important part of your code segment. Based on this code, your blog shows everything. It defines all the header, post contents, comments, blog footer, sidebar information and contents etc. If you only post content, then no need to change anything. Otherwise, you have to change it. You may be use ratting or social bookmarking buttons. So, your have to put some code in this section. This type of cases you have to know some coding. But all are very simple. It requires little knowledge. Go on the more deeper of this tutorials and you will find everything to edit the blogger body. When you finished learning then you can add social bookmaking buttons like Digg, AddThis, RSS buttons, Tagfoot Widgets, AdSense codes, Google Analytics codes etc. So, go to the next sections of the tutorials. And soon you will learn them all.

Blogger Template Structure

Designing and creating of blogger template is very easy. But before doing that you have to know about blogger template structure. Blogger template is made of small components. Generally each component is termed or referred as block. There are several types of block and the blocks are created for based on different types of functionalists.

Blogger template varies. There is no predefined structure of blogger template. Blogger use several blocks or modules as their requirements. But every blog has a body and at least three wrappers such as header-wrapper, content-wrapper and footer-wrapper.

The blogger template could be made of with the followings blocks or modules:

Body: The screen which we see i.e. the entire screen of the template is referred as template’s body. All types of blocks are situated on the body. The body is the placeholder of any types of blocks.

Outer wrapper: It’s on the body and cut the body’s area into several areas. Generally, it divides the whole area into three major parts. They outer wrapper divides the area into the following three wrapper parts: header wrapper, content wrapper and footer wrapper.

Header Wrapper: At the top of the blogger template is known as header wrapper. A header contains basically the header of the blogger. But modern template can contains the following things also:

  • Blog Title: It's the title of the blog. Most often, it's the blog name;
  • Blog Description: Below the blog title, there is a short description part. It describe the blogs content description very shortly but summarized.
  • Header Image: If anyone wish, he or she can also add a header image also. It's optional.
  • Other Widgets: Moreover, you can also add AdSense ads, RSS feed icon, blog menu etc. as your own wish. All these blocks are optional.

Content Wrapper: Content wrapper an important part of your blog. It contains many things. It's position is below the header. Content wrapper can be divided the whole area into several parts, such as, sidebars, post parts etc. Some of the blocks description are presented below:
  • Main Wrapper: Main wrapper is the most important part of the content wrapper. It contains posts and sometimes ads etc.
  • Posts: The actual content of any blogger is published here. The posts part also contains levels, comments, date, time, ads etc.
  • Sidebars: Generally, besides the main wrapper there are side bars. The actual no of sidebars depend of the blogger. You may add 1, 2, 3 sidebars.

Footer Wrapper: At the bottom of the blogger template, there is a part which is referred as footer wrapper. Most often, it's the footer of your blog. It may contains, several things. If you want to add several things, you need to subdivide like the header. You may also put several contents like RSS feed, copyright information, blogs' owner, AdSense code etc.


Structure of blogger template

Hierarchy of Blogger Template Structure:

The hierarchy of blogger template structure can be defined by the following way:

  • Body
    • Outer-wrapper
      • Header-wrapper
        • Blog Title
        • Blog Description
        • Header Image
        • Other widgets [like RSS, Ads etc.]
      • Content-wrapper
        • Sidebar-wrapper
        • Main-wrapper
          • Date Header
          • Posts
          • Post Title
          • Post Content
          • Author
          • Labels
          • Comments
          • Feed Link
        • Other widgets [like RSS, Ads etc.]
      • Footer-wrapper
        • Footer text
        • Other widgets [like RSS, Ads etc.]