CrackSin Snaps Blog Post Change In Thumbnail Style1 - Cracksin Snaps
signup now
» » » Blog Post Change In Thumbnail Style1
Thursday 4 July 2013



Thumbnail




--------------------------------------------------------------------------------------------------------------------------
Add This Code Before Your Bskin Tag
--------------------------------------------------------------------------------------------------------------------------


a:link {
  color:$linkcolor;
  text-decoration:none;
  }


/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
  width: 990px;
  margin:0 auto;
  padding:10px;
  text-align:left;
  font: $bodyfont;
  }
#main-wrapper {
  width: 740px;
  float: left;
  padding: 5px;
  border:1px solid $bordercolor;
  background-color:#FFFFFF;
  filter:alpha(opacity=80); -moz-opacity:0.80; opacity:0.80; -khtml-opacity:0.80;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }
/* Headings
----------------------------------------------- */
h2 {
  margin:1.5em 0 .75em;
  font:$headerfont;
  line-height: 1.4em;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:$sidebarcolor;
}

/* Posts
-----------------------------------------------
 */
h2.date-header {
  margin:1.5em 0 .5em;
  }
.post{
margin:.5em 0 1.5em;
border-bottom:1px dotted #ccc;
padding-bottom:1.5em;
font-family:Dosis,Verdana,Arial,Trebuchet MS,Sans-serif;
color:#FFFFFF;
}
.post li{margin:0 0 0 20px;padding:0 0 0 10px}
.post h3{
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:400;
line-height:1.4em;
color:#777;
font-family:Oswald;
}
.post h3 a,.post h3 a:visited,.post h3 strong{
display:block;
text-decoration:none;
color:#777;
font-weight:400;
}
.post h3 strong,.post h3 a:hover{
color:#333;
}
.post-body{
margin:0 0 1.75em;
line-height:1.6em;
font-size:15px;
}
.post-body blockquote{
line-height:1.3em;
}
.post-footer{
margin:.75em 0;
color:#FFFFFF;
text-transform:uppercase;
letter-spacing:.1em;
font:$postfooterfont;
line-height:1.4em;
}
.post img{
height:auto
width:auto
}


.post table.tr-caption-container{
padding-bottom:4px;
}
.tr-caption-container img{
border:none;
padding:0;
}
.post blockquote{
margin:1em 20px;
padding:2px 5px 2px 35px;background:url(https://lh5.googleusercontent.com/-j8kbn61Wl7U/T6eZXWwQ8NI/AAAAAAAACzA/59a-fluxx4A/s0/blockquote.png) no-repeat top left #f8f8f8;border:1px solid #f1f1f1;
}
.post blockquote p{
margin:.75em 0;
}

.botsnip{
margin:0 10px;
}
.comment-link {
  margin-left:.6em;
  }
.post img {
  padding:4px;
  border:1px solid $bordercolor;
  }
.post blockquote {
  margin:1em 20px;
  }
.post blockquote p {
  margin:.75em 0;
  }

.view {

width: 300px;

height: 200px;

margin: 10px;

float: left;

border: 10px solid #fff;

overflow: hidden;

position: relative;

text-align: center;

-webkit-box-shadow: 1px 1px 2px #e6e6e6;

-moz-box-shadow: 1px 1px 2px #e6e6e6;

box-shadow: 1px 1px 2px #e6e6e6;

cursor: default;

background: #fff url(https://c1ec8ebd-a-62cb3a1a-s-sites.googlegroups.com/site/anglichugs/photo-effects/bgimg.jpg) no-repeat center center;

}

.view .mask,.view .content {

width: 300px;

height: 200px;

position: absolute;

overflow: hidden;

top: 0;

left: 0;

}

.view img {

display: block;

position: relative;

}

.view h2 {

text-transform: uppercase;

color: #fff;

text-align: center;

position: relative;

font-size: 17px;

padding: 10px;

background: rgba(0, 0, 0, 0.8);

margin: 20px 0 0 0;

}

.view p {

font-family: Georgia, serif;

font-style: italic;

font-size: 12px;

position: relative;

color: #fff;

padding: 10px 20px 20px;

text-align: center;

}

.view a.info {

display: inline-block;

text-decoration: none;

padding: 7px 14px;

background: #000;

color: #fff;

text-transform: uppercase;

-webkit-box-shadow: 0 0 1px #000;

-moz-box-shadow: 0 0 1px #000;

box-shadow: 0 0 1px #000;

}

.view a.info: hover {

-webkit-box-shadow: 0 0 5px #000;

-moz-box-shadow: 0 0 5px #000;

box-shadow: 0 0 5px #000;

}

.view img {

-webkit-transform: scaleY(1);

-moz-transform: scaleY(1);

-o-transform: scaleY(1);

-ms-transform: scaleY(1);

transform: scaleY(1);

-webkit-transition: all 0.7s ease-in-out;

-moz-transition: all 0.7s ease-in-out;

-o-transition: all 0.7s ease-in-out;

-ms-transition: all 0.7s ease-in-out;

transition: all 0.7s ease-in-out;

}

.view .mask {

background-color: rgba(255, 231, 179, 0.3);

-webkit-transition: all 0.5s linear;

-moz-transition: all 0.5s linear;

-o-transition: all 0.5s linear;

-ms-transition: all 0.5s linear;

transition: all 0.5s linear;

-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";

filter: alpha(opacity=0);

opacity: 0;

}

.view h2 {

border-bottom: 1px solid rgba(0, 0, 0, 0.3);

background: transparent;

margin: 20px 40px 0px 40px;

-webkit-transform: scale(0);

-moz-transform: scale(0);

-o-transform: scale(0);

-ms-transform: scale(0);

transform: scale(0);

color: #333;

-webkit-transition: all 0.5s linear;

-moz-transition: all 0.5s linear;

-o-transition: all 0.5s linear;

-ms-transition: all 0.5s linear;

transition: all 0.5s linear;

-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";

filter: alpha(opacity=0);

opacity: 0;

}

.view p {

color: #333;

-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";

filter: alpha(opacity=0);

opacity: 0;

-webkit-transform: scale(0);

-moz-transform: scale(0);

-o-transform: scale(0);

-ms-transform: scale(0);

transform: scale(0);

-webkit-transition: all 0.5s linear;

-moz-transition: all 0.5s linear;

-o-transition: all 0.5s linear;

-ms-transition: all 0.5s linear;

transition: all 0.5s linear;

}

.view a.info {

-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";

filter: alpha(opacity=0);

opacity: 0;

-webkit-transform: scale(0);

-moz-transform: scale(0);

-o-transform: scale(0);

-ms-transform: scale(0);

transform: scale(0);

-webkit-transition: all 0.5s linear;

-moz-transition: all 0.5s linear;

-o-transition: all 0.5s linear;

-ms-transition: all 0.5s linear;

transition: all 0.5s linear;

}

.view:hover img {

-webkit-transform: scale(10);

-moz-transform: scale(10);

-o-transform: scale(10);

-ms-transform: scale(10);

transform: scale(10);

-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";

filter: alpha(opacity=0);

opacity: 0;

}

.view:hover .mask {

-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";

filter: alpha(opacity=100);

opacity: 1;

}

.view:hover h2,.view:hover p,.view:hover a.info {

-webkit-transform: scale(1);

-moz-transform: scale(1);

-o-transform: scale(1);

-ms-transform: scale(1);

transform: scale(1);

-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";

filter: alpha(opacity=100);

opacity: 1;

}


]]></b:skin>



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

Now Add Conditional Post Code Head closed Tag            </head>
And Java Code And Java Link J Qurey 1.6.4
--------------------------------------------------------------------------------------------------------------------

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style>
.post{
color:#FFFFFF;
width:350px;
height:300px;
float:left;
padding:0;
margin:5px;
transition:.5s linear;
-moz-transition:all .5s;
-webkit-transition:.5s linear;
border-bottom:none;
border-top:1px solid #f6f6f6;
background:#fbfbfb;
box-shadow: 0 1px 1.5px rgba(34,25,25,0.1);
border-radius:2px 2px 0 0;
}
.post:hover{
background:#f5f5f5;
transition:.5s linear;
-moz-transition:all .5s;
-webkit-transition:.5s linear;
}
.post-body{
margin:0 0 .75em;
line-height:1.6em;
font-size:11px;
font-family:Arial;
text-align:justify;
}
.post h3{
background-color:red;   
font-size:100%;
height:40px;
margin:0;
transition:.3s linear;
-moz-transition:all .3s;
-webkit-transition:.3s linear;
font-family:&#39;Oswald&#39;;
padding:5px 7px 0 3px;
background:#fbfbfb;
text-align:center;
}
.post h3 a,.post h3 a:visited,.post h3 strong{font-weight:300;}
.post h3:hover{
text-shadow:1px 1px 1px #fff;
transition:.3s linear;
-moz-transition:all .3s;
-webkit-transition:.3s linear;
background:#fafafa;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#fafafa&#39;, endColorstr=&#39;#f3f3f3&#39;);
background:-moz-linear-gradient(left, #fafafa, #f3f3f3);
background:-webkit-gradient(linear, left top, right top, from(#fafafa), to(#f3f3f3));
background-image:-o-linear-gradient(#fafafa,#f3f3f3);
}
.post h3 a:hover{
text-shadow:0 0 1px #fff;
}
.post-footer-line-1,.post-footer-line-2,post-footer-line-3,.post-footer,  #HTML1, #FollowByEmail1, #Label1, #Followers1{
display:none;
}
</style>
</b:if>
</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
/* ZAFAR CHANGE POST HEADER */
.post h3 {

background-color:#fa0a0a;
background-position:initial initial;
background-repeat:initial initial;
border:1px solid #E3E3E3;
border-bottom-left-radius:0;
border-bottom-right-radius:10px;
border-top-left-radius:0;
border-top-right-radius:10px;
box-shadow:#FFFFFF 0 0 0 1px inset;
font-size:150%;
color:#FFFFFF;
font-family:Oswald;
font-size:140%;
font-weight:400;
line-height:1.4em;
margin:0.25em 0 0;
padding:0 0 4px;
margin:0 0 5px;
padding:5px;

}
/* POST FOOTER CODE */
.post-footer{
background-color:#FA0A0A;
border:1px solid #E3E3E3;
border-bottom-left-radius:0;
border-bottom-right-radius:10px;
border-top-left-radius:0;
border-top-right-radius:10px;
box-shadow:#FFFFFF 0 0 0 1px inset;
color:#FFFFFF;
font-family:Oswald;
font-size:140%;
font-weight:400;
line-height:1.4em;
margin:0 0 5px;
padding:5px;
}
.post{
margin:0 0 1.5em;
}
#postcat{
padding:2px 5px;
background:#999;
border-radius:3px;
color:#fbfbfb;
transition:.3s linear;
-moz-transition:all .3s;
-webkit-transition:.3s linear;
}
#postcat:hover{
background:#fe8c25;
text-decoration:none;
transition:.3s linear;
-moz-transition:all .3s;
-webkit-transition:.3s linear;
color:#fbfbfb
}
/* POST IMAGE SIZE AFTER THUMBNAIL */
.post img {
width:550px;
height:600px;
}

</style>

</b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style>
.st-post-footer-buttons{display:none}
.post h3{border-bottom:1px solid #ddd}
</style>
</b:if>

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




<script type='text/javascript'>
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();var thumburl=new Array();function related_results_labels_thumbs(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;try{thumburl[relatedTitlesNum]=entry.media$thumbnail.url}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl[relatedTitlesNum]=d}else{if(typeof(defaultnoimage)!=='undefined'){thumburl[relatedTitlesNum]=defaultnoimage}else{thumburl[relatedTitlesNum]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQQDgHQkss90Z-koZLneEgidAuS0moxeKtpWHOXKWRc3A98LpLYWoAaiCNiGG4LeeippkyM_KhHi2BOurgsPrLgl-WN5Qf13RLsrWnpKnLsH0lE3ph0VXIGbfC7wLRt2OSTASJzZ6XBUk/s400/noimage.png"}}}if(relatedTitles[relatedTitlesNum].length>35){relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,35)+"..."}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++}}}}function removeRelatedDuplicates_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}relatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3}function contains_thumbs(a,e){for(var j=0;j<a.length;j++){if(a[j]==e){return true}}return false}function printRelatedLabels_thumbs(current){var splitbarcolor;if(typeof(splittercolor)!=='undefined'){splitbarcolor=splittercolor}else{splitbarcolor="#d4eaf2"}for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==current)||(!relatedTitles[i])){relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>0){document.write('<h2>'+relatedpoststitle+'</h2>')}document.write('<div style="clear: both;"/>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<a style="text-decoration:none;padding:5px;float:left;');if(i!=0)document.write('border-left:solid 0.5px '+splitbarcolor+';"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><img style="width:72px;height:72px;border:0px;" src="'+thumburl[r]+'"/><br/><div id="rptxt">'+relatedTitles[r]+'</div></a>');i++;if(r<relatedTitles.length-1){r++}else{r=0}}document.write('</div>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}

//]]>
</script>




</head>
<body>

-----------------------------------------------------------------------------------------------------------------------
Open B Include Widget Code And Find This Line:
<b:includable id='post' var='post'></b:includable>

 And Open This Line


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

<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'></b:includable>
<b:includable id='backlinkDeleteIcon' var='backlink'></b:includable>
<b:includable id='backlinks' var='post'></b:includable>
<b:includable id='comment-form' var='post'></b:includable>
<b:includable id='commentDeleteIcon' var='comment'></b:includable>
<b:includable id='comment_count_picker' var='post'></b:includable>
<b:includable id='comment_picker' var='post'></b:includable>
<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: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>

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

Now Replace This Red Line With Below Code:

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




<b:includable id='post' var='post'>
<div class='post hentry'>
<a expr:name='data:post.id'/>
<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'>
<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>
</h3>
</b:if>
<div class='post-header'>
<div class='post-header-line-1'/>
</div>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'/>
<script>
(function(d){
  var js, id = &#39;facebook-jssdk&#39;; if (d.getElementById(id)) {return;}
  js = d.createElement(&#39;script&#39;); js.id = id; js.async = true;
  js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;;
  d.getElementsByTagName(&#39;head&#39;)[0].appendChild(js);
}(document));
</script>
<div id='gpluslike'>
<table><tr><td style='padding: 5px 0 0 0px;width:75px;display:inline-block'><g:plusone expr:href='data:post.url' size=''/></td>
<td style='padding: 2px 0 0 2px'><fb:like action='like' colorscheme='light' expr:href='data:post.url' font='arial' layout='standard' send='false' show_faces='false'/></td></tr></table></div><br/></b:if>
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>
<b:if cond='data:blog.pageType != &quot;item&quot;'><b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:post.isFirstPost'>
<script type='text/javascript'>
//<![CDATA[
function bp_thumbnail_resize(image_url,post_title)
{
var image_size=300;
var show_default_thumbnail=true;
var default_thumbnail="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRJyRemkolUg52QNNstn8ny41UX30Fz43cqQBFy9eLcSP6WuaF3tHsflID-nGU2by6pRSkPaqVJ7qpvGrG7MoB52kXJQ2PqtHe_fbHj23NDMcEBnRn2U0Y1cZV0Jn6LsV3ortQhcKe20A/s72-c/default.png";
if(show_default_thumbnail == true && image_url == "") image_url= default_thumbnail;
image_tag='<img src="'+image_url.replace('/s72-c/','/s'+image_size+'-c/')+'" alt="'+post_title+'"/>';
if(image_url!="") return image_tag; else return "";
}
//]]>
</script>
</b:if>
<b:if cond='data:post.snippet'>
<div class='view'>
<a expr:href='data:post.url'>
<script type='text/javascript'>
document.write(bp_thumbnail_resize(&quot;<data:post.thumbnailUrl/>&quot;,&quot;<data:post.title/>&quot;));
</script><div class='summary'>
<data:post.snippet/></div>
<div class='mask'>
<div class='inline-ad'>
 &lt;script type=&quot;text/javascript&quot;&gt;&lt;!--
google_ad_client = &quot;ca-pub-0751103215282127&quot;;
google_ad_host = &quot;pub-1556223355139109&quot;;
/* heavenlyteens_main_Blog1_300x300_as */
google_ad_slot = &quot;5648551631&quot;;
google_ad_width = 250;
google_ad_height = 250;
//--&gt;
&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;
src=&quot;http://pagead2.googlesyndication.com/pagead/show_ads.js&quot;&gt;
&lt;/script&gt;
</div>
<p> Disney Snaps</p>
<a class='info' href='#'>Read More</a>
<data:post.timestamp/><br/>
<data:post.numComments/> Comments
<br/>
</div>
</a>
</div>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>


</div>
</b:includable>







Posted by at 15:26
Labels: ,

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)