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(http://2.bp.blogspot.com/_BaCxSD9NFn8/S3C-A8ggT6I/AAAAAAAABPU/4DNs2JPg3ew/s1600/bloggerc.png) no-repeat;
width: 70px;
height: 70px;
float: left;
clear: right;
}

#feedbourner1 {
background: url(http://4.bp.blogspot.com/_BaCxSD9NFn8/S3C-L0HGdXI/AAAAAAAABPs/kXpZirBI9Hg/s1600/feedburnerc.png) no-repeat;
width: 70px;
height: 70px;
float: left;
clear: right;
}

#twitter1 {
background: url(http://1.bp.blogspot.com/_BaCxSD9NFn8/S3C-pyr384I/AAAAAAAABQM/BoeY3vrTjRs/s1600/twitterc.png) no-repeat;
width: 70px;
height: 70px;
float: left;
clear: right;
}

#facebook1 {
background: url(http://4.bp.blogspot.com/_BaCxSD9NFn8/S3C-Lvvjn2I/AAAAAAAABPc/9-9QGVwWIpQ/s1600/facebookc.png) no-repeat;
width: 70px;
height: 70px;
float: left;
clear: right;
}

#blogblogs1 {
background: url(http://4.bp.blogspot.com/_BaCxSD9NFn8/S3C-A76yB9I/AAAAAAAABPM/GIWCOx-NZXE/s1600/blogblogsc.png) no-repeat;
width: 70px;
height: 70px;
float: left;
clear: right;
}

#technoraty1 {
background: url(http://2.bp.blogspot.com/_BaCxSD9NFn8/S3C-p410AzI/AAAAAAAABQE/VSbWkzAeuyc/s1600/technoratic.png) no-repeat;
width: 70px;
height: 70px;
float: left;
clear: right;
}

#orkut1{
background: url(http://4.bp.blogspot.com/_BaCxSD9NFn8/S3C-darM78I/AAAAAAAABP8/YhRQz4g0tl4/s1600/orkutc.png) no-repeat;
width: 70px;
height: 70px;
float: left;
clear: right;
}

#youtube1{
background: url(http://1.bp.blogspot.com/-ec-GPpE3cSs/TjCYsrLEt8I/AAAAAAAAFyc/uVR6nAsyuJc/s1600/youtubec.png) no-repeat;
width: 70px;
height: 70px;
float: left;
clear: right;
}

#favoritos1{
background: url(http://4.bp.blogspot.com/_BaCxSD9NFn8/S3C-Lvb_GXI/AAAAAAAABPk/KPPxDuQFNNs/s1600/favoritesc.png) no-repeat;
width: 70px;
height: 70px;
float: left;
clear: right;
}

/*hover*/

#blogger1:hover {
background: url(http://1.bp.blogspot.com/_BaCxSD9NFn8/S3C-Aw1Pi1I/AAAAAAAABPQ/0ckUW3EopWE/s1600/blogger.png)  0 0 no-repeat;
}

#feedbourner1:hover {
background: url(http://4.bp.blogspot.com/_BaCxSD9NFn8/S3C-LvTzR3I/AAAAAAAABPo/aiXPzXzhSQY/s1600/feedburner.png)  0 0 no-repeat;
}

#twitter1:hover {
background: url(http://2.bp.blogspot.com/_BaCxSD9NFn8/S3C-p-dg-mI/AAAAAAAABQI/S6uKYvq4T5c/s1600/twitter.png) 0 0 no-repeat;
}

#facebook1:hover {
background: url(http://3.bp.blogspot.com/_BaCxSD9NFn8/S3C-BJQQ5oI/AAAAAAAABPY/VmZRCCbYs3Y/s1600/facebook.png) 0 0 no-repeat;
}

#blogblogs1:hover {
background: url(http://1.bp.blogspot.com/_BaCxSD9NFn8/S3C-AuyoWFI/AAAAAAAABPI/15X2R9nyUCo/s1600/blogblogs.png) 0 0 no-repeat;
}


#technoraty1:hover {
background: url(http://1.bp.blogspot.com/_BaCxSD9NFn8/S3C-dZmZdqI/AAAAAAAABQA/moheJRvbhos/s1600/technorati.png) 0 0 no-repeat;
}

#orkut1:hover {
background: url(http://2.bp.blogspot.com/_BaCxSD9NFn8/S3C-deQGG7I/AAAAAAAABP4/iYTOHKsvBpk/s1600/orkut.png) 0 0 no-repeat;
}

#youtube1:hover {
background: url(http://2.bp.blogspot.com/_BaCxSD9NFn8/S3C-qKxnx4I/AAAAAAAABQQ/1CmlvSCrCAM/s1600/youtube.png) 0 0 no-repeat;
}

#favoritos1:hover {
background: url(http://4.bp.blogspot.com/_BaCxSD9NFn8/S3C-Lna7CbI/AAAAAAAABPg/jO7gU-KYArw/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(http://1.bp.blogspot.com/_BaCxSD9NFn8/TFm1xEBt4pI/AAAAAAAABxw/gJUBdowTIuQ/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='http://4.bp.blogspot.com/_WvACVGW1iPE/TESCN5imqaI/AAAAAAAABLw/nPZTbdTw8lI/s320/arrow_left.png' title='Voltar à Área Padrão do Post'/></a>
<a href='javascript:agrandarentrada();'><img alt='Aumentar Área do Post' src='http://2.bp.blogspot.com/_WvACVGW1iPE/TESCQ1YcjdI/AAAAAAAABL4/Gk42jcjsLtQ/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