Blogger Tutorials For Beginners : Part 5 How to Create Your Own Blogger Template, How to create and knowing Sidebar Block in blogger/blogspot templates.
Create a Blogger/Blogspot Templates - Part5 How to create your Own Blogger Templates quickly and easily for beginners? This sessions about tutorial How to create a templates before, Recommended before following this tutorial, please read the previous tutorials :
On the Blogger Elements, you can manually add a widget into Sidebar-Wrapper.
With The Sidebar-Wrapper Css Block have size of width 200 px respectively you can increase, but it should be kept in mind in addition the width of each element affect the other element, so if making changes to the width of the sidebar please Fox also the Main-Wrapper width by adjusting the reduced width of the Main-Wrapper.
See you on the Next Lessons
- Part 1 How to Create Your Own Blogger Template.
- Part 2 How to Create Your Own Blogger Template (Knowing Blogger Element).
- Part 3 How to Create Your Own Blogger Template (Body and Outer Wrapper Block).
- Part 4 How to Create Your Own Blogger Template (Header Block).
Source Code Simple Blogger Templates
From the tutorial How to make a Blogger templates on previous lessons (Part 1, part 2, part 3 and Part 4) we've created 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*/
/* 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 Header 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 Sidebar-Wrapper CSS Block
And now we will create CSS code on the Sidebar-Wrapper Block, make sure you write the entire code below and place it between <![CDATA[ /* Sidebar-Wrapper CSS code Here */ ]]> :
#sidebar-wrapper{
width:200px;
margin:10px 0 0 0;
padding:0;
float:right;
word-wrap: break-word;
overflow: hidden;
}
#sidebar-wrapper h2{ /* H2 Sidebar */
background:#CCC;
margin:0;
padding:5px;
font-size:14px;
font-weight:bold;
color:#191919;
}
.sidebar {
font-color:#151515;
margin:0;
}
.sidebar-wrapper ul {
list-style:none;
margin:0;
padding:0;
}
.sidebar ol {
list-style:decimal;
}
.sidebar li {
line-height:1.4em;
border-bottom:1px dotted #EAEAEA;
}
.sidebar .widget-content {
padding:10px;
margin:0;
}
.sidebar .widget {
margin:0px;
margin-bottom:10px;
border:1px solid #CCC;
}
.clear {
height:1px;
margin:0;
padding:0;
clear:both;
}
/* End of Sidebar-Wrapper CSS */
Sidebar-Wrapper CSS Descriptions
You can see, we will put the entire all of Sidebar widget on the Sidebar-Wrapper block, please see this area :
<div id='sidebar-wrapper'>
<!-- Open sidebar Block -->
<b:section class='sidebar' id='sidebar-1' showaddelement='yes'/>
</div>
<!--sidebar ended here-->
On the Blogger Elements, you can manually add a widget into Sidebar-Wrapper.
With The Sidebar-Wrapper Css Block have size of width 200 px respectively you can increase, but it should be kept in mind in addition the width of each element affect the other element, so if making changes to the width of the sidebar please Fox also the Main-Wrapper width by adjusting the reduced width of the Main-Wrapper.
See you on the Next Lessons
COMMENTS