segunda-feira, 23 de setembro de 2013

Coluna da Câah : Como colocar blockquote personalizado

A maioria das pessoas não sabem oque é blockquote , é super simples


seu blockquote ficará dessa maneira , Ok ?!

1° Vamos Editar 
Vá no MODELO >>> Editar HTML >>> Procure por CTRL + F e cole a seguinte tag
]]></b:skin>
Salvou ? Acima cole :
blockquote {
padding: 5px;
font-size: 11px;
color: #696969;
background-color: #f5f5f5;
border-right: 9px solid #FF82AB;
border-left: 9px solid #FF82AB;
text-align: center;
box-shadow: inset 0 0 15px #ecebeb, 0 0 5px #d2d1d3;
-webkit-transition-duration: .50s;
}
blockquote:hover {
border-right: 3px solid #c6ec92;
border-left: 3px solid #c6ec92;
-webkit-transition-duration: .50s;
} 

Coluna da Câah : Retirando "Assinar Postagens (Atom)"

Na minha opinião a coisa mais sem noção que o mundo blogger poderia ter inventado é aquela tag chata que agente sempre vê no final de uma postagem  acho que muitos já conhecem a malvada assinar postagens (atom) hoje vou ensinar como retirar essa tag que irrita tanto os blogueiros . Lets Go!
Editando o HTML 



Agora dê CTRL + F e procure por 

]]></b:skin>
Acima cole :
.feed-links{display:none !important;} 
 Visualizou ? Certinho ? Para mim deu tudo certo (:

Créditos do tutorial Blogueira Rebelde !

Beijinhos *-*

sexta-feira, 20 de setembro de 2013

Coluna da Câah : Criando um Layout Básico Parte |||


Olá meus amores , finalmente estamos na 3° e ultima parte de nosso Layout Básico *-*
Peguei alguns tutoriais na web para ajudar vocês a finalizarem o Layout  !!





Coluna da Câah : Criando um Layout Básico Parte ||



Hey MORANGO
Olha a parte 2 do Layout Básico *-*
Já aprendemos a : Colocar Leia mais personalizado , Colocar Blockquote , Colocar ribbon no título dos gadgets , vamos colocar um Menu Marshmallow para deixar mais ''Kawaii''

Peguei esse tutorial no Rainha de Paris



1° Vá no MODELO >>> EDITAR HTML >>> CTRL + F 
Procure pela tag 
 ]]></b:skin>
Logo acima cole 
@font-face {font-family: 'Pixelade';src: url('http://static.tumblr.com/ig73lmp/FNdmcixx3/pixelade.ttf');}
Lembre-se está é a fonte do seu MENU . Após isso cole acima de ]]></b:skin>
/* Menu Marshmallow por Pequena Garota*/marsh{color: #949494; /*cor da fonte*/text-align:center;font-family: Pixelade; /*não altere*/font-size: 13px;background: #FEF2F1; /*fundo do menu*/padding: 2px;float: left;margin: 2px;width: 22%; /* tamanho do menu */-webkit-transition-duration: .80s;box-shadow: inset 0 0 18px #ffe4e1, 0 0 3px #FFD1CC; /* sombra interna */border-radius: 3px; /*bordas arredondadas*/}marsh:hover{background: #f0f8ff; /*fundo do menu ao passar o mouse*/color: #949494; /*cor da fonte ao passar o mouse*/-webkit-transition-duration: .80s;box-shadow: inset 0 0 18px #D7ECFE, 0 0 3px #afeeee; /* sombra interna */border-radius: 3px; /*bordas arredondadas*/} 
 Este é o modelo junto as cores , como podem ver é super simples . ATENÇÃO
box-shadow: inset 0 0 18px #D7ECFE, 0 0 3px #afeeee; /* sombra interna */ 
 Agora para aplicar ao blog é super simples ! Vá no Layout >>> ADD UM GADGET 
HTML/JAVA SCRIPT , e cole o seguinte código
<div><a href=" LINK "><marsh> NOME</marsh></a><a href=" LINK "><marsh> NOME </marsh></a><a href=" LINK "><marsh> NOME </marsh></a><a href=" LINK "><marsh> NOME </marsh></a>



Vamos aos afiliados :3
2° Como colocar efeito de afiliados no blog
Outro tutorial fantástico do Rainha de Paris
MODELO >>> HTML >>> CRTL + F 
]]></b:skin>
Acima cole
.spineffect{max-width:85px;-moz-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out;-o-transition: all 0.5s ease-out;-ms-transition: all 0.5s ease-out;transition: all 0.5s ease-out;}    .spineffect:hover{-webkit-animation-name: spin;    -webkit-animation-duration: 400ms;    -webkit-animation-iteration-count: 2;    -webkit-animation-direction: alternate;}@-webkit-keyframes spin {from {opacity: .99;    -webkit-transform:rotate(0deg);    -o-transform:rotate(0deg);    -moz-transform: rotate(0deg);}    to {opacity: .30;     -webkit-transform:rotate(360deg);    -o-transform:rotate(360deg);    -moz-transform: rotate(360deg);}}
 Agora aplique um Gadget HTML/JAVA SCRIPT
<a href="LINK DO BLOG"title="NOME DO BLOG"><img src="LINK DA IMAGEM"   class="spineffect"/></a>
BÔNUS










Coluna da Câah : Criando um Layout Básico Parte |


                          
Já pensou em criar seu próprio layout , e ainda ter seus próprios beneficios ?
Isso pode se tornar realidade ! Siga esse tutorial até o fim e terá um Layout Básico porém 
Fashion em seu blog , Lest Go !

Antes de tudo , faça o BACKUP do seu MODELO COMPLETO para não perder nada .
Ou apenas crie um blog de Teste/Demo


1° Vou começar editando HTML , vamos colocar um Leia Mais Personalizado
Vá no seu MODELO >>> Editar HTML >>> Aperte CTRL + F para facilitar a busca
Procure pela tag
<data:post.jumpText/>
Quando achar Apague! E substitua por 
<img src='LINK DA IMAGEM'/>
Editar é super simples como podem ver , apenas mude "LINK DA IMAGEM" pelo o URL de seu Leia Mais

Bônus 



2° Já que estamos cuidando das postagens primeiro , que tal o tutorial do blockquote ?
Não sabe oque é isso ?! Não tem problema ele veio se apresentar *-*
Olá , sou muito usado em tutoriais :) Tenho fundos e bordas variadas . Ainda não me conhece ? Prazer BLOCKQUOTE
 Peguei esse tutorial no Cherry Bomb , ele é super bem explicado então tenho certeza que vocês não iram ter complicações ao aplica-lo 
MODELO >>> EDITAR HTML >>> CTRL + F 

 ]]></b:skin>
Acima da tag ^^ cole 

.post blockquote { 

background:url(LINK DA IMAGEM DE FUNDO AQUI) ; /*Altere o fundo como preferir*/ 

border:2px dashed #2b2a59; /*Altere a cor da borda como preferir*/ 

padding: 5px; 

margin:10px 20px 10px 20px; 

}  

Agora edite as cores e substitua LINK DA IMAGEM DE FUNDO AQUI pela imagem de fundo do blockquote selecionado 
Aplicando o blockquote




3° E último tutorial do dia :/ vou começar a alterar os Gadget's Widgets 
Vamos aprender como colocar ribbon no titulo do widget
/* Mobile 
Antes de Body.Mobile cole
.sidebar .widget h2{
background: url(LINK DA SUA FAIXINHA)  no-repeat left;
margin-top:-2px;
margin-left:-19px;
margin-bottom:0px;
 
padding:15px;
width:150%;
overflow:hidden;
}
Agora é só editar LINK DA SUA FAIXINHA pelo URL do Ribbon
Bônus 


Se vocês estão pensando que é só isso estão estramamente enganados :3 
Acompanhe a Parte || A Parte ||| e quem sabe a Parte |||| não é ?!



Coluna da Câah : Como aplicar Cortininha no blog + Bônus



 Hey CLnators , trouxe para vocês um tutorial de como aplicar cortininhas em seu blog .
 É um tutorial super simples & sem complicações , GO !

Vá no LAYOUT >>> Add um Gagdet >>> HTML/JAVA SCRIPT
Cole o seguinte trecho 


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



Vamos Editar?!
Onde está escrito "URL DA CORTININHA" você apaga e cola no lugar o URL da imagem Cortininha escolhida !

Bônus 

Parabéns você ganhou 3 cortininhas como bônus !!









Playlist de Setembro