março 2011 ~ Tutorial Links

segunda-feira, 28 de março de 2011

Criando Menu Expansivel

22:43

ColdFIre

Menu expansivel é aquele hack que ao clicar em determinado texto ou imagem, surgem outros elementos logo abaixo, sem carregar a pagina toda.

Se você quer adicionar alguma informação extra no template eu recomendo, assim não poluirá seu conteúdo, deixando seu template sempre estiloso.

Para configurar seu menu expansivel você não precisará de muito suor, é só entrar em "Layout" -> "Editar HTML";

Logo abaixo de <head> cole o seguinte código:

Agora é só clicar em "Adicionar um gadget" -> "HTML/Javascript" e colar esse código:

<a href="javascript:void(0);" onclick="expandcollapse('Menu')">TEXTO</a><br/>
<ul id="Menu" class="texthidden">
<li>CONTEUDO</li>
</ul>

Agora é só você alterar o campo "TEXTO" e "CONTEUDO", colocando o que você quiser.

22:41

ColdFIre

No comments

Hack de Resumo do Post - Leia Mais

A) JavaScript

1- Na Guia "Layout" em "Editar HTML", baixe uma cópia de seu template, clicando em "Baixar Modelo Completo;

2- Marque a opção "Expandir Modelos de Widgets";

3- Localize a tag </head> . Copie o código a seguir e cole ACIMA dessa tag:

**********************************************************************

<!-- JavaScript Post Summary by ColdFire-->



<b:if cond='data:blog.pageType != &quot;item&quot;'>

<script type='text/javascript'>

var fade = false;

function showFull(id) {

var post = document.getElementById(id);

var divs = post.getElementsByTagName(&#39;div&#39;);

for (var i = 0; i &lt; divs.length; i++) {

if (divs[i].id == &quot;fullpost&quot;) {

if (fade) {

divs[i].style.background = peekaboo_bgcolor;

Effect.Appear(divs[i]);

} else divs[i].style.display = &#39;inline&#39;;

}

if (divs[i].id == &quot;showlink&quot;)

divs[i].style.display = &#39;none&#39;;

if (divs[i].id == &quot;hidelink&quot;)

divs[i].style.display = &#39;inline&#39;;

}

}

function hideFull(id) {

var post = document.getElementById(id);

var divs = post.getElementsByTagName(&#39;div&#39;);

for (var i = 0; i &lt; divs.length; i++) {

if (divs[i].id == &quot;fullpost&quot;) {

if (fade) {

divs[i].style.background = peekaboo_bgcolor;

Effect.Fade(divs[i]);

} else divs[i].style.display = &#39;none&#39;;

}

if (divs[i].id == &quot;showlink&quot;)

divs[i].style.display = &#39;inline&#39;;

if (divs[i].id == &quot;hidelink&quot;)

divs[i].style.display = &#39;none&#39;;

}

post.scrollIntoView(true);

}

function checkFull(id) {

var post = document.getElementById(id);

var divs = post.getElementsByTagName(&#39;div&#39;);

var found = 0;

for (var i = 0; i &lt; divs.length; i++) {

if (divs[i].id == &quot;fullpost&quot;) {

divs[i].style.display = &#39;none&#39;;

found = 1;

}

if ((divs[i].id == &quot;showlink&quot;) &amp;&amp; (found == 0))

divs[i].style.display = &#39;none&#39;;

}

}

</script>

</b:if>

**********************************************************************

B) Modificação do código do post

1- Antes de continuar fazendo as modificações, visualize seu template para checar se o código do script não contém erros;

2- A seguir, ainda com a caixinha "Expandir Modelos de Widgets" marcada, localize o seguinte trecho em seu template (geralmente está abaixo de <div class='post-header-line-1'/> ):

**********************************************************************

<div class='post-body'>

<p><data:post.body/></p>

<div style='clear: both;'/> <!-- clear for photos floats -->

</div>

**********************************************************************

3- Substitua todo esse código pelo código abaixo (copie e cole por cima do código de seu template):

**********************************************************************

<div class='post-body' expr:id='"post-" + data:post.id'>

<b:if cond='data:blog.pageType == "item"'>

<style>#fullpost{display:inline;}</style>

<p><data:post.body/></p>

<b:else/>

<style>#fullpost{display:none;}</style>

<p><data:post.body/></p>

<div id='showlink'>

<br><a expr:href='data:post.url'><b>Continue Lendo...</b></a></br>

</div>

<script type='text/javascript'>

checkFull("post-" + "<data:post.id/>");

</script>

</b:if>

<div style='clear: both;'/> 

</div>

**********************************************************************

C) Personalizando o link Leia Mais

O sinal [ ... ] refere-se ao link que irá aparecer no post, na página inicial do blog, para o leitor clicar e ser direcionado à página do post. Você poderá substituir pela palavra que desejar, ou colocar outros símbolos/caracteres, ou a combinação de símbolos e caracteres. Exemplos: Continue lendo ► / Leia Mais »

Se desejar colocar uma imagem (uma seta por exemplo) na frente da palavra, substitua o sinal [ ... ] pelo código abaixo:

D) Adicionando o “CSS”

A "id" do link está nomeada como "showlink". Podemos portanto colocar estilos para essa id na CSS. Segue uma sugestão de estilos que você poderá adicionar ACIMA da tag ]]></b:skin>

**********************************************************************

#showlink {
font-size: 11px;
float: right;

margin-right: 30px;
margin-top: -8px;

font-weight: bold;
}
#showlink a {
color: #CC0000;
}
#showlink a:visited {
color: #CCCCCC;

}
#showlink a:hover {
color: #000000;
}

D) Escrevendo e editando postagens com o Hack de Resumo do Post

Você pode formatar sua janela de postagem para que as tags fiquem sempre visíveis, quando escrever posts no modo "Editar HTML".

Para isso, siga o procedimento:

1 - Vá até a Guia de "Configurações" de seu blog e clique na aba "Formatação"

2- Localize quase no final da página o box de "Modelo de Postagem" e digite o seguinte:

**********************************************************************

DIGITE O RESUMO DO POST
<div id='fullpost'>

digite o restante do post
</div>

**********************************************************************

22:39

ColdFIre

No comments

Através desse tutorial você poderá particionar o seu disco (HD) em 2 ou mais partes.

1º Passo Vá até o menu iniciar e clique com o botão direito em cima de
computador, em seguida escolha gerenciar

2º Passo Em gerenciamento do computador, clique em gerenciamento de disco

3º Passo Clique com o botão direito em cima do disco que quer particionar,
escolha a opção diminuir volume

4º Passo Na tela que irá se abrir, digite o valor de sua partição em MB, no campo espaço a diminuir.

5º Passo Note que após a confirmação da tela anterior, o windows dividirá o seu
disco e mostrará um espaço no disco não alocado. Agora vamos criar logicamente a partição.

6º Passo Clique com o botão direito em cima do espaço não alocado, e escolha
novo volume simples

7º Passo Clique em avançar

8º Passo Se for usar todo espaço disponivel é só clicar em avançar

9º Passo Marque “Atribuir a seguinte letra a unidade” ou se preferir marque a
opção que mais interessar

10º Passo Escolha o Sistema de arquivo (NTFS) e o tamanho da unidade de alocação padrão, coloque o nome de sua nova partição, se estiver com pressa, marque executar uma formatação rápida, ainda nesta tela é possivel também, ativar a compactação de arquivos e pastas

11º Passo Clique em concluir

12º Passo Pronto, no gerenciador de computador irá aparecer a sua nova partição, pronta para usar.

22:37

ColdFIre

No comments

CONFIGURANDO DOMINIO

Usar um domínio próprio para construir um blog é o mínimo para quem leva a coisa a sério pois possui muitas e muitas vantagens, as mais importantes delas é relacionado ao pagerank e também a má impressão causada pelos subdomínios no “blogspot” ,”wordpress” “kitnet” etc…
Não pense duas vezes amigo, por pior que seu blog seja é impossível que você não recupere os R$30,00(caso registre um domínio no Brasil) que você pagou em um prazo curto com algum tipo de propaganda.
Bom ,caso você registre seu domínio em um lugar que ofereça “CNAME” como na e-dominios ou no Godaddy é fácil, basta selecionar a opção CNAME e colocar no primeiro campo “ghs1.google.com” e no segundo “ghs2.google.com”.
Agora se onde você comprou seu domínio não oferecer “CNAME” ,então você precisará de um servidor DNS como o gratuito Everydns.
Clique aqui e crie uma conta no formulário que você se deparou.

Criada a conta o login é automático, adicione então seu domínio clicando em “Add new domain” (basic) e clique em “Basic”:

Note que seu domínio irá aparecer no topo esquerdo da página logo abaixo de “Primary Domains:” clique sobre ele e então irá abrir uma página para edição.
Em “Fully Qualified Domain” coloque”www” em “Record type” coloque “CNAME” em “Record Value” coloque “ghs.google.com” e logo em seguida clique no botão “Add Record”.
Configue o domíno onde você o comprou:
Se você comprou um domínio do tipo .com.br quase que obrigatoriamente você terá que registra-lo na Registro.Br ,entre no sistema e clique em “Pessoa Física” que é a maioria dos casos.
Em “Delegações DNS”, preenchemos os campos com os DNSs da EveryDNS.net:
ns1.everydns.net
ns2.everydns.net
ns3.everydns.net
ns4.everydns.net
Clique em “Entrar” e cruze os dedos para que dê certo. Caso ocorra algum erro, espe um pouco e tente novamente após algum tempo.
Configue o blogger para receber o domínio:
Agora entre no Blogger e clique em “Configurações” ,depois em “Publicação” e depois em “Domínio personalizado” –> “Ir para configurações avançadas” e preencha o campo com o seu domínio.
Clique em “Salvar Alterações” e pronto!
Ah, acho que todos sabem que o DNS pode demorar alguma horas para propagar né?

22:29

ColdFIre

No comments

Como clonar o mac adress de uma placa wireless

Clonar o mac adress de uma placa wireless no Windows XP é relativamente fácil para a maioria delas.
Primeiro:
Pegue o mac da placa que deseja clocar, ele deve estar nas costas da placa.
Em seguida, em painel de controle, conexões de rede, clique com o botão direito sobre a conexão sem fio da sua placa e clique em propriedades.
Você vai ver:

Conectar usando: e abaixo o nome da sua placa.
Clique no botão configurar, vá na aba Avançado.
Procure por Network Address.
Você vai ver o campo: Valor. Marque ele e digite nele o MAC Address da placa a ser clonada.
E pronto.

22:28

ColdFIre

No comments

Além dos atributos específicos de cada célula ou linha, as tabelas podem ser adicionalmente formatadas a partir dos atributos que nos oferece a própria etiqueta <table>. A seguir, mostramos aqueles que nos podem parecer à principio mais importantes:

align	Alinha horizontalmente a tabela em relação ao seu entorno.
background	Permite-nos colocar um fundo para a tabela desde um link a uma imagem.
bgcolor	Dá cor de fundo à tabela.
border	Define o número de pixels da borda principal.
bordercolor	Define a cor da borda.
cellpadding	Define, em pixels, o espaço entre as bordas da célula e o conteúdo da mesma.
cellspacing	Define o espaço entre as bordas (em pixels).
height	Define a altura da tabela em pixels ou porcentagem.
width	Define a largura da tabela em pixels ou porcentagem.

Os atributos que definem as dimensões, height e width, funcionam de uma maneira análoga ao das células, tal como vimos no capítulo anterior. Contrariamente, o atributo align não nos permite justificar o texto de cada una das células que compõem a tabela, mas sim que permite, justificar a própria tabela em relação ao seu entorno.
********************************************************************************************************************************************
Os atributos cellpading e cellspacing ajudarão a dar a nossa tabela um aspecto mais estético. À princípio pode nos parecer um pouco confuso seu uso mas com um pouco de prática já será suficiente para saber utilizá-los.

Na seguinte imagem podemos ver graficamente o significado destes atributos:

http://www.criarweb.com/artigos/images/cellpadingcellspacing.gif

Você mesmo pode comprovar que os atributos definidos para uma célula têm prioridade em relação aos definidos para uma tabela. Podemos definir, por exemplo, uma tabela com a cor de fundo vermelha e uma das células com a cor de fundo verde. E assim, toda a tabela será vista de cor vermelha manos a célula verde. Da mesma forma, podemos definir uma cor azul para as bordas da tabela e fazer com que uma célula particular seja mostrada com uma borda vermelha. (Apesar de que isto não funcionará em todos os navegadores devido ao fato de alguns não reconhecerem o atributo bordercolor.)

Tabela de cor vermelha de fundo	O atributo bgcolor da tabela está em vermelho.
Célula normal	Esta célula está em verde. Tem o atributo bgcolor na cor verde

Tabelas aninhadas

O uso de tabelas alinhadas também é muito útil. Da mesma forma que podíamos incluir listas dentro de outras listas, as tabelas podem ser incluídas dentro de outras. Assim, podemos incluir uma tabela dentro da célula de outra. A forma de funcionamento continua sendo o mesmo apesar de que a situação pode se complicar se o número de tabelas incluídas dentro de outras for elevado.

Vamos ver um código de um aninhamento de tabelas. Veremos primeiro o resultado e em seguida, o código, pois assim conseguiremos entendê-lo melhor.

Célula da tabela principal

Tabela aninhada, célula 1	Tabela aninhada, célula 2
Tabela aninhada, célula 3	Tabela aninhada, célula 4

Este seria o código:

<table cellspacing="10" cellpadding="10" border="3">
<tr>
    <td align="center">
    Célula da tabela principal
    </td>
    <td align="center">
        <table cellspacing="2" cellpadding="2" border="1">
        <tr>
            <td>Tabela aninhada, célula 1</td>
            <td>Tabela aninhada, célula 2</td>
        </tr>
        <tr>
            <td>Tabela unida, célula 3</td>
            <td>Tabela aninhada, célula 4</td>
        </tr>
        </table>
    </td>
</tr>
</table>

Exemplos práticos

Estas são as informações que pretendíamos transmitir-lhes sobre as tabelas em HTML. Agora seria importante fazer algum exemplo de realização de uma tabela um pouco mais complexa. Por exemplo, a seguinte:

Animais em perigo de extinção
Nome	Cabeças	Previsão 2010	Previsão 2020
Baleia	6000	4000	1500
Urso Pardo	50	0
Lince	10	0
Tigre	300	210

Outro exemplo de tabela com a qual podemos praticar:

Climas de América do Sul

Venezuela

Colômbia

Equador

Perú

Norte da América de Sul. Países como:

Argentina

Chile

Uruguai

Paraguai

Sul da América do Sul. Países como:

Floresta tropical, clima de savana, clima marítimo com invernos secos.

Climas marítimos com verões secos, com invernos secos, climas frios, clima de estepe, clima desértico.

Tutorial Links

Categorias

segunda-feira, 28 de março de 2011

Criando Menu Expansivel

Hack de Resumo de Post

Hack de Resumo do Post - Leia Mais

A) JavaScript

B) Modificação do código do post

C) Personalizando o link Leia Mais

D) Adicionando o “CSS”

D) Escrevendo e editando postagens com o Hack de Resumo do Post

Crie Partição Pelo Windows Sem Precisar de Programas

Configurando Dominio

Mac Adress

Como clonar o mac adress de uma placa wireless

Alguns Atributos HTML

Páginas

Mais Populares

Arquivos