Tutos
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 :
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 :*
http://goimagines.blogspot.com.br/2013/01/numero-de-comentarios-dentro-de-um-balao.html
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Menu com efeito hover
Oi gente!
Antes de tudo quero agradecer por tantos elogios sobre o novo layout, vocês não sabem o quanto eu fiquei feliz com tantos recadinhos fofos, e embora ainda não tenha conseguido responder todos, saibam que fico muito grata pelo carinho de vocês. E assim que der continuo respondendo, afinal, ainda tem uns 4 post cujo comentários ainda não foram respondidos, mil perdões!
Perceberam que o aniversário do blog ta chegando? Faltam apenas 13 dias *o* Nem me liguei que já estava chegando e não preparei nada, ainda. Mas vou preparar umas coisas bem legais, como um concurso ou sorteio (o que vocês preferem? Em ambos o prêmio com certeza será um layout, porque prêmio real eu não posso dar agora haha) e uma retrospectiva, que não pode faltar né? (pra mostrar meus antigos layouts nada bonitos rsrs)
Mas sem delongas, vamos pro tutorial? Até porque eu já falei de mais
Como algumas pessoas pediram, e muitas gostaram, resolvi ensinar como fiz o menu que estou usando atualmente, esse aqui:
Antes de começar, quero creditar o lindo blog da Déb, o Spázio DM, pois foi lá que aprendi a fazer esse menu lindo <3
Quer aprender? Clica em leia mais!
1- Entre em Design > Editar HTML e usando Ctrl+F procure por ]]></b:skin>
2- Logo acima desse trecho que procurou cole o seguinte código:
.navi1 {
display: block;
height: 64px;
margin:0 auto;
position: relative;
width: 623px;
}
.navi1 ul {
float: none;
list-style-image: none;
list-style-type: none;
margin: 3px 0;
}
.navi1 ul li {
height: 64px;
background-image: url(url da imagem aqui);
background-repeat: no-repeat;
float: left;
margin: 0px;
padding-top: 5px;
position: absolute;
}
.navi1 ul li a {
display: block;
height: 100%;
width: 100%;
}
.navi1 ul li.sm1 { background-position: 0px 0px; left: 0px; width: 125px; }
.navi1 ul li.sm2 { background-position: -125px 0px; left: 100px; width: 124px; }
.navi1 ul li.sm3 { background-position: -249px 0px; left: 200px; width: 124px; }
.navi1 ul li.sm4 { background-position: -373px 0px; left: 300px; width: 125px; }
.navi1 ul li.sm5 { background-position: -498px 0px; left: 400px; width: 126px; }
.navi1 ul li:hover { z-index: 1000; }
.navi1 ul li.sm1:hover { background-position: 0px -75px; }
.navi1 ul li.sm2:hover { background-position: -125px -75px; }
.navi1 ul li.sm3:hover { background-position: -249px -75px; }
.navi1 ul li.sm4:hover { background-position: -373px -75px; }
.navi1 ul li.sm5:hover { background-position: -498px -75px; }
Importante:
Em background-image: Você vai colocar o link da imagem do seu menu, vou deixar uma imagem base pra vocês terem uma ideia de como fazer ou se quiserem editar a mesma fiquem a vontade. Recomendo que editem e usem essa que vou disponibilizar, pois ela está com a largura dos "quadradinhos coloridos" certa, e se fizer com outros tamanhos fica difícil explicar, pois vai ter que alterar aquela parte enorme do background position e vai complicar muito. Então salve a imagem que vou disponibilizar e editem cores, acrescentem o nome das páginas e etc. Enfim, use a criatividade!
OBS: Base feita por mim.
OBS:
- A parte de cima é o menu em estado normal e a parte de baixo é o menu quando o mouse passa por cima.
- Em height: 64px é a altura da imagem e width: 623px é a largura, troque esses valores de acordo com o tamanho da sua nova imagem. Mas, na altura, se a imagem tem 155px você vai colocar por exemplo, 64px de altura. Pois senão vai aparecer as duas partes do menu (a parte do estado normal e estado hover). Não tem um valor certo, mas se usar a imagem que disponibilizei 64px de altura vai dar certinho.
- Nesse menu é possível colocar apenas 5 links (um em cada espacinho).
Depois disso visualize e se estiver tudo certo, clique em salvar (o menu ainda não vai aparecer quando você visualizar, só visualize para ver se não interferiu em nada)
3- Para ligar essas imagens á um link você vai em "Design" > "Elemento de página" e adiciona um gadget HTML/JavaScript. Nele cole esse código:
<div class='navi1'>
<ul>
<li class='sm1'><a href='ENDEREÇO 1'/></li>
<li class='sm2'><a href='ENDEREÇO 2'/></li>
<li class='sm3'><a href='ENDEEÇO 3'/></li>
<li class='sm4'><a href='ENDEREÇO 4'/></li>
<li class='sm5'><a href='ENDEREÇO 5'/></li>
</ul>
</div>
No endereço 1 coloque o link da página da primeira palavra que você colocou na imagem e assim consequentemente. Exemplo:
http://goimagines.blogspot.com.br/2012/02/menu-com-efeito-hover.html
0 comentários: