Template loja online - postagem em forma de grade com botao comprar e com preço

1º procure por </head>

Acima dele, cole o código abaixo: 

<script type='text/javascript'> posts_no_thumb_sum = 100; posts_thumb_sum = 100; </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, pURL, pTITLE){ var div = document.getElementById(pID); var imgtag = ""; var img = div.getElementsByTagName("img"); var summ = posts_no_thumb_sum; if(img.length>=1) { imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'"><img src="'+img[0].src+'" /></a></span>'; summ = posts_thumb_sum; } else { imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYUMFz-q1kb423JeHU5vFKqa5-S7lXJ7BgSwnOwEIcsl32kiViL0EJ6AYy6Qmkzhf7BaNEx3XULA8DFqP2KIwOdcqaXyUSKW-J81ViVai4axTvQb7FjsgTwqD1BXQ4rSpkq22XAFc2x4uD/s1600/sorry-image-not-available.png" style="margin-top: -30px;" /></a></span>'; summ = posts_thumb_sum; } var summary = imgtag + '<a href="'+ pURL +'"><div class="post-summary-text"> ' + removeHtmlTag(div.innerHTML,summ) + '</div> </a>'; div.innerHTML = summary; } //]]> </script> <b:if cond='data:blog.pageType != "static_page"'> <b:if cond='data:blog.pageType!= "item"'> <style> #blog-pager { clear:both; } .post { height: auto; width:23%; overflow: hidden; display:inline-block; text-decoration:none; float:left; margin:2px 2px.2px 2px; padding: 1px !important; border:1px solid #bbb; } .post:hover{border:1px solid #999; background:#fff;} .post-footer{display:none} .post-body{border-top:none;height:160px;overflow:hidden;width:120px;padding:0px;margin:0 0 .3cm;} h3.post-title a { text-align:center; font-size:14px; font-family: Oswald; font-weight: bold; color:#111; text-shadow:none; line-height:15px; } h3.post-title a:hover {color:#014aa0} h3.post-title { height: 25px; padding:2px; text-align:center; line-height:8px; width:100%; font:14px; padding-bottom: 4%; } .date-header { display: none; } .post-body a { text-decoration: none; } .posts-thumb { width:100%!important; height:150px!important; overflow:hidden; clear:both; } .post-body img { display:block; width:100%!important; height:auto!important; max-width:800px!important; max-height:400px!important; min-width:50px!important; min-height:30px!important; border:none; outline:none; position:relative; margin: 0px; padding:0; } .post-summary-text { color:#777; font-size:100%!important; font-family: 'Open Sans Condensed', sans-serif; text-align:center; clear:both; overflow:hidden; margin:5px 0 0; padding:7% 10%; } a.comment-bubble { color:#fff; text-decoration:none; font-size:100%; font-weight: bold; right:10px; position:absolute; top:165px; text-shadow:1px 2px 1px #333; font-family: 'Open Sans Condensed', sans-serif; } a.comment-bubble:before { content: "Comments: "; } .post-header,.post-footer { display:none; } /* Postagem em grade FIM ----------------------------------------------- */ /* Botão comprar ----------------------------------------------- */ a.detail{background:#999 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHdeYJDhA5KNVuDdN5ebSMOYufcXsP_C5DtVa4t6m7zWYww_zFjE_vDoMIa3nt0ChwpzCRqBRjPRRNrbxOHqhAUSTMULW7uEKgRRUR7pqeaGhF-td4_-KRTDtpODZwvCkAWF2r2uhe0gCW/s1600/blur.png) repeat-x top left;border:1px solid #333;color:#000;font-size:11px;text-align:center10width:60px;margin:10px 5px 0px 0;float:right;padding:4px 5px;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;} a.detail:hover{background:#fff;border:1px solid #333;} /* Botão comprar FIM ----------------------------------------------- */ </style></b:if></b:if>

Agora vamos personalizar o botão de preço

2º procure por ]]></b:skin>

acima dele cole o código abaixo:

.item_price{ display:block; height:10px; position:absolute; color:#014aa0; font:bold 16px Arial; float:right; padding:0px; bottom:5px; width:100%; text-align:center }

3 procure por <data:post.body/>

<b:if cond='data:blog.pageType != "static_page"'> <b:if cond='data:blog.pageType != "item"'> <div expr:id='"summary" + data:post.id'> <data:post.body/> </div> <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>","<data:post.url/>");</script> <b:if cond='data:post.allowComments'> <a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'> <data:post.numComments/> </a> </b:if> </b:if> </b:if> <b:if cond='data:blog.pageType == "item"'> <data:post.body/> </b:if> <b:if cond='data:blog.pageType == "static_page"'> <data:post.body/> </b:if> <b:if cond='data:blog.pageType != "static_page"'> <b:if cond='data:blog.pageType != "item"'> <a class='detail' expr:href='data:post.url' type='button'>Comprar</a> </b:if></b:if>

4 º procure por <div style='clear: both;'/> <!-- clear for photos floats --></div>

<b:if cond='data:blog.pageType != "static_page"'> <b:if cond='data:blog.pageType != "item"'> <a class='detail' expr:href='data:post.url' type='button'>Comprar</a> </b:if></b:if>

OBS: para aparecer o preço na página inicial é necessário que você coloque o código abaixo dentro de cada postagem qui você quiser q apareça o preço:

<span class="item_price">65,00R$</span>
Clique em "Visualizar", Se estiver tudo normal clique em "Salvar Modelo".

Agora e só você ir ao seu blog e veja como ficou.

" Deixe seu comentário, para que nos motive a melhorar cada vez mais o nosso trabalho.