Dica: Como colocar gadget de inscreva-se na postagem no post!

Olá amores! Uma leitora me enviou um e-mail perguntando como eu colocava esse gadget para se inscrever no canal do youtube integrado no post do blog e como é super simples e dá uma boa ajuda aos nossos leitores que não precisam nem sair do nosso blog para assinar o feed dos nossos vídeos resolvi ensinar a vocês!

1- Vá para a área de postagem como se fosse fazer um post normal e clique na aba HTML que estará nessa barrinha de ferramentas acima do post.
2 - cole o código abaixo:

<iframe frameborder="0" scrolling="no" src="http://www.youtube.com/subscribe_widget?p=NOMEDOSEUCANAL" style="border-width: 0px; height: 110px; overflow: hidden; width: 600px;"></iframe><br />

3- Troque a parte em vermelho pelo www.youtube.com/user/esse é seu nome, o número em laranja pela altura do gadget e o em roxo para a largura do seu gadget (coloque a largura da sua área de postagem)

4- clique em na aba escrever para voltar a área de postagem normal e pronto!

Resultado:

Super simples não? Esse post não vai ajudar a todos os meus leitores, pois nem todos tem blog, mas boa parte tem, então espero ter sido útil para alguns de vocês <3
beijão!

Como dividir a sidebar em blocos quadrados ou redondos

Muita gente me pediu esse tutorial, e como eu amo ajudar vocês resolvi atender os pedidos *-*' O efeito que dá é bem legal, a sidebar fica 'dividida' mostrando o background e dando um ar moderno, e cute no blog.
Exemplo abaixo:

1) Vá em design do modelo no seu blogger > avançado > cor de fundo da barra lateral > ajuste em transparente ( caso você deixe alguma cor nesse passo, abaixo da cor dos blocos ficará a cor que você escolheu aqui)

2) Vá em editar html no seu blog, dê ctrl + F e pesquise pela tag:  /* Widgets 
Você irá encontrar um código parecido com esse:

/* Widgets
----------------------------------------------- */
.sidebar .widget {
  border-bottom: 1px  dashed $(widget.border.bevel.color);
  padding-bottom: 10px;
  margin: 10px 0; }

3) Antes de fechar a chave em vermelho cole o seguinte código: background-color: #fff2cc;

4) Troque o código em amarelo por uma cor em HTML usando essa tabela de cores

Deixando os blocos redondos

Para deixar os blocos da sidebar redondos depois do background-color: #fff2cc; Você deve colocar o seguinte código:

-moz-border-radius: 10px; /* Para Firefox */-webkit-border-radius: 10px; /*Para Safari e Chrome */border-radius: 10px; /* Para Opera 10.5+*/
}

Meu resultado final:

/* Widgets
----------------------------------------------- */
.sidebar .widget {
  border-bottom: 1px  dashed $(widget.border.bevel.color);
  padding-bottom: 10px;
  margin: 10px 0;
background-color: #fff2cc;
-moz-border-radius: 10px; /* Para Firefox */-webkit-border-radius: 10px; /*Para Safari e Chrome */border-radius: 10px; /* Para Opera 10.5+*/
} 

Espero que tenham gostado do tutorial, logo vou trazer o de como personalizar os títulos dos gadgets igual o do fashion scream :) beijos, adoro vocês <3'

Personalize a moldura da sidebar no blogger

O tutorial de hoje dá um efeito bem fofo na sidebar do blogger, eu uso a sidebar 'separada' mais até com ela única, fica bonito e separa os gadgets.
Eu (acho que não é só eu u.u) sempre achei desnecessário no design do modelo, lá na aba da sidebar aquela 'moldura', mais sabendo-a usar ela deixa o seu blog, ainda mais bonito e fofo, vamos aprender?

1) Vá em design > design do modelo > aba avançado > plano de fundo da barra lateral > cor da moldura e deixe na cor desejada

2) No seu HTML procure pela tag : .sidebar .widget {
3) Estará assim :

.sidebar .widget {
  border-bottom: 2px solid $(widget.border.bevel.color);

 Explicando o código:

 border-bottom: border é borda [avá] e o bottom é abaixo, abaixo da sidebar, o bonito é assim, MAS se você quiser pode colocar left (direita) rigth (esquerda), substituindo o bottom por um desses códigos

 2px número correspondente a largura da borda, aumente ou diminua como quiser

solid  borda sólida, substitua o solid por dashed (pontilhado) ou double (linha supla)

$(widget.border.bevel.color); Esse código NAO deve ser alterado, ele é o código que corresponde a cor que você colocou no design do modelo

O meu ficou assim:

border-bottom: 1px  dashed $(widget.border.bevel.color);

E aí gostaram do tutorial? Se quiserem pedir algum é só entrar em contato :B

Colocar borda ao redor da postagem

Oi gente fofa&linda ! Hoje vou postar um tutorial, bem legal e que fica com um efeito incrível no blogger.
1) Vá no seu HTML e procure pela tag : .post-body { 
2) Abaixo dessa tag cole esse trecho: border: solid 2px #000000;
Entendendo o código:

solid esse é o estilo da borda, solid, quer dizer uma linha reta, sólida, se quiser linhas pontilhadas, troque por dashed
2px essa é a largura da borda, aumente ou diminua o número conforme seu gosto
#000000; essa é a cor da borda, troque pela cor que preferir, para escolher uma, consulte essa tabela

Gente, eu estou voltando com o blog, espero que meus leitores também voltem né >< Espero que tenham curtido o tutorial, tem muita coisa nova por vir (:

Bordas nas imagens dos posts !

No tutorial de hoje, vamos aprender a colocar bordas ao redor das imagens dos posts, eu acho o efeito lindo e o tutorial é bem fácil, além, de dar uma ótima diferença nas postagens.
1) Procre por  ]]></b:skin>
2) Acima dele cole o código : 

.post img{-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px; border: 1px solid #ccc;padding: 5px;}

Personalize o código  

1px é a largura da sua borda

solid o estilo da borda, solid é 'solido', uma linha reta, dashed é uma linha pontilhada :)

#ccc; esse código é a cor da borda, escola uma cor em HTML, para escolher vá nesse site

Como esconder o About da blogueira !

Oi galera ! Hoje vou ensinar um truque bem legal para vocês, ele ajuda a arrumar a sua sidebar e ocupa menos espaço. Funciona assim : Vai aparecer uma imagem na sidebar escrito 'clique e conheça a blogueira' ou algo do tipo, e quando você clicar irá aparecer o seu about. O que acontece é que geralmente você cria uma página somente para fazer o seu about para não ocupar espaço na sua sidebar, agora, você pode escrever ele inteiro ali mesmo.
1) Em elementos da página no design do seu blog, clique em adicionar um gadget.
2) Depois escreva normalmente o que quer sobre você, coloque fotos no gadget, o que quiser.
3) Vá na aba editar html do gadget vai aparecer os códigos do que você escreveu (avá)
4) Copie tudo aquilo e cole no bloco de notas
5) Apague o que estava no gadget (verifique se não ficou restos de html na aba editar html) e depois cole o seguinte código :

<div class="divspoiler"><img src="URL DA IMAGEM" onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none';}" /></div><div><div class="spoiler" style="display: none;">Aqui o código do about</div></div>

Agora substitua os códigos que estão em negrito, o url da imagem logicamente pelo url da imagem k' e o código do about pelo que você colou no bloco de notas

UPDATE: sumi por uns dias, mais vocês sabem que estou me mudando e fica difícil de postar todos os dias, também não tenho mais muito tempo pois estou voltando a ir no meu curso certinho, parar de ficar faltando, mais sempre vou vir postar aqui e responder o muitos comentários que eu estou devendo 

 beijos

Estilos para título dos gadgets

Oi gente (: hoje trouxe uns estilos para título de gadgets, primeiro vou ensinar como faz pra colocar :
1) No seu HTML procure por ]]></b:skin>
2) Acima dele cole um dos códigos abaixo, de sua preferência.
Lembrando que eu aprendi a colocar esses títulos no extras place fame a bastante tempo, modifiquei os códigos com a minha preferência e trago para vocês

Título do Gadget

.sidebar h2 {
text-align: center;
background-color: #FF69B4; ---/*cor de fundo */
width: 200px;
height: 15px;
color: #F5F5DC; ---/* cor da fonte do título */
font-family: impact; ---/* fonte do título */
font-size:16px; ---/* tamanho da fonte */
text-shadow:0 1px 1px #FFFF00;
-moz-border-radius: 10px; /* Para Firefox */-webkit-border-radius: 10px; /*Para Safari e Chrome */border-radius: 10px; /* Para Opera 10.5+*/}

Título do Gadget

.sidebar h2 {
text-align: center;
background-color: #8B8B83; ---/*cor de fundo */
width: 200px;
height: 15px;
color: #FFF5EE; ---/* cor da fonte do título */
font-family: impact; ---/* fonte do título */
font-size:16px; ---/* tamanho da fonte */
text-shadow:0 4px 4px #000000;
-moz-border-radius-bottomright: 10px;-moz-border-radius-topright: 10px;-webkit-border-bottom-left-radius: 10px;-webkit-border-top-right-radius: 10px;

Título do Gadget

.sidebar h2 {
text-align: center;
background-color: #7FFF00; ---/*cor de fundo */
border-left: 7px solid #FF1493;
width: 200px;
height: 15px;
color:#FFFFFF; ---/* cor da fonte do título */
font-family: impact; ---/* fonte do título */
font-size:16px; ---/* tamanho da fonte */
text-shadow:0 1px 1px #FFFFFF;

Título do Gadget

.sidebar h2 {
text-align: center;
background-color: #DEB887 ; ---/*cor de fundo */
border-left: 1px dashed #8B4513;
width: 200px;
height: 15px;
color:#b03060; ---/* cor da fonte do título */
font-family: impact; ---/* fonte do título */
font-size:16px; ---/* tamanho da fonte */
text-shadow:0 1px 1px #FFFFFF;

Espero que gostem, estou meio apurada pra responder os comentários, mais eu tento ♥ aos poucos vou respondendo, beijos Luh

Tirar sublinhado e colocar negrito nos links

Uma das coisas que eu mais odeio em um blog (e não é só eu u.u ) é quando você entra em um blog, passa o mouse em cima de algum link e ele aparece com aquele sublinhado horroroso em baixo, por isso trouxe esses dois tutoriais para vocês

Tirar sublinhado dos links
No seu HTML procure pela tag :  text-decoration:underline; depois disso substitua a parte em vermelho por none
lembre-se: visualizando você não vai ver diferença porque os links ficam assim no efeito hover (quando o mouse passa) e na visualização não dá, então simplesmente salve.


Colocar negrito nos links
Para dar destaque nos links selecionados, o legal é colocá-los com o efeito hover em negrito para isso vá no seu HTML e procure pela tag : 
a:hover 
Depois que achar você verá um código parecido com esse : 

a:hover {

  text-decoration:none;

  color: $(link.hover.color);

font-weight: bold; 

Depois desse código (logo abaixo) cole a tag :
font-weight: bold; 
O tutorial termina por aqui, super fácil né ? :)

Como esconder a c-box

Oi meninas e meninos :) Hoje trouxe mais um tutorial de html para vocês (que agora quero começar a fazer mais) o de hoje é como esconder a c-box, tenho como exemplo esse layout do fashion scream :

É assim que fica, uma imagem na sidebar e quando você clica nela, desliza a c-box para baixo da imagem, quando não quiser mais vê-la clique na imagem de novo, legal né ? vamos aprender !

1) Vá no seu html e procure (ctrl = f) pela tag : </head>

2) ACIMA dela cole o código

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/2wl9p6g/G70lj5t0q/animatedcollapse.js"></script>
<script type="text/javascript">
animatedcollapse.addDiv('jason', 'fade=1,height=80px')
animatedcollapse.addDiv('kelly', 'fade=1,height=100px')
animatedcollapse.addDiv('michael', 'fade=1,height=120px')
animatedcollapse.addDiv('cat', 'fade=0,speed=400,group=pets')
animatedcollapse.addDiv('dog', 'fade=0,speed=400,group=pets,persist=1,hide=1')
animatedcollapse.addDiv('rabbit', 'fade=0,speed=400,group=pets,hide=1')
animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
//$: Access to jQuery
//divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
//state: "block" or "none", depending on state
}
animatedcollapse.init()
</script>

3) Salve o HTML
4) vá no design do seu blog e crie um novo gadget de html/javascript e cole o código:

<a href="javascript:animatedcollapse.toggle('dog')"><img src="LINK DA IMAGEM "/></a><div id="dog" style="display:none"> Cole o HTML da c-box</div>

5)Salve o gadget e pronto

Fácil né galerinha, esse é o post de hoje, não esqueçam de conferir outros goodies do blog

Menu com efeito hover igual o do blog

Créditos da imagem: http://weheartit.com/entry/18905804


Em apenas 3 dias com esse layout já recebi muitas perguntas de como fiz esse menu, que uso no blog, então resolví fazer um tutorial ensinando-o, primeiramente só aconselho fazer esse tutorial quem tem pasciência para criar e hospedar imagens, além disso pessoas que não se embaralhem com elas, dica : coloque o nome nelas como: home 1 e home 2 que fica mais fácil depois pra entender.Também queria falar que eu aprendi esse código no tuoriais attitude included, mais vou fazer o tutorial com as minhas palavras, esse é o menu que vamos aprender :


1) Vá em design no seu painel do blogger e depois em adicionar gadget
2) escolha o gadget HTML/Javascript e cole o seguinte código:

<img onmouseout="this.src='Imagem normal sem passar o mouse1';" onmouseover="this.src='imagem normal sem passar o mouse1';" src="imagem quando o mouse passa1" /></a>
<img onmouseout="this.src='Imagem normal sem passar o mouse2';" onmouseover="this.src='imagem normal sem passar o mouse2';" src="imagem quando o mouse passa2" /></a>
<img onmouseout="this.src='Imagem normal sem passar o mouse3';" onmouseover="this.src='imagem normal sem passar o mouse3';" src="imagem quando o mouse passa3" /></a>

Se quiser mais de 3 categorias copie e cole o código mais de uma vez. Ali você substitui pela url da imagem que quer quando o mouse não estiver na imagem , e pela url de quando o mouse passa pelo menu

3)Para por os links clique em 'formato rich text', você verá as imagem, selecione uma por uma e clique em 'criar links' depois de colocar o link nas imagens, volte ao editar html do gadget, salve e pronto.
É isso nenéns, ah, eu já fiz minha árvore de natal com a minha mãe, logo vou mostrar a minha e dar dicas para vocês, além disso também quero botar minha lista de natal aqui no blog e tal beijinhos luh

Personalizando a Footer !

HÁ ! Quanto tempo galera, digo, nos TUTORIAIS que fazem UM MÊS e uns 5 dias ! hé eles estão de volta com força total, quero falar com as minhas moderadoras para trazer coisas novas
 
O tutorial de hoje é para se personalizar a footer do blog (footer é tipo um rodapé, mais que fica bem no final da página, pode ser tanto uma imagem, quanto um aviso de direitos autoriais e etc)
Com texto :
Vá no painel do seu blog > design > editar html e procure por ]]></b:skin>
Quando aparecer a palavra destacada em laranja, você cola em cima dela o código:

#footer-wrapper {
background: #000; /*** cor do fundo ***/
background-repeat: no-repeat;
z-index: 1000;
height: 20px;
clear: both;
font-size: 90%; /*** tamanho da fonte ***/
color: #fff; /*** cor da fonte ***/
text-align: center; /*** alinhamento da fonte ***/
padding: 5px;
}

Depois procure pela tag : </body> e cole o seguinte código ACIMA dele

<div id='footer-wrapper'>Escreva o que Quiser</div>

Vocês podem conferir o resultado aqui mesmo no blog. Espero que tenham curtido o post, e também quero avisar que nao vou mais deixar o blog tanto tempo desatualizado. Beijos Luh

Coloque imagens no título do gadget (Atualizado)

A ultima vez que eu postei sobre isso postei um código meio ruim,pois a imagem ficava muito pequena e a letra também,personalizei um novo código e hoje trouxe para vocês

Vá no seu html e procure por  /* Headings
vá rolando seu c´digo e ache :

.footer-inner .widget h2,
.sidebar .widget h2 {
  padding-bottom: .5em;
}

Antes que a chave em vermelho feche, cole o código:

background-image: url(url);
  background-position: center;
width: 280px;
height: 30px; }
 text-align: center;

em url coloque a url da sua imagem , em width : é a largura da imagem ali no caso é 280 (sempre 20 pxs a menos do que a sidebar) , height é a altura , com esses dados você pode fazer e colocar uma imagem, eu trouxe algumas , em 280 por 30 px

 (essa eu não lembro,deve ser uns 180)

Pra quem não sabe eu sou postadora do diamont lilac news , acabei nunca postando lá por falta de tempo , mais essa semana vou trazer uma nail minha para o fs e o dln , é simples , e bem conhecida mais eu fiz com carinho , to adorando meu trabalho e não vejo a hora de ter um tempinho pra fazer o lay do fs ! agora acho que eles vão ficar um tempinho a mais haha 

Personalizar o blockquote

Tá, tá, eu sei, a foto é muito fofa.

Iai meus pequenos? como andam vocês?  Bom, vocês sabem que da ultima vez que eu postei, foi domingo, né? é que sexta eu estava estudando pra caramba.Quero fazer uma simples pergunta, vocês gostam de nutella?

Olha, só pra avisar, eu não sou a luanara, que tem gente que coloca : Legal o tutorial, não gostei do tutorial, amei o tutorial, LUH. kk quando for a luh tem lá em baixo, POSTADO POR LUANARA.

 Vamos ao tutorial??
Primeiro, procure pela seguinte tag:

]]></b:skin>

Achou? Acima dela coloque o seguinte codigo:

blockquote {
border: 1px solid #c9c9c9; /* cor da borda */
background-color: #efefef; /* cor de fundo */
padding: 10px;
font-size: 11px; /* tamanho da fonte */
color: #333333; /* cor da fonte */
text-align: justify;
-moz-border-radius: 10px; /* Para Firefox */-webkit-border-radius: 10px; /*Para Safari e Chrome */border-radius: 10px; /* Para Opera 10.5+*/
}

Pronto, acabamos hehe!
Bjus 
CRÉDITOS: extras place fame.

Aviso rápido + Fundo nos comentários

Post exclusivo

Olá amores, tudo bom? aqui é a Carol. Espero que entendam mesmo. Eu estou em semana de prova sabe? Ai não dá pra eu ficar entrando no computador para postar. Então eu vou, quando entrar, fazer várias postagens e programa-las para as sextas. Como hoje é domingo, dá para eu postar, pois é um dia livre. Vamos para um pequeno tutorial?
Você procura por

 #comments {
Achou? então logo abaixo dele você coloca o seguinte código
background: url(URL DA IMAGEM) repeat; 
Onde está em negrito azul, você coloca a url da imagem que ficará nos comentários
é só isso, kissus!

Barra de rolagem nos comentários!

Tutorial - Carolina wanderley.

Olá bebês, como vão? Estamos todos aqui reunidos para mais um tutorial \o/
vou ensinar a colocar uma barra de rolagem no blog, tipo a do vivislandia.
Olha gente, é super simples, então se você tem uma barra de rolagem personalizada tipo a do fashion scream, a barra do post vai ficar personalisada do jeito que tá aqui do lado >
Vamos lá?Procure pelo seguinte código:

body {

ai em cima dele coloque:

 #Blog1{overflow-y:auto; overflow-x: hidden; height:500px; width: 100%;margin: 0px;}

Se estiver tudo certo, visualize e salve =D

Mudar a cor do navbar!!

Olá amores, aqui é a carol falando! Vou ensinar como mudar a cor do navbar, para deixa-lo do seu jeito!Primeiro, procure por este código:

]]></b:skin>

Achou? Então, em cima dele você coloca o código:

Dai acima desse código você cola esse aqui

#navbar-iframe{background-color: #FFFAFA; float: bottom-page;}

 Onde tem o código em rosa, coloque a cor que quiser para "pintar" sua navbar. Bye bye! 

Coloque caixa de cor ou back que muda no seu blog

Vocês já tevem ter visto essa nova 'tendência' em algum blog , se não viram ainda vou explicar : Se trata de um gadget onde vão várias cores (ou background) que quando você clica esse vira o background do seu blog


é uma coisa legal pra quem quer deixar que seus leitores tenham mais 'introsamento' com seu blog , além de que cada leitor ou até você possa vê-lo sempre diferente e de acordo com seu gosto e estilo , essas caixinhas já existiram antes , eu sei porque a uns 3 anos atraz entrei em um site que tinha isso , mais ao invez de 'caixa' era ícones que quando você clicava o layout do blog ficava bem diferente , e com vários estilos , o tutorial é pratico e bem simples


Colocando o widget como caixa de cores :
Vá em design > elementos da página > adicionar gadget > HTML/Javascript e cole o código :

<div style="text-align:center;">Troque a cor do blog</div><br /><center><a href="#" onclick="javascript:document.body.style.backgroundColor='#ff0000'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTlKOYkwGV0B38eOEAd2CtYDuvz73OOpXS-sC836h5hMV9pxbkNZUGFqtiUI8b5P9JGL84x2NacHUs_c7ERJQmxwoubyqEPyq4EAOcnK3lXqiM3arrJoGf7Y0bjB8bD937w1naGqzGuRAo/s200/body-rojo.png" /></a><a href="#" onclick="javascript:document.body.style.backgroundColor='#fff000'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLlsZD1rqTuR9aImQVjFeZenA-i2LeRnw4QRhzO_NRbBpH_xK2mR35CGCUqi8k-kfUE5aIoqbGjji5yOthQrH0dd1Ds1T-H0QelYujObofvtfSljtq4wgl8p96H4Oc9XXIS0Pvq9KVpivb/s200/body-amarillo.png" /></a><a href="#" onclick="javascript:document.body.style.backgroundColor='#04B404'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp-_7mo1SutJnGtwOp_RL5qJwvZoTK9JnB2sMMHVCZu5yaFVsLG1kr9fsDPFVEbIcLwuqYId4JCX_YMoXiqt8F6DC_oBS05Mj7t1RQAsSYfGL8c_E8hE6Lu1LxzP0JfzBKAEhbtDCY39MW/s200/body-verde.png" /></a><a href="#" onclick="javascript:document.body.style.backgroundColor='#0080FF'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY99AMXGwMNdroWl-f8CfAyutGWmog4OYLOBM-4kERm8BlLmFJ1RiYOvrBfBHcE23s0hOObB2B_Tm0sIwUENlQCuaL2IFPKtwKQ5ufwe5gXMjDXJAdnFzWSPPhH2eVXqU-tqZ1DOZJblRq/s200/body-azul.png" /></a><a href="#" onclick="javascript:document.body.style.backgroundColor='#CC00FF'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdE_eP_5_AfgVmPdeWJ_V3NOieD4DL2WHYE8SaXiV3im9_pmUstB3UukaJXX6pkfHx44Z8Vdpz5Kpfw1uCl8qwspupHruVH8xKMmhjtvgkSQJjU3tMI6O-W7HO5megzLC6iaWOqma-ZhvW/s200/body-morado.png" /></a><a href="#" onclick="javascript:document.body.style.backgroundColor='#F781BE'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDJMOdwjvkjUcPhrCxWFEoIbUoRLPlFmxdIvwil0KBvH9BBepPDfu-Mp6FG6mIW4dSphbbXFMEeauffKoPRq9gEZKVsDTes1olb_3KwQU4gDZCuOWsbngWfOuMCYfvg076b_iuMWi0nPuz/s200/body-rosa.png" /></a><a href="#" onclick="javascript:document.body.style.backgroundColor='#000000'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM9KKboSE0vjQTdY2ilPIMzdsUF8QH3GIXjtOhCGtRGThC4Dqf4DxW2MBW4wk9Bvo8Jf00Ho2jPZfY9ttvtCzgiUvpnFfAQu8I9gS7amP1J9D4JiPNABV9t9ZgxQc5zlzy5HqAqaKmuBZK/s200/body-negro.png" /></a><a href="#" onclick="javascript:document.body.style.backgroundColor='#FFFFFF'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_ovWcsq_SghwMa78vO4Rr8pyQqMhLUhwk07eDpa5odkTY2-jRtBkgCg_B3HTf8e9r7noh2T2uKVYfcjdVTphX_ilZY1lVnRi9U7d4Fb8zFQmSwjUEr57IPQe_LNHMEFlrqXBcALdhMkSN/s200/body-blanco.png" /></a></center>

Pronto , posicione o widget onde quiser e ele já estará no seu blog

Colocando caixa com backgrounds :
é quase a mesma coisa que o outro código , mais ao invez de 8 opções , serão só 4 Eu vou colocar aqui um código com backgrounds prontos , no caso os que eu escolhi , são esses :


o código :

<div style="text-align:center;">Troque a cor do blog</div><br /><center>
<a href="#" onclick="javascript:document.body.style.background='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY-ql0QLcMaW_T37F6km12-8F0chkKWHAhDYjTgU1YN98C7xDreShsQsgRHhUysoXkSDBmoM8qMnT7-f0JtbY_PR4300BXaiI5VM1Anv5nse6JOx8qOxG9eW_6RkFz4Cu5xlMC0UVEp_JX/s104/fundo+%2528277%2529.gif'; document.body.
style.backgroundImage='none';"><img src=
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfs3s3EBmhN-Q4ldCdaBZ3ua2LbnBbC5HtpfQfqSOjnH2hUndSx7rOvAv9EY1s5n2poF640gzmmyY3lH51474RYzwlsgzIIXb3uSiGiHHsadnWvwqJ3vAfz6YZHf5Bt6cIKcp1kEqp_tjj/s1600/azul.bmp" /></a><a href="#" onclick="javascript:document.body.style.background='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIOXAMlXtIYLHo1bEHt0P_9JzCtjFrQYnWIGLjpw-sc2pBxsa34daTlBDqo5pAGjGWScn_Idwsd2ajiyZfXLp152SHI5f7o0ECFCMjheukMkxZtV4zAxkztLYndXvlSIWF6q35Jqlt4_e1/s104/fundo+%252825%2529.jpg'; document.body.
style.backgroundImage='none';"><img src=
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp9kRMkticKSj6OSM6DA9nfnh1Wke0hpw_EOr8jt2usIsh9Xs_G65LhqUB62AOsSCWhHJp2WVwaZOu1V_zKSIA2Gj2R6_CszhdhsD7l0LNdU6y89b03aGt97gBW784GJ6ypHIwQI6zQs9F/s1600/bolin.bmp" /></a><a href="#" onclick="javascript:document.body.style.background='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzwTHrhWUVIZuAgH50S0KFdl5JKs8_avHPGEe-EhopxKCbSwCB_mIOtTOSNLcaTqrPF2YM_oJkkdSt90vGC6TmPMZD0dqiJIWFa640psOky7qceQYjqV22kRJQUmvRjHdFfJ0z92OydxF-/s104/fundo+%2528193%2529.gif'; document.body.
style.backgroundImage='none';"><img src=
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigK_YIjpl4TIHbqvz_aG8CTMrTah9uzfdJoVoRp47fnKPbekdFhtMSJW2oO6R-4dMuKE4WRfFu7WTY5zLqT6uhy_hI9wSf6z2kakazdEILLczhaPPq3eJuYTUWC3OJzHPRzcdsXz1unTnp/s1600/rosa.bmp" /></a><a href="#" onclick="javascript:document.body.style.background='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgylS_2yOrtw9Rx_he_xj-4_wT45Yi65iypS0VYrBEP2enuF9K19N4jgnbsUKcGKYdnPANsjzmcujDqpLemtRIWmnc7sVxehfDc3PI9IIFP2CUC3Mqd5XbQDviPxnPKW-HC-vIv-WvlhmfL/s104/fundo+%2528260%2529.gif'; document.body.
style.backgroundImage='none';"><img src=
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYGhg0xL_1xcGJfSf2-D20tmHOglSXmBkvg75nIazI-6HPLCJUS_doonYtiyJkBmakuJA6wem6SEJ8wUUO657j6e0CI8SgX1pPrR_Bv8Lo4I_qgUrDvJZdAFRKJcCNIi1H5LApgPKh2P_Z/s1600/cinza.bmp" /></a>

Agora,se vocês não quiserem esses backgrounds e sim outros (eu coloquei os que ficam legais com o fs) vocês podem personalizar , vocês só irão precisar de um background (no caso do tamanho original) , e um background (do mesmo que você vai colocar) em tamanho 25 por 25


<a href="#" onclick="javascript:document.body.style.background='URL DO BACK EM TAMANHO ORIGINAL'; document.body.
style.backgroundImage='none';"><img src=
"URL DO BACK PARA VISUALIZAÇÃO NO GADGET 25X25" /></a>

Esse é o código , dai é só colocar 4 códigos desse um com cada background juntinho ,deixe somente um espaço e pronto , salve no gadget Html/javascript e seu blog

ANtes de terminar o post eu tenho um recado muito importante para as postadoras do fs , Eu nao quero que postem no dia que nao é de vocês , não por nada , apenas por organização , porque cada uma tem seu dia e seu assunto , então respeitem , se quiserem deixar o post adiantado deixem como rascunho ou programado PARA O DIA DE VOCÊS ok

Icone no titulo do post!

Olá pessoal, este é mais um tutorial da titia carol, Ah, e agora, pessoal, tenho uma nova hihi >.<

Meu novo apelido é ever, agora é a titia ever haha

Hoje eu vou ensinar a colocar uma imagem ao lado do titulo do post!!

Primeiro, você clica em expandir modelos de widgets. Depois, você aperta em ctrl + f e procura por

data:post.link'><data:post.title/></a>

Ai, quando você achar este código, você diretamente irá achar este:

<b:else/> 

Do lado, lado lado lado lado, não em cima, nem em baixo, do lado, você coloca este cógido:

<img src='URL DO SEU GIF' style='vertical-align: middle;'/>

Onde tem url do seu gif você coloca a url do seu gif, que você quer que fica ao lado do post. PRONTO!
Você tem que achar um gif bem fofinho, que combine com o seu lay!
Pronto gente, né fácil? Mais duvidas clique aqui.
Beijos da titia ever.

 

Como colocar menu no cabeçalho

Muita gente me perguntou como por o menu que eu uso aqui no fs no cabeçalho , bom , vocês podem até saber uma parte , mais para dar certo no cabeçalho é preciso mais do que simplesmente mapear uma imagem .Querem aprender ?


1) Crie seu cabeçalho (de preferência no photofiltre stúdio) , e faça alguma coisa que destaque as partes que quer linkar , clique aqui e vejo o cabeçalho do Fashion scream .

2)Entre no site : image maps e faça o upload da sua imagem ou coloque por url e clique em 'start mapping your image' , vai aparecer uma pagina amarela e lá em baixo uma espécie de cronômetro , depois que chegar a 0 aparecera o link : 'continue to next step'

4) sua imagem irá aparecer,clique em 'retangle' e selecione SOMENTE a parte que você quer um link -uma a uma) depois de selecionada a parte na qual você quer um dos links irá aparecer uma paginazinha amarela em 'links for this map' você coloca o link e clique em salvar , para colocar o link em outros lugares repita esse processo

5)Depois de tudo pronto , em uma barra lateral no lado direito tem algumas seleções , desmarque essas (clique para ver a imagem)

6)clique em get your code , e depois em HTML code lá em cima (clique aqui para ver a imagem)


Depois de copiar o código , vamos editar isso no blogger
7)vá em design >elementos da pagina > e no gadget do seu cabeçalho e o apague
8)depois va em editar html >expandir modelos de widgets > procure por : /* Header

Páginas numeradas com tamanho

Um dos problemas de colocar páginas numeradas no blog é que elas ficam grandes de mais e você tende diminuir a letra do seu blog para 10 px , o que fica horrível , além de cada postagem você ter de mudar o tamanho da fonte , eu procurei muitos tutoriais na internet de como diminuir o tamanho das páginas numeradas e não achei , fiquei mexendo no meu HTML até que consegui . Primeiro vou colocar como botar essas páginas no seu blog .
1) vá no seu html e procure por : ]]></b:skin>
2) Acima dele cole o código :

.showpageArea a {

text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
background: #cccccc;
margin:0 2px;
padding:5px;
}
.showpageNum a:hover {
border: 0px solid #cccccc;
background-color: #00ffff;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 0px solid #cccccc;
background: #00ffff;
margin:0 2px;
padding:5px;
}
.showpageOf {
text-decoration:none;
padding:5px;
margin: 0 2px 0 0;
}
.showpage a {
text-decoration:none;
background-color: #cccccc;
padding:5px;
}
.showpage a:hover {
text-decoration:none;
background:#00ffff;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#000;
}