NEW CODE YOUTUBE VIDEO THUMBNAIL WITH FB GADGETS THUMBAIL

Friday, 7 March 2014

NEW CODE YOUTUBE VIDEO THUMBNAIL WITH FB GADGETS THUMBAIL

<?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: NEW CODE YOUTUBE VIDEO THUMBNAIL WITH JAVA CODE
NEW CODE YOUTUBE VIDEO THUMBNAIL WITH JAVA CODE
Design by : FBGadgets
URL : http://fbgadgets.blogspot.co.uk/
----------------------------------------------- */
/* Variable definitions
====================

*/

/*-----PostTitleCode ---*/
.post h3 {
background-color:Red;
background-position:initial initial;
background-repeat:initial initial;
border:1px solid #E3E3E3;
border-bottom-left-radius:0;
border-bottom-right-radius:10px;
border-top-left-radius:0;
border-top-right-radius:10px;
box-shadow:#FFFFFF 0 0 0 1px inset;
font-size: 1.2em;
color:#FFFFFF;
font-family:Oswald;
font-size:140%;
font-weight:400;
line-height:1.4em;
margin:0.25em 0 0;
padding:0 0 4px;
margin:0 0 5px;
padding:5px;
}
.post h3 a {
color: Blue;
text-decoration: none;
}

/* YOU NEED TO POST IMAGE CODE WRITE TWO TIMES
BECAUSE IT'S DOES NOT WORK*/
/* WHEN POST OPEN POST IMAGE SHOW BIGGER*/
/*-----PostImageCode ---*/
.post img {
background:#ffffff;
width:100%;
height:auto!important;
}

]]></b:skin>


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

.post {
background: #f1f1f1;
border-top:#fff 1px solid;
border-left:#fff 1px solid;
border-right:#fff 1px solid;
border-bottom:#7c7c7c 1px solid;
float:left;
height:230px;
margin:10px 15px 0 5px;
overflow:hidden;
position:relative;
width:100%
-moz-box-shadow: 0px 2px 10px #989898;
-webkit-box-shadow:0px 2px 5px #989898;
}

.post img {
background-repeat:no-repeat;
background-position: bottom center;
height:180px;
margin-bottom:8000px;
margin-left:15px;
margin-top:0;
border: none;
padding-bottom:3px;
width:250px;
}
.post-body {
font-size: 0px;
}

.post-footer {
line-height: 1.4em;
font-size: 0.9em;
margin:12px;
border-top:1px solid #bbb;
}

.post h3 {
position: relative;
background-color:Black;
height:20px
font-size:20px

}

.post h3 a {
display:block;
color: Red;
text-decoration: none;
}

</style>
</b:if>
</b:if>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<script class='jshilang' type='text/javascript'>

//<![CDATA[
var configSummary = {
thumbnailSize: "s180-c", // Define the post thumbnail size
summaryLength: 200, // Define the summary length
slideffect: true, // Define to make image slide
maxImage:5, // Define Maximal Image to image slide
slideSpeed: 3000, // Define Slideshow Speed in milisecond
BackupImage: 'http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s72-c/grey.gif' // Backup image if post don't have image
};
//]]>
</script>
</b:if></b:if>

<script class='jshilang' type='text/javascript'>
//<![CDATA[

function createPostSummary(p,o,m){var i,t,x,c,u,g,l="",v=document,n=configSummary,e=v.getElementById(p).value,s=v.getElementById(o),w=m,j=jQuery("#"+p).parents(".post"),k=j.find(".post-title.entry-title a").text();s.innerHTML=e;x=s.getElementsByTagName("img");g=s.getElementsByTagName("iframe");if(x.length===0&&g.length===0){t='<a class="thumbimgx" title="'+k+'" href="'+w+'"><img class="post-thumbnail" src="'+n.BackupImage+'" alt="'+k+'"></a>'}else{if(x.length===0&&g.length>0){c=g[0].src;if(c.indexOf("youtube.com")!=-1||c.indexOf("youtu.be")!=-1){u=c.match(/(\?v=|\&v=|\/\d\/|\/embed\/|\/v\/|\.be\/)([a-zA-Z0-9\-\_]+)/);t='<a class="thumbimgx" title="'+k+'" href="'+w+'"><img class="post-thumbnail" src="http://img.youtube.com/vi/'+u[2]+'/0.jpg" alt="'+k+'"></a>'}else{t='<a class="thumbimgx" title="'+k+'" href="'+w+'"><img class="post-thumbnail" src="'+n.BackupImage+'" alt="'+k+'"></a>'}}else{if(n.slideffect===true&&x.length>1){var r=(n.maxImage>x.length?x.length:n.maxImage);for(var h=0,q=r;h<q;h++){l+='<li><a title="'+k+'" href="'+w+'"><img alt="'+k+'" src="'+x[h].src.replace(/\/s[0-9]+(\-c)?\//,"/"+n.thumbnailSize+"/")+'"/></a></li>'}t='<div class="thumbimgslide"><div class="slideximg"><ul class="imgslide">'+l+"</ul></div></div>";setTimeout(function(){jQuery("#"+o+" .slideximg").flexslider({animation:"fade",selector:".imgslide > li",slideshowSpeed:n.slideSpeed})},20)}else{t='<a class="thumbimgx" title="'+k+'" href="'+w+'"><img class="post-thumbnail" src="'+x[0].src.replace(/\/s[0-9]+(\-c)?\//,"/"+n.thumbnailSize+"/")+'" alt="'+k+'"></a>'}}}i=e.replace(/<(.*?)>/g,"").replace(/[\n\r]+/g," ");s.innerHTML=t+'<strong><a class="titlex" href="'+w+'">'+k+"</a></strong><p>"+i.substring(0,n.summaryLength)+"…</p>"};

//Date Format Code
function datenya(a){(function(b){var c={monthName:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]};c=b.extend({},c,a);b(".timestamp-link abbr.published").each(function(){var h,e,f=b(this).attr("title");if(f!=""){var j=f.substring(0,10),k=j.substring(0,4),i=j.substring(5,7),g=j.substring(8,10),d=c.monthName[parseInt(i,10)-1]}h=b(this).parents(".post");e=h.children(".datex");e.removeClass("hidex").addClass("show");b("strong",e).html(g);b("small",e).html(k);b("span",e).html(d)})})(jQuery)};

//]]>
</script>

</head>

<body expr:class='data:blog.pageType' itemscope='' itemtype='http://schema.org/WebPage'>

<div id='outer-wrapper'>

<div id='content-wrapper'>

<div id='main-atas'>

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

<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3>
<b:if cond='data:post.link'>
<a expr:href='data:post.link' expr:title='"Read more to " + data:post.title' rel='bookmark' target='_blank'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url' expr:title='"Read more to " + data:post.title' rel='bookmark' target='_blank'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='description articleBody'>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>

<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<textarea expr:id='"postData-" + data:post.id' style='display:none'><data:post.body/></textarea>
<div class='post-summary' expr:id='"summaryContainer-" + data:post.id'>
<b:if cond='data:post.thumbnailUrl'>
<a class='thumbimgx' expr:href='data:post.url' expr:title='data:post.title'><img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' height='72' itemprop='image' width='72'/></a>
<b:else/>

</b:if>

<b:if cond='data:post.snippet'>
<p><data:post.snippet/></p>
</b:if>
</div>
<div class='post-more-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.jumpText + " " + data:post.title'>
<data:post.jumpText/>
</a>
</div>
<script>createPostSummary("postData-<data:post.id/>","summaryContainer-<data:post.id/>","<data:post.url/>");</script>
</b:if>
</b:if>
<div style='clear:both'/>

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

---------------------------------------------------------------------------------------------------
OR USE WITHOUT THUMBNAIL SIDE WITH 500 PX
IN THIS CODE I REMOVED THESE LINES IN PREVIOUS CODE
slideffect: true, // Define to make image slide
maxImage:5, // Define Maximal Image to image slide
slideSpeed: 3000, // Define Slideshow Speed in milisecond

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

<?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: NEW CODE YOUTUBE VIDEO THUMBNAIL WITH JAVA CODE
NEW CODE YOUTUBE VIDEO THUMBNAIL WITH JAVA CODE
Design by : FBGadgets
URL : http://fbgadgets.blogspot.co.uk/
----------------------------------------------- */
/* Variable definitions
====================

*/

/*-----PostTitleCode ---*/
.post h3 {
background-color:Red;
background-position:initial initial;
background-repeat:initial initial;
border:1px solid #E3E3E3;
border-bottom-left-radius:0;
border-bottom-right-radius:10px;
border-top-left-radius:0;
border-top-right-radius:10px;
box-shadow:#FFFFFF 0 0 0 1px inset;
font-size: 1.2em;
color:#FFFFFF;
font-family:Oswald;
font-size:140%;
font-weight:400;
line-height:1.4em;
margin:0.25em 0 0;
padding:0 0 4px;
margin:0 0 5px;
padding:5px;
}
.post h3 a {
color: Blue;
text-decoration: none;
}

/* YOU NEED TO POST IMAGE CODE WRITE TWO TIMES
BECAUSE IT'S DOES NOT WORK*/
/* WHEN POST OPEN POST IMAGE SHOW BIGGER*/
/*-----PostImageCode ---*/
.post img {
background:#ffffff;
width:100%;
height:auto!important;
}

]]></b:skin>


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

.post {
background: #f1f1f1;
float:left;
height:500px;
width:500px;
}

.post-body img {
background: #f1f1f1;
float:left;
height:500px;
width:500px;
}
.post-body {
font-size: 0px;
}

.post-footer {
line-height: 1.4em;
font-size: 0.9em;
margin:12px;
border-top:1px solid #bbb;
}

.post h3 {
position: relative;
background-color:Black;
height:20px
font-size:20px

}

.post h3 a {
display:block;
color: Red;
text-decoration: none;
}

</style>
</b:if>
</b:if>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<script class='jshilang' type='text/javascript'>

//<![CDATA[
var configSummary = {
thumbnailSize: "s180-c", // Define the post thumbnail size
summaryLength: 200, // Define the summary length

BackupImage: 'http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s72-c/grey.gif' // Backup image if post don't have image
};
//]]>
</script>

</b:if></b:if>

<script class='jshilang' type='text/javascript'>
//<![CDATA[

function createPostSummary(p,o,m){var i,t,x,c,u,g,l="",v=document,n=configSummary,e=v.getElementById(p).value,s=v.getElementById(o),w=m,j=jQuery("#"+p).parents(".post"),k=j.find(".post-title.entry-title a").text();s.innerHTML=e;x=s.getElementsByTagName("img");g=s.getElementsByTagName("iframe");if(x.length===0&&g.length===0){t='<a class="thumbimgx" title="'+k+'" href="'+w+'"><img class="post-thumbnail" src="'+n.BackupImage+'" alt="'+k+'"></a>'}else{if(x.length===0&&g.length>0){c=g[0].src;if(c.indexOf("youtube.com")!=-1||c.indexOf("youtu.be")!=-1){u=c.match(/(\?v=|\&v=|\/\d\/|\/embed\/|\/v\/|\.be\/)([a-zA-Z0-9\-\_]+)/);t='<a class="thumbimgx" title="'+k+'" href="'+w+'"><img class="post-thumbnail" src="http://img.youtube.com/vi/'+u[2]+'/0.jpg" alt="'+k+'"></a>'}else{t='<a class="thumbimgx" title="'+k+'" href="'+w+'"><img class="post-thumbnail" src="'+n.BackupImage+'" alt="'+k+'"></a>'}}else{if(n.slideffect===true&&x.length>1){var r=(n.maxImage>x.length?x.length:n.maxImage);for(var h=0,q=r;h<q;h++){l+='<li><a title="'+k+'" href="'+w+'"><img alt="'+k+'" src="'+x[h].src.replace(/\/s[0-9]+(\-c)?\//,"/"+n.thumbnailSize+"/")+'"/></a></li>'}t='<div class=""><div class=""><ul class="">'+l+"</ul></div></div>";setTimeout(function(){jQuery("#"+o+" .slideximg").flexslider({animation:"fade",selector:".imgslide > li",slideshowSpeed:n.slideSpeed})},20)}else{t='<a class="thumbimgx" title="'+k+'" href="'+w+'"><img class="post-thumbnail" src="'+x[0].src.replace(/\/s[0-9]+(\-c)?\//,"/"+n.thumbnailSize+"/")+'" alt="'+k+'"></a>'}}}i=e.replace(/<(.*?)>/g,"").replace(/[\n\r]+/g," ");s.innerHTML=t+'<strong><a class="titlex" href="'+w+'">'+k+"</a></strong><p>"+i.substring(0,n.summaryLength)+"…</p>"};

//]]>
</script>

</head>

<body expr:class='data:blog.pageType' itemscope='' itemtype='http://schema.org/WebPage'>

<div id='outer-wrapper'>

<div id='content-wrapper'>

<div id='main-atas'>

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

<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3>
<b:if cond='data:post.link'>
<a expr:href='data:post.link' expr:title='"Read more to " + data:post.title' rel='bookmark' target='_blank'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url' expr:title='"Read more to " + data:post.title' rel='bookmark' target='_blank'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='description articleBody'>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>

<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<textarea expr:id='"postData-" + data:post.id' style='display:none'><data:post.body/></textarea>
<div class='post-summary' expr:id='"summaryContainer-" + data:post.id'>
<b:if cond='data:post.thumbnailUrl'>
<a class='thumbimgx' expr:href='data:post.url' expr:title='data:post.title'><img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' height='72' itemprop='image' width='72'/></a>
<b:else/>

</b:if>

<b:if cond='data:post.snippet'>
<p><data:post.snippet/></p>
</b:if>
</div>
<div class='post-more-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.jumpText + " " + data:post.title'>
<data:post.jumpText/>
</a>
</div>
<script>createPostSummary("postData-<data:post.id/>","summaryContainer-<data:post.id/>","<data:post.url/>");</script>
</b:if>
</b:if>
<div style='clear:both'/>

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