quinta-feira, 2 de junho de 2016

Leia a postagem abaixo para saber como instalar o layout [ATUALIZADO]


POR FAVOR, ME AVISEM SE O LAYOUT NÃO ESTIVER FUNCIONANDO, PORQUE PARA MIM ELE FUNCIONA, MAS TEM BLOGS QUE ESTÁ DANDO ERRO, OK? OBRIGADA
Estou disponibilizando mais um layout free para vocês! Tive muitos retornos positivos nos layouts anteriores e muitos elogios. Gostaria de agradecer quem gostou e quem os estão usando.

Esse é igual ao anterior, pana meninos e meninas usarem, haha! <3

Gente, eu faço os layouts com todo o carinho para vocês, mas eu peço que não retirem os créditos. É muito importante para mim, ok? Vocês podem alterar o que quiserem, mas mantenho o crédito de base, tudo bem?

Outra coisa importante: Muitas vezes eu não tenho tempo de responder todos os e-mails que vocês me mandam com dúvidas sobre o layout, então por favor, tenham paciência. E, eu NÃO vou ensinar a colocar nenhum código adicional no blog. Eu só posso dar ajuda com o itens que aparecem nesta demonstração e com a personalização dos mesmos, ok?

Por favor, quando forem colocar os códigos no blog, coloquem na sequência abaixo, pois desta forma impede que ocorram erros de layout.

O LAYOUT CONTEM:
- Cabeçalho ( imagem: 600 x 166 ) você pode utilizar a imagem que quiser;
- Banners de postagens recentes;
- Área de categorias na sidebar;
- Fontes personalizadas ( Roboto  e Roboto Condensed);
- Caixa de Pesquisa personalizada;
- Área de perfil na sidebar ( utilize uma imagem com largura superior à 240px );
- Área de comentários personalizada;
- Blockquote personalizado;
- Menu superior customizável.

PARA ALTERAR A IMAGEM DO CABEÇALHO:
- Crie uma imagem com dimensões 600 x 166 (para não ficar distorcido), porém você pode usar o tamanho que você quiser e depois alterar as dimensões no código.
- Vá no item Layout do seu blog
- Clique em editar no cabeçalho
- Insira uma imagem e selecione a opção "Em vez do título e descrição"
- Clique em Salvar
Muitas pessoas vieram me perguntar como deixar a imagem do cabeçalho do tamanho que elas querem, é só fazer o seguinte:
Vá no HTML do modelo, aperte ctrl+F no teclado e pesquise por #Header1_headerimgVai ver um código assim:
#Header1_headerimg {
width: 600px;
height: 166px;
margin: 15px auto;
}
Mude o width e o height pelo tamanho da sua imagem.

• PARA INSERIR POSTAGENS RECENTES ABAIXO DO CABEÇALHO
- Vá no item Layout do Blogger
- Clique no link adicionar Widget no Crosscrol-overflow
- Selecione HTML/Javascript
- Cole o seguinte código no conteúdo:
<center><style type="text/css">
/*INICIO CSS FOTOS*/
.bsrp-gallery {
margin: 0 0 50px -140px !important;
margin-left: -140px;
width:1100px; ==LARGURA DO SLIDE==
float:center; ==POSIÇÃO DO SLIDE==
clear:both;
}
.bsrp-gallery:after {
display: table;
clear: both;
}
.bsrp-gallery .bs-item a {
position: relative;
float:left;
margin: 0 75px;
text-decoration:none;
width: 120px;
}
.bsrp-gallery .bs-item .ptitle {
background:#333; /*--cor de fundo das miniaturas ao passar o mouse --*/
display: block;
clear: left;
font-size: 14x;
font-family: arial;
text-transform: uppercase; /*--coloca o texto em capslock, apague se desejar --*/
line-height:1.3em;
height:280px;
height: 52%; /*--define a altura da legenda --*/
width: 250px; /*--define a largura da legenda --*/
position: absolute;
bottom:0%;
text-align: center;
margin:0 0 0px 0px;
padding: 119px 0px 0px 0px;
color:#fff; /*== COR DA FONTE DO TEXTO==*/
-moz-opacity:0;
-khtml-opacity:0;
opacity:0;
font-weight: 700;
border-radius: 50%;
-webkit-transition:All 0.7s ease-in-out; -moz-transition:All 0.7s ease-in-out; -o-transition:All 0.7s ease-in-out;
}
.bsrp-gallery .bs-item .ptitle:hover {
-webkit-transition:All 0.7s ease-in-out; -moz-transition:All 0.7s ease-in-out; -o-transition:All 0.7s ease-in-out;
filter:alpha(opacity=90);
-moz-opacity:0.9;
-khtml-opacity:0.9;
opacity:0.7;
border-radius: 50%;
}
.bsrp-gallery a img {
background: #fff;
float: left;
border-radius: 50%;
}
.bsrp-gallery a:hover img {
}
/*FIM CSS FOTOS*/
</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/AVvXsEiTQCYkoGL1sUsDj5PlBumN6uHvJEp_iaQZm5CGCL90VKCHB_TkXkwGrcXrYHTAAhyphenhyphenL6ir12X_4iVUl-ji4jVCCmcRFZWa8zfBBwP3TushF8Dk_q0gSiS8anqkAQd2CTPZnZTxOxtOTJVhR/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 = 250;
var bsrpg_showTitle = true;
document.write("<script src=\"/feeds/posts/default?start-index="+numposts+"&max-results=4&orderby=published&alt=json-in-script&callback=bsrpGallery\"><\/script>");</script></center>

• PARA DEIXAR A IMAGEM DO TAMANHO DA ÁREA DE POSTAGEM:
-Você só precisa inserir uma imagem que tenha mais de 725px de largura.

PARA ALTERAR A BARRA DE MENU:
- Vá no item Modelo do seu layout
- Não esqueça de fazer o backup do layout antes de fazer qualquer alteração
- Clique em Ctrl+f e procure por <div id='navbar'>
- Você vai encontrar o seguinte código:
<div id='navbar'>
    <ul>
        <li><a href='#'>Home</a></li>
        <li><a href='#'>Sobre o blog</a></li>
       <li><a href='#'>Categorias</a></li>
       <li><a href='#'>Blogroll</a></li>
        <li><a href='#'>Contato</a></li>
    </ul>
</div>
- Substitua o # do href pelo link da sua página que você quer inserir e mude o nome para o que você desejar
- Clique em Salvar modelo

PARA INSERIR CAIXA DE PESQUISA:
- Vá no item Layout do seu blog
- Clique no link Adicionar um Gadget na sidebar
- Selecione HTML / Javascript
- No campo conteúdo cole o seguinte código:
<form action="/search" class="search" method="get">
    <input class="searchbar" id="s" name="q" type="text" value="Digite o que você procura" onfocus="if (this.value == 'Digite o que você procura') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Digite o que você procura';}" />
</form>
- Clique em Salvar

PARA INSERIR CAIXA DE PERFIL NA SIDEBAR:
- Vá no item Layout do seu blog
- Clique em Adicionar um Gadget na sidebar
- Selecione HTML / Javascript
- No campo conteúdo cole o seguinte código:
<div class="bloco-sobre">
   <img src="http://s2.favim.com/orig/140729/bears-boy-cool-couple-Favim.com-1954001.jpg" alt="layout free - Amanda Salinas" />
      <p>At cake marshmallow ice cream fruitcake pie bear claw sugar plum croissant lollipop. At cake marshmallow ice cream fruitcake pie bear claw sugar plum croissant lollipop</p>
</div>
- Troque o código http://s2.favim.com/orig/140729/bears-boy-cool-couple-Favim.com-1954001.jpg pelo da imagem que você deseja usar ( para isso você precisa hospedar a imagem primeiro. Eu recomendo o tinypic.com )
- A imagem deve ter pelo menos 240px de largura
- Digite o texto que quiser entre <p></p>
- Clique em Salvar

PARA INSERIR CAIXA DE CATEGORIAS NA SIDEBAR:
- Vá no item Layout do seu blog
- Clique em Adicionar um Gadget na sidebar
- Selecione HTML / Javascript
- Se desejar, insira um título
- No campo conteúdo cole o seguinte código:
<div class="categoria">
<ul>
<li><a href="#">Categorias</a></li>
<li><a href="#">Músicas</a></li>
<li><a href="#">Decoração</a></li>
<li><a href="#">Blogueiras</a></li>
<li><a href="#">Fashion</a></li>
<li><a href="#">Maquiagem</a></li>
<li><a href="#">Cultura</a></li>
<li><a href="#">Livros</a></li>
</ul>
</div>
- Insira o link da categoria (link da tag) no lugar de # em href
- Substitua o nome do link (Categorias, Músicas, Decoração, ...) pelo que você desejar
- Clique em Salvar

PARA INSERIR ARQUIVO NA SIDEBAR:
- Vá no item Layout do seu blog
- Clique em Adicionar um Gadget na sidebar
- Selecione Arquivo do blog
- Escolha um título
- Em Estilo selecione Menu suspenso
- Mude mais o que desejar
- Clique em Salvar

CLIQUE AQUI PARA FAZER DOWNLOAD DO ARQUIVO
(use o bloco de notas para abrir)

Bom, é isso. Se tiverem alguma dúvida mande um e-mail para bloguntilwedie@gmail.com

Muito Obrigada ♥

16 comentários

  1. Este comentário foi removido pelo autor.

    ResponderExcluir
  2. pra mim o layout não esta funcionando </3

    ResponderExcluir
  3. Pra mim os posts recentes não estão funcionando :( por favor, me ajuda!

    ResponderExcluir
  4. FUNCIONOU!!! Era só porque o blog tava como privado. hihi. Obrigada mesmo assim <3

    ResponderExcluir
  5. ok, agora a sidebar fica embaixo da área de postagens! nada que eu faça faz ela ir pro lugar certo (o lado) :((((((((((((

    ResponderExcluir
  6. MUITO OBRIGADO!

    ESTOU USANDO: www.isaaczedecc.blogspot.com

    ResponderExcluir
  7. Nossa, tentei muito usar esse lay mas não funcionou.
    A sidebar foi parar no rodapé. :/

    ResponderExcluir
  8. O layout é lindo mas, não funciona, a sidebar fica no rodapé, já teintei resolver mas parece que nada resulta :(

    ResponderExcluir
  9. Este comentário foi removido pelo autor.

    ResponderExcluir
  10. Minhas novas postagens fazem com que o sidebar vá para o rodapé o que faço?

    ResponderExcluir
  11. Amei o layout, vou usar com certeza [https://blog17things.blogspot.com.br]

    ResponderExcluir
  12. Amei o layout, é simples, é clean, é tudo que eu queria! Já estou usando, obrigada! Beijinhos.

    http://blogcadadetalhe.blogspot.com.br/

    ResponderExcluir
  13. No meu blog os Gadgets do layout ão aparecem.

    ResponderExcluir

Copyright © 2015 | Design e Código: Sanyt Design | Tema: Viagem - Blogger | Uso pessoal • voltar ao topo