Pacotão de Tutoriais

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

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:

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: 


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 !

5 comentários:

  1. Muito bons os tutoriais,coloquei opacidade nas imagens do meu blog amei beijos
    http://fakeslook.blogspot.com/

    ResponderExcluir
  2. Ei linda , amei tudo , adoro tutoriais , é oo máximo.Tô seguindo , me faz uma visita .
    Beijo.
    Lílian

    ResponderExcluir