Understanding the Name. Location and Setting of Page Elements in Our Bloggers Template HTML
>> Thursday, November 12, 2009
After learning how to optimize Page Element by adding the Add a Gadget facility, than I have another questions arise:
- How to edit the header?, Post images? or create a link in it?
- How to edit the sidebar?, move it?, put the background or just color it? or could we make it two sidebar?
- Also wanted to know how to paint and install the background, Is it possible that we insert "something" in the middle of Blog Posts?
- How did the Footer, can I edit it to?
I don't know..., but I am trying to find answer ... And with my foolish thinking, I finally realized that the first step is to know its name, its location and the ways to regulate it.
This is what I've got :
As usual we must start it with Log in to Blogger, Click Layout, click Edit HTML and take browse the Edit Template HTML
Header
Yup.. As we discussed before, Blogger setting Header from these lines code, below...
<div id='header-wrapper'>And Script CSS below:
<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='Blogger Test Result (Header)' type='Header'/>
</b:section>
</div>
/* HeaderSidebar
-----------------------------------------------
*/
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}
#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}
#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}
#header a {
color:$pagetitlecolor;
text-decoration:none;
}
#header a:hover {
color:$pagetitlecolor;
}
#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}
#header img {
margin-$startSide: auto;
margin-$endSide: auto;
}
Blogger setting Sidebar from these lines code, below...
<div id='sidebar-wrapper'>And this
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>
#sidebar-wrapper {And script css below:
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 */
}
/* Sidebar ContentBlog Post
----------------------------------------------- */
.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
}
.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.sidebar li {
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:.25em;
padding-$startSide:15px;
text-indent:-15px;
line-height:1.5em;
}
.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}
.main .Blog {
border-bottom-width: 0;
}
Blogger setting Blog Posts from these lines code, below...
<div id='main-wrapper'>And This..
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
#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 */
}
Blogger setting Footer from these lines code, below...
<div id='footer-wrapper'>And
<b:section class='footer' id='footer'/>
</div>
/* FooterWell... that was what I founded, Please Correctly if I wrong...
----------------------------------------------- */
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
After this, I'll show you my experience when I try to modified the header blogger....
0 comments:
Post a Comment