Layout profissional free

Meniinas hoje venho perplexa com o talento e generosidade de Fernanda Oliveira e vi o post no blog da Nanda Oliver de Salto alto e batom. Ela colocou o layout lindo demais e o melhor que é gratuito, nunca vi algo tão profissional de graça... Então, não resisti e vim mostrar á vocês.

Layout Free – Hope for the flowers

07.03.2015

Após vários pedidos de layout free, estou disponibilizando para vocês um layout super fofo para blogger (em breve para wordpress) chamado Hope For The Flowers.

O nome do layout é o nome de uma música muito linda do cantor Jason Mraz.
Esse é o primeiro de muitos freebies que vou disponibilizar aqui no blog. Espero que gostem e façam bom uso.
A documentação de instalação do layout você encontra na página de visualização.

Caso queira um layout personalizado e exclusivo, esse é meu portfolio.

Beijocas.

@vizualizar       @baixar

LAYOUT FREE (INSTALAÇÃO)

06

MAR

2015

Inserindo o Menu no topo

No gadget ao lado do favicon, com nome "HTML/JavaScript" clique em EDITAR e cole o código abaixo:

<div id="menufixo">
<div id="menufixo_int">
<li><a href="ENDEREÇO DO LINK/">Home</a></li>
<li><a href="ENDEREÇO DO LINK/">Menu1</a></li>
<li><a href="ENDEREÇO DO LINK/">Menu2</a></li>
<li><a href="ENDEREÇO DO LINK/">Menu3</a></li>
<li><a href="ENDEREÇO DO LINK/">Menu4</a></li>
</div>
</div>

Altere o texto ENDEREÇO DO LINK pelos links do seu blog e Home, Menu1 pelo nome do link.


Alterando o formato da data

Vá em configurações -> idioma e formatação e escolha o formato de data "06 março 2015".


Alterando foto da assinatura

Vá em Modelo -> Editar HTML -> Ctrl+F e pesquise por "avatar.png". Você verá o seguinte código:

<span class="author">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil8zQwwEMVjC3kFIuycYD7m4s0rvrWZN6oSUJ18H9l8qpI0ohHbrYd-FiajguOjNxoxsdDOZAJXsqX5u4gaQ-cUZX1yPPTdVYzlrwx_WQVi_9-5k0qnnDEhqnI1U1-x4wKE2S87tqyhAct/s1600/avatar.png" />
</span>

Altere o endereço da imagem pelo endereço da sua foto.


Inserir perfil

Para inserir o perfil clique no gadget perfil do lado esquerdo e insira o segunte código:

<div align="center">
<img align="center" alt="MinhaFoto" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4k5PQTZLSia1SzIruy-brgNt1rT7Sz563Ek0XJ3Z_yh5nZ9cd6T5iaRt7_yXMNoyfL7p4YQZ-KgJ8K1pmhV8TI5JHFC0H3ZoeqII5WXJFMQ7uM0J4bCJFstf0IXojXoBM1DMu8JINx1oz/s1600/perfil.png" /></div> <div style="align: center; background-color: white; font-family: Muli; padding: 10px 10px; text-align: justify;">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."</div>

Altere o link da imagem e o texto.


Redes Sociais

Insira no gadget o seguinte código e coloque o link de suas redes sociais.

<center>
<a class="external" href="ENDEREÇO DO LINK/ " target="_blank" title="Facebook"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3oWU5dYVi2VFL4aWP7zLF4fCNtvvYq5q1nSNHxTukxqKp70m09xPFgYvqQ2T-6W30PZ5fUQoJF9csHDOGNNCZ1hVxM_gl-rlzJ9d8wMTFwkrMm2kkPc0g6Bjkej2S51VbEiHJbv2-rVUn/s1600/facebook.png" /></a>

<a class="external" href="ENDEREÇO DO LINK/" target="_blank" title="Twitter"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCssQ8QyOYULNi3RVCHRWHIJZUtPoBe6VzVGGnANQZs95f_x2mNWHbtsutvVOy7YAmuJSN6FRKZG8ifrzVP9lggLfVEKWqcc3m1yIvukkwLUEhQIrvYJccyFibo8hGyAyoz0SP1RMdCsbq/s1600/TWITTER.png" /></a>

<a class="external" href="ENDEREÇO DO LINK/" target="_blank" title="You Tube"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB2NIE7sfq5CpSaZGxhBIGG1-bwe3bsuiYamWv6hDYSuimkaFoe4LTj2Pn-RiE0XpUZTGaAG2RLDDNw9jUrIYpXdR5lPpaAorLijQ6Cuha22oEPNkx4s64xOcB42VJVm8EkwIG53iHTNri/s1600/youtube.png" /></a>

<a class="external" href="ENDEREÇO DO LINK/" target="_blank" title="Instagram"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXFY-p2RpK0Qe6iKEWKBhZJeUjx5pC5a3Ii49rOBDzfGugtsMnObzrOEsncpwU9hPENiIDuxkihSMuTWwteXvpOME5D06T0Yn5XwicmuZm8nUoXfPo7Buryp3NRcPWwvR5edQ9dWlylk2M/s1600/INSTAGRAM.png" /></a>
</center>

Arquivo do blog

Clique em EDITAR e escolha a opção de MENU SUSPENSO.


Adicionar posts em destaque

O gadget de "Posts em destaque" não deve ser modificado para que funcione perfeitamente. Clique em EDITAR no gadget HTML/JavaScript acima do gadget de "Postagens no blog" e adicione o código:

<center>
<style type="text/css">
.bsrp-gallery {
margin-top:70px;
width:1000px;
float:center;
clear:both;
}

.bsrp-gallery:after {
display: table;
clear: both;
}

.bsrp-gallery .bs-item a {
position: relative;
float:left;
margin: 0 10px 15px 0;
text-decoration: none;
}

.bsrp-gallery .bs-item .ptitle {
background-color: #C0E4D0;
display: block;
transition: ease .7s;
clear: left;
font: 20px 'Muli';
height: 25%;
width:91%;
position: absolute;
bottom:0%;
text-align: center;
padding:80px 10px 80px 10px;
color:#fff;
word-wrap: break-word;
overflow:hidden;
text-transform: uppercase;
padding-top: 85px;
filter:alpha(opacity=0);
-moz-opacity:0;
-khtml-opacity:0;
opacity:0;
}

.bsrp-gallery .bs-item .ptitle:hover {
filter:alpha(opacity=90);
-moz-opacity:0.9;
-khtml-opacity:0.9;
transition: ease .7s;
opacity:0.9;
}

.bsrp-gallery a img {
background: #fff;
float: left;
}

.bsrp-gallery a:hover img {
}
</style>

<script>
function bsrpGallery(root) {
var entries = root.feed.entry || [];
var html = ['<div class="bsrp-gallery nopin" title="Fernanda Oliveira Design">
'];
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/AVvXsEjfuuuFNaaBdyTM1iWHu9hh5FFRZlmaNQKNuw7Qcn_5fS5ZFdYMP4HAJN9ky_gT0bqK_tEKfzjSGPWsyMLETZp7X8hrCnSL7wSuwAUoTL1UVR2ppHsd5QvhNMpOMJq5r4Pk_Y2OqpnXhMfk/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="' + postTitle + '">' + 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 = 220;

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>

Para colocar um cabeçalho com o nome do seu blog, disponibilizei o arquivo topo.png onde você pode escrever o nome e inserir no seu layout.

Após editar o cabeçalho com o nome do blog, vá em Modelo -> Editar HTML -> Ctrl+F e pesquise por "topo.png".

Você verá o seguinte código:

#talatopo {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVh3aKOQazaSN1VY6OtP2skaXu5w_7KjVtHFdnPFWJLykGyjAb71difiMOEmIm0cUPpRr6M306KofuK4GOZT-Svh0vsbOwbXbAlli-gqxWo8DfzfqGUEi46hx112YeRt_CeyarTrjfPWFR/s1600/topo.png") repeat-x scroll center 0 transparent; width: 100%;}

Substitua o endereço em negrito, pelo endereço da imagem de topo.

É isso meninas, espero que gostem do layout e qualquer dúvida deixem uma mensagem.

Beijocas!

Para fazer download do tema, clique aqui.