segunda-feira, 10 de fevereiro de 2014

Persoanlizar link de comentários

|| || Nenhum comentário
O tutorial que eu vou trazer é bem fácil, tive que fuçar para fazer o tema do meu blog, já que odeio os dois pontos que ficam depois dos "N Comentarios", isso, o link mesmo. Nada mais chato do que isso, né? Então que tal personalizar? Siga o tutorial abaixo:


1. Vá na parte de editar o HTML do seu blog, clique na opção "Expandir modelo de widgets", procure pela seguinte linha (com o Ctrl+F): <span class='post-comment-link'>, você encontrará o bloco de códigos igual este abaixo, certo?



No Layout Minima
<span class='post-comment-link'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<b:if cond='data:post.numComments == 1'>1
<data:top.commentLabel/>
<b:else/>
<data:post.numComments/> <data:top.commentLabelPlural/>
</b:if></a>
</b:if>
</b:if>
</span>

No Layout Travel


<span class='post-comment-link'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:post.allowComments'>
<b:include data='post' name='comment_count_picker'/>
</b:if>
</b:if>
</b:if>
</span>
Agora que você achou os códigos, para mudar, é só substituir pelo código abaixo:

Código
<span class="post-comment-link">
<b:if cond="data:blog.pageType != "item"">
<b:if cond="data:post.allowComments">
<a class="comment-link" expr:href="data:post.addCommentUrl" expr:onclick="data:post.addCommentOnclick">
<b:if cond="data:post.numComments == 0"> Sem comentários
<b:else>
<b:if cond="data:post.numComments == 1">1 Comentário
<b:else>
<data:post.numcomments> Comentários
</data:post.numcomments></b:else></b:if></b:else></b:if></a>
</b:if>
</b:if>
</span>

Pronto, agora só modificar o que será mostrado no post, eu deixei ali "Sem comentários","1 Comentário" e "X Comentários", mas você pode modificar ao seu gosto e prontinho, gostaram? Até o próximo post então! ~Chu!

domingo, 9 de fevereiro de 2014

Comentários numerados

|| || Nenhum comentário
Hoje tem pedido de tutorial atendido! Vou mostrar para vocês como deixar os comentários numerados. Esse recurso é muito útil para fazer sorteios e também para ajudar na hora de responder os comentários. Eu anoto o número em que eu parei para continuar respondendo depois.

Este tutorial mexe com vários códigos, então recomendo que antes de começar você faça download do modelo de seu blog, assim se houver algum erro, dá pra restaurar tudo como era antes. Fez backup? Então vamos começar!


ATENÇÃO
O script só funciona em comentários configurados para abrir em janela pop-up ou em página inteira ou se não usarem o sistema de respostas do próprio blogger.

Abra seu HTML, e marque a caixinha "Expandir Modelos de Widgets"
Aperte Ctrl+F e procure por:
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
Abaixo dessa linha cole isso:
<script type='text/javascript'>var contadorComentarios=0;</script>
Agora procure por esta linha:
<b:loop values='data:post.comments' var='comment'>
E logo abaixo dela cole esse código:
<div class='' expr:id='data:comment.id'>
Novamente, procure por:
<data:commentPostedByMsg/>
E logo abaixo cole isso:

<span class='comentacontador'><a expr:href='"#comment-" + data:comment.id' title='Link para este comentário'><script type='text/javascript'>            contadorComentarios=contadorComentarios+1;            document.write(contadorComentarios)</script></a></span>
Por último procure por:
<b:include data='comment' name='commentDeleteIcon'/></span></dd>
E logo abaixo cole: </div>

No final seu código deve estar assim:
 <dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<script type='text/javascript'>var contadorComentarios=0;</script>
          <b:loop values='data:post.comments' var='comment'>
<div class='' expr:id='data:comment.id'>
            <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
              <b:if cond='data:comment.favicon'>
                <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
              </b:if>
              <a expr:name='data:comment.anchorName'/>
              <b:if cond='data:blog.enabledCommentProfileImages'>
                <data:comment.authorAvatarImage/>
              </b:if>
              <b:if cond='data:comment.authorUrl'>
                <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
              <b:else/>
                <data:comment.author/>
              </b:if>
              <data:commentPostedByMsg/>
<span class='comentacontador'><a expr:href='&quot;#comment-&quot; + data:comment.id' title='Link para este comentário'><script type='text/javascript'>contadorComentarios=contadorComentarios+1;            document.write(contadorComentarios)</script></a></span>
            </dt>
            <dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
              <b:if cond='data:comment.isDeleted'>
                <span class='deleted-comment'><data:comment.body/></span>
              <b:else/>
                <p>
                  <data:comment.body/>
                </p>
              </b:if>
            </dd>
            <dd class='comment-footer'>
              <span class='comment-timestamp'>
                <a expr:href='data:comment.url' title='comment permalink'>
                  <data:comment.timestamp/>
                </a>
                <b:include data='comment' name='commentDeleteIcon'/>
              </span>
            </dd>
           </div>
          </b:loop>

Visualize se não tem nenhum erro e salve as alterações. Agora vamos aplicar os estilos á numeração. Nesta etapa você vai ter que salvar as alterações e depois visualizar no blog mesmo, já que não dá pra ver os comentários na  pré-visualização.

Aperte Ctrl+F e procure por ]]></b:skin>
Logo acima da tag cole o seguinte código:
.comentacontador {
float: right;  /* alinhamento do número*/
display: block;
width: 50px; /*Largura do espaço do número*/
margin-top: -30px;  /* distância dos números ao topo */
text-align: right;
font-family: Trebuchet MS; /* Fonte do múmero*/
font-size: 36px;  /* tamanho da fonte */
background: #uijvj; /*Coloque cor de fundo se quiser*/
font-weight: normal; /*Troque normal por bold se quiser a fonte em negrito*/
}
Merecidos créditos ao Mundo Blogger! Não deixem de visitar :) Lembrando para quem ainda não está particpando, tem um sorteio muito legal rolando aqui no blog, não deixem de conferir!

Comentários no Disqus

|| || Nenhum comentário
Oi queridos! Estou tentando manter o blog o mais atualizado possível pra vocês, e a Ana e a Isa estão me ajudando muito com seus posts lindos pra encher o blog de novidades!

Hoje trago mais uma novidade pra vocês que estou usando no Cherry Bomb e que vocês também poderão usar no seu blog: O sistema de comentários Disqus, que caiu do céu pra mim através da queridíssima Baby Suh (visitem o blog dela aqui)

image

Então, o Disqus é um "aplicativo" externo que pode ser colocado no seu blog para substituir o padrão de comentários do blogger. Algumas de suas principais vantagens são:

1as12 Rapidez para carregar e enviar os comentários
1as12 Opções de moderação de comentários práticas
1as12 A resposta a algum comentário aparece logo abaixo do comentário original
1as12 Opção de "Curtir" um comentário ou um post
1as12 Conectividade com Google, Twitter, Facebook, Yahoo e Open ID

Como nem tudo é perfeito, tem algumas desvantagens a principal delas é: Não dá pra personalizar, tem que usar o modelo simples, branco e cinza.

Pra colocar o Disqus  no seu blog é bem simples até:
Entre no site: http://www.disqus.com/

Clique no botão verde escrito "Sing Up". Vai abrir a página pra você colocar seus dados. É só preencher com o enderço do seu blog, Nome do blog e o nome da sua conta, que pode ser o nome do seu blog sem espaços.

Mais em baixo você vai colocar seu username (apelido), senha e e-mail. Depois de preencher tudo é só clicar em "Continue".

Vai aparecer uma página com algumas opções de configuração. Você pode colocar seu twitter para as pessoas te mandarem reply e marcar as redes sociais que podem ser conectadas ao Disqus. Eu deixei assim:

3

Depois clique em continue. Vai aparecer uma tela com o nome de vários serviços de blog, aí você clica no ícone do blogger. Vai aparecer a seguinte tela:

4 

É só clicar no botão "Add Site "-----" to blogger". É só aceitar e pronto, o disqus já está instalado no blogger!

Agora é só importar os comentários do blogger. Clique em admin Lá em cima.

5 

Clique na aba "Tools" e depois em "Import/Export". Depois clique no ícone do blogger:

6 

Aí é só aceitar tudo e os comentários serão importados! Prontinho, o disqus está pronto para ser usado no blogger.

Espero que tenham gostado! Kissus
Fonte: Cherry

Como mudar o fundo dos comentários

|| || Nenhum comentário
Oi! Hoje estou postando um pequeno tutorial que é bastante útil e ao mesmo tempo muito simples. Esse tuto foi pedido da Mariana, que tem um blog muito fofo para meninas emo, mas que vai agradar todas as garotas. Visitem, eu recomendo:www.maariihsouza.blogspot.com
Vamos aprender como mudar o fundo dos comentários. Vejam um exemplo que eu uso aqui mesmo:

Abra o blogger, clique em design > Editar HTML
Aperte Crtl+F e procure por comments.
Você deverá encontrar algo semelhante a isso: 
#comments {
  padding: 15px;
}

ou isso:
.post-outer .comments {
  margin-top: 2em; }
Então, cole logo abaixo de comments, o código a seguir:
background: url(link da imagem de fundo) repeat;
Deverá ficar assim:
#comments {
background: url(link da imagem de fundo)repeat;
  padding: 15px;
}
Aí é só substituir o link da imagem e salvar as alterações! Bem simples não? ^^

Novo Layout + Sorteio de Layout

|| || Nenhum comentário
Oii Pandas ! 
Se vocês ainda nao perceberam estamos com novo layout, antes de me perguntarem o porque da mudança eu vou contar, ele estava dando grande problemas nas postagem e isso nao era nada bom e fui obrigada a trocar aquele layout maravilhoso por esse (nao estou dizendo que esse não é bonito ) Bom como vocês leram iremos ter um sorteio, mas do que ?.... De um layout super lindo do  One Direction e da nossa querida Cat Ariana Grande, eles nao são muito bonito mas foi o máximo que eu consegui fazer. Vai estar disponivel dois Layout da Ariana e você poderá escolher qual vai querer e quatro do One Direction segui a baixo a foto dos Layout :

Ariana:


One Direction:





Se quiser Participar do Sorteio tem que estar seguindo agente no Blog e entrar em contato comigo pelo meu Twitter: Nessa
Facebook: Wanessa

quinta-feira, 16 de janeiro de 2014

Personalize a área dos comentários

|| || 2 comentários


Eu acho que um dos maiores pontos fracos dos modelos do blogger, é a área dos comentários, que vem com um fundo cinza muito feinho e sem opções para personalizar pelo designer de modelo. Mas hoje trago a solução para esse problema. Vocês vão poder deixar os seus comentários assim:







Bem melhor não? Mas atenção:
Devido as mudanças no formulário de comentários do blogger, esse tutorial só funciona em blogs que tenha os comentários configurados para abrir em umajanela pop-up ou em outra guia. Blogs onde os formulário de comentário aparece logo abaixo da postagem, por enquanto não podem ser personalizados.
 Outra coisa que é preciso destacar, é que não dá para visualizar os comentários antes de salvar o modelo. Ou seja, para ver como está ficando, você tem que salvar, depois abrir o blog para poder ver como ficaram os comentários. Então, é super importante, baixar uma cópia do seu modelo antes de começar as modificações.

Tudo entendido? Então vamos começar!

Abra o painel do blogger, clique no nome do seu blog, depois, clique em "Modelo" no menu vertical que aparece no lado esquerdo da tela. Clique no botão "Editar HTML" que fica em baixo da miniatura do seu blog, e clique em prosseguir no aviso que aparecer.

Aperte Ctrl+F e procure por #comments
Você deve apagar todo esse código:
#comments {
  background: $(comments.background);
  padding: 15px;
}
#comments .comment-author {
  padding-top: 1.5em;
}
#comments h4,
#comments .comment-author a,
#comments .comment-timestamp a {
  color: $(post.title.text.color);
}
#comments .comment-author:first-child {
  padding-top: 0;
  border-top: none;
}
.avatar-image-container {
  margin: .2em 0 0;
}
 E no lugar coloque esse:

#comments h4 { /* Este é titulo do formulario, onde mostra "X Comentários" e "Postar um comentário" */
margin:0;
color:#ff4d8e;
font-family: Lucida Handwriting;
font-weight: normal;
font-size:36px;
text-shadow: none;
}
#comments-block .comment-author { /* O espaço do nome de quem comentou */
background: #FFF; /*Cor de fundo do nome de quem comentou*/
color: #8fddf6; /*Cor da fonte*/
font-family: Trebuchet MS; /*Nome da fonte*/
font-size:16px; /*Tamanho da fonte*/
border-bottom: double 3px #8fddf6; /*Borda de baixo do nome*/
padding: 5px;
margin:.5em 0;
height:30px; /*Altura do espaço do nome*/
font-weight: normal; /*Peso da fonte. Mude de normal para strong se quiser o texto em negrito*/
}
#comments-block .comment-author a:link {
text-decoration: none;
}
#comments-block .comment-body { /* Area do texto do comentario */
background: #000; /*Fundo da área do comentário*/
margin-top: -2px; /*Margem externa do topo*/
padding: 5px;
font-family:Trebuchet MS; /*Nome da Fonte*/
font-size: 12px;/*Tamanho da fonte*/
color:#fff; /*Cor da fonte*/
width: 500px; /*Largura da área dos comentários, altere de acordo com seu blog*/
/*Bordas arredondadas da área do comentário*/
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
/*Fim do código da borda arredondada*/
}
#comments-block .comment-footer {
margin:7px 0 2em;
line-height: 1.4em;
font-size: 95%; /* tamanho da fonte da data do comentário */
text-align: right; /* alinhamento da data do comentário */
letter-spacing:.1em;
}
#comments-block .comment-footer a:link{
background: #b9ff46; /*Fundo da data do comentário*/
}
.deleted-comment a {
margin: 10px 0 2em;
font-style: italic;
color: #ccc; /*** cor do recado de 'comentário deletado' ***/
}
 Mude as cores, fontes e o que mais precisar. Agora para personalizar a foto de que comentou, aperte Ctrl+F novamente e procure por /* Content abaixo deste trecho você vai ver quem tem isso: body { Você deve colar o código abaixo antes de body {
div.avatar-image-container {
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
box-shadow: 1px 1px 3px #a7a7a7; /*Sombra do avatar*/
margin-top: -2px; /*Margem externa do topo, para alinhar o avatar*/
}
div.avatar-image-container img {
display:none;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
transition-duration: 1s;
-moz-transition-duration: 1s;
-webkit-transition-duration: 1s;
}
/*Efeito de quando passar o mouse em cima da foto*/
div.avatar-image-container img:hover {
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
opacity: 0.8; /*Opacidade*/
-moz-opacity: 0.8; /*Opacidade*/
-webkit-opacity: 0.8; /*Opacidade*/
}
div.avatar-image-container img.delayLoad {
display:block;
}
 Você pode mudar o efeito da imagem se quiser. Nesse código que eu passei o efeito é a imagem redonda, que fica quadrada quando passa o mouse em cima.

quarta-feira, 15 de janeiro de 2014

Forma nas imagens dos comentários (máscara)

|| || Nenhum comentário
psd ilustração
                                                           Hooy
Quanto tempo né gente ? faz quase 2 meses que não posto mas para qualquer esclarecimento eu não entrei por que eu estava fazendo o nosso novo layout e organizando o blog.

Estou muito feliz, andei testando uns efeitos no meu blog de testes e finalmente esse deu certo! Créditos ao W3 por ter me ensinado, quem souber inglês e quiser ampliar essa área de máscara nas imagens e caixas é só clicar no link, já que hoje eu apenas vou ensinar como por isso na caixa de comentários (eu nao usei nesse novo layout)

Untitled-1





Mas dá para por em tudo, inclusive em gifs! Legal né? São imagens, você faz sua imagem em PNG com o fundo transparente e o corpo preto, epois hospeda e coloca no html, super fácil, vamos aprender?

Antes, mil desculpas por não editar nada, logo eu edito tudo! Estou sem internet, então estou postando do serviço, nem pude fazer a ilustração direito, mas assim que eu chegar em casa, dou um jeito de trocar, ok? Peço desculpas a vocês e a Lia.


1. HTML
No HTML não tem muito segredo, você vai colocar apenas o código abaixo substituindo pela imagem desejada. Lembrando que o tamanho é 36x36 pixels. O código abaixo você vai procurar pela tag .avatar-image-container {, copie e cole depois da chave:

Código
-webkit-mask-image: url(url aqui); -moz-mask-image: url(url aqui); -o-mask-image: url(url aqui) mask-image: url(url aqui);


Esta vendo que o código se repete? É para funcionar em todos os navegadores, então não esqueça de por a mesma imagem em todos, hein? haha

2. Imagem
A parte no Photoshop é de criação, você deve apenas abrir um novo documendo (ctrl+n) com o tamanho de 36px, feito isso, ali você colocará sua shape, brush, enfim, o que quiser que fique de base. Lembrando que: tem que ser preto com o fundo transparente. Aqui tem algumas, fiquem à vontade para utilizar:


imagem / imagem / imagem / imagem / imagem / imagem / imagem / imagem /imagem / imagem


~Chu!