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 != "item"'>
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='"loading" + 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('profile');'>NOME DA PAGINA</a> <a href='URL DA PAGINA' onClick='changeNavigation('profile');'>NOME DA PAGINA</a> <a href='URL DA PAGINA' onClick='changeNavigation('profile');'>NOME DA PAGINA</a> <a href='URL DA PAGINA' onClick='changeNavigation('profile');'>NOME DA PAGINA</a> <a href='URL DA PAGINA' onClick='changeNavigation('profile');'>NOME DA PAGINA</a> <a href='URL DA PAGINA' onClick='changeNavigation('profile');'>NOME DA PAGINA</a> <a href='URL DA PAGINA' onClick='changeNavigation('profile');'>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
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
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
Assinar:
Postagens (Atom)