7# Créditos no rodapé sem ocupar a largura do blog.

Boa noite meninas!

Oi meninas! O tutorial de hoje é super simples.

Criei agora a pouco mesmo.

Muita gente conhece esse tutorial de créditos no rodapé, só que o tutorial que eu criei é diferente.

Ele é em HTML/ Java Script, sendo o que as pessoas mais conhece é no editar modelo, e  esse que eu criei não ocupa a largura do blog.

Vamos começar!

Resultado:

Clique aqui para ver como que fica no blog.

Primeiro vá em > Design> Layout > E adicione um gadget no final da página, veja um exemplo para entender melhor:

Em seguida > HTML/ Java Script e cole esse código:

<div style="font-family: arial, helvetica, sanserif; height: 53px; width: 1000px;">

<br /></div>

<div style="background-color: Cor da barrinha; font-family: arial, helvetica, sanserif; height: 31px; width: 1000px;">

<div style="float: left; padding-left: 5px; position: relative;">

<div class="pchwref" style="font-size: 11px; height: 21px; padding: 9px 0px 0px 15px; width: 713px;">

Escreva aqui</div>

</div>

</div>

Entendendo o código:

Cor da barrinha - Cor do fundo da barra, clique aqui para ir na tabela de cores.

Escreva aqui - Escreva o que quiser.

Ao ter terminado de fazer tudo o que eu falei, salve e visualize pra ver se deu tudo certo.

Se postar o tutorial, credite.

Bjs

6# Barra de imagens

Olá meninas!

Hoje eu fiz um tutorial que se chama Barra de imagens que fica no final da página do blog.

O código dele é muito grande e vocês vão precisar alterar muita coisa por causa disso.

Não pense que é difícil o tutorial, pois meus tutoriais vão ser sempre fáceis de se - usar no blog.

Vamos começar!

Resultado:

Clique aqui para ver como que fica no blog.

Atenção: O blog precisa de um pouco de mais largura que o normal, para a barra de imagens ficar do jeitinho que esta em cima, em fileira.

Primeiro vá em Design > Layout e adicione um gadget lá no final da página, veja um exemplo para entender melhor:

E em seguida > HTML/Java Script e cole esse código:

<section align="center" id="section1" style="background-color: blogmeustutoriais;" title=""><article id="article1"><span style="color: white;"><h1 style="color: inherit; font-family: inherit; font-size: 38.5px; line-height: 40px; margin: 10px 0px; text-rendering: optimizelegibility;">
<span class="icon-heart" style="-webkit-font-smoothing: antialiased; background-image: none; background-position: -96px 0px; background-repeat: no-repeat no-repeat; display: inline-block; font-family: FontAwesome; font-weight: normal; height: 14px; line-height: 14px; margin-top: 1px; text-decoration: inherit; vertical-align: text-top; width: 14px;" title="icon heart"></span>&nbsp; &nbsp;&nbsp;<span class="icon-heart" style="-webkit-font-smoothing: antialiased; background-image: none; background-position: -96px 0px; background-repeat: no-repeat no-repeat; display: inline-block; font-family: FontAwesome; font-weight: normal; height: 14px; line-height: 14px; margin-top: 1px; text-decoration: inherit; vertical-align: text-top; width: 14px;" title="icon heart"></span>&nbsp;</h1>
</span></article><ul class="thumbnails" style="list-style: none; margin: 0px 0px 10px -30px; padding: 0px;">
<li class="span3" style="background-color: white; float: left; margin-bottom: 20px; margin-left: 30px; min-height: 1px; width: 270px;"><div class="thumbnail" style="-webkit-box-shadow: rgba(0, 0, 0, 0.054902) 0px 1px 3px; -webkit-transition: all 0.2s ease-in-out; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border: 1px solid rgb(221, 221, 221); box-shadow: rgba(0, 0, 0, 0.054902) 0px 1px 3px; padding: 4px; transition: all 0.2Fs ease-in-out;" title="Nome ao passar o mouse no titulo 1">
<span style="color: #ff6699;"></span><br />
<h2 style="color: inherit; font-family: inherit; font-size: 31.5px; line-height: 40px; margin: 10px 0px; text-rendering: optimizelegibility;">
<span style="color: Cor da letra do titulo 1;">
Título 1</span></h2>
<span style="color: ;">
<a href="" style="color: #0088cc; text-decoration: none;" target="_blank"><img alt="Tutoriais universe stickers image" src="URL da imagem 1" data-src="holder.js/300x200" style="border: 0px; height: auto; max-width: 100%; vertical-align: middle;" title="Nome ao passar o mouse na imagem 1" /></a></span><br />
<div style="margin-bottom: 10px;">
<span style="color: Cor da letra da descrição 1 ;">Escreva aqui 1 </span></div>
<span style="color: #ff6699;">
</span></div>
</li>
<li class="span3" style="background-color: white; float: left; margin-bottom: 20px; margin-left: 30px; min-height: 1px; width: 270px;"><div class="thumbnail" style="-webkit-box-shadow: rgba(0, 0, 0, 0.054902) 0px 1px 3px; -webkit-transition: all 0.2s ease-in-out; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border: 1px solid rgb(221, 221, 221); box-shadow: rgba(0, 0, 0, 0.054902) 0px 1px 3px; padding: 4px; transition: all 0.2s ease-in-out;" title="Nome ao passar o mouse no título 2">
<span style="color: #ffcc33;"></span><br />
<h2 style="color: inherit; font-family: inherit; font-size: 31.5px; line-height: 40px; margin: 10px 0px; text-rendering: optimizelegibility;">
<span style="color: Cor do titulo 2;">
Título 2</span></h2>
<span style="color: ;">
<a href="" style="color: #0088cc; text-decoration: none;" target="_blank"><img alt="Nome ao passar o mouse na imagem" src="URL da imagem 2" data-src="holder.js/300x200" style="border: 0px; height: auto; max-width: 100%; vertical-align: middle;" title="Nome ao passar o mouse na imagem 2" /></a></span><br />
<div style="margin-bottom: 10px;">
<span style="color: Cor da letra da descrição 2;">Escreva aqui 2</span></div>
<span style="color: ;">
</span></div>
</li>
<li class="span3" style="background-color: white; float: left; margin-bottom: 20px; margin-left: 30px; min-height: 1px; width: 270px;"><div class="thumbnail" style="-webkit-box-shadow: rgba(0, 0, 0, 0.054902) 0px 1px 3px; -webkit-transition: all 0.2s ease-in-out; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border: 1px solid rgb(221, 221, 221); box-shadow: rgba(0, 0, 0, 0.054902) 0px 1px 3px; padding: 4px; transition: all 0.2s ease-in-out;" title="Nome ao passar o mouse no titulo 3 ">
<span style="color: #33cccc;"></span><br />
<h2 style="color: inherit; font-family: inherit; font-size: 31.5px; line-height: 40px; margin: 10px 0px; text-rendering: optimizelegibility;">
<span style="color: Cor do título 3;">
Título 3</span></h2>
<span style="color: ;">
<a href="" style="color: #0088cc; text-decoration: none;" target="_parent"><img alt="Nome ao passar o mouse na imagem" src="URL da imagem 3" data-src="holder.js/300x200" style="border: 0px; height: auto; max-width: 100%; vertical-align: middle;" title="Nome ao passar o mouse na imagem 3 " /></a></span><br />
<div style="margin-bottom: 10px;">
<span style="color: Cor da letra da descrição 3;">Escreva aqui 3</span></div>
<span style="color: ;">
</span></div>
</li></ul></section>


Bom, vou explicar melhor o código para vocês entenderem.

Entendendo o código: 

Vocês sabem que na barrinha contém 3 espaços para por 3 imagens.
No final de cada código que está de amarelo, eu coloquei um número em cada  para vocês saberem de qual imagem que é. A primeira é o número 1, a segunda é o número 2 e a terceira é 3.
Exemplo:
Lá no código acima tem  um código amarelo que ta Cor do título 3 ,o número final  é o 3 que quer dizer que é a terceira imagem.
Agora vamos saber o significado desses códigos.

                                                           

Nome ao passar o mouse no titulo - Você tem que escrever alguma coisa porque quando a pessoa passar o mouse no titulo vai aparecer um balãozinho com as palavras que você escreveu.

Cor da letra do titulo  - É pra você colocar a cor do titulo, clique aqui para ir na tabela de cores.

Titulo - É pra você escrever o título.

URL da imagem   - É pra você colocar o URL da imagem.

Nome ao passar o mouse na imagem - Você tem que escrever alguma coisa porque quando a pessoa passar o mouse na imagem vai aparecer um balãozinho com as palavras que você escreveu.

Escreva aqui - Você tem que escrever a descrição da imagem, um pouco sobre a imagem.


Cor da letra da descrição - É a cor da letra que você vai por do escreva aqui ,clique aqui para ir na tabela de cores.

 Espero que tenham gostado!
Se postar o tutorial credite.

Bjs!

5# Casinha da Despedida

Boa noite!

O tutorial que trago hoje para vocês se chama Casinha da Despedida.

Eu fiz ele essa semana.

Fiz o tutorial para aqueles blogs que fecharam, abandonados.

Pra você que cansou de seu blog, esse tutorial pode te servir a dar uma mensagem mais chamativa avisando que o seu blog esta fechado, eu sei kkkk é estranho o tutorial que eu fiz!!! Eu não planejava isso, acontece que deu muito bug no que eu desejava e acabou dando isso.

Agora você se pergunta, por que casinha?

Minha intenção era como se a casinha fosse o blog e ela esta totalmente fechada dizendo que o blog fechou. 

O mais difícil de fazer esse tutorial foi fazer a casinha kk. Mas em fim, eu consegui.

Vamos começar!

Resultado:

Clique aqui para ver como que fica no blog!

Observação: Pra a casinha aparecer o blog tem que estar aberto porque muitos blogs que costumam ser fechados são excluídos.

Design> Layout e adicione um gadget em baixa do cabeçalho , veja um exemplo:

E depois de ter adicionado um gadget > HTML/Java Script.

Cole esse código:

<div>

<span style="font-family: �q���M�m�p�S Pro W3, �l�r �S�V�b�N, Osaka, Verdana, arial, sans-serif;"><span style="font-size: 12.727272033691406px;"><br /></span></span></div>

<div id="Blog Meus Tutoriais" style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgv1ftI48vZfFWVq7b1_BNJV3yCmVofcwDA-1-tJSKNgOP4IJmWsuHVWUaIUK3zXceq1iIMCkR5e3ZPptuAveLMh_8EQRRbr_T-85piNqKC-INovTMciXdtPRYrRVqObcrcBQ6iSW9kOs/s1600/house+1.png); background-position: 0% 0%; background-repeat: no-repeat no-repeat; font-family: '�q���M�m�p�S Pro W3', '�l�r �S�V�b�N', Osaka, Verdana, arial, sans-serif; font-size: 13px; height: 594px; left: 0px; margin: 0px auto; padding: 0px; position: absolute; top: 28px; width: 728px; z-index: 1;">

<div id="news" style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuoofdF_yKz_Ki2dm_rq_OQItV-SeG4dtZWkZcNRsH5IdAEaCBp1npNIDWL_nu-3OCnTD-AemKgqHu94xZ-6sgIIcCXqIMbNtXoe6Sa986LMuyPMjh1gevAkAhbBn-NY9qzIAf5m-bkq0/s1600/novo.png); background-position: 0% 0%; background-repeat: no-repeat no-repeat; height: 68px; left: 170px; margin: 0px; padding: 50px 0px 0px 55px; position: absolute; top: 430px; width: 452px; z-index: 90;">

<dl style="height: 55px; margin: 0px; padding: 0px; width: 445px; z-index: 100;">Escreva aqui o motivo de você ter fechado o blog.&nbsp;</dl>

</div>

</div>

<div id="banner" style="font-family: '�q���M�m�p�S Pro W3', '�l�r �S�V�b�N', Osaka, Verdana, arial, sans-serif; font-size: 13px; margin: 0px; padding: 0px; position: absolute; right: 40px; top: 635px; width: 400px; z-index: 200;">

<div class="separator" style="clear: both; text-align: center;">

<span style="font-size: 13px;">&nbsp; &nbsp;</span></div>

</div>

Onde estiver escrito Escreva aqui o motivo de você ter fechado o blog você escreve o porque você quis fechar o blog ou abandonar.

Salve e visualiza pra ver se deu certo.
Se postar o tutorial em algum blog seu, credite.
Espero que tenham gostado do meu tutorial estranho ehehehe
Bjs

4# Colocando Cabeçalho Kawaii no blog

Oi de novo!

Nesse post iremos aprender a como colocar cabeçalho kawaii no blog.

Um tipo de modelo que eu fiz.

Foi criado 6 de agosto de 2014.

Vamos começar!

Resultado do cabeçalho:

Clique aqui para visualizar o cabeçalho.

Vamos lá!

Primeiro vocês vão ter que excluir o cabeçalho do blog de vocês.

Clique aqui para ir ao tutorial de excluir cabeçalhos.

Ok, agora preste bem atenção no que vou dizer para você.

Depois de ter excluído o cabeçalho, sabe o lugar a onde o cabeçalho estava? Que é a parte de cima? Veja um exemplo para entender melhor:

A onde está marcado de vermelho você clica em adicionar gadget, depois em HTML/JavaScript e cole esse código:

<br /><div style="border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; text-align: right;"><br /><br /><br /><div id="sidebar02" style="background-image: url(Imagem 1 ); background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; border: 5px solid rgb(209, 240, 255); color: Cor da Letra; height: auto; margin-left: -65px; margin-top: -25px; padding: 65px 3px 15px; position: fixed !important; text-align: center; width: 13620px; z-index: 999;"><h5 style="font-family: craftygirls; font-size: 42px; letter-spacing: 1px; line-height: 18px; margin-left: 65px; padding: 1px; position: fixed; text-align: left;"><div id="sidebar01" style="background-image: url(Imagem 2); border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; border: 5px solid rgb(255, 133, 214); height: auto; margin-left: 375px; margin-top: -125px; padding: 15px 3px; position: fixed !important; text-align: center; width: 500px; z-index: 999;">Título do seu blog</div></h5></div></div>

Entendendo melhor o código:
Imagem 1 - É pra você por o URL da imagem que vai ficar por fora do balão do título.
Imagem 2 - É pra você por o URL da imagem que vai ficar dentro do balão do título.
Cor da Letra - É a cor da letra do título, clique aqui para ir até a tabela de cores.
Título do seu blog - Provavelmente é para você escrever o nome do seu blog.

E por último, salve, visualize e veja se deu tudo certinho.
Se postar em seu blog, credite.
Bjs