JAVA SCRIPT POST THUMBNAIL CHANGE EMPTY AND VIDEO POST IN IMAGE

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"'>

<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"'>

<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/>

<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/>

<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'>

<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'>

<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>