Pin Pin Post Thumbnail

Monday, 5 August 2013

Pin Pin Post Thumbnail

-------------------------------------------------------------------------------------
FIND B SKIN TAG AND REPLACE WITH BELOW CODE

]]></b:skin>

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

/* POST CODE START
-----------------------------------*/
body {
background:#eee;
font:14px/21px "Helvetica Neue",Helvetica,Arial,sans-serif;
color:#444;
font-size:small;
margin:0;
padding:0;
}
.clear {
display:block;
font-size:0;
height:0;
line-height:0;
width:100%;
clear:both;
}
a {
color:#40494F;
text-decoration:none;
}

h1,h2,h3,h4,h5,h6 {
font-weight:400;
padding:0;
}
h1 {
font-size:24px;
line-height:28px;
}
h2 {
font-size:20px;
line-height:22px;
}
h3 {
font-size:16px;
line-height:20px;
}
h4 {
font-size:14px;
line-height:18px;
}
h5 {
font-size:12px;
line-height:18px;
}
h6 {
font-size:10px;
line-height:16px;
}

.date-header {
font-weight:400;
font-size:100%;
margin:1.5em 0 0;
}
#post-title {
font-size:125%;
font-weight:700;
line-height:1.1em;
margin:0;
padding:0;
}
.post-header {
margin:0;
padding:0;
}
.post-header .post-timestamp {
float:right;
margin:0 6px 0 0;
}
.post-header .post-comment-link {
float:left;
margin:2px 6px 0 0;
}
.jump-link {
float:left;
display:none;
margin:6px 6px 0 0;
}
.post-title a,.post-title a:visited,.post-title strong {
text-decoration:none;
color:#738695;
}
.post-summary {
position:absolute;
width:200px;
z-index:1;
}
.post-thumbnail {
position:absolute;
background:#FFF;
width:180px;
float:left;
height:167px;
z-index:100;
margin:5px 0 0 1px;
padding:7px;
}
.tr-caption-container img {
border:none;
padding:0;
}
.post blockquote {
margin:1em 20px;
}
.post blockquote p {
margin:.75em 0;
}

.post-body img {
max-width:99%;
}

table {
border-collapse:collapse;
border-spacing:0;
}
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {
display:inline-block;
}
.clearfix {
display:block;
}
.none {
display: none;
}

h3.entry-title {
background:#9B1212 ;
-moz-border-radius:0px 0px 10px 10px;
padding:10px 10px 10px 10px;
font: normal normal 12px 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;
}

]]></b:skin>

------------------------------------------------------------------------------------------
NOW FIND THIS LINE AND REPLACE BELOW CODE

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

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

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

<b:if cond='data:blog.pageType == "index"'>
<b:include data='post' name='posting_style'/>
<b:else/>
<b:if cond='data:blog.pageType != "archive"'>
<style>
h3.entry-title {
background:#9B1212 ;
-moz-border-radius:0px 0px 10px 10px;
padding:10px 10px 10px 10px;
font: normal normal 20px 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-body img {
float: left;
width: auto;
height: auto;
margin: 0 0 20px;
border: 10px solid #dddddd;
}

#main-wrapper{
background:#fff !important;
border: 1px solid #D1D9DF !important;
margin-right:18px !important;
width:600px !important;
padding:20px !important;
}
.post-title {
font-size: 21px;
padding:0 0 10px;
margin:10px 0;
text-align:left;
font-family: arial;
}
.post {
font-family:Georgia;
margin: 0 0 1.5em;
padding-bottom: 1.5em;
font-size: 11px;
}
</style>

<style type='text/css'>
*{ padding:0px; margin:0px; }
body{ background:#D5DEE7; }
a{ color:#C8DCE5;}
h3{ margin: 10px 10px 0 10px; color:#FFF; font:18pt Arial, sans-serif; letter-spacing:-1px; font-weight: bold; }
.boxgrid{
width: 325px;
height: 260px;
margin:10px;
float:left;
background:#161613;
border: solid 2px #8399AF;
overflow: hidden;
position: relative;
}
.boxgrid img{
position: absolute;
top: 0;
left: 0;
border: 0;
}
.boxgrid p{
padding: 0 10px;
color:#afafaf;
font-weight:bold;
font:10pt "Lucida Grande", Arial, sans-serif;
}
.boxcaption{
float: left;
position: absolute;
background: #000;
height: 100px;
width: 100%;
opacity: .8;
/* For IE 5-7 */
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
/* For IE 8 */
-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}
.captionfull .boxcaption {
top: 260;
left: 0;
}
.caption .boxcaption {
top: 220;
left: 0;
}
h3 a{}

</style>

<div class='post hentry'>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<style>
.info-bar {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 13px;
padding: 5px 10px 0 10px;
background-color: white;
box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4);
-moz-box-shadow: 0 1px 2px rgba(34,25,25,0.4);
-webkit-box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4);
text-align: center;
height: 25px;
}
.icon-action {
background-position:
}
.info-bar .post-timestamp {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzfG9cchHmE4JZ32mgmYUECtZFn5mkzeFFQBnjcH5M9-8VhPtB4jeJucPBhf-cFgyfczDoO6jRirMT7j8o3nWkeEFehO5FFHglybfQ37GaLiYYd0_RD2KnuECguGgK3U1YIzS1CDi49OQ/s0/time-small.png") no-repeat 0 1px;
padding-left: 18px;
}
.info-bar .post-labels {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxA-4cNbfeVKkmb1uL_t11gRHCI9jA-WnkPj0rjw_SjF80iGGLUqpIGmSgsuZRYLk-7FA_4Vo_qPbBCunszNoEF3TLRIjrEyxw-wzlViYisfP0elYmS61xjMKEaAQEF5SLXM9lOe3gH6w/s0/tag-small.png") no-repeat 0 2px;
padding-left: 18px;
}
.info-bar .post-icons{
float:right;
*margin-top:-20px;
}
</style>
</b:if></b:if>
<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-body entry-content' expr:id='"post-body-" + data:post.id'>
<data:post.body/>
<div style='clear:both'/>
</div>
<div class='post-footer'>
<div class='info-bar'>
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<span class='fn'><data:post.author/></span>
</b:if>
</span>,
<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<b:if cond='data:post.url'>
<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>
</b:if>
</b:if>
</span>,
<span class='post-labels'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url + "?&max-results=7"' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</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='8' src='http://img1.blogblog.com/img/icon18_wrench_allbkg.png' width='11'/>
</a>
</span>
</b:if>
<b:include data='post' name='postQuickEdit'/>
</span>
</div>
<div class='post-footer-line post-footer-line-1'>
<div class='post-share-buttons goog-inline-block'>
<b:if cond='data:post.sharePostUrl'>
<b:include data='post' name='shareButtons'/>
</b:if>
</div> </div>
<div class='post-footer-line post-footer-line-2'>
<b:if cond='data:top.showReactions'>
<span class='reaction-buttons'>
<table border='0' cellpadding='0' cellspacing='0' width='100%'><tr>
<td class='reactions-label-cell' nowrap='nowrap' valign='top' width='1%'>
<span class='reactions-label'>
<data:top.reactionsLabel/></span> </td>
<td><iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/></td>
</tr></table>
</span>
</b:if>
</div>
<div class='post-footer-line post-footer-line-3'><span class='post-location'>
<b:if cond='data:top.showLocation'>
<b:if cond='data:post.location'>
<data:postLocationLabel/>
<a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
</b:if>
</b:if>
</span> </div>
</div>
</div>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>

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

</b:if>
</b:if>

</b:includable>

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

</b:includable>

-----------------------------------------------------------------------------------------------
USED THREE IMAGES IN THIS TUTORIAL
-----------------------------------------------------------------------------------------------