20 de abr de 2012

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

3 comentários:

A legislação brasileira prevê a possibilidade de se responsabilizar o blogueiro pelo conteúdo do blog, inclusive quanto a comentários; portanto, o autor deste blog reserva a si o direito de não publicar comentários que firam a lei, a ética ou quaisquer outros princípios da boa convivência. Não serão aceitos comentários anônimos ou que envolvam crimes de calúnia, ofensa, falsidade ideológica, multiplicidade de nomes para um mesmo IP ou invasão de privacidade pessoal / familiar a qualquer pessoa. Comentários sobre assuntos que não são tratados aqui também poderão ser suprimidos, bem como comentários com links. Este é um espaço público e coletivo e merece ser mantido limpo para o bem-estar de todos nós.


Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube