Circulos Post Thumbnails Style 3

Thursday, 18 July 2013

Circulos Post Thumbnails Style 3

------------------------------------------------------------------------------------------------------------
REPLACE YOUR B SKIN TAG BELOW CODE
------------------------------------------------------------------------------------------------------------

/***********************************
Circulos Posts Code
( Before B Skin Tag)
***********************************/
.date-header {display: none !important;}
.post { margin:0.5em 0 0.4em; padding-bottom:0.4em;font:13px Verdana, Arial, sans-serif; }
.post h1 {margin:0.5em 0 0.4em; font-size:18px; padding-bottom:0px; line-height:25px; font-family:Arial, Helvetica, sans-serif;}
.post h1 a:link, .post h1 strong, h3 a:visited{
color:black;
text-decoration:none;
font-weight: bold;
}
.post h1 a:hover{text-decoration:none;}
.post h1 strong, .post h1 a:hover {color:#008ABD;}
.post h3 a{
color:black;
}
.post h3 a:hover{
color: #cccccc;
text-decoration: none;
}
.post-body {
margin:-5 0 .75em;
font-size: 12px;
line-height: 20px;
}
.post-body p:first-child:first-letter{
font: bold 40px/40px Georgia, Gentium, "Times New Roman", Times, serif;
float:left;
padding:5px;
margin:0 5px 0 0;
color: #fff;
background:#333333;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.post-body blockquote { line-height:1.3em; }
.post-body a{
color:#346ba4;
text-decoration:none
}
.post blockquote{
border-left: 3px solid #FC0;
border-top: 1px solid #ebe6e6;
border-bottom: 1px solid #ebe6e6;
border-right: 1px solid #ebe6e6;
margin: 0 20px;
padding: 20px 20px 10px 20px;
font-size: 0.8em;
font: normal .8em Helvetica, verdana, serif, Calibri, "Times New Roman", Times, serif;
width: 480px;
overflow: auto;
max-height: 350px;
}

.post-footer {
margin: .75em 0;
color:#333333;
border:1px dashed #cccccc;
padding:5px;
text-transform:none;
letter-spacing:.01em;
font: normal normal 85% 'Arial', Trebuchet, Arial, Verdana, Sans-serif;
line-height: 1.4em;
}
.post-footer:hover {
border-color: #008ABD;
}

.post img { padding-top:5px; border:0px solid #cccccc; }

.post blockquote p { margin:.75em 0; }
.post-body ol{margin:0 0 0 5px;padding:0 0 10px}
.post-body ol li{margin:0 0 0 27px;padding:0 0 5px}
.post-body ul{list-style-type:none;margin:0 0 0 5px;padding:0 0 10px}
.post-body ul li{list-style-type:square;margin:0 0 5px 25px;padding:0 0 0 5px}

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<style type='text/css'>
.post-body {
padding: 0 0 10px 0;
}
.thumb-post img {
padding: 4px;
margin:0 0 0 15px;
width: 72px;
height:72px;
background: #fff;
border: 3px solid #008ABD;
-webkit-border-radius: 50px;
-moz-border-radius: 50px; border-radius: 50px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.post:hover:hover .thumb-post img {
border: 3px solid #cccccc;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);
}
</style>
</b:if>
</b:if>

<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>
</b:if>

<b:if cond='data:blog.pageType == "item"'>
<div style='clear: both;'/>
<div class='authorinfo'>
<p>
<span> <a expr:href='data:blog.homepageUrl'><data:post.author/></a>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a></span><br/>
<span> <b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if></b:loop></b:if></b:loop></span>
</p>
</div>
</b:if>

]]></b:skin>

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

REPLACE YOUR HEADER TAG BLOW CODE

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

<b:if cond='data:blog.pageType == "static_page"'>
<style type='text/css'>
.post-footer {
display:none;
}
.post-footer a, a:active{
color:#008ABD;
}
.post-footer a:active{
color:#008ABD;
}
.post-body img {
-moz-box-shadow:0 0 3px #CCCCCC;
-webkit-box-shadow:0 0 3px #CCCCCC;
-khtml-box-shadow:0 0 3px #CCCCCC;
background:none repeat scroll 0 0 #FBFBFB;
margin:5px 20px 0 0;
padding:10px;
}
</style>
</b:if>
<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 300;
summary_img = 280;
img_thumb_height = 100;
img_thumb_width = 110;
</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");
if(img.length<=0) {
imgtag = '<div class="thumb-post"><span style="float:left;margin-right:5px;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-Gbe3C2ahveB4Gh1HY0C6IVyp1xBqUAGlKu6ORGFAp6f2TAoehtUl-f7L2yC39lERoVylEPGJr9sOfAEdJuJY0UiqapayVfJ_rNIO3VD7-GY4c4ZjQDdE_1jQShf3xo_e4OyN9GMMhP3O/s0/diary.jpg" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span></div>';
var summ = summary_noimg;
}
if(img.length>=1) {
imgtag = '<div class="thumb-post"><span style="float:left;margin-right:15px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span></div>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

</head>

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

REPLACE POST BODY IN CLUDLE WIDGET LINE WITH BELOW CODE

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

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

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

<b:if cond='data:blog.pageType != "item"'>

createSummaryAndThumb("summary<data:post.id/>");

</script>

</b:if>

</div>

<b:if cond='data:top.showAuthor'>

<data:top.authorLabel/>

<b:if cond='data:post.authorProfileUrl'>

<data:post.author/>

</a>

</span>

<b:else/>

</b:if>

</span>

<b:if cond='data:top.showTimestamp'>

<data:top.timestampLabel/>

<b:if cond='data:post.url'>

</b:if>

</span> <span class='post-comment-link'>

<b:if cond='data:blog.pageType != "item"'>

<b:if cond='data:blog.pageType != "static_page"'>

<b:if cond='data:post.allowComments'>

</b:if>

</span> <span class='post-icons'>

<b:if cond='data:post.emailPostUrl'>

</a>

</span>

</b:if>

<b:include data='post' name='postQuickEdit'/>

</span>

</div>

<b:if cond='data:post.labels'>

<data:postLabelsLabel/>

<b:loop values='data:post.labels' var='label'>

</b:loop>

</b:if>

</span> <div class='post-share-buttons goog-inline-block'>

<b:if cond='data:post.sharePostUrl'>

<b:include data='post' name='shareButtons'/>

</b:if>

</div>

<b:if cond='data:top.showReactions'>

<data:top.reactionsLabel/></span> </td>

</tr></table>

</span>

</b:if>

</div>

</div>

</b:includable>

Circulos Post

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

THUMB NAIL IMAGE

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

---------------------------------------------------------------------------------------------------
INCREASE THUMB POST IMAGE WEB KIT RADIUS

REPLACE RED CODE WITH GREEN CODE
---------------------------------------------------------------------------------------------------

.thumb-post img {
padding: 4px;
margin:0 0 0 15px;
width: 72px;
height:72px;
background: #fff;
border: 3px solid #008ABD;
-webkit-border-radius: 50px;
-moz-border-radius: 50px; border-radius: 50px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;

}

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

.thumb-post img {
padding: 4px;
margin:0 0 0 15px;
width: 140px;
height: 140px;
background: #fff;
border: 3px solid #008ABD;
-moz-border-radius: 70px;
-webkit-border-radius: 70px;
border-radius: 70px
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;

}