Wednesday, 15 January 2014

JAVA SCRIPT POST THUMBNAIL CHANGE EMPTY AND VIDEO POST IN IMAGE

FB Gadgets



-----------------------------------------------------------------------------------------------------
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 == &quot;index&quot;'>
<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:&#39;
Oswald&#39;
,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 = &quot;float&quot; ;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 == &quot;static_page&quot;'>
<b:include data='post' name='threaded_comments'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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 == &quot;static_page&quot;'>
<div class='breadcrumbs'><span>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
</span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- 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'>
&#187; <span typeof='v:Breadcrumb'>
<a expr:href='data:label.url' property='v:title' rel='v:url'>
<data:label.name/></a></span>
</b:loop>
&#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; 
<span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span>
<a expr:href='data:blog.homepageUrl'>Home</a>
</span> &#187; <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <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 == &quot;static_page&quot;'>
<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 == &quot;&quot;'>
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + 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 != &quot;item&quot;'>
<div class='post-thumbail'>
<div class='linkhover'><a expr:href='data:post.url'><data:post.title/></a></div>  
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>
createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</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 == &quot;item&quot;'>
<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 == &quot;&quot;'>
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + 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 != &quot;true&quot;'/>
</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 == &quot;index&quot;'>
<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:&#39;
Oswald&#39;
,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 = &quot;float&quot; ;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 == &quot;static_page&quot;'>
<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 == &quot;&quot;'>
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + 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 != &quot;item&quot;'>
<div class='post-thumbail'>
<div class='linkhover'><a expr:href='data:post.url'><data:post.title/></a></div>  
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>
createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</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 == &quot;item&quot;'>

 <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 == &quot;&quot;'>
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + 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 == &quot;index&quot;'>
<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:&#39;
Oswald&#39;
,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 = &quot;float&quot; ;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 != &quot;item&quot;'>
<div class='post-thumbail'>
<div class='linkhover'><a expr:href='data:post.url'><data:post.title/></a></div>  
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>
createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
</div>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>     
<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 == &quot;index&quot;'>
<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 != &quot;item&quot;'>
<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 == &quot;item&quot;'>    
<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 Post for JAVA SCRIPT POST THUMBNAIL CHANGE EMPTY AND VIDEO POST IN IMAGE

  • MOUSE COORDINATES IN JAVA SCRIPT -------------------------------------------------------------------------------------------------------------- mouse coordinates finder on website https://chrome.google.com/web…
  • HTML CSS GREEN COMMENTS NOTEPAD++ ------------------------------------------------------------------------------------------------------------------------- READ MORE: https://www.youtube.com/watch?v=Abqwpg5mp_U…
  • Direct Links to your Files on Google Drive DIRECT LINKS TO YOUR FILES ON GOOGLE DRIVE - YouTube ▶ 5:17 https://www.youtube.com/watch?v=ehue47G5ayc 14 hours ago - Uploaded by SAVE MONEY DIRECT LINK…
  • RELATED POST WIDGET LIST WITHOUT THUMBNAIL ------------------------------------------------------------------------------------------------------- FIND HEAD  </head> TAG AND PASTE BELOW CODE WHEN W…
  • BOOLEAN MATCHING GAME JAVASCRIPT ------------------------------------------------------------------------------------------------------------------- USEFUL LINKS https://github.com/IonicaBizau/match.js http:/…
  • JS IMAGE SCROLLER -------------------------------------------------------------------------------------------------------------- JS IMAGE SCROLLER CODE image scroller https://amazingcarousel.com…
  • FLASH PLAYER SWF FILE DOWNLOAD ARCHIVES ---------------------------------------------------------------------------------------------------------------- FLASH PLAYER DOWNLOAD FROM ARCHIVES https://helpx.adobe.com/fla…
  • FILE SAVE AS WITH JAVA SCRIPT METHOD CODE ----------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE IN POST HTML SECTION READ MORE: http…
  • BOOTSNIPP LOGIN SIGNUP FORM ----------------------------------------------------------------------------------------------------------- READ MORE: http://bootsnipp.com/tags/login http://bootsnipp.com/s…
  • FLASH 8 DOWNLOAD DIRECT LINKS TO YOUR FILES ON GOOGLE DRIVE - YouTube ▶ 5:17 https://www.youtube.com/watch?v=ehue47G5ayc 14 hours ago - Uploaded by SAVE MONEY DIRECT LINKS&n…
  • FLICKITY JS CSS SLIDER ----------------------------------------------------------------------------------------------------------------------- ReadMore: https://flickity.metafizzy.co/ NEED 1 CSS FIL…
  • PRINT STAR PATTERN IN JAVA SCRIPT ---------------------------------------------------------------------------------------------------------- PRINT STAR PATTERN IN JAVA SCRIPT ----------------------------------…
  • ON LINE JAVA LIBRARY -------------------------------------------------------------------------------------------------------- READ MORE: https://cdnjs.com/libraries https://code.angularjs.org/ http…
  • REMOVE RETURN VARIABLE REMOVE VARIABLE IN FUNCTION BRACKETS IN JAVA SCRIPT -------------------------------------------------------------------------------------------------------------------- REMOVE RETURN VARIABLE IN JAVA SCRIPT ReadMore: http://fbg…
  • QUIZ ACTIVITY MAKER --------------------------------------------------------------------------------------------------------------------- ReadMore: https://www.quia.com/web Concentration game to…
  • JAVA FILE MAKE & SAVE IN NOTE PAD CLICK AND OPEN NOTE PAD IN WNDOW MENU BAR -------------------------------------------------------------------------------------------------------- COPY…
  • WHACK A RAT CSS GAME ----------------------------------------------------------------------------------------------------------------- ReadMore: https://dzone.com/articles/css3-games-collection htt…
  • CTX STYLE ------------------------------------------------------------------------------------------------------------------ READ MORE https://www.google.co.uk/search?q=canvas+draw+tran…
  • GOOGLE FILTER BUTTON IN IMAGE SEARCH ------------------------------------------------------------------------------------------------------ SEARCH IN GOOGLE: Google Image Search and search for any query,&nbs…
  • TEXT COMPARE OR DUPLI TEXT FINDER ------------------------------------------------------------------------------------------------------------------ READ MORE: FIND RED TEXT IN GOOGLE:  text compare downl…
Posted by on Wednesday, 15 January 2014 at 12:49
Labels:

2 comments:

  1. Unknown11 April 2014 at 02:13

    i collected lot of information from this post which is very helpful for me.thanks for the sharing this post.see more

    ReplyDelete
  2. Unknown10 July 2014 at 06:20

    thanks:)

    ReplyDelete

:) :)) ;(( :-) =)) ;( ;-( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ $-) (b) (f) x-) (k) (h) (c) cheer
Click to see the code!
To insert emoticon you must added at least one space before the code.

Subscribe to: Post Comments (Atom)
FB Gadgets | Template Designed by Fatakat PhotosCoolBThemes.com
Code by : paid web directory

https://www.google.co.uk/search?q=site%3Ablogspot.com+fbgadgets