Acessando o código XML/HTML na nova interface do blogger

"Como eu posso acessar o código do meu template na nova interface?" Esta é realmente a pergunta básica para todos os iniciantes  que não sabem muito sobre a nova interface. Pois bem vou ensinar a vocês a como editar a parte XML/HTML do seu site.

1º faça o login no blogger e clique em:

Neste painel, escolho o blog que você deseja acessar código XML do Template, então clique no menu drop-down e escolha modelo.

Depois disso, você vai ver uma interface como essa abaixo:

Agora, clique no botão Editar HTML para acessar o código do template do blog.

Após clicar em Editar HTML, uma nova tela vai se abrir como mostrado abaixo:

Um aviso em amarelo será exibido como acima. Clique em Prosseguir para confirmar o acesso.

Pronto você já acessou código XML do template, como mostrado abaixo:

Em alguns casos, você precisará acessar a versão completa XML / HTML do template. Se você precisar, marque a caixa "Expandir modelos de Widgets". Cuidado ao mexer no código do template.
Faça antes uma copia de segurança.

Alterar o texto “Postar um comentário”

Nos modelos padrões do Blogger aparece a mensagem “postar um comentário”, logo acima do formulário de comentários. Muitos blogueiros não gostam dessa mensagem e querem muda-la para uma coisa mais chamativa mas não sabem como. Então irei ajudar a trocar essa mensagem.

A primeira coisa a fazer é seguir para “Design”  “Editar HTML”, baixe uma cópia do modelo e clique na caixinha “expandir modelos de widgets”. Após fazer isso, encontre a linha abaixo (para facilitar use o CTRL + F do seu navegador):

<h4 id='comment-post-message'><data:postCommentMsg/></h4>

O código <data:postCommentMsg/> se refere a “postar um comentário”, para modificar é só substituir pela frase desejada.

<h4 id='comment-post-message'>Sua mensagem aqui</h4>

É isso, qualquer dúvida deixe um comentário.

Novo Efeito do blogger o LightBox Nativo

Yo galera , hoje venho trazer a grande novidade do blogger o efeito LightBox pra quem não conhece é o mesmo efeito que eu uso nas imagens, para muitos isso é bom mas para outros é horrível, então vou trazer uma sinopse dessa ferramenta e logo no final eu coloco a solução para retirar.

O Blogger acabou de implementar um novo recurso com efeito nas imagens dos posts,

é o efeito conhecido como LightBox.

A equipe do Blogger informou em seu fórum oficial que estão revendo o

funcionamento do Lightbox,portanto, o efeito foi cancelado pelo próprio Blogger. Aparentemente, o recurso passará por melhorias, e posteriormente, ser relançado.

Então vamos a minha opinião, essa ferramente é ótima. Por que Ulquiorra sama ?

É simples, se você é daqueles que não usa muitos efeitos no blog e tal ou por que não gosta ou por que acha besteira enfim.. esse efeito simples deixa as coisas bem bonitas.

O lado negativo para aqueles que são como eu, que adora encher o blog de efeito pra deixar ele lento kkkkk, fica rui então como tudo tem uma solução trago 3 maneiras de retirar esse efeito. Então vamos lá:

Primeira maneira:

Há um Script que você pode adicionar ao código fonte do Blog. Abrindo o “Editar HTML”, procure pela seguinte linha:

</head>

Imediatamente ANTES disso, cole o trecho:

<script type="text/javascript">

//<![CDATA[

function killLightbox() {

var images = document.getElementsByTagName('img');

for (var i = 0 ; i < images.length ; ++i) {

images[i].onmousemove=function() {

var html = this.parentNode.innerHTML;

this.parentNode.innerHTML = html;

};

}

}

if (window.addEventListener) {

window.addEventListener('load',killLightbox,false);

} else {

window.attachEvent('onload',killLightbox);

}

//]]>

</script>

Segunda maneira:
Procure por:

</html>

Imediatamente ANTES disso, cole o trecho abaixo:

<script type='text/javascript'>

document.getElementById('main').innerHTML = document.getElementById('main').innerHTML.replace("'lightboxEnabled': true,","'lightboxEnabled': false,");

</script>

Terceira maneira:
Procure por:

</html>

Imediatamente ANTES disso, cole o trecho abaixo:

<script type='text/javascript'>
gooimg = document.getElementById('main');
goobox = gooimg.innerHTML;
goobox = goobox.replace("'lightboxEnabled': true,","'lightboxEnabled': false,");
gooimg.innerHTML = goobox;
</script>

É isso, espero que gostem.

Dividir rodapé em 3 colunas

Yo galera, venho trazer mais um tutorial ótimo pra quem quer dividir o rodapé em 
3 colunas. 
Exemplo:

Primeiro passo:

Vai, no blogger, vá em Design, Editar HTML, procure por:

<div id='footer-wrapper'>

<b:section class='footer' id='footer'/>

</div>

Após encontrar, substitua o código acima por esse logo abaixo:

<div id='footer'>

<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>

<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>

</div>

<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>

<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>

</div>

<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>

<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>

</div>

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

<div id='footer-bottom' style='text-align: center; padding: 10px;'>

<b:section class='footer' id='col-bottom' preferred='yes'>

</b:section>

</div>

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

</div>

Está pronto, depois é só adicionar um gadget normalmente. Se ainda tiver dúvidas deixe um comentário. 

Personalizando a mensagem dos marcadores

Yo galera, venho ensinar a como personalizar a mensagem exibida pelo marcador. 

Como assim o Ulquiorra sama, bem vou a mostrar o que é.

 É essa abaixo, eu já ensinei a retira-la agora vou ensinar a personalizar essa mensagem. 

1º Primeiro passo vai em editar html, marque expandir modelos de widgets 

e procure (Crtl+F) por:

<div class='status-msg-wrap'> 
<div class='status-msg-body'> 
<data:navMessage/> 
</div> 
<div class='status-msg-border'> 
<div class='status-msg-bg'> 
<div class='status-msg-hidden'><data:navMessage/></div> 
</div> 
</div> 
</div>

2º Substitua todo o código acima por este: 

<div class='status-msg-wrap'> 
<li>A SUA MENSAGEM&quot;<data:blog.pageName/>&quot;:</li> 

</div>

3º Aplicando efeito na mensagem e no fundo:

 Procure por: 

]]></b:skin>

Antes dela Coloque o código abaixo:

.status-msg-wrap {

text-align: left;

margin:6px 0px;

background:#e6e6e6;

color: #cc0000;

padding:6px;

border:1px solid #ccc

}

.status-msg-wrap li {

list-style-type:none;

font-weight:bold

}

Obs: Agora é só personalizar, se você quer colocar uma imagem no fundo, basta trocar a tag  do "  background:#e6e6e6" por background: url(SUA IMAGEM) no-repeat .
É isso, qualquer dúvida deixe um comentário. 

Como Direcionar Sidebar

Yoh, People... irei ensina a mover sidebar e área de post. Tudo junto e misturado.

GoGo Power Rangers... (Obs: Meu irmão... Guns é muito foda. kkkkkkk)

~Post para template Minima.... (todos os meus postes são para o Minima.)

Primeiramente abram o Blogger > Design > HTML > Modelos de Widget

Procurem por:

#main-wrapper {

Se você quer o main na direita, coloque: float:right;

Se for para esquerda, coloque: float:left;

Para coloca-lo mais pra cima use margin-top:-20px; (mude o valor se for preciso.)

Para coloca-lo mais para baixo use margin-top:20px; (mude o valor se for preciso.)

Agora para esquerda ou para direita vai depender o float...

Se for float:left; use margin-left:20px; para move-lo à direita.

Se for float:right; use margin-right:20px; para move-lo à esquerda.

A mesma coisa que ensinei para o #main-wrapper, você irá usar com #sidebar-wrapper.

Não esquecer de ajustar o width (a largura) dos wrapper de acordo como está no lay.

Como criar um marcador

Yo, me pediram pra ensinar essa função do blog, que é bem fácil pra quem já sabe usar >< , então vamos lá.

Pra facilitar a leitura e busca de informações em seu blog, é preciso organizar os artigos em grupos, na mesma categoria. Classificando os posts por assunto, as pessoas podem ler apenas o que interessa. 

Vamos aprender a adicionar um marcador.

Se vai criar um novo marcador, escreva a palavra desejada (pode ser até uma pequena frase). Se for adicionar mais de um marcador para a mesma postagem, então separe por vírgula.

Você pode usar marcadores que já existem. Para ver oq ue você já adicionou em outras postagens para interligar os conteúdos, então clique no link “Mostrar tudo”.

Agora vamos adicionar os marcadores na pagina inicial.

Esse gadget só funciona direito e só aparecerá algo se você já adicionou os marcadores ao menos em um post. Só exibirá algo se algo existe.

Abra o painel do Blogger e clique no menu “Layout” (Design) ~> “Elementos da página” e adicione um gadget na barra lateral clicando em “Adicionar um Gadget”. Na janela que abrir escolha a opção “Marcadores”.

Agora você pode configurar como quer exibir a lista de palavras, a lista de marcadores e categorias das postagens de seu blog. Espero que tenha ajudado.

Personalize a caixa de busca

Yo, achei esse tutorial bem bacana pra quem quer personalizar a caixa de busca porém eu ainda ão testei, quando tiver tempo eu testo. Valeu. 

Para adicionar a caixa de busca vá até Layout » Elementos da página » Adicionar um gadget » Caixa de pesquisa. Configure-a conforme desejado.

Para personalizar as cores, basta aplicar seu conhecimento de CSS às principais classes do widget. Vou dar alguns exemplos que eu testei, mas você deverá personalizar as cores para combinar com seu site.

Para não exibir o logo do Google:

.gsc-branding-text, .gsc-branding-img-noclear {display:none;}

Personalizando fonte e cor do campo de texto:

td.gsc-input input {border:1px dashed #ff9900; color:#ff0099; font-family:verdana; font-size:11px; background:#fffff0;}

---

Mudança de cor e fonte quando o mouse estiver sobre o campo:

td.gsc-input input:hover {font-family:courier new; border:1px solid #ff0099; background:fff;}

---

Mudança de cor e fonte quando o mouse clicar dentro do campo:

td.gsc-input input:active {color:#000; background:#fc0; border:#000 1px solid;}

---

Cor e fonte do botão:

input.gsc-search-button {font-family:'trebuchet ms'; font-size:14px; color:#fff; background:#0099ff; border:0px; font-weight:bold;}

---

Mudança de cor e fonte quando o mouse estiver sobre o botão:

input.gsc-search-button:hover {background:#ff66cc; color:#000;}

---

Mudança de cor e fonte quando o mouse clicar no botão:

input.gsc-search-button:active {background:#6b8e23; color:#fff;}

---

Todos os exemplos devem ser colocados acima do código ]]></b:skin> do HTML de seu blog:

.gsc-branding-text, .gsc-branding-img-noclear {display:none;} td.gsc-input input {border:1px dashed #ff9900; color:#ff0099; font-family:verdana; font-size:11px; background:#fffff0;} td.gsc-input input:hover {font-family:courier new; border:1px solid #ff0099; background:fff;} td.gsc-input input:active {color:#000; background:#fc0; border:#000 1px solid;} input.gsc-search-button {font-family:'trebuchet ms'; font-size:14px; color:#fff; background:#0099ff; border:0px; font-weight:bold;} input.gsc-search-button:hover {background:#ff66cc; color:#000;} input.gsc-search-button:active {background:#6b8e23; color:#fff;} ]]></b:skin>

Creditos : <htmhelen>

Retirar 'Assinar: Postagens (Atom)'

Em alguns Templates aparece aquela mensagem "Assinar Postagens ATOM" no final de cada postagem, mas você pode retirá-la. Para isso, basta você ir até "design" >>"editar HTML", procurar pela tag:

.feed-links {

e acrescentar logo abaixo dela:

display: none;

Caso não haja este trecho no seu template, basta você copiar as duas linhas postadas acima e colar antes de:

]]></b:skin>

Dica: a tag display:none pode ser utilizada para ocultar qualquer elemento no seu html, bastando apenas que você descubra a class ou div do elemento e acrescentar a tag logo abaixo.

Retirar - Mostrar Todos os Posts

Vou ensinar a tirar a mensagem mostrar todos os posts, então vamos começar.

1º Procure por:

]]></b:skin>

2º Antes dela Coloque o código abaixo:

.status-msg-wrap, .status-msg-body, .status-msg-border, .status-msg-bg, .status-msg-hidden {
display: none;}

Retirar a barra do blogspot

Para retirar a barra do blogspot basta colocar este código:

<style>

#navbar-iframe { height:0px; visibility:hidden; display:none }
</style>

Ajuda:
Para fazer isso vá em layout e escolha a guia editar html, quando aparecer o código do seu blog procure por: (isso está bem no começo do html) e cole o código acima depois é só clicar para salvar e pronto.

Colocar imagem no fundo do blog

Pra você colocar uma imagem no fundo do seu blog, faça o seguinte:

Entre o no HTML do seu Template.

Procure a tag:

body {

Está logo no início do html

Agora veja se na tag tem a palavra background

Se não tiver coloque esse código logo após a tag body {

background: black url('ENDEREÇO DA IMAGEM') fixed top left repeat-x;

Se ja tiver a palavra background, Substitua.

Vamos as variáveis.

black - Significa que a cor de fundo atrás da imagem é preta. (Para trocar de cor, basta trocar a palavra) - Red=vermelho, #ffffff=Branco, green=Verde...

Fixed - Significa que a imagem irá ficar intacta ao você mexer a Barra de Rolagem, caso queria que a imagem se mova junto ao texto retire essa palavra

top - Significa que a imagem irá ficar no Topo, caso queira que ela fique em baixo, troque por "bottom".

left - Significa que a imagem irá ficar a esquerda, se quiser que fique a direita, troque por "right."

repeat-x - Significa que a imagem irá se repetir na horizontal, caso queria que repita na Vertical troque "x" por "y", caso queira que não se repita troque "repeat-x" por "no-repeat"