segunda-feira, 10 de setembro de 2012

Personalizando a área de postagem com mini gifs


Hoje vou ensina-los a encher sua pagina de mini gifs. eu peguei esse tutorial no site vodca e coca.

O código que você ira "inserir" é :
<img src='URL DA IMAGEM AQUI' style='border:0px;'/>
Agora depende aonde você quer colocar.

Ao lado do autor, em baixo do Titulo da Postagem:
de ctrl-f e procure por <b:if cond='data:top.showAuthor'>
no primeiro código que aparecer.

Ao lado dos marcadores, em baixo do Titulo da Postagem:
de ctrl-f e procure por <a expr:href='data:label.url' rel='tag'>
no primeiro código que aparecer.

Ao lado dos comentários, em baixo do Titulo da Postagem:
de ctrl-f e procure por <b:if cond='data:blog.pageType != &quot;item&quot;'>
no primeiro código que aparecer.

Ao lado do autor no rodapé da postagem:
de ctrl-f e procure por <b:if cond='data:top.showAuthor'>
no segundo código que aparecer.

Ao lado dos marcadores, em baixo do Titulo da Postagem:
de ctrl-f e procure por <b:if cond='data:post.labels'>
no segundo código que aparecer.

Ao lado dos comentários, em baixo do Titulo da Postagem:
de ctrl-f e procure por <span class='post-comment-link'>
no segundo código que aparecer.

você ira inserir o código do mini gif logo após do código de onde você quer que ele fique.

ex:<b:if cond='data:top.showAuthor'><img src='URL DA IMAGEM AQUI' style='border:0px;'/>

código roxo:  aonde você deseja colocar o mini gif.
código em vermelho:  url do mini gif. * não altere o codigo.

domingo, 9 de setembro de 2012

Tutorial-Sidebar com efeito hover



o tutorial eu retirei desse site http://cherrycupcaskull.blogspot.com.br/ ,então vamos ao Tutorial ?

Primeiramente faça aquele esqueminha,va em Modelo e clike em Editar Html,depois de abrir vai parecer um tipo de advertencia e aperte prosseguir depois  aperte f3 ou crtl f e procure por:
/* Widgets.


Em baixo disso ira aparcer:
.sidebar .widget {

Abaixo do codigo acima vc ira colocar:
background: #CorDoFundo;
font-family: calibri; /*Mude a fonte conforme seu gosto*/font-size: 10px; /*Tamanho da fonte*/color: #CorDaFonte;padding: 10px; /*Não modifique aqui*/  border: 10px solid #CorDaBorda; /*Grossura da borda, que é sólida, a cor é você quem escolhe.*/border-radius: 5px 50px 5px 50px; /*Bordas arredondadas*/ -webkit-transition-duration: 1.50s; /*duração da transição*/ }


Abaixo desse codigo cole :
.sidebar .widget:hover {background:#CorDoFundoAoPassarOMouse;border: 10px solid #CorDaBordaAoPassarOMouse;border-radius: 50px 5px 50px  5px; /*Bordas arredondadas*/}

feito por B-LOVE-Anime do eternamente otaku

Tutorial - Tirando contorno e sombra da imagem no modelo Espetacular


Bom sabe o Tema/Templante/Modelo Espetacular,então ele é otimo muito bom,mas a unica coisa q eu nom gosto nele é essas bordas e essas sombras q fikam na  imagem,então hj eu vou postar como tirar isso ^^


Procure isso:
  <Variable name="image.shadow.spread" description="Image Shadow
Vc vai notar q em baixo disso tem:

<Variable name="image.shadow.spread" description="Image Shadow Size" type="length" default="0" value="20px"/>
   <Variable name="image.border.radius" description="Image Border Radius" type="length" default="0" value="5px"/>

Aonde esta vermelho,é o numero da borda,isso pode variar,por exemplo aonde eu testei primeiro esta com o numero 10 px e o numero 20 px,a nesse esta 20 px e 5 px então nom se preocupe...
Agr depois de axar isso vc vai trocar oq esta em vermelho por 0 px


Bom pode acontecer da sombra sair mas a borda ñ,então se a borda fikar procure por:
<Group description="Images" selector=".main-inner">
Abaixo vc vai encontar isso:
 <Group description="Images" selector=".main-inner">
     <Variable name="image.background.color" description="Background Color" type="color" default="transparent" value="#000000"/>
Como eu disse antes o numero em vermelho pode variar,então ñ fikem nervosos depois disso subistitua,esse trecho inteiro  por isso:

 <Group description="Images" selector=".main-inner">
     <Variable name="image.background.color" description="Background Color" type="color" default="transparent" value="transparent"/>

Feito por B-LOVE-Anime do eternamente otaku

Tutorial -Menu Lateral


Bom eu retirei esse tutorial do blog Vodka e Coca (www)

Va em Modelo e clike em Editar Html,depois de abrir vai parecer um tipo de advertencia e aperte prosseguir depois  aperte f3 ou crtl f e procure por:

]]><b:skin>

Depois disso cole acima desse codigo isso:

/*MENU LATERAL*/
.menuam { width: 185px; padding: 13px; height: 100%; border-right: 8px solid #d62b44; background: #efefef; color: #; top: 0; margin: 0; position: fixed; left: -200px; height: 100%; -webkit-transition: all .3s ease-out;  -moz-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; overflow: hidden; cursor: default; font-weight: normal;  z-index: 12345; }
.menuam:hover { left: 0; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; }
.menuam a { border: none; background: #d62b44; color: #fff; padding: 5px; display: block; width: 100%; text-transform: uppercase; -webkit-transition: all .1s ease-out; -moz-transition: all .1s ease-out; -o-transition: all .1s ease-out; transition: all .1s ease-out; font-size: 7pt; margin: 5px -10px; text-shadow: 0 1px 1px #; }
.menuam a:hover { background: #919191; -webkit-transition: all .1s ease-out; -moz-transition: all .1s ease-out; -o-transition: all .1s ease-out; transition: all .1s ease-out; padding-left: 20px; }
.menuam a:first-child { margin-top: 10px; } .menuam a:last-child { margin-bottom: 0px; }
.menuam a { padding: 4px 6px;
}

Agr procure por:

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

<div class='menuam'> <a rel='nofollow'><font style=' text-transform: none; font: italic 20px georgia;'><div align='left'> Titulo do Menu</div></font></a> <a href='URL DA PAGINA' onClick='changeNavigation(&apos;profile&apos;);'>NOME DA PAGINA</a> <a href='URL DA PAGINA' onClick='changeNavigation(&apos;profile&apos;);'>NOME DA PAGINA</a> <a href='URL DA PAGINA' onClick='changeNavigation(&apos;profile&apos;);'>NOME DA PAGINA</a> <a href='URL DA PAGINA' onClick='changeNavigation(&apos;profile&apos;);'>NOME DA PAGINA</a> <a href='URL DA PAGINA' onClick='changeNavigation(&apos;profile&apos;);'>NOME DA PAGINA</a> <a href='URL DA PAGINA' onClick='changeNavigation(&apos;profile&apos;);'>NOME DA PAGINA</a> <a href='URL DA PAGINA' onClick='changeNavigation(&apos;profile&apos;);'>NOME DA PAGINA</a>      
</div>

Visualize,veja se esta certo e pronto

Tutorial como tirar o fundo do cabeçalho html



Como retirar o fundo do banner ou do titulo (cabeçalho), mas pelo html.


Primeiramente vai em ->;Modelo ->;Editar Html,depois vai aparecer algo na tela,vc clica em prosseguir,aperte ctrl f ou f3 e procure por :
  <Group description="Blog Title" selector=".header h1">


Feito isso vc vai selecionar todo esse codigo:
  <Group description="Blog Title" selector=".header h1">
     <Variable name="header.font" description="Title Font" type="font"
         default="normal bold 40px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 48px Georgia, Utopia, 'Palatino Linotype', Palatino, serif"/>
     <Variable name="header.text.color" description="Title Color" type="color" default="$(body.text.color)"  value="(COR DA SUA FONTE)"/>
     <Variable name="header.background.color" description="Header Background" type="color" default="(COR DO FUNDO)"  value="(COR DO FUNDO)"/>
   </Group>


E vai trocar por esse:
  <Group description="Blog Title" selector=".header h1">
     <Variable name="header.font" description="Title Font" type="font"
         default="normal bold 40px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 48px Georgia, Utopia, 'Palatino Linotype', Palatino, serif"/>
     <Variable name="header.text.color" description="Title Color" type="color" default="$(body.text.color)"  value="#333333"/>
     <Variable name="header.background.color" description="Header Background" type="color" default="transparent"  value="transparent"/>
   </Group>
Vizualise e veja se deu certo se deu salve e pronto!
Agr a letra do seu titulo vai ser diferente,se vc quiser mudar a letra faça o msm esquema de sempre
->;Modelo->;Personalizar->;Avançado->;Titulo do blog,e mude sua fonte e a cor dela

E pronto,se usar credite !

Bye bye
Feito por B-LOVE-Anime do eternamente otaku

Tutorial -Links do Feed efeito Hover

Hj eu vou ensinar como colocar o link do feed efeito hover é bem simples pelo menos o geito q eu fiz é
Mas esse tipo ñ da para visualizar então recomendo q tenha uma copia do seu modelo,para caso aja erro vc tenha uma copia de segurança


Bom clike em "expandir modelos widgets".Agr aperte ctrl f ou f3 e procure:
.blog-feeds, .post-feeds {

Feito isso vc encontrara:
.blog-feeds, .post-feeds {
  margin: 1em 0;
  text-align: center;
  color: $(feed.text.color);
}
.blog-feeds a, .post-feeds a {
  color: $(feed.link.color);
}
.blog-feeds a:visited, .post-feeds a:visited {
  color: $(feed.link.visited.color);
}
.blog-feeds a:hover, .post-feeds a:hover {
  color: $(feed.link.hover.color);
}


Depois de encontrar isso substitua por isso:
.blog-feeds, .post-feeds {
  margin: 1em 0;
  text-align: center;
  color: $(feed.text.color);
}
.blog-feeds a, .post-feeds a {
  color: $(feed.link.color);
}
.blog-feeds a:visited, .post-feeds a:visited {
  color: $(feed.link.visited.color);
}
.blog-feeds a:hover, .post-feeds a:hover {
  color: $(feed.link.hover.color);
width:auto;-webkit-transition-duration:0.20s;}/*mude aki para o tempo q vc quiser q demore a transição de cores*\}

Aonde esta em vermelho mude para cor q vc quer

E aonde esta em verde mude para o tempo q vc quer q demore a transição
Salve e pronto
Feito por B-Love-Anime do eternamente otaku

quinta-feira, 6 de setembro de 2012

Tutorial-Efeito hover em imagens

hover que dexa a imagem com opacidade
Bom começe procurando por:
]]></b:skin>


Acima do codigo encontrado cole:
img:hover {
filter:opacity;
opacity: .20;
-webkit-transition-duration:1.30s;}
}

Vamos entender o codigo?
Oq esta em vermelho é a quantidade de opacidade q vc quer;
E aonde esta em verde,mude para o tempo da tranzição da imagem normal para a hover

Bye bye
Logo logo eu trago a do menu


fonte: eternamente otaku