Wednesday, 15 January 2014
JAVA SCRIPT POST THUMBNAIL CHANGE EMPTY AND VIDEO POST IN IMAGE


-----------------------------------------------------------------------------------------------------
COPY AND PASTE BELOW CODE
-----------------------------------------------------------------------------------------------------
<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:include data='blog' name='all-head-content'/>
<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/> - <data:blog.title/></title>
</b:if>
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: BLOG POST THUMBNAILS WITH SLIDER EFFECT
- Support Video Thumbnail
Design by : FBGadgets
URL : http://fbgadgets.blogspot.co.uk/
----------------------------------------------- */
/* On Post */
.post-title {
margin:7px 2px;
font-weight:400;
font-size:18px;
font-family:'
Oswald'
,sans-serif;
text-transform:uppercase;
}
.post-body img {
width:80%;
height:auto !important;
display:block;
margin:10px auto;
}
.post-thumbail img {
width: 305px;
}
.header-post {
color:#999;
margin:6px 0 15px;
text-transform:uppercase;
font-size:12px;
padding:8px 0;
border-top:1px solid #ddd;
border-bottom:1px solid #ddd;
}
.post-inf {
margin:0 10px;
}
.header-post i {
margin:3px;
}
.footer-post {
margin:10px 0;
}
.post-labels {
background:#BE2710;
color:#fff;
padding:10px 0 10px 35px;
}
.post-labels i {
padding-right:5px;
font-size:22px;
position:absolute;
margin-left:-25px;
}
.footer-post a {
color:#fff;
padding:5px 13px;
background: #A02815;
}
/* Index Post */
.post-thumbail {
position:relative;
overflow:hidden;
height:171px;
margin:5px;
float:left;
}
.post-thumbail:hover .post-caption {
top:-63px;
}
.post-caption {
position:relative;
top:-33px;
color:#fff;
font-size:12px;
-webkit-transition:.2s linear;
-moz-transition:.2s linear;
-o-transition:.2s linear;
transition:.2s linear;
}
.postheader {
padding:12px 10px;
background:#BE2710;
}
.linkhover a {
position:absolute;
width:305px;
height:171px;
color:transparent;
}
.post-thumbail:hover .linkhover a {
background:rgba(255,255,255,0.2);
}
.tagimg {
max-height:171px;
}
.posts-title {
margin:0;
background:rgba(0,0,0,0.3);
padding:7px;
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
width:291px;
}
.posts-title a {
color:#fff;
text-transform:uppercase;
font-size:13px;
}
.postheader .post-comment {
float: right;
}
]]></b:skin>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>var thumbnail_mode = "float" ;summary_noimg = 90;summary_img = 90;</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){if(strx.indexOf("<")!=-1){var s=strx.split("<");for(var i=0;i<s.length;i++)if(s[i].indexOf(">")!=-1)s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length);strx=s.join("")}chop=chop<strx.length-1?chop:strx.length-2;while(strx.charAt(chop-1)!=" "&&strx.indexOf(" ",chop)!=-1)chop++;strx=strx.substring(0,chop-1);return strx+"..."}
function createSummaryAndThumb(pID){var div=document.getElementById(pID);var imgtag="";var img=div.getElementsByTagName("img");var summ=summary_noimg;if(img.length>=1){imgtag='<div class="tagimg"><img src="'+img[0].src+'"/></div>';summ=summary_img}if(img.length<=0){imgtag='<div class="tagnoimg"><img src="http://i.imgur.com/A7zLcPO.png"/></div>';var summ=summary_noimg}var summary=imgtag+'<div style="display:none;" class="tagpost">'+removeHtmlTag(div.innerHTML,summ)+"</div>";
div.innerHTML=summary};
//]]>
</script>
</head>
<body>
<div id='outer-wrapper'>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
<b:includable id='main' var='top'>
<div class='blog-posts'>
<b:include data='top' name='status-message'/>
<data:defaultAdStart/>
<b:loop values='data:posts' var='post'>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == "static_page"'>
<b:include data='post' name='threaded_comments'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='threaded_comments'/>
</b:if>
<b:if cond='data:post.includeAd'>
<b:if cond='data:post.isFirstPost'>
<data:defaultAdEnd/>
<b:else/>
<data:adEnd/>
</b:if>
<div class='inline-ad'>
<data:adCode/>
</div>
<data:adStart/>
</b:if>
<b:if cond='data:post.trackLatency'>
<data:post.latencyJs/>
</b:if>
</b:loop>
<data:adEnd/>
</div>
<b:include name='nextprev'/>
</b:includable>
<b:includable id='backlinkDeleteIcon' var='backlink'/>
<b:includable id='backlinks' var='post'/>
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='breadcrumbs'><span>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
</span> » <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs'>
<span typeof='v:Breadcrumb'>
<a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
<b:loop values='data:post.labels' var='label'>
» <span typeof='v:Breadcrumb'>
<a expr:href='data:label.url' property='v:title' rel='v:url'>
<data:label.name/></a></span>
</b:loop>
» <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> »
<span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span>
<a expr:href='data:blog.homepageUrl'>Home</a>
</span> » <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='comment-form' var='post'/>
<b:includable id='commentDeleteIcon' var='comment'/>
<b:includable id='comment_count_picker' var='post'/>
<b:includable id='comment_picker' var='post'/>
<b:includable id='comments' var='post'/>
<b:includable id='feedLinks'/>
<b:includable id='feedLinksBody' var='links'/>
<b:includable id='iframe_comments' var='post'/>
<b:includable id='mobile-index-post' var='post'/>
<b:includable id='mobile-main' var='top'/>
<b:includable id='mobile-nextprev'/>
<b:includable id='mobile-post' var='post'/>
<b:includable id='nextprev'/>
<b:includable id='post' var='post'>
<article class='post' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
<b:if cond='data:post.firstImageUrl'>
<meta expr:content='data:post.firstImageUrl' itemprop='image_url'/>
</b:if>
<meta expr:content='data:blog.blogId' itemprop='blogId'/>
<meta expr:content='data:post.id' itemprop='postId'/>
<b:if cond='data:blog.pageType == "static_page"'>
<a expr:id='data:post.id'/>
<h3 class='post-title' itemprop='name'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'><data:post.title/></b:if>
</b:if>
</h3>
<b:if cond='data:blog.metaDescription == ""'>
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='articleBody'>
<data:post.body/>
<div style='clear:both'/>
</div>
</b:if>
<b:else/>
<!--FbGadgets POST CODE -->
<b:if cond='data:blog.pageType != "item"'>
<div class='post-thumbail'>
<div class='linkhover'><a expr:href='data:post.url'><data:post.title/></a></div>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>
createSummaryAndThumb("summary<data:post.id/>");
</script>
<div class='post-caption'>
<a expr:id='data:post.id'/>
<h3 class='posts-title' itemprop='name'><a expr:href='data:post.url'><data:post.title/></a></h3>
<footer class='postheader'>
<span class='post-timestamp'>
<span class='icon-time'/>
<b:if cond='data:top.showTimestamp'>
<b:if cond='data:post.url'>
<meta expr:content='data:post.canonicalUrl' itemprop='url'/>
<span class='timestamp-link' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></span>
</b:if>
</b:if>
</span>
<span class='post-comment'>
<span class='icon-comment'/>
<b:if cond='data:post.allowComments'>
<span class='comment-link' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></span>
</b:if>
</span></footer></div>
</div>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='breadcrumb'/>
<a expr:id='data:post.id'/>
<h3 class='post-title' itemprop='name'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'><data:post.title/></b:if>
</b:if>
</h3>
<header class='header-post'>
<span class='post-inf'>
<b:if cond='data:top.showAuthor'>
<i class='icon-user'/>
<b:if cond='data:post.authorProfileUrl'>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<span itemprop='name'><data:post.author/>, </span>
</span>
</b:if>
</b:if>
</span>
<span class='post-inf'>
<b:if cond='data:top.showTimestamp'>
<i class='icon-time'/>
<b:if cond='data:post.url'>
<meta expr:content='data:post.canonicalUrl' itemprop='url'/>
<span class='timestamp-link' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></span>
</b:if>
</b:if>
</span>
<span class='post-inf'>
<b:if cond='data:post.allowComments'>
<i class='icon-comments'/>
<span class='comment-link' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></span>
</b:if>
</span>
</header>
<b:if cond='data:blog.metaDescription == ""'>
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='articleBody'>
<data:post.body/>
<div style='clear:both'/>
</div>
</b:if>
<footer class='footer-post'>
<div class='post-labels'><i class='icon-tag'/>
<b:if cond='data:post.labels'>
<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:loop>
</b:if>
</div>
</footer>
</b:if>
</b:if>
</article>
</b:includable>
<b:includable id='postQuickEdit' var='post'/>
<b:includable id='shareButtons' var='post'/>
<b:includable id='status-message'/>
<b:includable id='threaded-comment-form' var='post'/>
<b:includable id='threaded_comment_js' var='post'/>
<b:includable id='threaded_comments' var='post'/>
</b:widget>
</b:section>
</div>
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
</div>
</body>
</html>
---------------------------------------------------------------------------------------------
YOU CAN USE THIS CODE WITHOUT BREAD CRUMB B INCLUDABLE WIDGET
FIRST FIND BREAD CRUMB WIDGET LINE IN POST HTML CODE AND DELETE THIS LINE
THEN DELETE BREAD CRUMB INCLUDABLE WIDGET FIND THIS LINE IN WIDGET
ABOVE CODE AND DELETE THIS LINE
<b:include data='post' name='breadcrumb'/>
ANY WAY COMPLETE COPY AND PASTE BELOW CODE
WITHOUT BREAD CRUMB WIDGET LINE
----------------------------------------------------------------------------------------------
<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:include data='blog' name='all-head-content'/>
<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/> - <data:blog.title/></title>
</b:if>
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: BLOG POST THUMBNAILS WITH SLIDER EFFECT
- Support Video Thumbnail
Design by : FBGadgets
URL : http://fbgadgets.blogspot.co.uk/
----------------------------------------------- */
/* On Post */
.post-title {
margin:7px 2px;
font-weight:400;
font-size:18px;
font-family:'
Oswald'
,sans-serif;
text-transform:uppercase;
}
.post-body img {
width:80%;
height:auto !important;
display:block;
margin:10px auto;
}
.post-thumbail img {
width: 305px;
}
.header-post {
color:#999;
margin:6px 0 15px;
text-transform:uppercase;
font-size:12px;
padding:8px 0;
border-top:1px solid #ddd;
border-bottom:1px solid #ddd;
}
.post-inf {
margin:0 10px;
}
.header-post i {
margin:3px;
}
.footer-post {
margin:10px 0;
}
.post-labels {
background:#BE2710;
color:#fff;
padding:10px 0 10px 35px;
}
.post-labels i {
padding-right:5px;
font-size:22px;
position:absolute;
margin-left:-25px;
}
.footer-post a {
color:#fff;
padding:5px 13px;
background: #A02815;
}
/* Index Post */
.post-thumbail {
position:relative;
overflow:hidden;
height:171px;
margin:5px;
float:left;
}
.post-thumbail:hover .post-caption {
top:-63px;
}
.post-caption {
position:relative;
top:-33px;
color:#fff;
font-size:12px;
-webkit-transition:.2s linear;
-moz-transition:.2s linear;
-o-transition:.2s linear;
transition:.2s linear;
}
.postheader {
padding:12px 10px;
background:#BE2710;
}
.linkhover a {
position:absolute;
width:305px;
height:171px;
color:transparent;
}
.post-thumbail:hover .linkhover a {
background:rgba(255,255,255,0.2);
}
.tagimg {
max-height:171px;
}
.posts-title {
margin:0;
background:rgba(0,0,0,0.3);
padding:7px;
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
width:291px;
}
.posts-title a {
color:#fff;
text-transform:uppercase;
font-size:13px;
}
.postheader .post-comment {
float: right;
}
]]></b:skin>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>var thumbnail_mode = "float" ;summary_noimg = 90;summary_img = 90;</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){if(strx.indexOf("<")!=-1){var s=strx.split("<");for(var i=0;i<s.length;i++)if(s[i].indexOf(">")!=-1)s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length);strx=s.join("")}chop=chop<strx.length-1?chop:strx.length-2;while(strx.charAt(chop-1)!=" "&&strx.indexOf(" ",chop)!=-1)chop++;strx=strx.substring(0,chop-1);return strx+"..."}
function createSummaryAndThumb(pID){var div=document.getElementById(pID);var imgtag="";var img=div.getElementsByTagName("img");var summ=summary_noimg;if(img.length>=1){imgtag='<div class="tagimg"><img src="'+img[0].src+'"/></div>';summ=summary_img}if(img.length<=0){imgtag='<div class="tagnoimg"><img src="http://i.imgur.com/A7zLcPO.png"/></div>';var summ=summary_noimg}var summary=imgtag+'<div style="display:none;" class="tagpost">'+removeHtmlTag(div.innerHTML,summ)+"</div>";
div.innerHTML=summary};
//]]>
</script>
</head>
<body>
<div id='outer-wrapper'>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
<b:includable id='main' var='top'>
<div class='blog-posts hfeed'>
<b:loop values='data:posts' var='post'>
<b:include data='post' name='post'/>
</b:loop>
</div>
</b:includable>
<b:includable id='backlinkDeleteIcon' var='backlink'/>
<b:includable id='backlinks' var='post'/>
<b:includable id='comment-form' var='post'/>
<b:includable id='commentDeleteIcon' var='comment'/>
<b:includable id='comment_count_picker' var='post'/>
<b:includable id='comment_picker' var='post'/>
<b:includable id='comments' var='post'/>
<b:includable id='feedLinks'/>
<b:includable id='feedLinksBody' var='links'/>
<b:includable id='iframe_comments' var='post'/>
<b:includable id='mobile-index-post' var='post'/>
<b:includable id='mobile-main' var='top'/>
<b:includable id='mobile-nextprev'/>
<b:includable id='mobile-post' var='post'/>
<b:includable id='nextprev'/>
<b:includable id='post' var='post'>
<article class='post' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
<b:if cond='data:post.firstImageUrl'>
<meta expr:content='data:post.firstImageUrl' itemprop='image_url'/>
</b:if>
<meta expr:content='data:blog.blogId' itemprop='blogId'/>
<meta expr:content='data:post.id' itemprop='postId'/>
<b:if cond='data:blog.pageType == "static_page"'>
<a expr:id='data:post.id'/>
<h3 class='post-title' itemprop='name'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'><data:post.title/></b:if>
</b:if>
</h3>
<b:if cond='data:blog.metaDescription == ""'>
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='articleBody'>
<data:post.body/>
<div style='clear:both'/>
</div>
</b:if>
<b:else/>
<!--FbGadgets POST CODE -->
<b:if cond='data:blog.pageType != "item"'>
<div class='post-thumbail'>
<div class='linkhover'><a expr:href='data:post.url'><data:post.title/></a></div>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>
createSummaryAndThumb("summary<data:post.id/>");
</script>
<div class='post-caption'>
<a expr:id='data:post.id'/>
<h3 class='posts-title' itemprop='name'><a expr:href='data:post.url'><data:post.title/></a></h3>
<footer class='postheader'>
<span class='post-timestamp'>
<span class='icon-time'/>
<b:if cond='data:top.showTimestamp'>
<b:if cond='data:post.url'>
<meta expr:content='data:post.canonicalUrl' itemprop='url'/>
<span class='timestamp-link' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></span>
</b:if>
</b:if>
</span>
<span class='post-comment'>
<span class='icon-comment'/>
<b:if cond='data:post.allowComments'>
<span class='comment-link' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></span>
</b:if>
</span></footer></div>
</div>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<a expr:id='data:post.id'/>
<h3 class='post-title' itemprop='name'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'><data:post.title/></b:if>
</b:if>
</h3>
<header class='header-post'>
<span class='post-inf'>
<b:if cond='data:top.showAuthor'>
<i class='icon-user'/>
<b:if cond='data:post.authorProfileUrl'>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<span itemprop='name'><data:post.author/>, </span>
</span>
</b:if>
</b:if>
</span>
<span class='post-inf'>
<b:if cond='data:top.showTimestamp'>
<i class='icon-time'/>
<b:if cond='data:post.url'>
<meta expr:content='data:post.canonicalUrl' itemprop='url'/>
<span class='timestamp-link' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></span>
</b:if>
</b:if>
</span>
<span class='post-inf'>
<b:if cond='data:post.allowComments'>
<i class='icon-comments'/>
<span class='comment-link' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></span>
</b:if>
</span>
</header>
<b:if cond='data:blog.metaDescription == ""'>
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='articleBody'>
<data:post.body/>
<div style='clear:both'/>
</div>
</b:if>
</b:if>
</b:if>
</article>
</b:includable>
<b:includable id='postQuickEdit' var='post'/>
<b:includable id='shareButtons' var='post'/>
<b:includable id='status-message'/>
<b:includable id='threaded-comment-form' var='post'/>
<b:includable id='threaded_comment_js' var='post'/>
<b:includable id='threaded_comments' var='post'/>
</b:widget>
</b:section>
</div>
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
</div>
</body>
</html>
-------------------------------------------------------------------------------------------------------
OR USE BELOW SHORT CODE
-------------------------------------------------------------------------------------------------------
<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:include data='blog' name='all-head-content'/>
<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/> - <data:blog.title/></title>
</b:if>
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: BLOG POST THUMBNAILS WITH SLIDER EFFECT
- Support Video Thumbnail
Design by : FBGadgets
URL : http://fbgadgets.blogspot.co.uk/
----------------------------------------------- */
/* On Post */
.post-title {
margin:7px 2px;
font-weight:400;
font-size:18px;
font-family:'
Oswald'
,sans-serif;
text-transform:uppercase;
}
.post-body img {
width:80%;
height:auto !important;
display:block;
margin:10px auto;
}
.post-thumbail img {
width: 305px;
}
.header-post {
color:#999;
margin:6px 0 15px;
text-transform:uppercase;
font-size:12px;
padding:8px 0;
border-top:1px solid #ddd;
border-bottom:1px solid #ddd;
}
.post-inf {
margin:0 10px;
}
.header-post i {
margin:3px;
}
.footer-post {
margin:10px 0;
}
.post-labels {
background:#BE2710;
color:#fff;
padding:10px 0 10px 35px;
}
.post-labels i {
padding-right:5px;
font-size:22px;
position:absolute;
margin-left:-25px;
}
.footer-post a {
color:#fff;
padding:5px 13px;
background: #A02815;
}
/* Index Post */
.post-thumbail {
position:relative;
overflow:hidden;
height:171px;
margin:5px;
float:left;
}
.post-thumbail:hover .post-caption {
top:-63px;
}
.post-caption {
position:relative;
top:-33px;
color:#fff;
font-size:12px;
-webkit-transition:.2s linear;
-moz-transition:.2s linear;
-o-transition:.2s linear;
transition:.2s linear;
}
.postheader {
padding:12px 10px;
background:#BE2710;
}
.linkhover a {
position:absolute;
width:305px;
height:171px;
color:transparent;
}
.post-thumbail:hover .linkhover a {
background:rgba(255,255,255,0.2);
}
.tagimg {
max-height:171px;
}
.posts-title {
margin:0;
background:rgba(0,0,0,0.3);
padding:7px;
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
width:291px;
}
.posts-title a {
color:#fff;
text-transform:uppercase;
font-size:13px;
}
.postheader .post-comment {
float: right;
}
]]></b:skin>
<script type='text/javascript'>var thumbnail_mode = "float" ;summary_noimg = 90;summary_img = 90;</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){if(strx.indexOf("<")!=-1){var s=strx.split("<");for(var i=0;i<s.length;i++)if(s[i].indexOf(">")!=-1)s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length);strx=s.join("")}chop=chop<strx.length-1?chop:strx.length-2;while(strx.charAt(chop-1)!=" "&&strx.indexOf(" ",chop)!=-1)chop++;strx=strx.substring(0,chop-1);return strx+"..."}
function createSummaryAndThumb(pID){var div=document.getElementById(pID);var imgtag="";var img=div.getElementsByTagName("img");var summ=summary_noimg;if(img.length>=1){imgtag='<div class="tagimg"><img src="'+img[0].src+'"/></div>';summ=summary_img}if(img.length<=0){imgtag='<div class="tagnoimg"><img src="http://i.imgur.com/A7zLcPO.png"/></div>';var summ=summary_noimg}var summary=imgtag+'<div style="display:none;" class="tagpost">'+removeHtmlTag(div.innerHTML,summ)+"</div>";
div.innerHTML=summary};
//]]>
</script>
</head>
<body>
<div id='outer-wrapper'>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
<b:includable id='main' var='top'>
<div class='blog-posts hfeed'>
<b:loop values='data:posts' var='post'>
<b:include data='post' name='post'/>
</b:loop>
</div>
</b:includable>
<b:includable id='backlinkDeleteIcon' var='backlink'/>
<b:includable id='backlinks' var='post'/>
<b:includable id='comment-form' var='post'/>
<b:includable id='commentDeleteIcon' var='comment'/>
<b:includable id='comment_count_picker' var='post'/>
<b:includable id='comment_picker' var='post'/>
<b:includable id='comments' var='post'/>
<b:includable id='feedLinks'/>
<b:includable id='feedLinksBody' var='links'/>
<b:includable id='iframe_comments' var='post'/>
<b:includable id='mobile-index-post' var='post'/>
<b:includable id='mobile-main' var='top'/>
<b:includable id='mobile-nextprev'/>
<b:includable id='mobile-post' var='post'/>
<b:includable id='nextprev'/>
<b:includable id='post' var='post'>
<!--FbGadgets POST CODE -->
<b:if cond='data:blog.pageType != "item"'>
<div class='post-thumbail'>
<div class='linkhover'><a expr:href='data:post.url'><data:post.title/></a></div>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>
createSummaryAndThumb("summary<data:post.id/>");
</script>
</div>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<div class='post'>
<data:post.body/>
<div style='clear:both'/>
</div>
</b:if>
</b:includable>
<b:includable id='postQuickEdit' var='post'/>
<b:includable id='shareButtons' var='post'/>
<b:includable id='status-message'/>
<b:includable id='threaded-comment-form' var='post'/>
<b:includable id='threaded_comment_js' var='post'/>
<b:includable id='threaded_comments' var='post'/>
</b:widget>
</b:section>
</div>
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
</div>
</body>
</html>
-------------------------------------------------------------------------------------------------
WITHOUT JAVA CODE IT WORKS FOR ONLY BLOG IMAGE TEMPLATE
---------------------------------------------------------------------------------------------------
<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:include data='blog' name='all-head-content'/>
<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/> - <data:blog.title/></title>
</b:if>
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: BLOG POST THUMBNAILS WITH SLIDER EFFECT
- Support Video Thumbnail
Design by : FBGadgets
URL : http://fbgadgets.blogspot.co.uk/
----------------------------------------------- */
/* On Post */
.post-thumbail img {
width: 305px;
}
/* Index Post */
.post-thumbail {
position:relative;
overflow:hidden;
height:171px;
margin:5px;
float:left;
}
.linkhover a {
position:absolute;
width:305px;
height:171px;
color:transparent;
}
]]></b:skin>
</head>
<body>
<div id='outer-wrapper'>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
<b:includable id='main' var='top'>
<div class='blog-posts hfeed'>
<b:loop values='data:posts' var='post'>
<b:include data='post' name='post'/>
</b:loop>
</div>
</b:includable>
<b:includable id='backlinkDeleteIcon' var='backlink'/>
<b:includable id='backlinks' var='post'/>
<b:includable id='comment-form' var='post'/>
<b:includable id='commentDeleteIcon' var='comment'/>
<b:includable id='comment_count_picker' var='post'/>
<b:includable id='comment_picker' var='post'/>
<b:includable id='comments' var='post'/>
<b:includable id='feedLinks'/>
<b:includable id='feedLinksBody' var='links'/>
<b:includable id='iframe_comments' var='post'/>
<b:includable id='mobile-index-post' var='post'/>
<b:includable id='mobile-main' var='top'/>
<b:includable id='mobile-nextprev'/>
<b:includable id='mobile-post' var='post'/>
<b:includable id='nextprev'/>
<b:includable id='post' var='post'>
<!--FbGadgets POST CODE -->
<b:if cond='data:blog.pageType != "item"'>
<div class='post-thumbail'>
<div class='linkhover'><a expr:href='data:post.url'><data:post.title/></a></div>
<data:post.body/>
</div>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<div class='post'>
<data:post.body/>
<div style='clear:both'/>
</div>
</b:if>
</b:includable>
<b:includable id='postQuickEdit' var='post'/>
<b:includable id='shareButtons' var='post'/>
<b:includable id='status-message'/>
<b:includable id='threaded-comment-form' var='post'/>
<b:includable id='threaded_comment_js' var='post'/>
<b:includable id='threaded_comments' var='post'/>
</b:widget>
</b:section>
</div>
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
</div>
</body>
</html>
Related movie you might like to see :
JAVA SCRIPT BOOKS ONLINE

BASIC ELEVATE ZOOM PLUS

ELEVATE ZOOM JAVA SCRIPT WITH ONE I...

CSS SYNTAX HIGHLIGHT CHANGE IN NOT...

PRINT STAR PATTERN IN JAVA SCRIPT

TEXT COMPARE OR DUPLI TEXT FINDER

MOUSE OVER MOUSE OUT IN JAVA SCRIPT

BLOCK JAVA SCRIPT BY GOOGLE CHROME

MOUSE COORDINATES IN JAVA SCRIPT

RELATED POST WIDGET LIST WITHOUT TH...
?
+
X
Recommended for you
Loading..
Related Post for JAVA SCRIPT POST THUMBNAIL CHANGE EMPTY AND VIDEO POST IN IMAGE
MOUSE OVER MOUSE OUT IN JAVA SCRIPT -------------------------------------------------------------------------------------------------------------- MOUSE OVER MOUSE OUT IN JAVA SCRIPT WITH BUTTON AND DIV IDSR…
AUTO CSS JS SLIDER WITH ARROW BULLET ------------------------------------------------------------------------------------------------------- BX SLIDER CODE: READ MORE: BX SLIDER IN BLOGGER TEMPALTE - You…
NOTE PAD ++ SYNTAX HIGHLIGHTER FOR BLOGGER POST --------------------------------------------------------------------------------------------------------------------- NOTE PAD ++ SYNTAX HIGHLIGHTER FOR BLOGGER POST https://…
FLASH CODE CHANGE INTO JAVASCRIPT ------------------------------------------------------------------------------------------------------------------- AS3 CODE http://flashcollege.blogspot.co.uk/2016/03/trace-ar…
CSS SLIDER WITHOUT JS ----------------------------------------------------------------------------------------------------------- ReadMore: http://cssslider.com/non-jquery-carousel-7.html SAVE …
DRAG AND DROP WITH IMAGE ------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE: READ MORE: http://fbgadgets.blogsp…
REMOVE MATCHING ID IN JAVASCRIPT -------------------------------------------------------------------------------------------------------------------- REMOVE MATCHING ID IN JAVASCRIPT READ MORE: https://jsperf…
IMAGE SRC ARRAY IN JAVA SCRIPT --------------------------------------------------------------------------------------------------------------- CODE:1 http://fbgadgets.blogspot.co.uk/2017/07/java-script-arra…
Labels:
J
Subscribe to:
Post Comments (Atom)
i collected lot of information from this post which is very helpful for me.thanks for the sharing this post.see more
ReplyDeletethanks:)
ReplyDelete