Blogger XML Template - Deadlines
Enough foo-foo. (At least for now...I have a soft spot for the swirlies, and another swirlie is almost ready to publish!) This is a down and dirty, no frills, we got business to do blog template. And I love it!! So, roll up your sleeves and getter dun.
This template is packed full of goodies:
- Fluid Widebar (Hack by me)
- Label Cloud (Hack by phydeaux3)
- Fluid style (Hack by me)
- Two sidebars
- Post area
- Lovely footer
- Custom favicon
- Fancy links (go ahead...hover over one!)
- Clickable header on post page
- Custom blockquotes
- Awesome Coffee Ring Brushes for Photoshop by On Thin Air
UPDATES:
02/19/08 - Do to some inner problem with Blogger, beyond my control and that I can't figure out, please use the 'Copy and Paste' txt file instead of uploading the xml file. Simply copy and paste it in the 'Edit Template' window. Save.
03/07/08: Fixed problem in IE to eliminate horizontal scrollbar.
04/09/08: Added text file in this post to copy and paste. You will still have to add the images as indicated in the instructions from the zip file. Go to the Dashboard | Layout | Edit HTML | Edit Template window. +/-Paste this text in that window:
<?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>
<link href='IMAGE/favicon2.png' rel='shortcut icon'/>
<link href='IMAGE/favicon2.png' rel='icon'/>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: Minima
Designer: Douglas Bowman
URL: www.stopdesign.com
Date: 26 Feb 2004
Updated by: anniebluesky
Name: Deadlines
URL: www.bloggeruniversity.blogspot.com
----------------------------------------------- */
/* Variable definitions
====================
<Variable name="bgcolor" description="Page Background Color"
type="color" default="#fff" value="#ffffff">
<Variable name="textcolor" description="Text Color"
type="color" default="#987654" value="#333333">
<Variable name="linkcolor" description="Link Color"
type="color" default="#987654" value="#333333">
<Variable name="pagetitlecolor" description="Blog Title Color"
type="color" default="#987654" value="#333333">
<Variable name="descriptioncolor" description="Blog Description Color"
type="color" default="#987654" value="#4c4c4c">
<Variable name="titlecolor" description="Post Title Color"
type="color" default="#c60" value="#191919">
<Variable name="bordercolor" description="Border Color"
type="color" default="#ffb6c1" value="#808080">
<Variable name="sidebarcolor" description="Sidebar Title Color"
type="color" default="#999" value="#191919">
<Variable name="sidebartextcolor" description="Sidebar Text Color"
type="color" default="#987654" value="#4c4c4c">
<Variable name="visitedlinkcolor" description="Visited Link Color"
type="color" default="#999" value="#6f3c1b">
<Variable name="bodyfont" description="Text Font"
type="font" default="normal normal 100% Georgia, Serif" value="normal normal 119% Georgia, Times, serif">
<Variable name="posttitlefont" description="Post Title Font"
type="font" default="normal normal 100% Georgia, Serif" value="normal normal 119% Trebuchet, Trebuchet MS, Arial, sans-serif">
<Variable name="headerfont" description="Sidebar Title Font"
type="font"
default="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="italic bold 115% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif">
<Variable name="pagetitlefont" description="Blog Title Font"
type="font"
default="normal normal 200% Georgia, Serif" value="normal normal 382% Georgia, Times, serif">
<Variable name="descriptionfont" description="Blog Description Font"
type="font"
default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 116% Trebuchet, Trebuchet MS, Arial, sans-serif">
<Variable name="postfooterfont" description="Post Footer 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="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 */
body {
background: url('IMAGE/top_sides.png') top left repeat-x #FFFFFF;
margin:0;
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 {
background-color: #636363;
color: #ffffff;
text-decoration: none;
}
a img {
border-width:0;
}
/* Header
-----------------------------------------------
*/
#header-wrapper {
width:800px;
margin: -5px 0 35px 158px;
}
#header-inner {
background-image:url(IMAGE/header.png);
background-repeat:no-repeat;
height: 370px;
background-position: center;
margin-left: auto;
margin-right: auto;
}
#header {
margin: 5px;
text-align: center;
color:$pagetitlecolor;
}
#header h1 {
margin:5px 5px 0 -250px;
padding: 40px 15px 20px 5px;
line-height:1.2em;
text-transform:none;
letter-spacing:.2em;
font: $pagetitlefont;
color: $pagetitlecolor;
}
#header a {
color:$pagetitlecolor;
text-decoration:none;
}
#header a:hover {
background-color: #FADADD;
color: #987654;
text-decoration: none;
}
#header .description {
margin:0 5px 5px;
padding:0 20px 5px;
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;
}
#navbar-iframe {
display: none !important;
}
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
margin-left: 5%;
margin-right: 2%;
text-align: left;
width: 93%;
padding: 0 10px 10px 10px;
text-align:$startSide;
font: $bodyfont;
}
#main-wrapper {
width: 45%;
padding: 0 10px 0 10px;
border: 2px solid $bordercolor;
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 */
}
#widebar-wrapper {
float: right;
margin: 0px 05px 0 15px;
padding: 10px;
width: 47%;
border: 2px solid $bordercolor;
word-wrap: break-word;
color: $textcolor;
}
#widebar {
padding: 10px 0 5px 0px;
width: 100%;
word-wrap: break-word;
color: $textcolor;
}
#leftsidebar-wrapper {
float: right;
margin: 30px 0 0 10px;
padding: 10px;
overflow: hidden;
border: 2px solid $bordercolor;
width: 23%;
word-wrap: break-word;
}
#rightsidebar-wrapper {
float: right;
margin: 30px 10px 0 0;
padding: 10px;
overflow: hidden;
width: 21%;
border: 2px solid $bordercolor;
word-wrap: break-word;
}
/* 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:1.5em 0 .5em;
}
.post {
margin:.5em 0 1.5em;
padding-bottom:1.5em;
}
.post h3 {
margin:.25em 0 0;
padding:0 0 4px 0px;
font: $posttitlefont;
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;
background-color: #636363;
color: #ffffff;
text-decoration: none;
}
.post-body {
line-height:1.6em;
}
.post p {
margin:0 0 .75em;
line-height:1.6em;
}
.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:2px solid $bordercolor;
}
blockquote{
background-color: transparent;
border-top: 3px dotted #4c4c4c;
border-bottom: 3px dotted #4c4c4c;
padding: 15px;
font-style: oblique;
font-size: 1em;
margin-left: 5%;
margin-right: 5%;
}
/* 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 {
margin:0 0 1.5em;
padding:0 0 1.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: 1px 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 {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
p.credits {
font-family: sans-serif;
font-style: normal;
font-variant: normal;
font-weight: normal;
font-size: small;
line-height: 100%;
word-spacing: normal;
letter-spacing: 0.3ex;
text-decoration: none;
text-transform: lowercase;
text-align: center;
text-indent: 0ex;
}
/** Page structure tweaks for layout editor wireframe */
body#layout #header {
width: 400px;
}
/* Label Cloud Styles
----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:none; color: #ffffff !important;}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}
]]></b:skin>
</head>
<script type='text/javascript'>
// Label Cloud User Variables
var cloudMin = 1;
var maxFontSize = 25;
var maxColor = [102,102,102];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>
<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='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='annie"s template tester (Header)' type='Header'/>
</b:section>
</div>
<div id='content-wrapper'>
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
<div id='widebar-wrapper'>
<b:section class='sidebar' id='widebar1' preferred='yes'>
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
</b:section></div>
<div id='leftsidebar-wrapper'>
<b:section class='sidebar' id='leftsidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='It "s all about me...' type='Profile'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
</b:section>
</div>
<div id='rightsidebar-wrapper'>
<b:section class='sidebar' id='rightsidebar' preferred='yes'>
<b:widget id='LinkList1' locked='false' title='Link Love' type='LinkList'/>
<b:widget id='Text1' locked='false' title='Lorem ipsum' type='Text'/>
</b:section>
</div>
<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'> </div>
</div> <!-- end content-wrapper -->
<div id='footer-wrapper'>
<b:section class='footer' id='footer'>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
</b:section>
</div>
</div></div> <!-- end outer-wrapper -->
<!--Please do not remove the credit links below, thank you.-->
<p class='credits'><span style='color : #4c4c4c; '>
designer : anniebluesky : </span>
<a href='http://bloggeruniversity.blogspot.com/'>
<span>www.bloggeruniversity.blogspot.com</span></a></p>
<!--END FOOTER -->
</body>
</html>
Labels:
Blogger Beta,
templates
29 Comments:
Hey Annie, thanks for the new template. I am a regular reader and user of your various tips. Unfortunately, it won't upload and I get this message -
"Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: Content is not allowed in prolog."
Any thoughts?
Good blog
@solomonsydelle, I have no idea why it is doing that today. I loaded and reloaded the XML file several times yesterday with no problems. I'll try to see what the problem is.
Thanks much! Did you notice anything wrong? I am using the file in a test blog that has no widgets or anything and yet, no success.
Thanks again!
@Solomonsydelle, I think it may of had something to do with the fact that I used some widgets that are still in 'draft' on the template. I don't know. I tried removing them and still had problems. So, I copied the template without the draft widgets and tried pasting and saving in a new blog and it worked.
So, until something changes, use the copy and paste method of loading the template. It is included in the zip file now.
Let me know how it goes for you.
I posted an error message to the help group, but haven't heard much yet.
Hello , i am very desparate to find a new blogger hack "Popular posts" or whatever it is called.I checked all the hacks about it , but they are very complicated or not reliable , or heave scripts.If you have some ideas for this hack , please contact me : spursster@gmail.com
Hi Annie~
Just stopped by for a read and noticed your new template.
Awesome!
You ROCK!
@Ron, Thanks for noticing! :-)
Nice themplate you got there:)
Morten@Online Games
Thats a great template! Really liked it right away, will check this one out now!
Hey Annie: I tried again, per your new instructions and it worked perfectly! Thanks!
Only one thing though, It lacks a navbar and I am having trouble accessing the Dashboard without using my other blogs.
Nevertheless I love it, will tinker with it and use it n my main blog soon. Thanks!
I love your templates/layouts, I am currently using 'A day without chocolate', but I may switch to this one soon. It is more me. I am having a bit of a problem though, how on earth do I change the font in the header? I want something a little more girly in the chocolate..
thanks.
@Patti, you can use a photo manipulating program such as GIMP or Photoshop and add the title to the image using your choice of fonts.
@Patti, I see you figured it out. I would appreciate if you leave the credits intact. It takes me a long time to make templates, and I offer them free to use. The only thing I do ask if to leave my credit line in place.
I do like the new template. Just wanted to let you know that I have used a bunch of information from your posts and have found them very helpful. Nice work.
Oh, do not think that I used them on the blog I linked, don't freak out if you look at it. That blog is not your fault at all....ha.
Annie,
I did figure that out. I do not know what you mean by the credits, is that the box on the bottom. It was blank! I tried to re-upload the HTML a few times, but it is always blank. Can you tell me how to put it there? I will be more than happy to! I love your work and want to credit you, also I saw the lik to the blogU button on your blog, how do I add that to my blog so people can click it.
thanks. P
@Patti, Sorry, I just checked my template and when I did a revision, I left it out. I'm putting a new update up, but all you have to do to put the credit line in is find the </body> tag and put this code immediately before it:
<!--Please do not remove the credit links below, thank you.-->
<p class='credits'><span style='color : #987654; '>
designer : anniebluesky : </span>
<a href='http://bloggeruniversity.blogspot.com/'>
<span style='color : #987654;'>www.bloggeruniversity.blogspot.com</span></a></p>
<!--END FOOTER -->
And if you want to put the BlogU button in your sidebar, look in my sidebar under "If You Want to Know..." and copy the code in the scroll box (under Grab this button:) and paste it in a HTML/Javascript widget.
Sorry about the confusion!!!
Thanks so much. Got it there now. I think I'm going to stick with Chocolate for a while, my fans (friends/family) seems ot like it. Will play around some more to make it 'mine'. You are a wonderful artist.
thanks again.
P
I love the template, thanks so much!
I too needed the navbar, so I played around with it a little.
changing
#navbar-iframe {
display: none !important;
}
to
#navbar-iframe {
display: block
}
gets the iframe back, but throws the line across the header off.
so I moved the lines down on top_sides.png to match it up.
Here's a link if anyone wants to download it: http://i98.photobucket.com/albums/l256/Bluepickle_1/top_sides3.png
I also robbed the hiding navbar from Blog U and changed it to black.
Thanks so much for an awesome design!!
That is fantastic work by jenn.. It is not only Jenn If it was'nt you he would have not implemented this, so i would call this as a great team work...
Great template design! Only problem is that I'm rather embarrassed about how much it reminds me of my own desktop and work style.
annie.. there's something wrong w/ all the labels in postfooter of your blog templates. i want to remove them but they're fixed!!
@anonymous, I don't understand why your labels don't just 'take over' but, try deleting the labels in the post editor.
Hi Annie
You have a really well laid out and informative blog here, and this template looks perfect for my next blog project. My current blog is:
Tims Internet Cashflow Blog
Again, great work, I will be social bookmarking this blog ;)
Wow! This is exactly what I was looking for. Beautiful and amazing images. I want to do something similar in my browser background. Will you please take a look at my site and offer a suggestion? I would greatly appreciate it. http://www.forumerkezi.com Happy Holidays!
I like the concept with this design with the coffee stains. Not too big on the typography or the poorly spaced floating boxes though :/
//Frankie
this template is nice, the marks fit the topic as well. Have you thought about selling them? not just allowing everyone to download them for free?
thanks!
nowadays as the worlds speeds up, not just by itself, which is probably not true, but the amount of knowledge is greater, we tend to concentrate more on specific subjects, and have less and less time to do anything else. And here come the specialists, who know subjects, like coding, forming blogs. value your stuff, dear blogger.
life is one great journey if we know what we want and how to get it. Just like in web design. It is much easier to design something great if we know what the website is going to be about. clear designs are the best!