Combo: Colocar leia mais, autor do blog debaixo do título dar estilo aos marcadores

 

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 = &quot;float&quot; ;
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 != &quot;item&quot;'>
          <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
            <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 != &quot;item&quot;'>
                  <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
                    <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 != &quot;true&quot;'>,</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 != &quot;true&quot;'></b:if>
          </b:loop>
        </b:if>
      </span>

Salve


Agora procure por:

 <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + 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 != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><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 != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<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