POST THUMB NAILS WITH MASK AFFECT

Friday, 12 July 2013

POST THUMB NAILS WITH MASK AFFECT

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

]]></b:skin>

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

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


<b:if cond='data:blog.pageType == "static_page"'>
<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 = "no-float" ;
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(".post-summary").hover(function(){
jQuery(this).find(".preview").animate({top:10}, 'slow');
}, function(){
jQuery(this).find(".preview").animate({top:230}, 'slow');
});
//button animation
jQuery(".yslide").hover(function(){
jQuery(this).find("img").animate({top:-10}, 'slow');
}, function(){
jQuery(this).find("img").animate({top:-20}, 'slow');
});
});
</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'>



<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 == "item"'>
<div class='pager'>
<b:include name='nextprev'/>
</div>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<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 != "item"'>
<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("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:includable>

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

NOW FIND BLOG POST INCLUDABLE B TAG LINE

AND REPLACE BLOW CODE

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

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

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





<b:if cond='data:blog.pageType != "item"'>
<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='"summary" + data:post.id'><data:post.body/>
</div>
</a>
<script type='text/javascript'>getImage("summary<data:post.id/>");
</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 != "true"'>,</b:if>
</b:loop>
</b:if>
</span>
</span>
</span>
</h2>
</div>
</div>
</b:if>



<b:if cond='data:blog.pageType != "index"'>
<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 == "item"'>
<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 != "true"'/>
</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 != "item"'>
<b:if cond='data:post.showBacklinks'>
<a class='comment-link' expr:href='data:post.url + "#links"'><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);

}