Data simples personalizada

Olá! Gente hoje eu trouxe um modelo de data bem legal, simples e fácil! Espero que gostem. Vamos ver como é?

Editando o título do cabeçalho da forma mais fácil

Oiee pessoas. Hoje eu trouxe um tuto que eu procurei por muito tempo, e descobri como fazer. Dessa forma você edita o cabeçalho mais rápido, sem precisar entrar no photoshop e fazer um. Deste jeito mexemos com HTML, e olha, o cabeçalho fica bem legal. Vamos ver?

Gadget de Posts Populares onde as miniaturas das imagens giram ao passar o mouse

Oieee. Hoje eu trouxe um tutorial bem fácil para personalizar seu gadget de postagens populares! Quando você passa o mouse da imagem, ela mexe e aparece uma tool-tip dizendo o título do post popular. Entendeu? Fica bem legal, vamos ver como faz?

Como retirar transparência da sidebar que contém no modelo travel

Olá meus queridos muffins (muffins hahha), pessoal eu terminei um layout free que eu estava fazendo (terminei a bastante tempo), mas só vou disponibiliza-lo para download quando chegarmos a meta de 30 seguidores, e adivinhem, estamos quase lá! Yupiii!

Vocês percebem que eu não estou postando muito, nem escrevendo muito. Estou sem criatividade! Meu insight está falhando. E eu estou totalmente sem criatividade! Ah! Sabe oque eu vi ontem no cinema ( não foi Annabelle! Odeio filme de terror.)? Festa no céu! Gente é muito engraçado! recomendo muito! Bom chega de blá, blá, blá. Vamos ao post?

Muitas pessoas que são novatas no mundo do HTML procuram por esse tutorial quando vão fazer layout. Esse tutorial é para quem usa base o Modelo Travel, sabe aquele fundo meio transparente que fica na sidebar? Vamos aprender á tirá-lo.

Recomendo: Recomendo que você só retire essa transparência quando seu layout já tiver terminado, okay? Mas você decide.

Efeito Gira, bu! - Para afiliados

Nome cafona, mas tudo bem.

Olá pessoal! Eu achei um site muito legal em que você pode fazer os efeitos, e um outro que vocês podem visualizar para ver se tá tudo certo, se vocês pedirem eu posto aqui o nome dos sites.

EU criei um efeito chamado Gira, bu!, era o nome que tinha em minha mente na hora, mas oque importa não é o nome mas sim o efeito. Vamos ver como é?

PREVIEW

Gostou? Vamos aprender a fazer?

Procure por ]]></b:skin>, achou? Cole esse código ACIMA de ]]></b:skin>

.girabu {transition:All 1.5859s ease;-webkit-transition:All 1.5859s ease;-moz-transition:All 1.5859s ease;-o-transition:All 1.5859s ease;transform: rotate(4deg) scale(1) skew(1deg) translate(10px);-webkit-transform: rotate(4deg) scale(1) skew(1deg) translate(10px);-moz-transform: rotate(4deg) scale(1) skew(1deg) translate(10px);-o-transform: rotate(4deg) scale(1) skew(1deg) translate(10px);-ms-transform: rotate(4deg) scale(1) skew(1deg) translate(10px);}.girabu:hover{transform: rotate(360deg) scale(1.284) skew(1deg) translate(0px);-webkit-transform: rotate(360deg) scale(1.284) skew(1deg) translate(0px);-moz-transform: rotate(360deg) scale(1.284) skew(1deg) translate(0px);-o-transform: rotate(360deg) scale(1.284) skew(1deg) translate(0px);-ms-transform: rotate(360deg) scale(1.284) skew(1deg) translate(0px);}

Agora adicione um gadget de HTML/JS e cole esse código:

 <a href="LINK" title="NOME"><img src="URL DA IMAGEM" class="girabu" /></a>

Salve. Pronto. Simples não? Qualquer dúvida é só comentar, ah! Comente também oque voc~e achou do efeito! Abraços!

-P4nda

Ausência ✖ Fanfictions

Olá pessoal! Hoje eu vou explicar o motivo da minha ausência. Vamos ler?

Bom o motivo é que eu estou amando escrever minhas fanfictions,, e por isso eu acabei me afastando do blog. Não se preocupe que eu estou sempre aqui no blogger, vendo a postagens dos afiliados, só não estou postando muito.

Olhem só, eu gostaria muito que vocês lessem a minha fanfiction que eu estou escrevendo no site Nyah!. Eu escrevi duas fanfictions  (ainda não terminadas), e gostaria que vocês, pelo menos lessem a sinopse. Visualize meu perfil aqui ✖

A primeira fanfic é A Caneta mágica (✖) que é bem bacana. A segunda fanfic é Ops... Meu cachorro virou gente! (✖) que também é legal. Espero que gostem.

E é só.

Abraços

-P4nda

Follow e Dashboard no blog

Olá pessoal, hoje começou a recuperação na minha escola, e adivinha, eu não fiquei em nenhuma! Na verdade eu nunca fiquei de recuperação. E então, vamos ao tutorial?

Vocês sabem aquele negocinho que fica em cima escrito "Follow" e "Dashboard" ? Bom eu vou ensinar a colocar isso. Créditos ao blog Oh! Editions

Vá em um gadget de HTML/ JS e adicione isso:

<a style="display:scroll;position:fixed;top:50px;left:75px;" href="http://www.blogger.com/home" title="Dashboard"><img src="http://assets.tumblr.com/images/iframe_dashboard_alpha.png?468" /></a><a style="display:scroll;position:fixed;top:50px;left:15px;" href="http://www.blogger.com/follow-blog.g?blogID=ID DO BLOG" title="Follow Blog"><img src="http://assets.tumblr.com/images/iframe_follow_alpha.png?468" /></a>

Bom, aonde estiver ID DO BLOG, você bota o ID do seu blog. O ID são aqueles números que ficam na URL da postagem/layout/modelo.

Dúvidas? Comente.
Abraços

Novo Lay + Texto deslizando no gadget

Buuuuuuuu! Olá pessoal! Eu acho que vocês perceberam que mudamos de layout (claro que perceberam!). Eu fiz esse layout agora pouco, fiz no estilo halloween, já que amanhã começa o mês de outubro. Ficou bem simples, sei que sou muito suspeita para dizer, mas achei que ficou lindo! Bom oque interessa vocês é tuto, né? Então vamos lá!

Sabe aquele texto que fica tipo deslizando no gadget? É esse que vou ensinar a fazer. Eu aprendi lá no Sonhando Acordada (Visitem!), vocês vão ver que é bem simples.

Modelo>> Adicionar um Gadget >> HTML / JS

No gadget cole isso:

<marquee>Aqui você escreve o texto</marquee>

Só. Bem simples. Thau thau e vá com Deus.

Colocando imagens ao lado de author profile, comentários, hora e marcador.

Um tutorial incomum...

Olá pessoal, eu estou pensando em fazer um Big Tutorial com o título {Quase} Tudo para fazer um ótimo layout! Oque acham? Seria bem legal né....  Hey! Estamos com 160 comentários! Pessoal nos ajudem a conseguir 200! Quando atingimos a meta de 200 comentários e 30 seguidores e vou liberar dois layouts free!! Falando em layout, eu estou fazendo um agora, um bem especial....

Hoje eu trouxe um tutorial incomum.... Eu procurava e procurava esse tuto mas não achava! E quando achei fiquei bem feliz. E hoje vou ensinar a vocês como botar imagens ao lado do author profile, hora, comentário e marcador. Vai ficar desse jeito:

Tá vendo essas imagens ao lado? Pois é isso. Vamos aprender como colocar? Heyeeheyehey!!!

Como colocar negrito , itálico e link nos comentários

Oi pessoal, boa noite á todos! Alguém aí já viu o trailer  de A Esperança parte 1? É muito legal! Eu vi ontem no instagram! Bom vamos ao tutorial? É bem simples e fácil! Vamos lá?

Para botar link nos comentários:

<a href="http://www.LINK.blogspot.com/">Nome do link</a>

Pra colocar o Negrito:

<b>Seu texto aqui</b>

Pra colocar o Itálico:

<i>Seu texto aqui</i>

-P4nda

Negrito Itálico Tachado Sublinhado personalizados com efeito fade!

Olá fofões! Hoje eu trouxe uma coisa bem fácil de personalizar que é o NEGRITO ITÁLICO TACHADO & SUBLINHADO com efeito fade (é um efeito bem suave na hora do hover). É bem simples.

Vá no HTML (Modelo>> Editar HTML) e procure por:

Está logo no início. Quando achar click nos três pontinhos no meio. Irá abrir muitos códigos. Procure pela tag ]]></b:skin> , cole este código ACIMA da tag:

/*----PERSONALIZAÇÃO DO N,U,I, E S----------*/
b, bold {color: #CORDONEGRITO; -webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-webkit-transition: color 1s ease-out;
-moz-transition: color 1s ease-out;
transition: color 1s ease-out;}
b:hover{color: #CORDONEGRITOHOVER; -webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-webkit-transition: color 1s ease-out;
-moz-transition: color 1s ease-out;
transition: color 1s ease-out;}
i, italic {color: #CORDOITÁLICO;-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-khtml-transition: 1s;
-webkit-transition: color 1s ease-out;
-moz-transition: color 1s ease-out;
transition: color 1s ease-out;
}
i:hover {color:#CORDOITÁLICOHOVER; -webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-khtml-transition: 1s;
-webkit-transition: color 1s ease-out;
-moz-transition: color 1s ease-out;
transition: color 1s ease-out;}
u, underline {color: #CORDOSUBLINHADO; text-decoration: none; border-bottom: 1px dotted #999;  -webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-khtml-transition: 1s;
-webkit-transition: color 1s ease-out;
-moz-transition: color 1s ease-out;
transition: color 1s ease-out;}
u:hover {color: #CORDOSUBLINHADOHOVER; text-decoration: none; border-bottom: 1px dotted #f5bf61; -webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-khtml-transition: 1s;
-webkit-transition: color 1s ease-out;
-moz-transition: color 1s ease-out;
transition: color 1s ease-out;}
s, strike {color: #CORDOTACHADO; -webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-khtml-transition: 1s;
-webkit-transition: color 1s ease-out;
-moz-transition: color 1s ease-out;
transition: color 1s ease-out;}
s, strike:hover {color: #CORDOTACHADOHOVER; -webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-khtml-transition: 1s;
-webkit-transition: color 1s ease-out;
-moz-transition: color 1s ease-out;
transition: color 1s ease-out; }

E aí é só personalizar as cores! Abraços! Espero ter ajudado!

-P4nda

Modelo para Sidebar (1) - Feito por Creative Things (Sarah)

Olá povinho! Não tenho Introdução :( . Então vamos direto ao assunto! Eu criei um modelo para sidebar bem simples, é um modelo legal (na minha opinião), bom o modelo está logo abaixo:

Bom, esse é o modelo. Vamos ver como aplica-lo? 

Efeito Sépia None by Creative Things (Sarah)

Oi cherrys! Gente eu já estou terminando o layout do blog das Fanifics, deu um problema quando eu estava fazendo, e aí eu tive que criar outro blog e refazer tudo (isso tudo aconteceu hoje). Bom mas enquanto eu estava vendo efeitos para esse layout eu acabei fazendo um! Hoje eu trouxe um efeito que eu fiz. Pode ter efeitos parecidos, mas eu não tive a intenção de copiar nenhum, okay? Se pegarem, creditem o meu blog! É bem bacana sabe. Vamos ver como é?

E-a-i? Gostaram? Vamos saber como aplicar nas imagens? HEHE!!
Editar HTML >> Procure por ]]></b:skin>
Quando achar, cole esse código ACIMA dele:

img {
-webkit-filter: sepia(100%);
transition:All 0.4s ease;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
}
img:hover {
-webkit-filter: sepia(0%);
transition:All 1s ease;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;}

Prontinho fofuras!

-P4nda

Tutorial: Barrinhas no topo + Barrinhas

Oi pessoal!

Vim dá uma passada rápida aqui para fazer um tutorial de como botar Cortininhas/Barrinhas no blog! Vamos ver? Chega mais!

Acesse seu HTML e procure por </body>, está no final do HTML, acima dele cole o código abaixo: 

<div style=" background-image: url('URL DA IMAGEM'); top: 0px; left: 0px; width: 100%; height: 0px; z-index: 100; position: fixed;"></div>

URL DA IMAGEM: Bote o o URL da sua barrinha!

Barrinhas:

             

     

Créditos: Bunny Crazy (Tutorial) & Having Cherry (barrinhas)

Tutorial - Efeito na imagem do post fixa: Bordas arredondadas

Oi leitores!

Hoje tem tutorial! Bordas arredondadas nas imagens do post (fixo). Quando passar o mouse a borda vai arredondar!!! Compreende? Créditos: Teens Forever
Vamos ver? Okay.

Vá em Modelo>> Editar HTML >> Click em F3 (no teclado) e pesquise por skin

Quando achar, vai estar assim:

Click nesses três pontinhos (...), irá abrir vários códigos, procure por ]]></b:skin>

Cole o código ACIMA da tag! Código:

.main img:hover {
opacity: 0.9;
-moz-border-radius: 03px;
-webkit-border-radius: 20px 20px 20px 20px; */ Bordas arredondadas hover */
}

Pronto!!! Agora Salve!

Dúvida? Comente!

-P4nda 

Tutorial: Efeitos diferentes no gadget de seguidores!

(hahah)

Oi leitores,

Aí pessoal! Vão bem?? Tomara que sim! Hoje trouxe um tutorial bem bacana de Efeito no Gadgets de seguidores! Créditos: Garota no mundo HTML e o blog Chocolate Crunchy 

Vamos ver? Chega mais!

Vá em Modelo>> Editar HTML >> Click em F3 (no teclado) e pesquise por skin

Quando achar, vai estar assim:

Click nesses três pontinhos (...), irá abrir vários códigos, procure por ]]></b:skin>

Escolha um efeito e cole  o código ACIMA da tag! Códigos:

Efeito Blur:

/* Efeito blur nos seguidores by gnmh */
#Followers1-wrapper {filter: blur(2px); -webkit-filter: blur(2px); -moz-filter: blur(2px);-webkit-transition: all 2s ease; -moz-transition: all 2s ease; -o-transition: all 2s ease; transition: all 2s ease;-webkit-transition-duration: .90s;transition-duration: .90s;margin-bottom: 2px;}#Followers1-wrapper:hover {text-decoration: none !important;filter: none; -webkit-filter: blur(0px);-moz-filter: blur(0px);filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='0');-webkit-transition: all 2s ease; -moz-transition: all 2s ease; -o-transition: all 2s ease; transition: all 2s ease;-webkit-transition-duration: .90s;transition-duration: .90s;margin-bottom: 2px;}/* Fim do efeito */

Efeito Preto e Branco:

 /* Efeito preto e branco nos seguidores by gnmh*/
#Followers1-wrapper {
-webkit-filter: grayscale(1);-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);filter: url(desaturate.svg#greyscale);
filter: gray; filter: grayscale(100%);
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease; -o-transition: all 2s ease;
transition: all 2s ease;
-webkit-transition-duration: .90s;
transition-duration: .90s;
margin-bottom: 2px;
}
#Followers1-wrapper:hover {
text-decoration: none !important;
-webkit-filter: grayscale(0);-webkit-filter: grayscale(0);
-moz-filter: grayscale(0);
filter: none; filter: grayscale(0);
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease; -o-transition: all 2s ease;
transition: all 2s ease; opacity: 1;
-webkit-transition-duration: .90s;
transition-duration: .90s;
margin-bottom: 2px;
}
/* Fim do efeito */

Efeito Sépia:

/* Efeito sépia nos seguidores by gnmh*/
#Followers1-wrapper {
filter: sepia(100%);-webkit-filter: sepia(100%);
-moz-filter: sepia(100%);-webkit-filter(1);
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease; -o-transition: all 2s ease;
transition: all 2s ease;
-webkit-transition-duration: .90s;
transition-duration: .90s;
margin-bottom: 2px;
}
#Followers1-wrapper:hover {
text-decoration: none !important;
filter: sepia(0%);-webkit-filter: sepia(0%);
-moz-filter: sepia(0%);-webkit-filter(0);
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease; -o-transition: all 2s ease;
transition: all 2s ease; opacity: 1;
-webkit-transition-duration: .90s;
transition-duration: .90s;
margin-bottom: 2px;
}
/* Fim do efeito */

Efeito Saturação:

/* Efeito saturação nos seguidores by gnmh*/
#Followers1-wrapper {
-webkit-filter: blur(0px);opacity:1;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease; -o-transition: all 2s ease;
transition: all 2s ease;
-webkit-transition-duration: .90s;
transition-duration: .90s;
margin-bottom: 2px;
}
#Followers1-wrapper:hover {
text-decoration: none !important;
-webkit-filter: saturate(2);
-moz-transition: all 2s ease; -o-transition: all 2s ease;
transition: all 2s ease; opacity: 1;
-webkit-transition-duration: .90s;
transition-duration: .90s;
margin-bottom: 2px;
}
/* Fim do efeito */

Efeito Colorido:

/* Efeito sépia colorido nos seguidores by gnmh*/
#Followers1-wrapper {
-webkit-filter: sepia(0%);
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease; -o-transition: all 2s ease;
transition: all 2s ease;
-webkit-transition-duration: .90s;
transition-duration: .90s;
margin-bottom: 2px;
}
#Followers1-wrapper:hover {
text-decoration: none !important;
filter: sepia(20%);-webkit-filter: sepia(100%);
-moz-filter: sepia(20%);-webkit-filter(1);
-moz-transition: all 2s ease; -o-transition: all 2s ease;
transition: all 2s ease; opacity: 1;
-webkit-transition-duration: .90s;
transition-duration: .90s;
margin-bottom: 2px;
}
/* Fim do efeito */

Efeito Contraste:

/* Efeito sépia colorido nos seguidores by gnmh*/
#Followers1-wrapper {
-webkit-filter: sepia(0%);
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease; -o-transition: all 2s ease;
transition: all 2s ease;
-webkit-transition-duration: .90s;
transition-duration: .90s;
margin-bottom: 2px;
}
#Followers1-wrapper:hover {
text-decoration: none !important;
filter: sepia(20%);-webkit-filter: sepia(100%);
-moz-filter: sepia(20%);-webkit-filter(1);
-moz-transition: all 2s ease; -o-transition: all 2s ease;
transition: all 2s ease; opacity: 1;
-webkit-transition-duration: .90s;
transition-duration: .90s;
margin-bottom: 2px;
}
/* Fim do efeito */

Efeito Sépia Colorido:

/* Efeito sépia colorido nos seguidores by gnmh*/
#Followers1-wrapper {
-webkit-filter: sepia(0%);
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease; -o-transition: all 2s ease;
transition: all 2s ease;
-webkit-transition-duration: .90s;
transition-duration: .90s;
margin-bottom: 2px;
}
#Followers1-wrapper:hover {
text-decoration: none !important;
filter: sepia(20%);-webkit-filter: sepia(100%);
-moz-filter: sepia(20%);-webkit-filter(1);
-moz-transition: all 2s ease; -o-transition: all 2s ease;
transition: all 2s ease; opacity: 1;
-webkit-transition-duration: .90s;
transition-duration: .90s;
margin-bottom: 2px;
}
/* Fim do efeito */

Fim! Dúvidas? Comente!
-P4nda

Efeito para afiliados: Tilts!

Oi leitores!

Hoje eu trouxe um efeito bem bacana que eu fiz!!! Sim! Eu fiz!

Vamos ver?

Preview

Legal né? Eu acho que pro meu primeiro efeito ficou até legal. O nome é tilts, que significa inclina, em inglês. Vamos ver como faz o efeito! *O efeito é tanto para postagens como para gadgets, mas para postagem você terá que botar o código toda hora, e dá mais trabalho.

Vá em Modelo>> Editar HTML >> Logo no início terá uma tag assim:

Click nesses 3 pontinhos  (...), irá abrir muitos códigos, desça até achar:

]]</b:skin>

Cole o código abaixo ACIMA da tag:

.efeito-tilts-sarah-creativethings {

padding: 2px;

border: 1px solid #COR DA BORDA;

-webkit-transition-duration: 2s

}

.efeito-tilts-sarah-creativethings:hover {

-webkit-transform: rotate(10deg) rotate(21deg);

-webkit-transition-duration: 2.5s

}

Agora, salve, vá em Layout>> Adicionar um Gadget>> HTML/JS

Cole o código abaixo dentro do gadget:

<a href="LINK" title="NOME"><img class="efeito-tilts-sarah-creativethings" src="URL DA IMAGEM" /></a>

Salve!(depois de modificar o LINK o NOME e o URL DA IMAGEM)

Gostou do efeito? Comente! Se você usou o efeito, ou vai repostar o tutorial, comente para nos manter informado :)

Tutorial: Efeito bate-bate para afiliados

Oi leitores!

Como vão? Tomara que bem, bom eu usei o layout que eu fiz no meu blog de teste! E tipo... é legal! Eu gostei do meu lay! Espero que vocês tenham gostado! Bom, sem blá blá blás, hoje eu trouxe um tutorial de efeito para afiliados, que eu peguei no Kawaii Things, créditos a esse blog. Bom vamos ver? A Preview está aqui -> ✖✖✖

Vamos ver o Tutorial?

1. Click em Modelo >> Editar Html

2. Logo no início terá uma tag assim:

3. Click nesses três pontinhos. Vai abrir milhares de códigos, desça até achar:

]]></b:skin>

4. Quando achar essa tag, cole ACIMA dela esse código abaixo:

@-webkit-keyframes YO {
1% {-webkit-transform: scale(1);}
50% {-webkit-transform: rotate(360deg);}
80% {-webkit-transform:translatey(-10px);}
100% {-webkit-transform: scale(1.8);}
}
@-moz-keyframes YO {
1% {-webkit-transform: scale(1);}
50% {-webkit-transform: rotate(360deg);}
80% {-webkit-transform:translatey(-10px);}
100% {-webkit-transform: scale(1.8);}
}
@-o-keyframes YO {
1% {-webkit-transform: scale(1);}
50% {-webkit-transform: rotate(360deg);}
80% {-webkit-transform:translatey(-10px);}
100% {-webkit-transform: scale(1.8);}
}
.bate-bate{-webkit-transition: .7s; width:40px;
height:40px;border-radius: 5px;}
.bate-bate:hover {-webkit-animation: YO .7s alternate infinite linear;}
.fade:hover img {opacity:0.2;-webkit-transition: .7s;}
.fade img:hover{opacity:1.0;-webkit-transition: .7s;-webkit-filter:contrast(120%);
-moz-filter:contrast(120%);
-o-filter:contrast(120%);}

5. Salve. Agora vá para a aba Layout >> Adicionar um gadget >> HTML/JS
6. No Gadget que você acabou de abrir cole o código abaixo:

<div class="fade"><center><a href="URL" title="Nome"><img class="bate-bate" src="link da imagem" /></a><a href="URL" title="Nome"><img class="bate-bate" src="link da imagem" /></a><a href="URL" title="Nome"><img class="bate-bate" src="link da imagem" /></a><a href="URL" title="Nome"><img class="bate-bate" src="link da imagem" /></a><a href="URL" title="Nome"><img class="bate-bate" src="link da imagem" /></a><a href="URL" title="Nome"><img class="bate-bate" src="link da imagem" /></a></center></div>

7.  URL : Link do blog
     Nome: Nome do afiliado
     Link da imagem: URL da imagem

8. Salve. Gostou do efeito? Se sim ou não, comente, queremos saber sua opnião. Qual quer dúvida ou erro comente *>*



-P4nda

Colocando chat/cbox no blog (escrito)

Oi pessoal,

Bom, eu não tenho ask, então se vocês quiserem fazer pedidos, façam lá no nosso chat, ou na fota onde está escrito 'Pedidos'. Bom é o seguinte, a Lohanie, do blog Mundo da Lo, me fez a/o seguinte pergunta/pedido:

Bom Lohaine, eu vou fazer o tutorial! Eu já tinha feito um tutorial de como colocar chat, mas foi em vídeo, e ficou uma porcaria! Bom vou fazer um tuto escrito agora, quer dizer um tuto Control + C Control+ V, que é o chamado copia e cola! Eu peguei do Cantinho do Photoscape, devidos créditos, porque eu to com  uma doença chamada priguiçite aguda de escrever (quer dizer,digitar.).

 Criando o chat

01. Entre no site cbox.ws/

02. Clique em Sing Up (está no menu) e preencha:

03. Depois de ter criado sua conta clicando no botão Create my Cbox, agora vá na barra que está na parte de cima do site e coloque seu login name (o mesmo que você preencheu em em cbox name, como mostra no print acima) e entre.

Personalizando o chat
Assim que você entrar vai aparecer uma nova barra com as seguintes opções:

Clique em Look & Feel e em seguida clique em Colours & fonts agora é só você colocar as cores do jeito que você quer

Como entender?

Post Frame

Main BG - é a cor do primeiro fundo (roxo,azul.. escolha a cor que quiser contando que a cor seja mais forte)
Main Text - cor do texto (vai ficar em cima do main BG)
Main date -  cor da data (vai ficar em cima do main BG)

Alt. BG - Cor do segundo fundo (escolha uma cor neutra, como branco ou cinza claro)
Alt. text: cor do texto (vai ficar em cima do Alt. BG)
Alt. date: cor da data (vai ficar em cima do Alt. BG)

Form frame

(onde as pessoas vão colocar o nome e a mensagem)

Field BGs - Cor dos campos onde vão ser preenchidos

Button BG -  Cor do botão go.

Form BG - cor que fica em volta dos campos

Field text - cor do texto

Button text - cor do texto do botão go.

Field borders - cor da borda do campo de mensagem.

Scrollbar (IE Only)

somente para o navegador explorer

As configurações são as mesmas.

Depois de personalizar seu chat,clique em Apply.

Adquirindo o código HTML
Agora clique em Publish! e vai abrir uma página com algumas instruções e siga:

Depois de ter ajustado tudo, copie todo o código que está na caixa abaixo.

Colocando o chat no blog

01. Abra seu painel do blog e vá em Layout, clique em Adicionar um Gadget e procure por HTML/Javascript e cole o código que você copiou em Conteúdo, e coloque um titulo se quiser em seguida clique em Salvar.

Depois coloque o chat onde deseja arrastando-o, recomendo que deixe ele no meio ou no final da sidebar (barra lateral). Em seguida clique em Salvar Organização.

Duvidas
E se eu mudar o meu Layout, como eu vou mudar a cor do meu chat?

O processo é o mesmo, assim que você mudar a cor o próprio site vai te oferecer um novo código, ou seja, não precisa de você criar uma conta só para mudar a cor do chat.

Tem como apagar mensagens indesejadas no chat?

Sim, no menu você encontra um botão chamado Messages e clique em Messages, vá você tem acesso a todas mensagens onde você pode apagar

Se você tem mais duvidas ou não conseguiu criar seu chat deixe seu comentário e tentarei fazer o possível para ajudar vocês.

Espero que tenha ajudado muita gente. Bjss.
-P4nda