POST DATE THUMBNAIL IN BLOG
POST DATE THUMBNAIL IN BLOG
SOURCE website Code available in this website
</style>
<article class='post hentry' expr:id='data:post.id' itemscope='' itemtype='http://schema.org/BlogPosting'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.title'>
<h2 class='post-title entry-title' itemprop='name headline'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link' itemprop='url'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url' itemprop='url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</b:if>
<b:else/>
<h1 class='post-title entry-title' itemprop='name headline'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link' itemprop='url'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url' itemprop='url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h1>
</b:if>
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='description articleBody'>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<textarea expr:id='"postData-" + data:post.id' style='display:none;'><data:post.body/></textarea>
<div class='post-summary' expr:id='"summaryContainer-" + data:post.id'>
<!-- for non/inactive JavaScript browsers -->
<b:if cond='data:post.thumbnailUrl'>
<a class='thumbimgx' expr:href='data:post.url' expr:title='data:post.title'><img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' height='72' itemprop='image' width='72'/></a>
<b:else/>
<a class='thumbimgx' expr:href='data:post.url' expr:title='data:post.title'><img class='post-thumbnail' expr:alt='data:post.title' height='72' itemprop='image' src='http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif' width='72'/></a>
</b:if>
<strong><a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a></strong>
<b:if cond='data:post.snippet'>
<p><data:post.snippet/></p>
</b:if>
<!-- end for non/inactive JavaScript browsers -->
</div>
<div class='post-more-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.jumpText + " " + data:post.title'>
<data:post.jumpText/>
</a>
</div>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<script class='jshilang' type='text/javascript'>
// Lightweight `auto read-more` hack for Blogger using `Textarea` by Taufik Nurrohman modif by MKR
// URL: https://plus.google.com/108949996304093815163/about
//<![CDATA[
function createPostSummary(s,r,k){var u,h,j,q,m,p,t=document,n=configSummary,g=t.getElementById(s).value,e=t.getElementById(r),o=k,c=jQuery("#"+s),i=c.parents(".post"),l=i.find(".post-title.entry-title a").text();e.innerHTML=g;j=e.getElementsByTagName("img");h=e.getElementsByTagName("iframe");if(j.length===0&&h.length===0){q=n.BackupImage}else{if(j.length===0&&h.length>0){m=h[0].src;if(m.indexOf("youtube.com")!=-1||m.indexOf("youtu.be")!=-1){p=m.match(/(\?v=|\&v=|\/\d\/|\/embed\/|\/v\/|\.be\/)([a-zA-Z0-9\-\_]+)/);q="http://img.youtube.com/vi/"+p[2]+"/0.jpg"}else{q=n.BackupImage}}else{var q=j[0].src.replace(/\/s[0-9]+(\-c)?\//,"/"+n.thumbnailSize+"/")}}u=g.replace(/<(.*?)>/g,"").replace(/[\n\r]+/g," ");e.innerHTML='<a class="thumbimgx" title="'+l+'" href="'+o+'"><img class="post-thumbnail" src="'+q+'" alt="'+l+'"></a><strong><a class="titlex" href="'+o+'">'+l+"</a></strong><p>"+u.substring(0,n.summaryLength)+"…</p>"};
var configSummary = {
thumbnailSize: "s200-p", // Define the post thumbnail size
summaryLength: 300, // Define the summary length
BackupImage: 'http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s72-c/grey.gif' // Backup image if post don't have image
};
//]]>
</script>
</b:if></b:if>
<script>createPostSummary("postData-<data:post.id/>","summaryContainer-<data:post.id/>","<data:post.url/>");</script>
</b:if>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
<div class='post-timestamp'>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published updated' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>
</b:if>
</div>
<div class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<b:if cond='data:post.authorProfileUrl'>
<span class='fn'>
<a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
<data:post.author/>
</a>
</span>
<b:else/>
<span class='fn'><data:post.author/></span>
</b:if>
</b:if>
</div>
<div class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a>
</b:if>
</b:if>
</b:if>
</div>
<div class='post-labels'>
<b:if cond='data:post.labels'>
<span>
<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>
</span>
</b:if>
</div>
<div class='post-location'>
<b:if cond='data:top.showLocation'>
<b:if cond='data:post.location'>
<a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
</b:if>
</b:if>
</div>
<div class='post-share-buttons goog-inline-block'>
<b:if cond='data:post.sharePostUrl'>
<b:include data='post' name='shareButtons'/>
</b:if>
</div>
<span class='post-icons'>
<!-- email post links -->
<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://img1.blogblog.com/img/icon18_email.gif' width='18'/>
</a>
</span>
</b:if>
</span>
<b:include data='post' name='postQuickEdit'/> <!-- quickedit pencil -->
</div>
<div class='post-footer-line post-footer-line-2'/>
<div class='post-footer-line post-footer-line-3'/>
</div>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<span class='datex'>
<span class='time published update' expr:title='data:post.timestampISO8601'><data:post.timestamp/></span>
</span>
</b:if> </b:if>
</article>
</b:includable>
--------------------------------------------------------------------------------------------------
YOU CAN ALSO REPLACE THUMBNAIL CSS CODE WITH
SHORT CSS CODE
--------------------------------------------------------------------------------------------------
YOU CAN ALSO REPLACE THUMBNAIL CSS CODE WITH
SHORT CSS CODE
--------------------------------------------------------------------------------------------------
/* Posts
-----------------------------------------------
*/
a img {
border-width:0;
}
#main-atas {
width:68%;
float:left;
word-wrap:break-word;
overflow:hidden;
}
.index .post-outer{
width:33.3%;
float:left;
}
.index .post{
padding:0 5px;
}
.post h2.post-title{
position:absolute;
left:-9999px;
}
.post {
padding:0 5px;
}
.post-footer,
.post-more-link,
.post-summary p{
display:none;
}
a.thumbimgx,
.date{
position:relative;
}
a.thumbimgx {
display:block;
height:160px;
overflow:hidden;
padding:5px;
border:1px solid #D5D5D5;
}
a.thumbimgx img {
width:100%;
height:100%;
}
.post-body {
line-height:1.6em;
}
.datex{
position:absolute;
}
.datex{
top:0;
left:20px;
background-color:#09ABF7;
color:#FFFFFF;
padding:5px 3px;
text-align:center;
font-size:9px;
}
.datex span,
.datex strong{
display:block;
}
.datex strong{
font-size:18px;
}
.datex:before,
.datex:after{
position:absolute;
content:"";
width:0;
height:0;
}
.datex:before,
.datex:after,
.date:after{
border-width:5px 10px;
border-style:solid;
top:100%;
}
.datex:before{
border-color:#09ABF7 transparent transparent #09ABF7;
left:0;
}
.datex:after{
border-color:#09ABF7 #09ABF7 transparent transparent;
right:0;
}
.post:hover .datex,date {
padding-top:8px;
}
.post-summary strong a {
text-decoration:none;
}
Comments
Post a Comment