» Códigos, Dicas, Templates, Tutoriais para deixar o seu blog do seu jeito!

Como hospedar arquivos JavaScript no Windows Live SkyDrive




CLASSIFICAÇÃO DO TUTORIAL
FÁCIL
Olá Pessoal,
Este tutorial irá ensinar como hospedar o arquivo JavaScript do Menu em Abas no Windows Live SkyDrive.♦ Primeiro você deve salvar o Código Javascript em um bloco de notas com a extensão .js:

1º- Copie o código Javascript no endereço: http://www.barelyfitz.com/projects/tabber/tabber-minimized.js

2º- Cole no Bloco de notas

Tuto018-Java no Bloco de Notas01.jpg

3º- Clique em Arquivo e em Salvar como...

4º- Salve o arquivo com a extensão .js no nome do arquivo. Ex: Tabber.js

Tuto018-Java no Bloco de Notas02.jpg



♦ Feito isso agora você irá hospedar o arquivo no SkyDrive:


1º- Faça o login com a sua conta de email Hotmail: (se não tiver uma, clique em Inscrever-se)

Tuto019-SkyDrive01.jpg

2º- Após o Login Clique em Criar pasta:

Tuto019-SkyDrive02.jpg

3º- Certifique-se que a pasta criada seja compartilhada com Todos, ou seja, do tipo público:

Tuto019-SkyDrive03.jpg

Clique no botão Próximo.

4º- Encontre e Selecione o arquivo.js gravado em seu computador clicando em Arquivo, em seguida clilque em Carregar

Tuto019-SkyDrive04.jpg

5º- Irá aparecer esta página onde você vai clicar em cima do arquivo Tabber:

Tuto019-SkyDrive06.jpg

6º- Nesta página você deve clicar em cima do arquivo com o botão direito e clicar em Propriedades:

Tuto019-SkyDrive07.jpg

Tuto019-SkyDrive08.jpg

7º- Irá aparecer este quadro onde você deve selecionar o endereço destacado:

Tuto019-SkyDrive09.jpg

8º- Este será o endereço do seu arquivo javascript, mas sem a parte: ?download


Viu como é fácil?


Agora é só utilizar o arquivo hospedado por você nos tutoriais que usam Javascript → <script src='Endereço do Arquivo Javascript' type='text/javascript'/>

Para complementar o conteúdo:
Hospedagem de arquivos - Blogger'SPhera

Feliz Natal!






Meus Queridos Amigos,

Agradeço seus votos de Feliz Natal e desejo à vocês um Natal de muita Harmonia e Paz, com muito Amor.

Obrigada por seu carinho.

Não estou em casa, por isso faço este post para vocês com todo carinho. Assim que chegar em casa respondo a todos.

Grande beijo.

Marcadores que Expandem




CLASSIFICAÇÃO DO TUTORIAL
AVANÇADO
Seguindo a mesmo raciocínio do post sobre a Lista de Links Expansível vou ensinar como fazer o gadget de MARCADORES expandir.

Mas antes você deve saber como aplicar o hack de Menu Expansível.

Vamos relembrar?
1ª Parte
1º Coloque este código Java Script no seu blog logo acima da tag </head>senão nenhum menu vai expandir.
<!-- JavaScript Expandir --><style type='text/css'>.texthidden {display:ipostnline}.shown {display:block}</style><script type='text/javascript'>document.write(&#39;<style>.texthidden {display:none} </style>&#39;);</script><script type='text/Javascript'>function expandcollapse (postid) {whichpost = document.getElementById(postid);if (whichpost.className==&quot;shown&quot;) {whichpost.className=&quot;texthidden&quot;;}else {whichpost.className=&quot;shown&quot;;}}</script>


2º Para criar um botão expansível devemos aplicar o código abaixo em uma gadget tipo HTML usando uma imagem como botão ou palavras para expandir.

<a href="javascript:void(0);" onclick="expandcollapse('favoritos')"><img border="0" src=" Endereço da Imagem que vai servir como botão" /></a><br/><br /><ul id="favoritos" class="texthidden">Endereços dos Links, Texto, Imagem, etc... </ul>

» Para que a gadget de MARCADORES do seu blog seja o botão expansível, você deve:
2ª Parte
1º - Configurar o código CSS do Título da Sidebar:

1- Vá em Modelo → Editar HTML.

2 - Colocar em cima do código [ .sidebar h2 { ] estes códigos que indicam que seu título da sidebar é um link.
.sidebar h2 a{
color:$sidebarcolor;
font: $linkfont;
text-decoration:none;
}
.sidebar h2 a:hover{
color:$visitedlinkcolor;
text-decoration:underline;
}
3 - Clique em SALVAR ALTERAÇÕES.

OBSERVAÇÕES IMPORTANTES:
1ª - Sua widget MARCADORES já deve ter sido criada pela página: Elementos de página do blogger.
2ª- color:$sidebarcolor;→ Se seu template não tem a variável sidebarcolor pode colocar uma cor, ex #000000=preta, de preferência a cor definida no grupo de códigos do [ .sidebar h2 { ] para ficar igual aos outros títulos das sidebars, porém este vai ser um link.
3ª- color:$visitedlinkcolor;→ Se seu template não tem a variável visitedcolor pode colocar uma cor, ex #018101=verde

3ª Parte
2º - Agora você vai → Selecionar a caixinha Expandir Widgets:

Para que a widget MARCADORES seja um botão expansível a partir do seu título encontre a linha com a palavra label1, use Ctrl+F para encontrar mais rápido, veja os códigos abaixo:
<b:widget id='Label1' locked='false' title='Marcadores' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
  <span expr:dir='data:blog.languageDirection'>
    <data:label.name/>
  </span>
<b:else/>
  <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
    <data:label.name/>
  </a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
1 - Na linha
<h2><data:title/></h2>
O código <data:title/> deve ser substituído por:
<a href='javascript:void(0);' onclick='expandcollapse("marcadores")'><data:title/></a>
2 - A linha <ul> deve ser substituída por:
<ul id="marcadores" class="texthidden">

3 - Clique em SALVAR ALTERAÇÕES.

IMPORTANTE:A palavra 'marcadores' deve ser alterada sempre que colocar outro botão expansível e corresponder nas duas linhas a 1ª e a 2ª.
<ul id="_____" class="texthidden">► Esta é a identidade do seu botão expansível e devem iguais para as duas partes do código seu botão não expandirá.
Cada botão Expansível deve ter a sua Identidade.


Exemplo - Clique na figura para ampliar

Não Se Esqueça:
» Essas configurações demandam algum conhecimento em códigos HTML e CSS. Portanto:
♥ Sempre tente antes num blogue de testes.
♥ Salve o seu template antes de começar, clicando em Baixar modelo completo.
♥ Leia o tutorial até o fim e tenha certeza de ter entendido.

Obs: Estou republicando este post atualizado e corrigido, o post original foi publicado em 03/12/07 e foi apagado.

Sobre o Template




Durante um mês coloquei aqui no Templates para Você uma enquete sobre o que os leitores acharam do template.

Obtive 127 votos e os resultados foram os seguintes:
  • Sim gostei muito - 54 (42%)
  • Está confuso, não encontro nada - 32 (25%)
  • Não gostei - 11 (8%)
  • Prefiro o antigo - 5 (3%) (Nem lembro mais como era o antigo. Rsss...)
  • Precisa melhorar - 25 (19%)

A maioria gostou do template, mas a quantidade de votos que disseram que estava confuso e não encontrava nada me preocuparam.Também levei em consideração os 19% de votos que falaram que o site precisava melhorar.

Pensando em melhorar reformulei alguns detalhes do blog.

Clareei o fundo, não mudei muito a estrutura de sidebars, tirei as 3 colunas do footer. Acho que com o fundo claro fica mais fácil encontrar as coisas aqui.

Espero que vocês gostem.


 
Copyright ©2007-2014. Templates para VOCÊ - Todos os Direitos Reservados
Licença Creative Commons
Baseado no Tema Johny Classicsite | Tecnologia do Blogger