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;
}
Related movie you might like to see :
WEB DEVELOPER 0.5
BODY JS FILE LINK IN MAGENTO
INTENSO MAGENTO QUICK VIEW BUTTON
Magento Hello World Module (Extensi...
BOOLEAN MATCHING GAME JAVASCRIPT
GET BUTTON ID AFTER CLICK IN JAVA S...
JAVA SCRIPT LOOP
QUIZY MEMORY CARD GAME
CTX STYLE
IMAGE SRC ARRAY IN JAVA SCRIPT
QUIZ ACTIVITY MAKER
MEMORY GAME WITH UPPER HIDDEN CARD
HTML SYNTAX HIGHLIGHTER
PADDING BUTTON
CSS CLICK DROPDOWN
HTML CSS GREEN COMMENTS NOTEPAD++
JAVA SCRIPT BOOKS ONLINE
BASIC ELEVATE ZOOM PLUS
ELEVATE ZOOM JAVA SCRIPT WITH ONE I...
PRINT STAR PATTERN IN JAVA SCRIPT
Related Post for POST DATE THUMBNAIL IN BLOG
QUIZY MEMORY CARD GAME
NOTEPAD++ REMOVE UNWANTED LINES
NOTE PAD ++ SYNTAX HIGHLIGHTER FOR BLOGGER POST
CSS SYNTAX HIGHLIGHT CHANGE IN NOTEPAD++ SYNTAX HIGHLIGHTER
DRAG AND DROP WITH IMAGE
BUTTON CHANGE INTO DROPDOWN MENU
IMAGE UPLOAD WITH JAVA WITH PHP CODE
IMAGE UPLOAD WITH JAVA WITHOUT PHP CODE
SCREEN TO GIF
IMAGE SRC ARRAY IN JAVA SCRIPT
MEMORY GAME WITH UPPER HIDDEN CARD
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment
Click to see the code!
To insert emoticon you must added at least one space before the code.