Nivo Slider

Sim gente, resolvi tomar vergonha na cara e aparecer por aqui. Foi sacanagem da minha parte sumir assim sem dar explicações, eu sei. Mas agora estamos no último semestre e as provas finais começam a chegar, como sou por natureza uma aberração em matemática, física e exatas em geral, vocês devem imaginar como é. Fora os trabalhos, pra vocês terem uma noção tenho até um curta metragem pra fazer. E isso dá trabalho hein? Confesso também que ando bem desanimada para postar. Sobre o 8 on 8 não sei o que vou fazer. Aquela semana choveu muito e não consegui tirar as fotos. "Mas Anny, dentro de casa não chove!". Eu sei, mas chuva traz preguiça que por sua vez traz desânimo e vontade de não fazer nada além de ficar deitadinha na cama com o notebook. Alguém me entende?  Mas... Ball forward!

Quem estava com saudades de tutoriais se manifeste! haha Como estou super sem criatividade ultimamente (culpa da chuva e do frio, j-u-r-o!) e sei que vocês sentem falta dos tutoriais, é isso que vamos ter pra hoje!

Esse tutorial aprendi num blog que para meu desespero descobri hoje ter sido excluído. Sorte a minha ter o slide no blog e poder compartilhar com vocês o código. #MeAmem!

O slide vai ficar mais ou menos assim (dependendo das suas configurações):

Não vou ensinar especificamente um lugar para colocar, mas você pode por no cabeçalho (como o meu) ou mesmo no topo das postagens em tamanho grande. Se você quiser colocar no cabeçalho recomendo ler com atenção este post do falecido Cherry Bomb #TodosChoram.

Os códigos são grandes, então clique em "leia mais"!

"Preto e Branco" e "Sépia" em imagens hover

Quem não gosta de efeitos hover que atire a primeira pedra! Hoje vamos fazer um efeito no qual, ao passar o mouse sobre determinadas imagens, elas automaticamente passem para o "preto e branco" ou "sépia".  

Acreditem, isso dá um up nas fotografias, podendo ver ela de duas formas distintas: com cor e monocromática. Confira!

Preto e Branco

Passe o mouse e veja o efeito!

Abra seu HTML e cole o seguinte código acima de ]]></b:skin>

.pb {
-webkit-transition-duration: .90s;
}
.pb:hover {
-webkit-transition-duration: .90s;
-webkit-filter: grayscale(100%);
}

E quando quiser usar o efeito, cole o seguinte código na guia "HTML" da postagem ou em um gadget de "HTML/JavaScript"

<img src="link da imagem" class="pb">

Sépia

Passe o mouse e veja o efeito!

Abra seu HTML e cole o seguinte código  acima de ]]></b:skin>

.sépia {
-webkit-transition-duration: .90s;
}
.sépia:hover {
-webkit-transition-duration: .90s;
-webkit-filter: sepia(100%);
} 

E quando quiser usar o efeito, cole o seguinte código na guia "HTML" da postagem ou em um gadget de "HTML/JavaScript"

<img src="link da imagem" class="sépia">

Simples, porém útil e bonito. Curtiram?

Gadget do Instagram no blog

Me xinguem, me crussifiquem, eu deixo! Eu sei que o blog anda desatualizado DEMAIS e vivendo de 8 on 8 (me xingaram em anony já por isso haha). 

Mas quero deixar claro que as coisas andam bem complicadas para mim. Minha escola é Federal, ou seja, é muito "puxada" e estou sempre cheia de temas, trabalhos e as provas são bem chatinhas também. Então, me desculpem, mas faço o que posso haha

Enfim, alguém notou o gadget do Instagram lá no rodapé do blog? É bem simples de fazer e uma ótima forma de "divulgar" seu perfil no caso de ter um blog.

Entre nesse site e preencha da seguinte forma:

Preview: 

Depois de visualizar, se estiver como você queria, clique em "Get Widget":

Copie o código e cole dentro de um gadget de "HTML/JavaScript".

Bem simples não? 

Ah, e não deixem de me seguir lá no Instagram (@annystankiewicz) hein? 

Kisses :*

Faixinha em tableless

Sabem a faixinha que uso como subtítulo de postagem? Então, hoje aprenderemos como faze-la. Não lembro em que blog peguei o tutorial, mas se alguém souber ou até mesmo eu lembrar edito o post e coloco aqui. A faixinha ficará semelhante a essa:

Exemplo

Para colocá-la, entre em seu HTML e procure por 

}]]></b:skin> 

Acima dele cole:

/* Faixinha de subtítulo */
.table{
background: url(url da faixinha)no-repeat;
color: #fff; /* cor da fonte */
font: italic 15px georgia; /* itálico, tamanho e nome da fonte*/
padding: 3px; /*distanciamento em relação a margem*/
width: 255px; /*largura da imagem*/
height: 30px; /*altura da imagem*/
text-align: left; /*alinhamento*/
margin-left: -35px; /*margem esquerda*/
}

Ajuste de acordo com seu gosto, se não ficar bem posicionado é só alterar o valor de margin-left até ficar certinho.

Toda vez que quiser usar a faixinha na postagem, clique na aba HTML (fica do lado da aba "Escrever") e cole o seguinte código:

<div class="table">Texto aqui</div> 

Menu dentro de uma faixa

  Sempre me perguntam isso, tanto por aqui quanto por email, e acreditem, não são poucas pessoas. Por isso resolvi trazer o tutorial para sanar de vez a dúvida de todos. 

O título do post ficou estranho, mas na verdade não achei uma "definição" melhor, bem, neste tutorial aprenderemos a colocar o menu dentro de uma faixa que percorre o blog todo na horizontal, dividindo o cabeçalho do resto do blog. É o que uso no meu layout :)

É super simples e não tem muito segredo, aposto que a reação de quem manja um pouco mais vai ser mais ou menos "-Como eu não pensei nisso antes?!" haha

Número de comentários dentro de um balão

Atualização: Gente, perdão! Eu errei um código e por isso vocês não estavam achando rsrsrs Já arrumei, então tentem de novo que agora tem que funcionar! :)

Gente, vocês não tem noção de como esse tutorial foi pedido desde que troquei o layout! Me surpreendi pelo fato de terem me pedido tanto, porque esse tutorial é bem conhecido e já visto em vários blogs. Mas tudo bem, já que pediram, vim aqui trazer!

É bem simples, entre no seu HTML e busque (Ctrl+F) por ]]></b:skin>

 Acima dele coloque o código abaixo, substituindo a parte destacada pela url do seu modelo de balão.

.comment-bubble {
float: left; /* posicionamento a direita, pode mudar para right*/
width : 78px; /*largura da imagem do balão*/
height : 83px; /*atura da imagem do balão*/
background : url(http://migre.me/cXyq7) no-repeat;
font-size : 32px; /*tamanho da fonte do número de comentários*/
margin-top: -19px; /*margem em relação ao topo, ajuste o nº se precisar*/
margin-left: 10px; /*margem em relação ao lado esquerdo, ajuste o nº se precisar*/
padding: 3px; /* espaçamento interno*/
text-align : center; /*texto centralizado*/
}

 Lembre-se que em margin-top números negativos sobem e positivos descem. Já em margin-left números positivos vão para a direita e negativos para a esquerda. 

Visualize e se estiver tudo certo salve. PS: O balão ainda não vai aparecer. 

Agora marque a caixinha "Expandir modelos de widget" e procure por :

<b:includable id='post' var='post'>

Abaixo dele coloque o seguinte código :

<b:if cond='data:post.allowComments'> <a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a></b:if> 

Agora visualize, e se o balão tiver certinho, salve.

Balões (se usar credite):

 

Espero que tenham gostado, como podem ver o tutorial é bem simples, então se não conseguirem tentem novamente. Kisses :*

Caixa de busca personalizada

By: Melina Souza

Alguém aí concorda comigo que caixas de pesquisa são de extrema necessidade em um blog? Bom, acho que todos concordam, mas vamos combinar que a caixa de busca do blogger não favorece muito um layout, já que é bem feinha né rsrs

Há bastante tempo vi um tutorial de como fazer uma barra de busca no blog da Gizaa, e acabei adaptando o estilo que ela usou no tutorial ao código da barra que eu já usava, e deu nisso que eu vou ensinar! rs

Bem, é super simples, antes de começar a mexer com html, vá em Layout > Adicionar um gadget > Escolha o de HTML/JavaScript. Dentro desse gadget cole:

<form action="/search" class="search" method="get">
<input class="searchbar" id="s" name="q" type="text" value="" />
<input class="searchbut" type="submit" value="GO" />
</form>

Você pode trocar a palavra Go pela palavra que desejar, é ela que fica dentro do botão pra pesquisa.

Marcadores pesonalizados em duas colunas

By: Melina Souza

Como me pediram (oi Paty!) pra ensinar a fazer os marcadores que estou usando nesse lay, cá estou eu pra postar o tutorial!

O resultado será esse:

1º passo

Abra seu gadget de marcadores (se ainda não tem adicione) e deixe ele da seguinte forma:

2º passo

Abra seu HTML e procure (ctrl+f) por ]]></b:skin> e acima dele cole:

/* Marcadores personalizados - goimagines.blogspot.com */
#Label1 ul li{
float: left;
width: 45%;
font-family: 'Dosis', sans-serif; /* fonte, se preferir troque */
text-transform: uppercase; /* letras em maiúsculo, se não quiser apague a linha */
font-size: 16px; /*tam. da fonte*/
background: #fff; /*fundo*/
border-bottom: 2px solid #ccc; /* borda de baixo do marcador */
margin: 5px;
font-weight: normal;
list-style-type:none;
}
#Label1 ul li:hover{
background: #EAEAEA; /*fundo hover*/
border-bottom: 2px solid #FF51A8; /* borda de baixo do marcador hover */
}

Visualize e se estiver tudo certo salve! É isso, beijos! :3

Enquete personalizada nas suas postagens

Meta de 1500 seguidores alcançada! Muito obrigado gente <3 Agora é rumo aos 2000!

Calma gente, eu não desisti do blog não haha É só a falta de tempo (e inspiração) que resolverem me visitar.  Mês que vem eu vou fazer uma prova de seleção, e em dezembro mais outra (para ingressar no ensino médio em uma escola técnica) e a pressão -e o nervosismo- já estão me ~dominando~. Embora eu tenha criado uma certa resistência quanto a estudar em casa (estudo mais no cursinho preparatório), tenho que começar a pegar mais pesado com os cadernos, afinal, falta pouco mais de um mês. 

Quando essa "parafernália" passar vou voltar com tudo aqui no blog e atualizar -e criar- algumas tags, digamos, mais femininas (como esmalte da vez, resenhas e etc.). Quem me acompanha no facebook e no twitter sabe que vou ganhar uma câmera nova (uma bridge para ser mais exata), já escolhi o modelo e agora só falta comprar mesmo. Assim que tiver ela em mãos vou conseguir realizar esses tipos de posts que requerem fotografias.

Mas enfim, deixando de lado minha life e minhas desculpas, hoje vim atualizar a tag #tutoriais pra ensinar uma coisa simples mas que, claro, sempre tem gente que não sabe. Como me perguntaram a respeito de como fiz a enquete personalizada nesse post, achei legal ensinar, pois mesmo sendo algo simples é algo que deixa a postagem mais interativa, já que o leitor pode opinar sobre determinado assunto.

Exemplo

Como usar a nova interface do Blogger

Imagem por: Melina Souza

  Como todo blogueiro(a) já sabe, o Blogger resolveu nos assustar novamente, desta vez, mudando a interface do nosso painel. Há alguns meses atrás ele já havia disponibilizado o uso dessa nova interface, mas era opcional, sendo assim, era possível voltar à interface antiga caso não tivesse gostado da nova.

  Não sei se vocês lembram, mas em abril eu postei um tutorial ensinado a voltar ao antigo painel. Agora isso não é mais possível e quem não gostou será obrigado a se acostumar.

  Eu até achei que eles demoraram bastante a tornar obrigatório o uso dessa nova interface, vejam, já fazem cinco meses que eles liberaram o novo painel de forma opcional. Quem ainda não tinha experimentado a nova interface quando esta foi liberada, não está gostando da mudança e como li em várias reclamações, não estão conseguindo usar o painel normalmente.  Apesar de bonita e moderna, a nova interface não é tão prática e funcional quanto a versão anterior, mas como não temos alternativa, resta-nos aprender a usar essa nova versão de forma que se torne tão funcional e prática como a anterior era. 

  Várias funções mudaram de nome e lugar, por isso o bafafá todo a respeito dos blogueiros não estarem "se achando" no novo painel. Hoje mostrarei à vocês como lidar com essa nova versão, para não nos perdermos mais e conseguirmos atualizar nossos blogs normalmente, e aos poucos, irmos nos acostumando.

Atenção: Clique nas imagens para vê-las em seu tamanho real, como algumas são grandes demais tive que deixá-las menores, o que reduz a qualidade de visualização!

Painel

Threaded Comments personalizado

Muita gente (muita gente mesmo, acreditem) me pediu o tal do tutorial que usei pra personalizar meus comentários. Esse tutorial perfeito foi um achado no blog da Gizaa, o CandyLand (visitem, tem muitos tutoriais e utilitários bacanas lá!) então hoje vim repassar o tutorial pra vocês!

 Esse tutorial passará seus comentários pra versão atualizada (se eles já não atualizaram sozinho) e deixará eles com opção de reply/resposta (que é muito útil!). 

Dei umas editadas no código da Gizaa, então depois de ter aplicado o tutorial seus comentários deverão estar parecidos/iguais ao da foto do "depois".

Lógico que vocês podem editar o código e deixar do jeitinho que preferirem, como coloquei mais descrições ao lado dos códigos principais (dizendo o que é etc) vai ser super fácil de editar!

Personalizar o menu padrão do blogger

Achei fofa, inclusive é a imagem que to usando no meu desktop <3 Hi people! Depois do sumiço -vocês até já se acostumaram com a falta de posts que eu sei kk, é a vida né- trouxe um tuto bem pedido: como personalizar o menu padrão do blog (aquele horroroso!) e é bem simples, sério! Não vi esse tutorial em nenhum outro blog, descobri "fuçando" e vim compartilhar com vocês, então peço que creditem! O resultado será semelhante ao meu:

Background nos marcadores

Hello imaginers! Depois de tantos pedidos sobre como colocar fundo nos marcadores, cá estou eu pra ensinar. Pra quem não sabe do que estou falando, segue o meu gadget de macadores:

Saibam que existe duas formas de fazer: Com uma imagem inteira (mais difícil) e com uma imagem no topo e cor no restante do gadget (mais fácil). Entenda:

Como disse, o segundo jeito é mais fácil (com imagem e cor) do que o primeiro (com imagem inteira). Sabe porque? O primeiro você vai ter que fazer a imagem com uma altura que seja suficiente para caber todas as suas tags, e pra achar essa altura pode ser um pouco complicado. Lembre-se também que, ao colocar fundo com esse método, você não vai poder ficar adicionando mais tags, caso contrário elas começarão a sair pra fora da imagem. O segundo é melhor pois é mais simples e a caixinha com cor vai aumentando conforme você for adicionando mais tags, ou seja, não requer manutenção.

É importante que você esteja usando o gadget de marcadores em Cloud (tags misturadas, como a minha)

Antes de começar o tuto, quero creditar o Trechy Teen pelo tutorial!

Navegação personalizada com efeito hover degradê

Pra combinar com o frio que tá fazendo aqui no RS: uma imagem que tem tudo a ver com o inverno!

Já tinham me pedido esse tuto, e cá estou eu pra posta-lo! Nesse tuto você vai aprender a colocar fundo colorido nos links "postagens recentes" "ínicio" e "postagens antigas", igual aqui no GI!
Aprendi esse tutorial no Perfeitinha, com a Thais e fiz algumas alterações -como o degradê- :3

O resultado será semelhante à esse:

Entre no seu html e procure pela tag  #blog-pager { (ela fica dentro da tag /* Posts) feito isso adicione o código abaixo acima dessa tag.

/* Navegação com efeito hover degradê - http://goimagines.blogspot.com.br */

#blog-pager {

clear:both;

text-align: center;

margin:0px auto;

padding:10px;

}

#blog-pager a:link, #blog-pager a:visited{

color: #ffffff; /* cor da fonte */ 

font-size: 16px; /* tamanho da fonte */ 

padding:5px;

background-color: #8BC2C9; /* cor do fundo */ 

-moz-border-radius:10px; /* bordas arredondas, apague se não quiser */ 

-khtml-border-radius:10px;

-webkit-border-radius:10px;

border-radius:10px;

}

#blog-pager a:hover{

color: #ffffff; /* cor da fonte hover*/ 

padding:5px;

background: #BFCED5; /* fundo hover, apague o código abaixo até } se não quiser degradê */ 

background: -webkit-gradient(linear, left top, left bottom, from(#BFCED5), to(#8BC2C9));/* webkit browsers */

background: -moz-linear-gradient(top, #BFCED5, #8BC2C9);/* firefox3.6+ */

filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#BFCED5', EndColorStr=' #8BC2C9');/* IE */

}

#blog-pager-newer-link {

float: left;

}

#blog-pager-older-link {

float: right;

}

Acho que não tem muito o que explicar, uma vez que tem as instruções no código, só quanto ao degradê, altere as cores conforme quiser, trabalhando com duas cores de preferência (no código foi usado #8BC2C9 e #BFCED5)

É isso, kissus :*

O motivo do sumiço + Cabeçalho em toda a largura do blog

Acho que vocês sabem, to na 8ª série do fundamental e tá sendo tudo muito corrido. Desde o ano passado faço dois cursos de computação (web designer e operador de computador) e semana passada comecei um curso preparatório para as provas de seleção, como to saindo do fundamental tenho que garantir minha vaga em uma escola de ensino médio, e pra isso tenho que fazer umas provas ~tensas~ Esse cursinho é dois dias por semana, ou seja: tenho 2 cursos na terça (preparatório+webdesigner) um na quarta (operador de pc) e um na quinta (preparatório), então só tenho a segunda e a sexta livres (fora o tempo que tenho antes e depois dos cursos) e ainda tenho que conciliar o blog com trabalhos escolares.  Espero que entendam que tá difícil atualizar o blog e que provavelmente ele vai continuar assim meio parado, infelizmente, mas fazer o que né?

Muita gente pediu para eu ensinar como fiz o cabeçalho ocupando toda a largura do blog, e hoje vou revelar o segredo. Na verdade não é um cabeçalho e sim um background (HÁ! por essa você não esperava!) 

Há uns tempos atrás eu visitei o Madtown e vi que o cabeçalho ocupava toda a largura, achei lindo e só depois raciocinei que era um background. Me inspirei na ideia e coloquei aqui no blog também! :3 Tava só esperando a Laís postar o tuto primeiro (já que foi ela que inventou seria injusto eu postar antes né?).

É bem simples de fazer e existem duas formas, uma com HTML e outra sem! Go!