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.

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: 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

Tutorial: Como botar o titulo da postagem em Negrito

Oi leitores,

Gente eu trouxe um tuto muito útil de como botar o titulo em negrito! Muito simples...Ah! E também vou liberar os materiais do cabeçalho (u-u)!

Você só precisa colocar antes da palavra isso: <b>

E depois da palavra isso: </b>

Entendeu? Não? Olha o PRINT

-P4nda

Tutorial: Slide Open Heart para redes sociais

Oi leitores,

Gente hoje trouxe um tutorial (meu segundo só hoje) de um Menu chamado Slide Open Heart para redes sociais, quando você passa o mouse nele ele abre com um efeito deslizante (entendeu o nome!?). Bom vamos começar.

Ex:

1. Primeiro procure pela tag </head> , assim que encontra-la abaixo dela cole isso:

<!-- Start Open Heart Bookmarking Gadget From http://www.helplogger.blogspot.com/ -->
<script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'/>
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
<script type='text/javascript'>stLight.options({publisher: &quot;ur-98d377f-bdd3-9ad1-fbe5-2a678f0a60ee&quot;, onhover:false}); </script>
<link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/>
<!-- End Open Heart Bookmarking Gadget From http://www.helplogger.blogspot.com/ -->

Por favor, não remover os créditos do criador e site original de dentro do código.

2. Agora procure por </body> e abaixo dele cole:

 <!-- Start Open Heart Bookmarking Gadget From http://www.helplogger.blogspot.com/ -->
<div style='position: fixed; bottom: 2%; left: 2%;'>
<div class='shareEgg' id='shareThisShareHeart'/>
</div>
<script type='text/javascript'>stlib.shareEgg.createEgg(&#39;shareThisShareHeart&#39;, [&#39;facebook&#39;,&#39;twitter&#39;,&#39;pinterest&#39;,&#39;linkedin&#39;,&#39;stumbleupon&#39;,&#39;email&#39;,&#39;sharethis&#39;], {title:&#39; <data:blog.pageTitle/>&#39;,url:&#39;<data:blog.url/>&#39;,theme:&#39;shareheart&#39;});</script><a href="http://www.helplogger.blogspot.com/">Blogger Gadgets</a>
<!-- End Open Heart Bookmarking Gadget From http://www.helplogger.blogspot.com/ -->

Cr: Helplogger e Bunny Crazy


-P4nda

Tutorial: Moldura nas imagens com CSS + Backgrounds

Oi gente,

Amigos leitores, eu trouxe hoje um tutorial que serve tanto para gadgets com para postagens! O tuto é de como botar moldura nas imagens utilizando o CSS. Gente, é muito simples, e eu vou fazer o tutorial de dois jeitos: como botar na postagem e no gadget! Vamos começar!

Exemplo:

Legal né?

Tutorial de como botar na postagem:

• Na hora de botar a imagem na postagem, você ira clicar em HTML em vez de Escrever.
• Então ira copiar esse código abaixo lá:

<img src="URL DA IMAGEM" style="background: url(URL DO BACKGROUND); padding: 5px; width: 387px; height:216"/>

URL DA IMAGEM: Coloque o endereço da imagem que deseja.

URL DO BACKGROUND: Coloque o endereço da imagem que ficará no fundo.

5px: Espessura da borda aumente ou diminua de acordo com seu gosto.

width: 387px: Altura da imagem. (Deixara em um tamanho padrão, se desejar remova)

height: 216px: Largura da imagem. (Deixara em um tamanho padrão, se desejar remova)

No gadget é a mesma coisa só que você terá que colar o código no HTML/JavaScript.

----------------------------------------------------------------------------

Backgrounds:

-P4nda♥