Few hours after I decided to start my own HTML5 Blogger Layout Template, this blogs is using one by my own creation.
<!DOCTYPE html>
<html>
<head>
<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> <<< $(<data:blog.title/>)</title>
<b:else/><b:if cond='data:blog.pageType == "static_page"'>
<title><data:blog.pageName/> <<< $(<data:blog.title/> --page)</title>
<b:else/><b:if cond='data:blog.pageType == "archive"'>
<title><data:blog.title/> --in '<data:blog.pageName/>'</title>
<b:else/><b:if cond='data:blog.pageName != ""'>
<title><data:blog.title/> --query '<data:blog.pageName/>'</title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if></b:if></b:if></b:if>
<meta http-equiv="Content-Type" expr:content='"text/html; charset=" + data:blog.encoding'/>
<data:blog.feedLinks/>
<b:skin/>
<style>@import url(http://www.yjl.im/css/yjlv.css);</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'/>
</head>
<body>
<header id='blog-header'>
<div class='wrapper'>
<b:section id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' type='Header'>
<b:includable id='main'>
<hgroup>
<h1 id='blog-title'><a expr:href='data:blog.homepageUrl'><data:title/></a></h1>
<h2 id='blog-description'><data:description/></h2>
</hgroup>
</b:includable>
</b:widget><!-- #Header1 -->
</b:section><!-- #header -->
<nav>
<b:section id='header-nav' maxwidgets='1' showaddelement='no'>
<b:widget id='PageList1' locked='true' type='PageList'>
<b:includable id='main'>
<form action="http://www.google.com/cse" id="cse-search-box" target="_blank">
<div>
<input name="cx" type="hidden" value="partner-pub-7147644389863728:xce1b-ppo12"/>
<input name="ie" type="hidden" value="UTF-8"/>
--search "<input name="q" size="16" type="text"/>"
</div>
</form>
<ul>
<b:loop values='data:links' var='link'>
<b:if cond='data:link.isCurrentPage'>
<li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
<b:else/>
<li><a expr:href='data:link.href'><data:link.title/></a></li>
</b:if>
</b:loop>
</ul>
<div style='clear:both'/>
</b:includable>
</b:widget><!-- #PageList1 -->
</b:section><!-- #header-nav -->
</nav>
</div><!-- .wrapper -->
</header>
<b:section id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' type='Blog'>
<b:includable id='main' var='top'>
<b:include data='top' name='status-message'/>
<b:loop values='data:posts' var='post'>
<b:include data='post' name='post'/>
</b:loop>
<div class='wrapper'>
<!-- navigation -->
<b:include name='nextprev'/>
<!-- feed links -->
<b:include name='feedLinks'/>
</div>
</b:includable>
<b:includable id='post' var='post'>
<article expr:id='data:post.id'>
<header>
<h1><a expr:href='data:post.url'><data:post.title/></a></h1>
<time expr:datetime='data:post.timestampISO8601' pubdate="pubdate"><data:post.timestamp/></time>
</header>
<div class='wrapper post-content'>
<data:post.body/>
<div style='clear:both'/>
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
</div>
<footer>
<b:if cond='data:blog.pageType == "item"'>
<div style='float:right;width:312px'>
Possibly (Definitely Not) Related Posts:
<div id='gas-results'/>
</div>
</b:if>
<div class='post-footer-line post-footer-line-1'>
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>
<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>
</b:if>
</b:if>
</span>
<span class='post-icons'>
<!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>
</span>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<span class='post-comments-count'><a expr:href='data:post.url + "#disqus_thread"'>Comments</a></span>
</b:if>
</b:if>
</div><!-- post-footer-line-1 -->
<div class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span>
</div>
<b:if cond='data:blog.pageType == "item"'>
<div style='text-align:center'>
</div>
</b:if>
<div style='clear:both'/>
</footer>
<b:if cond='data:blog.pageType == "item"'>
<section id='post-comments'>
<h2>Comments</h2>
</section>
</b:if>
</article>
</b:includable>
<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<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>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<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>
</span>
</b:if>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</div>
<div class='clear'/>
</b:includable>
<b:includable id='postQuickEdit' var='post'>
<b:if cond='data:post.editUrl'>
<span expr:class='"item-control " + data:post.adminClass'>
<a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>✎</a>
</span>
</b:if>
</b:includable>
<b:includable id='feedLinks'>
<b:if cond='data:blog.pageType != "item"'> <!-- Blog feed links -->
<b:if cond='data:feedLinks'>
<div class='blog-feeds'>
<b:include data='feedLinks' name='feedLinksBody'/>
</div>
</b:if>
<b:else/> <!--Post feed links -->
<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='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:widget><!-- #Blog1 -->
</b:section><!-- #posts -->
<footer id='blog-footer'>
<div class='wrapper'>
<b:section id='footer-widgets-left'/>
<b:section id='footer-widgets-right'/>
<div style='clear:both'/>
<b:section id='footer-widgets-bottom'/>
</div>
</footer>
</body>
</html>
Only around 230 lines, it doesn’t adopt many HTML5 feature and it won’t work with Blogger Template Designer. The CSS and JavaScript are stored externally, combined and compressed.
Now the Page Speed score on homepage, rose one point from 84, loading time and page size are improved you on about page. I am still trying to improve.
The validation status is still not good, see the errors on about page:
Line 8, column 128: & did not start a character reference. (& probably should have been escaped as &.)
…n.css?targetBlogID=3803541356848955053&zx=210e6527-3903-4d84-9069-59a56cc31180…
Line 27, column 508: Bad value 30px for attribute height on element iframe: Expected a digit but saw p instead.
…frame" allowtransparency="true" title="Blogger Navigation and Search"></iframe>
Line 27, column 508: Bad value 100% for attribute width on element iframe: Expected a digit but saw % instead.
…frame" allowtransparency="true" title="Blogger Navigation and Search"></iframe>
Line 27, column 508: The marginwidth attribute on the iframe element is obsolete. Use CSS instead.
…frame" allowtransparency="true" title="Blogger Navigation and Search"></iframe>
Line 27, column 508: The marginheight attribute on the iframe element is obsolete. Use CSS instead.
…frame" allowtransparency="true" title="Blogger Navigation and Search"></iframe>
Line 27, column 508: The scrolling attribute on the iframe element is obsolete. Use CSS instead.
…frame" allowtransparency="true" title="Blogger Navigation and Search"></iframe>
Line 27, column 508: The frameborder attribute on the iframe element is obsolete. Use CSS instead.
…frame" allowtransparency="true" title="Blogger Navigation and Search"></iframe>
Line 27, column 508: The allowtransparency attribute on the iframe element is obsolete. Use CSS instead.
…frame" allowtransparency="true" title="Blogger Navigation and Search"></iframe>
Line 95, column 71: & did not start a character reference. (& probably should have been escaped as &.)
…page-edit.g?blogID=3803541356848955053&pageID=6113726889142742706' title='Edit…
First one from Blogger CSS link, 7 from navbar, last one from QuickEdit. Only the last one I can deal with by un-checking in Blog gadget option or editing template. The first and last one might take some efforts of Blogger team, but it shouldn’t be too hard to generate proper link with probably & escape against HTML version.
The navbar issues, they are already using—forcedly including—a widget bundle stylesheet—also a Page Speed score killer, unless it has cross-browser or older browser support issue, I don’t see why they can’t fix it. There is no option around that I can remove navbar from page source, however I really don’t want to remove it even if there was an option, I like the navbar.
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.