Serviços Oferecidos

Layouts para Blogger

Layouts do jeito que você imaginar

Veja aqui

Designs a pronta entrega

Layouts lindos com preços super em conta

Veja aqui

Layouts Gratuitos

Disponibilizamos layouts gratuitos

Veja aqui

Layouts por permuta

Divulgue-nos e receba um layout em troca!

Veja aqui

Quer saber mais?

Aqui temos mais do que você pode imaginar!

Veja aqui
Portfólio
Senta e lê
imagem-gabriela-portfolio
youtube-1
Layout exclusivo para o blog Senta e lê. Desenvolvido para Blogger.

ano: 2016


Amalie Vintage
imagem-gabriela-portfolio
youtube-1
Criei este layout utilizando como base o template feito por BEAUTY TEMPLATES. Para Quis algo mais delicado e clean, com cores neutras mas ainda sim coloridas.

ano: 2016



TUTORIAIS

Como colocar mais páginas no menu?


Para colocar mais páginas no menu é necessário você criar as páginas estáticas com as informações e o nome que desejar e clicar em "Publicar"
Logo em seguida vá em "Layout" e clique em "Pages" organize do jeito que desejar.





Como adicionar o "Post recente"? 
  Para adicionar o post recente você terá que adicionar um "HTML/JavaScript" abaixo do cabeçalho do blog, como mostra a imagem:


Agora copie o código abaixo e cole dentro do "HTML/JavaScript"
<center>
<style type="text/css">


/* CSS - Destaque de posts */

.bsrp-gallery {
    clear: both;
    margin-top: 30px;
    margin-left: -8px;
    width: 78%;
}

.bsrp-gallery:after {

display: table;

clear: both;

}

.bsrp-gallery .bs-item a {
    position: relative;
    float: left;
    text-decoration: none;
}

.bsrp-gallery .bs-item .ptitle {
    background: transparent none repeat scroll 0% 0%;
    display: block;
    clear: left;
    font-size: 18px;
    font-family: "Arial",sans-serif;
    text-transform: uppercase;
    line-height: 1.3em;
    font-weight: 300;
    height: 48%;
    width: 85%;
    position: absolute;
    bottom: 0%;
    text-align: center;
    margin: 0px 0px 9px 20px;
    padding: 67px 10px 20px;
    color: #FFF;
    word-wrap: break-word;
    overflow: hidden;
    opacity: 0;
    border: 2px solid #FFF;
}
.bsrp-gallery .bs-item .ptitle:hover {
    opacity: 0.9;
    transition: all 0.6s ease-in 0s;
}

.bsrp-gallery a img {
    background: #FFF none repeat scroll 0% 0%;
    float: left;
    width: 334px;
    height: 210px;
    margin-left: 14px;
}

.bsrp-gallery a:hover img {
    filter: grayscale(74%);
}

/* CSS FIM */


</style>
<script>
//byjana
function bsrpGallery(root) {
var entries = root.feed.entry || [];
var html = ['<div class="bsrp-gallery nopin" title="Get this from poderondesign">'];
for (var i = 0; i < entries.length; ++i) {
var post = entries[i];
var postTitle = post.title.$t;
var orgImgUrl = post.media$thumbnail ? post.media$thumbnail.url : 'http://3.bp.blogspot.com/-sWtp_qRPNT8/UZYmQq5sAdI/AAAAAAAAEec/7YDbpK4Q6g8/s72-c/default+image.png';
var newImgUrl = orgImgUrl.replace('s72-c', 's' + bsrpg_thumbSize + '-c');
var links = post.link || [];
for (var j = 0; j < links.length; ++j) {
if (links[j].rel == 'alternate') break;
}
var postUrl = links[j].href;
var imgTag = '<img src="' + newImgUrl + '" width="' + bsrpg_thumbSize + '" height="' + bsrpg_thumbSize + '"/>';
var pTitle = bsrpg_showTitle ? '<span class="ptitle">' + postTitle + '</span>' : '';
var item = '<a href="' + postUrl + '" title="' + '">' + imgTag + pTitle + '</a>';
html.push('<div class="bs-item">', item, '</div>');
}
html.push('</div>');
document.write(html.join(""));
}
hoje = new Date()
numposts = 1
var bsrpg_thumbSize = 280;

var bsrpg_showTitle = true;


document.write("<script src=\"/feeds/posts/default?start-index="+numposts+"&max-results=3&orderby=published&alt=json-in-script&callback=bsrpGallery\"><\/script>");</script></center>



Como adicionar o perfil?
Adicione o código a seguir no "HTML/JavaScript" na sidebar.

<img src="ADICIONE O LINK DA SUA FOTO" style="margin: -20px 2px 0px;" />

<div class="textoperfil"> ESCREVA UM RESUMO SOBRE VOCÊ </div>



<div class="social">
<a href=" ADICIONE O LINK DO INSTAGRAM " class="fa fa-instagram" target="_blank"></a>

<a href="ADICIONE O LINK DO PINTEREST" class="fa fa-pinterest" target="_blank"></a>

<a href="ADICIONE O LINK DO TUMBLR" class="fa fa-tumblr" target="_blank"></a>

<a href="ADICIONE O LINK DO TWITTER" class="fa fa-twitter" target="_blank"></a>

<a href="mailto:ESCREVA SEU E-MAIL AQUI" class="fa fa-envelope-o" target="_blank"></a>
 </div>

<style type='text/css'>

/*social*/
.social {
    display: table;
    width: 396px;
    margin: -4px 0px -38px 41px;
}
.social a {
    text-align: center;
    background: rgb(189, 203, 213) none repeat scroll 0% 0%;
    color: #FFF;
    float: left;
    transition: all 0.5s ease 0s;
    text-decoration: none;
    padding: 0px;
    font-size: 14px;
    line-height: 24px;
    display: inline-block;
    width: 13.8%;
    margin: 0px 42px 29px -40px;
    border: 1px solid rgb(189, 203, 213);
}
.social a:hover {
    background: transparent none repeat scroll 0% 0%;
    color: rgb(228, 145, 138);
    border: 1px solid rgb(228, 145, 138);
}
.leia {text-align: center; color: #5e5e5c; margin: 25px 0; font-family: 'Montserrat'; text-transform: uppercase;font-size: 14px;}
.leia a {display: inline-block; margin-right: 4px; color: #5e5e5c; font-family: 'Montserrat';}
.leia a:hover {text-decoration:none; color: #f8c6b5;}
.leia a:after {content: url('http://i.imgur.com/X4omyN3.png'); display: inline-block; margin-left: 12px;}
.leia a:last-child {margin: 0;}
.leia a:last-child:after, .widget .leia-mais br {display: none;}

.textoperfil {
    font-size: 11px;
    color: #5E5E5C;
    font-family: verdana;
    text-align: justify;
    margin: 4px 0px 21px;
}
</style>

Gostaram deste template free? Se estiver usando, deixe o link do seu blog aqui nos comentários que eu vou amar ver 😄
Não esqueça de deixar sua opinião sobre o template free e dar sugestões para os próximos!

Minimal Base
imagem-gabriela-portfolio
youtube-1
Disponibilizo este layout base para vocês soltarem a imaginação e personalizá-lo como preferir.

ano: 2016


Flower is the new black
imagem-gabriela-portfolio
youtube-1
Criei este layout free com bastante detalhes para você. Espero que tenha gostado!

ano: 2016


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:



Crie paginas estaticas com o que você deseja colocar no seu menu.
CLIQUE AQUI PARA VER O TUTORIAL DE COMO COLOCAR PÁGINAS ESTÁTICAS NO BLOG


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

2º - Clique dentro do código e procure na barra por:   <ul class='dropdown'>



Agora substitua todas as hashtags '#' pelo link da sua página estática que você criou.
 OBS:Não retire os apóstrofos, que são essas vírgulas  '   que tem antes e depois da hashtag
Personalizando o perfil: Vá em Layout > adicione um gadgat na sidebar-right-1 > Selecione HTML/JavaScript e coloque o seguinte código:

<img src="LINK DA SUA FOTO DE PERFIL" style="width:242px; heigh:auto;margin: 84px 0px 0px;" /><div style="text-align: justify;"> ESCREVA UM RESUMO SOBRE VOCÊ AQUI<div></div></div> 


- Onde está marcado, adicione o que se pede.

Como colocar as miniaturas de postagens recentes: 

Primeiramente vá em "Layout" depois clique em "Adicionar um gadgat" na parte do Crosscol.

Logo em seguida copie e cole o seguinte código:

<div class='clear'></div>
 <span class='widget-item-control'>
<span class='item-control blog-admin'>
</span> </span> <div class='clear'></div>
<div class='widget HTML' data-version='1' id='HTML5'>
<div class='widget-content'>
<figure> <img alt="nerd girl" src=" LINK DA MINIATURA DE IMAGEM " /> <figcaption> <h3> NOME DA CATEGORIA DA MINIATURA</h3> <p>TITULO DO POST </p> <p><a href="LINK DO POST AQUI">Leia o post</a></p> </figcaption> </figure>

</div></div>
A parte escrita de vermelho você vai repetir no máximo quatro vezes, que é a quantidade de minuaturas presente neste layout. Já a parte grifada de azul você vai substituir de acordo com o que se pede.

Como colocar "Faça sua busca":

Crie um gadget de "HTML" e cole o seguinte código: 
 
<div class='pesquisar'> <div class='widget HTML' id='HTML1'> <div class='widget-content'> <div class="custom-search-form3"> <form action="/search" method="get"> <input name="q" size="26" type="text" value="Faça sua busca" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" class="custom-search-box3" /></form> </div> </div> </div></div> <style type='text/css'> /* Pesquisa ----------------------------------------------- */ .pesquisar{     width: 252px;     margin: 0 0 0 30px; } .custom-search-form3 { width:100% } .custom-search-box3 { background: #292929; border: 1px solid #292929; margin: 0; color: #f1f1f1; font-weight: bold; font-size: 12px; font-family: raleway,sans-serif; text-transform: uppercase; text-align: center; width: 100%; padding: 21px 17px 21px 16px; margin: -36px 59px -1px -29px; } </style>


Espero que tenham gostado! Se baixou o layout, comente 😉 Comentem o que acharam do layout, quanto mais engajamento tiver, mais layouts eu farei 💓
Pronto, Postei!
imagem-gabriela-portfolio
youtube-1
Layout responsivo exclusivo para o blog Pronto, Postei! Desenvolvido para a plataforma Blogger.

ano: 2016


Pronto, Postei!
imagem-gabriela-portfolio
youtube-1
Layout exclusivo feito para o blog Pronto, Postei!.

ano: 2016


Radioactive Galaxy
imagem-gabriela-portfolio
youtube-1
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!

ano: 2016


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

template free

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://lh3.googleusercontent.com/-tnGzRShvGaI/VmhCFNXX-7I/AAAAAAAAAsA/wdWnbywiJ10/s53-Ic42/BLOGGER.png'/></a>

Ou seja, no meu caso ficaria:

<a href='http://b3nice.blogspot.com.br/search/label/blogger'><img src='https://lh3.googleusercontent.com/-tnGzRShvGaI/VmhCFNXX-7I/AAAAAAAAAsA/wdWnbywiJ10/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://lh3.googleusercontent.com/-OeHTaLpihZo/Vn7JXgyCxaI/AAAAAAAAA5A/uQfMd0FmRXA/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(http://2.bp.blogspot.com/-xpzxYc77ack/VDpdOE5tzMI/AAAAAAAAAeQ/TyXhIfEIUy4/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 nao 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 😊
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.