Sunday 29 January 2017
POST DATE THUMBNAIL IN BLOG
--------------------------------------------------------------------------------------------------------
READ MORE:
--------------------------------------------------------------------------------------------------------
STEP:1
<body>
REPLACE OPEN BODY TAG WITH SCHEMA BODY TAG
<body expr:class='data:blog.pageType' itemscope='' itemtype='http://schema.org/WebPage'>
---------------------------------------------------------------------------------------------------------STEP:2
<b:section class='main' id='main' name='Main' showaddelement='no'>
FIND MAIN SECTION LINE AND REPLACE 3 HTML TAGS WITH
<div id='outer-wrapper'>
<div id='main-atas'>
<div id='main-wrapper'>
---------------------------------------------------------------------------------------------------------STEP:3
FIND MAIN INCLUDABLE LINE
<b:includable id='main' var='top'>
REMOVE DATE HEADER HTML PART IN THIS TAG
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>
ADD JAVASCRIPT CODE IN THIS TAGBEFORE CLOSED INCLUDABLE TAG
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script class='jshilang' type='text/javascript'>
//<![CDATA[
datenya(jQuery);
viewMode();
loadMorePost({
thumbnailSize:"s200-p",
summaryLength:300
});
//]]>
</script>
</b:if>
</b:includable>
---------------------------------------------------------------------------------------------------------STEP:4
<b:includable id='post' var='post'>
FIND POST INCLUDABLE LINE AND REPLACE BELOW CODE
<b:includable
id='post'
var='post'>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
<script class='jshilang' type='text/javascript'>
//<![CDATA[
//Date Format by MKR
function datenya(a){a(".datex .time").each(function(){var
d=a(this).attr("title");var b=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];if(d!=""){var
g=d.substring(0,10),h=g.substring(0,4),f=g.substring(5,7),e=g.substring(8,10),c=b[parseInt(f,10)-1]}a(this).html("<strong>"+e+"</strong><span>"+c+"</span><span>"+h+"</span>")})};
//]]>
</script>
<style type='text/css'>
/* Posts
-----------------------------------------------
*/
a img {
border-width:0;
}
#main-atas {
width:68%;
float:left;
word-wrap:break-word;
overflow:hidden;
}
.index {
z-index:0;
margin-bottom:25px;
}
.index
.item.post:before{
content:"";
position:absolute;
left:5px;
height:30px;
right:5px;
bottom:-9px;
z-index:-1;
}
.index .post-outer,
.archive .post-outer {
width:33.3%;
float:left;
}
.index .post,
.archive .post {
padding:0 5px;
}
.index .post h2.post-title,
.archive .post h2.post-title {
position:absolute;
left:-9999px;
}
.post-footer,
.post-more-link,
.post-summary p{
display:none;
}
a.thumbxtag,
.post,
.post:before,{
background-color:#FFFFFF;
border:1px solid #D5D5D5;
}
a.thumbimgx,
.index .post,
.archive .post,
.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 {
display:block;
margin:5px 0 15px;
line-height:1.4em;
font-size:120%;
overflow:hidden;
height:40px;
}
.post-summary strong a {
text-decoration:none;
}
.index .post-outer.list,
.archive .post-outer.list {
width:auto;
float:none;
}
.list .post {
padding:0 0 15px;
}
.list a.thumbimgx {
width:200px;
float:left;
margin:0 10px 0 0;
}
.list .post-summary strong {
height:auto;
overflow:visible;
font-size:170%;
}
.list .post-summary p,
.list .post-more-link,
.list .post-footer {
display:block;
}
.post-more-link {
text-align:right;
margin:0 5px 10px 0;
}
.post-summary strong a {
text-decoration:none;
color:#141414;
}
.post-footer-line.post-footer-line-1 > div {
display:inline-block;
font-size:10px;
}
.post-more-link a {
display:inline-block;
padding:4px 7px;
text-decoration:none;
color:#FFFFFF;
background-color:#09ABF7;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
}
.post-footer-line.post-footer-line-1{
margin:10px 0 0;
padding:0 6px;
display:block;
}
.post-footer{
overflow:hidden;
width:36px;
}
.post-footer {
padding:5px;
border:1px solid #D5D5D5;
}
.post-footer a {
color:#09ABF7;
text-decoration:none;
}
.post-footer a.timestamp-link,
.post-footer .post-author.vcard .fn,
.post-footer .comment-link,
.post-footer .post-labels > span {
position:relative;
padding:0 8px 0 20px;
line-height:20px;
height:20px;
display:inline-block;
color:#09ABF7;
margin-right:5px;
}
.post-footer a.timestamp-link:before,
.post-footer .post-author.vcard .fn:before,
.post-footer .comment-link:before,
.post-footer .post-labels > span:before {
font-size:14px;
left:4px;
}
.post-footer a.timestamp-link:before {
content:"\f017";
}
.post-footer .post-author.vcard .fn:before {
content:"\f007";
}
.post-footer .comment-link:before {
content:"\f0e6";
font-size:15px;
left:3px;
}
.post-footer .post-labels > span:before {
content:"\f02c";
left:2px;
}
.item .post{
padding:5px 10px;
margin-bottom:25px;
}
.item #main-wrapper,
.static_page #main-wrapper {
z-index:0;
}
.item .post h1.post-title,
.static_page .post h2.post-title,
.error-custom h2 {
font-size:200%;
margin-bottom:10px;
padding:0 0 5px;
border-bottom:1px solid #D5D5D5;
}
.item .post h1.post-title a,
.static_page .post h2.post-title a {
text-decoration:none;
}
.post-body h1,
.post-body h2,
.post-body h3,
.post-body h4,
.post-body h5,
.post-body h6 {
margin-bottom:10px;
}
.post-body h1 {
font-size:180%;
}
.post-body h2 {
font-size:160%;
}
.post-body h3 {
font-size:140%;
}
.post-body h4 {
font-size:130%;
}
.post-body h5 {
font-size:120%;
}
.post-body h6 {
font-size:110%;
}
.post-body .left {
float:left;
margin:0 10px 5px 0;
}
.post-body .right {
float:right;
margin:0 0 5px 10px;
}
.post-body .center {
margin:10px 0 15px 0;
display:block;
text-align:center;
}
.post-body blockquote {
padding-left:40px;
margin:20px;
font-size:110%;
line-height:1.6em;
}
.post-body blockquote:before {
content:"\f10d";
left:0;
top:5px;
font-size:30px;
}
.item .post-body,
.static_page .post-body,
.error-custom {
line-height:1.6em;
}
.item .post-body img,
.static_page .post-body img {
padding:3px;
border:1px solid #D5D5D5;
}
.post-body iframe {
max-width:100%;
}
</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
--------------------------------------------------------------------------------------------------
/* 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;
}
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment