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 :
NOTE PAD ++ SYNTAX HIGHLIGHTER FOR ...
GOOGLE CONSOLE
GOOGLE CHROME EXTENSION FILE SAVE O...
OPEN DESKTOP TEXT FILE BY COMMAND P...
RADIO BUTTON SLIDER TO KEY FRAME SL...
BUTTON PADDING CHANGE HEIGHT WIDTH
CSS SYNTAX HIGHLIGHT CHANGE IN NOT...
WEB IMAGE DOWNLOADER
TEXT COMPARE OR DUPLI TEXT FINDER
BLOCK JAVA SCRIPT BY GOOGLE CHROME
MOUSE COORDINATES IN JAVA SCRIPT
RELATED POST WIDGET LIST WITHOUT TH...
WHACK A RAT CSS GAME
USE ARABIC URDU LANGUAGE IN HTML
POST DATE HEADER IN BLOG
SEARCH YOUR VIDEO IN GOOGLE
INPUT BUTTON VALUE SWAP
DYNAMIC VIEWS BLOGGER TEMPLATE
FLASH PLAYER SWF FILE DOWNLOAD ARCH...
GOOGLE FILTER BUTTON IN IMAGE SEARC...
Related Post for POST DATE THUMBNAIL IN BLOG
Platinum Arts Sandbox Free 3D Game Maker
POST DATE THUMBNAIL IN BLOG
JAVA COLOR PICKER WITH
MAKE DLL FILE AND OPEN IN VISUAL BASIC 2008-2010
POST DATE HEADER IN BLOG
BASIC TEXT OR SCROLL BOX OR IMAGE SRC HTML CODES
N RELATE POST WIDGET
CANVAS GAMES TUTORIAL ON FACE BOOK
DRAG AND DROP MULTIPLE UPLOAD
NEW CODE YOUTUBE VIDEO THUMBNAIL WITH FB GADGETS THUMBAIL
POPULAR POST WIDGET WITH NO IMAGE WITHOUT JAVA CODE
SSL WEBSITE CHECKER FOR FACEBOOK
NEWS TICKER BLOGGER TEMPLATES
SELL YOUR APPS
RECAPTCHA KEY CONTCAT FORM FOR BLOGGER
ONLINE ZIP OPNER
IMAGE UPLOAD WITH JAVA WITH PHP CODE
FREE SLL CERFICATE BY AZURE MICROSOFT FOR FACEBOOK
NeoPaint 5.0.2 
IMAGE UPLOAD WITH JAVA WITHOUT PHP CODE
NEW CODE YOUTUBE VIDEO THUMBNAIL WITH JAVA CODE
NO IMAGE THUMBNAIL
RELATED POST WIDGET LEFT TO RIGHT
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.