subir cabeçalho

(Clique para visualizar melhor)

Esse tutorial quem me passou foi a diva da Emily, do Extras PF por comentário há uns meses atrás, então créditos a ela! 

Esse tuto é muito bom pra quando se quer dar a ideia de que algum elemento está saindo do topo, aqui no blog por exemplo, temos a plaquinha com o nome do blog, com duas fitinhas "segurando" essa placa. Fica bem mais bonito do que deixar ela "flutuando". Se interessou pelo tutorial? Então go go go! 

Vá em Design > Editar HTML e Procure (Ctrl+F ou F3) por : 

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'> 

Acima dele, cole o seguinte código: 

<div style="margin-top:-50px;"> 

E altere o valor (50px) até ficar grudado lá no topo (ou o quanto você quiser é claro). 

Agora acrescente </div> depois de </b:section>. Ficando assim:

<div style="margin-top:-50px;">
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='false' title='Go Imagine (Cabeçalho)' type='Header'/>
</b:section></div>

PS: O meu está com o título do meu blog (Go Imagine), o seu estará com o nome do seu blog ok? 

Anny não achei o código!

Calma, pode ser que no seu código esteja um pouquinho diferente. Veja se acha esse aqui:

<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='Go Imagine (Cabeçalho)' type='Header'/>
</b:section>

Se achar é só colocar acima dele:

<div style="margin-top:-50px;"> 

E acrescentar </div> depois de </b:section>. Ficando assim:

<div style="margin-top:-50px;">
<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='Go Imagine (Cabeçalho)' type='Header'/>
</b:section></div>

Redes Sociais em Forma de Coração Flutuante

Nesta postagem compartilho com vocês este outro código bem interessante. O código é bem chamativo e sendo assim, você poderá conseguir muito mais seguidores nas suas redes sociais.

Para coloca-lo no blog...Entre em "Modelo" - "Editar HTML" e procure pela tag

</head>

Tendo encontrada a tag, cole ACIMA dela o seguinte código

<script type='text/javascript'>
//<![CDATA[
/***********************************************
* Floating image script- By Virtual_Max
* Modified by Dynamic Drive for various improvements
***********************************************/

var vmin=2;
var vmax=5;
var vr=2;
var timer1;

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function Chip(chipname,width,height){
this.named=chipname;
this.vx=vmin+vmax*Math.random();
this.vy=vmin+vmax*Math.random();
this.w=width+20;
this.h=height;
this.xx=0;
this.yy=0;
this.timer1=null;
}

function movechip(chipname){
if (document.getElementById){
eval("chip="+chipname);
if (window.innerWidth || window.opera){
pageX=window.pageXOffset;
pageW=window.innerWidth-40;
pageY=window.pageYOffset;
pageH=window.innerHeight-20;
}
else if (document.body){
pageX=iecompattest().scrollLeft;
pageW=iecompattest().offsetWidth-40;
pageY=iecompattest().scrollTop;
pageH=iecompattest().offsetHeight-20;
} 

chip.xx=chip.xx+chip.vx;
chip.yy=chip.yy+chip.vy;

chip.vx+=vr*(Math.random()-0.5);
chip.vy+=vr*(Math.random()-0.5);
if(chip.vx>(vmax+vmin)) chip.vx=(vmax+vmin)*2-chip.vx;
if(chip.vx<(-vmax-vmin)) chip.vx=(-vmax-vmin)*2-chip.vx;
if(chip.vy>(vmax+vmin)) chip.vy=(vmax+vmin)*2-chip.vy;
if(chip.vy<(-vmax-vmin)) chip.vy=(-vmax-vmin)*2-chip.vy;

if(chip.xx<=pageX){
chip.xx=pageX;
chip.vx=vmin+vmax*Math.random();
}
if(chip.xx>=pageX+pageW-chip.w){
chip.xx=pageX+pageW-chip.w;
chip.vx=-vmin-vmax*Math.random();
}
if(chip.yy<=pageY)
{chip.yy=pageY;
chip.vy=vmin+vmax*Math.random();
}
if(chip.yy>=pageY+pageH-chip.h)
{chip.yy=pageY+pageH-chip.h;
chip.vy=-vmin-vmax*Math.random();
}

document.getElementById(chip.named).style.left=chip.xx+"px";
document.getElementById(chip.named).style.top=chip.yy+"px";


chip.timer1=setTimeout("movechip('"+chip.named+"')",100);
}
}


function pagestart(){
//Configurações
corazon1=new Chip("corazon1",47,68);
corazon2=new Chip("corazon2",47,68);
corazon3=new Chip("corazon3",47,68);
corazon4=new Chip("corazon4",47,68);

//Configurações
movechip("corazon1");
movechip("corazon2");
movechip("corazon3");
movechip("corazon4");
}

if (window.addEventListener)
window.addEventListener("load", pagestart, false)
else if (window.attachEvent)
window.attachEvent("onload", pagestart)
else if (document.getElementById)
window.onload=pagestart
//]]>
</script>

Agora, procure pela tag

<body>

Ou

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

Tendo encontrado, ABAIXO dela cole o seguinte código

<!-- Inicio dos corações flutuando pela página do blogger -->
<div id='corazon1' style='position:absolute; z-index:80; left: -500px; width:47px; height:68px;'>
<a href='http://facebook.com/dicashot'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzoiKacj9wp5t0s1CczdbgjffMoROAQYxWr81XYcl-AcHGdl_i-Bf-_lnvOgzdmN-ULMM2KOcuMd8B7aIHa9XNsoNWDuwCYD0bPPFLgLCRI0LhbjGPbF2KlP4LMR8VB5JOfWUqC57jouc/'/></a>
</div>

<div id='corazon2' style='position:absolute; z-index:81; left: -500px; width:47px; height:68px;'>
<a href='http://twitter.com/usuario'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKqsr49ttc73KcdXluqodTZuAcW7LTY6oVz9WqtSkkT-sM1ebZkVv8BAvpNF2m3BRBIHoQUPTYYT5nywjzyCcXWhP5FDIwbl0qnCfZJ3SM4I-g7GhyphenhyphenDerE59xxaKGpZ878i8_rtUh36aY/'/></a>
</div>

<div id='corazon3' style='position:absolute; z-index:82; left: -500px; width:47px; height:68px;'>
<a href='http://Nome do seu blog.blogspot.com/atom.xml'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7eygPcbmjx5Q1jXtUovJoPVqkXz1acox7lWjYzrSZX8jaf_iTsda_fBkHuJ6CbKW1XSig-3X9j0lMec15FGEpJL_TXHutmCMu0anbo6DDnDr2vJtzFt1nLQrbTQ71TAeI5812Jim6J3k/'/></a>
</div>

<div id='corazon4' style='position:absolute; z-index:83; left: -500px; width:47px; height:68px;'>
<a href='URL'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8HktawWpRVCzCBQtxR57T67GBf3zee8KeprzDi2RApLv35BqFMUY-0UtSGWwJQmU47pmB2G59VG_ewEo7LtdRhQpXtPksoFEzVaVLEd627RJs5DAKFoj7XCLyTTwhK6uhMItdL9ijEtU/'/></a>
</div>
<!-- Fim de Corações flutuando pela página do blogger -->

Tendo feito isto, está pronto!!!

menu blog fino

Na imagem abaixo vocês podem conferir como é e como vai ficar depois do tutorial. 

Entre no seu html é procure por /* Tabs, abaixo você encontrará algo parecido a isso:  

/* Tabs ----------------------------------------------- */ 
.tabs-inner { 
margin: 1em 0 0; 
padding: 0; 
} 
.tabs-inner .section { 
margin: 0; 
} 
.tabs-inner .widget ul { 
padding: 0; 
background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll top center; 
} 
.tabs-inner .widget li { 
border: none; 
} .tabs-inner .widget li a { 
display: inline-block; 
padding: 1em 1.5em; 
color: $(tabs.text.color); 
font: $(tabs.font); } 
.tabs-inner .widget li.selected a, 
.tabs-inner .widget li a:hover { 
position: relative; 
z-index: 1; 
background: $(tabs.selected.background.color) $(tabs.selected.background.gradient) repeat scroll top center; 
color: $(tabs.selected.text.color); 
}

Feito isso, substitua todo esse código por esse aqui:

/* Menu do blogger  

----------------------------------------------- */

.tabs-inner {

margin: 1em 0 0;

padding: 0;

margin-top: 0px; /*para subir ou descer o menu troque o número*/

margin-left: 0px; /*para afastar o menu para esquerda ou direita troque o número*/

}

.tabs-inner .section {

margin: 0;

}

.tabs-inner .widget ul {

padding: 0;

background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll top center;

}

.tabs-inner .widget li {

border: none;

}

.tabs-inner .widget li { 

border: none; 

} .tabs-inner .widget li a { 

display: inline-block; 

padding: 1em 1.5em; 

color: $(tabs.text.color); 

font: $(tabs.font);

line-height: 5px;

padding: 12px; } 

.tabs-inner .widget li.selected a, 

.tabs-inner .widget li a:hover { 

position: relative; 

z-index: 1; 

line-height: 5px;

padding: 12px; /*espaçamento interno*/

}

Depois é só fazer qualquer alteração que achar necessária, as cores e fontes são alteradas pelo designer de modelo do blogger.

Espaço do Rodapé

Créditos do tutorial para o blog On The Fame .





O código só foi testado no modelo Travel.
1 - Vá em Design > Editar HTML > Ctrl + F e pesquise por :

.footer-inner {

Você deve ter achado algo parecido com isso :

background: transparent $(footer.background.gradient) repeat scroll top center;

2 - Substitua todo este trecho pelo seguinte código :

margin: -40px;

3 - Entendo esse código :  O número 40 define o tamanho do espaço, quanto maior o número, mais o espaço é retirado. Quanto menor o número, mais o espaço é adicionado.

Rodapé personalizados

Rodapé do blog personalizado

Dias atrás eu fiz uma perguntinha na fanpage do blog sobre o que vocês gostariam de ver por aqui. Então aqui estou eu para atender o pedido do Luiz Antico , que é como fazer o rodapé de créditos igual ao que eu uso aqui no blog.

Vamos aprender então?

No HTML do seu blog procure por:

: ]]></b:skin>

Cole ANTES dele o código abaixo:

#rodape-creditos {
font:normal bold 13px Arial;   /* - Fonte do rodapé - */
color:#FFFFFF;   /* - Cor da fonte - */
background:#303030;   /* - Cor de Fundo do Rodapé - */
border-top:4px solid #3F4C6B;     /* - Edite a borda - */ Retire essa linha se não quiser borda
margin:0px 0px 0px;     /* - Não é necessário editar - */
}
#rodape-creditos a:link {
color:#A8B5C4;   /* - Cor dos Links do Rodapé - */
text-decoration:none;  /* - Decorações do Link - */
outline:0px solid #FFFFFF;  /* - Não é necessário editar - */
}
#rodape-creditos a:visited {
color:#A8B5C4;    /* - Cor dos Links Visitados - */
text-decoration:none;   /* - Decoração dos Links Visitados - */
outline:0px solid #FFFFFF;   /* - Não é necessário edittar - */
}
#rodape-creditos a:hover {
color:#A8B5C4;   /* - Cor do Link com o Mouse em cima - */
text-decoration:underline;    /* - Decoração do Link com o mouse em cima - */
outline:0px solid #FFFFFF;    /* - Não é necessário edittar - */
}

Agora procure por:

 </body>

ANTES dele cole:

<div id='rodape-creditos'>
<table border='0' cellpadding='5' cellspacing='0' oncontextmenu='return false' ondragstart='return false' width='100%'>
<tr>
<td style='width:72%;text-align:left;'>&#169; <a href='LINK DO BLOG'>NOME DO BLOG</a> - 2012. Todos os direitos reservados.<br/>Criado por: <a href='URL DO AUTOR DO BLOG' rel='nofollow' target='_blank'>NOME DO AUTOR DO BLOG</a>.<br/>Tecnologia do <a href='http://www.blogger.com' target='_blank'>Blogger</a>.</td>
<td style='width:28%;text-align:center;'><a href='LINK DO BLOG'><img alt='imagem-logo' border='0' id='logo-footer' oncontextmenu='return false' ondragstart='return false' src='LINK DA LOGO DO BLOG'/></a><br/></td>
</tr>
</table>
</div>

Agora vamos personalizar mais um pouquinho. Como vocês devem ter percebido, eu destaquei algumas partes nos códigos. 

A seleção em azul corresponde ao fundo do rodapé, que pode ser uma cor ou uma imagem, como eu uso aqui no blog. Para usar uma imagem substitua a linha selecionada por:

background: url(URL DA IMAGEM);

A seleção em amarelo é muito importante e não deve ser retirada. Isso evitará futuras punições do Google à você e ao seu blog.

Tirar espaço entre postagem e cabeçalho

Primeiramente:

Aperte Ctrl+F > Pesquise por /* Tabs > apague margin: 1em 0 0;

 Ctrl+F > Pesquise por /* Main > adicione margin-top: -10px; 

Vá aumentando o número, visualize antes de salvar, e se tiver descido, diminua o número, e se diminuir para -5 e não estiver bom, tire o -

Como colocar imagem no rodapé do blog.

 a largura de 1040px então faço as imagens com a largura de 1020px.

Fiz um mini tutorial por imagem para os mais iniciantes de como fazer a imagem do rodapé, só não reparem é bem meia boca rsrs. Clique nos links abaixo para ver as imagens.

Obs: Na imagem tutorial eu disse para fazer a imagem com a largura 20px menor que a largura do blog, mas se você quiser tente primeiro fazer a imagem com a largura do seu blog mesmo e se não der certo faça 20px menor.

Parte 1 Parte 2  

Logo após fazer sua imagem, salve e hospede em algum local.

Sem mais delongas, vamos pro tutorial:

Vá em Design > Editar HTML, e marque a opção "expandir modelos de widgets" . Pressione Ctrl + F e procure por  <!-- main -->   Logo ACIMA adicione o seguinte código:

<center> <img height='altura' src='Url da sua imagem' width='largura'/> </center> 

Onde estiver "altura" troque pela medida de altura da sua imagem, a minha é 100 e acho que é um bom tamanho se você estiver indeciso.
Troque também "Url da sua imagem" pela url (link) da sua imagem. Meio obvio né? rsrs
E onde estiver "largura" substitua pela medida de largura da sua imagem. 

data personalizada

1. No HTML aperte F3 e procure por .main-inner h2.date-header {
Logo abaixo, estará escrito assim:

font: $(date.font);
color: $(date.text.color);
}

Estão, substitua todo o código acima, por esse:

/* Personalizado by Farry Teen */
border-radius:10px 10px 0 0;
font: normal normal 12px tahoma; /* font */
text-transform:uppercase;
color: #000; /* cor da fonte */
background: #87CEFA; /* cor do fundo da caixa */
width: auto;
text-align: right; /* alinhamento do texto */
padding:5px; /* Tamanho da caixa */
float: right; /* Alinhamento da caixa */
right: 5px; /
margin-top:-25px; /* altura da caixa */
}

Visualize, e se a data estiver certinha, salve. Agora, personalizaremos as tags.

2. Ainda no HTML, aperte F3 e procure por ]]></b:skin> e logo acima, cole:

/* Personalização by farryteen.blogspot.com */
.post-labels {
border-radius:0 0 10px 10px;
font-size:14px; /* tamanho da fonte */
color: transparent;
background: #FFB5C5; /* cor do fundo da caixa */
width: auto;
text-align: center; /* alinhamento do texto */
font-size: 16px; /* tamanho da fonte */
padding: 3px 8px 3px 1px;
float: left; /* alinhamento da caixa */
left: -10px;
margin-top:15px; /* altura da caixa */
}

Separar area da postagem e sedebar

 O tutorial de hoje é como separar as postagens e a barra lateral, vai ficar assim como esta na foto.

 Então vamos lá, na nova plataforma do blog, vá em Layout, HTML, e Ctrl F e procure por:

 .main-inner .column-center-outer {

  Ao encontrar, apague toda essa área.

 Apagou? Agora no lugar dela você vai colocar esse código:

.post-outer {background: #fff; /* Fundo da postagem */padding-top: 4px; /* Espaço do topo */padding-left: 5px; /* Espaço da esquerda */padding-right: 5px; /* Espaço da direita */margin: 5px 3px 25px; }

 Visualize e prontinho.

Personalize a footer das postagens facilmente

Vá em design -> Editar html -> Dê um CTRL + F e procure por: .post-footer {

Quando encontrar substitua todo o código que vem junto com ele e acrescente esse:

.post-footer {

  margin: .5em 0;

  line-height: 1.6;

background-color: #FFE4E1;

border-top: 1px dashed #696969;

font-weight: bold; 

}

Topo Sidebar

Barrinha no topo do blog e separar a sidebar II

Oi oi gente! No tutorial de hoje vamos aprender como colocar essa barrinha no topo do blog, havia algumas leitoras pedindo, e aqui estou eu. Eu acho que vocês vão gostar, pois é bem fácil e faz uma grande diferença no layout *-*

1- Vá até Design, Editar HTML, aperte CTRL+F e procure por: body {

2- Logo abaixo, acrescente: border-top: 9px solid #FFC0CB;

Personalização:


9px - Grossura da barra


#FFC0CB - Cor da barra, se quiser outros tipos, acesse essa tabela.

http://viverserfeliz-renata.blogspot.com.br/2012/01/barinha-no-topo-do-blog.html

--------------------------------------------------------------------------------------------------------------------------------------------------------------

Heeey meus amores, quanto tempo sem tutorial hein? Hoje trago um que está virando sensação na maioria dos blogs, são os gadgets divididos em uma coluna larga e transparente. Quem vê pensa ser super complicado, mas na prática é bem fácil, e não é necessário mexer com muitos códigos, vamos aprender?

Primeiramente vá em Design -> Designer do modelo -> Avançado -> Plano de fundo da barra lateral e selecione a opção de "Transparente". Salve e vá para "Editar html".

Lá dê um Ctrl + F e procure por: /* Widgets, antes de fechar a chavinha, acrescente:

background-color: #CORHTML;

No lugar de #CORHTL, escolha a cor que preferir usando essa tabela. Como podem perceber, é super simples e não exige nenhum conhecimento profissional em HTML, espero que tenham gostado :D

Como ficará:

nuvens nas postagens

                        Colocando as nuvenzinhas sem HTML:

     É só você fazer um cabeçalho, saber a largura da área de posts e da sidebar do seu blog, depois subtrair os valores de largura total do blog, com o valor total da sidebar. Como por exemplo, se o seu blog for da largura de 1020 e a sidebar 300, a largura da área de posts do seu blog será  720 de largura,então será nesse espaço que você fará as nuvens. 

    

                    Fiz 2 bases de cabeçalhos editáveis, ambos com as nuvenzinhas. Eu não coloquei os créditos ali porque eu sei que fica atrapalhando e tal, então peço para quem salvar, colocar os créditos do cabeçalho na página de créditos ok! 

Para salvar no tamanha original, é só clicar encima na imagem e salve: 

(largura total: 1100, altura: 304. largura da área de post 796)

(largura total: 1100- Altura: 300-Largura da área de post: 800)

                    

Vamos conferir como colocar com o HTML! É  só clicar em ''leia mais''!

                    Colocando as nuvenzinhas com o HMTL:


Vá em Desing - Editar HTML- De Ctrl + F, aí aparecerá uma caixinha de busca, então digite nela o seguinte código:

.main-inner .column-center-outer {

Se você nunca editou seu essa parte do HMTL, aparecerá mais ou menos assim:

 .main-inner .column-center-outer {
  background: $(post.background.color) $(post.background.url) repeat scroll top left;
  _background-image: none;
} 

Então,apegue a linha   _background-image: none; , no lugar coloque o seguinte código:


background-image: url(url da imagem);
background-position: center top;
background-repeat:no-repeat; 

Obs: Se você quiser que a imagem fique no footer da área da postagem troque top por bottom.

Então, como eu disso no começo do post, a imagem para ser colocada ali deve ser exatamente da largura da área de posts '' se o seu blog for da largura de 1020 e a sidebar 300, a largura da área de posts do seu blog será  720 de largura''.Depois de pronta a imagem, é só por o url dela no local do código onde se pede.

Repetir a data nos posts do mesmo dia

Repetir a data nos posts do mesmo dia

  
Por padrão, o Blogger não mostra a data em todos os posts escritos em um mesmo dia, deixando a informação visível apenas no último publicado. Para contornar este problema, vá em Editar HTML e clique em Expandir Modelo de Widget. Procure por:

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

E substitua tudo por:

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