quinta-feira, 24 de novembro de 2011

mensagem ao entrar no blog

Eaw galera,
Este tutorial é muito simples.
Procure pela linha



</body>

Cole o seguinte código acima de  </body>.


<script>alert('TEXTO');</script>

Aonde está escrito TEXTO digite o que você quer que apareça como mensagem.

paginas numeradas

Eaw galera,
Nesse tutorial  vou ensinar a colocar páginas numeradas na página principal do blog.
Vá em "Design - Editar HML" e procure pela linha


]]></b:skin>

Acima dela adicione o seguinte código:


/* Page Navigation
----------------------------------------------- */
#blog-pager {
float: center;
}
.showpageArea {
margin: 10px 0;
}
.showpageArea a {
text-decoration: none;
}
.showpageNum a {
font-size:10px;
padding: 4px 8px 4px 8px;
margin: 2px;
text-decoration: none;
border: 1px solid #282828;
color: #000;
background-color: #ffffff;
}
.showpageNum a:hover {
border: 1px solid #333;
color: #000;
background-color: #cccccc;
}
.showpagePoint {
font-size:10px;
padding:4px 8px 4px 8px;
margin:0 5px 0 5px;
font-weight: bold;
border:1px solid #282828;
color:#000;
background-color: #cccccc;
text-decoration: none;
}
.showpageOf {
font-size:10px;
padding: 4px 8px 4px 8px;
margin: 5px;
color: #ffffff !important;
border: 1px solid #282828;
background-color: #838383;
}
.showpage a {
font-size:10px;
text-decoration:none;
border: 1px solid #282828;
padding: 4px 8px 4px 8px;
}
.showpage a:hover {
text-decoration:none;
border: 1px solid #282828;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#838383;
}

Depois disso procure pela linha


</body>

E, acima dela, adicione este código:


<!--Page Navigation Starts-->
<script align='center' type='text/javascript'>
var pageCount=3;
var displayPageNum=15;
var upPageWord =&#39;Voltar&#39;;
var downPageWord =&#39;Próximo&#39;;
</script>
<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v2.js' type='text/javascript'/>
<!--Page Navigation Ends-->


var pageCount=3;  é quantidade de página por numero , exemplo: Na pagina 1 vai ter 3 paginas , quando adicionar a quarta pagina aparece a página 2 e assim sucessivamente 


var displayPageNum=15;  Numero de Páginas Numeradas que irá aparecer




Resultado Final:
 

retirando atribuition

Primeiro vá em "Design - Editar HTML - Expandir Modelo Widget" e procure por


<b:widget id='Attribution1' locked='true' title='' type='Attribution'/>

excluir-widget-blogger-template


Basta clicar em "EXCLUIR WIDGET" e pronto.

texto animado em flash

Este tutorial é o mais simples de todos.
Basta você adicionar um gadget do tipo "HTML/JavaScript" e colar o código do script disponível neste tutorial.


<style type="text/css">
#frm {
position: relative;
height: 150px;
width:630px;
font-size: 1.8em;
font-weight: bold;
font-family: verdana, arial;
background: transparent;
overflow: hidden;
padding: 0.5em}
#frm span {
position: relative;
text-align: center;
z-index: 1;
color:#ffffff;
}
#mtxform {
position: relative;
z-index: 10;
}
.hidden {
visibility: hidden;
}
</style><script style="text/javascript" src="http://dl.dropbox.com/u/3173073/HacksBlogger/texto-animado.js">
</script>
<div id="frm"></div>
<form id="mtxform" name="mtxform"><button id="show" class="hidden" onclick="mtx.show();" type="button">Replay</button><span id="inputext" class="hidden"><textarea id="text" rows="0" cols="0" name="text">
ESCREVA O TEXTO DA PRIMEIRA LINHA
AQUI O DA SEGUNDA LINHA
</textarea><button onclick="mtx.changeText();" type="button">Play</button><input type="RESET" /></span></form>

Espero que vocês gostem

tradutor no blog

Como colocar um Tradutor...
Todo mundo se mata porque o inglês pega e o francês não pega, o alemão sim e o chines não.
aqui vai tudo certinho eu mesmo arrumei a um tempo...



<div style="padding:10px 4px 3px 4px;text-align:center;">
<!--&#8211;GOOGLE TRANSLATE MINI FLAGS&#8211;--><div align="center"><!--&#8211; Add Portuguese to Chinese (Simplified) BETA &#8211;--><a
 target="_blank" 
 rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Czh-CN&hl=pt&ie=UTF8'); return false;" title="Google-Translate-Chinese (Simplified) BETA"><img
 style="border: 0px solid ; cursor: pointer; width: 32px; height: 32px;" alt="Google-Translate-Chinese" src="http://dc151.4shared.com/img/107787584/7fe445e7/China-32.png" 
 title="Google-Translate-Chinese"><!--&#8211; END Portuguese to Chinese (Simplified) BETA&#8211;--><!--&#8211; Add Portuguese to French &#8211;--><a
 target="_blank" 
 rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cfr&hl=pt&ie=UTF8'); return false;" title="Google-Translate-Portuguese to French "><img
 style="border: 0px solid ; cursor: pointer; width: 32px; height: 32px;" alt="Google-Translate-Portuguese to French" src="http://dc151.4shared.com/img/107787621/f727e7bb/France-32.png" 
 title="Google-Translate-Portuguese to French"><!--&#8211; END Portuguese to French &#8211;--><!--&#8211; Add Portuguese to German &#8211;--><a
 target="_blank" 
 rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cde&hl=pt&ie=UTF8'); return false;" title="Google-Translate-Portuguese to German"><img
 style="border: 0px solid ; cursor: pointer; width: 32px; height: 32px;" alt="Google-Translate-Portuguese to German" src="http://dc151.4shared.com/img/107787650/cf6141ea/Germany-32.png" 
 title="Google-Translate-Portuguese to German"><!--&#8211; END Portuguese to German &#8211;--><!--&#8211; Add Portuguese to Italian &#8211;--><a
 target="_blank" 
 rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cit&hl=pt&ie=UTF8'); return false;" title="Google-Translate-Portuguese to Italian"><img
 alt="Google-Translate-Portuguese to Italian" style="border: 0px solid ; cursor: pointer; width: 32px; height: 32px;" src="http://dc151.4shared.com/img/107787681/dc80f31/Italy-32.png" 
 title="Google-Translate-Portuguese to Italian"><!--&#8211; END Portuguese to Italian &#8211;--><!--&#8211; Add Portuguese to Japanese BETA &#8211;--><a
 target="_blank" 
 rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cja&hl=pt&ie=UTF8'); return false;" title="Google-Translate-Portuguese to Japanese BETA"><img
 style="border: 0px solid ; cursor: pointer; width: 32px; height: 32px;" alt="Google-Translate-Portuguese to Japanese" src="http://dc151.4shared.com/img/107787703/2add8e22/Japan-32.png" 
 title="Google-Translate-Portuguese to Japanese"><!--&#8211; END Portuguese to Japanese BETA &#8211;--><!--&#8211; Add Portuguese to English &#8211;--><a
 target="_blank" 
 rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cen&en=pt&en=UTF8'); return false;" title="Google-Translate-Portuguese to English "><img
 style="border: 0px solid ; cursor: pointer; width: 32px; height: 32px;" alt="Google-Translate-Portuguese to English" src="http://dc151.4shared.com/img/107787775/8cffbdd0/United_States-32.png" 
 title="Google-Translate-Portuguese to English"><!--&#8211; END Portuguese to English &#8211;--><!--&#8211; Add Portuguese to Russian BETA &#8211;--><a
 target="_blank" 
 rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cru&hl=pt&ie=UTF8'); return false;" title="Google-Translate-Portuguese to Russian BETA "><img
 style="border: 0px solid ; cursor: pointer; width: 32px; height: 32px;" alt="Google-Translate-Portuguese to Russian" src="http://dc151.4shared.com/img/107787729/f83e05be/Russia-32.png" 
 title="Google-Translate-Portuguese to Russian"><!--&#8211; END Portuguese to Russian BETA &#8211;--><!--&#8211; Add Portuguese to Spanish &#8211;--><a
 target="_blank" 
 rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Ces&hl=pt&ie=UTF8'); return false;" title="Google-Translate-Portuguese to Spanish "><img
 style="border: 0px solid ; cursor: pointer; width: 32px; height: 32px;" alt="Google-Translate-Portuguese to Spanish" src="http://dc151.4shared.com/img/107787748/d96392ae/Spain-32.png" 
 title="Google-Translate-Portuguese to Spanish"><!--&#8211; END Portuguese to Spanish &#8211;--></img
></a
></img
></a
></img
></a
></img
></a
></img
></a
></img
></a
></img
></a
></img
></a
></div></div>

Bom para adicionar esse Código e só ir na Aba Design - Elementos de Pagina - Html/Java.
se caso você adicionar esse código num Gadget já existente ele não funciona você terá que criar outro Gatget só com esse código.

opacidade nas imagens

Opacidade Nas Imagens e um efeito usado em praticamente todos o sites de Imagens ou sites/blog que contem muitas imagens.

Procure por:

]]></b:skin>

Acima Dele Copie e Cole esse código


#abc img{opacity: .3;
filter:alpha(opacity=30);
-moz-opacity: 0.3;
-khtml-opacity: 0.3;
background:#fff;
}
#abc img:hover{opacity:5.0;
filter:alpha(opacity=500);
-moz-opacity: 5.0;
-khtml-opacity: 5.0;
}

Agora toda vez que você adicionar uma imagem ela vai aparecer com opacidade...


OBS: essa postagem pode ter Atualizações ou Alterações...

opacidade nas imagens

Opacidade Nas Imagens e um efeito usado em praticamente todos o sites de Imagens ou sites/blog que contem muitas imagens.

Procure por:

]]></b:skin>

Acima Dele Copie e Cole esse código


#abc img{opacity: .3;
filter:alpha(opacity=30);
-moz-opacity: 0.3;
-khtml-opacity: 0.3;
background:#fff;
}
#abc img:hover{opacity:5.0;
filter:alpha(opacity=500);
-moz-opacity: 5.0;
-khtml-opacity: 5.0;
}

Agora toda vez que você adicionar uma imagem ela vai aparecer com opacidade...


OBS: essa postagem pode ter Atualizações ou Alterações...

variable definitions

Continuando a série: Aprendendo CSS e HTML no Blogger, hoje vamos conhecer as Variáveis CSS de Cores e Fontes.
No topo da folha de estilos do seu blog, no Blogger,você encontrará Variable Definitions.

Variable Definitions são valores que podem ser modificados diretamente através do Painel do Blogger. São pré definições de cores, fontes e tamanho de fontes.
A maioria dos templates existentes, como os padrões do Blogger (mínima ou designer de modelo) usam estas pré definições para o CSS, facilitando a alteração destas cores, através do painel do Blogger, na aba "Designer de Modelo", no modeo "Avançado".
Se no CSS estiverem estabelecidas as pré definições, você poderá alterar cores, fontes e tamanho de fontes, pelo painel do Blogger sem precisar mexer no código do seu template.
Se esses valores não estiverem estabelecidos, você poderá definí-los, criando suas próprias variáveis.
Quanto mais variáveis forem criadas, maior a facilidade de mudar cores e fontes dos elementos da página, através do painel na aba "Designer".

Em muitos casos, não se consegue mudar a cor ou fonte de um determinado template por que o autor do template não usou as variáveis, não definindo e especificando um determinado valor diretamente em uma propriedade, e se não há definição para esses valores, dificulta quaisquer tentativa de alteração.

As variáveis se apresentam em 2 tipos:

1) Variável Cor:



<Variable name="bgcolor"description="Page Background Color"type="color" default="#fff" value="#ffffff">


Em vermelho: é o nome da variável - pode ser qualquer nome que você quiser escolher, mas não deve conter espaços.
Em azul: é a descrição que aparecerá no painel Fontes e Cores, e pode conter espaços.
Em verde: é tipo de variável, que neste caso é "cor"
Em laranja: é o valor padrão, funciona na falta de um outro valor fornecido.
Em marron: é o valor da cor fornecida.

2) Variável Fonte:



<Variable name="bodyfont"description="Text Font"type="font" default="normal normal 100% Georgia, Serif"
value="normal normal 100% Georgia,Serif">


Em vermelho: é o nome da variável, sem espaços.
Em azul:é a descrição da variável, pode conter espaços
Em verde:é o tipo da variável, que neste caso é font.
Em laranja:é a fonte padrão.
Em marron: é a fonte escolhida.




Como Criar Variáveis do tipo Cor:

Veremos agora como criar variáveis de cores no seu template.
Copie o trecho abaixo, e substitua os nomes e tipo como quiser.
Você deve colar o código logo abaixo do trecho:
/* Variable definitions
====================


<variable name="NOME"description="DESCRIÇÃO" type="color" default="#XXX"value="#XXXXXX">


Exemplo de variável do tipo "cor":


<Variable name="linecolor" description="Linhas" type="color"default="#599"value="#6F0599">


Eu criei uma variável do tipo cor, de nome "linecolor", ela pode ser aplicada em todas as linhas do meu blog, sempre que quiser aplicar estilos de cores a uma linha, farei assim:
border-bottom: 1px solid $linecolor;

Veja demonstrativo:


Criada a variável, podemos aplicá-la a qualquer propriedade de qualquer seletor onde for possível aplicar cor.
Para que a variável funcione é preciso acrescentar o símbolo $ antes dela.
Não esqueça: Esta variável pode ser utilizada em qualquer propriedade, não apenas em linhas.

Caso eu queira aplicar essa cor como background da sidebar, por exemplo, eu farei assim:
.sidebar {
background-color:$linecolor;
}
Não se esqueça de colocar o $ antes do nome, ou a aplicação Não funcionará!

Como Criar Variáveis do tipo Fonte:

Veremos agora como criar variáveis de fontes no seu template.
No template Minima, por padrão, as variáveis do tipo fonte são: bodyfont, headerfont, pagetitlefont,descriptionfont e postfooterfont.

Para exemplificar, digamos que eu queira criar uma nova variável do tipo fonte para ser aplicada aos Titulos da área do Footer do blog. Deverei cria-la desta maneira:


<Variable name="footertitlefont" description="Footer Title Font" type="font" default="normal normal 100% Arial,Verdana,'Trebuchet MS',Trebuchet,Sans-serif" value="normal normal 100% Arial,Verdana,'Trebuchet MS',Trebuchet,Sans-serif">



Nesta variável que eu acabei de criar, eu estabeleci que a letra que a primeira fonte a ser procurada pelo navegador deverá ser a Arial, e na falta dela, Verdana e assim por diante.
Criada a variável do tipo fonte, podemos aplicá-la a qualquer propriedade de qualquer seletor onde quisermos definir qual tipo de fonte o seletor deverá ter.

Para que a variável funcione é preciso acrescentar o símbolo $ antes dela.
Para definir onde a variável deverá ser aplicada (que no nosso exemplo será nos titulos do footer),eu precisarei incluir os valores diretamente na regra CSS na propriedade "h2" do seletor "Footer", criando a seguinte regra:

.footer h2{
font: $footertitlefont;
}

Após determinada uma nova variável, retorne ao painel do blogger, clicando na aba "Design >> Designer de Modelo >> Avançado".
Você notará que existe uma nova variável de nome "Footer Title Font" e se quiser trocar o tipo ou tamanho de fonte, poderá faze-lo diretamente pelo painel do Blogger.

Imagens por Mundo Blogger

tirando atom

Neste tutorial eu vou ensinar a como tirar aquele Atom que fica perto da postagem.
Vá em "Design - Editar HTML" e procure por
.feed-links {

Substitua-o por


.feed-links{
diplay:none;
} 

Salve e confira.

me rolante no blog

Nesse tutorial vou posta um menu que fica fixado no topo do blog.
Vá em "Design - Editar HTML" e procure por:


]]></b:skin>

Acima dela adicione o seguinte código:


/* NavTop Menu
----------------------- */
#navtop { /*--container geral do menu--*/
border-bottom:1px solid #666;   /*--Edite cor da borda--*/
background:#fff;   /*--Edite cor de fundo--*/
padding:0px 20px;
position:fixed;
top:0;
left:0;
z-index:2000;
width:100%;
}
#navtop li {
float: left;
display: block;
padding:5px;
}

#navtop li a, #navtop li a:link, #navtop li a:visited { /*--links do menu--*/
float: left;
display: block;
padding: 5px;
text-transform: none;
text-decoration:none;
background: #ccc;  /*--Edite cor de fundo dos links--*/
color:#000;    /*--Edite cor dos links--*/
border:1px solid #666;   /*--Edite cor de borda--*/
font-size:12px;   /*--Edite tamanho da fonte--*/
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
#navtop li a:hover {   /*--links no estado hover--*/
background: #000;  /*--Edite cor de fundo dos links--*/
color:#fff;   /*--Edite cor dos links--*/
text-decoration:none;
}

#navtop li ul {
display: none;
}

Agora procure por


<body>

Embaixo dele cole este código:



 <div id='navtop'>
                       
<li><a href='SEU-LINK-AQUI' title='#'>Link 1</a></li>
 
<li><a href='SEU-LINK-AQUI' title='#'>Link 2</a></li>
 
<li><a href='SEU-LINK-AQUI' title='#'>Link 3</a></li>

<li><a href='SEU-LINK-AQUI' title='#'>Link 4</a></li>

<li><a href='SEU-LINK-AQUI' title='#'>Link 5</a></li>
 
<li><a href='SEU-LINK-AQUI' title='#'>Link 6</a></li>

</div>

terça-feira, 22 de novembro de 2011

Como camuflar links

esse tutorial é sobre css e html



como dirfarça um link em uma palavra

é usa-se href para links veja o modelo abaixo



Animes design games


agora vcs vao ver como dirfarça um link em uma imagem


super simples


veja:






Postagem feita por siegyuto se copiar a postagem coloque os creditos

como fazer uma caixa de texto

eae galera nesse tutorial vou ensinar a vcs como fazer uma caixa de texto




use as tags "form" e "textarea" veja





postagem feita por siegyuto

se copiar coloque os creditos





segunda-feira, 21 de novembro de 2011

Eaw galera, 
Este tutorial é muto bom e bem simples.
Vá em "Design - Editar HTML" e procure a seguinte linha:



<div id='main-wrapper'>

Debaixo dela insira o seguinte código:


<b:section class='column-main2' id='main-column' showaddelement='yes'/>

Agora é só salvar e lá está.
É isso aí galera, espero que vocês gostem.

guilty gear x2

save do games guity gear x2 baixe
http://www.mediafire.com/?x1ptt54pgjbe12d

font naruto

baixe a fonte do naruto no link abaixo
http://www.mediafire.com/?ebchfbi2dns0kpc

efeito nos links

acima de post-body cole o codigo abaixo

}
/*-- (Efeito nos Links - animes-design-games)-- */
a:hover{ color: #000000;text-shadow:0 0 .3em #00FFFF;font-size:11px;
-o-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
transition: all 0.3s linear;
}

segunda-feira, 7 de novembro de 2011

Apresentação

EAE GALERA SOU O SIEGYUTO VOU TA POSTANDO PRA VCS SOU O CRIADOR DESTE BLOG E VOU DEIXA_LO SEMPRE ATUALIZADO
 

blogger templates | Make Money Online