BLOGGER EMPTY TEXT VIDEO THUMBNAIL CHANGE IN IMAGE WITH JAVA CODE

Friday, 16 May 2014

BLOGGER EMPTY TEXT VIDEO THUMBNAIL CHANGE IN IMAGE WITH JAVA CODE

------------------------------------------------------------------------------------------------------
COPY AND PASTE BELOW CODE
------------------------------------------------------------------------------------------------------

<html>
<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/
----------------------------------------------- */
#navbar-iframe {
display:none;
}
body {
background:$bgcolor;
margin:0;
color:RED
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
background-color:#000000;
background-image: url(http://stuff.pyzam.com/layouts/img/l/o/nvloveintheair.jpg);
background-attachment: fixed;
background-position: center ;
background-repeat: repeat;
}

a img {
border:none
}
a {
color:GOLD;
text-decoration:none
}
ul {
list-style:none;
margin:0;
padding:0
}
h1,h2,h3,h4,h5 {
font-family:'Droid Sans',arial,serif;
font-weight:normal;
margin:0;
padding:0
}
h1,h2,h3,h4,h5 {
color:#444;
line-height:1.3em
}
h1 {
font-size:20px;
}
h2 {
font-size:16px;
text-transform:uppercase
}
h3 {
font-size:10px;
}
h4 {
font-size:22px;
}
h5 {
font-size:20px;
}

#outer-wrapper {
margin:0 auto;
width:960px
}

#main-wrapper {
border-color:GREEN;
border-width:5px;
border-style: solid;
float:left;
padding:0 35px 20px 35px;
width:558px
}

.post {
color:#FFFFFF;
border-bottom:1px solid #d6d6d6;
margin-top:30px
}
.post h1 a {
color:RED
}
.post-header {
margin:5px 0 10px 0;
font-size:10px;
color:#418FD1
}
.post-body {
text-align:justify;
line-height:20px
}
.post img {
background:#EFEFEF;
max-width:546px;
border:1px solid #dadada;
padding:5px;
-moz-border-radius:3px
}
.post blockquote {
margin:20px;
border-left:5px solid #d0d4d8;
padding-left:25px;
font-family:Georgia,"Times New Roman",Times,serif;
font-size:18px;
font-style:italic;
line-height:1.5em;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVQCMbOitRsPNA8kIqqlTFhlr7HhbcJPcwRw_wWUj1zDx3ebhUvpyNDiUSGOzZzlhIlszKdIa87k-LLL3cDzm8D9VNvBZkeRYIwCXLmgtWW-8M5Kk03KpHWHXPnO68hVRJtqxVQ3kkOPY/s1600/quote.png) no-repeat scroll top left;
background-position:top left
}
.jump-link,.rmlink {
margin:7px 0 5px 0
}
.jump-link a:hover,.rmlink a:hover {
text-decoration:underline
}
.post-comment-link a {
margin:0
}
.post-footer {
color:GREEN;
margin:30px 0 15px 0
}
.post-share-buttons {
float:right
}
.post-edit {
display:none
}
.post-labels {
font-size:12px
}
.comment-link {
margin-left:10px
}
#comments h4 {
margin-bottom:20px;
border-bottom:1px solid #d6d6d6;
padding:15px 0
}
.comments-name a {
font-size:12px
}
.comments-avatar {
margin-top:20px;
float:left;
width:90px
}
.comments-body {
font-size:12px;
float:right;
width:516px;
background:#f2f2f2;
border:1px solid #d2d2ca;
border-bottom:none;
padding:0 20px;
line-height:20px;
-moz-border-radius-topleft:4px;
-moz-border-radius-topright:4px
}
.comments-wrap {
width:407px;
float:right;
padding-top:5px
}
.comment-time {
float:right;
font-size:11px;
color:#666;
background:#f2f2f2;
border:1px solid #d2d2ca;
border-top:none;
width:536px;
text-align:right;
margin-bottom:20px;
padding:0 20px 10px 0;
-moz-border-radius-bottomleft:4px;
-moz-border-radius-bottomright:4px
}
.deleted-comment {
color:gray;
font-style:italic
}
.comments-block .comment-footer {
background:#000
}
.comment-form {
min-width:577px;
padding:0
}
.comment-form h5 {
width:558px;
border-bottom:1px solid #d6d6d6;
padding:35px 0 15px 0;
margin-bottom:20px
}

]]></b:skin>

<style type='text/css'>
<b:if cond='data:blog.pageType == "static_page"'>
.post{border-bottom:none}
.post-body{margin-top:20px}
</b:if>
</style>

<script type='text/javascript'>
var summaryConf = {
showImage: true,
imgFloat: 'left',
imgWidth: 200,
imgHeight: 200,
defaultThumb: 'http://goo.gl/6IziY2',
words: 65,
wordsNoImg: 65,
skip: 0,
showHome: true,
showLabel: true };
</script>

<script type='text/javascript'>
//<![CDATA[
function summary(h){summary.count=summary.count||0;summary.count++;var g=location.href.indexOf("/search/label/")==-1&&location.href.indexOf("/search?")==-1,c=location.href.indexOf("/search/label/")!=-1;if(summary.count<=summaryConf.skip){return}if(g&&!summaryConf.showHome){return}if(c&&!summaryConf.showLabel){return}var e=document.getElementById(h),f=e.getElementsByTagName("img");if(summaryConf.showImage){var a='<img width="'+summaryConf.imgWidth+'" height="'+summaryConf.imgHeight+'"';if(summaryConf.imgFloat!="no"){var b=summaryConf.imgFloat=="left"?' style="float:left;margin:5px 20px 35px 0;"':' style="float:right;padding:1px"';a+=b}a+=' src="'+(f.length>0?f[0].src:summaryConf.defaultThumb)+'" />';var d=summary.strip(e.innerHTML,summaryConf.words)}else{var a="",d=summary.strip(e.innerHTML,summaryConf.wordsNoImg)}e.innerHTML=a+d+"..."}summary.strip=function(a,b){return a.replace(/<.*?>/ig,"").split(/\s+/).slice(0,b-1).join(" ")};
//]]>
</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'>

<div class='post hentry'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h1 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h1>
</b:if>
<b:if cond='data:blog.pageType != "static_page"'>
<div class='post-header'>
<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<b:if cond='data:post.url'>
<span expr:title='data:post.timestampISO8601'><data:post.timestamp/></span>
</b:if>
</b:if>
</span>
<span class='post-author vcard'>|
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><b><data:post.author/></b></span>
</b:if>|
</span>
<span class='post-comment-link'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' 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></a>
</b:if>
</span></div>
</b:if>

<div class='post-body entry-content'>

<span expr:id='data:post.id'><data:post.body/></span>
<b:if cond='data:blog.pageType == "index"'>
<script type='text/javascript'>summary("<data:post.id/>")</script>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<script type='text/javascript'>summary("<data:post.id/>")</script>
</b:if>
</b:if>

<div style='clear:right'/>
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'>Read More...</a>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='rmlink'><a expr:href='data:post.url'>Read More...</a></div>
</b:if>
</b:if>
<div style='clear:both'/>
</div>
<b:if cond='data:blog.pageType == "item"'>
<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
<span class='post-share-buttons'>
<b:include data='post' name='shareButtons'/>
</span>
</div>
<div class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span>
</div>
<div class='post-footer-line post-footer-line-3'/>
<span class='post-edit'><b:include data='post' name='postQuickEdit'/></span>
</div>
</b:if>
</div>

</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>
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
</body>
</html>

------------------------------------------------------------------------------------------------------------
SIMPLE AUTO READ MORE WITH JAVA SCRIPT
1) FIND POST INCLUDABLE LINE

<b:includable id='post' var='post'>

2)REMOVE POST BODY AND READ MORE BUTTON PART

------------------------------------------------------------------------------------------------------------

-------------------------------------------------------------------------------------------------------------

<b:if cond='data:blog.pageType != "static_page"'>

<b:if cond='data:blog.pageType != "item"'>

<style>

.pbtthumbimg {

background:rgba(165, 154, 154, 0.0980392);

border-color:rgba(173, 123, 123, 0.2);

border-style:solid;

border-width:0.1rem;

float:left;

height:150px;

margin:0 10px 5px 5px;

padding:0.7rem;

width:200px;

}

</style>

summary_noimg = 400;

summary_img = 300;

img_thumb_height = 150;

img_thumb_width = 200;

</script>

summary_noimg = 400;

summary_img = 300;

img_thumb_height = 150;

img_thumb_width = 200;

</script>

//<![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 = '<img src="'+img[0].src+'" class="pbtthumbimg"/>';

summ = summary_img;

}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';

div.innerHTML = summary;

}

//]]>

</script>

</b:if>

<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>

<b:if cond='data:blog.pageType != "static_page"'>

<b:if cond='data:blog.pageType != "item"'>

<a class='continue-reading' expr:href='data:post.url'>Continue reading &rarr;</a>

</div>

</b:if>

-----------------------------------------------------------------------------------------------------------
READ MORE:
http://fbgadgets.blogspot.co.uk/2014/05/blog-post-thumbnails-with-cover-effect_17.html