Postagens no Blogger em forma de  grade
Autor: Elke di Barros | Publicado: 2016-07-24T12:37:00-03:00






DEMO&nbsp;DEMO&nbsp;


Um excelente tutorial para dar um ar mais profissional a seu blog. São as postagens do Blogger em forma de grade. Dão uma sintetizada em seu blog, fazendo com que o leitor tenha um apanhado de suas postagens, sem parecer cansativo ou desgastante, além da economia de espaço...

O hack foi desenvolvido pelo blog Helplogger


Vá até o "Modelo de seu blog", clique em "Editar HTML"    














Procure por &lt;/head&gt;&nbsp;e acima dele cole o código abaixo.






&lt;script type='text/javascript'&gt;
posts_no_thumb_sum = 100;
posts_thumb_sum = 100;
&lt;/script&gt;

&lt;script type='text/javascript'&gt;
//&lt;![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("&lt;")!=-1)
{
var s = strx.split("&lt;");
for(var i=0;i&lt;s.length;i++){
if(s[i].indexOf("&gt;")!=-1){
s[i] = s[i].substring(s[i].indexOf("&gt;")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop &lt; strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' &amp;&amp; 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&gt;=1) {
imgtag = '&lt;span class="posts-thumb" style="float:left; margin-right: 10px;"&gt;&lt;a href="'+ pURL +'"&gt;&lt;img src="'+img[0].src+'" /&gt;&lt;/a&gt;&lt;/span&gt;';
summ = posts_thumb_sum;
}

else {
imgtag = '&lt;span class="posts-thumb" style="float:left; margin-right: 10px;"&gt;&lt;a href="'+ pURL +'" title="'+ pTITLE+'"&gt;&lt;img src="http://2.bp.blogspot.com/-Gbn3dT1R9Yo/VPXSJ8lih_I/AAAAAAAALDQ/24wFWdfFvu4/s1600/sorry-image-not-available.png" style="margin-top: -30px;" /&gt;&lt;/a&gt;&lt;/span&gt;';
summ = posts_thumb_sum;
}

var summary = imgtag + '&lt;a href="'+ pURL +'"&gt;&lt;div class="post-summary-text"&gt;' + removeHtmlTag(div.innerHTML,summ) + '&lt;/div&gt;&lt;/a&gt;';
div.innerHTML = summary;
}
//]]&gt;
&lt;/script&gt;

Salve!



Agora clique em CTRL&nbsp;+F e procure pelo seguinte código:&nbsp;&lt;data:post.body/&gt;
Pode ser que você encontre este código 3 vezes em seu template. Substitua apenas o segundo e o terceiro código.











&lt;b:if cond='data:blog.pageType != &amp;quot;static_page&amp;quot;'&gt;
&nbsp; &nbsp; &lt;b:if cond='data:blog.pageType != &amp;quot;item&amp;quot;'&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;div expr:id='&amp;quot;summary&amp;quot; + data:post.id'&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;data:post.body/&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;script type='text/javascript'&gt;createSummaryAndThumb(&amp;quot;summary&lt;data:post.id/&gt;&amp;quot;,&amp;quot;&lt;data:post.url/&gt;&amp;quot;);&lt;/script&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;b:if cond='data:post.allowComments'&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;data:post.numComments/&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/a&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;/b:if&gt;
&nbsp; &nbsp; &lt;/b:if&gt;
&lt;/b:if&gt;
&lt;b:if cond='data:blog.pageType == &amp;quot;item&amp;quot;'&gt;
&nbsp; &nbsp; &lt;data:post.body/&gt;
&lt;/b:if&gt;
&lt;b:if cond='data:blog.pageType == &amp;quot;static_page&amp;quot;'&gt;
&nbsp; &nbsp; &lt;data:post.body/&gt;
&lt;/b:if&gt;

Salve!

Agora escolha o modelo de seu agrado e acima de&nbsp;&lt;/head&gt; cole o código ao qual você quer como modelo de postagens.




&lt;b:if cond='data:blog.pageType != &amp;quot;static_page&amp;quot;'&gt;
&lt;b:if cond='data:blog.pageType!= &amp;quot;item&amp;quot;'&gt;
&lt;style&gt;
#blog-pager {
clear:both;
}
.post {
height:auto;
width:31%;
display:inline-block;
text-decoration:none;
float:left;
margin:0 1.1% 2%;
padding:0!important;
}
h3.post-title a {
font-size:95%;
font-family: &amp;#39;Open Sans Condensed&amp;#39;, sans-serif;
text-transform:uppercase;
color:#fff;
padding:0;
text-shadow: 2px 2px 3px #222;
}
h3.post-title {
height: 22px;
text-align:center;
position:absolute;
top:1%;
width:100%;
z-index:101;
overflow:hidden;
margin:0!important;
padding:10px 0;
}
.date-header {
visibility:hidden;
height:0!important;
width:0!important;
margin:0!important;
padding:0!important;
}
.posts-thumb {
width:100%!important;
height:190px!important;
overflow:hidden;
clear:both;
}
.post-body {
border-radius:2px;
box-shadow:0 5px 4px 1px rgba(0,0,0,0.1);
position:relative;
overflow: hidden;
}
.post-body a {
text-decoration: none;
}
.post-body img {
display:block;
width:100%!important;
height:auto!important;
max-width:800px!important;
max-height:400px!important;
min-width:190px!important;
min-height:190px!important;
border:none;
outline:none;
position:relative;
margin: 0px;
padding:0;
}
.post-summary-text {
cursor: pointer;
background-color: rgba(44, 77, 163, 0.8);
color:#fff;
font-size:120%!important;
font-family: &amp;#39;Open Sans Condensed&amp;#39;, sans-serif;
clear:both;
overflow:hidden;
padding:25% 10% 0%;
left: 0;
position: absolute;
text-align: center;
vertical-align: bottom;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
top: 0;
transform: scale(1);
opacity: 0;
z-index: 10;
height: 100%;
transition: all 300ms ease-out 0s;
}
.post-summary-text:hover {
opacity: 1;
}
a.comment-bubble {
color:#fff;
text-decoration:none;
font-size:100%;
width: 100%;
text-align: center;
position:absolute;
top:165px;
left: 0px;
text-shadow:1px 2px 1px #333;
font-family: &amp;#39;Pacifico&amp;#39;, cursive;
z-index: 122;
}
a.comment-bubble:before {
content: &amp;quot;Comments: &amp;quot;;
}
.post-header,.post-footer {
display:none;
}
&lt;/style&gt;&lt;/b:if&gt;&lt;/b:if&gt;
&lt;link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/&gt;
&lt;link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'/&gt;



Salve!

Mais modelos pegue na página oficial do desenvolvedor clicando aqui