First Delete Your Post Css Code  Before B Skin closed Tag Then This Post Thumbnail Css Code





--------------------------------------------------------------------------------------------------
Find B Skin Tag : And Replace Your B Skin  With Below Css code
----------------------------------------------------------------------------------------------------

.mask {
     width: 100%;
     margin: 0;
     padding: 0;
     border-top: 20px solid #2f2f2f;
     background: #222;
     }

.mask2 {
     width: 960px;
     margin: 0 auto;
     padding: 0;
     background: #222;
     }


/* thumb posts
----------------------------------------------*/
.post-summary {
float: left;
overflow: hidden;
margin: 10px;
width: 300px;
height: 230px;
}
.post-summary h2 {
display: block;
position: relative;
height: 230px;
margin: 0;
padding: 0;
}
.post-summary a.thumbview {
display: block;
position: relative;
overflow: hidden;
height: 230px;
padding: 0;
color: #333;
line-height: 1.2;
border: none;
}
.post-summary a:hover {
text-decoration: none;
}
.post-summary img {
position: absolute;
top: 0px;
left: 0px;
width: 280px;
height: 210px;
z-index: 2;
border: 10px solid #dddddd;
}
.post-summary span.preview {
position: absolute;
top: 230px;
left: 0px;
z-index: 3;
width: 280px;
height: 210px;
border-right: 10px solid #dddddd;
border-bottom: 10px solid #dddddd;
border-left: 10px solid #dddddd;
background: url(http://3.bp.blogspot.com/-94oen-enR5U/Td-n0OEBlhI/AAAAAAAABbo/YlgVB-ObpRg/s1600/texture70-body-bg.png);
}
.post-summary span.title {
position: absolute;
top: 0;
left: 0;
padding: 10px 20px;
line-height: 1;
}
.post-summary span.linkview {
position: absolute;
top: 100px;
left: 65px;
padding: 10px 20px;
line-height: 1.2;
}
.post-summary span.linkview a {
color: #222;
}
.post-summary span.tag {
position: absolute;
top: 165px;
left: 0;
padding: 0px 20px;
font-size: 12px;
color: #dddddd;
}
.post-summary span.tag a {
margin: 0;
padding: 0 0 0 5px;
font-size: 12px;
border: none;
text-shadow: none;
color: #dddddd;
background: transparent;
}
/* normal posts
----------------------------------------------*/
.post {
width: 960px;
margin: 0 auto;
padding: 0;
}
.post h3.entry-title {
margin: 0;
padding: 0;
font: normal bold 250% 'Raleway', Sans-serif;
line-height: 1.1;
}
.post h3.entry-title a, .post h3.entry-title a:visited {
text-decoration: none;
color: #bbbbbb;
}
.post h3.entry-title strong, .post h3.entry-title a:hover {
color: #ffffff;
}
.post ul, .post ol {
margin: 0 0 1em 1em;
}
.post ul li {
padding: .3em 0 0;
}
.post ol li {
margin: 0 0 0 .3em;
padding: .3em 0 0;
}
.post-body {
width: 600px;
margin: 0 0 .75em;
}
.post .post-body blockquote {
margin: .3em 0;
padding: 20px 0 10px 20px;
font-style: italic;
}
.post .post-body blockquote:before {
padding: 0 .4em 0 0;
content: url(http://4.bp.blogspot.com/-1zx7JIgGuUc/Td--HFUyzaI/AAAAAAAABcI/mwP5eY9A9rM/s1600/quote-open.png);
}
.post .post-body blockquote:after {
padding: 0 0 0 .4em;
content: url(http://1.bp.blogspot.com/-u_lme-oyeGg/Td--HdpWf8I/AAAAAAAABcQ/YZkMp-WQhhM/s1600/quote-close.png);
}
.post-body img {
float: left;
width: auto;
height: auto;
margin: 0 0 20px;
border: 10px solid #dddddd;
}
.post-body a {
border-bottom: 1px dotted #999;
}
.post-body .separator a {
border: none;
}
.post-body .post-header {
margin: 0 0 20px;
}
.post-body .post-header a {
border: none;
}
.post-body .post-footer {
margin: 1.5em 0;
line-height: 1.4;
}
.post-body .post-footer a {
border: none;
}
.post-labels a {
margin: 0 0 0 10px;
padding: 2px 15px;
text-decoration:none;
font-weight: bold;
text-shadow: 0px 1px 2px #444;
color: #111;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background-color: #333;
}
/* misc
----------------------------------------------*/
.post table {
margin: .7em 0;
border: 1px solid #2f2f2f;
}
.post table td, table th {
padding: .3em .7em;
text-align: center;
border: 1px solid #2f2f2f;
}
.post table th {
text-transform: uppercase;
font-weight: normal;
background: #2a2a2a;
}
.tr-caption-container img {
border: none;
padding: 0;
}

]]></b:skin>
-------------------------------------------------------------------------------------------------------
FIND HEAD CLOSED TAG AND ADD BELOW CODE  BEFORE HEAD TAG OR
REPLACE YOUR CLOSED HEAD TAG  WITH BELOW CODE

</head>
--------------------------------------------------------------------------------------------------------

<!--Static Page Reset-->
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style type='text/CSS'>
.post .post-button, .post-summary, .post-author, .post-timestamp, .post-comment-link { display:none; }
</style>
</b:if>

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

<script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ;
 img_thumb_height = 210;
 img_thumb_width = 280;
 </script>


 <script type='text/javascript'>
 //<![CDATA[
 function removeHtmlTag(strx,chop){
 if(strx.indexOf("<")!=-1)
 {
 var s = strx.split("<");
 for(var i=0;i<s.length;i++){
 if(s[i].indexOf(">")!=-1){
 s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
 }
 }
 strx = s.join("");
 }
 chop = (chop < strx.length-1) ? chop : strx.length-2;
 while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
 strx = strx.substring(0,chop-1);
 return strx+'...';
 }

 function createSummaryAndThumb(pID){
 var div = document.getElementById(pID);
 var imgtag = "";
 var img = div.getElementsByTagName("img");
 var summ = summary_noimg;
 if(img.length>=1) {
 imgtag = '<span style="float:left;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
 summ = summary_img;
 }

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

<script type='text/javascript'>
jQuery(function(){
//thumbview animation
        jQuery(&quot;.post-summary&quot;).hover(function(){
             jQuery(this).find(&quot;.preview&quot;).animate({top:10}, &#39;slow&#39;);
        }, function(){
             jQuery(this).find(&quot;.preview&quot;).animate({top:230}, &#39;slow&#39;);
        });
//button animation
        jQuery(&quot;.yslide&quot;).hover(function(){
             jQuery(this).find(&quot;img&quot;).animate({top:-10}, &#39;slow&#39;);
        }, function(){
             jQuery(this).find(&quot;img&quot;).animate({top:-20}, &#39;slow&#39;);
        });
});
</script>

</head>

---------------------------------------------------------------------------------------------------
NOW FIND BLOG POST SECTION AREA AND FIND THIS B INCLUDABLE
MAIN LINE FIND BELOW LINE AND REPLACE THIS LINE WITH BELOW CODE

<b:includable id='main' var='top'></b:includable>

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

<b:includable id='main' var='top'>

<!-- CHANGE B INCLUDABLE
SEE UPPER TAG LINE MAIN CODE-->


<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<data:adStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:include data='post' name='post'/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='pager'>
<b:include name='nextprev'/>
</div>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='comments'/>
</b:if>
<b:if cond='data:post.includeAd'>
<data:adEnd/>
<data:adCode/>
<data:adStart/>
</b:if>
<b:if cond='data:post.trackLatency'>
<data:post.latencyJs/>
</b:if>
</b:loop>
<data:adEnd/>
</div>
<div class='clear'/>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div class='pager'>
<b:include name='nextprev'/>
</div>
</b:if>
<b:if cond='data:top.showStars'>
<script src='//www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>/*<![CDATA[*/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:includable>


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

<!-- BLOG POST CODE STARTS HERE AFTER B
INCLUDABLE POST TAG SEE BELOW DATA TAG-->

<!-- THERE ARE TWO DATA BLOG PAGE TYPE
HIDE FULL POST ON HOME PAGE SEE BELOW-->

<b:if cond='data:blog.pageType != &quot;item&quot;'>      
<div class='mask2'>
<div class='post-summary' id='post'>
<h2>
<a class='thumbview' expr:href='data:post.url'>
<a expr:href='data:post.url'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/>
</div>
</a>
<script type='text/javascript'>getImage(&quot;summary<data:post.id/>&quot;);
</script>
</a>
<span class='preview'>
<span class='title'><a expr:href='data:post.url'><data:post.title/></a>
</span>
<span class='linkview' style='display:block; background:#eee; border:1px solid #999;'><a expr:href='data:post.url'>Full View</a>
</span>
<span class='tag'>
<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 != &quot;true&quot;'>,</b:if>
</b:loop>
</b:if>
</span>
</span>
</span>
</h2>
</div>
</div>
</b:if>


<!-- THERE ARE TWO DATA BLOG PAGE TYPE
HIDE FULL POST ON HOME PAGE SEE BELOW-->


<b:if cond='data:blog.pageType != &quot;index&quot;'>
<div class='post hentry'>
<a expr:name='data:post.id'/>
<div class='post-body entry-content'>
<div class='post-header'>
<b:if cond='data:post.title'>
<h3 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>
</h3>
</b:if>
</div>
<data:post.body/>
<div style='clear:both'/>
</div>
<div class='clear'/>
<div class='post-footer'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='post-footer-line-1'>
<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 != &quot;true&quot;'/>
</b:loop>
</b:if>
</span>
</div>
<div class='post-footer-line-2'>
<span class='post-backlinks post-comment-link'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.showBacklinks'>
<a class='comment-link' expr:href='data:post.url + &quot;#links&quot;'><data:top.backlinkLabel/></a>
</b:if>
</b:if>
</span>
<span class='post-icons'>
<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<img alt='' class='icon-action' height='13' src='http://www.blogger.com/img/icon18_email.gif' width='18'/>
</a>
</span>
</b:if>
<b:include data='post' name='postQuickEdit'/>
</span>
</div>
<div class='post-footer-line-3'/>
<div class='clear'/>
</b:if>
</div>
</div>
</b:if>

</b:includable>
-----------------------------------------------------------------------------------------------------

WE USE TWO IMAGES IN THIS TUTORIAL YOU CAN CHANGE BOTH IMAGES
------------------------------------------------------------------------------------------------------



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

------------------------------------------------------------------------------------------
CHANGE POST TITLE COLOUR WHEN YOU OPEN POST

REPLACE GREEN CODE WITH RED CODE
-----------------------------------------------------------------------------------------------
.post h3.entry-title {
margin: 0;
padding: 0;
font: normal bold 250% 'Raleway', Sans-serif;
line-height: 1.1;
}
.post h3.entry-title a, .post h3.entry-title a:visited {
text-decoration: none;
color: #bbbbbb;
}
.post h3.entry-title strong, .post h3.entry-title a:hover {
color: #ffffff;
}
------------------------------------------------------------------------------------

h3.entry-title {
background:#9B1212 ;
-moz-border-radius:0px 0px 20px 20px;
padding:10px 15px 15px 15px;
font: normal normal 22px Georgia, Utopia, 'Palatino Linotype', Palatino, serif;;
color:#ffffff;
width:auto;
}
h3.entry-title a, h3.entry-titlea:visited, h3.entry-title strong {
color:#ffffff;
text-decoration:none;
}
h3.entry-title strong, h3.entry-title a:hover {
color:#ffffff;
text-decoration:none;
}

---------------------------------------------------------------------------------------------------------
POST THUMB NAIL WITHOUT JAVA CODE 
-------------------------------------------------------------------------------------------

/* MASK */

.mask2 {
width: 960px;
}

/* POST THUMBNAIL CODE */
.post-summary {
float: left;
overflow: hidden;
margin: 10px;
width: 300px;
height: 230px;
}
.post-summary h2 {
display: block;
position: relative;
height: 230px;
margin: 0;
padding: 0;
}

.post-summary img {
position: absolute;
top: 0px;
left: 0px;
margin-top: 2px;
height: 200px;
padding: 5px;
width: 200px;
border: 1px solid #fff;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
box-shadow: 0 1px 2px rgba(0, 0, 0, .4);


}


<b:includable id='post' var='post'>
<div class='mask2'>
<div class='post-summary' id='post'>
<h2>
<a class='thumbview' expr:href='data:post.url'>
<a expr:href='data:post.url'>
<data:post.body/>
</a></a>
</h2>
</div></div>
</b:includable>