Part 4 Create a Blogger/Blogspot Templates : How to Create Your Own Blogger Template for beginners? Part 4 make blog templates and Knowing Header Block Blogger Templates
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 :
<![CDATA[ /* CSS code Here */ ]]> :
See you on the next lessons.
- Part 1 How to Create Your Own Blogger Template.
- Part 2 How to Create Your Own Blogger Template.
- Part 3 How to Create Your Own Blogger Template.
Source Code Blogger Templates
In accordance with the tutorial How to make a Blogger templates on the previous lessons (Part 1, part 2 and part 3) 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/
-----------------------------------------------
*/
* {
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*/
]]></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 Header Block CSS
And now we will make CSS code on Header Block, make sure you write the entire code below and place it between
/* Header Wrapper Block CSS */
#header-wrapper {
width:960px;
height:150px;
background:#e74c3c;
}
#header-inner {
background-position: left;
height:150px;
margin-left: auto;
margin-right: auto;
}
#header {
margin: 5px;
text-align: left;
color:#ffffff;
}
#header h1 {
padding:40px 20px 0 10px;
line-height:1.2em;
text-shadow:1px 1px 1px #ffffff;
text-transform:uppercase;
letter-spacing:.2em;
}
#header a {
color:#ffffff;
text-decoration:none;
}
#header a:hover {
color:#ffffff;
}
#header .description {
margin:0 5px 5px 0 ;
padding:0 20px 0 10px;
max-width:700px;
letter-spacing:.2em;
color:#ffffff;
}
#header img {
margin-left: auto;
margin-top: auto;
}
CSS Descriptions :
- #header-wrapper : width 960px and height 150px using background color #c0392b.
- #header h1 : is for our blog title's.
- #header .decription : is for Blog Descriptions.
See you on the next lessons.
COMMENTS