Layout free para blogger
Layout para blog desenvolvido por Fernanda Oliveira da Fernanda Oliveira Design e Programação. Aqui você encontra o passo a passo para instalação do tema.O layout tem a licença Creative Commons e não pode ser vendido em hipótese alguma. É permitido alterações, mas deve-se dar os devidos créditos.
Depois de instalar o template em seu blog, deixe o link nos comentários para que eu possa conhecê-lo e ver como ficou. :)
O primeiro passo após o download é extrair os arquivos. Na pasta você vai encontrar um arquivo de texto (que é o XML do template) e um arquivo de imagem que é o cabeçalho do blog.
Entre no seu blog, vá em MODELO -> FAZER BACKUP/RESTAURAR (que fica do lado direito superior). Na janelinha que abre clique em ESCOLHER ARQUIVO. Procure pelo arquivo de texto que você fez download e clique em FAZER UPLOAD.
Agora você poderá seguir os demais passos.
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/AVvXsEjcaGGskyUktlDPhJug9SgUsd-Hevzmg4x59hjbiw7V71dWGbwkpnVK3f54I5B6lefYxrSQoU5zI3bNaTO5EbWmNpWrVncPQQq9j5J93rGVAfhDdkYJfEkSRjxT5_vrLUh3u4X-RAhzUQZw/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/AVvXsEhA0l_shUGCbNdTcTqM2cNhJJI4entMGZImnbCIvcPX1FsPqkEbTPc-kaNxM86wOshxlqBcnaFMuMbFF808WKXkovIaNSQMqzmROuaOcRYFjLcyMQOxed36XZVHFK-S8MVKFFbe1IWRLwqV/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/AVvXsEgQbMh5qHQr4wcsvNGGOCBoEOi-mWV4w9uZRGBnDPAV8FK39SnrsqRIbzca7PTxrwh2_ZZEFxg8RHknU55WAGImGHYeu6f7nf-MM4JdM62QgkWRxm31o547T5rSMWIitZ7-5nieRevBj66e/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/AVvXsEji_5h9PpxbP1Enw0D_8K2Iy31sOODFPY4lXn847GWwhMAjjN8KDyro1aUHQFaSm3skeui0b7sDEobLqIMMgHnsBCFYK89-PweKHR4N-3s8wrVtyio_TyqPNZDkwa-m8YBtGy589mTgOlj7/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/AVvXsEhLObMk2rlXMQtK0YZxMsqcRDJvgA4-8ak2buYoSzHFbiY9YC7RlL2RgVeupKmgGxCfcn5HZbJ1maVEVEZV8R24fJGRlvMUGH9hg38cUjQYFVcTj0tpLWrYsi3Tg34-U6oUq24n3b10tTaJ/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/AVvXsEh6hfdpB2y80WkVyM1GIC4mQtNr7Pw_GS0yk1ueD-orEyrDWK51iCLnslOE246j4s2LF2G3VvtjLF6H9UfOiWUU_oK6NtLrBuPxjH1EbLohSThpAndWg2vEteKdVNyx-GSNjHEAl_F2sEWc/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/AVvXsEiASNWjMFROOKKw8IpRHRMJkojNQPlKEDYjLJ4lbfqasFlZDTVmQvKpkZ52_qQgIIRpnG6LbYAKkEd5xQb5-MXXBUyTWaUPhWHOQQsSS96-oWmx8inLGOlCxF485IJS3TmWPSVlqIvdnkev/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:
Substitua o endereço em negrito, pelo endereço da imagem de topo.#talatopo {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp7E1tFnyT04hKa5Q6KlacyOzPJdohOmlmm62OnQvjS3rQNB9UrEsSD3ty1lgq02cj8Ww2jkHa0gR1CP2Cm2tW7LbAK9RiS_hr31xyd0Vm_fDH2CviLQw_lrX-Yus7GEIA6d2BCin0aEIm/s1600/topo.png") repeat-x scroll center 0 transparent; width: 100%;}
É isso meninas, espero que gostem do layout e qualquer dúvida deixem uma mensagem.
Beijocas!
Para fazer download do tema, clique aqui.
