Friday, 26 December 2014

BLOG JAVA THUMBNAIL WITH IMAGE

BLOG JAVA THUMBNAIL WITH IMAGE


-----------------------------------------------------------------------------------------------------
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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBIfyBZZkhiL620RzrJVjjGKju7LqYjTZiOlfKiMCd6cGvsStviGygK0BKghI_kb6Bh7r1nCvGwHsgQ2rDMYKxBiFD8i90to-ayQH8_GAT2cOmw5F1kpFY7gJfH1MoavOV4y1_mIqNkwDN/s50/quote.png) no-repeat scroll left 18px transparent;
font-family: Monaco,Georgia,&quot;
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=&quot;1&quot;] th, .post-body table[border=&quot;1&quot;] td, .post-body table[border=&quot;1&quot;] 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=&quot;1&quot;] 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfGxbxTLVnRzCwFTsjpQxdXi4PMQvAbpOft_3WK6SS6B0-jJ_K3hgLP6j0KR9F-SDsHR4m_gBYMMnhjYeAWlpvBu23qrc0pQwFIIBjjt3aJFrjL-3UiEdJWw_9qzcLn9nd-g0JQj0EbXZU/w200-c-h140/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 == &quot;item&quot;'>
<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 != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<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 = &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1F4EIYsyXHO4FI676WSYrTt1eFj6gZvkkp3EJV9JabelIep3E2ovVVxxKTgZfhBZ74DfjhyphenhyphennlyOnuoDlZ9bZMAR8ybfv_YSWooGAaEx4f-rS86mURIEUntGse7TTLS-SbYQFKpiVUmRXY/w300-c-h140/no-image.png&#39;
var no_thumb2 = &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfGxbxTLVnRzCwFTsjpQxdXi4PMQvAbpOft_3WK6SS6B0-jJ_K3hgLP6j0KR9F-SDsHR4m_gBYMMnhjYeAWlpvBu23qrc0pQwFIIBjjt3aJFrjL-3UiEdJWw_9qzcLn9nd-g0JQj0EbXZU/s60-c/no-image.png&#39;
</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 == &quot;false&quot;'>
<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 == &quot;false&quot;'>
&lt;/div&gt;&lt;/div&gt;
</b:if>
</b:if>
<b:if cond='data:post.isDateStart'>
&lt;div class=&quot;date-outer&quot;&gt;
</b:if>
<b:if cond='data:post.isDateStart'>
&lt;div class=&quot;date-posts&quot;&gt;
</b:if>
<div class='post-outer'>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:include data='post' name='comment_picker'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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'>
&lt;/div&gt;&lt;/div&gt;
</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(&quot;annotations&quot;, &quot;1&quot;, {&quot;locale&quot;: &quot;<data:top.languageCode/>&quot;});
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 != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<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(&quot;<data:post.thumbnailUrl/>&quot;,&#39;<data:post.title/>&#39;));
</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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfGxbxTLVnRzCwFTsjpQxdXi4PMQvAbpOft_3WK6SS6B0-jJ_K3hgLP6j0KR9F-SDsHR4m_gBYMMnhjYeAWlpvBu23qrc0pQwFIIBjjt3aJFrjL-3UiEdJWw_9qzcLn9nd-g0JQj0EbXZU/w200-c-h150/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 != &quot;item&quot;'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<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 != &quot;index&quot;'>
<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 != &quot;static_page&quot;'>
<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 &gt; 1'>
<data:post.numComments/>
Comments
</b:if>
</a>
</span>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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 != &quot;true&quot;'>
,
</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 != &quot;item&quot;'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody description'>
<data:post.body/>
<div style='clear:both'/>
</div>
<b:else/>
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody description'>
<div>
<data:post.snippet/>
</div>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<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='&quot;post-body-&quot; + 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 == &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/
----------------------------------------------- */
.post-body blockquote {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBIfyBZZkhiL620RzrJVjjGKju7LqYjTZiOlfKiMCd6cGvsStviGygK0BKghI_kb6Bh7r1nCvGwHsgQ2rDMYKxBiFD8i90to-ayQH8_GAT2cOmw5F1kpFY7gJfH1MoavOV4y1_mIqNkwDN/s50/quote.png) no-repeat scroll left 18px transparent;
font-family: Monaco,Georgia,&quot;
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=&quot;1&quot;] th, .post-body table[border=&quot;1&quot;] td, .post-body table[border=&quot;1&quot;] 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=&quot;1&quot;] 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfGxbxTLVnRzCwFTsjpQxdXi4PMQvAbpOft_3WK6SS6B0-jJ_K3hgLP6j0KR9F-SDsHR4m_gBYMMnhjYeAWlpvBu23qrc0pQwFIIBjjt3aJFrjL-3UiEdJWw_9qzcLn9nd-g0JQj0EbXZU/w200-c-h140/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 != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<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 = &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1F4EIYsyXHO4FI676WSYrTt1eFj6gZvkkp3EJV9JabelIep3E2ovVVxxKTgZfhBZ74DfjhyphenhyphennlyOnuoDlZ9bZMAR8ybfv_YSWooGAaEx4f-rS86mURIEUntGse7TTLS-SbYQFKpiVUmRXY/w300-c-h140/no-image.png&#39;
var no_thumb2 = &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfGxbxTLVnRzCwFTsjpQxdXi4PMQvAbpOft_3WK6SS6B0-jJ_K3hgLP6j0KR9F-SDsHR4m_gBYMMnhjYeAWlpvBu23qrc0pQwFIIBjjt3aJFrjL-3UiEdJWw_9qzcLn9nd-g0JQj0EbXZU/s60-c/no-image.png&#39;
</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 == &quot;static_page&quot;'>
<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 != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>

<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(&quot;<data:post.thumbnailUrl/>&quot;,&#39;<data:post.title/>&#39;));
</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 == &quot;item&quot;'>
<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 != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<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(&quot;<data:post.thumbnailUrl/>&quot;,&#39;<data:post.title/>&#39;));
</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(&quot;<data:post.thumbnailUrl/>&quot;,&#39;<data:post.title/>&#39;));
</script>
</div>
</a>
</b:if>
</b:if>
</b:if>

<a expr:name='data:post.id'/>



<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody description'>
<data:post.body/>
<div style='clear:both'/>
</div>
<b:else/>
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody description'>
<div>
<data:post.snippet/>
</div>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<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='&quot;post-body-&quot; + 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 == &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/
----------------------------------------------- */
.post-thumbnail{
background:#fbfbfb url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOATPtF8al-BjBYNJRPzHPYn-WCoM1tAB9MU5c5DP3QFRlN4n7_fb1U5Lo8R2jorXM1GbvQKpLRfe4LGPvAJTbL25ZGToiZYKZDLAMiWY8oIdslkKG5FtVH9bGw05CF6I5YkPePOKKYz-3/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 == &quot;item&quot;'>
<div class='post'>
<data:post.body/>      
</div>
</b:if>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<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>




Posted by on Friday, 26 December 2014 at 17:00
Labels:

1 comments:

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