Trago para vocês um pacote de mudanças para o post como colocar o autor do blog abaixo do título do post, colocar o hack "leia mais" alinhar os comentários, marcadores e leia mais no footer do post.
Vá até o Modelo de seu blog, clique em Editar modelo
Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Essa dica é para o template Simple, do novo Blogger, implementado em julho de 2011
Agora procure por:
]]></b:skin>
Substitua então pelo código abaixo:
/*Showlink-----------------------------------------------------*/
#showlink { margin: 0 34px 0 0; padding: 0;}
#showlink a{
float: right;
position: relative;
background-color: #ccc;/*cor do fundo*/
/* la altura */
height: 24px;
line-height: 24px;
padding:0 10px 0px 12px;
margin: 0px;
color: #000;/*cor texto*/
font-size:11px;
font-family: Arial;
text-decoration: none;
-moz-border-radius-bottomleft: 4px;
-webkit-border-bottom-left-radius: 4px;
border-bottom-left-radius: 4px;
-moz-border-radius-topleft: 4px;
-webkit-border-top-left-radius: 4px;
border-top-left-radius: 4px;
}
#showlink a:before {
border-color: transparent transparent transparent #ccc;/*cor ponta seta*/
border-style: solid;
border-width:12px 0px 12px 12px;
content: "";
float: right;
right: -12px;
height: 0;
position: absolute;
top: 0;
width: 0;
}
#showlink a:after {
background-color: #fff; /* cor bolinha */
content: "";
float: right;
right: 0;
position: absolute;
top: 10px;
height: 4px;
width: 4px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
}
#showlink a:hover{
background-color: #555;/*cor seta passar mouse*/
}
#showlink a:hover:before {
border-color: transparent transparent transparent #555 ;/*cor ponta seta*/
}
/*Postlabel-------------------------------*/
.post-labels {
margin: 0;
padding: 30px 2px 20px 2px;
}
.post-labels a {
float: left;
position: relative;
background-color: #ccc;/*cor do fundo*/
/* la altura */
height: 24px;
line-height: 24px;
padding:0 10px 0 12px;
margin: 0 5px 0 20px;
color: #000;/*cor texto*/
font-size:11px;
font-family: Arial;
text-decoration: none;
-moz-border-radius-bottomright: 4px;
-webkit-border-bottom-right-radius: 4px;
border-bottom-right-radius: 4px;
-moz-border-radius-topright: 4px;
-webkit-border-top-right-radius: 4px;
border-top-right-radius: 4px;
}
.post-labels a:before {
border-color: transparent #ccc transparent transparent;/*cor ponta seta*/
border-style: solid;
border-width: 12px 12px 12px 0;
content: "";
float: left;
left:-12px;
height: 0;
position: absolute;
top: 0;
width: 0;
}
.post-labels a:after {
background-color: #FFF; /* cor bolinha */
content: "";
float: left;
left: 0;
position: absolute;
top: 10px;
height: 4px;
width: 4px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
}
.post-labels a:hover{
background-color: #555;/*cor seta passar mouse*/
}
.post-labels a:hover:before {
border-color: transparent #555 transparent transparent;/*cor ponta seta*/
}
.post-timestamp{ padding: 3px 6px 3px 10px;}
/*comentario-------------------------------------------*/
.post-comment-link{
background:#ccc; /* cor bolinha */
font-size:12px;
margin: 1px 4px 0 6px;
text-align:center;
padding:4px 7px 6px 5px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.post-comment-link a{color: #000;}
.post-timestamp{margin: 0 2px 0 2px;}
]]></b:skin>
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 480;
summary_img = 480;
img_thumb_height = 150;
img_thumb_width =150;
</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");
var summ = summary_noimg;
if(img.length>=1) {
if(thumbnail_mode == "float") {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
} else {
imgtag = '<div style="padding:5px" align="center"><img style="max-width:'+img_thumb_width+'px; max-height:'+img_thumb_height+'px;" src="'+img[0].src+'" /></div>';
summ = summary_img;
}}var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;}
//]]>
</script>
Salve.
Agora vamos colocar o autor do post abaixo do título do blog.
Clique em "Expandir modelos de widgets"
Procure por todo esse trecho abaixo, depois copie e apague de onde estiver. (para facilitar procure a primeira linha grifada em verde)
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<b:if cond='data:post.authorProfileUrl'>
<span class='fn'>
<a expr:href='data:post.authorProfileUrl' itemprop='author' rel='author' title='author profile'>
<data:post.author/>
</a>
</span>
<b:else/>
<span class='fn'><data:post.author/></span>
</b:if>
</b:if>
</span> <span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' itemprop='url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>
</b:if>
</b:if>
</span><span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' itemprop='url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>
</b:if>
</b:if>
</span>
Procure então por:
<div class='post-header'>
E abaixo dele, cole o código que você acabou de copiar.
Salve !
Vamos agora colocar todos os elementos como comentários, marcadores e leia mais na mesma linha.
Agora procure por:
<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'>
<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> <span class='post-icons'>
<!-- email post links -->
<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='13' src='http://img1.blogblog.com/img/icon18_email.gif' width='18'/>
</a>
</span>
</b:if> <!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>
</span>
Apague:
Procure então por:
<div class='post-footer-line post-footer-line-2'/>
E substitua pelo código abaixo.
<div class='post-footer-line post-footer-line-2'><span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<b:if cond='data:post.authorProfileUrl'>
<span class='fn'>
<a expr:href='data:post.authorProfileUrl' itemprop='author' rel='author' title='author profile'>
<data:post.author/>
</a>
</span>
<b:else/>
<span class='fn'><data:post.author/></span>
</b:if>
</b:if>
</span>
<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' itemprop='url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>
</b:if>
</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'>
<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>
Salve
Procure agora por:
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span>
E troque-o por:
<span class='post-labels'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'></b:if>
</b:loop>
</b:if>
</span>
Salve
Agora procure por:
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='articleBody'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
Substitua por:
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
</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>
<div style='clear: both;'/> <!-- clear for photos floats -->
Salve!
Procure agora por:
</div>
<div class='post-footer-line post-footer-line-3'>
E substitua por:
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<span id='showlink'><a expr:href='data:post.url'>Leia Mais ►</a></span>
</b:if></b:if>
</div>
<div class='post-footer-line post-footer-line-3'>
Salve.
Se quiser colocar os botões de compartilhamento das redes sociais em cima, abaixo do título do blog proceda da seguinte forma:
Procure por:
<div class='post-share-buttons goog-inline-block'>
<b:if cond='data:post.sharePostUrl'>
<b:include data='post' name='shareButtons'/>
</b:if>
</div>
Copie e apague.
Procure por:
<div class='post-header-line-1'/>
E acima dele cole o código que você apagou.
Prontinho, todos os hacks foram implementados. Caso aprecie, voê poderá dar um estilo em seu post como deixar o título e o menu de botões socias para ser visto apaenas na parte de dentro, quando a pessoa abrir o seu post, dar cor para o post e uma cor de fundo para o título.
Para isso, basta copiar o código abaixo e colar antes de:
]]></b:skin>
<!-- Estilo ao post na primeira página -->
<style>
.post {
background: #eee;
padding: 6px 10px 6px 10px;
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;
}
.date-header span {display:none;}
h3.post-title {background: #ccc; padding: 4px 0 6px 2px; margin: 0 0 4px 0;}
<b:if cond='data:blog.homepageUrl == data:blog.url'>
.post-header {display:none;}
</b:if>
</style>
Vermelho= cor post
Azul= cor do fundo do título
.jpg)
