Monday, 15 July 2013
Blog Post Thumb Nails Style 2


- Go to Layout > Edit HTML
- Checkmark Expand Widget Templates
--------------------------------------------------------------------------------------------------------
FIND B SKIN TAG AND REPLACE YOUR B SKIN TAG WITH BELOW CODE
]]></b:skin>
--------------------------------------------------------------------------------------------------------
.box {
width: 150px;
background: #fff;
margin: 25px 25px 75px 25px;
float: left;
}
.postim {
width: 150px;
height: 190px;
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTTX23Gf2gRVMbuPstQ5vPHJ998PgYdWclvZrejFcnLvoxt_sQYdb-hqJMU6ntXxQzTfAgj3DYB-ijlv627lPD-yrtGhHZotyXdHS0A2HCMWO-1cMuPazSJAM68k_DTlHwf-RJiWfqoO98/s1600/bookbg.png) repeat-y;
margin: 0px 0px;
overflow: hidden;
-webkit-box-shadow: 3px -2px 1px 0px #eee;
-moz-box-shadow: 3px -2px 1px 0px #eee;
box-shadow: 3px -2px 1px 0px #eee;
position: relative;
}
.postim img {
position: relative;
width: 150px;
height: 190px;
}
.postim a {
display: block;
}
.btitle {
width: 150px;
position: absolute;
top: 15px;
left: 0px;
}
.btitle h2 {
font-size: 14px;
margin: 0px 0px;
padding: 0px 15px;
text-align: center;
font-weight: bold;
line-height: 120%;
}
.btitle h2 a:link,.btitle h2 a:visited {
color: #444;
}
span.inwriter {
width: 150px;
font-size: 10px;
position: absolute;
bottom: 10px;
left: 0px;
text-align: center;
}
.post {
margin-bottom: 20px;
padding: 20px 20px;
background: #fff;
border: 1px solid #d0b48b;
}
img.postimg {
float: left;
margin: 5px 20px 20px 0px;
}
.title h2 {
font-size: 26px;
margin: 5px 0px 15px 0px;
font-family: YanoneKaffeesatzRegular;
}
.title h2 a:link,.title h2 a:visited {
color: #444;
}
.postmeta {
font-size: 12px;
padding: 0px 0px;
margin-bottom: 15px;
}
.postmeta span {
margin: 0px 10px 0px 0px;
color: #d65806;
}
.postmeta span a {
color: #d65806;
}
span.author {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxyzi_I2XyiuD0rfwawdiFHpDAZfVWYbk0H_r5uxbyuKqpJsoVGTpJN7U0kerzx01_S-76OCHmh3kn4jY8r5oiKlu3jkQ7-tgXvYt44QhKk2V83DyywMu0UjmN72_vB8HYDio3_2WP1Wfc/s1600/user.png) left center no-repeat;
padding-left: 20px;
}
span.clock {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTkUkNJMHx8ZSBALgM4KaUp70fM46ye6nzHxmhzkwFHJtt8sQ31y5XV0xm52eHRsccDR2RzDLEsgbG4faLtV-aRQAmMRBa_qS9C2YFHWaHq-WzlWOHyC92704vSX1OAnls_C0mA9KRX-DL/s1600/clock.png) left center no-repeat;
padding-left: 20px;
}
span.comm {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfgVoWt1Rz-pAKhrT6tbEsHXPSbrQWor_dGOy00tVkqYJ-PW1YY9IkvUl4PvWpoGff106zQBa350GkX7KhWJghd_ZYxftFjK_P6i2z0zu4jbEw6iSU67S1tR7z3NuNMM2qZdpJwQb4RU4G/s1600/comm.png) left center no-repeat;
padding-left: 20px;
}
span.categori {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfPrMEjT8Uy-gMAlXcX74x8XWKZyVZ4pltXJqn12gCWUIs_G6nrj7R2B80LycOYVJcFfmPzySEiEe-ixXtSjlza6lrkb-eTimAN-l9vLlIrvxyNi-8aTMBTSb7r-F6f1wZNXPGTxa35Hug/s1600/tag.png) left center no-repeat;
padding-left: 20px;
}
.entry {
margin: 0px 0px;
padding: 0px 0px;
overflow: hidden;
}
.entry img{max-width:600px;
margin:10px;}
.entry a:link,
.entry a:visited {
color: #FF0000;
}
.entry a:hover {
color: #FF0000;
}
.entry ul, .entry ol {
margin: .4em 0 1em;
line-height: 150%;
}
.entry ul li, .entry ol li {
list-style-position: outside;
margin-left: 1.6em;
}
]]></b:skin>
-----------------------------------------------------------------------------------------------------------
REPLACE HEAD CLOSED TAG WITH BELOW CODE
</head>
-----------------------------------------------------------------------------------------------------------<b:if cond='data:blog.pageType == "index"'>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
(function($){$.fn.superfish=function(op){var sf=$.fn.superfish,c=sf.c,$arrow=$(['<span class="',c.arrowClass,'"> »</span>'].join("")),over=function(){var $$=$(this),menu=getMenu($$);clearTimeout(menu.sfTimer);$$.showSuperfishUl().siblings().hideSuperfishUl();},out=function(){var $$=$(this),menu=getMenu($$),o=sf.op;clearTimeout(menu.sfTimer);menu.sfTimer=setTimeout(function(){o.retainPath=($.inArray($$[0],o.$path)>-1);$$.hideSuperfishUl();if(o.$path.length&&$$.parents(["li.",o.hoverClass].join("")).length<1){over.call(o.$path);}},o.delay);},getMenu=function($menu){var menu=$menu.parents(["ul.",c.menuClass,":first"].join(""))[0];sf.op=sf.o[menu.serial];return menu;},addArrow=function($a){$a.addClass(c.anchorClass).append($arrow.clone());};return this.each(function(){var s=this.serial=sf.o.length;var o=$.extend({},sf.defaults,op);o.$path=$("li."+o.pathClass,this).slice(0,o.pathLevels).each(function(){$(this).addClass([o.hoverClass,c.bcClass].join(" ")).filter("li:has(ul)").removeClass(o.pathClass);});sf.o[s]=sf.op=o;$("li:has(ul)",this)[($.fn.hoverIntent&&!o.disableHI)?"hoverIntent":"hover"](over,out).each(function(){if(o.autoArrows){addArrow($(">a:first-child",this));}}).not("."+c.bcClass).hideSuperfishUl();var $a=$("a",this);$a.each(function(i){var $li=$a.eq(i).parents("li");$a.eq(i).focus(function(){over.call($li);}).blur(function(){out.call($li);});});o.onInit.call(this);}).each(function(){var menuClasses=[c.menuClass];if(sf.op.dropShadows&&!($.browser.msie&&$.browser.version<7)){menuClasses.push(c.shadowClass);}$(this).addClass(menuClasses.join(" "));});};var sf=$.fn.superfish;sf.o=[];sf.op={};sf.IE7fix=function(){var o=sf.op;if($.browser.msie&&$.browser.version>6&&o.dropShadows&&o.animation.opacity!=undefined){this.toggleClass(sf.c.shadowClass+"-off");}};sf.c={bcClass:"sf-breadcrumb",menuClass:"sf-js-enabled",anchorClass:"sf-with-ul",arrowClass:"sf-sub-indicator",shadowClass:"sf-shadow"};sf.defaults={hoverClass:"sfHover",pathClass:"overideThisToUse",pathLevels:1,delay:800,animation:{opacity:"show"},speed:"normal",autoArrows:true,dropShadows:true,disableHI:false,onInit:function(){},onBeforeShow:function(){},onShow:function(){},onHide:function(){}};$.fn.extend({hideSuperfishUl:function(){var o=sf.op,not=(o.retainPath===true)?o.$path:"";o.retainPath=false;var $ul=$(["li.",o.hoverClass].join(""),this).add(this).not(not).removeClass(o.hoverClass).find(">ul").hide().css("visibility","hidden");o.onHide.call($ul);return this;},showSuperfishUl:function(){var o=sf.op,sh=sf.c.shadowClass+"-off",$ul=this.addClass(o.hoverClass).find(">ul:hidden").css("visibility","visible");sf.IE7fix.call($ul);o.onBeforeShow.call($ul);$ul.animate(o.animation,o.speed,function(){sf.IE7fix.call($ul);o.onShow.call($ul);});return this;}});})(jQuery);
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function() {
/* Banner class */
jQuery('.squarebanner ul li:nth-child(even)').addClass('rbanner');
/* Navigation */
jQuery('#submenu ul.sfmenu').superfish({
delay: 500, // 0.1 second delay on mouseout
animation: {opacity:'show',height:'show'}, // fade-in and slide-down animation
dropShadows: true // disable drop shadows
});
/* Homepage goodness */
jQuery('.postim').mouseenter(function(e) {
jQuery(this).children('a').children('img').animate({ left:'0', top:'0', width:'15'}, 300);
}).mouseleave(function(e) {
jQuery(this).children('a').children('img').animate({ left: '0', top: '0', width:'150'}, 300);
});
/* Fancy that */
jQuery(".bookshot").fancybox({
'titleShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'easingIn' : 'easeOutBack',
'easingOut' : 'easeInBack'
});
});
//]]>
</script>
</b:if>
<script type='text/javascript'>
function lebel_logo(etiqueta) {
imagenes = new Array();
imagenes[1] = "<span style='background-color:#fff2df; height: 28px;width: 125px;'/>"
imagenes[2] = "<span style='background-color:#fff2df; height: 28px;width: 100px;'/>"
imagenes[3] = "<span style='background-color:#fff2df; height: 28px; width: 75px;'/>"
imagenes[4] = "<span style='background-color:#fff2df; height: 28px;width: 50px;'/>"
imagenes[5] = "<span style='background-color:#fff2df; height: 28px;width: 25px;'/>"
imagenes[6] = "<span style='background-color:#fff2df; height: 28px;width: 0px;'/>"
if (etiqueta == "rate-1")
{document.write(imagenes[1]);}
if (etiqueta == "rate-2")
{document.write(imagenes[2]);}
if (etiqueta == "rate-3")
{document.write(imagenes[3]);}
if (etiqueta == "rate-4")
{document.write(imagenes[4]);}
if (etiqueta == "rate-5")
{document.write(imagenes[5]);}
if (etiqueta == "rate-6")
{document.write(imagenes[6]);}
}
</script>
</head>
---------------------------------------------------------------------------------------------------------GO TO BLOG POST SECTION AREA AND 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 == "static_page"'>
<div class='post' id='post'>
<div class='title'>
<h2><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>
</h2>
</div>
<div class='entry'>
<p><data:post.body/></p>
<div class='clear'/>
</div>
<div class='titlemeta clearfix'>
<table border='0'>
<tr>
<td><div style='margin-left:35px;'>
<script type='text/javascript'>
(function() {
var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];
s.type = 'text/javascript';
s.async = true;
s.src = 'http://widgets.digg.com/buttons.js';
s1.parentNode.insertBefore(s, s1);
})();
</script>
</div></td>
</tr>
</table>
</div>
</div>
<div class='clear'/>
</b:if>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<li class='box' id='post'>
<div class='postim' id='post'>
<div class='btitle'>
<h2><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></h2>
</div>
<span class='inwriter'><data:post.author/></span>
<a expr:href='data:post.url'>
<b:if cond='data:post.isFirstPost'>
<script type='text/javascript'>
//<![CDATA[
function bp_thumbnail_resize(image_url,post_title)
{
var image_size=150;
var show_default_thumbnail=true;
var default_thumbnail="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrwRZSbbVWL5tfffHhg_jp-OnuuZLIGkwpJFjoCueai4x9ssU3_RssOTmC55it0Qp-PgxpmlEVE9k9nqIiYUWPT0WfgYHFZdf6QRGx3X74bi7NFBVjUVGmoOWsefHHL-Cn_9lJRYcNTm8/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/')+'" class="bookcover" alt="'+post_title+'"/>';
if(image_url!="") return image_tag; else return "";
}
//]]>
</script>
</b:if>
<script type='text/javascript'>
document.write(bp_thumbnail_resize("<data:post.thumbnailUrl/>","<data:post.title/>"));
</script>
</a>
</div>
</li>
</b:if></b:if>
<b:if cond='data:blog.pageType == "item"'>
<div class='post clearfix' id='post'>
<div class='title'>
<h2><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>
</h2>
</div>
<div class='revbox clearfix'>
<div class='revleft'>
<span><strong>Author:</strong> <data:post.author/> </span>
<span><strong>Genre:</strong>
<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>
</span>
</div>
</div>
<div class='entry'>
<p><data:post.body/></p>
<div class='clear'/>
</div>
<div class='postmeta'>
<span class='author'>Posted by <data:post.author/> </span>
<span class='clock'> Posted on <script type='text/javascript'>
var timestamp = "<data:post.dateHeader/>";
if (timestamp != '') {
var timesplit = timestamp.split(",");
var date_yyyy = timesplit[2];
var timesplit = timesplit[1].split(" ");
var date_dd = timesplit[2];
var date_mmm = timesplit[1].substring(0, 3);
}
</script>
<script type='text/javascript'>document.write(date_dd);</script>
<script type='text/javascript'>document.write(date_mmm);</script> </span>
<span class='comm'><b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</b:if></span>
</div>
</div>
<div class='clear'/>
</b:if>
</b:includable>
------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------
UPPER B INCLUDE TAG HAS TWO PART FIRST PART DEALS
WITH FULL POST AND SECOND POST CODE SHOWS THUMBNAIL POST CODE
LOTS OF TAG SUCH AS POST TILTE, POST COMMENTS,POST LABEL AND TAG CODE
-------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------
YOU NEED TO UNDER STAND THIS CODE SOME EXPERIMENT AND NEED TO
BRIEF AND SIMPLE THIS CODE THERE FORE YOU CAN DELETE SOME CODE
PARTS ,YOU CAN CHANGE CODE LINE ARRANGEMENT
---------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------
EXPERIMENT (1):
YOU CAN WRITE THIS CODE IN THIS WAY AND SHOW RESULT
READ BELOW CODE
----------------------------------------------------------------------------------------------------------
<b:includable id='post' var='post'>
<b:if cond='data:blog.pageType == "static_page"'>
<a expr:href='data:post.link'><data:post.title/></a>
<div class='entry'>
<data:post.body/>
</div>
<script type='text/javascript'>
(function() {
var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];
s.type = 'text/javascript';
s.async = true;
s.src = 'http://widgets.digg.com/buttons.js';
s1.parentNode.insertBefore(s, s1);
})();
</script>
</b:if>
<b:if cond='data:post.isFirstPost'> </b:if>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<li class='box' id='post'>
<div class='postim' id='post'>
<a expr:href='data:post.url'><data:post.title/></a>
<a expr:href='data:post.url'>
<script type='text/javascript'>
//<![CDATA[
function bp_thumbnail_resize(image_url,post_title)
{
var image_size=150;
var show_default_thumbnail=true;
var default_thumbnail="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrwRZSbbVWL5tfffHhg_jp-OnuuZLIGkwpJFjoCueai4x9ssU3_RssOTmC55it0Qp-PgxpmlEVE9k9nqIiYUWPT0WfgYHFZdf6QRGx3X74bi7NFBVjUVGmoOWsefHHL-Cn_9lJRYcNTm8/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/')+'" class="bookcover" alt="'+post_title+'"/>';
if(image_url!="") return image_tag; else return "";
}
//]]>
</script>
<script type='text/javascript'>
document.write(bp_thumbnail_resize("<data:post.thumbnailUrl/>","<data:post.title/>"));
</script>
</a>
</div>
</li>
</b:if></b:if>
<b:if cond='data:blog.pageType == "item"'>
<div class='entry'>
<data:post.body/>
</div>
</b:if>
</b:includable>
---------------------------------------------------------------------------------------------------------
EXPERIMENT (2):
WITHOUT THIS JAVA CODE
<script type='text/javascript'>
(function() {
var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];
s.type = 'text/javascript';
s.async = true;
s.src = 'http://widgets.digg.com/buttons.js';
s1.parentNode.insertBefore(s, s1);
})();
</script>
YOU CAN WRITE THIS CODE IN THIS WAY AND SHOW RESULT
READ BELOW CODE
----------------------------------------------------------------------------------------------------------
<b:includable id='post' var='post'>
<b:if cond='data:post.isFirstPost'> </b:if>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<li class='box' id='post'>
<div class='postim' id='post'>
<a expr:href='data:post.url'><data:post.title/></a>
<a expr:href='data:post.url'>
<script type='text/javascript'>
//<![CDATA[
function bp_thumbnail_resize(image_url,post_title)
{
var image_size=150;
var show_default_thumbnail=true;
var default_thumbnail="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrwRZSbbVWL5tfffHhg_jp-OnuuZLIGkwpJFjoCueai4x9ssU3_RssOTmC55it0Qp-PgxpmlEVE9k9nqIiYUWPT0WfgYHFZdf6QRGx3X74bi7NFBVjUVGmoOWsefHHL-Cn_9lJRYcNTm8/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/')+'" class="bookcover" alt="'+post_title+'"/>';
if(image_url!="") return image_tag; else return "";
}
//]]>
</script>
<script type='text/javascript'>
document.write(bp_thumbnail_resize("<data:post.thumbnailUrl/>","<data:post.title/>"));
</script>
</a>
</div>
</li>
</b:if></b:if>
<b:if cond='data:blog.pageType == "static_page"'>
<a expr:href='data:post.link'><data:post.title/></a>
<div class='entry'>
<data:post.body/>
</div>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<div class='entry'>
<data:post.body/>
</div>
</b:if>
</b:includable>
---------------------------------------------------------------------------------------------------------
EXPERIMENT (3):
CHANGE DIV CLASS IN <Ul , </Ul>
<ul class='box' id='post'>
<ul class='postim' id='post'>
<ul class='entry'>
----------------------------------------------------------------------------------------------------------
<b:includable id='post' var='post'>
<b:if cond='data:post.isFirstPost'> </b:if>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<ul class='box' id='post'>
<ul class='postim' id='post'>
<a expr:href='data:post.url'><data:post.title/></a>
<a expr:href='data:post.url'>
<script type='text/javascript'>
//<![CDATA[
function bp_thumbnail_resize(image_url,post_title)
{
var image_size=150;
var show_default_thumbnail=true;
var default_thumbnail="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrwRZSbbVWL5tfffHhg_jp-OnuuZLIGkwpJFjoCueai4x9ssU3_RssOTmC55it0Qp-PgxpmlEVE9k9nqIiYUWPT0WfgYHFZdf6QRGx3X74bi7NFBVjUVGmoOWsefHHL-Cn_9lJRYcNTm8/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/')+'" class="bookcover" alt="'+post_title+'"/>';
if(image_url!="") return image_tag; else return "";
}
//]]>
</script>
<script type='text/javascript'>
document.write(bp_thumbnail_resize("<data:post.thumbnailUrl/>","<data:post.title/>"));
</script>
</a>
</ul>
</ul>
</b:if></b:if>
<b:if cond='data:blog.pageType == "static_page"'>
<a expr:href='data:post.link'><data:post.title/></a>
<ul class='entry'>
<data:post.body/>
</ul>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<ul class='entry'>
<data:post.body/>
</ul>
</b:if>
</b:includable>
------------------------------------------------------------------------------------------------------------------PICTURES IN THIS TUTORIAL:
-----------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------
<b:if cond='data:blog.pageType == "static_page"'>
<div class='post' id='post'>
<div class='title'>
<h2><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>
</h2>
</div>
<div class='entry'>
<p><data:post.body/></p>
<div class='clear'/>
</div>
<div class='titlemeta clearfix'>
<table border='0'>
<tr>
<td><div style='margin-left:35px;'>
<script type='text/javascript'>
(function() {
var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];
s.type = 'text/javascript';
s.async = true;
s.src = 'http://widgets.digg.com/buttons.js';
s1.parentNode.insertBefore(s, s1);
})();
</script>
</div></td>
</tr>
</table>
</div>
</div>
<div class='clear'/>
</b:if>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<li class='box' id='post'>
<div class='postim' id='post'>
<div class='btitle'>
<h2><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></h2>
</div>
<span class='inwriter'><data:post.author/></span>
<a expr:href='data:post.url'>
<b:if cond='data:post.isFirstPost'>
<script type='text/javascript'>
//<![CDATA[
function bp_thumbnail_resize(image_url,post_title)
{
var image_size=150;
var show_default_thumbnail=true;
var default_thumbnail="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrwRZSbbVWL5tfffHhg_jp-OnuuZLIGkwpJFjoCueai4x9ssU3_RssOTmC55it0Qp-PgxpmlEVE9k9nqIiYUWPT0WfgYHFZdf6QRGx3X74bi7NFBVjUVGmoOWsefHHL-Cn_9lJRYcNTm8/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/')+'" class="bookcover" alt="'+post_title+'"/>';
if(image_url!="") return image_tag; else return "";
}
//]]>
</script>
</b:if>
<script type='text/javascript'>
document.write(bp_thumbnail_resize("<data:post.thumbnailUrl/>","<data:post.title/>"));
</script>
</a>
</div>
</li>
</b:if></b:if>
<b:if cond='data:blog.pageType == "item"'>
<div class='post clearfix' id='post'>
<div class='title'>
<h2><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>
</h2>
</div>
<div class='revbox clearfix'>
<div class='revleft'>
<span><strong>Author:</strong> <data:post.author/> </span>
<span><strong>Genre:</strong>
<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>
</span>
</div>
</div>
<div class='entry'>
<p><data:post.body/></p>
<div class='clear'/>
</div>
<div class='postmeta'>
<span class='author'>Posted by <data:post.author/> </span>
<span class='clock'> Posted on <script type='text/javascript'>
var timestamp = "<data:post.dateHeader/>";
if (timestamp != '') {
var timesplit = timestamp.split(",");
var date_yyyy = timesplit[2];
var timesplit = timesplit[1].split(" ");
var date_dd = timesplit[2];
var date_mmm = timesplit[1].substring(0, 3);
}
</script>
<script type='text/javascript'>document.write(date_dd);</script>
<script type='text/javascript'>document.write(date_mmm);</script> </span>
<span class='comm'><b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</b:if></span>
</div>
</div>
<div class='clear'/>
</b:if>
</b:includable>
------------------------------------------------------------------------------------------------------------------------------
TUTORIAL FINISH
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
UPPER B INCLUDE TAG HAS TWO PART FIRST PART DEALS
WITH FULL POST AND SECOND POST CODE SHOWS THUMBNAIL POST CODE
LOTS OF TAG SUCH AS POST TILTE, POST COMMENTS,POST LABEL AND TAG CODE
-------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------
YOU NEED TO UNDER STAND THIS CODE SOME EXPERIMENT AND NEED TO
BRIEF AND SIMPLE THIS CODE THERE FORE YOU CAN DELETE SOME CODE
PARTS ,YOU CAN CHANGE CODE LINE ARRANGEMENT
---------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------
EXPERIMENT (1):
YOU CAN WRITE THIS CODE IN THIS WAY AND SHOW RESULT
READ BELOW CODE
----------------------------------------------------------------------------------------------------------
<b:includable id='post' var='post'>
<b:if cond='data:blog.pageType == "static_page"'>
<a expr:href='data:post.link'><data:post.title/></a>
<div class='entry'>
<data:post.body/>
</div>
<script type='text/javascript'>
(function() {
var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];
s.type = 'text/javascript';
s.async = true;
s.src = 'http://widgets.digg.com/buttons.js';
s1.parentNode.insertBefore(s, s1);
})();
</script>
</b:if>
<b:if cond='data:post.isFirstPost'> </b:if>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<li class='box' id='post'>
<div class='postim' id='post'>
<a expr:href='data:post.url'><data:post.title/></a>
<a expr:href='data:post.url'>
<script type='text/javascript'>
//<![CDATA[
function bp_thumbnail_resize(image_url,post_title)
{
var image_size=150;
var show_default_thumbnail=true;
var default_thumbnail="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrwRZSbbVWL5tfffHhg_jp-OnuuZLIGkwpJFjoCueai4x9ssU3_RssOTmC55it0Qp-PgxpmlEVE9k9nqIiYUWPT0WfgYHFZdf6QRGx3X74bi7NFBVjUVGmoOWsefHHL-Cn_9lJRYcNTm8/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/')+'" class="bookcover" alt="'+post_title+'"/>';
if(image_url!="") return image_tag; else return "";
}
//]]>
</script>
<script type='text/javascript'>
document.write(bp_thumbnail_resize("<data:post.thumbnailUrl/>","<data:post.title/>"));
</script>
</a>
</div>
</li>
</b:if></b:if>
<b:if cond='data:blog.pageType == "item"'>
<div class='entry'>
<data:post.body/>
</div>
</b:if>
</b:includable>
---------------------------------------------------------------------------------------------------------
EXPERIMENT (2):
WITHOUT THIS JAVA CODE
<script type='text/javascript'>
(function() {
var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];
s.type = 'text/javascript';
s.async = true;
s.src = 'http://widgets.digg.com/buttons.js';
s1.parentNode.insertBefore(s, s1);
})();
</script>
READ BELOW CODE
----------------------------------------------------------------------------------------------------------
<b:includable id='post' var='post'>
<b:if cond='data:post.isFirstPost'> </b:if>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<li class='box' id='post'>
<div class='postim' id='post'>
<a expr:href='data:post.url'><data:post.title/></a>
<a expr:href='data:post.url'>
<script type='text/javascript'>
//<![CDATA[
function bp_thumbnail_resize(image_url,post_title)
{
var image_size=150;
var show_default_thumbnail=true;
var default_thumbnail="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrwRZSbbVWL5tfffHhg_jp-OnuuZLIGkwpJFjoCueai4x9ssU3_RssOTmC55it0Qp-PgxpmlEVE9k9nqIiYUWPT0WfgYHFZdf6QRGx3X74bi7NFBVjUVGmoOWsefHHL-Cn_9lJRYcNTm8/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/')+'" class="bookcover" alt="'+post_title+'"/>';
if(image_url!="") return image_tag; else return "";
}
//]]>
</script>
<script type='text/javascript'>
document.write(bp_thumbnail_resize("<data:post.thumbnailUrl/>","<data:post.title/>"));
</script>
</a>
</div>
</li>
</b:if></b:if>
<b:if cond='data:blog.pageType == "static_page"'>
<a expr:href='data:post.link'><data:post.title/></a>
<div class='entry'>
<data:post.body/>
</div>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<div class='entry'>
<data:post.body/>
</div>
</b:if>
</b:includable>
---------------------------------------------------------------------------------------------------------
EXPERIMENT (3):
CHANGE DIV CLASS IN <Ul , </Ul>
<ul class='box' id='post'>
<ul class='postim' id='post'>
<ul class='entry'>
----------------------------------------------------------------------------------------------------------
<b:includable id='post' var='post'>
<b:if cond='data:post.isFirstPost'> </b:if>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<ul class='box' id='post'>
<ul class='postim' id='post'>
<a expr:href='data:post.url'><data:post.title/></a>
<a expr:href='data:post.url'>
<script type='text/javascript'>
//<![CDATA[
function bp_thumbnail_resize(image_url,post_title)
{
var image_size=150;
var show_default_thumbnail=true;
var default_thumbnail="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrwRZSbbVWL5tfffHhg_jp-OnuuZLIGkwpJFjoCueai4x9ssU3_RssOTmC55it0Qp-PgxpmlEVE9k9nqIiYUWPT0WfgYHFZdf6QRGx3X74bi7NFBVjUVGmoOWsefHHL-Cn_9lJRYcNTm8/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/')+'" class="bookcover" alt="'+post_title+'"/>';
if(image_url!="") return image_tag; else return "";
}
//]]>
</script>
<script type='text/javascript'>
document.write(bp_thumbnail_resize("<data:post.thumbnailUrl/>","<data:post.title/>"));
</script>
</a>
</ul>
</ul>
</b:if></b:if>
<b:if cond='data:blog.pageType == "static_page"'>
<a expr:href='data:post.link'><data:post.title/></a>
<ul class='entry'>
<data:post.body/>
</ul>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<ul class='entry'>
<data:post.body/>
</ul>
</b:if>
</b:includable>
------------------------------------------------------------------------------------------------------------------PICTURES IN THIS TUTORIAL:
-----------------------------------------------------------------------------------------------------------------
Related movie you might like to see :

DYNAMIC VIEWS BLOGGER TEMPLATE

FLASH PLAYER SWF FILE DOWNLOAD ARCH...

WHACK A RAT CSS GAME

GOOGLE FILTER BUTTON IN IMAGE SEARC...

BUTTON PADDING CHANGE HEIGHT WIDTH

INPUT BUTTON VALUE SWAP

CSS SYNTAX HIGHLIGHT CHANGE IN NOT...

WEB IMAGE DOWNLOADER

TEXT COMPARE OR DUPLI TEXT FINDER

BLOCK JAVA SCRIPT BY GOOGLE CHROME

MOUSE COORDINATES IN JAVA SCRIPT

RELATED POST WIDGET LIST WITHOUT TH...
?
+
X
Recommended for you
Loading..
Related Post for Blog Post Thumb Nails Style 2
UnityAssetsExplorer Read More: https://yadi.sk/d/pQCvUUC02D3aY …
DRAG AND DROP HTML GAME ------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE: READ MORE:…
MAKE DLL FILE AND OPEN IN VISUAL BASIC 2008-2010 READ MORE: ----------------------------------------------------------------------------------------------------------------------- http://www.solvusoft.com/en/file-ex…
SHOPPING CART BLOGGER TEMPLATE WITH THUMBNAIL CART PAGE ---------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE REMAINING PART: http://fbgadgets.blogs…
DRAG AND DROP WITH JQUERY AND HTML TUTORIAL ------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE: READ MORE: http://fbgadgets.blogspot.…
DINO PAIRS MATCHING GAME ------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE: READ MORE: http://fbgadgets.blogspot…
IMAGE SCROLL BOX WITH MOUSE CURSOR ----------------------------------------------------------------------------------------------------- SAVE AS BELOW CODE IN HTML PAGE READ MORE: http://www.freebits.co.u…
How to open a .DLL or .EXE file in Resource Editor READ MORE: ---------------------------------------------------------------------------------------------------------- http://www.solvusoft.com/en/file-extensions/file-extensio…
SHOPPING CART IN SIDEBAR TEMPLATE ------------------------------------------------------------------------------------------------------------ COPY AND PASTE BELOW CODE: REMAINING PART http://fbgadgets.blogspo…
FANCY BOX JS FIDDLE - jsFiddle demo //![CDATA[ $(window).load(function(){ $(document).ready(function() { $(".fancybox").fancybox({ openEffect: 'none', closeEffe…
RECAPTCHA TOOL USE IN WEBSTIES -------------------------------------------------------------------------------------------------------- READ MORE: https://www.wikidot.com/default--flow/logi…
CARD GAMES WITH DRAG AND DROP WITH JQUERY AND HTML ------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE: READ MORE: http://fbgadgets.blogspot.…
RECAPTCHA CONTACT FORM Once you've filled out the form, hit the Send! button. If you submitted the form by typing both of the words incorrectly, you will see an error page asking you fi…
DRAG AND DROP PRACTICE GAME WITH IMAGE ------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE: READ MORE: http://fbgadgets.blogspo…
DRAG AND DROP HTML GAME ------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE: READ MORE: http://fbgadgets.blogspot.…
BLOGGER GRID LIST SHOPPING CART TEMPLATE ---------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE READ MORE: http://fbgadgets.blogspot.co.u…
ONLINE ZIP OPNER ---------------------------------------------------------------------------------------------------------- FIND THIS RED WORD IN GOOGLE online zip opener READ MORE: http://onl…
DRAG AND DROP IMAGES ABOVE BOX TO BELOW BOX WITH JQUERY ------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE: READ MORE: http://fbgadgets.blogs…
Dino Pairs Matching Game ------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE: READ MORE: http://fbgadgets.blogspot.…
Drag and Drop Practice Game With Image ------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE: READ MORE: http://fbgadgets.blogspot.c…
HOW USE SHOPPING CART BLOGGER TEMPLATE PART 2 ---------------------------------------------------------------------------------------------------------- CREATE EMPTY PAGE IN BLOG AND PASTE BELOW CODE IN HTML SECTION AND G…
DRAG AND DROP HTML GAME ------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE: READ MORE: http://fbgadgets.blogspot.c…
Random/Recent/Feature Posts Button In Blogger ------------------------------------------------------------------------------------------------------- 1-ADD HTML/JAVA WIDGET IN BLOG LAYOUT 2-COPY AND PASTE BLOW CODE IN THIS…
Drag and Drop Practice Game With Image ------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE: READ MORE: http://fbgadgets.blogspot.…
WORDPRESS THEME GENERATOR ----------------------------------------------------------------------------------------------------------- READ MORE: --------------------------------------------------------…
GENERIC POST TITLE UNDER AUTO READ POST IMAGE TEMPLATE ----------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE -----------------------------------------------…
Related PostWidget WithFirst Big Thumbnail ----------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE READ MORE: http://fbgadgets.blogspot.co.u…
DRAG AND DROP HTML GAME ------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE: READ MORE: http://fbgadgets.blogspot.c…
SHOPPING CART BLOGGER TEMPLATE PART 1 READ MORE: ------------------------------------------------------------------------------------------------------------ http://fbgadgets.blogspot.co.uk/2014/08/shopping-cart-bl…
SHOPPING CART BLOGGER TEMPLATE WITH THUMBNAIL CART PAGE ---------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE REMAINING PART: http://fbgadgets.blogspot.…
SHOPPING CART IN SIDEBAR TEMPLATE METHOD HOW TO ADD POST IN THIS TEMPLATE SHOPPING CART IN SIDEBAR TEMPLATE http://fbgadgets.blogspot.co.uk/2014/08/shopping-cart-template-with-view-cart.html http://fbgadge…
Sprite Sheet Animation ------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE: READ MORE: http://fbgadgets.blogspot.…
DRAG AND DROP HTML GAME ------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE: READ MORE: http://fbgadgets.blogs…
DRAG AND DROP IMAGES ABOVE BOX TO BELOW BOX WITH JQUERY ------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE: READ MORE: http://fbgadgets.blogspot.…
DRAG AND DROP PRACTICE GAME WITH IMAGE ------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE: READ MORE: http://fbgadgets.blogspot.c…
BLOGGER GRID LIST SHOPPING CART TEMPLATE ---------------------------------------------------------------------------------------------------------- READ MORE: http://fbgadgets.blogspot.co.uk/2014/08/blogger-grid-list…
JAVA COLOR PICKER WITH jQuery UI Slider - Colorpicker jQuery UI Selectable - Serialize #red, #green, #blue { float: left; clear: left; width: 300px; margin: 15px; } #swatch { width: 1…
Labels:
B
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.