21.7.16

Radioactive Galaxy - Template Free



Ano: 2016

Criei este layout Free para você que gosta de tudo bem colorido e divertido. Foi o primeiro layout que fiz para o meu blog e resolvi disponibilizá-lo para vocês. Espero que gostem!


NÃO RETIRE OU ALTERE OS CRÉDITOS, PLÁGIO É CRIME! Crime de Violação aos Direitos Autorais no Art. 184 – Código Penal, que diz: Art. 184. Violar direitos de autor e os que lhe são conexos: Pena – detenção, de 3 (três) meses a 1 (um) ano, ou multa.
Fonte: PORTAL EDUCAÇÃO






TUTORIAIS:

Personalizando o menu de categorias:



1º - Clique em "Modelo" logo em seguida em "Editar HTML"



2º - Clique dentro do código, aperte CTRL+ F e procure na barra que apareceu no canto superior direito do código por: <div id='menu-cat'>

3º - Você vai achar o seguinte código:






Substitua o que se pede:

<a href='LINK-DO-SEU-BLOG/search/label/blogger'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhog99CNZQGMi5TKrPUbfSt0OqdO364HWqgNUHFhL4st-QTOHljSPQry9wMduMJ6qgNKFqtLbMjGyq2kvqmrtZ8p_itVnCSbutcgDh97pU-w5wjFwJ0ZcQwOfOSJlfWjxo2gbj2mKikJ5U/s53-Ic42/BLOGGER.png'/></a>

Ou seja, no meu caso ficaria:

<a href='http://b3nice.blogspot.com.br/search/label/blogger'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhog99CNZQGMi5TKrPUbfSt0OqdO364HWqgNUHFhL4st-QTOHljSPQry9wMduMJ6qgNKFqtLbMjGyq2kvqmrtZ8p_itVnCSbutcgDh97pU-w5wjFwJ0ZcQwOfOSJlfWjxo2gbj2mKikJ5U/s53-Ic42/BLOGGER.png'/></a>

Lembre-se de NUNCA retirar o apóstrofo que é essa virgulazinha aqui ' e também, quando você copiar o link ele vem com uma barra no final / lembre-se de excluí-la também.

Personalizando o menu:



1º- Vá em "Páginas" e crie páginas com o nome "sobre" "contato" e "redes sociais". Dentro delas vocês colocam suas informações.




2º - Agora lá no "Editar HTML" você clique em Ctrl + F de novo no código e pesquise por:

<div class='menu'>

E substitua as hashtags # pelo link das páginas que vocês criaram.

Ficaria então:

<div class='menu'>

<a href='LINK-DO-SEU-BLOG'>Home</a>

<a href='LINK-DA-PÁGINA-CRIADA COM O NOME SOBRE'>Sobre</a>

<a href='LINK-DA-PÁGINA-CRIADACOM O NOME CONTATO '>Contato</a>

<a href='LINK-DA-PÁGINA-CRIADA COM O NOME REDES SOCIAIS'>Redes Sociais</a>

</div>

</center>

</nav>

</div>




Personalizando Sobre mim:

<div id='perfil'>

<div clas=foto>

<img src='SUA FOTO AQUI'/>

</div>
<div class='descricao '>

ESCREVA SUA DESCRIÇÃO AQUI

<a href='COLOQUE O LINK DO SOBRE MIM'>Leia Mais </a>
<br />
<br />
</div>

<div class="social">
<a href="SEU FACEBOOK" class="fa fa-facebook" target="_blank"></a>
<a href="SEU INSTAGRAM" class="fa fa-instagram" target="_blank"></a>
<a href="SEU PINTEREST" class="fa fa-pinterest" target="_blank"></a>
<a href="SEU CANAL NO YOUTUBE" class="fa fa-youtube-play" target="_blank"></a>
<a href="SEU TWITTER" class="fa fa-twitter" target="_blank"></a>
<a href="mailto:SEU E-MAIL" class="fa fa-envelope-o" target="_blank"></a>
</div>
</div>

Barra de pesquisa na sidebar:

<style>
#searchbox {
background: transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlPQauvNEe-O49UVc2d3yqTKiMl98RxGhw4LAeBfvbYULzOychElrp2l6mXhkfdZVKXk-fHHWd7ZMXSy_7wAjtCLiAAriQIFTvB3RvxvTNKMqrpyB6iLvKvoN0sbTDcRtUu-Fg8neG-ko/s515-Ic42/Sem-T%2525C3%2525ADtulo-3.png") repeat-x scroll 0% 0%;
border: 4px solid #E8E8E8;
padding: 9px 7px 13px 25px;
width: 298px;
margin: -42px 0px -20px -27px;
}
input:focus::-webkit-input-placeholder {
color: transparent;
}
input:focus:-moz-placeholder {
color: transparent;
}
input:focus::-moz-placeholder {
color: transparent;
}
#searchbox input {
outline: none;
}
#searchbox input[type="text"] {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX6QEMMb83qZofLwE0kP7oT-58PekMQObQIfKThtMjU4t7nMnl3Tevy67RRp3IAGAuZXRCNupmXdoOmm-g5b5MLtoUA6oFHRx6ppM_d78Mn-zukJAqVZjI__527Arz0pNDNKLwSUO5hUjH/s1600/search-dark.png) no-repeat 10px 6px #fff;
border-width: 1px;
border-style: solid;
border-color: #fff;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #bebebe;
width: 55%;
padding: 8px 15px 8px 30px;
}
#button-submit {
background: #6A6F75;
border-width: 0px;
padding: 9px 0px;
width: 23%;
cursor: pointer;
font: bold 12px Arial, Helvetica;
color: #fff;
text-shadow: 0 1px 0 #555;
}
#button-submit:hover {
background: #4f5356;
}
#button-submit:active {
background: #5b5d60;
outline: none;
}
#button-submit::-moz-focus-inner {
border: 0;
}
</style>

<form id="searchbox" method="get" action="/search">
<input name="q" type="text" size="15" placeholder="Clique aqui..." />
<input id="button-submit" type="submit" value="Buscar" />
</form>


Então é isso gente, espero que tenham gostado! Caso eu não tenha colocado algum tutorial aqui, me avisem nos comentários que eu atualizarei o post.
Quanto mais vocês comentarem mais templates gratuitos eu farei, então comentem bastante 😊

4 comentários:

  1. Oi! Eu simplesmente adorei esse template!
    Sou meio que nova na blosgosfera e tive dificuldade com essa última parte(personalizando sobre mim).
    Tem algum tutorial extra?
    Obrigada.

    ResponderExcluir
    Respostas
    1. 1º- Para fazer esta parte você primeiramente precisará do código que coloquei neste tutorial, na parte do "personalizando o sobre mim" e irá colocar em um gadgat de HTML no seu blog
      2º- Você precisa de uma foto sua hospedada em algum site, recomendo o http://imgur.com/ quando você hospedar, clique com o botão direito do mouse em cima da foto e clique em "copiar endereço da imagem" e você irá substituir o "Sua foto aqui" pelo link que você acabou de copiar
      3º- Em "escreva sua descrição aqui" você vai colocar um pequeno resumo sobre você, seu nome, sua idade, o que você gosta de fazer, essas coisas assim.
      4º- No "COLOQUE O LINK DO SOBRE MIM" você precisa de uma página estática do sobre e você substituirá o o "COLOQUE O LINK DO SOBRE MIM" pelo link da sua página ( Não sabe como criar uma página estática? Leia este tutorial: http://pronto-postei.blogspot.com.br/2016/08/como-criar-paginas-estaticas-no-blogger.html )
      5º- Onde está "SEU FACEBOOK" "SEU INSTAGRAM" e outras redes sociais, você irá substituir cada parte pelo link do seu perfil, de acordo com o que se pede, entede?
      EXEMPLO: SEU FACEBOOK = https://www.facebook.com/SEU-PERFIL-AQUI

      Qualquer dúvida mande um e-mail para alexiaevellyn@hotmail.com
      Espero ter te ajudado, beijos

      Excluir
  2. Oi!! No meu blog não tem a barra na parte de editar o html para pesquisar o menu. O que eu faço?

    ResponderExcluir
    Respostas
    1. Clique em um espaço em branco dentro do código e pressione "Ctrl + F" ao mesmo tempo no teclado, só isso, ai a barrinha aparece. Espero ter ajudado :)

      Excluir

author
Alexia Evellyn
Olá, seja bem vindo(a) ao meu portfólio, criei ele para divulgar o meu trabalho e espero que agrade você! Siga-nos nas redes sociais.