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.

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

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

Tutorial - Tirando contorno e sombra da imagem no modelo Espetacular

Bom eu estou voltando com mais um tutorial,é minna ainda tem mais 2.
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


Voce vai notar que 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="#ffffff"/>

fonte: eternamente otaku

Tutorial como tirar o fundo do cabeçalho html

Bom minna esses dias atras eu tava me lembrando de uma pergunta de uma amiga me fez,ela queria saber como retirava o fundo do banner ou do titulo (cabeçalho),então eu resolvi postar hj como tira ele,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
Credite se usar

fonte: eternamente otaku

Como desenhar em estilo manga parte 1

Bom minna eu vou fazer uns tutoriais de como desenhar mangá e suas tecnicas
Materias

Como fazer o rosto

Como desenhar os olhos

Agr vem o nariz,não desenhe-o todo apenas a sombra assim facilitara e tambem dara um charme
A boca,desenha-a apenas a divisão dos labios,sem o contorno nem nada,e geralemente mulheres adultas são desenhadas com labios pretos,para representar batom escuro.

Como desenhar o cabelo

O resultado final deveria ser esse:

Esboços

Finalizado e reticulado

Em preto e branco pronto pra colorir e colocar no anime

Materiais necessarios para desenhar em estilo manga

Objetos basicos:
Papel
Lapis
Borracha,de preferencia aquelas verdinhas ou as da faber castell são muito boas
Régua
Caneta esferografica preta
Canetinhas e lapis de cor,para fazer a capa etc

Objetos para os profissionais:
Penas
Pincel
Tinta
Espelho
Lenço de Papel
Tinta Branca
Bokuju (tinta japonesa escura)
Cabo para bico de pena
Pontinho de Agua
Papel
Regua
Lapis
Borracha
Mesa de Luz
Escova de limpeza

Como desenhar cabelo em estilo manga

Um penteado em uma personagem feminina pode dizer muito. Cabelo grande ondulado mostra a beleza, enquanto que a curto e plano mostra um moleque ou até uma personalidade mais escura. No anime e mangá, o cabelo pode ter qualquer cor que um artista pode criar. Para um visual esportivo, você pode desenhar o cabelo em um rabo de cavalo, ou mesmo tranças, cabelo curto é geralmente dada a personagens maternais ou personagens idosos. Antes de desenhar o cabelo, você precisa desenhar a cabeça. As mulheres tendem a ter rostos em forma de coração. Depois de ter criado o formato da cabeça que você deseja, você pode começar o cabelo. Para começar o cabelo do seu personagem, desenhe uma linha horizontal de um terço abaixo do comprimento do rosto. Não se preocupe se a linha entre o topo da cabeça e da linha do cabelo parece muito grande, isso é normal por causa da franja da frente que são necessários para as personagens femininas. Para criar a franja, desenhar um curto V que paire sobre o couro cabeludo. Estas linhas devem ficar um pouco mais altas dos olhos, mas você pode torná-los mais se desejar. Alguns artistas desenham a franja mais perto das orelhas que emolduram o rosto do personagem. Após a franja, tirar o maior fio de cabelo do topo da cabeça onde você quiser o cabelo do personagem para ser se é longo ou curto. Depois de ter feito isso, terminar o resto do cabelo desenhando o resto das linhas para fazer o fluxo de cabelo. Você pode fazer as linhas retas ou ondulado, crespo ou cacheado realmente, dependendo do tipo de personagem que você quiser chamar. Essas linhas são desenhadas começando pelo topo da cabeça e estendendo-se para o comprimento do cabelo. Depois de ter terminado isso, então você pode adicionar acessórios e acrescentando linhas dramáticas para criar movimento ou até mesmo dar-lhe algum tipo de textura. Adicione a cor ao cabelo ou deixar apenas o preto e branco como você deseja.

EXEMPLOS DE CABELO FEMININO:

EXEMPLO DE CABELO MASCULINO:

Como desenhar olhos em estilo manga

Vamos começar pelos olhos, os personagens são desenhados geralmente com olhos grandes, os cilhos longos e grossos.

Como desenhar olhos de meninas:


Ao desenhar olhos femininos é preciso perceber as diferenças entre os olhos de um macho e uma feminina. Ao desenhar olhos de uma fêmea, tem que considerar o fato de que os olhos das meninas são desenhados maiores e mais redondos do que os olhos de homem. O que você tem que considerar ao desenhar olhos de uma mulher é o tamanho do próprio olho, a íris, os cílios e as sobrancelhas. Para começar a desenhar o olho você pode usar um formato arredondado ou dar aos olhos uma forma de gato para os olhos mais escuros que são dadas aos vilões. Para os olhos femininos, desenhar ovais mais amplas e maior para a íris. Todos os fazem de maneiras diferentes, mas precisam manter a iluminação em mente, porque os olhos do sexo feminino tendem a brilhar mais do que os olhos masculinos. Depois de terminar o olho e adicionar cor a ele, você pode desenhar as pálpebras e construir os músculos ao redor dos olhos. Pálpebras são importante ao dar a profundidade dos olhos e fazer com que pareçam mais detalhados. Ao desenhar as pálpebras, você também precisa cuidar dos cílios. Olhos femininos tendem a ter longos cílios grossos, para mostrar feminilidade. Finalmente, o olho precisa de sobrancelhas para acabar com os olhos. As sobrancelhas também são importantes para mostrar emoção. Sobrancelhas levantadas mostram surpresa, sobrancelhas que são anguladas ira mostrar para baixo, e quando uma sobrancelha está armada, que iria mostrar sinais de confusão. As mulheres ter cílios mais finos enquanto os homens mais espessos. Exemplos de olhos:

Exemplos de olhos:

Olhos coloridos:

Como desenhar cabeça em estilo manga

Para desenhar o rosto,desenhe uma forma oval e faça uma cruz no meio assim vc tera como base aonde sera os olhos nariz boca e orelhas.

Cabeças desenhadas de angolaçoes diferentes:

Removendo a Navbar sem html

Nesse tutorial eu vou ensinar como remover a navbar sem html é bem simples.
Bom vá em Layout,e clika no quadrinho:Navbar,clikou nela vai abrir uma pagina,depois em baixo da pagina antes de salvar ta escrito desativado,clike nele e pronto sem navbar!

Como fazer png's

Oi! hoje iremos ensinar como fazer png's. Esse tutorial foi feito por B-LOVE-Anime do eternamente otaku: Abra seu photoshop,abra a imagem escolhida

Selecione a tela (ctlr a) ,para vc saber se a tela esta selecionada basta ver se tem uma linha pontilhada em volta da imagem

E depois copie-a (ctrl c)
Agora abra uma nova janela (ctrl n)e em baixo vai estar escrito branco

mude para transparente e clike em ok

E vai abrir uma janela igual a esta

Depois vc cola a imagem copiada (ctlr v) Agora vá em varinha magica e clike nela,depois c clika no fundo da sua imagem,e aperta del ou delete

 

E pronto a imagem ta png,agora é só vc salva-la com o formato png e pronto ^^
Aki esta a imagem q eu fiz p/ fazer esse tutorial