Postagens Recentes

31 de jul. de 2011

Colocar o novo Blogger em estilo revista modelo pequenos quadrados

15 comentários:

Conforme já havia ensinado AQUI a colocar o blog em estilo revista para o modelo Minima, portanto o antigo Blogger agora trago para vocês esse hack atualizado. Ao que tudo indica, a série de tutoriais para o novo Blogger, implementado em julho de 2010. É fácil perceber como facilita modelos assim,  a navegação de seu visitante,  deixando o blog mais limpo e harmonioso.(Essa dica foi feita em cima do templa Simple original, sem NENHUMA modificação)

Se você usa outro template, instale este primeiro.

Para isso, 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. 
Agora procure por:  

]]></b:skin>  

 
Abaixo dele cole o seguinte código:

Atenção: onde está em azul você controla a quantidade de palavras, e a rosa o tamanho da imagem, na cor verde o local que a sua imagem vai ficar. Se preferir a direita, troque pela palavra right

<!-- Estilo revista-->
<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 250;
summary_img = 410;
img_thumb_height = 100;
img_thumb_width = 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){
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 clique em "Expandir modelos de widget" Procure por:

<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>
      <data:post.body/>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>

Troque por este código abaixo:

<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>
      <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>
<span id='showlink'><a expr:href='data:post.url'>Leia Mais &#9658;</a></span>
</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 -->
</div>



Agora vamos dar estilo ao botão "leia mais"



Cole o próximo código acima de:

]]></b:skin> 


/*Showlink-----------------------------------------------------------*/
#showlink a{
padding: 2px;
background: #000;/*cor de fundo do botão*/
float: right;
font-size: 20px;}

#showlink a:hover{
padding: 2px;
background: #fff;/*cor de fundo do botão ao passar o mouse*/
float: right;
font-size: 20px;}


Agora clique em "Expandir modelo de widget" e procure por:

<b:includable id='nextprev'>


Abaixo dele cole:


<div style='clear:both;'/>



Muito bem, você observou que já está em estilo revista, então vamos fazer com que fique como o modelo, as postagens em quadrados um ao lado do outro.

Procure por:

]]></b:skin>


Abaixo dele cole o seguinte código:

<!-- Estilo revista-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style>
.post {
width: 240px;/*largura do quadrado*/
heigth: 200px;/*comprimento do quadrado*/
margin: 8px 4px 3px 4px;
padding:2px 1px 2px 1px;
background: #fff;/*cor do quadrado*/
border: 3px groove #ccc;/*tipo e cor de borda*/
overflow:hidden;
float: left;
}
.post-body {
background: #cc0000;/*cor de fundo do post*/
}
.post h3 {
font-size: 14px;/*tamanho da letra do título*/
padding: 10px 1px;
background: #ccc;/*cor de fundo do título*/
height: 50px;
}
.post-footer-line-1{display: none;}
.post-footer-line-2 {display: none;}
.post-footer-line-3 {display: none;}
.date-header {display: none;}
</style>
</b:if>
</b:if>


Se quiser que apareça o footer, apague a parte em azul.



Não copie o conteúdo deste blog. Plágio é crime previsto no código civil. 

Template Lilás Clean

4 comentários:
Mais um template para vocês. Baseado no Minima, portanto, modelo antigo. Este template possui 3 colunas, mais 3 colunas no footer e 5 colunas abaixo da header. Header dividida em duas colunas, slide com as últimas postagens que entram automaticamente. Postagens resumidas tipo revista, widget de posts mais vistos já personalizado.




Para habilitar o menu com imagens abaixo da header:

Depois de ter instalado o template, vá até "Layout"

Clique em Layout

Clique em editar em cada um deles para inserir a imagem e colocar seu link







Mude então o título do widget e insira sua imagem.
Para colocar o link, faça como o modelo inserindo o endereço no local indicado

Por favor, leiam os posts !!!!

2 comentários:
Se você não ler todo o post, fica difícil...
Recebo comentários sempre de pessoas que dizem não conseguir implementar códigos em seus blogs. Aí vai uma dica:



LEIAM OS POSTS, T O D O !


DO COMEÇO AO FIM !!!!


Muita gente não os lê, vão direto aos códigos para implementar os hacks e se esquecem que T U D O que está no post deve ser lido. Do início ao fim. Eu não perderia meu tempo escrevendo um post muitas vezes quilométrico, entendeu ? Tudo que coloco neste blog foi testado e se acaso não responder a seu comentário, veja se não refiz o post e concertei algo que eventualmente possa ter colocado errado, já que errar é humano e sou humana :-)

Quando escrevo que as dicas são para o novo Blogger, significa que são para os novos modelos, implementados em julho de 2010. É fácil e simples. Se digo que uso o modelo "SIMPLE" é porque os hacks foram feitos em cima deste modelo, portanto, usando outro modelo você poderá NÃO ENCONTRAR OS CÓDIGOS NOS QUAIS ME REFERENCIO. QUANDO SÃO OS ANTIGOS TEMPLATES, USO O "MINIMA"


Se uso o modelo "SIMPLE" e você outro modelo, fica realmente difícil implementar as dicas deste blog


Fácil de entender, não ?


27 de jul. de 2011

ìcones, icons para o Google+ Google Plus

Nenhum comentário:
Clique na imagem para ir até a página de download



Ícones para o mais novo queridinho: Google Plus, ou Google +.

Clique na imagem, faça o download e divulgue sua nova página.


Clique na imagem para fazer o download


Clique na imagem


Clique na Imagem

Clique na imagem
Clique na imagem

Menu com efeito hover

14 comentários:
Coloque em seu blog um menu com efeito hover. Ao passar o mouse por cima, os botões do menu trocam de cor.


Veja AQUI o exemplo.

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.


Vá até "Elementos de página", se usar o antigo Blogger ou em "Layout", se usar o novo Blogger, clique em "Adicionar gadget" e clique em HTML/Javascript" e cole o  código abaixo fazendo as modificações necessárias.






<style>
/* menu hover--------------------------------------------- */
#menuhover {
display: inline;

}

#menuhover li {
list-style-type:none;padding: 0 2px;
}

#blogger1 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiENw8ZoiivqZTpe-0O3Czl6FfhI2hZOEbaLCkMxs-e87IkmOlrVu_XOIYnduGIpByjNnllvEs_aubqEY9EN8GuA1_iO-WVZMqy-RiAdnME8BYxeaQLVyd5J562ZeTRi8ZWs3_WOmYmm5gk/s1600/bloggerc.png) no-repeat;
width: 70px;
height: 70px;
float: left;
clear: right;
}

#feedbourner1 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1-_s704L2UUVLgf7F1T1TpBW8u4EfV41qkyguYFyTawdm45pu_5Bocx2PSjKuQVdjllGUlpLgmgCgX6li-up6KUstUwE4RSLoiuY8rD8b1dRITYRgXyEOh0cS8rLjChyphenhyphenm7zEp7QMgTukA/s1600/feedburnerc.png) no-repeat;
width: 70px;
height: 70px;
float: left;
clear: right;
}

#twitter1 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7g6d4K_WAJ81hDtysc_SpEbYhx30O1FtOs6nxclGK5Dl56H7uaMHM1o2T7h5qruTAI4NZK6O09-TINW_6xd851B4zS6qmQBEnSyMgat1A-kjW7-xkwIuURpUTCozef1MYDEA_QNRrt8Al/s1600/twitterc.png) no-repeat;
width: 70px;
height: 70px;
float: left;
clear: right;
}

#facebook1 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoZyQ8tb9-1NsjE5PXRA9qCcYI7RhzNc8xE8WRlk2pQ-ZZyneAtCmGqwusBBMWbelw495V3wwgvJVNTd8u4n5ktJWLuarkYWi8OD-c8LLdBOnSKUJ9LLbj0MhYAEcfeXRUDNCJj2X73Dfx/s1600/facebookc.png) no-repeat;
width: 70px;
height: 70px;
float: left;
clear: right;
}

#blogblogs1 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl2xYUGYLO1QiU6vk8QXgfulmQke9srIiI45ylMKFKNsY9TaBIV3sbqOrZzJ5yv30G0yIrFi7aBStwAvXdQ8BgHEszaOZeC08Pd4E9nlTMDJ5vOCM2CAUNFPItekXt976E6EybYTKXN7Xk/s1600/blogblogsc.png) no-repeat;
width: 70px;
height: 70px;
float: left;
clear: right;
}

#technoraty1 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOu8p7UmrAI0C5o54TGpaAmYYnujyAwYzMK__5jYsYuL_lME7XQe24B50LjZeq_oqv76ot-XuArQDWwGZOWiVR-7WmFwqZp9DZKKqApdLhn8rB3dt1npkavroW6cKTbPMNQEhAxEBaoYVh/s1600/technoratic.png) no-repeat;
width: 70px;
height: 70px;
float: left;
clear: right;
}

#orkut1{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjAk6JJo1EsUecIjL6a-U6CkuNZJmekMdpmdHIPeIMKoyuVWNDjejGaBUvHlmAKgP1-YBRVrbgXnWCa3bHtjPV4hqTC7FH_oqDZ0dsoS548l3su89HgUuOVoqt8Un8sOuyaCe2NOAY_AQ9/s1600/orkutc.png) no-repeat;
width: 70px;
height: 70px;
float: left;
clear: right;
}

#youtube1{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhank_zJAqpgslyMtMK_xbOKU3iyXlI-DCEPUeC578Y1icvoB9Uc1og6Exa_oqIKJhc8Y7te8NNLnlzSAN5_jTwZA4LlY90AecIc6RI5pFiWUmIWRBh92OlCQ8ZFJYu3Fz9pGq8BqWJ92g/s1600/youtubec.png) no-repeat;
width: 70px;
height: 70px;
float: left;
clear: right;
}

#favoritos1{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4tf0pX6Emlgj5kO2tXdrFQIrVh9dgQsFcc2OJwkHQRuTZksqTC_MoXylwSU6xHFCTlhGZLvckBopRK6_smAavmkWboaTPr2wq6MTP900n6dMK3qHa4se2y21pGQSNmfBe7zvNFNbCHMPA/s1600/favoritesc.png) no-repeat;
width: 70px;
height: 70px;
float: left;
clear: right;
}

/*hover*/

#blogger1:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijVPM-BJ7OtEsL4x2Twr_6R9zAQBxV5EJWzUVm8GCFVuT8tRMqj0uBVJhJYpMOx-mGuaVGwkLISsBhvMWeLRbo2WhYzuL1kTjCRlVzplM95HMrDA4YgmL3haIf3Bxstqv8mUDq9xQyAvw_/s1600/blogger.png)  0 0 no-repeat;
}

#feedbourner1:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigTrWoqvF3ZpiJEIeWFYU64OA3cB33QFwLFGp79Rf7Jxy6B_WTzOTL1STqroH8vMDcd8kCSHP8Em9wUXEVf8rVMUC3m7BQSdOJUxqZ_Ie8EqpepoL4d4a_9-nx5gXw2Zy8BNoxYS-cbEr3/s1600/feedburner.png)  0 0 no-repeat;
}

#twitter1:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCgDQ_LJwWTDM5PxTsUDLWJPu_30rRwFxMY34g7UW_jHOXIS8_2uUvtvBv3bDe7EXtEdEuDuR_vMfj7U-h0QtYYAHBSMgzjolFN2tO5gsKlkcGE5FY3OiiSxdH4gzAMLYfQTNLOV-uXeEe/s1600/twitter.png) 0 0 no-repeat;
}

#facebook1:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifFMc4766kP_zXG7-UXBVTK00jo9JBbNod6a6qk8Wa61PNR9j8f39bIqyIvJqeVIUTFNHOF_-_7c_f10N9IM3jvBcaUEUIH-603t_tmzmLqvkff6EP0oc2Vj4e_Iffkm4gfrY0ksXhjCtG/s1600/facebook.png) 0 0 no-repeat;
}

#blogblogs1:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyXIKCAM1OqDOj9QmwGIBdNWTbDhO_MnOHiEq-uOm2wZzXVYQlquogpQspb993qfJbn8BM3aPgiyzYdogsNid2RqgWrQjps8bvJc8tTXHc_yi3HiayPdFYplHNUuw1F56oQjhigEJIZzJ_/s1600/blogblogs.png) 0 0 no-repeat;
}


#technoraty1:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWq4LvYWyDlHvrhfN2K6RzJGWxaONEX0kctZI4D6Yeq9Q5pNu3OywqkN9em-Wa7EPsewcMuv4_FET8r3Uzjj8vNz4V3LclwGzxhEYYRuQI48ez-vtEpOj5I4v4vc2qc5h3nwrMH9K5WYD6/s1600/technorati.png) 0 0 no-repeat;
}

#orkut1:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJi2XgHHJE2yGXuQDLhu1u-vA-yaLJf7ZGdA-dk_UIeOCcGdbcluavTQ6CPeLYBxh2_AMKQnOeM_IeM35gcqX-kP3wOj8W3bbw_WdwB3u7QwvS-IUzlHidhgJahatK5RQ7BFd1pwFdU1Bl/s1600/orkut.png) 0 0 no-repeat;
}

#youtube1:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib9Tq5jDrbOzyA6_P41L4vz-BQgWQdPM6Ngy_Mh7H_Y_6PR7bXHI5Oz5eOkoqeA77YxNpw_gyanFSEQqGApOP518Z6BYk3H4usqddtK94oRoHaic0i_W70B97s8cR6lIIntg8C_Q8pcbXr/s1600/youtube.png) 0 0 no-repeat;
}

#favoritos1:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZizQ1B7Vs4kHDHD4tES9Qz1J4FEqsLwQSrfkx7XC0EQZsIyxb4MZ3zj8LRE-UoM0PXKjVUfmkHrYLf9wVGRC40zuvZCJeW-2iU8vjwAjbrDnoOqcT2hcg3QBZ00iTeuJ-pIwwLK232fgm/s1600/favorites.png) 0 0 no-repeat;
}

</style>

<div id='menuhover'>
<ul>

<li><a href="#" id='blogger1'target="_blank" title="Home"></a></li>

<li><a href="ENDEREÇO DO FEEDBOURNE" id='feedbourner1'target="_blank" title="FeedBorner"></a></li>

<li><a href="ENDEREÇO DO TWITTER" id='twitter1'target="_blank" title="Siga-me no Twitter"></a></li>

<li><a href="ENDEREÇO DO FACEBOOK" id='facebook1'target="_blank" title="Facebook"></a></li>

<li><a href="ENDEREÇO DO BLOGBLOGS" id='blogblogs1'target="_blank" title="BlogBlogs"></a></li>

<li><a href="ENDEREÇO DO TECHNORATY" id='technoraty1'target="_blank" title="Thecnoraty"></a></li>

<li><a href="ENDEREÇO DO ORKUT" id='orkut1'target="_blank" title="Orkut"></a></li>

<li><a href="ENDEREÇO DO YOU TUBE" id='youtube1'target="_blank" title="YouTube"></a></li>

<li><a href="ENDEREÇO DA PÁGINA COM FAVORITOS" id='favoritos1'target="_blank" title="Favoritos"></a></li>

</ul>

</div>


Se quiser mudar as imagens, mude todos os códigos que estão na cor azul e na cor amarela sendo que:

CÓDIGO NA COR AZUL: imagem que se vê
CÓDIGO NA COR AMARELA: imagem que se vê ao passar o mouse
CÓDIGO NA COR VERMELHA: troque pelo endereço de seus links



Os de cor verde, são os botões com efeito hover( ao passar o mouse) NÃO MEXA, É APENAS PARA SE ORIENTAR

O código em rosa indica onde e qual é o botão específico. NÃO MEXA, É APENAS PARA SE ORIENTAR

25 de jul. de 2011

Botão "Não gostei" no Facebook

Um comentário:
Porque as vezes curtimos algo que não gostamos...

Eu sempre reclamei do fato do Facebook não ter um botão como esse, o que fazia a gente "Curtir" cada tranqueira no Facebook que dava interpretações no mínimo curiosa.O fato é, você precisará instalar uma extenção no seu navegador para ter essa opção, o que é bem fácil e rápido. Então corra, baixe o aplicativo e sai sendo antipática pelo Face :-)

Clique na imagem para baixar o aplicativo ou no link abaixo



22 de jul. de 2011

Troque o termo em ingles da caixa de assinar feed no novo Blogger

Nenhum comentário:

 Nada de termos em ingles no seu blog. Esse é o seu lema ? Então vamos trocar as paavras na caixa de assinar feed em seu blog.


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. 



Clique em Expandir modelos de widget






Procure então por:


<input class='follow-by-email-address' name='email' placeholder='Email address...' type='text'/>


E substiua por:




<input class='follow-by-email-address' name='email' placeholder='Coloque aqui seu email' type='text'/>




Agora um pouco abaixo veja um código como esse:

<input class='follow-by-email-submit' type='submit' value='Submit'/>


Troque por:


<input class='follow-by-email-submit' type='submit' value='Clique'/>

21 de jul. de 2011

Mostrar apenas o título das postagens

19 comentários:

Este pode ser um recurso bem interessante. Ele pode ser implementado tanto no Blogger novo quanto no antigo.

Vá até o HTML do blog, clique em "Expandir modelos de widget e procure pelo código:



Se o seu blog é o novo Blogger, clique em Expandir modelos de widget, e depois procure por:




<b:include data='post' name='post'/>


Agora substitua por este se quer sem os comentários.:

 
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:include data='post' name='post'/>
        <b:include data='post' name='comments'/>
      <b:else/><b:if cond='data:blog.pageType != "item"'>
         <span class='posth2'><a expr:href='data:post.url'> 
         <data:post.title/></a></span>
     <b:else/>
         <b:include data='post' name='post'/>
     </b:if></b:if>
 


ATENÇÃO: Se você quer deixar o número de comentários junto ao título o código então será esse:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<span class='numComments'><a expr:href='data:post.url'>
<data:post.numComments/></a>
</span>
<b:include data='post' name='post'/>
        <b:include data='post' name='comments'/>
      <b:else/><b:if cond='data:blog.pageType != "item"'>
         <span class='posth2'><a expr:href='data:post.url'> 
         <data:post.title/></a></span>
     <b:else/>
         <b:include data='post' name='post'/>
     </b:if></b:if>

Para personalizar os títulos

Procure por:

]]></b:skin>


E cole o código abaixo acima dele.


/* PostH2-----------------------------------------------*/
.posth2 a:link{
display:block;
font-size:24px;
border-left: 6px solid #000;
border-bottom:1px solid #808080;
color: #808080;
margin: 0 1px 1px 0;
padding: 4px 0 2px 6px;
}

.posth2 a:visited{
border-left: 6px solid #ccc;
color:#ccc;
border-bottom:1px solid #ccc;
margin-left:1px;
display:block;
}
.posth2 a:hover{
display:block;
border-left: 6px solid #cc0000;
color:#cc0000; /* letra preta */
border-bottom:1px solid #cc0000;/* borda preta */
}



Imagens de setinhas AQUI.
Código de cores AQUI




Clique agora em "Expandir modelos de widget" e procure pelo seguinte código:

<b:if cond='data:post.title'>

Cole então o código abaixo dele:

<span class='numComments'>
<a expr:href='data:post.url'>
<data:post.numComments/></a></span>


Para personalizar os comentários


/* Numcomments-----------------------------------------------*/
.numComments {
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYiJ5XchP4bNDf1MA1guxCySoLDb14jLqkPzfBY3BKBJmBgh40Cmfv85_teXfbUVRxUI5eDJnsCQltXEVQsmzPiuaSdFdpyddCz7tTU10DJ3jgv-YsDGyOQcQXY5di7sH3O-N-6gY7xgBI/s320/comment.png) no-repeat bottom;/*balão azul*/
  float:right;
  padding: 1px 2px;
  font-size: 12px;/*tamanho do número*/
  width: 20px;
  height:16px;
  color: #fff;/*cor do número*/
}
.numComments a:link{
  margin: 13px 6px;
  color: #ffffff;
}
.numComments a:visited{
  margin: 13px 6px;
  color: #000000;
}
.numComments a:hover{
  margin: 13px 6px;
  color: #FAD62C;
}





Para personalizar a data, preste atenção pois tem dois modos. Um é colocando a data junto aos títulos e outra é colocando as datas acima dos títulos do mesmo dia. Veja as fotos com os exemplos.



Data junto aos títulos




Para que a data fique na mesma linha do título substitua o código abaixo:

h2.date-header {
  margin:1.5em 0 .5em;
  }

 Por este:

h2.date-header { float: right;text-align: right; margin: 1px 0 3px 0;padding: 5px 0px 0 0;}

Salve.

Agora clique em  "Expandir modelos de widget" e procure pelo seguinte código:


<b:if cond='data:post.dateHeader'>
<h2 class='date-header'>
<data:post.dateHeader/></h2>
</b:if>

E substitua por:

<b:if cond='data:post.dateHeader'>
<script>var lastDate= '<data:post.dateHeader/>';</script>
<h2 class='date-header'><data:post.dateHeader/></h2>
<b:else/>
<h2 class='date-header'>
<script>document.write(lastDate);</script>
</h2>
</b:if>

Salve e está pronto.


Data acima de todos os posts do mesmo dia.




Se você prefere  que a data fique acima de todas os posts do mesmo dia  basta substituir:

h2.date-header {
  margin:1.5em 0 .5em;
  }

Por:



.date-header {
margin:20px 0 3px 0;
padding: 3px 0 3px 4px;
color: #FF4040;/*cor da fonte*/
font-size: 10px; /*tamanho da fonte*/
background: #cccccc;/*cor de fundo*/
}

Vi essa dica no Ice Breaker

Dividir o cabeçalho do novo Blogger

10 comentários:


Os códigos sofreram transformações de nomes, mas as funções acabam por ser as mesmas. Muitas vezes precisamos aproveitar ao máximo o layout do blog para que fique em harmonia e perfeita simetria. Para isso, porque não usar o cabeçalho mais do que para o título do blog ?

Então, vamos aprender a diividir o cabeçalho do novo Blogger não tem muita diferença. Siga as instruções.



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. 


Procure por:


<div class='fauxborder-left header-fauxborder-left'>
<div class='fauxborder-right header-fauxborder-right'/>
<div class='region-inner header-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Templates e Acessórios (Cabeçalho)' type='Header'/>
</b:section>
</div>
</div>
<div class='header-cap-bottom cap-bottom'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
</div>
</header>

 Troque por:



  <div class='fauxborder-left header-fauxborder-left'>
<div class='region-inner header-inner' style='width:55%; float:left'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='Templates e Acessórios (Cabeçalho)' type='Header'/>
</b:section></div>

<div class='fauxborder-right header-fauxborder-right' style='width:46%;float:right;height: auto;margin: 0px 4px 0 2px;'>
<b:section class='banner' id='banner' maxwidgets='1' showaddelement='yes'>
<b:widget id='HTML210' locked='false' title='' type='HTML'/>
</b:section>
</div>
</div>
<div class='header-cap-bottom cap-bottom'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
</div>
</header>
<div style='clear:both;'/>



Se este acima não deu certo, tente este:

  <div class='fauxborder-left header-fauxborder-left'>
<div class='region-inner header-inner' style='width:55%; float:left'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='Templates e Acessórios (Cabeçalho)' type='Header'/>
</b:section></div>

<div class='fauxborder-right header-fauxborder-right' style='width:46%;float:right;height: auto;margin: 0px 4px 0 2px;'>
<b:section class='banner' id='banner' maxwidgets='1' showaddelement='yes'>
<b:widget id='HTML110' locked='false' title='' type='HTML'/>
</b:section>
</div>
</div>
<div class='header-cap-bottom cap-bottom'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
</div>
</header>
<div style='clear:both;'/>

Retirar a retribuição do novo Blogger

2 comentários:


Para retirar a referencia do Blogger de seu blog, proceda como aa imagens


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. 


Procure por:

<b:widget id='Attribution1' locked='true' title='' type='Attribution'/>

Troque por:

<b:widget id='Attribution1' locked='false' title='' type='Attribution'/>

Salve.


Agora vá até



Procure então por ATTRIBUTION:




Ao abrir a janela, clique em Excluir.






Post que se expande para os lados em um clique, no novo Blogger

Um comentário:

Essa dica eu já tinha visto a um tempão no blog do Pizcos, mas era para ser usada no antigo Blogger. Trago agora a dica para usar no novo Blogger, depois das adaptações feitas por mim.


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. 

Agora procure por:  

]]></b:skin>  

 


Substitua-o (TROQUE) então pelo seguinte código: (Observe que neste código há dois números destacados na cor vermelha. Isso é porque você vai precisar configurar para que fique de acordo com o seu template. Vá trocando os números e visualizando o seu blog até ficar certinho).
800---Tamanho ao expandir
500---Tamanho ao contrair


.expandp{
float: right;
margin: -40px 2px 50px 0;
}

]]></b:skin>

<script type='text/javascript'>
//<![CDATA[
function agrandarentrada(){
div = document.getElementById("sidebar-right-1");
div.style.display="none";
div = document.getElementById("sidebar-right-2-1");
div.style.display="none";
div = document.getElementById("sidebar-right-2-2");
div.style.display="none";
div = document.getElementById("sidebar-right-3");
div.style.display="none";
div = document.getElementById("main");
div.style.width="800px";
div.style.fontSize="14px";
}
function achicarentrada(){
div = document.getElementById("sidebar-right-1");
div.style.display="";
div = document.getElementById("sidebar-right-2-1");
div.style.display="";
div = document.getElementById("sidebar-right-2-2");
div.style.display="";
div = document.getElementById("sidebar-right-3");
div.style.display="";
div = document.getElementById("main");
div.style.width="500px";
div.style.fontSize="12px";
}
//]]>
</script>


Salve.

Agora clique em Expandir modelos de widget.



Procure por:

<div class='post-header'>

Cole então acima dele o código abaixo:




<div class='expandp'>
<a href='javascript:achicarentrada();'><img alt='Voltar à Área Padrão do Post' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8ierU1etrj7AjTGgfR8TPYopY3AWh_ZMnuE9koJEgzVwrI46yoL1GdkxwBXTcBRUsQkoV7lN5zxKFcExS7AieeEBP6DaGJ83CbsBAnYVsbG1O6bk3HD4I_HZPGQdoekxy3JFgSJQGXf34/s320/arrow_left.png' title='Voltar à Área Padrão do Post'/></a>
<a href='javascript:agrandarentrada();'><img alt='Aumentar Área do Post' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja8qzLiZ1A-teQi8dDpiNyOLRuOtBc8ZE9awo3hQntWk3mPdzNJKro_SeT3fRT-mMbMUNe3Vmb9e3YTXNc9Rz2t_bQB7UsVw1Xm8UTDneC8egcUgmACFY4dUjuCvIsbynaQOxmzJQ9ja75/s320/arrow_right.png' title='Aumentar Área do Post'/></a>
</div>


Salve.



Sua imagem de fundo (background) no novo Blogger

Um comentário:

O novo Blogger disponibiliza várias imagens de fundo para o novo Blogger, mas bem, acontece como essas  coisas que acontecem na vida real, que queremos mais, queremos algo com a nossa cara, queremos algo exclusivo e eis a dúvida. Como colocar uma imagem escolhida por mim no novo Blogger ?


Veja como é fácil.

Depois de escolhida a imagem que você quer e tê-la salvado em seu computador, vamos agora coloca-la em seu blog.

Vá até "Modelo" em seu Blogger e siga as imagens...

Clique em personalizar



Clique em Plano de fundo



Clique em fazer upload da...



Clique em Escolher arquivo



Ao abrir o browser, procure sua imagem



Ao ver sua iamgem, clique em Concluido



Agora faça os testes para ver onde fica melhor sua imagem



Veja se quer a imagem em apenas um local ou se quer que ela repita...



Decida aí se a sua imagem vai rolar junto com seu blog ou se ficará fixa



Tudo certo ? Agora aplique ao blog

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