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
.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 == "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>
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'>
<!-- 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 == "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>
<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 != "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>
<!-- THERE ARE TWO DATA BLOG PAGE TYPE
HIDE FULL POST ON HOME PAGE SEE BELOW-->
<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);
}
<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>
--------------------------------------------------------------------------------------------------
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>
--------------------------------------------------------------------------------------------------------
<!--Static Page Reset-->
<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'>
<!-- 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 == "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'>
<!-- 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 != "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>
<!-- THERE ARE TWO DATA BLOG PAGE TYPE
HIDE FULL POST ON HOME PAGE SEE BELOW-->
<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);
}
--------------------------------------------------------------------------------------------
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'>
<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>
Related movie you might like to see :

IMPORT SQL CSV FILE ON PHPMYADMIN

Direct Link Generator CODE

Direct Links to your Files on Googl...

PHP CONTACT FORM WITH CAPTCHA

ON LINE JAVA LIBRARY

GOOGLE PROJECT HOSTING

PRESTASHOP THUMBNAIL WITH HOVER EFF...

GOOGLE FILTER BUTTON IN IMAGE SEARC...

BODY JS FILE LINK IN MAGENTO

INTENSO MAGENTO QUICK VIEW BUTTON

Magento Hello World Module (Extensi...

FEATURE POST WIDGET IN BLOG
?
+
X
Recommended for you
Loading..
Related Post for POST THUMB NAILS WITH MASK AFFECT
BLOG HOSTING HELP DIRECT LINKS TO YOUR FILES ON GOOGLE DRIVE - YouTube ▶ 5:17 https://www.youtube.com/watch?v=ehue47G5ayc 14 hours ago - Uploaded by SAVE…
RENAME CACHE FOLDER IN PRESTASHOP ----------------------------------------------------------------------------------------------------------------- 0) BEFORE INSTALLATION CHANGE FOLDER NAME cache To CASH 1) G…
BLOG FILE HOSTING GOOGLE PROJECT WITH TORTOISE SVN SOFTWARE EDIT HTML PAGE IN GOOGLE - YouTube ▶ 4:19 https://www.youtube.com/watch?v=Q4yfMqPFSYE 16 mins ago - Uploaded by SAVE MONEY http://fbgadgets.blogspot.co.uk/2016/09/…
JAVA FILE MAKE & SAVE IN NOTE PAD CLICK AND OPEN NOTE PAD IN WNDOW MENU BAR -------------------------------------------------------------------------------------------------------- COPY…
RENAME CONTROLLERS FOLDER IN PRESTASHOP ------------------------------------------------------------------------------------------------------------- 0) BEFORE INSTALLATION CHANGE FOLDER NAME contr…
IMPORT SQL CSV FILE ON PHPMYADMIN --------------------------------------------------------------------------------------------------- READ MORE: ----------------------------------------------------------------…
Recommended Post Slide out for Blogger ---------------------------------------------------------------------------------------------------- RECOMMENDED POST SLIDE OUT FOR BLOG - YouTube ▶ 2:50 https:/…
BlogPagerWithJavaCode BLOG PAGER - YouTube ▶ 6:22 https://www.youtube.com/watch?v=u54p0R8tS30 4 mins ago - Uploaded by SAVE MONEY BLOG PAGER ... how to create paging,pagination in …
RENAME PDF FOLDER IN PRESTASHOP ----------------------------------------------------------------------------------------------------------------- 0) BEFORE INSTALLATION CHANGE FOLDER NAME pdf To PAK 1) …
Magento Hello World Module (Extension) -------------------------------------------------------------------------------------------------------------- READ MORE: http://inchoo.net/magento/programming-magento/magento-…
INTENSO MAGENTO QUICK VIEW BUTTON ---------------------------------------------------------------------------------------------------------------- 6:01 REMOVE QUICK VIEW BUTTON IN MAGE…
DEFAULT BOOT STRAP WORD IN 13 FILES PRESTASHOP ------------------------------------------------------------------------------------------------------------------ 1.C:\wamp\www\PrestaShop\README.md 2.&nbs…
RENAME CORE FOLDER IN PRESTASHOP ----------------------------------------------------------------------------------------------------------------- 0) BEFORE INSTALLATION CHANGE FOLDER NAME Core To COAT 1) GO…
RENAME ADAPTER FOLDER IN PRESTASHOP ----------------------------------------------------------------------------------------------------------------- 0) BEFORE INSTALLATION CHANGE FOLDER NAME adapter To APPLE…
25 JS FILES DELETE IN PRESTASHOP ------------------------------------------------------------------------------------------------------------------ NO:1 JS FILE DELETE jquery-1.11.0.min.js FILE IN …
FONT LINE FIND IN PRESTA SHOP FILE SEEK SOFTWARE -------------------------------------------------------------------------------------------------------------------------- USEFULL LINKS http://alternativeto.net/software/filese…
Direct Links to your Files on Google Drive DIRECT LINKS TO YOUR FILES ON GOOGLE DRIVE - YouTube ▶ 5:17 https://www.youtube.com/watch?v=ehue47G5ayc 14 hours ago - Uploaded by SAVE MONEY DIRECT LINK…
AFTER INSTALL PRESTASHOP MAKE NEW FOLDERS ----------------------------------------------------------------------------------------------------------------- BEFORE INSTALL PRESTASHOP TWO BLANK FOLDERS CACHE SMARTY…
GOOGLE FILTER BUTTON IN IMAGE SEARCH ------------------------------------------------------------------------------------------------------ SEARCH IN GOOGLE: Google Image Search and search for any query,&nbs…
PRESTASHOP HOME PAGE TAB BREAD CRUMBS STYLE ----------------------------------------------------------------------------------------------------------------- YOUTUBE LINK: https://www.youtube.com/watch?v=96BeqS8bueU 0) …
CHANGE MENU CSS COLOR IN PRESTASHOP ---------------------------------------------------------------------------------------------------------------------- OR USE THIS CODE INSIDE FILE C:\wamp\www\PrestaShop\them…
RENAME DOWNLOAD FOLDER IN PRESTASHOP ----------------------------------------------------------------------------------------------------------------- 0) BEFORE INSTALLATION CHANGE FOLDER NAME download To DOG 1…
ABSOLUTE POPUP BOX WITH PRINT ----------------------------------------------------------------------------------------------------------------- POP BOX WITHOUT JAVA CODE 1: COPY AND PASTE BELOW CODE IN POS…
HOME FEATURE TAB CHANGE IN PRESTASHOP ------------------------------------------------------------------------------------------------------------------ AFTER PRESTA SHOP INSTALLATION FIND REQUIRE FILE ONE…
PHP CONTACT FORM WITH CAPTCHA ------------------------------------------------------------------------------------------------------------------ BEFORE SEND MESSAGE 1) FIRST SOVLE SMTP PROBLEM …
FEATURE POST WIDGET IN BLOG ------------------------------------------------------------------------------------------------------------ FEATURE POST WIDGET WITHOUT JAVA CODE 1) IT WORKS WITH POST ID 2) …
BOOTSNIPP LOGIN SIGNUP FORM ----------------------------------------------------------------------------------------------------------- READ MORE: http://bootsnipp.com/tags/login http://bootsnipp.com/s…
MAKE WODPRESS THEME ------------------------------------------------------------------------------------------------------------------------ MAKE AND SAVE ALL FILE ONE BY ONE IN SAME FOLDER -…
GOOGLE PROJECT HOSTING ------------------------------------------------------------------------------------------------------------- STEP:1 LOGIN YOUR GOOGLE ACCOUNT STEP:2 GO TO SITE https://code.…
ON LINE JAVA LIBRARY -------------------------------------------------------------------------------------------------------- READ MORE: https://cdnjs.com/libraries https://code.angularjs.org/ http…
NEWS TICKER BLOGGER TEMPLATES ---------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODEIN BLOGGER TEMPLATE -----------------…
PRESTASHOP NEW THEME FOLDER -------------------------------------------------------------------------------------------------------------- YOUTUBE LINK: https://youtu.be/emfINPXYuGc 0) ONLY …
PAGE NAVIGATION WITH TITLE AND THUMBNAIL IN BLOG ------------------------------------------------------------------------------------------------------------ COPY AND PASTE BELOW CODE IN THIS CODE U NEED SAME POST HTML CODE,P…
PRESTASHOP THUMBNAIL WITH HOVER EFFECT ----------------------------------------------------------------------------------------------------------- PRESTASHOP THUMBNAIL WITH HOVER EFFECT STEP1: GO INSIDE IN BELOW LIN…
RENAME CSS FOLDER IN PRESTASHOP ----------------------------------------------------------------------------------------------------------------- 0) BEFORE INSTALLATION CHANGE FOLDER NAME css To CAT 1) BEFO…
BODY JS FILE LINK IN MAGENTO ------------------------------------------------------------------------------------------------------------- SEARCH IN GOOGLE file content software https://www.google.co.uk/s…
PRESTA CSS JS FILE LINKS REMOVE BY DELETE FILES ------------------------------------------------------------------------------------------------------------------ YOU TUBE LINK https://youtu.be/UbE4O--D9i4?list=PL4AC2C4F0F53…
RENAME DOCS FOLDER IN PRESTASHOP ----------------------------------------------------------------------------------------------------------------- 0) BEFORE INSTALLATION CHANGE FOLDER NAME docs To …
WAMP TO WORDPRESS INSTALL ------------------------------------------------------------------------------------------------------------- READ MORE: STEP NO:0 = CHECK WINDOW OPERATING SYSTEM STEP NO:1 …
Direct Link Generator CODE ----------------------------------------------------------------------------------------------------- CODE: -------------------------------------------------------------------…
BLOGGER INCLUDABLE SECTION ------------------------------------------------------------------------------------------------------------------ COPY AND PASTE BELOW CODE ---------------------------------…
Labels:
P
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment
Click to see the code!
To insert emoticon you must added at least one space before the code.