Advertisiment

How To Modify Blogger Template

Ical Holic 11/30/2011 01:01:00 AM
On this occasion icalcell will give a little basic knowledge about HTML programming specifically for bloggers, while answering visitor icalcell with nick Village Cilembu who posted at How to Change Template 1 Column Become 3 Column. If you had to learn HTML programming language it will be very useful to change template of the blog, create your own blog theme or template with your own creations friends and will certainly fit hearts.

Generally, the HTML language that uses common code as below:
<html> <----- indicates that the language used is HTML language
<title> <------title of the blog or website
</title> <-----closed code
<head></head> <----- in this code there meta tag, css, java script.
<body>
here is a post content
</body>
</html> <--- closed code of HTML language.

In the html, php, jsp, asp and other web programming language, we are certainly familiar with the term busy closing code, if the code is opened must be closed again, if left open it will cause an error, for example on the basis of the above codes, <title>Title Of Page</title>.

Okay we are back to bloggers about how to add columns, create a new column in the template, how to change an existing column in 2 column templates eg want to turn into a column or 3 column or many columns.

As with the earlier post icalcell already provide HTML compilers of codes where the code <head> is there css (cascading style sheets) codes, Now consider the code in the <head>. You will find much codes for example: # , ., : , ; , { , }. Below is an explanation of each sign.
  1. # denotes a specific element id for example the element #header, thats element <div id='header'></div>
  2. . denotes type class element, example .headerright , thasts element <div id='header'><div class='headerright'></div> (div class closer) </div> (div id closer).
  3. { is a opening code for id or class element,example: width , height, etc.
  4. } closing code for setting.
  5. : example width:500px , means the width is 500px.
  6. ; is a separator between the code css settings. example width:500px;height:500px.
Now icalcell will give example css codes for change header blog, from 1 colomn become 2 colomns or 3 colomns.
Code like below.
#header-wrapper {
padding:0;
margin:0;
width:1000px;
}
#header-wrapper .widget{ padding-bottom:10px; }
#headerleft {
float:left;
width:300px;
padding:5px;
}
#headermiddle {
float:left;
width:300px;
padding:5px;
}
#headerright {

float:right;
width:300px;
padding:5px;
}

Codes Above is is code to resolve header become 3 colomns, below is element code which added after <body>.
<div id='header-wrapper'>
<b:section class='header-wrapper' id='headerleft' preferred='yes' showaddelement='yes'/>
 <b:section class='header-wrapper' id='headermiddle' preferred='yes' showaddelement='yes'/>
<b:section class='header-wrapper' id='headerright' preferred='yes' showaddelement='yes'/>
 </div>

consider the div id ='header-wrapper', header-wrapper should look exactly the writing on the css code, because if you created different css code will not work. name of the #header-wrapper could be replaced with another, while the addition of lumped elements provided in <body>. <b:section> Code serves to give the instruction that we add a new element, that element is displayed or there in blog template design.

In the example above the width of 1000px template, which is divided into 3 columns, each of which has a width of 300px. please adjust itself to the state width template friends.

actual html code that bloggers can use anything what name, like up, like a top, going on, can all, as long as the customized css code with the existing elements in the body.

If you are already proficient in adding, subtracting, modifying a particular element, then so, your can also create your own blog template as you wish. Since use the above foundation, icalcell can make own blog templates or themes, such as those of friends icalcell loyal visitors this blog, any time there is a change, in this case, the bottom of the rice, which was there are 2 columns of Popular Posts and Recent Post course, now there are three columns, namely to Recent Comments. like which friends can see for yourself in Adsense Templates, where there be some templates that icalcell been made, which must have load fast and SEO friendly. It all started from a mediocre icalcell knowledge about HTML programming as described in this post.
Tags:

Post a Comment

0 Comments