Tutorial - Personalize a Footer dos Posts

              Olá amooras ;3 Repararam no novo layout do blog? Fui eu que fiz, espero que tenham gostado *----*
              Enfim, hoje eu trouxe um tuto bem legal, que é para personalizar a footer dos posts de um jeito bem sweet que fica bom em qualquer tipo de layout ^^

Tutorial

1. Tecle ctrl f e procure por post-footer, você vai achar um código mais ou menos assim:

.post-footer {
  margin: .5em 0;
  line-height: 1.6;
}

2. Apague esse código e substitua por esse:

.post-footer {
margin-top: 15px; /* espaço entre o rodapé e o post */
padding: 0;
 }
.post-footer-line-1, .post-footer-line-2 {
border-bottom: 1px solid #EEEEEE; /* cor, espessura e tipo da borda */
background: transparent; /* fundo do rodapé */
color: #666666; /* cor do texto */
font-family: Arial; /* fonte do texto */
font-size: 9px; /* tamanho da fonte */
margin: 2px 0; /* margem entre uma linha e outra, não altere */
padding: 1px 1px; /* espaço entre texto e margens, não altere */
text-transform: uppercase; /* transformação do texto */
word-spacing: .2em; /* espaço entre palavras */
text-align: left; /* alinhamento do texto */
 }

3. Edite as cores caso queira, visualize e se estiver tudo certinho salve 

Tutorial - Efeito Hover no Título dos Posts

              Olá minhas flores ;3  Hoje eu trago à vocês um tutorial bem legal! Que é para deixar um efeito hover os títulos dos posts, quem não entendeu  como é o efeito clica aqui e veja.
              Bem, vamos ao tutorial então galerinha?

Tutorial - Blockquote Hover

               Olá amoras ;3
               Hoje eu trouxe um blockquote feito por mim especialmente para vocês! O blockquote é bem fofo espero que gostem ^^
               Se usar credite. Ah! Cliquem aqui e vejam como é o blockquote (:

Tutorial

1. Vá no seu HTML, tecle ctrl f e procure por:

]]></b:skin>

2. Acima dessa tag cole o seguinte código:

/*BLOCKQUOTE POR BEMDEPOIISDOSDOZE.BLOGSPOT.COM NÃO RETIRE OS CRÉDITOS!*/
blockquote {
border: 2px solid #FF82AB; /* Estilo da borda normal */
background: #F5F5F5; /* Cor do background normal */
padding: 10px;
font-size: 13px; /* Tamanho do texto */
color: #607B8B; /* Cor do texto */
text-align: justify;
}
blockquote:hover {
border: 2px solid #6CA6CD; /* Cor da borda com o mouse por cima */
}

3. Prontinho! Vocês podem editar as cores de acordo com seu layout ~

Tutorial - Imagens com a Largura Total do Post

    Olá amoras *u*
    Hoje o tutorial vai ensinar a deixar as imagens na largura total do post avá ¬¬ como aqui e aqui.
    Esse tutorial é perfeito para quem, assim como eu, tem preguiça de ficar ajustando a imagem do post rsrsrs'

Tutorial

1. Vá no seu HTML, tecle ctrl f e procure por:

]]></b:skin>

2. Acima dessa tag cole o seguinte código:

.post img{ border: 0; /* borda na imagem em zero, não altere */margin: 0 -30px 0 -30px; /* margem da direita e esquerda, não altere */padding: 0; /* espaço entre margens e imagem, não altere */width:540px; /* tamanho máximo da imagem, pode e deve ser alterado */}

3. Altere somente o número destacado em negrito que é a largura da imagem do post e salve ^^

Tutorial - Imagens do Blog com Efeito Fade

Tutorial

1. Vá no seu HTML, tecle ctrl f e procure por:
]]></b:skin>

2. Acima dessa tag cole o seguinte código:

.main img {
 filter:alpha(opacity=100); 
-moz-opacity:1.0; 
opacity:1.0; 
-webkit-transition-duration: .70s;}
.main img:hover { 
filter:alpha(opacity=45); 
-moz-opacity:0.45; 
opacity:0.45; 
-webkit-transition-duration: .70s;} 

3. Caso queira uma duração maior ou menor edite o número destacado e salve.

Credits: Sweet Poison

Tutorial - 2 backgrounds no blog

Olá amoras ^^
Hoje eu trouxe um tutorial que eu acho bem legal,pois, da para fazer um efeito diferenciado no blog!
Então, vamos aprender! (:

Tutorial

1. Vá em: Design>Editar HTML>Prosseguir, tecle ctrl+f e procure por:

body {

2. Junto com ele você verá um código como o apresentado logo abaixo, apague somente a parte destacada na cor verde:

body {  font: $(body.font);  color: $(body.text.color);  background: $(body.background);}

3. Logo após a chave, cole o seguinte código:

body, html { height: 295px;
margin: 0; padding: 0;  }body {background: url("URL do 1º background") repeat; }
html { background: url("URL do 2º background") repeat; }

4. A parte destacada em roxo você ajusta o tamanho do primeiro background e a parte em verde você cola a URL das imagens.

Tutorial - Menu em Abas

Oiie minhas amoras *u*
Desculpem-me a demora pra postar, mas é que eu estou com alguns problemas pessoais e também estou ajeitando meu blog... :/
Mas enfim eu trouxe um tutorial bem legal e muuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuito útil, pois ajuda a organizar seu blog, que é o menu em abas!
Bora ver o tutorial?

1. Vá no HTML do seu blog e procure por: <head>

2. Logo abaixo dessa tag, cole o seguinte código:

 <link href='http://drikoti.net/Tabber/tabber-cinza.css' media='screen' rel='stylesheet' type='text/css'/><script src='http://drikoti.net/Tabber/tabber.js' type='text/javascript'/>

3. Salve e vá para o seu layout, adicione um novo gadget HTML/JavaScript e cole o seguinte código:
<!-- Ínicio Menu Abas ~ By Drikoti.Net -->
<div class="tabber">
<div class="tabbertab" title="Título 1">
Conteúdo 1
</div>
<div class="tabbertab" title="Título 2">
Conteúdo 2
</div>
<div class="tabbertab" title="Título 3">
Conteúdo 3
</div>
</div>
<!-- Fim Menu Abas ~ By Drikoti.Net -->

4. Fim! O seu menu está pronto ^^

Crédits: Drikoti.net

Tutorial - Dividir o Post em 2 ou 3 colunas

Olá amoouurees :D Tudo bem com vocês anjos? Espero que sim ^^
Desculpem-me o tempo sem postar, mas é que eu tenho uns trabalhos da escola para fazer e estou super atrapalhada com meu blog, com muitas coisas para fazer!
Mas enfim eu trouxe um tutorial bem legal e muito útil para quem tem página de goodies, que é para dividir a postagem em 2 ou 3 colunas. Os créditos são para o blog World Girl (-:

Tutorial *u*

Vá na parte de HTML do post e cole o seguinte código:
Para dividir em 2 colunas:

<div style="float: left; width: 45%">Escreva aqui o Texto da Coluna da Esquerda</div><div style="float: right; width: 45%">Escreva aqui o Texto da Coluna da Direita</div><div style="clear: both"></div> 

Para dividir em 3 colunas:

<div style="float:left;padding:2px;text-align:center">esquerda</div><div style="float:right;padding:2px;text-align:center">direita</div><div style="clear:both;padding:2px;text-align:center">meio</div>

E aí garotas, gostaram do tutorial de hoje?'

Estou de Volta + Tutorial: Separar os Posts

oooooooooooooooooown' *u*

   Olá meninas! Eu estou de voolta das férias, na verdade eu cheguei terça-feira às 17:25 só não tinha postado aqui ainda porque eu estava organizando minha vida real e a virtual (:
   Bom, eu mudei de apelido tá agora é Lizzy. Mas vocês podem me chamar do que quiserem :P
    Enfim, o tutorial de hoje é meeeega fácil! E já vem personalizado ^^

Tutorial:

1. Vá no seu HTML e procure por:
.main-inner .column-center-outer {    background:
$(post.background.color)$((post.background.url) repeat scrool top left; _background
image:none;}


2. Apague esse código, e substitua por esse:
.post-outer {
padding: 15px 10px;
margin: 5px 3px 25px;
-moz-border-radius: 10px; /* Para Firefox */
-webkit-border-radius: 10px; /*Para Safari e Chrome */
border-radius: 10px; /* Para Opera 10.5+*/
border: 1px solid #0000; /* Estilo, cor e grossura da borda */
}


3. Edite os números de acordo com o seu blog e salve!

Código base por: *u*

Tutorial - Efeito Arco-Irís nos Links!

Minha divaã <3

   Oiie amooures <3
   Hoje eu trago para vocês um "tutorial" que é suuuuuuuuuuuuuuuuuuuuuuper fácil, que é para deixar os links com aquele efeito arco-irís.
   Para ter esse efeito é só adicionar um gadget HTML/JavaScript e colar o seguinte código:

<script src='http://dl.getdropbox.com/u/647003/CiudadBlogger/Scripts/rainbowlinks.js'/> <br /> <br />  

   Prontinho! Todos os links do seu blog já estão com esse efeito! Bem simples né?

Tutorial - Blockquote com Efeito Hover

   Olá meninas, o tutorial de hoje vai deixar o blockquote com efeito hover. Ele vai ficar mais ou  assim:

~ O bloquote ficará assim ~

   Fofo né? Então vamos aprender a fazer!

Tutorial 

1. Vá no seu HTML, aperte o botão F3 e procure por:

]]></b:skin>

2. Acima de ]]></b:skin> cole o seguinte código:

/* Bloquote by Lets Be Happy */blockquote {background: #fafafa; /* Cor do background normal */border-top: 8px solid  #8470ff; /* Grossura, estilo e cor da borda de cima do bloquote */font-family:arial; /* Fonte do Bloquote */padding: 5px;font-size: 13px; /* Tamanho do texto */color: #27408B; /* Cor do texto */text-align: justify;border-top-right-radius: 5px;border-bottom-right-radius: 50px;}blockquote:hover {background: #FFF0F5; /* Cor do background com o mouse por cima */border-top-left-radius: 50px;}/* Fim do Bloquote by Lets Be Happy */

3. Visualize, se estiver tudo certo salve 

Tutorial - Borda em Volta da Área dos Posts

    Oiie minhas bolinhas de queijo de frango abafa o caso :P
    E os créditos do tutorial são à mim, pois fui eu que criei :) que orgulho :,)
    Como eu não sei mais o que falar, vamos ao tutorial né?

 Tutorial !

Vá no seu HTML, tecle ctrl f e procure por:

.main-inner .column-center-inner {

Abaixo dessa tag cole o seguinte código:

border: 1px solid #DCDCDC; /* Estilo, cor e grossura da borda */box-shadow: inset 0 0 20px #eee, 0 0 3px #ccc; /* Sombreamento */

Visualize e se estiver tudo certo, salve 

Tutorial + Barra de Rolagem com Efeito Hover

    Oiie meus babies, uhuuul depois de 2 dias de viagem cheguei no meu destino! [de São Paulo para Sergipe]
    Mas, enfim, vamos deixar os papos aleatórios de lado e vamos ao que nos interessa!
    Hoje eu trouxe um tutorial que eu acho bem legal, que é a barra de rolagem com efeito hover! O resultado é super fofo *u* Eu achei esse tuto num blog que eu amo, que é o A última princesa, os créditos são todos à ela <3

Tutorial:

Vá no seu HTML, tecle ctrl f e procure por:

]]></b:skin> 

E logo abaixo dessa tag, cole o seguinte código:

html::-webkit-scrollbar {width:22; height:auto;background: #D3D3D3;}html::-webkit-scrollbar-corner { background: #D3D3D3;}html::-webkit-scrollbar-button:vertical {height:1px;display:block;}html::-webkit-scrollbar-button:horizontal {width:1px;display:block;}html::-webkit-scrollbar-thumb:vertical {background: #DDA0DD;border: 1px solid  #D3D3D3;border-right:none;-webkit-border-radius: 8px;}html::-webkit-scrollbar-thumb:horizontal {background: #DDA0DD;border: 1px solid #D3D3D3;border-bottom;}html::-webkit-scrollbar-thumb  {background-image: url(http://static.tumblr.com/y2cy4ou/EU1lwium0/pat1.bmp);}html::-webkit-scrollbar-thumb:hover {background-image: url(http://static.tumblr.com/y2cy4ou/EU1lwium0/pat1.bmp);border: 1px solid  #A2A2A2;}html::-webkit-scrollbar-track-piece {background: none;}html::-webkit-scrollbar:vertical {border-left: 1px solid #A2A2A2;}html::-webkit-scrollbar:horizontal {border-top: 1px solid #A2A2A2;}

Oque está em negrito é a cor do fundo sem o mouse por cima, o que está em sublinhado a cor da barra, e oque está em itálico é a imagem hover, se você quiser substituir por uma cor, só retirar o -image: url(http://static.tumblr.com/y2cy4ou/EU1lwium0/pat1.bmp) por : #códigodacor e o que está em roxo é a borda da barrinha e a do fundo. Bom, visualize, se estiver tudo certo, salve ^^

E ai gostaram do tutorial? Espero que sim, kissus ;*

Aviso + Tutorial

    Oie meninas, desculpem pela demora para postar mas é que eu estava tendo problemas com o meu blog. Estava acumulando muitos comentários, e não só estava como ainda está dando problemas o meu layout. Me desculpem mais uma vez :\
    Ah, eu quero avisá-las que irei viajar sábado de madrugada (07/07), até porque eu não sou de ferro né, também mereço férias!
   Mas eu programei várias postagens para vocês, nos dias: terça-feira e quinta-feira.

 

   Agora que as senhoritas já estão avisadas, vamos ao tutorial \õ/
   O tutorial de hoje é para personalizar a tooltip, para quem não sabe o que é olha a imagem abaixo:

Entenderam? Então vamos ao tutorial! 

Vá no seu HTML, tecle  ctrl f  e procure por:

</head>

Acima de </head> cole o seguinte código:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/><script language='JavaScript' src='http://dl.dropbox.com/u/35546279/qTip_pinkskulldesign.com_.js' type='text/JavaScript'/>

Tecle  ctrl f  novamente e procure por:

</b:skin>

Acima dessa tag cole o seguinte código:

/* TOOLTIP BY BEM DEPOIS DOS DOZE */    div#qTip {    padding: 10px;    border: 2px solid #FF69B4; /* cor, expressura, e estilo da borda */    border-right-width: 1px;    border-bottom-width: 1px;    display: none;    background: #e9eeef; /* cor do fundo */    color: #FF69B4; /* cor do texto */    font: Verdana;    font-size: 10px; /* tamanho da fonte */    text-align: right;    position: absolute;    z-index: 1000;    -webkit-border-radius: 4px;    -moz-border-radius: 4px;    border-radius: 4px;/* FIM DA TOOLTIP BY BEM DEPOIS DOS DOZE */}

 

Tutorial - Efeito Hover no Cursor

Credits: Just Tonight

1. Vá no seu layout e adicione um gadget HTML/JavaScript.

2. Cole o seguinte código:
<style>/*** INICIO CURSOR***/body {cursor:url("URL DO CURSOR"),default}/***efeito quando passa o mouse em link***/body a:hover {cursor:url("URL DO CURSOR"),pointer}/*** FIM***/</style> 


3. Onde está escrito em cor de rosa você coloca a url do cursor normal e onde está escrito em vermelho você coloca a url do cursor que você quer que apareça quando passado sobre o link.

Facinho né ^^

Desculpem a demora para postar :s

Kissus ~~> Mya

Retirando o Link Assinar Postagens Atom

   

   Oii meninas de moustache *u*
   Hoje o tutorial, óbviamente, é para retirar quele link chato que fica lá no finalzinho do blog o "assinar postagens atom".
   Bora pro tuto então né!

1. Vá para o seu HTML, tecle ctrl f e procure por: ]]></b:skin>

2. Acima dessa tag cole o seguinte código: .feed-links {display: none;


3. Visualize se estiver tudo certo, salve ^^

Bem fácil né? Espero ter ajudado ;]

Tutorial - Título dos Gadgets em Caixinhas

Olá meninas, desculpem ter ficado esses dias sem postar. Mas é que, tá díficil eu postar porque eu estou cheia de coisas para fazer e ainda tenho o meu blog que não pode ficar parado!
Pelo título acho que vocês não devem ter entendido muito bem como é essa "caixinha", mas, vocês com certeza já viram em algum lugar! Essa caixinha no título dos gadgets é como a do blog Lie Marie <~~ clica no link!
Em fim, aqui está um tutorial bem legal para as senhoritas e os senhoritos kkkkk' ^^

Tutorial 

1. Vá no seu HTML, procure por ]]></b:skin e acima dessa tag cole o seguinte código:

.sidebar h2 {text-align:center;background-color:  #FFFAFA; /*cor do fundo*/
padding:2px;
border: 1px dotted padding:2px;border: 1px dotted  #696969; /*cor da borda*/
-webkit-transition:0.4s;
display:inline;
float:right;
margin-top:-21px;
text-shadow: 0px 1px 1px transparent;
}

2. Prontinho! Agora é só você editar as cores de acordo com o seu gosto e salvar ^^

Credits: Spazio DM

Apresentação + Tutorial

A arte de colocar imagens que não tem nada haver com o post? Essa eu domino! .-.

   Oii bolinhas de queijo *u*
   Bem, eu sou a Hellen, mas me chamem de Mya por favor, do blog Let's Be Happy! E, a partir de hoje vou postar vááários tutoriais para vocês aqui no Bem Depois dos Doze...
   Como eu não sei mais o que falar :p  vamos logo ao tuto néa?
   O tutorial de hoje é beem facinho, é para destacar a primeira letra do post.

Tutorial 

1. Vá no seu HTML, tecle ctrl f, procure por ]]></b:skin> e Antes dessa tag cole o seguinte código:


big {
font-size:50px; /*tamanho da fonte*/
font-style:bold;
color: #ff1b72; /*Cor da letra*/
line-height:30px; /* altura da linha*/
float:left;
}


2. Altere tudo de acordo com o que está entre as /* */ e salve. ^^


3. Para a letra aparecer destacada é só você ir na parte HTML do post e colocar <big></big> entre a primeira letra do post! Exemplo:

<big>O</big>lá meninas! Hoje o assunto é moda e blá blá blá...

Bem fácil né? ^^

Espero que gostem dos meus tutos!

Kisses, Mya.