BLOGGER MEGA GRID AND LIST TEMPLATE

Tuesday, 12 August 2014

BLOGGER MEGA GRID AND LIST TEMPLATE

------------------------------------------------------------------------------------------------------
COPY AND PASTE BELOW CODE:

BLUE GRID AND LIST CODE WHICH SHOW YOUR POST THUMBNAIL
IN GRID SHAPE AND LIST SHAPE

-----------------------------------------------------------------------------------------------------

<?xml version="1.0" encoding="UTF-8" ?>
<html>
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: BLOGGER MEGA GRID AND LIST TEMPLATE
Design by : FBGadgets
URL : http://fbgadgets.blogspot.co.uk/
----------------------------------------------- */

body {
background-image :
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq0giH4BZ4B35rwWpOCY9yAq4CKycowD1yRikXjAvcAiM9U81PWqH2bRmnBCGQvO3NwzuypxqfjxLo-owYGdj-vf4qiNWZkB9jHtYtnPmTHbxkvQLO79tOwKwy8PRVCsV2iAMhaI6Dr5a4/s1600/1600X1040.jpg);
background-position : Center Center;
background-attachment : fixed ;
background-repeat : repeat ;
}

/*****************************************
Global Links CSS CHANGE LINK INTO BUTTON
******************************************/
a{ color:Red; outline:none; text-decoration: none; }
a:hover { color:Green; text-decoration:none; }

a img {
border-width:0;
}
/* Header
-----------------------------------------------
*/
#header-wrapper {
border: 2px solid Black;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuyvDlHLCcTtMAYrmcGwuRx24CJ80LNpMOa81Vw3pvMWtFRjLoDvI8-NLD8NKivUayJg51-7zGyRfaKqs7-OTHtN5MHOipEsO5j9NRDt7rDCmATXBTWcEx6jpDfp2oRtK4w_KGhbf_9BhB/s1600/960X400.jpg) no-repeat;
height: 350px;
width:960px;
margin:0 auto 10px;
}
#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}
#header {
margin: 5px;
text-align: center;
color:Gold;
background-color:Transparent;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOKoN4UljmVsRXtPCVrGLIy8qkm1esBGqEblw18eerzMOqiZ57Lyx9Q9IxZ0V2VQ8tBBHuWFbJT261cvexzXvDlXrSwDpZQzdRMnJeuoPMIWiPvZMjwWYF4D3hCCCFYAenIeNB8RwRJTwh/s1600/50X50.png);
}
#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font:bold
}
#header a {
color:Gold
text-decoration:none;
}
#header a:hover {
color:Red
}
#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: Bold
color: $textcolor;
}
#header img {
margin-left: auto;
margin-right: auto;
}
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
border: 2px solid Black;
width: 960px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 650px;
float: left;
padding: 5px;
border: 2px solid Black;
background-color:Transparent;
background-image:url(http://ct3.pimp-my-profile.com/tp/ffc0cb-50-tp.png);
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 {
width: 260px;
float: right;
padding: 5px;
border: 2px solid Black;
background-color:#transparent;
background-image:url(http://ct3.pimp-my-profile.com/tp/ffc0cb-50-tp.png);
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:$pagetitlecolor;
}
/* Posts
-----------------------------------------------
*/
h2.date-header {
margin:1.5em 0 .5em;
}
.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
background-color:Transparent;
}
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$pagetitlecolor;
}
.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-header{
font-size:12px;
line-height:20px;
}

.post-timestamp{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjamDZNTcnvvcT2-OPz0otH-0QaXuMB3gzExEWU5t-qpYqN5Q9wc5RkUPOfCsiaJXUMFa8Eho8V6G2oFFGNnodUAxCgpY9BFVEimHTM07bNUAw0xmNIqtJEKBfUA1m5_wDIzkAZIuS2DXo/h80/clock.png) no-repeat 0 2px;
margin:0px !important;
padding:2px 0 2px 20px;
}
.post-author{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBUjoWpOvNnh-hTDz0Yf_C-s2OvXiUshvxXTMiB6jKjAFw5pQKvwwDLp0vGshly_jiID76Qe_GlL4Z-1jmmk9klP6kx2dPEXnpOiUX7gOR_Yc-rfpRrQdvQVAq7EjXksr-h-HTnmXobLw/h80/author.png) no-repeat 0 0px;
margin:0 0 0 10px !important;
padding:2px 0 2px 20px;
}

.date-header{
display:none
}
.post-footer {
border:3px solid Gold;
background-color:GreenYellow;
font-size:11px;
padding:5px 10px;
position:relative;
}
.comment-link {
margin-left:.6em;
}
.post-body img {
width:600px; height:auto;
background-color:Red;
border:3px solid Blue;
}
.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:BlueViolet;
padding: 5px;
border:2px solid Gold;
background-color:Transparent;
background-image:url(http://ct3.pimp-my-profile.com/tp/ffc0cb-50-tp.png);
}
#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: left;
}
#blog-pager-older-link {
float: right;
}
#blog-pager {
text-align: center;
}
.feed-links {
clear: both;
line-height: 2.5em;
}

/* Button
----------------------------------------------- */
.button {
font-family: sans-serif;
font-weight:bold;
color: #fff;
padding:5px 10px 6px 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius:5px;
cursor: pointer;
}
.button a {
color:#dedede;
}
.button a:hover{
color:#FFF;
}
.black {
background:#7F7F7F;
background-image: -moz-linear-gradient(top,#7F7F7F,#2B2A2A);
background-image: -webkit-gradient(linear,left top,
left bottom,from(#7F7F7F),to(#2B2A2A) );
}
.black:hover{background:#2B2A2A; }
.size {font-size:12px;}

/* Sidebar Content
----------------------------------------------- */
.sidebar {
color:Black;
line-height: 1.5em;
}
.sidebar h2 {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizmkSKfzfQpptjIW6iyp8d7ALdbafWDoZtEuBy5j0ROzrhCeJdR3i9BUxTJGEyqb5UEbr1F1itMfcXVFGcAVDay3Z_QTGJx2Pzq7aPx7K4XjuFeK_-FgO4eIBL9BImV2xoBTxN2JwzuDU7/s1600/Sidebar+H2.png) 0px 0 repeat no-repeat scroll transparent;
/*SIDEBAR TITLE COLOR*/
color:GOLD;
font-family:verdana, arial;
font-size:12px;
font-weight:bold;
height:33px;
margin:0;
padding:3px 0 3px 7px;
text-transform:uppercase;
}
.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.sidebar li {
background:Transparent;
width:250px;
padding:2px;
border:2px solid Green;
margin-top: 20px;
border-radius:5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin-bottom: 2px;
box-shadow:0 0 12px Gold;
-moz-box-shadow:0 0 12px Gold;
-webkit-box-shadow:0 0 12px Gold;
}
.sidebar .widget, .main .widget {
border-bottom:1px dotted ;
margin:0 0 1.5em;
padding:0 0 1.5em;
}
.main .Blog {
border-bottom-width: 0;
}
/* Profile
----------------------------------------------- */
.profile-img {
float: left;
margin: 0 5px 5px 0;
padding: 4px;
border: 1px solid Red;
}
.profile-data {
margin:0;
text-transform:uppercase;
letter-spacing:.1em;
font:Bold;
color:Red;
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:12px;
text-transform: uppercase;
letter-spacing: .1em;
}
/* Footer
----------------------------------------------- */
#footer {
width:960px;
height:70px;
clear:both;
margin:0 auto;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
border: 2px solid Black;
background-color:Transparent;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu-GA4PodUgVFpdJ37K_Qn8kkM3zKRuescVpLSYSWejy0_1bj3FZFNoGQWqHSg9EXOPwaPO_2HnV9Hfc3DE03RfxWo2qNtDbhmZXPVcXXjvdZ6k2OCcTnVQnVEvfn5e3Wq7Tkui9eatMR2/s1600/960X70.gif);
}

]]></b:skin>

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<style>
/*FONT PT Sans Narrow*/
@font-face {
font-family:'PT Sans Narrow';
font-style:normal;
font-weight:400;
src:local('PT Sans Narrow'),local('PTSans-Narrow'),
url(http://themes.googleusercontent.com/static/fonts/ptsansnarrow/v3/UyYrYy3ltEffJV9QueSi4RdbPw3QSf9R-kE0EsQUn2A.woff) format('woff');
}
/* CSS Untuk Tombol Switch*/
.switch {
border-bottom:5px solid #22a0ce;
height:35px;
color:#444;
margin:0 10px;
padding:5px 9px;
text-transform:uppercase;
}
.switch-left {
width:360px;
float:left;
margin:0 auto;
padding-top:5px;
font:20px PT Sans Narrow;
text-shadow:1px 1px 0 #000;
color:#AAA;
}
.switch-right {
width:120px;
float:right;
margin-top:-20px;
}
.switch a {
border:1px solid #999;
font:11px Arial;
padding:3px 8px 3px 25px;
text-transform:none;
color:#aaa;
}
a.bar_view {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJDTWQEIwyIVEXom70ta_P_PgV0zPuxq-BRUDgjZl6lJi5oweOtr4Zchfu7K_iNh1K-PHgAHx0mD5RhqL49xvYvW1u01YNinwmfYRmUwNrhvnTIId6wKzo8vQ09nYV6yAUbcTF5ecrdcOH/s1600/drid.gif) no-repeat 3px center;
}
a.dat_view {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieu6sWuKvVWgkKOdn6AhYPu5zbIzv3SHxcGbKhEAOJKkkQiATfNbQEAwvQKn_gMYaGpPNUXRgThJ6PDIpIwHnjBQ-VG55FaRsC73vxOpOG_kVJ5WWEtvPnAgt-J9mAevuj33CO0vtAppft/s1600/listed.gif) no-repeat 3px center;
}
.switch a.active {
background-color:#aaa;
border:1px solid #999;
color:#111;
cursor:default;
}
/* CSS Bar untuk bagian grid */
.bar {
background-color:#FFF;
border:1px solid #000;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
display:inline;
float:left;
height:150px;
list-style:none;
margin:10px 0 0 9px;
overflow:hidden;
padding:2px 3px 5px;
position:relative;
text-align:center;
width:150px;
}
.bar h2 {
height:30px;
border:0 none;
line-height:8px;
margin:0 5px 5px;
padding:2px;
text-shadow:1px 1px 0 #000;
}
.bar h2 a {
font:14px PT Sans Narrow;
text-align:center;
line-height:16px;
}
.bar h2 a:hover {
color:#22a0ce;
}
.bar {
background:none;
height:245px;
overflow:hidden;
width:167px;
padding:0;
margin:0 0 .3cm;
}
.bar img {
float:left;
height:110px;
margin-left:17px;
width:110px;
}
</style>
</b:if></b:if>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
/**
* jQuery switch
*
*/
jQuery(document).ready(function () {
var $box=jQuery(".post"),
$bar=jQuery("a.bar_view");
$dat=jQuery("a.dat_view");
$dat.click(function () {
$box.removeClass("bar");
jQuery(this).addClass("active");
$bar.removeClass("active");
jQuery.cookie("dat_style", 0);
return false
});
$bar.click(function () {
$box.addClass("bar");
jQuery(this).addClass("active");
$dat.removeClass("active");
jQuery.cookie("dat_style", 1);
return false
});
if(jQuery.cookie("dat_style")==0) {
$box.removeClass( "bar");
$dat.addClass("active")
} else {
$box.addClass("bar");
$bar.addClass("active")
}
});
//]]>
</script>

</head>

<body>

<div id='outer-wrapper'>

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='WhereIsMyIpAdress (Header)' type='Header'>
</b:widget>
</b:section>
</div>

<div id='main-wrapper'>
<div class='clear'> </div>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div class='switch'>
<div class='switch-left'>
<span style='color:#22a0ce'>Recent</span> Posts
</div>
<div class='switch-right'>
<a class='bar_view' href='#'>Grid</a>
<a class='dat_view' href='#'>List</a>
</div>
</div>
</b:if></b:if>

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>

<b:includable id='main' var='top'>
<b:if cond='data:mobile == "false"'>
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<data:defaultAdStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.isDateStart'>
<b:if cond='data:post.isFirstPost == "false"'>
</div></div>
</b:if>
</b:if>
<b:if cond='data:post.isDateStart'>
<div class="date-outer">
</b:if>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>
<b:if cond='data:post.isDateStart'>
<div class="date-posts">
</b:if>
<div class='post-outer'>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == "static_page"'>
<b:include data='post' name='comment_picker'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comment_picker'/>
</b:if>
</div>
<b:if cond='data:post.includeAd'>
<b:if cond='data:post.isFirstPost'>
<data:defaultAdEnd/>
<b:else/>
<data:adEnd/>
</b:if>
<div class='inline-ad'>
<data:adCode/>
</div>
<data:adStart/>
</b:if>
</b:loop>
<b:if cond='data:numPosts != 0'>
</div></div>
</b:if>
<data:adEnd/>
</div>

<b:include name='nextprev'/>
<b:include name='feedLinks'/>

<b:if cond='data:top.showStars'>

google.load("annotations", "1", {"locale": "<data:top.languageCode/>"});

function initialize() {

google.annotations.setApplicationId(<data:top.blogspotReviews/>);

google.annotations.createAll();

google.annotations.fetch();

}

google.setOnLoadCallback(initialize);

</script>

</b:if>

<b:else/>
<b:include name='mobile-main'/>
</b:if>
<b:if cond='data:top.showDummy'>
<data:top.dummyBootstrap/>
</b:if>
</b:includable>

<b:includable id='backlinkDeleteIcon' var='backlink'></b:includable>
<b:includable id='backlinks' var='post'></b:includable>

<b:includable id='comment-form' var='post'>
<div class='comment-form'>
<a name='comment-form'/>
<b:if cond='data:mobile'>
<h4 id='comment-post-message'>
<a expr:id='data:widget.instanceId + "_comment-editor-toggle-link"' href='javascript:void(0)'><data:postCommentMsg/></a></h4>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display:none' width='100%'/>
<b:else/>
<h4 id='comment-post-message'><data:postCommentMsg/></h4>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
</b:if>
<data:post.friendConnectJs/>
<data:post.cmtfpIframe/>
<script type='text/javascript'>
BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>');
</script>
</div>
</b:includable>
<b:includable id='commentDeleteIcon' var='comment'>
<span expr:class='"item-control " + data:comment.adminClass'>
<b:if cond='data:showCmtPopup'>
<div class='goog-toggle-button'>
<div class='goog-inline-block comment-action-icon'/>
</div>
<b:else/>
<a class='comment-delete' expr:href='data:comment.deleteUrl' expr:title='data:top.deleteCommentMsg'>
<img src='//www.blogger.com/img/icon_delete13.gif'/>
</a>
</b:if>
</span>
</b:includable>
<b:includable id='comment_count_picker' var='post'>
<b:if cond='data:post.commentSource == 1'>
<span class='cmt_count_iframe_holder' expr:data-count='data:post.numComments' expr:data-onclick='data:post.addCommentOnclick' expr:data-post-url='data:post.url' expr:data-url='data:post.canonicalUrl'>
</span>
<b:else/>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:post.commentLabelFull/>:
</a>
</b:if>
</b:includable>
<b:includable id='comment_picker' var='post'>
<b:if cond='data:post.commentSource == 1'>
<b:include data='post' name='iframe_comments'/>
<b:else/>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</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><data:post.commentLabelFull/>:</h4>
<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<b:if cond='data:post.hasOlderLinks'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
 
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
 
</b:if>
<data:post.commentRangeText/>
<b:if cond='data:post.hasNewerLinks'>
 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
</b:if>
</span>
</b:if>
<div expr:id='data:widget.instanceId + "_comments-block-wrapper"'>
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<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' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p>
<data:comment.body/>
</p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>
</div>
<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
<data:post.oldestLinkText/>
</a>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
<data:post.olderLinkText/>
</a>
 
<data:post.commentRangeText/>
 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
<data:post.newerLinkText/>
</a>
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
<data:post.newestLinkText/>
</a>
</span>
</b:if>
<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</p>
</b:if>
<b:if cond='data:showCmtPopup'>
<div id='comment-popup'>
<iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>
</iframe>
</div>
</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='feedLinks'></b:includable>
<b:includable id='feedLinksBody' var='links'></b:includable>

<b:includable id='iframe_comments' var='post'></b:includable>

<b:includable id='mobile-index-post' var='post'></b:includable>
<b:includable id='mobile-main' var='top'></b:includable>
<b:includable id='mobile-nextprev'></b:includable>
<b:includable id='mobile-post' var='post'></b:includable>

<b:includable id='nextprev'></b:includable>

<b:includable id='post' var='post'>
<div class='post bar hentry'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h2 class='post-title entry-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'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</b:if>
<div class='post-meta'>
<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-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url + "?&max-results=7"' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span>
<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</span>
</div>
<div class='post-header-line-1'/>

<b:if cond='data:blog.pageType == "item"'>

{[['<img src='http://img.graddit.com/img/star.png'/>']]}</div>

</b:if>

<div class='post-body entry-content'>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>

<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id' style='text-align:justify'><data:post.body/></div>
<script type='text/javascript'>/*<![CDATA[*/createSummaryAndThumb("summary<data:post.id/>");/*]]>*/</script>
<br/><a class='button size black' expr:href='data:post.url'>View Details</a>
</b:if>
</b:if>
</div>
<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
<span class='post-icons'>
<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<img alt='' class='icon-action' height='13' src='http://www.blogger.com/img/icon18_email.gif' width='18'/>
</a>
</span>
</b:if>
<b:include data='post' name='postQuickEdit'/>
</span> <span class='post-backlinks post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.showBacklinks'>
<a class='comment-link' expr:href='data:post.url + "#links"'><data:top.backlinkLabel/></a>
</b:if>
</b:if>
</span> </div>
<div class='post-footer-line post-footer-line-2'>
</div>
<div class='post-footer-line post-footer-line-3'/>
</div>
</div>
</b:includable>

<b:includable id='postQuickEdit' var='post'></b:includable>

<b:includable id='shareButtons' var='post'></b:includable>
<b:includable id='status-message'></b:includable>

<b:includable id='threaded-comment-form' var='post'></b:includable>
<b:includable id='threaded_comment_js' var='post'></b:includable>
<b:includable id='threaded_comments' var='post'></b:includable>

</b:widget>
</b:section>

</div>

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
</b:widget>
</b:section>
</div>

<div class='clear'> </div>

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

</div> 

</body>
</html>