TAMANHOS DE IMAGENS, SIDEBAR E HEADER

Header
A imagem do header tem 1000px X 300px. Você deve colocá-la em "Layout" e editar o gadget do cabeçalho, escolhendo colocar a imagem "AO INVÉS DO TÍTULO E DESCRIÇÃO".

Sidebar
A sidebar tem largura de 300px.

Área de postagem
A área de posts tem largura total de 640px. As imagens devem ser desse tamanho ou maiores (saiba mais)

---

É expressamente proibido retirar os créditos do rodapé do post e/ou do código do blog.Todos os eventuais códigos utilizados de outros autores foram devidamente creditados.

EDITAR FOTO E DESCRIÇÃO DO PERFIL

Resolvi tirar o perfil integrado ao blogger porque estava dando muita dor de cabeça para editar. Então, fiz da maneira mais simples: widget na sidebar. Para editar o perfil, siga os passos:

1. Vá em "Layout" e edite o widget/gadget "PERFIL". Caso o seu template não tenha isso, é só ir em "Layout > Adicionar um Gadget" > HTML/Javascript;
2. Colar o código abaixo dentro do widget;
3. Editar com suas preferências;
4. Salvar e pronto!

• A imagem de perfil deve ser quadrada para a imagem ficar totalmente redonda.

Código:

<center> <div id="perfil"> <img src="SUA-IMAGEM-AQUI" style="-moz-border-radius: 1000px; -webkit-border-radius: 50%; -o-border-radius: 50%; width:250px; heigh:auto;" /> <br /> <br /> SUA DESCRIÇÃO AQUI<br /> Saiba mais sobre mim <b><a href="LINK DO POST">{+}</a></b> <br /></div> </center>

Você pode personalizar sua foto da maneira como quiser para dar um efeito mais legal :)

Post com comentários

Este é um exemplo de post com comentários. Clique no link 'Comentários' no footer da postagem para ver como é o exemplo.

Colocar caixa de pesquisa

Para colocar uma caixa de pesquisa igual ao template, siga o passo-a-passo:

1. Ir em "Layout" e editar o widget "PESQUISE". Caso ele não exista, ir em "Layout > Adicionar Gadget > HTML/Javascript" e posicionar na sidebar ACIMA do Arquivo;
2. Colar o código abaixo;
3. Salvar e pronto!

Código:

<p align="center"> <p align="center"> <form action="/search" class="search" method="get"> <input class="searchbar" id="s" name="q" type="text" value="" /> <input class="searchbut" type="submit" value="Buscar" /> </form> </p>

Para estilizar a pesquisa você deve alterar o CSS em "Modelo > Editar HTML".

Como colocar o Menu de Redes Sociais

Para colocar o Menu de Redes Sociais você deve seguir o passo-a-passo:

1. Ir em "Layout" e editar o widget "FOLLOW ME". Caso ele não esteja aparecendo, ir em "Layout > Adicionar Gadget > HTML/Javascript" e posicionar ABAIXO do perfil e ACIMA da pesquisa (muito importante!)
2. Colar o código abaixo e editar com suas redes sociais;
3. Salvar e pronto!

Código:

<p align="center"> <p align="center"> <a href="URL DO FACEBOOK"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsL-T2azs8PclcuPA5fHHNl_4_xTy9lqjGnTMNvmQM4DSss0Qw68oy_OqH7FqMFtP7gqZU1TAd1p3_bteqoXSG1ehcAUM5xGIoK5BtbqJYbvHLXmv1qGI5rHLckTAENcwqucUe6IMzPM-f/s1600/facebook.png" /></a> <a href="URL DO TWITTER"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLkzG8Es28RX98Du6jQ2HG35aCTuZlK5cKDn89a-nPrsellH1wpVQ-wMfppMeAj2cPvuD2I-SINXc8YQQ5j295ChrV8hw9f0EFAFt33WdrW2qXQsCGIq6ks53u1YO05UqXY0dt7Hie7XMi/s1600/twitter.png" /></a> <a href="URL DO INSTAGRAM"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyoJOaQlhWi4g-2ofuddPhc2Uko2MKjqcm8FSlfqdpUPP_ydMMiVNvMhBgEgLpHR9R2bG-epuarlIyjTu3v6NygdQfQ5gwBYctn5ml8OZ2lfNNH4r-r74Mt9uj5mrRGEp9KJBGKCXYNQ2r/s1600/instagram2.png" /></a> <a href="URL DO TUMBLR"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhNN0Pg0WR-V5qStY3JvVR0lDyqCwPzVS9nwX10eTGpgA5AGzcgjX74-fQaytuhmaTX3Haws6a2ikkm9pOxqbbPJvtxHDZxCozJKr8DWlfi7hFTtxySntL4RNXWidR82Hc6xCgRbXYe4om/s1600/tumblr2.png" /></a> <a href="URL DO YOUTUBE"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6gyiovKJ9Rsn3lPYnbvZBGDLnC1fbkyNnFcqVJj4zV1V1nnjxBwDNc5g-YJ0XOxinoyQg1Vck1oX4sx604fAKC7WQ0oV3Ode6cGVXJensb6wEr4LW5eYnb4fBHhvSCvZPbjtoXAjnRQC9/s1600/youtube.png" /></a></p>

Se você quiser mudar os ícones das redes, é preciso modificar os links das imagens pelos ícones de sua escolha.

Como colocar o Menu Principal

Para colocar o menu principal (localizado na barra fixa acima), você deve seguir o passo-a-passo:

1. Ir em "Layout" e editar o widget "Menu". Se o seu template por ventura não tiver o widget pronto, é só ir em "Layout" > Adicionar Gadget > HTML/Javascript;
2. Colar o código abaixo;
3. Editar com suas informações pessoais nas áreas em destaque;
4. Posicionar ACIMA das postagens e ABAIXO do cabeçalho;
5. Salvar e pronto!

Código:

<p align="center"> <div id="mymenuda"> <div id="mymenu"> <li><a href="Link">Home</a></li> <li><a href="Link ">Sobre</a></li> <li><a href=" Link ">Categorias</a></li> <li><a href=" Link ">Contato</a></li> <div id='mymenuright'> </div> </div> </div> </p>

Como colocar o Slider

Para colocar o Slider neste template você deve seguir o passo-a-passo:

• O tamanho da imagem é de 1000px X 350px; 
• É preciso hospedar as imagens em algum lugar e substituir os links no código abaixo. 

1. Ir em Layout > Adicionar Gadget > HTML/JavaScript
2. Colar o código abaixo e Salvar
3. Posicionar o widget acima da área de postagem.

Código:

<p align="center"> <style type="text/css"> /* http://dimpost.com | Code By Haakblog | Adapted by Rafaella Ribeiro */ #sliderFrame { position:relative; width:1000px; margin: 0 auto 40px;} #slider { width:1000px; height:350px; background:#e5e5e5 url(http://183.111.144.100:7017/images/common/loading.gif) no-repeat 50% 50%; position:relative; margin:0 auto;} #slider img { clip: auto; position:absolute; border:none; display:none;} /* LINKS (if an image is wrapped in a link) */ #slider a.imgLink { z-index:2; display:none; position:absolute; top:0px;left:0px;border:0;padding:0;margin:0; width:100%;height:100%;} /* Legendas */ div.mc-caption-bg, div.mc-caption-bg2 { position:absolute; width:100%; height:auto; padding:0; left:0px; z-index:3; overflow:hidden; font-size: 0; bottom:0;} div.mc-caption-bg {background-color:black;} div.mc-caption { font-size: 15px; font-family: 'Montserrat', sans serif; color:#fff; z-index:4; padding:10px 0; text-align:center;} div.mc-caption a {color:#FB0;} div.mc-caption a:hover {color:#DA0;} /* --------- Outros ------- */ #slider { transform: translate3d(0,0,0); -ms-transform:translate3d(0,0,0); TEMPLATE FREE PARA BLOGGER – WINTER IS COMING DESENVOLVIMENTO: COFFEEPOCKET Não remova os créditos – Do not remove the credits -moz-transform:translate3d(0,0,0); -o-transform:translate3d(0,0,0);} </style> <script src="http://dimpost.googlecode.com/files/js-image-slider.js" type="text/javascript"></script> <div id="sliderFrame"> <div id="slider"> <a href="LINK PARA REDICIONAR"> <img src="LINK DA IMAGEM" alt="SUA LEGENDA AQUI" /></a> <a href="LINK PARA REDICIONAR"> <img src="LINK DA IMAGEM" alt="SUA LEGENDA AQUI" /></a> <a href="LINK PARA REDICIONAR"> <img src="LINK DA IMAGEM" alt="SUA LEGENDA AQUI" /></a> </div> </div>

Após seguir o passo-a-passo, seu slider estará pronto e funcionando!

Blockquote e Continuar Lendo

Abaixo um exemplo de blockquote (citação):

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

 Abaixo um exemplo de Read More (Continuar Lendo). Para mudar o texto que aparece, você deve ir em Layout > Na parte de Postagens clicar em 'Editar' > Digitar o texto preferido na caixa "Mais informações"

SOBRE IMAGENS, GIFS E VÍDEOS

As imagens e gifs dos posts desse template tem 640px de largura. Você deve:

1. Inserir a imagem (se possível maior que 640px);
2. Selecionar o tamanho "MUITO GRANDE";
3. Alinhar a imagem À ESQUERDA.

Fica como abaixo:



Faça a mesma coisa para GIFs.

Vídeos são adicionados normalmente.

Se você adicionar pela barra de ferramentas do blog (com a URL do Youtube apenas) ou se você colar o código de incorporar, deve alterar as medidas de width e height no HTML SEMPRE que colocar um vídeo, assim ele terá a largura total do post.

Colocar:
 style="margin-left:-20px" imediatamente ANTES de ></iframe> 

A programação do blogger é difícil e não é limpa, por isso tem que fazer esses ajustes :/