Template Free Feminino para Blogger Layout

 

Ver Demo | Fazer Download

Esse é o primeiro layout que estamos disponibilizando free aqui no nosso site! Trata-se de um Template Free Feminino para Blogger.
Um tema delicado que pode ser usado tanto para blogs com temas relacionados à moda e à beleza. Ou até mesmo um blog pessoal.

A fonte utilizada no blog foi a Atelas, que você pode baixar aqui.

Itens disponíveis no Template Free:

Slides;
Espaço para Instagram;
Topo customizável e com espaço para publicidade;
Ícones nas laterais das postagens;
Posts Relacionados;
Posts Destaques;
Formulário de Busca personalizado;
Menu Personalizado.

No arquivo com o template free, você irá encontrar:

O arquivo .xml, o qual você deverá fazer upload no seu blog para poder usar;
Um arquivo em PSD (formato Photoshop) Para que você possa modificar sua foto;
Um arquivo com a aba da categoria do post sem nenhum icone para que você possa criar seus próprios icones!

Instruções de Uso:

1) Não remova os créditos !
2) Para fazer upload do modelo, faça o login no blogger, vá em Modelo e clique em Fazer Backup / Restaurar:
tutorial1

E depois, na janela que abrir, clique em fazer Upload e selecione o arquivo XML;

Ao fazer upload do tema, você verá que é necessário ajustar algumas coisas.

3) Mudando o cabeçalho: Você pode colocar apenas o titulo do blog ou até mesmo fazer upload de uma imagem para usar no topo. Fique a vontade para fazer isso indo na Aba Layout do Blogger;

4) A data do blog deve estar configurada de uma maneira específica para que ela apareça. Você deve ir em Configurações > Idiomas e Formatação e deve deixar a data do seu blog configurada como na imagem abaixo:

datas
5) Lá em Modelo você perceberá que existem espaços para colocar o Cabeçalho, para incluir a publicidade, para incluir os gadgets, os destaques e o instagram. Vamos por partes:

mapa de gadgets

Sobre o slide:

o código que deve ser colocado no gadget de HTML/Javascript é o código abaixo:

<div id="slider">
<script style="text/javascript">
 var showpostthumbnails_gal = true;
 var showpostsummary_gal = true;
 var random_posts = false;
 var numchars_gal = 150;
 var numposts_gal = 10;
function showgalleryposts(json) {
 var numPosts = json.feed.openSearch$totalResults.$t;
 var indexPosts = new Array();
 document.write('<ul>');
 for (var i = 0; i < numPosts; ++i) {
 indexPosts[i] = i;
 }
 if (random_posts == true){
 indexPosts.sort(function() {return 0.5 - Math.random()});
 }
 if (numposts_gal > numPosts) {
 numposts_gal = numPosts;
 }
 for (i = 0; i < numposts_gal; ++i) {
 var entry_gal = json.feed.entry[indexPosts[i]];
 var posttitle_gal = entry_gal.title.$t;
 for (var k = 0; k < entry_gal.link.length; k++) {
 if ( entry_gal.link[k].rel == 'alternate') {
 posturl_gal = entry_gal.link[k].href;
 break;
 }
 }
 if ("content" in entry_gal) {
 var postcontent_gal = entry_gal.content.$t
 }
 s = postcontent_gal;
 a = s.indexOf("<img");
 b = s.indexOf("src=\"", a);
 c = s.indexOf("\"", b + 5);
 d = s.substr(b + 5, c - b - 5);
 if ((a != -1) && (b != -1) && (c != -1) && (d != "")) {
 var thumburl_gal = d
 } else var thumburl_gal = 'http://i1133.photobucket.com/albums/m596/abu-farhan/Images_no_image.gif';
 document.write('<li><div id="slide-container"><span class="slide-desc"><h2 style="margin:10px 0px;">');
 document.write(posttitle_gal + '</h2>');
 var re = /<\S[^>]*>/g;
 postcontent_gal = postcontent_gal.replace(re, "");
 if (showpostsummary_gal == true) {
 if (postcontent_gal.length < numchars_gal) {
 document.write(postcontent_gal);
 document.write('</span>')
 } else {
 postcontent_gal = postcontent_gal.substring(0, numchars_gal);
 var quoteEnd_gal = postcontent_gal.lastIndexOf(" ");
 postcontent_gal = postcontent_gal.substring(0, quoteEnd_gal);
 document.write(postcontent_gal + '...');
 document.write('</span>')
 }
 }
 document.write('<a href="' + posturl_gal + '"><img src="' + thumburl_gal + '" width="715px" height="310"/></a></div>');
 document.write('</li>');
 }
 document.write('</ul>');

}
</script>
<script style="text/javascript">
 var numposts_gal = 4;
 var numchars_gal = 150;
 var random_posts = false; // random posts

</script>
<!-- replace with your web address (marked with red color) -->
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script>
</div>

No caso acima, eu optei por colocar o codigo inteiro do slide para evitar a necessidade de hospedagem o javascript do mesmo em outro servidor.
Nos trechos que estão destacados no codigo acima, você consegue modificar a quantidade de slides ( var numposts_gal = 4; ),
a quantidade de caracteres que aparece no resumo (var numchars_gal = 150; )
e consegue definir se quer que apareçam as ultimas postagens ( var random_posts = false; ) ou se prefere que apareçam postagens aleatórias (var random_posts = true; )

Sobre a Paginação:

<center><style type="text/css">
#blog-pager{font-size: 18px;padding:10px 0;clear:both; font-family: lato;}
.showpageArea{font-family:verdana,arial,helvetica;color:#000;font-size:18px; margin:10px; }
.showpageArea a{color:#000; border-radius: 0px; border:0px solid #000; background:#F52596;}
.showpageNum a {
 padding: 3px 7px;
 margin: 0 2px;
 border-radius: 0px;
 text-decoration: none;
 border: 0px solid #000;
 background: #5A5A5A;
 color: white !important;
}
.showpageNum a:hover{border-radius: 0px; border:0px solid #000; background:#F52596; color: black;}
.showpageOf{color: transparent; border-radius: 0px; margin:0 2px 0 0;padding:3px 8px;margin:0 2px;text-decoration:none;border:0px solid #000;}
.showpageOf a{color: #000; border-radius: 0px; margin:0 2px 0 0;padding:3px 8px;margin:0 2px;text-decoration:none;border:0px solid #000;}
.showpagePoint {
 border-radius: 0px;
 color: #000;
 padding: 3px 8px;
 margin: 2px;
 border: 0px solid #000;
 background: #fff;
 text-decoration: none;
}
.showpagePoint a{border-radius: 0px; color:#000; padding:3px 8px;margin:2px;border:0px solid #000; background:#F52596; text-decoration:none;}
</style></center>
<script style='text/javascript'>
var numshowpage=4;
var postperpage =5;
var upPageWord="Anterior";
var downPageWord="Próxima";
var home_page="/";
var urlactivepage=location.href;
</script>
<script style='text/javascript' src='http://static.tumblr.com/uoel5vg/qkmnblwxb/paginacionbloggermtb.js'></script>

Onde está em destaque é a quantidade de posts por página. Então se você tem 10 posts por página, por exemplo, você vai usar:

var postperpage =10;

Sobre os destaques:

Para colocar posts destaques, é necessário que você crie um marcador com o nome Destaque e marque somente os posts que você quiser que apareçam nessa área!
Código para ser colocado nessa área:

<script>
 var bsrpg_thumbSize = 190;
 var bsrpg_showTitle = true;
</script>
<script src="/feeds/posts/summary/-/Destaque?max-results=5&alt=json-in-script&callback=bsrpGallery"></script>

Sobre o Instagram:

Você precisa criar um código para seu instagram usando o site Snapwidget. O seu gadget deve ficar, preferencialmente, com a configuração abaixo:

instagram instruções

 

Sobre as Categorias na lateral do post:

Você vai precisar cadastrar cada imagem e vai precisar linkar essa imagem com o marcador correspondente a ela! Aqui tem um tutorial bem explicadinho sobre como funciona essa parte!

Outras informações:

Os posts relacionados são direcionados pelos marcadores. Se você não usa marcadores, seus posts não vão aparecer!
A foto do autor do post e o nome são automáticos. Então se você tem mais de um autor, não precisa se preocupar pois vai aparecer o nome de cada um deles.

Mais uma vez, eu peço que não tire os créditos do layout! Essa é uma forma de divulgar nosso trabalho e nos incentivar a postar novos materiais 😉

Qualquer Dúvida, pode deixar sua pergunta nos comentários!