Here's the template:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html
b:version='2'
class='v2'
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='http://fonts.googleapis.com/css?family=Marcellus' rel='stylesheet' type='text/css'></link>
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
<b:skin>
<![CDATA[
/*
-----------------------------------------------
----------------------------------------------- */
/* =================================================
CSS Styling
================================================= */
.post-wrapper {
padding: 3px 0px 6px 9px;
background-color: #f6f7e8;
width: 450px;
margin: 10px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.post-title {
color: #a9b620;
font-family: 'Marcellus', serif;
}
.post-title a {
color: #a9b620;
text-decoration: none;
display: block;
}
.post-title a:hover {
color: #545b10;
}
]]>
</b:skin>
</head>
<body>
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
<b:includable id='main' var='top'>
<b:if cond='data:numPosts != 0'>
<b:loop values='data:posts' var='post'>
<div class="post-wrapper">
<b:include data='post' name='post'/>
</div>
</b:loop>
</b:if>
</b:includable>
<b:includable id='post' var='post'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<div class="post-title">
<b:if cond='data:post.link'>
<a expr:href='data:post.link'>
<data:post.title/>
</a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'>
<data:post.title/>
</a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</div>
</b:if>
</b:includable>
</b:widget>
</b:section>
</body>
</html>
What did I add this time around?
- Wrapped <b:include data='post' name='post'/> in a <div class="post-wrapper"> - used for styling each post (e.g., putting padding around the post).
- Wrapped all of the conditional title stuff in a <div class="post-title"> - used for stying each title (e.g., changing removing link underlines, creating hover effect, etc.).
- Added a link to the Marcellus Google font just below the <head> tag. See How to use Google's Font API with Blogger and Google web fonts. Note that bloggerbuster recommends making the <link> tag self closing. I used a closing tag instead. Just a preference.
- Added CSS styling into the <b:skin> section. I'm not going to detail out how to do CSS or what these codes mean. I'll leave that to you.
No comments:
Post a Comment