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 :
NOTEPAD++ REMOVE UNWANTED LINES
Direct Link Generator CODE
Direct Links to your Files on Googl...
ON LINE JAVA LIBRARY
NEWS TICKER BLOGGER TEMPLATES
RELATED POST WIDGET LEFT TO RIGHT
RECAPTCHA KEY CONTCAT FORM FOR BLOG...
ONLINE ZIP OPNER
JAVA COLOR PICKER WITH
MAKE DLL FILE AND OPEN IN VISUAL BA...
SELL YOUR APPS
SSL WEBSITE CHECKER FOR FACEBOOK
Platinum Arts Sandbox Free 3D Game ...
BASIC TEXT OR SCROLL BOX OR IMAGE S...
BOOTSNIPP LOGIN SIGNUP FORM
BLOGGER INCLUDABLE SECTION
SHOPPING CART IN SIDEBAR TEMPLATE
SHOPPING CART IN SIDEBAR TEMPLATE
SHOPPING CART BLOGGER TEMPLATE PAR...
FREE SLL CERFICATE BY AZURE MICROSO...
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.