-----------------------------------------------------------------------------------------------------
COPY AND PASTE BELOW CODE
------------------------------------------------------------------------------------------------------
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' expr:dir='data:blog.languageDirection' 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:skin><![CDATA[
/*
-----------------------------------------------
Blogger Template Style
Name: BLOGGER JAVA THUMBNAIL WITH IMAGE
Author : http://fbgadgets.blogspot.co.uk/
License: Free Version
----------------------------------------------- */
.post-body blockquote {
background: url(https://lh6.googleusercontent.com/-6UyQr7E0nTU/UVRWwhvPScI/AAAAAAAAFUU/15cIvW74xwg/s50/quote.png) no-repeat scroll left 18px transparent;
font-family: Monaco,Georgia,"
font-size: 100%;
font-style: italic;
line-height: 22px;
margin: 20px 0 30px 20px;
min-height: 60px;
padding: 0 0 0 60px;
}
/* table */
.post-body table[border="1"] th, .post-body table[border="1"] td, .post-body table[border="1"] caption{border:1px solid;padding:.2em .5em;text-align:left;vertical-align:top;
}
.post-body table.tr-caption-container {border:1px solid #e5e5e5;
}
.post-body th{font-weight:bold;
}
.post-body table[border="1"] caption{border:none;font-style:italic;
}
.post-body table{
}
.post-body td, .post-body th{vertical-align:top;text-align:left;font-size:13px;padding:3px 5px;border:1px solid #e5e5e5;
}
.post-body th{background:#f0f0f0;
}
.post-body table.tr-caption-container td {border:none;padding:8px;
}
.post-body table.tr-caption-container, .post-body table.tr-caption-container img, .post-body img {max-width:97%;height:auto;
}
.post-body td.tr-caption {color:#666;font-size:80%;padding:0px 8px 8px !important;
}
img {
max-width:100%;
height:auto;
border:0;
}
table {
max-width:100%;
}
/* outer-wrapper */
#outer-wrapper {
background:#ffffff;
max-width:100%;
margin:0px auto;
box-shadow: 0px 0px 5px rgba(80, 80, 80, 0.1);
overflow:hidden;
}
/* CONTENT WRAPPER */
#content-wrapper {
background-color: transparent;
margin: 0 auto;
padding: 0px 28px 50px;
word-wrap: break-word;
width: 1170px;
}
/* POST WRAPPER */
#post-wrapper {
background:transparent;
float:left;
width:780px;
max-width:780px;
margin:32px 0 10px;
}
.post-container {
padding:20px 0px 0 0;
}
.post {
background:#ffffff;
padding: 60px 0 60px;
border-bottom: 1px solid #eee;
}
.post-body {
color: #8a8a8a;
font-size: 15px;
line-height: 1.86em;
font-weight: 400;
}
h2.post-title, h1.post-title {
transition: .5s;
-webkit-transition: .5s;
-moz-transition: .5s;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 25px;
line-height: 1.52em;
color: #000;
font-weight: 400;
text-decoration: none;
margin-top: 1px;
}
h2.post-title a, h1.post-title a, h2.post-title, h1.post-title {
color:#454C56;
}
h2.post-title a:hover, h1.post-title a:hover {
color:#42C3EA;
}
.img-thumbnail {
background:#fbfbfb url(http://3.bp.blogspot.com/-ltyYh4ysBHI/U04MKlHc6pI/AAAAAAAADQo/PFxXaGZu9PQ/w200-h140-c/no-image.png) no-repeat center center;
position:relative;
float:left;
width:272px;
height:204px;
margin:0 40px 0 0;
overflow: hidden;
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-ms-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
}
.img-thumbnail img {
width:272px;
height:204px;
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-ms-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
}
span.rollover {
}
span.rollover:before {
content:"";
position: absolute;
width:24px;
height:24px;
margin:-12px;
top:50%;
left:50%;
}
span.rollover:hover {
opacity: .7;
-o-transition:all 1s;
-moz-transition:all 1s;
-webkit-transition:all 1s;
}
.post-info {
background: transparent;
margin: 0 0 12px;
color: #666666;
font-size: 14px;
padding: 10px 0;
}
.post-info a {
display:inline-block;
color:#666666;
}
.post-info i {
color: #42C3EA;
margin-right: 5px;
font-size: 16px;
font-weight: 300;
}
.img-thumbnail:hover img {
-webkit-transform: scale(1.45);
-moz-transform: scale(1.45);
-ms-transform: scale(1.45);
-o-transform: scale(1.45);
transform: scale(1.45);
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-ms-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
}
span.rollover {
background: rgba(66,195,234,.75);
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
display: block;
width: 100%;
height: 100%;
background: rgba(66,195,234,0.75);
opacity: 0;
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-ms-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
}
*/]]></b:skin>
<style type='text/css'></style>
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
h2.post-title a, h1.post-title a, h2.post-title, h1.post-title {
color:#383838;
font-size:29px;
}
#post-wrapper {
background: transparent;
float: left;
width: 780px;
max-width: 780px;
margin: 0px 0 10px;
}
.post,#content-wrapper { border-bottom: none;*
}
.post-info {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
-ms-border-radius: 4px;
-khtml-border-radius: 4px;
border-radius: 4px;
padding: 10px 12px 20px;
margin: 0 0 20px;
}
</style>
</b:if>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
var numposts = 1;
var numposts2 = 4;
var numposts3 = 5;
var showpostthumbnails = true;
var showpostthumbnails2 = true;
var displaymore = true;
var displaymore2 = false;
var showcommentnum = true;
var showcommentnum2 = true;
var showpostdate = true;
var showpostdate2 = true;
var showpostsummary = true;
var numchars = 150;
var thumb_width = 300;
var thumb_height = 210;
var thumb_width2 = 70;
var thumb_height2 = 70;
var no_thumb = 'http://1.bp.blogspot.com/-7vDs5hMaDho/U268E2ecF4I/AAAAAAAADY8/RBHVTTuJrxc/w300-h140-c/no-image.png'
var no_thumb2 = 'http://3.bp.blogspot.com/-ltyYh4ysBHI/U04MKlHc6pI/AAAAAAAADQo/PFxXaGZu9PQ/s60-c/no-image.png'
</script>
<script type='text/javascript'>
//<![CDATA[
function bp_thumbnail_resize(image_url,post_title){
var image_width=317;
var image_height=210;
image_tag='<img width="'+image_width+'" height="'+image_height+'" src="'+image_url.replace('/s72-c/','/w'+image_width+'-h'+image_height+'-c/')+'" alt="'+post_title.replace(/"/g,"")+'" title="'+post_title.replace(/"/g,"")+'"/>';
if(post_title!="")return image_tag;
else return""
}
$(document).ready(function(){
$('#mycontent').html("Created By <a href='http://style4urban.blogspot.co.uk/' rel='dofollow' target='_blank' title='Blogger Templates'>Sora Templates</a> and <a href='http://style4urban.blogspot.co.uk/' rel='dofollow' target='_blank' title='Free Blogger Templates'>My Blogger Themes</a>");
setInterval(function(){
if(!$('#mycontent:visible').length)window.location.href='http://style4urban.blogspot.co.uk/'
}
,3000)
}
);
//]]>
</script>
</b:if>
</b:if>
</head>
<body>
<div id='outer-wrapper'>
<div id='content-wrapper'>
<div class='clear'/>
<div id='mywrapper'>
<div id='post-wrapper'>
<div class='post-container'>
<div class='clear'/>
<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'>
<b:if cond='data:mobile == "false"'>
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<data:defaultAdStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.isDateStart'>
<b:if cond='data:post.isFirstPost == "false"'>
</div></div>
</b:if>
</b:if>
<b:if cond='data:post.isDateStart'>
<div class="date-outer">
</b:if>
<b:if cond='data:post.isDateStart'>
<div class="date-posts">
</b:if>
<div class='post-outer'>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == "static_page"'>
<b:include data='post' name='comment_picker'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comment_picker'/>
</b:if>
</div>
<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:loop>
<b:if cond='data:numPosts != 0'>
</div></div>
</b:if>
<data:adEnd/>
</div>
<b:if cond='data:top.showStars'>
<script src='//www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>
google.load("annotations", "1", {"locale": "<data:top.languageCode/>"});
function initialize() {
google.annotations.setApplicationId(<data:top.blogspotReviews/>);
google.annotations.createAll();
google.annotations.fetch();
}
google.setOnLoadCallback(initialize);
</script>
</b:if>
<b:else/>
<b:include name='mobile-main'/>
</b:if>
<b:if cond='data:top.showDummy'>
<data:top.dummyBootstrap/>
</b:if>
</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 hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
<b:if cond='data:post.firstImageUrl'>
<meta expr:content='data:post.firstImageUrl' itemprop='image'/>
</b:if>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:post.thumbnailUrl'>
<a expr:href='data:post.url'>
<div class='img-thumbnail'>
<span class='rollover'/>
<script type='text/javascript'>
document.write(bp_thumbnail_resize("<data:post.thumbnailUrl/>",'<data:post.title/>'));
</script>
</div>
</a>
<b:else/>
<b:if cond='data:post.firstImageUrl'>
<a expr:href='data:post.url'>
<div class='img-thumbnail'>
<span class='rollover'/>
<img expr:alt='data:post.title' expr:src='data:post.firstImageUrl' expr:title='data:post.title'/>
</div>
</a>
<b:else/>
<a expr:href='data:post.url'>
<div class='img-thumbnail'>
<span class='rollover'/>
<img expr:alt='data:post.title' expr:title='data:post.title' src='http://3.bp.blogspot.com/-ltyYh4ysBHI/U04MKlHc6pI/AAAAAAAADQo/PFxXaGZu9PQ/w200-h150-c/no-image.png'/>
</div>
</a>
</b:if>
</b:if>
</b:if>
</b:if>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType == "static_page"'>
<h1 class='post-title entry-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'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'>
<data:post.title/>
</a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h1>
<b:else/>
<h2 class='post-title entry-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'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'>
<data:post.title/>
</a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</b:if>
<b:else/>
<h1 class='post-title entry-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'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'>
<data:post.title/>
</a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h1>
</b:if>
</b:if>
<b:if cond='data:blog.pageType != "index"'>
<div class='post-info'>
<b:if cond='data:top.showAuthor'>
<b:if cond='data:post.authorProfileUrl'>
<span class='author-info'>
<i class='fa fa-user'/>
<span class='vcard'>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
<a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
<span itemprop='name'>
<data:post.author/>
</span>
</a>
</span>
</span>
</span>
<b:else/>
<span class='author-info'>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<span itemprop='name'>
<data:post.author/>
</span>
</span>
</span>
</b:if>
</b:if>
<b:if cond='data:top.showTimestamp'>
<b:if cond='data:post.url'>
<meta expr:content='data:post.canonicalUrl' itemprop='url'/>
<span class='time-info'>
<i class='fa fa-clock-o'/>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'>
<abbr class='published updated' expr:title='data:post.timestampISO8601' itemprop='datePublished'>
<data:post.timestamp/>
</abbr>
</a>
</span>
</b:if>
</b:if>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:post.allowComments'>
<span class='comment-info'>
<i class='fa fa-comment-o'/>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<b:if cond='data:post.numComments == 0'>
Add Comment
</b:if>
<b:if cond='data:post.numComments == 1'>
1 Comment
</b:if>
<b:if cond='data:post.numComments > 1'>
<data:post.numComments/>
Comments
</b:if>
</a>
</span>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.labels'>
<span class='label-info'>
<i class='fa fa-tags'/>
<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>
</span>
</b:if>
</b:if>
<b:include data='post' name='postQuickEdit'/>
</div></b:if>
<div class='post-header'>
<div class='post-header-line-1'/>
</div>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='articleBody description'>
<data:post.body/>
<div style='clear:both'/>
</div>
<b:else/>
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='articleBody description'>
<div>
<data:post.snippet/>
</div>
<b:if cond='data:blog.pageType == "index"'>
<div class='post-info'>
<b:include data='post' name='postQuickEdit'/>
</div></b:if>
<div style='clear:both'/>
</div>
</b:if>
<b:else/>
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='description articleBody'>
<data:post.body/>
</div>
</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>
</div>
</div>
<div class='clear'/>
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
</div>
</body>
</html>
-----------------------------------------------------------------------------------------------------------------------
OR USE THIS CODE HELP OF BELOW LINK
http://fbgadgets.blogspot.co.uk/2014/01/blog-post-thumbnail-withlink-and-java.html
YOU CAN REMOVE THIS CODE
<div class='entry'>
<p><data:post.snippet/> [...]</p>
<div class='clear'/>
</div>
-----------------------------------------------------------------------------------------------------------------------
<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/
----------------------------------------------- */
.post-body blockquote {
background: url(https://lh6.googleusercontent.com/-6UyQr7E0nTU/UVRWwhvPScI/AAAAAAAAFUU/15cIvW74xwg/s50/quote.png) no-repeat scroll left 18px transparent;
font-family: Monaco,Georgia,"
font-size: 100%;
font-style: italic;
line-height: 22px;
margin: 20px 0 30px 20px;
min-height: 60px;
padding: 0 0 0 60px;
}
/* table */
.post-body table[border="1"] th, .post-body table[border="1"] td, .post-body table[border="1"] caption{border:1px solid;padding:.2em .5em;text-align:left;vertical-align:top;
}
.post-body table.tr-caption-container {border:1px solid #e5e5e5;
}
.post-body th{font-weight:bold;
}
.post-body table[border="1"] caption{border:none;font-style:italic;
}
.post-body table{
}
.post-body td, .post-body th{vertical-align:top;text-align:left;font-size:13px;padding:3px 5px;border:1px solid #e5e5e5;
}
.post-body th{background:#f0f0f0;
}
.post-body table.tr-caption-container td {border:none;padding:8px;
}
.post-body table.tr-caption-container, .post-body table.tr-caption-container img, .post-body img {max-width:97%;height:auto;
}
.post-body td.tr-caption {color:#666;font-size:80%;padding:0px 8px 8px !important;
}
img {
max-width:100%;
height:auto;
border:0;
}
table {
max-width:100%;
}
/* outer-wrapper */
#outer-wrapper {
background:#ffffff;
max-width:100%;
margin:0px auto;
box-shadow: 0px 0px 5px rgba(80, 80, 80, 0.1);
overflow:hidden;
}
/* CONTENT WRAPPER */
#content-wrapper {
background-color: transparent;
margin: 0 auto;
padding: 0px 28px 50px;
word-wrap: break-word;
width: 1170px;
}
/* POST WRAPPER */
#post-wrapper {
background:transparent;
float:left;
width:780px;
max-width:780px;
margin:32px 0 10px;
}
.post-container {
padding:20px 0px 0 0;
}
.post {
background:#ffffff;
padding: 60px 0 60px;
border-bottom: 1px solid #eee;
}
.post-body {
color: #8a8a8a;
font-size: 15px;
line-height: 1.86em;
font-weight: 400;
}
h2.post-title, h1.post-title {
transition: .5s;
-webkit-transition: .5s;
-moz-transition: .5s;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 25px;
line-height: 1.52em;
color: #000;
font-weight: 400;
text-decoration: none;
margin-top: 1px;
}
h2.post-title a, h1.post-title a, h2.post-title, h1.post-title {
color:#454C56;
}
h2.post-title a:hover, h1.post-title a:hover {
color:#42C3EA;
}
.img-thumbnail {
background:#fbfbfb url(http://3.bp.blogspot.com/-ltyYh4ysBHI/U04MKlHc6pI/AAAAAAAADQo/PFxXaGZu9PQ/w200-h140-c/no-image.png) no-repeat center center;
position:relative;
float:left;
width:272px;
height:204px;
margin:0 40px 0 0;
overflow: hidden;
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-ms-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
}
.img-thumbnail img {
width:272px;
height:204px;
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-ms-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
}
span.rollover {
}
span.rollover:before {
content:"";
position: absolute;
width:24px;
height:24px;
margin:-12px;
top:50%;
left:50%;
}
span.rollover:hover {
opacity: .7;
-o-transition:all 1s;
-moz-transition:all 1s;
-webkit-transition:all 1s;
}
.post-info {
background: transparent;
margin: 0 0 12px;
color: #666666;
font-size: 14px;
padding: 10px 0;
}
.post-info a {
display:inline-block;
color:#666666;
}
.post-info i {
color: #42C3EA;
margin-right: 5px;
font-size: 16px;
font-weight: 300;
}
.img-thumbnail:hover img {
-webkit-transform: scale(1.45);
-moz-transform: scale(1.45);
-ms-transform: scale(1.45);
-o-transform: scale(1.45);
transform: scale(1.45);
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-ms-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
}
span.rollover {
background: rgba(66,195,234,.75);
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
display: block;
width: 100%;
height: 100%;
background: rgba(66,195,234,0.75);
opacity: 0;
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-ms-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
}
]]></b:skin>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
var numposts = 1;
var numposts2 = 4;
var numposts3 = 5;
var showpostthumbnails = true;
var showpostthumbnails2 = true;
var displaymore = true;
var displaymore2 = false;
var showcommentnum = true;
var showcommentnum2 = true;
var showpostdate = true;
var showpostdate2 = true;
var showpostsummary = true;
var numchars = 150;
var thumb_width = 300;
var thumb_height = 210;
var thumb_width2 = 70;
var thumb_height2 = 70;
var no_thumb = 'http://1.bp.blogspot.com/-7vDs5hMaDho/U268E2ecF4I/AAAAAAAADY8/RBHVTTuJrxc/w300-h140-c/no-image.png'
var no_thumb2 = 'http://3.bp.blogspot.com/-ltyYh4ysBHI/U04MKlHc6pI/AAAAAAAADQo/PFxXaGZu9PQ/s60-c/no-image.png'
</script>
<script type='text/javascript'>
//<![CDATA[
function bp_thumbnail_resize(image_url,post_title){
var image_width=317;
var image_height=210;
image_tag='<img width="'+image_width+'" height="'+image_height+'" src="'+image_url.replace('/s72-c/','/w'+image_width+'-h'+image_height+'-c/')+'" alt="'+post_title.replace(/"/g,"")+'" title="'+post_title.replace(/"/g,"")+'"/>';
if(post_title!="")return image_tag;
else return""
}
$(document).ready(function(){
$('#mycontent').html("Created By <a href='http://style4urban.blogspot.co.uk/' rel='dofollow' target='_blank' title='Blogger Templates'>Sora Templates</a> and <a href='http://style4urban.blogspot.co.uk/' rel='dofollow' target='_blank' title='Free Blogger Templates'>My Blogger Themes</a>");
setInterval(function(){
if(!$('#mycontent:visible').length)window.location.href='http://style4urban.blogspot.co.uk/'
}
,3000)
}
);
//]]>
</script>
</b:if>
</b:if>
</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>
<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>
<b:includable id='feedLinks'></b:includable>
<b:includable id='feedLinksBody' var='links'></b:includable>
<b:includable id='iframe_comments' var='post'></b:includable>
<b:includable id='mobile-index-post' var='post'></b:includable>
<b:includable id='mobile-main' var='top'></b:includable>
<b:includable id='mobile-nextprev'></b:includable>
<b:includable id='mobile-post' var='post'></b:includable>
<b:includable id='nextprev'></b:includable>
<b:includable id='post' var='post'>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='post' id='post'>
<div class='title'>
<h2><b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</div>
<div class='entry'>
<p><data:post.body/></p>
<div class='clear'/>
</div>
</div>
<div class='clear'/>
</b:if>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<div class='post' id='post'>
<div class='post-image clearfix'>
<div class='imagebox'>
<a expr:href='data:post.url'>
<div class='img-thumbnail'>
<span class='rollover'/>
<script type='text/javascript'>
document.write(bp_thumbnail_resize("<data:post.thumbnailUrl/>",'<data:post.title/>'));
</script>
</div>
</a></div>
</div>
<div class='title'>
<h2><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></h2>
</div>
<div class='entry'>
<p><data:post.snippet/> [...]</p>
<div class='clear'/>
</div>
</div>
</b:if></b:if>
<b:if cond='data:blog.pageType == "item"'>
<div class='post' id='post'>
<div class='title'>
<h2><b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</div>
<div class='entry'>
<p><data:post.body/></p>
<div class='clear'/>
</div>
</div>
<div class='clear'/>
</b:if>
</b:includable>
<b:includable id='postQuickEdit' var='post'></b:includable>
<b:includable id='shareButtons' var='post'></b:includable>
<b:includable id='status-message'></b:includable>
<b:includable id='threaded-comment-form' var='post'></b:includable>
<b:includable id='threaded_comment_js' var='post'></b:includable>
<b:includable id='threaded_comments' var='post'></b:includable>
</b:widget>
</b:section>
</div>
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
</div>
</body>
</html>
----------------------------------------------------------------------------------------------------------
BRIEF POST HTML CODE
------------------------------------------------------------------------------------------------------------
<b:includable id='post' var='post'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:post.thumbnailUrl'>
<a expr:href='data:post.url'>
<div class='img-thumbnail'>
<span class='rollover'/>
<a expr:href='data:post.url'>
<script type='text/javascript'>
document.write(bp_thumbnail_resize("<data:post.thumbnailUrl/>",'<data:post.title/>'));
</script></a>
</div>
</a>
<b:else/>
<a expr:href='data:post.url'>
<div class='img-thumbnail'>
<span class='rollover'/>
<script type='text/javascript'>
document.write(bp_thumbnail_resize("<data:post.thumbnailUrl/>",'<data:post.title/>'));
</script>
</div>
</a>
</b:if>
</b:if>
</b:if>
<a expr:name='data:post.id'/>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='articleBody description'>
<data:post.body/>
<div style='clear:both'/>
</div>
<b:else/>
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='articleBody description'>
<div>
<data:post.snippet/>
</div>
<b:if cond='data:blog.pageType == "index"'>
<div class='post-info'>
<b:include data='post' name='postQuickEdit'/>
</div></b:if>
<div style='clear:both'/>
</div>
</b:if>
<b:else/>
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='description articleBody'>
<data:post.body/>
</div>
</b:if>
</b:includable>
=====================================================================
OR USE THIS CODE EMPTY OR VIDEO POST CHANGE WITH CSS CODE
-----------------------------------------------------------------------------------------------------------
http://www.w3schools.com/css/tryit.asp?filename=trycss_float_elements
http://fbgadgets.blogspot.co.uk/2013/07/CommentFormWithoutTemplate.html
-------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<style>
.thumbnail {
float: left;
width: 110px;
height: 90px;
margin: 5px;
}
</style>
</head>
<body>
<h3>Image Gallery</h3>
<p>Try to resize the browser-window to see what happens when the images do not have enough room.</p>
<img class="thumbnail" src="klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="klematis4_small.jpg" width="120" height="90">
<img class="thumbnail" src="klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="klematis4_small.jpg" width="120" height="90">
</body>
</html>
=====================================================================
USE UPPER CSS METHOD IN BLOG
====================================================================
<?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/
----------------------------------------------- */
.post-thumbnail{
background:#fbfbfb url(http://4.bp.blogspot.com/-W7kVQPVSiSI/VKg5LGj98OI/AAAAAAABWv4/-SAyOvvhptQ/s1600/NoImage200x140.png) no-repeat center center;
position:relative;
float:left;
width:200px;
height:140px;
margin:0 40px 0 0;
overflow: hidden;
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-ms-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
}
]]></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>
<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'>
<!-- WHEN POST OPEN -->
<b:if cond='data:blog.pageType == "item"'>
<div class='post'>
<data:post.body/>
</div>
</b:if>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.thumbnailUrl'>
<a expr:href='data:post.url'><img alt='' class='post-thumbnail' expr:src='data:post.thumbnailUrl'/></a>
<b:else/>
<a expr:href='data:post.url'><img alt='' class='post-thumbnail' src=''/></a>
</b:if></b:if></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>