Pacotão de Tutoriais

Oi oi gente aqui é a Nataly tava sem postar né ?? Mais voltai com vários Tutoriais !


Let's Go
Primeiro tutorial é a pedido de leitoras! Seta que volta ao topo. Esse tutorial é super fácil let's Go.
Desing >Adicionar um Gadget> HTML/JavaScript 
Cole o código abaixo :
<div style="position:fixed; bottom:0px; right:0px;"><a href="#"><img src="URL DA IMAGEM" border="0" /></a></div>


Algumas setinhas para vocês-fontes das setas e dos tutos Mury's World- :



Explicando tutorial : 
Não retire nada do código apenas subistitua "URL DA IMAGEM"  pelo URL da seta escolhida certo ??



Segundo tutorial: Barra de rolagem COLORIDA confira o tutorial Let's Go
Desing>Editar HTLM >Ctrl+F3  procurar por : ]]></b:skin> antes desse tag cole o código >
*{
scrollbar-face-color:#FF69B4;
scrollbar-highlight-color:#FF69B4
scrollbar-3dlight-color:#343434;
scrollbar-darkshadow-color:#343434;
scrollbar-shadow-color:#FF69B4;
scrollbar-arrow-color:#343434;
scrollbar-track-color:#343434;
}

::-webkit-scrollbar {width: 12px; height: 4px; background: #343434; }
::-webkit-scrollbar-thumb { background: #FF69B4; }
Explicando Tutorial : Não mude nada apenas os códigos das cores , a cor rosa é a cor de destaque,e a cor roxa a cor do fundo da barra de rolagem .Entenderam ??



Terceiro tutorial : -créditos dos 2 primeiros posts é do blog Mury's World e do terceiro aos outros 12 tutoriais vai ter os créditos no fim dos tutoriais .- Barras dividindo os posts :
Escolha sua barrinha aqui
Design » Editar HTML » Expandir Modelos de Widget » ctrl +f3 procure por :
S<b:include data='post' name='post'/>
Achou,então agora você vai colar abaixo desse tag o seguinte código :
<center><img src="URL da barrinha"/></center>
Explicando o tutorial :Feito isso apague a tag URL da barrinha e subistitua pelo URL da barra escolhida .
Créditos : Bomba De Glitter.



Quarto tutorial :Favicon No blog :
O que é um favicon ??É simplismente uma imagem que subistitui o B do blogger por outra imagem .
Desing » Editar HTML » Ctrl + F3 » procure por : ]]></b:skin> logo depois cole o código a seguir :<link href='url do favicon' rel='icon' type='image/x-icon'/>
<link href='url do favicon' rel='shortcut icon' type='image/x-icon'/>
No lugar do urk do favicon cole o código de um dos favicons ai vai uns blogs com emoticons liindos :
BDG
TT
EP
Créditos : Bomba de Glitter.



Quinto tutorial:Opacidade nas imagens :
Desing » Editar HTML » Ctrl+F3 » procure por : ]]></b:skin> cole o código abaixo acima do tag :

.main img {

filter:alpha(opacity=82);

-moz-opacity:0.82;

opacity:0.82;

}

.main img:hover {

filter:alpha(opacity=100);

-moz-opacity:1.0;

opacity:1.0;

duration: 50s;

}

Onde tem o nome opacity mude ate o tanto que quiser ps : só pode aumentar ate 100 ok ??

Créditos : Bomba De Glitter.

Sexto tutorial : Nome do blog correndo na aba : 

Desing » Editar HTML »Ctrl+F3 procure por :  </head>  achou ??cole esse código depois do tag  </head> :

<script language="JavaScript"> var txt="TÍTULO DO BLOG "; var espera=80; var refresco=null; function rotulo_title() { document.title=txt; txt=txt.substring(1,txt.length)+txt.charAt(0); refresco=setTimeout("rotulo_title()",espera);} rotulo_title(); </script>

Só mudo o TÍTULO DO BLOG certo ??

Sétimo tutorial : Sombra no link ao passar o mouse :

design > editar html, procure por a:hover e apague o que tiver depois dele, por exemplo:

Clique aqui pra ampliar

Você vai apagar apenas a parte destacada de vermelho :

a:hover {

color: $(link.color)$;

}

Cole esse código abaixo na mesma linha do código apagado :

{ color: #000000; text-shadow: 0 0 .3em#FF82AB; }

O que está em verde é a cor da sombra e o que está em rosa é a cor da letra, caso você queira deixar a cor do mesmo jeito que você deixou no Designer de Modelo, é só você por esse código depois da chave do primeiro código .

{ color: $(color.link.color)$

Prontinho, agora é só personalizar seu código! Use cores diferentes certo ??

Oitavo tutorial : Cursor que muda ao passar o mouse em um link :

Desing > Editar HTML > Ctrl+F3 procure por : 

 ]]></b:skin>

Acima do tag cole o código abaixo :

{cursor: url("Link-cursor"), url("link-cursor"), auto;}

A:hover{cursor: url("link-cursor"), url("link-cursor"), auto;}

Subistitua a tag URL do cursor pelo url do cursor escolhido !.

Nono Tutorial :Bloqueio do botão direito com aviso .

Design > Adicione um gadget HTML/JavaScript

Cole o seguinte código :

<script language="JavaScript">

<!--

var message="MENSAGEM AQUI";

///////////////////////////////////

function clickIE4(){

if (event.button==2){

alert(message);

return false;

}

}

function clickNS4(e){

if (document.layers||document.getElementById&&!document.all){

if (e.which==2||e.which==3){

alert(message);

return false;

}

}

}

if (document.layers){

document.captureEvents(Event.MOUSEDOWN);

document.onmousedown=clickNS4;

}

else if (document.all&&!document.getElementById){

document.onmousedown=clickIE4;

}

document.oncontextmenu=new Function("alert(message);return false")

// --> 

</script>

Decimo Tutorial : Menu Cute :

Design > Editar Html , pressione as teclas Ctrl + F e procure por :

}]]>


ou por 


]]>

Quando o encontrar logo ACIMA dessa tag , cole o código abaixo :

/* Cute Menu

----------------------------------------------- */

#menuextra {

display : block;

font-size: 11px;

font-family: Tahoma;

letter-spacing : 0;

border-bottom : 1px dashed #CDB7B5;

background-repeat : no-repeat;

text-indent : 5px;

vertical-align : middle;

text-decoration : none;

line-height : 15px;

margin-bottom : 1px;

background : url('URL DO MINE GIF 1') no-repeat left;

padding-left : 10px;

}

#menuextra:hover {

display : block;

text-decoration : none;

vertical-align : middle;

line-height : 15px;

border-bottom : 1px dashed #FF69B4;

background : url('URL DO MINE GIF 2') no-repeat left;

padding-left : 10px;

}

Personalização1

Depois de colar o código , vem a parte de deixar o menu de acordo com sua preferência.

•Onde tem URL DO GIF 1 coloque a url do mine gif que que irá aparecer quando o mouse não estiver no link .

•Onde tem URL DO MINE GIF 2 você coloca a url do mine gif que irá aparecer quando o mouse passar por cima do link.

(Procure colocar mine gifs pequenos e não grandes )

Personalização 2

•Onde tem o código : #CDB7B5

é a cor da barrinha pontilhada que sublinha o link quando o mouse não está no link.

•Onde tem o código :  #FF69B4

é a cor da barrinha que sublinha o link quando o mouse passa por cima.


quando terminar , salve o modelo.

Ok,terminamos a primeira parte , agora vamos fazer com que o estilo seja adicionado nos links.

onde você quer que apareçam os link com esse estilo ,seja em um gadget ou postagem você vai em editar html e cola o seguinte código: 

Nome do link

Nome do link

Se for em uma postagem ou página , você coloca o código e volta para a opção escrever pois facilita.

Daí você verá apenas os links , que terão o nome '' Nome do link '' daí é só você clicar em cima,ir na opção alterar , e alterar o nome e o link e salvar.

Depois é só ir adicionando mais códigos do link e nome do link para mais links existentes na página.

Agora se você for colocar o código em um gadget , prefira colocar os links e nome através do código em html pois nos gadgets que eu lembre não tem a opção alterar.

Caso um dia queira tirar é  só retirar apenas o código que foi colocado no html.

Créditos : Fashion Girl Mania

Beijos até outro dia !