Configurando os Gadgets + Download do Layout

Olá , 

Aqui você encontra instruções para download e instalação dos gadgets , segue a lista:




*Download do Layout:

Par baixar basta clicar na imagem a seguir :

*Instalando posts recentes - para ter os posts recentes como no modelo , basta adicionar o gadget html/java script  e colar o código abaixo, confira o exemplo:





<div class='widget-content'>

<style type="text/css">

/* CSS - Destaque de posts */

.bsrp-gallery {

width:100%;

clear:both;

margin-left:-75px; /*--define o posicionamento à esquerda, altere se precisar--*/

padding-left:100px;

}

.bsrp-gallery:after {

display: table;

clear: both;

}

.bsrp-gallery .bs-item a {

position: relative;

float:left;

margin: 0 0 0 15px;

text-decoration:none;

border-radius:100px; /*--define o grau de arredondamento da imagem, --*/

-moz-border-radius:100px; /*--define o grau de arredondamento da imagem, --*/

-webkit-border-radius:100px; /*--define o grau de arredondamento da imagem, --*/

}

.bsrp-gallery .bs-item .ptitle {

background: #fac6eb; /*--cor de fundo das miniaturas ao passar o mouse --*/

display: block;

clear: left;

font-size: 13px;

font-family: arial;

text-transform:uppercase; /*--coloca o texto em capslock, apague se desejar --*/

line-height:1.3em;

font-weight:300;

height: 48%; /*--define a altura da legenda --*/

width:79%; /*--define a largura da legenda --*/

position: absolute;

bottom:0%;

text-align: center;

margin:0 0 14px 13px;

padding:45px 10px 10px 5px;

color:#000000; /*--cor da fonte do texto--*/

word-wrap: break-word;

overflow:hidden;

filter:alpha(opacity=0);

-moz-opacity:0;

-khtml-opacity:0;

opacity:0;

border-radius:130px;

-moz-border-radius:130px;

-webkit-border-radius:130px;

}




.bsrp-gallery .bs-item .ptitle:hover {

filter:alpha(opacity=90);

-moz-opacity:0.9;

-khtml-opacity:0.9;

opacity:0.9;

border-radius:130px;

-moz-border-radius:130px;

-webkit-border-radius:130px;

}

.bsrp-gallery a img {

background: #fff;

float: left;

border-radius:130px;

-moz-border-radius:130px;

-webkit-border-radius:130px;

}

.bsrp-gallery a:hover img {

border-radius:130px; /*--define o grau de arredondamento do fundo ao passar o mouse --*/

-moz-border-radius:130px; /*--define o grau de arredondamento do fundo ao passar o mouse --*/

-webkit-border-radius:130px; /*--define o grau de arredondamento do fundo ao passar o mouse --*/

}

/* CSS FIM */

</style>

<script>

function bsrpGallery(root) {

var entries = root.feed.entry || [];

var html = ['<div class="bsrp-gallery nopin" title="by elainegaspareto.com">'];

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 : 'http://2.bp.blogspot.com/-OSlo4lj_H4w/VRMrRXuZWyI/AAAAAAABCNA/RQsmcuaWiEE/s1600/sem.gif';

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 = 3; /*--define em qual post começa a exibição --*/

var bsrpg_thumbSize = 160; /*--define o tamanho das miniaturas --*/

var bsrpg_showTitle = true;

document.write("<script src=\"LINKDOSEUBLOGAQUI/feeds/posts/default?start-index="+numposts+"&max-results=4&orderby=published&alt=json-in-script&callback=bsrpGallery\"><\/script>");</script>

</div>

<div class='clear'></div>


e salvar!

Para ter o perfil igual ao do blog teste basta ir em layout e adicionar um gadget , escolher a opção html / java script e colocar o código abaixo!


<center>
<div class="separator" style="clear: both; text-align: center;">
<a href="ENDEREÇO DE SEU PERFIL" target="_blank"><img border="0" src="https://36.media.tumblr.com/cb3612e473b2eadfe602a3d1ab66419e/tumblr_ndx7ztSv8l1ro5jd6o1_400.jpg" /></a></div>
Seu nome e descrição aqui<br /><br />


<a href="ENDEREÇO DA REDE SOCIAL" target="_blank"><img border="0" src="http://nsae02.casimages.net/img/2015/06/15/150615022548889458.png" style="text-align: center;" /></a>


<a href="ENDEREÇO DA REDE SOCIAL" target="_blank"><img border="0" src="http://nsae02.casimages.net/img/2015/06/15/150615022830752448.png" style="text-align: center;" /></a>


<a href="ENDEREÇO DA REDE SOCIAL" target="_blank"><img border="0" src="http://nsae02.casimages.net/img/2015/06/15/150615023045628807.png" style="text-align: center;" /></a>


<a href="ENDEREÇO DA REDE SOCIAL" target="_blank"><img border="0" src="http://nsae02.casimages.net/img/2015/06/15/150615023046120209.png" style="text-align: center;" /></a>
<br />
<div>
<br /></div>
</center>




Onde tem endereço da rede social você coloca o link da rede! Pronto agora é só salvar.


Agradecimentos : Go Imagine , Enjoy things e Elaine Gaspareto!




Qualquer dúvida chama <3 , e deixem suas opiniões !