Efeito 4 slidings para imagens

(1)Copie todo o código:*** EFEITO 4 SLIDING
Original por cantinho-html.tumblr.com | Editado por cherry-liah.blogspot.com ***/
.qitem {
    width:140px; /*Largura da imagem*/
    height:140px; /*Altura da imagem*/
    border:4px solid #222; /*Borda da imagem*/
    margin:5px 5px 5px 0;
    background: #000; /*Cor de fundo quando passa o mouse*/ 
    overflow:hidden;
    position:relative;
    float:left;
    cursor:hand; cursor:pointer;
    font-family: arial; /*Fonte do texto*/
}

    .qitem img {
        border:0;
    
        /* allow javascript moves the img position*/
        position:absolute;
        z-index:200;
    }

    .qitem .caption {
        position:absolute;
        z-index:0; 
        color:#ccc; /*Cor da legenda*/
        display:block;
    }

        .qitem .caption h4 { /*Estilos do Título da legenda*/
            font-size:18px;
            padding: 10px;
            margin: 0px;
            color: #D40C0C;
            text-align: center
        }

        .qitem .caption p {
            font-size:11px; /*Tamanho da fonte do texto da legenda*/
            padding: 10px;
            margin:0;
            text-align: center;
        }

.bar1, .bar2, .bar3, .bar4 {
    position:absolute;
    background-repeat: no-repeat;
    z-index:200;
}

.clear {
    clear:both;
}

(2) º - Agora cole este código onde você quer que as imagens apareçam (em um gadget de html/javascript na sua sidebar, por exemplo). No final do código é onde você vai colocar o link e a legenda de cada imagem.

Está pronto! Até que é bem fácil não é? Se usarem, não esqueçam de creditar o Cherry BomB.
Esse efeito é quando  você passa o mouse e  a imagem sai e aparece o fundo,É UM EFEITO BONITO,MAS NÃO TENHO A DEMONSTRAÇÃO.

Menu para marcadores

Instalá-lo é muito simples. Abra o modelo HTML do seu blog, aperte as teclas ctrl+F e cole ]]></b:skin> na caixa de pesquisa.

Acima do trecho que você procurou, cole o seguinte código:

Código

/***Menu para marcadores***/
.tag {
font-family: verdana; /*Fonte do menu*/
font-size: 10px; /*Tamanho da fonte*/
height: 16px;
background: url('URL_DA_IMAGEM') no-repeat left; /*Imagem que fica ao lado do link (16x16 px)*/
display: block;
margin-bottom: 5px; /*Espaço inferior entre cada link*/
padding-left: 18px; /*Não mude*/
transition:All 0.5s ease; -webkit-transition:All 0.5s ease; -moz-transition:All 0.5s ease; -o-transition:All 0.5s ease;}

.tag a {color: #fe97cd !important; /*Cor dos links*/}

.tag a:hover { color: #bb588b !important; /*Cor dos links quando passa o mouse em cima*/
font-weight: bold; /*Deixa os links em negrito quando passa o mouse, apague se não quiser este efeito*/
transition:All 0.5s ease; -webkit-transition:All 0.5s ease; -moz-transition:All 0.5s ease; -o-transition:All 0.5s ease;}
/***Por cherry-liah.blogspot.com - não retire os créditos***/

Edite como quiser e salve o modelo do seu blog. Agora vá na guia layout do blogger e adicione um gadget de HTML/Javascript onde quiser que o menu fique. Dentro do gadget cole o seguinte código:

<div class='tag'><a href='http://www.seublog.blogspot.com/NOME-DA-TAG'>Nome da tag</a></div>

Repita este código para cada tag que quiser no seu menu.

Para dividir o menu em três colunas

Se quiser o menu em três colunas como mostra a preview, ao invés de usar o código acima no gadget de HTML/Javascript, use esse:

Código

<div style="float: left; width: 30%">
<div class='tag'><a href='http://www.seublog.blogspot.com/NOME-DA-TAG'>Nome da tag</a></div>
<div class='tag'><a href='http://www.seublog.blogspot.com/NOME-DA-TAG'>Nome da tag</a></div>
<div class='tag'><a href='http://www.seublog.blogspot.com/NOME-DA-TAG'>Nome da tag</a></div>
<div class='tag'><a href='http://www.seublog.blogspot.com/NOME-DA-TAG'>Nome da tag</a></div>
</div>

<div style="float: left; width: 30%">
<div class='tag'><a href='http://www.seublog.blogspot.com/NOME-DA-TAG'>Nome da tag</a></div>
<div class='tag'><a href='http://www.seublog.blogspot.com/NOME-DA-TAG'>Nome da tag</a></div>
<div class='tag'><a href='http://www.seublog.blogspot.com/NOME-DA-TAG'>Nome da tag</a></div>
<div class='tag'><a href='http://www.seublog.blogspot.com/NOME-DA-TAG'>Nome da tag</a></div>
</div>

<div style="float: left; width: 30%">
<div class='tag'><a href='http://www.seublog.blogspot.com/NOME-DA-TAG'>Nome da tag</a></div>
<div class='tag'><a href='http://www.seublog.blogspot.com/NOME-DA-TAG'>Nome da tag</a></div>
<div class='tag'><a href='http://www.seublog.blogspot.com/NOME-DA-TAG'>Nome da tag</a></div>
<div class='tag'><a href='http://www.seublog.blogspot.com/NOME-DA-TAG'>Nome da tag</a></div>
</div>
<div style="clear: both"></div>

Cada bloco de código corresponde a uma coluna.  É só editar com atenção que fica tudo certinho.

Comentarios, Autor e marcadores abaixo do título do post

.  Vocês irão aprender a colocar os links "x Comentários", "Postado por" e "Marcadores", abaixo do título dos posts. Eles geralmente ficam no final do post, mas é possível movê-los de lugar modificando alguns códigos do seu blog.  O resultado será esse:

Print do Kawaii World

Vamos começar?

Este tutorial mexe com códigos bem extensos, então preste bastante atenção e faça download do modelo do seu blog antes. Assim, se algo der errado é só restaurar como estava antes.

Primeiro verifique se esses links estão visíveis no final do post. Se eles não estiverem lá, vá em layout, clique em editar no gadget correspondente ás postagens e marque a opção correspondente a cada link. Depois certifique-se de deixá-los na mesma linha assim:

Agora abra o modelo HTML do seu blog, e marque a opção "Expandir modelos de Widgets"



Aperte Ctrl+F e procure por: <div class='post-footer-line post-footer-line-1'> Irá mostrar dois resultados, o que queremos para este tutorial é o primeiro (1 de 2)

Você verá vários códigos depois deste que procurou. Selecione tudo desde <div class='post-footer-line post-footer-line-1'> até </div> e apague. Deve ficar assim:

Agora aperte Ctrl+F novamente e procure por: <div class='post-header'>
Novamente teremos dois resultados, mas o que nos interessa é o primeiro. Abaixo dessa linha que você procurou, cole o seguinte código:

Código

<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'>
              <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
                <data:post.commentLabelFull/>:
              </a>
            </b:if>
          </b:if>
        </b:if>
      </span> | <span class='post-author vcard'>
        <b:if cond='data:top.showAuthor'>
          <data:top.authorLabel/>
            <b:if cond='data:post.authorProfileUrl'>
              <span class='fn'>
                <a expr:href='data:post.authorProfileUrl' itemprop='author' rel='author' title='author profile'>
                  <data:post.author/>
                </a>
              </span>
            <b:else/>
              <span class='fn'><data:post.author/></span>
            </b:if>
        </b:if>
      </span> | <span class='post-labels'>
        <b:if cond='data:post.labels'>
          <data:postLabelsLabel/>
          <b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
          </b:loop>
        </b:if>
      </span> <span class='post-icons'>
        <!-- email post links -->
        <b:if cond='data:post.emailPostUrl'>
          <span class='item-action'>
          <a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
              <img alt='' class='icon-action' height='13' src='http://img1.blogblog.com/img/icon18_email.gif' width='18'/>
          </a>
          </span>
        </b:if>

        <!-- quickedit pencil -->
        <b:include data='post' name='postQuickEdit'/>
      </span>

Visualize se está tudo certo e salve. Para personalizar os links é só colar o código a seguir acima de ]]></b:skin> :

Código

.post-header { text-align: center; /*Alinha no centro*/
font-size: 11px; /*Tamanho da fonte*/
border-bottom: 1px dashed #000; /*Borda inferior*/}
.post-header a { color: #000 !important; /*Cor dos links*/}
.post-header a:hover {color: #fff !important; /*Cor dos links ao passar o mouse*/}

Espero que todos consigam fazer :) Vou começar a responder os comentários que eu não puder retribuir aqui no blog mesmo então fique atento para ver a resposta para o seu.

Apresentação + Nome dos Comentários

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!

Tutorial feito por mim: Too Kawaii e Cherry Bomb.

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

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 como na minha:



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.
Para quem não sabe:Máscaras são imagens co fundos pretos e também branco.