Comemorando + Big tutoriais

Boa tardee leitoras e leitores queridos!! Hoje completamos 50 posts desde que o CDS foi criado \☺/

Pra comemorar, trouxe pra vocês um big tutorial, ou seja, vários tutos úteis pra vocês, de presente 

Quer ver os tutos? É só apertar em Leia Mais e conferir todos eles 

Tutorial - Menu hover deslizante

Boa tarde gente! Hoje trouxe pra vocês um tutorial muito simples e lindo, que não chama muito atenção e deixa seu blog muito fofo. É o menu hover deslizante, veja o preview, que é do blog Pingo de Adolescência, a minha amiga Lílian é dona dele ^^

Esse é um menu hover, você pode colocar o status, ou o menu mesmo, vamos fazer?

             Vá em Editar HTML  Aperte F3 e procure por ]]></b:skin>  Acima desse código cole:

.heart {

display : block;

font-size: 10px;

font-family: Tahoma;

letter-spacing : 0;

border-bottom : 1px solid #eee;

background-repeat : no-repeat;   

text-indent : 5px;

vertical-align : middle;

text-decoration : none;

 line-height : 15px;

margin-bottom : 1px;

padding-left : 3px;

 -webkit-transition: all 0.9s ease-out; -moz-transition: all 0.9s ease-out;

border-left: solid #CORDABORDA;

background: #CORDOFUNDO;

 color: #666 !important;

}

.heart:hover {

display : block;

text-decoration: none;

 vertical-align: middle;

line-height: 15px;

background: #CORDOFUNDOHOVER;

 border-left: solid #CORDABORDAHOVER;

 padding-left: 15px;}

 Troque o que está em negrito pelo o que eles correspondem.

                                       Em um gadget HTML/ JavaScript cole o seguinte:

                                                              <div class="heart"> seu texto </div>

 Digite o seu texto onde está em negrito, e se quiser mais caixinhas, é só repetir esse código. É só salvar!

Pronto, é fácil e simples! Bjok 

Créditos: Kawaii World

Sidebar Cute

Oiii, a pedido de uma leitora nossa, eu vim ensinar a vocês, como deixar a sidebar como a daqui do CDS. É muito simples e cute *-* Vamos ao tuto!

                                 Vá em Disign  Adicionar um gadget  HTML/JavaScript

                                                    Cole o seguinte código:

<style>

/**SIDEBAR BAD REPUTATION**/

.sidebar .widget {

box-shadow: inset 0 0 10px #eee, 0 0 2px #dbdbdb;

-webkit-border-top-right-radius: 20px;

-moz-border-radius-topright: 20px;

border-top-right-radius: 20px;

-webkit-border-bottom-right-radius: 20px;

-moz-border-radius-bottomright: 20px;

border-bottom-right-radius: 20px;

-webkit-border-bottom-left-radius: 20px;

-moz-border-radius-bottomleft: 20px; 

border-bottom-right-radius: 20px;

width:100% !important;

background:#fff;  /** COR DO FUNDO DO GADGET **/

margin:33px 0 !important;

padding:10px;

border-top:2px solid #ebebeb;

border-right: 2px solid #ebebeb; 

border-left: 2px solid #ffd6eb; 

border-bottom: 2px solid #ebebeb; 

}

.sidebar .widget h2 {

text-align: center;

box-shadow: inset 0 0 10px #eee, 0 0 2px #dbdbdb;

border-left:2px solid #ffd6eb;  /** COR DA BORDA DE CIMA **/;

border-top:2px solid #ebebeb;  /** COR DA BORDA DE CIMA **/;

border-right:2px solid #ebebeb;  /** COR DA BORDA DE CIMA **/;

background: #ebf9ff;  /** COR DO FUNDO DA ÁREA DO TITULO **/

text-shadow:0 1px #ccc/** SOMBRA DO TITULO **/;

color:#ff94c9/** COR DO TITULO **/;

font-size:15px /** TAMANHO DO TITULO **/;

margin-top:-35px /** MARGIN **/;

margin-left:-12px /** MARGIN **/;

margin-bottom:5px /** MARGIN **/;

padding:3px;

width:40%;

overflow:hidden

-webkit-border-top-right-radius: 20px;

-moz-border-radius-topright: 20px;

border-top-right-radius: 20px;

-webkit-border-top-left-radius: 20px;

-moz-border-radius-topleft: 20px;

border-top-left-radius: 20px;}

.sidebar .widget:first-child {

  margin-top: 0;

}

/** FIM DA SIDEBAR BAD REPUTATION [bad-reputation-13.blogspot.com.br]**/

</style> 

  Se quiser a sidebar igual a daqui, é só ajustar as margens e salvar , mas se não quiser, modifique do seu gosto e depois salve.

 Mas lembre-se:  Vá em modelo  Personalizar  Avançado  Plano de fundo da barra lateral  coloque transparente nos dois.

 Desta maneira:

                             

 Salve e pronto!
Só isso
Créditos: Bad Reputation
Bjoks! 

Colocando um Menu Destaque

Hoooy minhas cute's !! Mais uma vez trouxe um tutorial muito legal, simples, fácil, charmoso e útil pra vocês! É o menu destaque que aprendi no KW, eu o coloquei aqui no blog ontem, ele serve pra destacar as postagens mais acessadas, as mais populares, ou a que você quer deixar em destaque mesmo. Ele está aqui ao lado. Vamos fazer?

1° Vá em Editar HTML e procure por ]]></b:skin> E acima dessa tag cole o seguinte:

Clique aqui para ver o código. Clique aqui para ver a explicação desse código.

2° Depois edite como quiser. Agora adicione um HTML JavaScript e nele, cole:

<div class="boxdestaque">

<span class="title">Título da postagem

<a class="destaque" href="LINK DO POST"></a>

</span>

</div>

Repita se você quiser mais caixinhas.

E é isso, super fácil né?! Depois trago mais tutos aqui pra vocês. Beijoks ;*

Caixa de Pesquisa personalizada

Boa Tardee Meninass!!

Hoje eu trouxe um tutorial muito fácil e muito lindo pra vocês! Eu coloquei aqui no blog hoje, podem ver a caixa de pesquisa, como ela está personalizada, porque vou ensinar a ficar daquele jeito, ok? Vamos ao tuto! Eu aprendi esse tuto lá no Crazy HTML.

                      Vá no seu HTML aperte F3 e procure por ]]></b:skin>

                                               Acima dessa tag cole o código seguinte:

.search{
float: left;
font-family: arial !important; /* Fonte do campo de texto*/
}
.searchbar{
height: 20px; /*Altura da caixa*/
width: 120px; /*largura da caixa*/
text-align:center;
color:#000000; /* cor da fonte da caixa*/
background:#dcdcdc!important; /* cor de fundo da caixa */
box-shadow: inset 1px 1px 6px  #dcdcdc; /* sombra interna*/
font: 11px arial !important; /*fonte do texto*/
border: 2px solid  #000000; /* borda */
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.searchbut{
background: url('URL DO BOTÃO');
width:27px; /*Largura do botão*/
height:20px; /*altura do botão*/
border: 0;
padding:2px;
}

Agora é só alterar as cores, e o resto que falta. Eu peguei alguns botões do Crazy HTML pra vocês usarem:

                                 

              Agora vá em Layout  Adicionar um gadget  HTML JavaScript e cole o seguinte código:

<form action="/search" class="search" method="get"> <input class="searchbar" id="s" name="q" placeholder='Digite o que procura' type="text" value="" /> <input class="searchbut" type="submit" value="" /> </form>

 Se você quiser mudar o que está dentro da caixinha é só apagar o 'Digite o que procura' e colocar outra coisa.

Agora é só salvar e pronto! Fácil não é?! 
Se usar esses botões ou esse tutorial, creditem, ok?!
Bjoks ;*

Como deixar o título do post colorido

Hoooy garotas e garotos, Feliz Natal pra vocês o/  Hoje eu trouxe um tuto muito fácil e lindinho pra vocês que eu já havia prometido fazer aqui pra vocês. Esse tuto deixa o título do post colorido, como tem no título desse próprio post. Vamos ao tuto?

Quando você for fazer o post, você coloca o código seguinte no título:

                               <span style="color: COR;">O título do post aqui </span>

Aí é só colocar o título do post onde está indicando e a cor que você quer que fique o título.

Mas se você quiser deixar cada letra do post colorida, ou cada palavra, é só colocar o seguinte código:

<span style="color: COR;"> PALAVRA 1 </span> <span style="color: COR;">PALAVRA 2</span>

E é assim, simples! Sem falar que deixa o blog mais lindinho ^^
Beijões pra vocês, Byee!! 

Retirar a Navbar do blog

Oii, trouxe um tutorial pra vocês hoje que é muito fácil e que deixa o blog mais bonito e organizado. A Navbar é aquela barrinha que fica no topo do blog e é muito feinha. Então vamos ao tutoo!!

- Vá no HTML do seu blog e aperte Ctrl + F e procure por:

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

- ACIMA desse trecho que você procurou, cole o código abaixo:

<!-- Navbar-->
<script type='text/javascript'>
<![CDATA[
<!--
/*<body>*/
-->
]]>
</script>
<!-- Navbar-->

Depois de feito isso, é só salvar as alterações, e pronto! Muito simples não é?! E sem falar que deixa seu blog muito mais bonito e moderno.

Qualquer dúvida é só comentar aqui no post, ok?!
Bjãão bombons ^^

Tutoriais de Natal

Oii, como eu prometi, aqui estou eu pra ensinar a vocês como colocar o papai noel correndo pelo blog e a neve caindo. Eles são muito fofos e vão dar um toque especial no seu blog nesse mês de dezembro, não é
mesmo?! Então vamos aos tutos ^^


Neve caindo no Blog

Esse tuto é bem fácil de fazer, é só adicionar um gadget HTML/Javascript e colar o seguinte código:

                  <script src="http://static.tumblr.com/8l2gpxb/lcllulgcn/snowstorm.js"></script>

Pronto! Agora é só salvar =3


Papai Noel correndo pelo blog

Esse papai noel também é muito fofo pra colocar no blog, e é muito simples de colocar também, é só adicionar o HTML/Javascript e colar o seguinte código:

              <script type="text/javascript" src="http://blogparts.giffy.me/0017/parts.js"></script>

Agora é só salvar!!

               Créditos: Esse tutorial foi tirado do The Lovers (eu adoro esse blog *-*)

E aí, gostaram desses tutos? São bem simples né?! Espero que tenham gostado e que usem nos seus blogs pra eles ficarem mais fofos do que já são. Beijosss!

CdS em clima de Natal

Oiii, já estamos em clima de Natal!! Perceberam que coloquei uma neve aqui no blog? (acho que sim né?!) qualquer dia desses eu trago pra vocês o tutorial de como colocar no blog, ok? Bom, eu também coloquei uma papai noel superfofo >< também trago depois o tutorial (tô sem tempo agora =3). Já coloquei pra vocês algumas ilustrações de post pra vocês, gostaram? Espero que sim. Trago todos esses tutos depois pra vocês deixarem seus blogs em clima de natal.
Bjuuuuuss.