B3nice

DOWNLOAD

Layout exclusivo para o blog Pronto, postei!

ANO:2017

Layout exclusivo para o blog Senta e lê. Desenvolvido para Blogger.

VIZUALIZE O AMALIE VINTAGE | VIZUALIZE O AMALIE ORIGINAL | DOWNLOAD

Criei este layout utilizando como base o template feito por BEAUTY TEMPLATES. Quis algo mais delicado e clean, com cores neutras mas ainda sim coloridas.

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 : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo4ZAYjDmyl4RnIAA6-u7OwCez4H_GKukiz0kqG2fvd2fKBXzE3_HWKcbzghZrkIyFCr4UzDzaC8PLTJ5xVmirrDqwLP_jB80hQKlcgrL2vQl7g075kMvKiJ-QdATkIeMXuWMMKHF3Fa5W/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!

Pronto, Postei!

Blogger • identidade visual

Disponibilizo este layout base para vocês soltarem a imaginação e personalizá-lo como preferir.

Download

ano: 2016

Flower is the new black

ano: 2016

VIZUALIZAR | DOWNLOAD

Criei este layout free com bastante detalhes para você. Espero que tenha gostado!

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>

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 desse layout free, quanto mais engajamento tiver, mais layouts eu farei 💓

Layout responsivo exclusivo para o blog Pronto, Postei! Desenvolvido para a plataforma Blogger.
ano: 2016

Layout exclusivo feito para o blog Pronto, Postei!.

ano: 2016

Ano: 2016

Vizualizar | Download

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:

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: