Create a Blogger/Blogspot Templates : How to Create Your Own Blogger Template for beginners? Part 3 make blog templates and Knowing Body and Outer Wrapper Block
Create a Blogger/Blogspot Templates : How to make your Own Blogger Templates quickly and easily for beginners? This tutorial is a continuation of the previous tutorial How to create a templates before, Recommended before following this tutorial, please read the previous tutorials : Part 1 How to Create Your Own Blogger Template and Part 2 How to Create Your Own Blogger Template.
In this tutorial, we will discusses about Body and Outer Wrapper Block in a blogger templates, and how it's will be working. As we know, on the Body Block and Outer-wrapper/Container Block is a place to put all the elements, such as the header, sidebar, footer, content, etc. So we'll start the lessons.
See you on the next lessons.
In this tutorial, we will discusses about Body and Outer Wrapper Block in a blogger templates, and how it's will be working. As we know, on the Body Block and Outer-wrapper/Container Block is a place to put all the elements, such as the header, sidebar, footer, content, etc. So we'll start the lessons.
Source Code Blogger Templates
In accordance with the tutorial How to make a Blogger templates on the previous lessons (Part 2) we've made a blog templates look like this source code :
<?xml version="1.0" encoding="UTF-8" ?>
<!--XML (Extensibel Markup Language)-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<title><data:blog.pageTitle/></title>
<!--judul blog-->
<b:skin><![CDATA[
/*
-----------------------------------------------
Blogger Templates Style
Name : Newbie To Blogger
Designer: Harison Matondang
URL : http://www,hc-kr.com/
-----------------------------------------------
*/
]]></b:skin>
</head>
<body>
<div id='outer-wrapper'>
<!-- Open Outer Wrapper Block-->
<div id='header-wrapper'>
<!-- Open Header Block-->
<b:section class='header' id='header' maxwidgets='1'>
<b:widget id='Header1' locked='true' title='www.Hc-Kr.Com' type='Header'/>
</b:section>
</div>
<!--Header is Ended Here-->
<div id='main-wrapper'>
<!-- Open main-wrapper Block for our post, comment or widgets -->
<b:section class='main' id='main'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</div>
<!--Main wrapper ended-->
<div class='clear'> </div>
<div class='clear'/>
<div id='sidebar-wrapper'>
<!-- Open sidebar Block -->
<b:section class='sidebar' id='sidebar-1' showaddelement='yes'/>
</div>
<!--sidebar ended here-->
<div id='footer-wrapper'>
<!-- Open Footer Block-->
<b:section class='footer' id='footer-1' showaddelement='yes'/>
</div>
<!--bagian footer end-->
</div>
<!-- End Of Outer Wrapper Block -->
</body>
</html>
Create Body and Outer Wrapper CSS
And now we will make CSS code on the Body and Outer Wrapper Block, make sure you write the entire code below and place it between <b:skin><![CDATA[ /* CSS code Here */ ]]></b:skin> :
* {
margin:0;
padding:0;
border:none;
vertical-align:baseline;
outline:none;
}
.clear {clear:both;}
/* CSS Body Block Start*/
body {
background:#ffffff;
font-size:14px;
font-family:Arial;
margin:4px;
padding:4px;
}
a {color:#9b50ba;text-decoration:none;}
a:hover {color:#0378B2;text-decoration:underline;}
a:visited {color:#9b59b6;text-decoration:nounderline;}
a img {border-width:1px; color:#333333;}
/* CSS Outer Wrapper Block Start*/
#outer-wrapper {
width:960px;
margin:0 auto;
padding:0;
}
/* CSS Outer Wrapper Block End*/
CSS Description:
Body Block:
- The Background color is white using code #ffffff , you could replace it with another color.
- font size is 14px and font type is Arial (you can also replace them with any font you want for example Tahoma, Georgia, Times New Roman etc.)
- a {color: #9b50ba; text-decoration: none;} this determines the basic link color is wisteria color.
- a:hover {color: #0378B2; text-decoration: underline;} define the character of the Link when it is highlighted.
- a:visited {color:#9b59b6;text-decoration:nounderline;} define the characters visited Links.
- a img {border-width:1px; color:#333333;} define the character of a Picture Link
Outer-Wrapper
- Width: 960px, you can change it (this change will affect other elements, so if you want to change the wide Outer-wrapper, you must also change other elements).
- Margin: 0 auto, This means the margins or spacing out will be determined automatically, the position will display right in the midst because auto are fair.
See you on the next lessons.
COMMENTS