Scribd
Upload
96 views16 pages

Liverpool Blogger Template

This document contains CSS code for customizing the look and layout of a blog template. It includes CSS styles for elements like the header, body, posts, comments, sidebar, and footer. Color variables and fonts are defined to control the color scheme and typography. Styles are provided for common blog elements like titles, links, blockquotes, and widgets.

Uploaded by

Bnov v
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
96 views16 pages

Liverpool Blogger Template

This document contains CSS code for customizing the look and layout of a blog template. It includes CSS styles for elements like the header, body, posts, comments, sidebar, and footer. Color variables and fonts are defined to control the color scheme and typography. Styles are provided for common blog elements like titles, links, blockquotes, and widgets.

Uploaded by

Bnov v
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 16

<?xml version="1.0" encoding="UTF-8" ?

>
<!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>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Template Name : Liverpool Blogger Template
----------------------------------------------- */

/* Variable definitions
====================
<Variable name="bgcolor" description="Page Background Color"
type="color" default="#fff" value="#ffffff">
<Variable name="textcolor" description="Text Color"
type="color" default="#fff" value="#ffffff">
<Variable name="linkcolor" description="Link Color"
type="color" default="#bff2fb" value="#bff2fb">
<Variable name="pagetitlecolor" description="Blog Title Color"
type="color" default="#666" value="#666666">
<Variable name="descriptioncolor" description="Blog Description Color"
type="color" default="#fff" value="#ffffff">
<Variable name="titlecolor" description="Post Title Color"
type="color" default="#c60" value="#cc6600">
<Variable name="bordercolor" description="Border Color"
type="color" default="#ccc" value="#cccccc">
<Variable name="sidebarcolor" description="Sidebar Title Color"
type="color" default="#202020" value="#202020">
<Variable name="sidebartextcolor" description="Sidebar Text Color"
type="color" default="#666" value="#666666">
<Variable name="visitedlinkcolor" description="Visited Link Color"
type="color" default="#fff" value="#ffffff">
<Variable name="bodyfont" description="Text Font"
type="font" default="normal normal 100% Georgia, Serif" value="normal
normal 100% Georgia, Serif">
<Variable name="headerfont" description="Sidebar Title Font"
type="font"
default="normal bold 110% Corbel" value="normal bold 110% Corbel">
<Variable name="pagetitlefont" description="Blog Title Font"
type="font"
default="normal normal 300% Elephant" value="normal normal 300%
Elephant">
<Variable name="descriptionfont" description="Blog Description Font"
type="font"
default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana,
Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana,
Sans-serif">
<Variable name="postfooterfont" description="Post Footer Font"
type="font"
default="normal normal 78% Corbel" value="normal normal 78% Corbel">
<Variable name="startSide" description="Side where text starts in blog language"
type="automatic" default="left" value="left">
<Variable name="endSide" description="Side where text ends in blog language"
type="automatic" default="right" value="right">
*/

/* Use this with templates/template-twocol.html */


#navbar-iframe {
display : none;
height : 0;
visibility : hidden;
}
body {
background:#fff
url(http://farm4.static.flickr.com/3313/3624912542_46e404697b_o.jpg) top center
repeat-y;
margin-left:-18px;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
a:link {
color:$linkcolor;
text-decoration:none;
}
a:visited {
color:$visitedlinkcolor;
text-decoration:none;
}
a:hover {
color:$titlecolor;
text-decoration:underline;
}
a img {
border-width:0;
}

/* Header
-----------------------------------------------
*/

#header-wrapper {
width:960px;
margin:0 auto 0px;
background:
url(http://sites.google.com/site/farisviosite/banner_template/liverpool-banner.jpg?
attredirects=0) no-repeat top center;
height:250px;
}

#head-inner {
width:640px;
background-position: left;
margin-left: auto;
margin-right: auto;
float:left;
}

#header {
margin: 0px;
margin-right: -230px;
text-align: right;
color:#fff;
}

#r_head{
width:300px;
float:left;
padding-top:10px;
}

#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;
}

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
background:
url(http://farm4.static.flickr.com/3261/3622004227_11a9c243f3_o.jpg) top center
repeat-y;
width: 960px;
margin:0 auto;
margin-bottom:-20px;
padding:0px;
text-align:$startSide;
font: $bodyfont;
}
#main-wrapper {
/*background:#8b8383;*/
width: 450px;
float: $startSide;
padding-left:10px;
padding-right:10px;
margin-left:10px;
margin-top:15px;
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-wrapper {
/*background:#8b8383;*/
width: 220px;
float: $endSide;
padding-left:10px;
margin-left: 0px;
margin-right:15px;
margin-top:15px;
/*border: 2px solid #434343;*/
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
*/
}
#second-sidebar-wrapper {
/*background:#8b8383;*/
width: 220px;
float: $startSide;
padding-left: 10px;
margin-left: 5px;
margin-top:15px;
/* border: 2px solid #434343;*/
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
*/
}

/* Headings
----------------------------------------------- */

h2 {
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:$sidebarcolor;
}

/* Posts
-----------------------------------------------
*/
h2.date-header {
margin:0 0 .5em;
line-height: 1.4em;
font: Corbel;
text-transform:lowercase;
}

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}

.post h3 a, .post h3 a:visited, .post h3 strong {


display:block;
text-decoration:none;
color:$titlecolor;
font-weight:normal;
}

.post h3 strong, .post h3 a:hover {


color:$textcolor;
}

.post-body {
margin:0 0 .75em;
line-height:1.6em;
}

.post-body blockquote {
line-height:1.3em;
}

.post-footer {
margin: .75em 0;
color:$sidebarcolor;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
line-height: 1.4em;
}

.comment-link {
margin-$startSide:.6em;
}
.post img {
padding:4px;
border:0px solid $bordercolor;
}
.post blockquote {
margin:1em 20px;
}
.post blockquote p {
margin:.75em 0;
}

/* Comments
----------------------------------------------- */
#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;

color: $sidebarcolor;
}

#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}

#blog-pager-newer-link {
float: $startSide;
}
#blog-pager-older-link {
float: $endSide;
}

#blog-pager {
text-align: center;
}

.feed-links {
clear: both;
line-height: 2.5em;
}

/* Sidebar Content
----------------------------------------------- */
.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;
}*/

.sidebar .widget{
background:#be0503;
border:2px solid #f5d4cf;
margin:0 0 1.5em;
padding:0.5em;
}

.main .widget {
background:#be0503;
border:2px solid #f5d4cf;
margin:0 0 1.5em;
padding:0.5em;
}

.main .Blog {
border-bottom-width: 0;
}
/* Profile
----------------------------------------------- */
.profile-img {
float: $startSide;
margin-top: 0;
margin-$endSide: 5px;
margin-bottom: 5px;
margin-$startSide: 0;
padding: 4px;
border: 0px solid $bordercolor;
}

.profile-data {
margin:0;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
color: $sidebarcolor;
font-weight: bold;
line-height: 1.6em;
}

.profile-datablock {
margin:.5em 0 .5em;
}

.profile-textblock {
margin: 0.5em 0;
line-height: 1.6em;
}

.profile-link {
font: $postfooterfont;
text-transform: uppercase;
letter-spacing: .1em;
}

/* Footer
----------------------------------------------- */
#footer {
background:#454545;
width:960px;
clear:both;
margin:0 auto;
margin-top: 80px;
padding-top:0px;
line-height: 1.0em;/* asli 1.6em*/
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

#footer p {
background:#454545;
color: #FFF;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
margin: 0px;
margin-bottom:-30px;
padding: 5px 10px 0px 10px;
}

#footer a, #footer a:visited {


color: #FFF;
text-decoration: none;
}

#footer a:hover {
text-decoration: underline;
}

#footer a img {
border: none;
margin: 0px 0px 0px 10px;
padding: 0px;
}

#footerleft {
background:#454545;/*gambar footer*/
width: 950px;
float: center;
margin: 0px;
padding: 5px 0px 10px 10px;
color: #fff;
}

/*#footerright {
background:#fff;
width: 260px;
float: right;
margin: 0px;
padding: 0px 0px 0px 0px;
text-align: right;
}*/
#header_atas{
background: url(http://farm4.static.flickr.com/3647/3621752242_f0f8d7a00c_o.jpg)
top center no-repeat;
margin:0px 0;
padding:0;
width:100%;
}
/*- Navbar -*/

#bg_nav {
background: url(http://farm4.static.flickr.com/3589/3615845559_002b393c23_o.gif)
top repeat;
width: 960px;
height: 30px;
font-size: 12px;
font-family: Arial;
color: #FFF;
font-weight: bold;
margin: 0px auto 0px;
margin-top:-5px;
padding: 0px;
border-top: 0px solid #333;
border-bottom: 0px solid #000;
overflow: hidden;
}

#bg_nav a, #bg_nav a:visited {


color: #FFF;
font-size: 12px;
text-decoration: none;
text-transform: uppercase;
padding: 0px 0px 0px 3px;
}

#bg_nav a:hover {
color: #FFF;
text-decoration: underline;
padding: 0px 0px 0px 3px;
}

#navleft {
width: 720px;
float: left;
margin: 0px;
padding: 0px;
}

#navright {
width: 220px;
font-size: 11px;
float: right;
margin: 0px;
padding: 6px 5px 0px 0px;
}

#navright a img {
border: none;
margin: 0px;
padding: 0px;
}

#nav {
margin: 0px;
padding: 0px;
list-style: none;
}

#nav ul {
margin: 0px;
padding: 0px;
list-style: none;
}

#nav a, #nav a:visited {


/*background: #000;*/
color: #FFF;
display: block;
font-weight: bold;
margin: 0px;
padding: 8px 15px;
border-left: 1px solid #000;
}

#nav a:hover {
background: #606060
url(http://farm4.static.flickr.com/3636/3621240953_b616f1274e_o.jpg)
repeat-x;/*----------ganti background---------------------*/
color: #FFFFFF;
margin: 0px;
padding: 8px 15px;
text-decoration: underline;
}

#nav li {
float: left;
margin: 0px;
padding: 0px;
}

#nav li li {
float: left;
margin: 0px;
padding: 0px;
width: 150px;
}

#nav li li a, #nav li li a:link, #nav li li a:visited {


background: #333;
width: 160px;
float: none;
margin: 0px;
padding: 7px 30px 7px 10px;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
}

#nav li li a:hover, #nav li li a:active {


background: #666;
padding: 7px 30px 7px 10px;
}

#nav li ul {
position: absolute;
width: 10em;
left: -999em;
}

#nav li:hover ul {
left: auto;
display: block;
}

#nav li:hover ul, #nav li.sfhover ul {


left: auto;
}
/*- Search Form -*/
#searchdiv {
margin: 0px;
padding: 0px;
}
#searchform {
margin: 4px;
padding: 0px;
overflow: hidden;
display: inline;
}
#subscribe {
margin: 0px;
padding: 0px;
overflow: hidden;
}
#s {
background: #606060;
width: 165px;
color: #000000;
font-size: 10px;
font-family: Arial, Tahoma, Verdana;
font-weight: normal;
margin: 0px;
padding: 4px 0px 2px 5px;
border-top: 1px solid #666666;
border-right: 1px solid #DDDDDD;
border-left: 1px solid #666666;
border-bottom: 1px solid #DDDDDD;
display: inline;
}
#sbutt {
background: #000;
color: #FFFFFF;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
margin: 0px 0px 0px 3px;
padding: 2px;
border: 1px solid #234B69;
font-weight: bold;
}
#subbox {
background: #606060;
width: 200px;
color: #000000;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
font-weight: normal;
margin: 10px 0px 0px 0px;
padding: 3px;
border-top: 1px solid #666666;
border-right: 1px solid #ddd;
border-left: 1px solid #666666;
border-bottom: 1px solid #ddd;
display: inline;
}
#subbutton {
background: #2B74B4;
color: #FFFFFF;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
margin: 0px 0px 0px 5px;
padding: 2px;
border: 1px solid #234B69;
font-weight: bold;
}
#name, #email, #url {
background: #FFFFFF;
color: #000000;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
margin: 0px;
padding: 4px;
border-top: 1px solid #666666;
border-right: 1px solid #DDDDDD;
border-left: 1px solid #666666;
border-bottom: 1px solid #DDDDDD;
}
#submit {
background: #2B74B4;
color: #FFFFFF;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
padding: 4px;
margin: 0px;
border: 1px solid #234B69;
}
#words {
background: #FFFFFF;
width: 460px;
color: #000000;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
padding: 4px;
margin: 0px;
border-top: 1px solid #666666;
border-right: 1px solid #DDDDDD;
border-left: 1px solid #666666;
border-bottom: 1px solid #DDDDDD;
}
/*--kolom di bawah header--*/

#atas_header {
background:#b9e0fd
url(http://farm3.static.flickr.com/2427/3621968534_22bfd91806_o.jpg) repeat-y;
width: 960px;
margin: 0px;
padding: 0 5 0 5px;
float:left;
border-bottom:3px solid #0b1857;
}
/*
#bawahkiri {
width: 225px;
float: left;
margin-left: 10px;
padding: 5px 5px 0px 5px;
}
#bawahkiri2 {
width: 225px;
float: left;
/*margin-left: -9px;*/
padding: 5px 5px 0px 5px;
}
#bawahkiri3 {
width: 225px;
float: left;
/*margin-left: -9px;*/
padding: 5px 5px 0px 5px;
}

#bawahkanan {
width: 225px;
float: right;
margin-right: 10px;
padding: 5px 5px 0px 5px;
}*/
/*---end of kolom di bawah header---*/

]]></b:skin>
<style>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>

</head>

<body>
<div id='outer-wrapper'><div id='wrap2'>
<!-- skip links for text browsers -->
<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>

<div id='atas_header'>
<b:section class='header' id='atasheader' preferred='yes'/>

</div>
<div id='header-wrapper'>
<div id='head-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='LiverPool (Header)' type='Header'/>
</b:section>
</div>
<div id='r_head'>
<b:section class='header' id='header2' preferred='yes'/>
</div>
</div>

<div id='header_atas'>
<b:section class='header' id='headeratas' preferred='yes'/>
</div>

<div id='bg_nav'>

<div id='navleft'>
<div id='nav'>
<ul>
<li><a href='#'>home</a></li>
<li><a href='http://mobilsedan.blogspot.com/' target='new'>Top Gear</a></li>
<li><a href='http://balapangp.blogspot.com/' target='new'>MotoGp</a></li>
<li><a href='http://fifa-wordl.blogspot.com/' target='new'>Football</a></li>
<li><a href='http://fretemplatesblog.blogspot.com/' target='new'>Free Templates
Blogger</a></li>

</ul>
</div>
</div>

<div id='navbarright'>

<form action='/search' id='searchThis' method='get' style='display:inline;'>


<input id='searchform' name='q' size='20' type='text'/> <input id='sbutt'
type='submit' value='Search'/>
</form>

</div>

</div><!-- end bg_nav -->

<div id='content-wrapper'>

<div id='crosscol-wrapper' style='text-align:center'>


<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>

<div id='second-sidebar-wrapper'>
<b:section class='sidebar' id='second-sidebar' preferred='yes'>
<b:widget id='BlogList1' locked='false' title='Blogroll' type='BlogList'/>
<b:widget id='Feed1' locked='false' title='Recent Post' type='Feed'/>
<b:widget id='Feed2' locked='false' title='Recent Comment' type='Feed'/>
</b:section>
</div>

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</div>

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
<b:widget id='Followers1' locked='false' title='Member' type='Followers'/>
<b:widget id='BlogArchive1' locked='false' title='Archive' type='BlogArchive'/>
</b:section>
</div>

<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'>&#160;</div>

</div> <!-- end content-wrapper -->

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
<div id='footerleft'>

<!-- For legal using, Don't delete this credit links -->

<p>&#169;&#160;Copyright (c) <strong><data:blog.title/></strong> | Template by <a


href='http://fretemplatesblog.blogspot.com/' target='_blank' title='Free
Templates'>Free Templates Blogger</a> | Published by <a
href='http://contohblognih.blogspot.com/' target='_blank' title='CB Blogger'>CB
Blogger</a> | Powered by <a href='http://blogger.com/' target='_blank'
title='Blogger'>Blogger</a></p>

</div>

</div>

</div></div> <!-- end outer-wrapper -->


</body>
</html>

You might also like