Azo Web Tech: BirdNest Blogger Template

The "Bird Nest" Stadium - Beijing, Summer Olympic 2008.

Inspired by the summer Olympic 2008, I've created this template for Blogger user. If you just created the Blogger account and have not activated any Blogger gadget yet, you can just upload the XML straight away.

<?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
 Name: Bird Nest
 Designer: Azizul Ameir
 Based on: Minima (Douglas Bowman)
 URL: azowebsphere.blogspot.com
 Date: 18 Aug 2008
 ----------------------------------------------- */
 
 /* Variable definitions
 ====================
 <Variable name="bgcolor" description="Page Background Color" type="color" default="#020204" value="#020204">
 <Variable name="textcolor" description="Text Color" type="color" default="#ccc" value="#cccccc">
 <Variable name="linkcolor" description="Link Color" type="color" default="#58a" value="#5588aa">
 <Variable name="pagetitlecolor" description="Blog Title Color" type="color" default="#fff" value="#ffffff">
 <Variable name="descriptioncolor" description="Blog Description Color" type="color" default="#999" value="#999999">
 <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="#999" value="#999999">
 <Variable name="sidebartextcolor" description="Sidebar Text Color" type="color" default="#666" value="#666666">
 <Variable name="visitedlinkcolor" description="Visited Link Color" type="color" default="#58a" value="#5588aa">
 <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 normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal normal 78% '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 200% Georgia, Serif">
 <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% '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:$bgcolor;
 height:100%;
 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 {
 color:$titlecolor;
 text-decoration:underline;
 }
 a img {
 border-width:0;
 }
 
 /* Header
 -----------------------------------------------
 */
 
 #header-wrapper {
 width:800px;
 margin:0 auto;
 }
 
 #header-inner {
 background-position: center;
 margin-left: auto;
 margin-right: auto;
 }
 
 #header { 
 margin-top: 5px;
 text-align: left;
 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;
 }
 
 
 /* Outer-Wrapper
 ----------------------------------------------- */
 #outer-wrapper {
 width: 800px;
 margin:0 auto;
 padding:0;
 text-align:$startSide;
 font: $bodyfont;
 background: #08070f url(http://lh5.ggpht.com/azizul.ameir/SKowLYI9jPI/AAAAAAAAA9A/Ws900PXDRVo/bird_nest-800.jpg) no-repeat top center;
 }
 
 #main-wrapper {
 width: 530px;
 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 */
 margin-top: 180px;
 padding: 10px;
 }
 
 #sidebar-wrapper {
 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 */
 margin-top: 180px;
 padding: 10px;
 }
 
 
 /* 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;
 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:1px 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;
 }
 
 .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;
 }
 ]]></b:skin>
 </head>
 
 <body>
 <div id='outer-wrapper'><div id='wrap2'>
 
 
 
 <a href='#main'>skip to main </a> |
 <a href='#sidebar'>skip to sidebar</a>
 
 
 <div id='header-wrapper'>
 	<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
 		<b:widget id='Header1' locked='true' title='Bloggertrix (Header)' type='Header'>
 		<b:includable id='title'>
 		<b:if cond='data:blog.url == data:blog.homepageUrl'>
 		<data:title/>
 		<b:else/>
 		<a expr:href='data:blog.homepageUrl'><data:title/></a>
 		</b:if>
 		</b:includable>
 		<b:includable id='description'>
 		<div class='descriptionwrapper'>
 		<data:description/>
 		</div>
 		</b:includable>
 		<b:includable id='main'>
 		 <div class='titlewrapper'>
 		 <h1 class='title'>
 		 <b:if cond='data:blog.url == data:blog.homepageUrl'>
 		 <data:title/>
 		 <b:else/>
 		 <a expr:href='data:blog.homepageUrl'><data:title/></a>
 		 </b:if>
 		 </h1>
 		 </div>
 		 <div class='descriptionwrapper'>
 		 <data:description/>
 		 </div>
 		</b:includable>
 		</b:widget>
 		</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:includable id='nextprev'>
 <div class='blog-pager' id='blog-pager'>
 <b:if cond='data:newerPageUrl'>
 
 <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
 
 </b:if>
 
 <b:if cond='data:olderPageUrl'>
 
 <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
 
 </b:if>
 
 <b:if cond='data:blog.homepageUrl != data:blog.url'>
 <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
 <b:else/>
 <b:if cond='data:newerPageUrl'>
 <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
 </b:if>
 </b:if>
 
 </div>
 <div class='clear'/>
 </b:includable>
 <b:includable id='backlinks' var='post'>
 <a name='links'/><h4><data:post.backlinksLabel/></h4>
 <b:if cond='data:post.numBacklinks != 0'>
 <dl class='comments-block' id='comments-block'>
 <b:loop values='data:post.backlinks' var='backlink'>
 <div class='collapsed-backlink backlink-control'>
 <dt class='comment-title'> 
  
 <a expr:href='data:backlink.url' rel='nofollow'><data:backlink.title/></a>
 <b:include data='backlink' name='backlinkDeleteIcon'/>
 </dt>
 <dd class='comment-body collapseable'>
 <data:backlink.snippet/>
 </dd>
 <dd class='comment-footer collapseable'>
 <data:post.authorLabel/> <data:backlink.author/>
 <data:post.timestampLabel/> <data:backlink.timestamp/>
 </dd>
 </div>
 </b:loop>
 </dl>
 </b:if>
 
 <a class='comment-link' expr:href='data:post.createLinkUrl' expr:id='data:widget.instanceId + "_backlinks-create-link"' target='_blank'><data:post.createLinkLabel/></a>
 
 </b:includable>
 <b:includable id='post' var='post'>
 <div class='post' id='post'>
 <a expr:name='data:post.id'/>
 <h2 class='date-header' id='PostDate'>
 <data:post.dateHeader/>
 </h2>
 <h3 class='post-title' id='PostTitle'>
 <b:if cond='data:post.url'>
 <a expr:href='data:post.url'><data:post.title/></a>
 <b:else/>
 <data:post.title/>
 </b:if>
 </h3> 
 
 <div class='post-header-line-1'/>
 <style>#fullpost {display:none;}</style>
 <div class='post-body' id='PostContent'>
 <data:post.body/>
 <div style='clear: both;'/> 
 </div>
 
 <a href='javascript:showFullNeo();'>Read More...</a>
 
 
 <a href='javascript:hideFullNeo();'>Collapse...</a>
 
 <script type='text/javascript'>
 checkFullNeo();
 </script>
 <div class='post-footer'>
 
 
 <b:if cond='data:top.showAuthor'>
 <data:top.authorLabel/> <data:post.author/>
 </b:if>
 
 <b:if cond='data:post.editUrl'>
 
 <a expr:href='data:post.editUrl' title='Edit Post'>
  
 </a>
 
 </b:if>
 
 <h3 class='post-comment-link' id='PostCommentLink'>
 <a expr:href='data:post.addCommentUrl' target='_blank'>Post a Comment</a>
 </h3>
 
 
 
 <b:if cond='data:post.emailPostUrl'>
 
 <a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
  
 </a>
 
 </b:if>
 
 </div>
 
 <div id='backlinks-container'>
 <div expr:id='data:widget.instanceId + "_backlinks-container"'>
 <b:if cond='data:post.showBacklinks'>
 <b:include data='post' name='backlinks'/>
 </b:if>
 </div>
 </div>
 </div>
 </b:includable>
 <b:includable id='commentDeleteIcon' var='comment'>
 
 <a expr:href='data:comment.deleteUrl' expr:title='data:top.deleteCommentMsg'>
  
 </a>
 
 </b:includable>
 <b:includable id='status-message'>
 <b:if cond='data:navMessage'>
 <div class='status-msg-wrap'>
 <div class='status-msg-body'>
 <data:navMessage/>
 </div>
 <div class='status-msg-border'>
 <div class='status-msg-bg'>
 <div class='status-msg-hidden'><data:navMessage/></div>
 </div>
 </div>
 </div>
 <div style='clear: both;'/>
 </b:if>
 </b:includable>
 <b:includable id='feedLinks'>
 <b:if cond='data:blog.pageType != "item"'> 
 <b:if cond='data:feedLinks'>
 <div class='blog-feeds'>
 <b:include data='feedLinks' name='feedLinksBody'/>
 </div>
 </b:if>
 
 <b:else/> 
 <div class='post-feeds'>
 <b:loop values='data:posts' var='post'>
 <b:if cond='data:post.allowComments'>
 <b:if cond='data:post.feedLinks'>
 <b:include data='post.feedLinks' name='feedLinksBody'/>
 </b:if>
 </b:if>
 </b:loop>
 </div>
 </b:if>
 </b:includable>
 <b:includable id='comment-form' var='post'>
 <div class='comment-form'>
 <a name='comment-form'/>
 <h4 id='comment-post-message'><data:postCommentMsg/></h4>
 <data:blogCommentMessage/>
 <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src' style='display: none'/>
 <iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='auto' src='' width='100%'/>
 <data:post.iframeColorizer/>
 </div>
 </b:includable>
 <b:includable id='backlinkDeleteIcon' var='backlink'>
 
 <a expr:href='data:backlink.deleteUrl' expr:title='data:top.deleteBacklinkMsg'>
  
 </a>
 
 </b:includable>
 <b:includable id='feedLinksBody' var='links'>
 <div class='feed-links'>
 <data:feedLinksMsg/>
 <b:loop values='data:links' var='f'>
 <a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
 </b:loop>
 </div>
 </b:includable>
 <b:includable id='postQuickEdit' var='post'>
 <b:if cond='data:post.editUrl'>
 
 <a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
  
 </a>
 
 </b:if>
 </b:includable>
 <b:includable id='comments' var='post'>
 <div class='comments' id='comments'>
 <a name='comments'/>
 <b:if cond='data:post.allowComments'>
 <h4>
 <b:if cond='data:post.numComments == 1'>
 1 <data:commentLabel/>:
 <b:else/>
 <data:post.numComments/> <data:commentLabelPlural/>:
 </b:if>
 </h4>
 
 <dl id='comments-block'>
 <b:loop values='data:post.comments' var='comment'>
 <dt class='comment-author' expr:id='"comment-" + data:comment.id'>
 <a expr:name='"comment-" + data:comment.id'/>
 <b:if cond='data:comment.authorUrl'>
 <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
 <b:else/>
 <data:comment.author/>
 </b:if>
 <data:commentPostedByMsg/>
 </dt>
 <dd class='comment-body'>
 <b:if cond='data:comment.isDeleted'>
 <data:comment.body/>
 <b:else/>
 <data:comment.body/>
 </b:if>
 </dd>
 <dd class='comment-footer'>
 
 <a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
 <data:comment.timestamp/>
 </a>
 <b:include data='comment' name='commentDeleteIcon'/>
 
 </dd>
 </b:loop>
 </dl>
 
 
 <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
 
 </b:if>
 
 <div id='backlinks-container'>
 <div expr:id='data:widget.instanceId + "_backlinks-container"'>
 <b:if cond='data:post.showBacklinks'>
 <b:include data='post' name='backlinks'/>
 </b:if>
 </div>
 </div>
 </div>
 </b:includable>
 <b:includable id='main' var='top'>
 
 <div class='blog-posts'>
 <b:loop values='data:posts' var='post'>
 <b:include data='top' name='status-message'/>
 <b:include data='post' name='post'/>
 
 <script language='javascript'>
 var blogAuthor = '<data:post.author/>';
 fetchComments('<data:post.id/>');
 </script>
 </b:loop>
 </div>
 <b:if cond='data:blog.pageType != "archive"'>
 <div class='comments' id='comments'>
 <center><h2>No comments yet</h2></center>
 </div>
 </b:if>
 
 </b:includable>
 </b:widget>
 </b:section>
 </div>
 
 <div id='sidebar-wrapper'>
 <b:section class='sidebar' id='sidebar' preferred='yes'>
 <b:widget id='Gadget1' locked='false' title='Blogger Play' type='Gadget'>
 <b:includable id='main'> 
 
 <b:if cond='data:renderingUrl != ""'>
 <b:if cond='data:title != ""'>
 <h2 class='title'><data:title/></h2>
 </b:if>
 <div class='widget-content' style='border: 1px solid #999; padding: 2px'>
 
 <b:if cond='data:trackingUrl != ""'>
 <img expr:src='data:trackingUrl' height='1' width='1'/>
 </b:if>
 
 <iframe expr:height='data:height' expr:id='data:moduleId' expr:name='data:moduleId' expr:src='data:renderingUrl' frameborder='0' style='width: 100%; display: block'>
 </iframe>
 </div>
 <b:else/>
 <data:errorMessage/>
 </b:if>
 
 <b:include name='quickedit'/>
 </b:includable>
 </b:widget>
 <b:widget id='Label1' locked='false' title='Labels' type='Label'>
 <b:includable id='main'>
 <div id='LabelList'>
 <b:if cond='data:title'>
 <h2><data:title/></h2>
 </b:if>
 <div class='widget-content'>
 <ul>
 <b:loop values='data:labels' var='label'>
 <li>
 <b:if cond='data:blog.url == data:label.url'>
 <data:label.name/>
 <b:else/>
 <a expr:href='"javascript:fetchLatestPosts(\"" + data:blog.homepageUrl + "\",\"" + data:label.name + "\");"'><data:label.name/></a>&nbsp;(<data:label.count/>) 
 </b:if>
 </li>
 </b:loop>
 </ul>
 <b:include name='quickedit'/>
 </div>
 </div>
 </b:includable>
 </b:widget>
 <b:widget id='AzoLogo' locked='false' title='Azo Logo' type='HTML'>
 <b:includable id='main'>
 <div class='widget-content'>
 <a href='http://azowebsphere.blogspot.com/search/label/blogger%20template'><img src='http://lh5.ggpht.com/azizul.ameir/SKrJJ-q_poI/AAAAAAAAA9c/mBYXenl7Z5M/template_by_azowebsphere.png'/></a>
 </div>
 
 <b:include name='quickedit'/>
 </b:includable>
 </b:widget>
 </b:section>
 </div>
 
 
 <div class='clear'> </div>
 
 </div> 
 
 <div id='footer-wrapper'>
 <b:section class='footer' id='footer'/>
 </div>
 
 </div></div> 
 </body>
 </html>

Alternatively you can directly Download Template

Azo Web Tech

Pages

Tuesday, August 19, 2008

BirdNest Blogger Template

0 comments:

First time here ?

Blog Archive

Label Cloud

TechCrunch Feeds

I stumbled with this awesome stuff

My Stuff

My Online Tools

Blog Roll

My Reference

Followers

Subscribe To AzoWebSphere

Powered by