Template Free para blogger - Amalie Vintage

 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!