[TUTORIAIS] Miniatura das postagens recentes com efeito fade

Olá queridos(as)! Tudo bem?

Viram essa lindeza que apareceu aí no topo do blog? Essas miniaturas recentes com efeito fade na imagem toda?

Para quem não sabe, o efeito fade é aquela transparência da foto quando passamos o mouse. Junto com essa transparência vem o nome do post.

Estava vendo muitas blogueiras com esse modelo e estava torcendo para alguém fazer um tutorial com ele õ/ hahah

Aí a Elaine Gaspareto veio e trouxe ele bonitinho assim pra gente. Portanto, o crédito do tuto de hoje vai pra ela! ♥

O efeito que teremos será esse da segunda imagem.

Então, estão a fim de aprender?

Tudo o que você tem que fazer é abrir o seu layout, adicionar um gadget e escolher a opção html / java script. Então você copia o código abaixo:

<center><style type="text/css">
/*INICIO CSS FOTOS*/
.bsrp-gallery {
margin-top:70px;
margin-left: -30px;
width:1120px; ==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 0px 0px 0;
text-decoration:none;
}
.bsrp-gallery .bs-item .ptitle {
background:#fff; /*--cor de fundo das miniaturas ao passar o mouse --*/

display: block;
clear: left;
font-size: 16px;
font-family: arial;
text-transform: uppercase; /*--coloca o texto em capslock, apague se desejar --*/
line-height:1.3em;
height:320px;
height: 57.4%; /*--define a altura da legenda --*/
width:100%; /*--define a largura da legenda --*/
position: absolute;
bottom:0%;
text-align: center;
margin:0 0 0px 0px;
padding: 119px 0px 0px 0px;
color:#666; /*== COR DA FONTE DO TEXTO==*/
-moz-opacity:0;
-khtml-opacity:0;
opacity:0;
}
.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.7;
-khtml-opacity:0.7;
opacity:0.7;
}
.bsrp-gallery a img {
background: #fff;
float: left;
}
.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/AVvXsEh2bpTsGDI7ZCpXsSmjZwbUvBcSN3F-Td7i_iSfxJWSJp_44BNvF2jlgHI1Bqy5bnFQ3nvCYchKzY57KmTBD15GCUNlgh8lSlbF1xJ9BNNzd-QD4GPYX80adXozdCIXT2ayaIDNnchv-Jec/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=4&orderby=published&alt=json-in-script&callback=bsrpGallery\"><\/script>");</script></center>

Os lugares alteráveis já estão escritos no próprio código, e eu consegui alterar tranquilamente.

Das primeiras vezes que tentei usar esse código, por algum motivo não funcionou. Tirei, coloquei, e simplesmente não aparecia nada no blog, como se não tivesse gadget nenhum. 

Pra mim, só funcionou quando eu posicionei o gadget no crosscol-overflow, ao invés do crosscol.

Bem aqui.

Então, se tiverem o mesmo problema, tentem isso que deve dar certo. Comigo deu.

E aí, conseguiram? Gostaram? ♥

Beijocas da Thais

[TUTORIAIS] Personalizando os comentários do blog

Olá queridas, tudo bem?

Entao o tutorial de Hoje é muuuuito necessary in hum blog. Dá um charme Tão grande, e e Tao do facinho de Fazer! Voce Só VAI precisar de Um pouquinho de rsrs Paciência.

Vamos Aprender a personalizar NOSSOS Comentários?

Esse tutorial eu aprendi Lá Na Cherry Bomb, Que É Um Blog Que Eu super-Indico pra quem ESTA Querendo Aprender MAIS SOBRE personalização de layouts - tema Quase Tudo Lá. Dei Uma personalizada Nele, com Duas opções. Um Mais rosa e parecido com o Que Tem Aqui no blog, EO Outro num tom azul Bem fofo. Espero que gostem!

Para adicionar ESSE Comentários de super fofos Ao Seu blog, basta abrir uma área modelo → Editar HTML → de Um CRT + F   → Procuradoria POR]]> </ b: skin>  → cole o código escolhido logotipo Acima do that rápido você encontrou. Fácinho, né? Divirtam-se ♥

Adicionar caixinha do instagram no blog

Hoje, continuando a série de pedidos de tutoriais pelas leitoras, vou ensinar a colocar essa caixinha com fotos do instagram no seu blog.

(Lembrando que para colocar esse gadget, você já precisa ter uma conta no instagram. E se você ainda não tem uma só para seu blog, que tal correr lá e já fazer a sua?! Vale super a pena ♥ - Quando estiver por lá, aproveite e segue a gente aqui :)

Agora vamos colocar a mão na massa. Esse é outro daqueles tutoriais mega fáceis que nem mexem com html.

1º - Acesse o site do SnapWidget.

Vai aparecer essa tela aqui:

Quem entende alguma coisa de inglês não vai ter dificuldade. Para aqueles que (como eu) apanham bastante ainda, vou explicar o necessário:

-Username: nome que você utiliza para logar, no seu instagram.

-Hashtag: deixe em branco.

-Widget Type: selecione grid para que ele apareça uma grade de fotos.

-Thumbnail Size: é o tamanho de cada miniatura. Defina de acordo com seu layout.

-Layout: quantidade de linhas e colunas de fotos.

-Photo Border: responda se você quer bordas ou não nas suas fotos.

Background Color: cor do fundo das fotos. Geralmente fica em branco.

Photo Padding: distância entre as miniaturas.

Hover Effect: efeito hover nas miniaturas de fotos.

Sharing Buttons: define se você quer ou não um botão de compartilhar nas fotos.

Após colocar tudo direitinho, aperte Get widget. Vai aparecer um código, que você irá copiar.

Então, você irá abrir seu painel no blogger, em layout, você adicionará um gadget Html/Java Script , e dentro dele colará este código.

E aí, prontinho! Sua caixinha do instagram lá no seu blog :) Gostaram? Continuem fazendo seus pedidos que continuo postando ♥ 

Vem seguir o blog aqui, vem :)

Beijocas da Thais ;*

Slider automático com posts recentes

O tutorial de hoje é pra ensinar a colocar esse slides automáticos que tenho aqui no blog, com as postagens recentes. Acho que fica lindo e dá um toque bem pessoal e organizado pro seu blog. Vale a pena tentar!

Apesar de mexer com html, é super fácil! Eu nunca tinha mexido com nada disso, e achava que era super dificil, mas hoje consigo me virar bem. Então, vamos fazer? ♥

Os slides vão ficar mais ou menos assim (como no meu blog): 

No painel do Blogger, você abre a aba Modelo e em seguida Editar HTML. Vai aparecer uma aba mais ou menos assim:

Foto de perfil redonda + ícones de redes sociais

Olá meniiinas, tudo bem? Hoje estou começando um quadro novo, de dicas para blogueiras õ/

Como fui muito ajudada por algumas blogueiras que disponibilizaram materiais maravilhosos que me ajudaram muito por aqui, resolvi trazer algumas coisinhas pra vocês também. Quero que vocês comentem o que querem viu?! O que estiverem precisando, comentem que eu trago pra vocês ♥

Hoje vou ensinar vocês a personalizar o perfil de vocês. Era algo que sempre achei liiindo e imaginava que era dificil, mas não tem segredo! É super facinho.

Eu acho que a personalização do perfil da blogueira dá um ar muito mais profissional ao blog. E sou apaixonada pelas fotos de perfil redondas ♡ E o melhor é que você nem precisa mexer com html (pra quem ainda tem horror a essa palavra hahaha).

Antes de começar o tutorial, gostaria de dizer que aprendi esse tuto lá no blog da Renata Massa e o Follow Your Dreams que são umas fofas que vale a pena conferir! Lá tem váarios tutoriais legais, e são realmente blogs de se acompanhar todo dia *-*

Vá em layout e add um gadget na opção html. Depois, cole o código abaixo dentro da caixinha de edição do gadget:

<center>

<img src="URL-DA-SUA-FOTO" style="-moz-border-radius: 1000px; -webkit-border-radius: 1000px; -o-border-radius: 1000px; width:300px; heigh:auto;" />

<br />

Descrição aqui

<br />

<a href="ENDEREÇO-DA-REDE-SOCIAL"><img src="ENDEREÇO-DO-ICONE"/></a>

</center>

Faça as devidas alterações. Acho que o link já é auto-explicativo, né? Lembrando que você precisa mapear a sua foto em algum site porque o que você coloca aí é a url da imagem (eu por exemplo, coloco as minhas no Picasa, mas existem varios outros sites que você pode usar). Qualquer dúvida é só perguntar aqui, que eu ajudo!

Vai ficar mais ou menos assim (como o meu):

Vou deixar aqui pra vocês alguns modelos de ícones das redes sociais:

E aí meninas, gostaram? O que mais gostariam de aprender? Mandem suas ideias e desejos ♥

Me ajude seguindo o blog!

É só clicar aqui ao lado, e fará uma blogueira feliz ♡

.