Fazendo seu teplate PART.3

                                 PART.3

1 - Navegação do blog com efeito degradê

do blog com efeito degradê. Pra quem não sabe o que é navegação, é isso aqui:

                                           

Então, é bem simples, só prestar bastante atenção. Vamos ao tutorial:

Vá no HTML do seu blog e procure por #blog-pager { e cole o código abaixo encima da 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;

}

 Agora é só você editar como quiser as cores, está tudo explicadinho no código.

2-Afiliados com efeito giratório

Agora vou ensinar vocês a colocarem o efeito giratório nos seus afiliados. Como assim, efeito giratório? Assim:

                                             

                                             

Legal né? Deixa seus afiliados super fofos. Clique em Mais Informações para ver o tutorial:

1°. Vá no HTML do seu blog

2°. Dê um Ctrl + F e procure por ]]></b:skin> 

3°. Acima dessa TAG cole o código seguinte:

.elite{ -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; width:auto; -webkit-transition-duration: 1.20s;

box-shadow: 2px 1px 2px #909090;

}

.elite:hover{-webkit-transform: rotate(360deg);} 

4°. Vá em layout e adicione um gadget HTML/JavaScript com o seguinte código:

<a href="Link do Blog" title="Título do Blog"><img src="Link da Imagem" class="elite"/></a>

<a href="Link do Blog" title="Título do Blog"><img src="Link da Imagem" class="elite"/></a>

<a href="Link do Blog" title="Título do Blog"><img src="Link da Imagem" class="elite"/></a>

<a href="Link do Blog" title="Título do Blog"><img src="Link da Imagem" class="elite"/></a>

<a href="Link do Blog" title="Título do Blog"><img src="Link da Imagem" class="elite"/></a>

<a href="Link do Blog" title="Título do Blog"><img src="Link da Imagem" class="elite"/></a>

Prontinho, fácil e prático!

3-Personalização de uma área dos comentários Dar

VA Nenhuma blogue Seu> Em Modelo> Prosseguir> De hum Ctrl + F e Procure por / * Comentários. Abaixo Disso Vai Estar Escrito Mais UO Menos isso:

/ * Comments ----------------------------------------------- * / # comments a {   color: $ (post.title.text.color); }  ... comentários comentários de conteúdo icon.blog-autor {   background-repeat: no-repeat;   background-image:  .. Comentários de conteúdo loadmore a {   border-top: 1px solid $ (post.title.text.color);   border-bottom: 1px solid $ (post.title.text.color); }  comentários comment-fio... inline-fio {   background: $ (post.background.color); }  .. comentários continuar {   border-top: 2px sólida $ (post.title.text.color); }

Abaixo Disso, cole ESSE Código:

/ ** =============================================== =======================

ÁREA GERAL DOS COMENTÁRIOS============================================== ========================== ** / @ font-face {font-family: "Fugaz One '; font-style: normal; fonte -weight: 400; src: local ("Fugaz One '), local (' FugazOne-Regular),format ('woff')}  {comentários. largura: 99% importante; / * Tamanho DA ÁREA DOS COMENTÁRIOS - se passar da Coluna diminua * /! margin: 0 auto; font-style: importante normal; font-size: 12px ! importante; / * Tamanho do Texto - se Ficar Pequeno, aumente OS pixels * / font-family: Verdana importante; / * FONTE DO TEXTO - se preferir Troque * /! background: # fff / * IMAGEN DO FUNDO * / }   / ** ======================================= ================================ TÍTULO COMENTÁRIOS DOS (1 comentario, 2 comentarios ...)===== ================================================== ================= ** /  . comentários h4 { width: 98%;padding: 7px; margin-bottom: 10px; background: # FF69B4 / * COR DO FUNDO - se preferir Troque * / color: # FFFFFF ; / * COR DO TEXTO - se preferir Troque * / font-family: "Fugaz One 'importante ;/ * FONT-FAMILY - se preferir Troque * /! font-size: 20px; / * Tamanho do Texto - se preferir Troque * / text-shadow: 0 1px # fff; box-shadow: 0 2px 3px # 000000 / * EFEITO SOMBRA * / } / ** ============ ================================================== ==== BLOCO DOS COMENTÁRIOS (Engloba: BOTOES, avatar, dados, icone ...)============================= ======================================= ** /comentários comment-bloco {.. posição : static importante; / * Mantem O AVATAR NA FRENTE DO BLOCO - NAO MUDE * /! background: # FF1493 importante; / * COR DO FUNDO * /! padding: 0.5em 1em; ! border-radius: 5px importante, box-shadow : 0 1px inset 4px # aaa importante / * EFEITO FUNDO REBAIXADO * /! }Comentários comentários de teor comentário {...estofamento: 20px 10px importante; margin-bottom: 15px importante } / * Estilos de para o nomo fazer autor não Comentário * / ... comentários comentários de conteúdo do usuário a { font-style: normal; margem: 0; margin-left: 10px; color: # 00FFFF ! importante;


  

   
text-shadow: 0 1px # fff; font-family: "Fugaz One ';background: none; padding-left: 0 }  / * Estilo da dados * / ... comentários comentários de conteúdo datetime a {background: none; flutuador : right; font-size: 9px;color: # fff; }  / * Estilo fazer avatar * / avatar-image-container {. min-width: 60px; / * determinação hum minimo de LARGURA * / min-height: 60px; / * determinação hum minimo de Altura * / margem: 5PX # F7B sólidos; / * borda * / border-radius: 35px/10px / * Arredondamento * / padding: 0 importantes;! box-shadow: 0 0 3px # ccc; / * sombra * / margin-left: 6px importante;! margin-top: 1px-importante; background: # fff; overflow: hidden / * cortar parágrafo evitar serrilhado na Imagem * / }  . avatar-image-recipiente img { opacidade : 1.0 / * opacidade * / margin: 0; display: block; max-height: 60px; min-height: 60px; max-width: 60px; min-width: 60px; padding: 0 importante; border-radius: 35px/10px / * Arredondamento * / overflow: hidden; margem: 0 importante; overflow: hidden / * cortar parágrafo evitar serrilhado na Imagem * / }    / ** ============== ================================================== == TEXTO DO COMENTARIO============================================= ======================= ** /  
. comentários blockquote { background:! transparente importante; fronteira: 0 importante; font-style: normal; importantes! font-size: 12px importante; font-family: arial importante, text-shadow: 0 0 importante; padding-left: 20px importante; color: # 777 }  / ** ========= ================================================== ======= BOTOES - RESPONDE, EXCLUIR====================================== ============================== ** /  
/ * botao responder que SEGUNDO do Nível * /comentários continuam a {.. float: direito; padding:! 2px 4px importante; height: 23px; line-height: 23px importante; margin-top: 45px-importante;! text-shadow: 0 0 nenhum importante! }  / * botao responder fazer do Nível Primeiro, MAIS Estilos Para o botao do Segundo do Nível * / Comment-actions um, os comentários continuam a {..... font-size: 11px importante; color: # FFD700 ! importante;
padding: 3px 6px; margem: 0 importantes;! line-height: 30px; margin: 5px; margin-left: 10px; font-family: trebuchet; text-shadow: 0 1px # fff importante;!border-radius: .5 em , box-shadow: 0 1px 2px rgba (0,0,0, 0,2); background: # ffe; background:-webkit-gradient (linear, superior esquerdo, inferior esquerdo, de (# ffe), para (# ff1 )) importante;! background:-moz-linear de gradiente! (top, # ffe, # ff1) importante; }  / * botao pairar * / ..... Comment-ações a: hover, comentários comentários com conteúdo . usuário a: hover { text-decoration: ninguém importante; padding: 6px }  / * botao excluir * / Comentários comentário ITEM-controlar a {... color: # fff importante;!background: # 48D1CC ;
background:-webkit-gradient (linear, superior esquerdo, inferior esquerdo, de (# f7a), para (# F9E)) importante;!background:-moz-linear de gradiente! (top, # f7a, # F9E) importante; }  / * Estilos parágrafos Bloco de respostas * / . comentários comment-thread.inline-thread. {background-color: transparent importantes! } Comentários comentários de conteúdo comentar-respostas {... margin-top: 1em; margin-left: 56px! importantes }  .. comentários continuar { border-top: 0 importantes }  . comentários discussão-toggle, icon.blog-autor {display:..! nenhum important}  / ** ========== ================================================== ====== BÔNUS - Estilos parágrafo Formatação do Texto DOS comentários =================================== ================================= ** /  
. comentários comentários de conteúdo a {background: #. taxa esquerda; color: # DF6699; padding-left: 400}: 15px; padding-right: 3px;:; fronteira font-weight 1px # fff frustradas . comentários de conteúdo los {background comentários: # taxa; fonte: 12px normal ". roteiro Segoe '; color: # ff1490} comentários comentários com conteúdo forte {background:.. # fff; font: 12px normais "consolas '; color: # 000; display: block; border: 1px # eee} frustradas . comentários comentários. b-content {font-weight: 800; color: # DF6699; text-shadow: 0 1px # ccc}   / ** ======================= =========================================== Fim [por Gabriela / /

Personalize Como Você. Quiser UO deixe ASSIM e salve. Veja o Resultado e prontinho, SEUS comentários Dar estao Mais fofos! 

Se ajudo comente Pff

Bom então vai acabando a Part.3   :/ :/