Linkbão Oi Torpedo Oi Torpedo Web Click Jogos Online Rastreamento Correios Mundo Oi oitorpedo.com.br mundo oi torpedos mundo oi.com.br oi.com.br torpedo-online Tv Online Resultado Lotofacil Resultado Lotogol Resultado Mega-sena baixa-facil Resultado Loterias Fofocas E-Scripter Claro Torpedo

2/28/2010

DOUTORBLOGS- como Otimizar- o processamento do navegador

Adicionar esta notícia no Linkk compartilhe com outras redes SOCIAIS.
Buzz It

Uso eficiente seletores CSS

Visão geral

Evitando ineficiente seletores chave que correspondem a um grande número de elementos pode acelerar a renderização de páginas.

Detalhes

Como o browser interpreta HTML, ele constrói uma árvore de documentos internos que representam todos os elementos para ser exibido. Em seguida, encontrados elementos para estilos especificados em várias folhas de estilo, de acordo com a cascata CSS padrão, herança e regras de ordenação. Na implementação da Mozilla (e provavelmente outros também), para cada elemento, o motor de buscas através de regras de estilo CSS para encontrar uma correspondência. O motor avalia cada regra da direita para a esquerda, a partir do selector da direita (chamado de "chave") e movendo-se através de cada um seletor até encontrar uma correspondência ou descarta a regra. (O selector "é o elemento do documento a que a regra deve ser aplicada.)

Segundo este sistema, as regras menos o motor tem que avaliar a melhor. Assim, naturalmente, removendo CSS utilizado é um passo importante para melhorar o desempenho de renderização. Depois disso, as páginas que contêm um grande número de elementos e / ou grande número de regras de CSS, otimizando as definições das regras em si pode melhorar o desempenho também. A chave para a otimização de regras consiste em definir as regras que são tão específicos quanto possível e que evitar a redundância desnecessária, para permitir que o motor de estilos para encontrar rapidamente partidas sem gastar tempo avaliando as normas não se aplicam.

As seguintes categorias de regras são consideradas ineficientes:

Regras com seletores descendentes
Por exemplo:
Regras com o seletor universal como a chave
  corpo * {...} 
. esconder-scrollbars * {...}

Regras com um seletor de tag como a chave

  ul li um {...} 
# footer h3 {...}
* Html # atticPromo ul li um {...]



Seletores descendentes são ineficazes porque, para cada elemento que corresponde à chave, o navegador também deve percorrer a árvore DOM, avaliando cada elemento ancestral, até que encontra uma correspondência ou atinge o elemento raiz. A menos específica a chave, maior será o número de nós que precisam ser avaliados.




Regras seletores com criança ou adjacente
Por exemplo:
Regras com o seletor universal como a chave

  corpo> * {...} 
. esconder-scrollbars> * {...}

Regras com um seletor de tag como a chave

  ul li>> um {...} 
# footer> h3 {...}



Criança e seletores adjacentes são ineficientes porque, para cada elemento correspondente, o navegador tem de avaliar outro nó. Torna-se duplamente caro para cada um seletor filho na regra. Novamente, a menos específica a chave, maior será o número de nós que precisam ser avaliados. No entanto, embora ineficiente, eles ainda são preferíveis aos seletores descendente em termos de desempenho.




Regras com seletores excessivamente qualificada
Por exemplo:
  ul # top_blue_nav {...} 
form # UserLogin {...}


Seletores de ID são únicos, por definição. Incluindo tag ou qualificadores de classe apenas acrescenta informação redundante que precisa ser avaliado desnecessariamente.




Regras que se aplicam :hover pseudo :hover para não ligar os elementos
Por exemplo:
  h3: hover {...} 
. foo: hover {...}
# foo: hover {...}
div.faa: hover {...}


:hover pseudo :hover selector de elementos não-âncora é conhecido por fazer IE7 e IE8 lento em alguns casos *.Quando um doctype strict não é utilizado, IE7 e IE8 irá :hover em qualquer outro elemento de âncoras. Quando um doctype Strict é :hover sobre a não-âncoras podem causar degradação de desempenho.



* Veja um relato de bug no http://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=391387.




Recomendações

Evite um seletor universal chave.
Permitir elementos para herdar dos antepassados, ou usar uma classe para aplicar um estilo de vários elementos.

Faça as suas regras tão específico quanto possível.
Prefiro classe e seletores ID sobre seletores de tag.
Remover qualificadores redundante.
Estes qualificadores são redundantes:

  • ID selectors qualificados por classe e / ou seletores de tag


  • Classe seletores qualificado por seletores de tag (quando uma classe é utilizada apenas para uma marca, que é uma boa prática de design de qualquer maneira).


Evite o uso de seletores descendentes, especialmente aqueles que especificam antepassados redundante.
Por exemplo, o body ul li a {...} regra body ul li a {...} especifica um seletor body redundante, uma vez que todos os elementos são descendentes da tag body
Use seletores de classe em vez de seletores descendentes.
Por exemplo, se você precisa de dois estilos diferentes para um item da lista ordenada e um item da lista ordenada, em vez de usar duas regras:
  ul li (color: blue;) 
ol li (color: red;)


Você pode codificar os estilos em dois nomes de classe e usar aquelas nas suas regras, por exemplo:



  . unordered-list-item (color: blue;) 
. condená-list-item (color: red;)


Se você deve usar seletores descendentes, prefere seletores filho, que, pelo menos, só exigem avaliação de um nó adicional, nem todos os nós intermediários até um antepassado.




Evite o :hover selector para não-elementos de ligação para os clientes do IE.
Se você :hover em elementos não-âncora, testar a página no IE7 e IE8 para ter certeza de sua página é utilizável. Se você acha :hover está causando problemas de desempenho, considere condicionalmente usando um JavaScript manipulador de eventos onmouseover para clientes IE.


Recursos adicionais




Voltar ao topo



Evite expressões CSS



Visão geral


Expressões CSS degradar o desempenho de renderização, substituindo-os por alternativas irão melhorar o processamento para os usuários do navegador IE.



Nota: Esta melhores práticas nesta seção se aplicam apenas para Internet Explorer 5 a 7, que suportam expressões CSS.Expressões de CSS são preteridos no Internet Explorer 8, e não é suportado por outros navegadores.



Detalhes


Internet Explorer 5 apresenta expressões CSS, ou "propriedades dinâmicas", como um meio de alterar dinamicamente as propriedades do documento em resposta a vários eventos. Elas consistem em expressões JavaScript incorporado como os valores das propriedades CSS em declarações CSS. Para a maior parte, eles são usados para os seguintes fins:




  • Para emular as propriedades CSS padrão apoiado por outros navegadores, mas ainda não implementado pelo IE.


  • Para proporcionar um estilo dinâmico e gestão avançada de eventos de uma forma mais compacta e conveniente do que a escrita full-blown JavaScript injetado estilos.



Infelizmente, a pena imposta pelo desempenho expressões CSS é considerável, como o navegador reavalia cada expressão sempre que qualquer evento é acionado, como redimensionar uma janela, um movimento do mouse e assim por diante. O fraco desempenho das expressões CSS é uma das razões que são agora substituídas no IE 8. Se você já usou expressões CSS em suas páginas, você deve fazer todos os esforços para removê-los e utilizar outros métodos para alcançar a mesma funcionalidade.



Recomendações

Use as propriedades CSS padrão, se possível.
IE 8 é totalmente CSS-standards-compliant, que suporta expressões CSS somente se for executado em "compatibilidade" mode, mas não apoiá-los no "padrão" de modo. Se você não precisa manter compatibilidade com versões mais antigas do IE, você deve converter todas as instâncias de expressões usadas no lugar de propriedades padrão CSS para suas contrapartes padrão CSS. Para obter uma lista completa das propriedades CSS e versões do IE que apoiá-los, consulte o MSDN CSS Atributos Índice. Se você precisa de suporte a versões mais antigas do IE em que as propriedades desejadas CSS não estiver disponível, utilize o JavaScript para obter a funcionalidade equivalente.
Utilize o JavaScript para estilos de script.
Se você estiver usando expressões de CSS para estilo dinâmico, que faz sentido reescrevê-las como JavaScript puro para melhorar o desempenho tanto no IE e obter o benefício de suportar a mesma funcionalidade em outros browsers ao mesmo tempo. Neste exemplo dado na página do MSDN sobre propriedades dinâmicas, CSS é uma expressão usada para centralizar um bloco de HTML, cujas dimensões podem mudar em tempo de execução e de re-center que bloqueiam toda vez que a janela é redimensionada:

  <div id = "oDiv" style = "background-color: # CFCFCF; position: absolute; 
left: expression (document.body.clientWidth/2-oDiv.offsetWidth/2);
top: expression (document.body.clientHeight/2-oDiv.offsetHeight/2) "> Exemplo DIV </ div>


Aqui está um exemplo equivalente usando JavaScript e CSS padrão:



  <style> 
# oDiv (position: absolute; background-color: # CFCFCF;)
</ style>

<script type="text/javascript">
/ / Check for suporte do browser capacidade de manipulação de eventos
if (window.addEventListener) (
window.addEventListener ( "load", centerDiv, false);
window.addEventListener ( "resize", centerDiv, false);
) Else if (window.attachEvent) (
window.attachEvent ( "onload", centerDiv);
window.attachEvent ( "onresize", centerDiv);
) Else (
centerDiv window.onload =;
centerDiv window.resize =;
)

centerDiv function () (
myDiv var = document.getElementById ( "oDiv");
MyBody var = document.body;
bodyWidth var = myBody.offsetWidth;

/ / Necessário para o Firefox, que não suporta offsetHeight
bodyHeight var;
if (myBody.scrollHeight)
myBody.scrollHeight bodyHeight =;
else bodyHeight myBody.offsetHeight =;

divWidth var = myDiv.offsetWidth;

if (myDiv.scrollHeight)
divHeight var myDiv.scrollHeight =;
else divHeight var myDiv.offsetHeight =;

myDiv.style.top = (bodyHeight - divHeight) / 2;
myDiv.style.left = (bodyWidth - divWidth) / 2;
)

</ script>


Se você estiver usando expressões CSS para emular as propriedades CSS que não estão disponíveis em versões anteriores do IE, você deve fornecer um código JavaScript para os casos com uma versão de teste para desativá-lo para navegadores que não suportam CSS. Por exemplo, o max-width de propriedade max-width o que força o texto seja moldado à volta de um certo número de pixels, não foi apoiado até o IE 7. Como solução, esta expressão CSS prevê que a funcionalidade para o IE 5 e 6:



  p (width: expression (document.body.clientWidth> 600? "600px": "auto");) 


Para substituir a expressão CSS com JavaScript equivalente para as versões do IE que não suporta esta propriedade, você poderia usar algo como o seguinte:



  <style> 
p (max-width: 300px;)
</ style>

<script type="text/javascript">

if ((navigator.appName == "Microsoft Internet Explorer") & & (parseInt (navigator.appVersion) <7))
window.attachEvent ( "onresize", setMaxWidth);

setMaxWidth function () (
n = document.getElementsByTagName ( "p");
for (var i = 0; i <paragraphs.length; i + +)
pontos [i]. style.width = (document.body.clientWidth> 300? "300px": "auto");

</ script>



Voltar ao topo



Coloque CSS no cabeçalho do documento



Visão geral


Movendo blocos estilo inline e <link> elementos do corpo do documento para a cabeça melhora o desempenho de renderização de documentos.



Detalhes


Especificando folhas de estilo externas e os blocos estilo embutido no corpo de um documento HTML pode afetar negativamente o desempenho do navegador de processamento. Navegadores bloco de renderização de uma página web até que todas as folhas de estilo externas foram baixados. Blocos estilo inline (especificado com a tag <style> pode causar refluxo e mudança de conteúdo. Portanto, é importante colocar referências a folhas de estilo externas, bem como blocos de estilo inline, no cabeçalho da página. Ao garantir que as folhas de estilo são transferidos e analisados em primeiro lugar, você pode permitir que o navegador progressivamente processar a página.



Recomendações




Voltar ao topo



Dimensões da Imagem Especificar



Visão geral


Especificando uma largura e altura de todas as imagens permite um processamento mais rápido, eliminando a necessidade de reembolsos desnecessários e redesenha.



Detalhes


Quando o navegador estabelece a página, ela precisa ser capaz de fluir em torno dos elementos substituíveis, como imagens.Pode começar a compor uma página antes mesmo de as imagens são transferidas, desde que se sabe as dimensões de envolver elementos não substituível por aí. Se não as dimensões estão especificadas no documento que contém, ou se as dimensões especificadas não coincidem com aqueles das imagens reais, o navegador irá exigir um refluxo e redesenhar uma vez que as imagens são baixadas. Para evitar reembolsos, especificar a largura ea altura de todas as imagens, tanto no HTML<img> tag, ou CSS.



Recomendações

Especificar dimensões que correspondem às das imagens de si mesmos.
Não use as especificações de largura e altura para as imagens em tempo real. Se um arquivo de imagem é realmente 60 x 60 pixels, não defina as dimensões de 30 x 30 no HTML ou CSS. Se a imagem tem de ser menor, a escala-lo em um editor de imagem e defina as suas dimensões de jogo (ver Optimize imagens para detalhes.)


Certifique-se de especificar as dimensões do elemento de imagem ou de nível de bloqueio dos pais
Certifique-se de definir as dimensões no <img> elemento em si, ou um bloco de pais nível. Se o pai não é bloco de alto nível, as dimensões serão ignorados. Não definir as dimensões de um ancestral que não é um pai imediato.


Voltar ao topo



Especificar um conjunto de caracteres cedo



Visão geral


Especificando um conjunto de caracteres cedo para os seus documentos HTML permite que o navegador para começar imediatamente a execução de scripts.



Detalhes


Os documentos HTML são enviados através da Internet como uma seqüência de bytes acompanhado de codificação de caracteres de informação. Informações codificação de caracteres é especificado no cabeçalho de resposta HTTP enviada com o documento, ou na marcação HTML do próprio documento. O navegador usa a codificação de caracteres de informação para converter o fluxo de bytes em caracteres que torna a tela. Porque um navegador não consegue processar corretamente uma página sem saber como construir personagens da página, a maioria dos navegadores reserva um certo número de bytes antes de executar qualquer JavaScript ou desenho da página, enquanto eles buscam as informações conjunto de caracteres na entrada. (A exceção notável é o Internet Explorer versões 6, 7 e 8.)



Navegadores diferem com o respeito ao número de bytes no buffer e codificação padrão assumido se nenhum conjunto de caracteres é encontrado. Entanto, depois de terem protegido o número necessário de bytes e começou a processar a página, se encontrar um conjunto de caracteres especificação que doesn Não encontraram seu padrão, eles precisam de nova análise da entrada e redesenhar a página. Às vezes, eles podem até ter os recursos rerequest, se o desencontro afeta as URLs dos recursos externos.



Para evitar esses atrasos, você sempre deve especificar a codificação de caracteres o mais cedo possível, para qualquer documento HTML maior que 1 KB (1024 bytes, para ser mais preciso, que é o limite máximo do buffer usado por qualquer um dos navegadores que temos testado).



Recomendações

Prefiro HTTP sobre parâmetros metatag.
Existem várias maneiras para especificar o conjunto de caracteres para um documento HTML:

  • Do lado do servidor: Você pode configurar seu servidor web para especificar o parâmetro charset com a codificação de caracteres correcta, no Content-Type de todos os documentos que são de text/html tipo text/html por exemplo, Content-Type: text/html; charset=UTF-8


  • Client-side: Você incluir o http-equiv="content" atributo na meta tag no código HTML, e especificar o parâmetro charset por exemplo, <meta http-equiv="Content-Type" content="text/html;charset=utf-8">


Se possível, configure o seu servidor web para especificar o conjunto de caracteres em cabeçalhos HTTP. Alguns navegadores (Firefox, por exemplo) usam um atraso curto buffer antes de executar JavaScript se o charset está presente no cabeçalho, ou seja, eles podem ignorar o atraso adicional buffering necessários para verificar a marcação HTML.
Especifique a meta tag no topo da cabeceira.
Se você não controlar a sua configuração de servidor web, ea necessidade de definir o charset na meta tag, certifique-se de especificar a marcação na parte superior da seção <head> do documento. Browsers olhar para o parâmetro charset no primeiro 1024 bytes do documento, de modo a evitar penalidades de desempenho, é fundamental que o parâmetro aparece tão cedo quanto possível no cabeçalho do documento.
Sempre especificar um tipo de conteúdo.
Antes de navegadores podem começar a buscar por um conjunto de caracteres, eles devem primeiro a determinar o tipo de conteúdo do documento que está sendo processado. Se isto não é especificado no cabeçalho HTTP ou a meta tag HTML, que tentará "farejar" o tipo, utilizando vários algoritmos. Este processo pode causar atrasos adicionais, além de representar uma vulnerabilidade de segurança. Para ambos os motivos de desempenho e segurança, você deve sempre especificar um tipo de conteúdo de todos os recursos (o texto não só / html).
Certifique-se de especificar a codificação de caracteres correcta.
É importante que o conjunto de caracteres que você especificar em um cabeçalho HTTP ou HTML tag meta coincidir com a codificação de caracteres efectivamente utilizados ao autor os seus documentos HTML. Se você especificar um parâmetro charset, tanto no cabeçalho HTTP e HTML meta tag, certifique-se que eles se combinam. Se o navegador detecta uma codificação incorreta ou errada, ele vai processar a página incorretamente e / ou incorrer em atrasos adicionais enquanto ele redesenha a página. Para mais informações sobre conjuntos de caracteres válidos, consulteCharacter Encodings Seção 5.2, na especificação HTML 4.01.


Recursos adicionais


Para mais detalhes sobre o comportamento do navegador que diz respeito à presença / ausência de tipo de conteúdo e especificações charset, veja:





 



LEI MAIS

Bookmark and Share

É muito fácil instalar-os emoticons em seu Blog “blogspot”

Adicionar esta notícia no Linkk compartilhe com outras redes SOCIAIS.
Buzz It

Todos sabem que o formulário de comentários do Blogger não possui nenhum recurso. Navegando por alguns metablogs, encontrei uma dica no BloggerStop.Net, que ensina a adicionar emoticons no formulário de comentários do Blogger. É muito fácil instalar os emoticons em seu Blog, basta fazer as edições necessárias no código HTML.

image

Antes de seguir com o tutorial, faça o backup de seu Blog, para evitar que futuros erros aconteçam.

 Faça o Backup de seu Blog para proteger o seu template e seus gadgets

iremos prosseguir com o tutorial. No painel de seu Blog, vá em: Layout -> Editar HTML -> Marque a opção "Expandir modelos de widgets" -> Pressione CTRL + F e procure pelas seguintes tags:

<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>

ENTRE estas tags, inclua o seguinte código HTML:

<div style='-moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; width: 369; text-align: left; border: 1px solid #cccccc; padding: 5px; background: #eeeddf; height:86'>
<b>
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif' width='18'/> :))
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif' width='18'/> ;))
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif' width='18'/> ;;)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif' width='18'/> :D
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif' width='18'/> ;)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif' width='18'/> :p
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif' width='22'/> :((
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif' width='18'/> :)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif' width='18'/> :(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif' width='18'/> :X
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif' width='18'/> =((
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif' width='18'/> :-o
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif' width='20'/> :-/
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif' width='18'/> :-*
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif' width='18'/> :|
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif' width='24'/> 8-}
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif' width='31'/> :)]
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif' width='44'/> ~x(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif' width='30'/> :-t
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif' width='18'/> b-(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif' width='18'/> :-L
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif' width='34'/> x(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif' width='30'/> =))
</b>
</div>

Já incluimos o primeiro código HTML, agora deveremos seguir mais uma etapa para concluir a instalação. Antes de salvar seu template, procure pela seguinte tag:

</body>

ANTES dela, inclua o seguinte código:

<script src='http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/smiley.js' type='text/javascript'/><noscript><a href="http://bloggerstop.net" target="_blank"><span style="font-size: x-small;">Add Smilies</span></a></noscript>

Salve o seu template e confira o resultado. Caso não tenha funcionado, faça o upload do template que você baixou anteriormente. Caso você prefira, dexistir o formulário com os emoticons

como já sitei em cima esta fontes é do BloggerStop.Net,

LEI MAIS

Bookmark and Share

As guias são bem conhecidas- por serem muito úteis para todos, especialmente para aqueles que têm uma grande quantidade de conteúdo

Adicionar esta notícia no Linkk compartilhe com outras redes SOCIAIS.
Buzz It

este é um tutorial avançado para quem entende um pouco de códigos fontes e css

As guias são bem conhecidas por serem muito úteis para todos, especialmente para aqueles que têm uma grande quantidade de conteúdo em seus blogs e passam muito tempo a pensar onde colocar coisas novas, Eu sei que há bastante alguns tutoriais sobre como fazer em torno de guias para o Blogger, mas todos eles têm uma coisa em comum, são uma espécie de difícil aplicação, e pode confundir alguns usuários.

doutorblogs

O método que eu desenvolvi é inspirado em um tutorial de Webitect, eu achei muito útil e decidiu adaptar-se que a plataforma técnica para o Blogger. Este tutorial vai lhe trazer um muito fácil de implementar maneira de fazer guias para fora do seu sidebar widgets, aqui estão algumas características do meu método:

  • Fácil de instalar.
  • Não precisa editar html na parte lateral.
  • Automaticamente o seu lugar dentro handpicked widgets tabs.
  • Liberdade para definir o que widgets ficar fora das abas.
  • Após a implementação, Widgets normalmente são editadas a partir de seção Page Elements.
O resultado final

Se você quiser vê-lo trabalhar por favor verifique a demonstração ao vivo.

Passo 1 - Colocar os estilos em seu CSS

O estilo dos separadores pode ser facilmente alterada a qualquer momento utilizando apenas CSS, mas esta não é a principal razão para este tutorial, It's até você para mudar ou não, usar suas próprias habilidades CSS. Fizemos uma disposição geral para ele, para instalá-lo apenas o lugar certo seguinte código antes do ]]></ b: skin line>:

  / * Sidebar Tabbed Widgets 
--------------------------------- * /
. widget-wrapper2 (
border: 1px solid # 494e52;
background-color: # 636d76;
padding: 8px;
)

. widget-tab (
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-topright: 5px;
-webkit-border-radius-bottomleft: 5px;
-webkit-border-radius-bottomright: 5px;
-webkit-border-radius-topright: 5px;
background: # FFFFFF url (http://i195.photobucket.com/albums/z105/dantearaujo/tabcontentbg.gif) repeat-x deslocamento para a esquerda inferior! importante;
border: 1px solid # CFCFCF;
font-family: Arial, Helvetica, sans-serif;
padding: 15px! importante;
)

. widget-ul (separador
margin: 0;
padding: 0px 20px 0px 20px;
)
. widget-guia li ul (
list-style: none;
border - bottom: 1px solid # d6dde0;
padding - top: 10px;
padding - bottom: 10px;
font-size: 13px;
)
. widget-guia ul li: last-child (
border - bottom: none;
)
. widget-guia ul li a (
text-decoration: none;
color: # 3e4346;
)
. widget-li um pequeno guia ul (
color: # 8b959c;
font-size: 9px;
text-transform: uppercase;
font-family: Verdana, Arial, Helvetica, sans-serif;
position: relative;
left: 4px;
top: 0px;
)
. tab-content ul li a: hover (
color: # a59c83;
)
. tab-content ul li a: hover (pequeno
color: # baae8e;
)

. ativo-tab (
background: # FFFFFF url (http://i195.photobucket.com/albums/z105/dantearaujo/tabtopbg.gif) repeat-x scroll left top! importante;
border-color: # CFCFCF CFCFCF # # # FFFFFF CFCFCF! importante;
border-style: solid! importante;
border-width: 1px 1px 2px! importante;
color: # 282E32! importante;

)

ul. tab-wrapper (
margin: 0px; padding: 0;
margin - top: 5px;
margin - bottom: 6px;
)
ul. separador li-wrapper (
-webkit-border-radius-topleft: 5px;
-webkit-border-radius-topright: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
background: # 191919 url (http://i195.photobucket.com/albums/z105/dantearaujo/tabinactivebg.gif) repeat-x scroll left top;
border: 1px solid # 464C54;
color: # FFFFFF;
cursor: pointer;
display: inline;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
font-weight: bold;
line-height: 2em;
list-style-image: none! importante;
list-style-position -: fora! importante;
list-style-type: none! importante;
- Margem direita: 1px;
padding: 8px 14px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
)


Passo 2 - Instalando biblioteca jQuery


Este script precisa da biblioteca JavaScript jQuery, se você já tiver instalado, você pode pular esta etapa, se você não basta colar o código abaixo, à direita antes do seu / linha da cabeça <>:



  <! - Call jQuery -> 

<Script src = 'Tipo http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' = 'text / javascript' />

<! - End of Call jQuery ->


Passo 3 - Instalando o Script


Ok, agora que você tem a certeza que você tem jQuery instalado, você precisa instalar o script que irá fazer toda a mágica para nós, apenas o lugar certo de código a seguir antes de seu / linha da cabeça <>:



  <script type= "text/javascript"> 
starttab var = 0;
endtab var = 2;
sidebarname var = "sidebar1";
</ script>
<script type= "text/javascript" src= "http://tab-for-blogger.googlecode.com/files/bloggertabv1.0-min.js"> </ script>


Personalizar


Como você notou que você vai ter algumas linhas que podem ser personalizados, esses são:



starttab var = 0;

endtab var = 2;


sidebarname var = "sidebar";



Muito rapidamente: starttab é o número de partida para seus widgets escolhido, ele começa a contagem de 0. Endtab é o número de seu widget última incluída. Sidebarname id é a sua barra lateral, é geralmente apenas lateral ", mas apenas no caso de você ter uma id diferente, nós vamos ajudá-lo a encontrar o caminho certo para colocar aqui.



Como encontrar o seu ID na barra lateral


Ok, se você tiver instalado o script e não está trabalhando, você pode ter um diferente lateral ID que não é apenas "lateral", use os métodos a seguir para encontrar ele direito id de sua barra lateral.



Método 1 - Começar a partir do HTML


Este pode ser o mais rápido, se você usar Minima template, ou qualquer modelo derivado dele, basta ir até Layout> Editar HTML> Procure por "sidebar-wrapper" e você pode obter algo como isto:



  <Div id = 'sidebar-wrapper'> 

<B: section class lateral = 'sidebar' = 'id' preferido = 'yes'>


Basta dar uma olhada e você vai encontrá-lo id = 'sidebar'.



Método 2 - Usando o Firebug


Firebug é a mais maravilhosa extensão do Firefox para desenvolvedores web, se você não tem isso, basta baixá-lo aqui.



image



Método 3 - Usando o desenvolvedor web Firefox Plugin


Este é outro grande extensão, se você não tem, obtê-lo aqui.



image



Ok, agora que você tenha instalado o script em seu blog, você deve ser capaz de editar seus widgets normalmente em sua seção de elementos da página.



Quais são os números Gadget


Aqui está uma explicação simples para aqueles que não entendem os números ainda. Digamos que você quer fazer guias para fora do seu primeiro 3 widgets, para que o seu número inicial será 0 eo número do seu acabamento será de 2:



starttab var = 0;

endtab var = 2;


sidebarname var = "sidebar";



Confira abaixo as imagens para uma melhor compreensão:



image



image



Neste caso, Widget 3 e 4 não terá quaisquer guias, porque o seu número de acabamento foi 2. Muito fácil né?



Conselhos



  • Este script funciona apenas por uma barra lateral do blog.


  • Nós incluímos um estilo geral de suas guias, no entanto, você pode usar suas habilidades de CSS para personalizá-las, mas esteja ciente de que os erros CSS relacionados não serão apoiados aqui, certifique-se de fazer a coisa certa.


  • Todos os widgets com abas precisa ter um título.



Palavras finais


Este é um novo script que tenho a desenvolver especialmente para Bloggertuts, espero que ela irá ajudar muitas pessoas e vai ser fácil para qualquer pessoa para instalá-lo, mesmo os novatos.







LEI MAIS

Bookmark and Share

Muchográfico onde você pode encontrar milhares de ícones

Adicionar esta notícia no Linkk compartilhe com outras redes SOCIAIS.
Buzz It

Muchográfico

Uma muito boa e que tem tudo para decorar seu blog, você pode criar seu próprio texto animado, banners, gifs animados, avatares, bandeiras, reflexos de água, logotipos, ícones, etc ... E o melhor de tudo, é em espanhol, é a primeira página que eu vejo esse cara que está completamente em nosso idioma.

Vai passar horas observando todas as informações e recursos neste site. Deixo como pouca evidência mostra duas texto animado criado Muchográfico.com:

O texto animado em MuchoGrafico.comO texto animado em MuchoGrafico.comO texto animado em MuchoGrafico.comO texto animado em MuchoGrafico.com

O texto animado em MuchoGrafico.comO texto animado em MuchoGrafico.comO texto animado em MuchoGrafico.comO texto animado em MuchoGrafico.comO texto animado em MuchoGrafico.comO texto animado em MuchoGrafico.com

Também um exemplo de reflexo na água:

Muchográfico

Alguém me perguntou há algumas semanas por ícones animados, que é o ícone e, em seguida, um texto de deslocamento, bem, este site faz. Eis aqui este pequeno teste:

É um favicon animado. Se alguém ainda não sabe o que é ou como adicionar um favicon no seu blog, clique sobre este post que escrevi há algum tempo.

Eu deixei muito mais que isso na web, mas que você virá a você com uma visita ao Muchográfico.com. Para aqueles que se atrevem, com mais e gerir um programa de design gráfico, não perca seu blog (com um link que tem no seu próprio site), onde você pode encontrar milhares de ícones, tutoriais e recursos para o Adobe Photoshop.

 

LEI MAIS

Bookmark and Share

Google- Analytics Integração O que é?

Adicionar esta notícia no Linkk compartilhe com outras redes SOCIAIS.
Buzz It

AddThis inclui um conjunto de recursos poderosos de análise. No entanto, se você já utilizam o Google Analytics para o seu site ou blog, você pode querer ter todas as suas análises em um só lugar.Integração de dados em suas partes AddThis

existentes relatórios do Google Analytics é fácil, e permite que você visualize as partes AddThis eventos personalizados em seu painel do Google Analytics.

Como isso funciona?
Instalar o Google Analytics

Primeiro, você já deve ter uma conta do Google Analytics, e de ter instalado monitoramento do Google Analytics em suas páginas. O trecho de código genérico de monitoramento é composto por duas partes: uma tag de script que faz referência a ga.js código, e um outro script que executa o rastreamento código:

<script type="text/javascript"> var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); </script> <script type="text/javascript"> try{ var pageTracker = _gat._getTracker("UA-xxxxxx-x"); pageTracker._trackPageview(); } catch(err) {} </script> 


Para mais informações sobre como instalar e configurar o Google Analytics, consulte os sites de monitoramento do Google Analytics.



Instalando AddThis GA Configuração Código


Em seguida, uma vez que o Google Analytics está instalado em suas páginas, você pode enviar partes AddThis para seus relatórios do Google Analytics como eventos personalizados na categoria "Tecla", adicionando o seguinte código de configuração para o seu AddThis existentes compartilhamento de código:



addthis_config = { data_ga_tracker: pageTracker } 


Algumas notas importantes:




  • esse código de configuração deve estar contido em um <script> tag


  • Se você usar um nome não-padrão para o seu objeto perseguidor (pageTracker "no código acima), você vai precisar passar esse nome em vez


  • a configuração AddThis não pode ser referenciado em sua página até que o objeto é instanciado pageTracker em seu código do Google


  • seus dados não vão começar a aparecer no Google Analytics até este código de configuração é adicionada ao seu código de partilha de AddThis



Custom Sharing evento Naming Convention


Depois de ter instalado o código, conforme descrito acima, você começará a ver eventos personalizados aparecem no seu painel do Google Analytics. Esses eventos serão nomeados:




  • AddThis> (código) serviço (ex: AddThis> Facebook)



Consulte o Serviço AddThis Directory para uma lista completa dos serviços e dos códigos de serviço.



Exemplo de código


Eis aqui algumas AddThis exemplo de partilha de código com monitoramento do Google Analytics habilitado. Note que o objetoaddthis_config deve ser incluída após o Google Analytics incluir.



<!-- Google Analytics BEGIN --> <script type="text/javascript"> var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); </script> <script type="text/javascript"> try{ var pageTracker = _gat._getTracker("UA-xxxxxx-x"); pageTracker._trackPageview(); } catch(err) {} </script> <!-- Google Analytics END -->


<!-- AddThis Button BEGIN --> <a class="addthis_button" href="http://addthis.com/bookmark.php?v=250"> <img src="http://s7.addthis.com/static/btn/v2/lg-share-en.gif" width="125" height="16" alt="Bookmark and Share" style="border:0"/> </a> <script type="text/javascript"> var addthis_config = { data_ga_tracker: pageTracker }; </script> <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script> <!-- AddThis Button END -->

<!-- AddThis Button BEGIN --> <a class="addthis_button" href="http://addthis.com/bookmark.php?v=250"> <img src="http://s7.addthis.com/static/btn/v2/lg-share-en.gif" width="125" height="16" alt="Bookmark and Share" style="border:0"/> </a> <script type="text/javascript"> var addthis_config = { data_ga_tracker: pageTracker }; </script> <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script> <!-- AddThis Button END -->


LEI MAIS

Bookmark and Share

2/27/2010

varias redes sociais em apenas uma so página

Adicionar esta notícia no Linkk compartilhe com outras redes SOCIAIS.
Buzz It
as pessoas que tem varias contas em redes sociais como Twitter, Facebook, Orkut, MySpace.. sempre tem que fazer aquela página em seu Blog ou site sobre suas redes sociais.
resolvi mostrar um vídeo sobre o serviço Meadiciona, que descobri no youtube.com
eu sei que é um simples vídeo mas achei muito útil e resolvi compartilha los espero que seja útil para vocês ok. 

Technorati Marcas: ,,,,,,,

LEI MAIS

Bookmark and Share

2/26/2010

Para colocar uma imagem num Post procedam da seguinte maneira:

Adicionar esta notícia no Linkk compartilhe com outras redes SOCIAIS.
Buzz It

1. Escolham a imagem da Net que querem colocar 2. Cliquem com o botão do lado direito nela e escolham "Save picture as.." ou "Guardar imagem como.." e guarden-na numa pasta do vosso computador. 3. Vão ao site www.imageshack.us e cliquem em "browse", depois cliquem na imagem que guardaram previamente no vosso PC e escolham "abrir". 4. No imageshack.us cliquem em "host it!". 5. Seleccionem a última linha de código que aparece e façam "Copy" ou "Copiar". 6. Venham à SDP e coloquem esse código dentro das seguintes Tags molhe5vd    Exemplo: [code:1:bf679d249a][img]http://img503.imageshack.us/img503/7884/molhe5vd.jpg[/img][/code:1:bf679d249a] E está prontinho!

LEI MAIS

Bookmark and Share

2/25/2010

novo Modelo-de compartilhamentos criado para o Blogger.

Adicionar esta notícia no Linkk compartilhe com outras redes SOCIAIS.
Buzz It

Eu aproveitei algumas possibilidades do serviço

add-this-logoYour content. Everywhere.
(Seu conteúdo. Em todo lugar)

 

para customizar e criar um exclusivo gadget para Blogger. e resolvi compartilhar com vocês. Esse modelo de botões para compartilhar com os serviços mais usados e mais comuns e que acredito que poderão ser mais eficientes e termos de conversões para seu conteúdo. Fica semelhante a isso

addthis

A primeira coisa a fazer é registrar-se (gratuitamente) no serviço. Isso é importante, pois vamos precisar de seu nome de usuário para fazer funcionar o gadget para Blogger. Registrar-se também é importante para ter acesso às possibilidades de personalização.

já tem a opção de compartilhar inclusive no novo serviço do Google Buzz, enviar para o Link Ninja, tem um encurtador de URLs e até a possibilidade de traduzir seu blog para mais de 40 idiomas. Esse gadget tem 280px de largura e vou mostrar como colocar na barra lateral do Blog ou no rodapé de seus artigos. Então preste atenção aos espaços onde vai colocar isso

Passo 1 – Adicionando o seu CSS no template.

Abra o painel do Blogger, clique no menu “Layout” ~> “Editar HTML” lembrando de marcar a caixa do “Expandir modelos de widgets” e  procure pela linha “]]></b:skin>” e imediatamente ACIMA disso cole

.addthis_toolbox .two_column
{
    width: 276px;
    padding: 10px 0 10px 0px;
    border: 3px solid #eee;
    background-color: #fff;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.addthis_toolbox .two_column a
{
    padding: 4px 0 4px 34px;
    position: relative;
    width: 106px;
    display: block;
    text-decoration: none;
    color: blue;
}

.addthis_toolbox .two_column a:hover
{
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    background: #B4D3F8;
    text-decoration: none;
}

.addthis_toolbox .two_column span
{
    position: absolute;
    left: 14px;
    top: 4px;
}

.addthis_toolbox .two_column  .top
{
    padding: 0 0 10px 0;
    border-bottom: solid 1px #eee;
    margin-bottom: 10px;
    margin: 0 20px 10px 20px;
}

.addthis_toolbox .two_column  .more
{
    border-top: solid 1px #eee;
    padding: 10px 0 0 0;
    margin: 10px 20px 0 20px;
    text-align: center;
}

.addthis_toolbox .two_column  .more a
{
    padding: 4px 0;
    width: auto;
}

.addthis_toolbox .two_column .more span
{
    display: none;
}

.addthis_toolbox .two_column .column1
{
    width: 130px;
    float: left;
}

.addthis_toolbox .two_column .column2
{
    width: 130px;
    float: left;
}

.addthis_toolbox .two_column .clear
{
    clear: both;
    padding: 0;
    display: block;
    height: 0;
    width: 0;
}

Passo 2 –  a prosseguir Agora no HTML.

Recomendo que adicione esse modelo no rodapé dos artigos, imediatamente abaixo do texto. Para fazer isso procure pela linha.

<p class='post-footer-line post-footer-line-1'>

Ou algo bem semelhante a isso e ABAIXO cole o seguinte trexo só modificando o que for indicado.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="addthis_toolbox">
    <div class="two_column">
        <div class="column1">
            <a class="addthis_button_twitter">Twitter</a>
            <a class="addthis_button_facebook">Facebook</a>
            <a class="addthis_button_buzz">Google Buzz</a>
            <a class="addthis_button_orkut">Orkut</a>
            <a class="addthis_button_live">Live</a>
            <a class="addthis_button_technorati">Technorati</a>
        </div>
        <div class="column2">
            <a class="addthis_button_favorites">Favoritos</a>
            <a class="addthis_button_googlereader">Reader / Feed</a>
            <a class="addthis_button_linkninja">Link Ninja</a>
            <a class="addthis_button_googletranslate">Translate</a>
            <a class="addthis_button_print">Imprimir</a>
            <a class="addthis_button_bitly">Encurtar URL</a>
        </div>
        <div class='clear'/>
    </div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=NOME_USUÁRIO"></script>
</div>
</b:if>

Agora pegue seu nome de usuário que você cadastrou no Add This e coloque onde está marcado de vermelho no código. Salve e veja o resultado em seu blog, lembrando que isso só aparecerá no rodapé dos artigos e apenas nas páginas dos posts individualmente.

Note que no código acima há a primeira e última linhas em um tom mais claro. Se você quiser colocar esse gadget na barra lateral de seu blog, então é só copiar o HTML sem essas linhas e colar num elemento de página (gadget) do tipo “HTML/Javascript”.

creditos doferramentasblog Agora vamos mãos a obra.

LEI MAIS

Bookmark and Share

Este Gadget exibe as postagens recentes na horizontal deslizante

Adicionar esta notícia no Linkk compartilhe com outras redes SOCIAIS.
Buzz It

muito bom quando não temos muito espaço no nosso Blog e queremos colocar um efeito a mais, e deixar nosso Blog mais personalizado.Veja abaixo como ter no seu Blog:


1.Faça Login no Blogger
2.Vá para "Layout"->"Elementos da página"->"Adicionar um Gadget"->"HTML/JavaScript"

3.Adicione o código abaixo no espaço do Gadget:

<script style="text/javascript" src="http://noticiaeblog.googlecode.com/files/scrolling_blogger_posts.js"> </script><script style="text/javascript"> var nMaxPosts = 15; var sBgColor; var nWidth; var nScrollDelay = 175; var sDirection="left"; var sOpenLinkLocation="N"; var sBulletChar="•"; </script> <script style="text/javascript" src="http://seu-blog.blogspot.com/feeds/posts/default?alt=json-in-script&callback=RecentPostsScrollerv2"> </script>


Nota: Substitua o endereço em vermelho pelo endereço do seu blog ex: noticiaeblog.blogspot.com.O número em laranja é a quantidade de postagens que será exibida mude como preferir.
4.Salve e visualize.

GRÇAS A FONTE: noticiaseblog

LEI MAIS

Bookmark and Share

2/24/2010

Conduit Forum-nós foi capaz de fazer algumas mudanças “significativas”

Adicionar esta notícia no Linkk compartilhe com outras redes SOCIAIS.
Buzz It

hoje vamos ver um edital sobre Conduit Marketplace.

Graças ao grande feedback que temos coletadas ao longo dos últimos
mes-se e-mails, interviews ou debates sobre o.Conduit Forum

Conduit Marketplace

para o seu your Control Panel..
Nesta edição:
• Fresh Product Updates
• Nova Facebook App
• Ganhe prêmios em dinheiro, inserindo o "Seu Conduit Story" Contest
Exciting New Features and Updates
New Apps Tab - A fim de tornar o compartilhamento de seus aplicativos mais fácil e rápido,
tanto no Marketplace Conduit e no seu próprio site, nós adicionamos um novo
Apps guia para o Painel de Controle.
Além de sua página de download da barra de ferramentas personalizada, você pode agora também
personalizar uma página para cada um de seus aplicativos com telas,
descrições, tags e muito mais, a partir do qual os usuários podem acessar seu App
diretamente. Similar pages já estão disponíveis para mais de 10.000 Apps
no Mercado Conduit. Veja o See example  Novo Mercado - Falando de Apps, temos completamente renovada a
Conduit Marketplace. O novo projeto inclui tanto pesquisa melhorada App
pelo nome e categoria, milhares de novas aplicações e uma nova marca
"Make Money"categoria" onde você pode pegar Apps e gerar extra
receitas em seu programa de Conduit Rewards program.
Apps Grab rentabilizado e começar a ganhar dinheiro com Grab monetized Apps and start making money
Nova Facebook App!
Nós adicionamos um novo Facebook App que
oferecer a seus usuários o mais quente social
serviço de rede na web.
Os usuários podem se conectar ao Facebook direito
a partir da App não importa onde eles estão
na Web e em seguida, atualizar seu status,
acessar suas páginas favoritas, e visita
sua conta do Facebook em um clique.
Esta App cool também está integrado com
sua característica comunitária alertas, Community Alerts os usuários recebam alertas instantâneos para image
sua área de trabalho sempre que têm
atualizações importantes sobre como o Facebook
pedidos do amigo, mensagens, e muito mais.
Adicione o novo Facebook App agora Add the new Facebook App now

LEI MAIS

Bookmark and Share

Para quem não sabe, favicon, conforme publicado anteriormente, é aquele pequeno ícone que aparece na barra de navegação

Adicionar esta notícia no Linkk compartilhe com outras redes SOCIAIS.
Buzz It
do lado esquerdo da url de uma página web Nos posts anteriores, ensinei como criá-lo em formato icon. Agora, para que ele seja visualizado em outros navegadores, é preciso transformar a imagem .png em .ico. Uma forma simplificada de se fazer isso é acessando este site: http://www.favicon.ru/en

Devemos clicar em arquivo e procurar a imagem já salva no computador. Depois, iremos clicar em create favicon.ico. Feito isso, aparecerá uma nova janela para o download.

Legal! Mas, neste ponto, apareceu um novo problema: nem Picasa, nem ImageShack, nem Photobucket hospedam imagens no formato .ico. Nova pesquisa no Google e encontrei diversos sites com esta função. Escolhi alguns sites.

Image Boo Hosting – (www.imageboo.com)

My Web Jpg Hosting - (www.mywebjpg.com)

ICON J - (www.iconj.com)

Image Hosting - (www.imagehosting.gr)

Wimg - (www.wimg.co.uk)


image
Para hospedar a imagem, devemos clicar em arquivo, procurar a imagem com formato .ico recém-criada, fazer o upload dela e copiar a url, conforme nos mostra a imagem abaixo:

Agora, vamos adaptar o código e inserir no html do nosso template. Este código é de autoria do Compulsivo, com todos os direitos reservados.
<link href='URL_DA_IMAGEM_FORMATO_ICO.ico' rel='shortcut icon'/>
<link href='URL_DA_IMAGEM_FORMATO_PNG.png' rel='shortcut icon'/>
ou neste outro modelo de códigos fontes use o mesmo sistema ok procurar (Crtl+F) por ]]></b:skin> e colar o código logo abaixo
CÓDIGO PARA INSERIR FAVICON NO BLOGGER
<link href='URL_DA_IMAGEM_ICO' rel='shortcut icon'/>
<link href='URL_DA_IMAGEM_PNG' rel='shortcut icon'/>
<link href='URL_DA_IMAGEM_PNG' rel='apple-touch-icon'/>
<link href='URL_DA_IMAGEM_PNG' rel='shortcut icon' type='image/x-icon'/>
Na primeira linha colamos a url da imagem .ico e na segunda, a url da mesma imagem em .png. Agora, é só entrar no html, procurar (Crtl+F) por ]]></b:skin> e colar o código logo abaixo, devendo ficar assim:

Vamos visualizar o template e, se tudo estiver bem, salvar. Para criar a imagem em .png, podemos usar o Paint ou o Photshop e hospedar no Picasa. Não tem erro!
espero ter ajudados a todos.

LEI MAIS

Bookmark and Share

2/23/2010

Stylist Menu- à sua barra lateral e muito mas bonitas Para Uso e é personaliza-vel.

Adicionar esta notícia no Linkk compartilhe com outras redes SOCIAIS.
Buzz It

como adicionar um menu para um blogger bonito, blog lateral, hoje você vai saber. que de uma maneira muito fácil como adicionar um menu para sua barra lateral e como personaliza-la de cores para combinar com o modelo do Blogger com cores .

Adicionando o menu horizontal no seu blog do Blogger

image

Vá para a sua conta no Blogger, e ir para o Dashboard>> Layout>> e na páginaElementos da página, clique em Adicionar um gadget e escolha HTML / JavaScript Adicionar, em seguida, copiar o seguinte código e colá-lo no / JavaScript HTML área de Conteúdo.

<style type="text/css">

/ * Made By AllBlogTools.com * /

ddblueblockmenu # (
border: 1px solid # 000000; / * Cor da borda principal * /
border-bottom-width: 0;
width: 100%;
)

ul # ddblueblockmenu (
margin: 0;
padding: 0;
list-style-type: none;
Trebuchet MS Sans ',' Lucida Grande 'Arial, font: normal 90%'-serif;
)

# ddblueblockmenu a (
display: block;
padding: 3px 0;
padding-left: 9px;
largura: 94%; / * 94% menos toda a esquerda / Preenchimentos margens direita e * /
text-decoration: none;
color: # FFFFFF; / * Menu Font Color * /
background-color: # 2175bc / * cor de fundo do menu * /
border-bottom: 1px solid # 90bade / * cor da borda inferior * /
border-left: 7px solid # 1958b7; / * cor da borda esquerda * /
list-style-type: none;
)

* Ddblueblockmenu html # um (/ IE * apenas * /
largura: 94%; / * IE 5 * /
largura: 94%; / * 94% menos toda a esquerda / Preenchimentos margens direita e * /
)

# ddblueblockmenu a: hover (
background-color: # 2586d7; / * Menu de fundo de cor Em Hover * /
border-left-color: # 1c64d1 / * cor da borda esquerda on hover * /
)

# div.menutitle ddblueblockmenu (
color: # FFFFFF; / * Title Font Color * /
border-bottom: 1px solid black;
padding: 1px 0;
padding-left: 5px;
background-color: # 000000; / * Menu Tite Background Color * /
sans Trebuchet MS ',' Lucida Grande 'Arial, font: bold 90%'-serif;
)
/ * Made By AllBlogTools.com * /
</ style>

<div id="ddblueblockmenu">

<div class="menutitle"> Procurar </ div>
<ul>
<a href="http://www.allblogtools.com/"> Home </ a>
<a href="http://www.allblogtools.com/about/"> Sobre nós </ a>
<a href="http://www.allblogtools.com/category/blogger-templates/"> Blogger
templates </ a>
<a Blogger href="http://www.allblogtools.com/category/tricks-and-hacks/">
Truques </ a>
<a href="http://www.allblogtools.com/blogger-tools/"> Blogger Tools </ a>
<a href=" # "> Editar </ a> </ * Pode copiar esta linha de cada vez que você quiser acrescentar um elemento novo para o menu Editar e alteração em seu texto e alterar a url # .* />
</ UL> </ div> <font size="1"> Menu by <um
href = "http://www.allblogtools.com/"> AllBlogTools.com </ a> </ font>



Agora, clique em Salvar E pronto esta feito, por favor verifique o seu blog.


Agora vamos aprender a personalizar as cores do menu para me parece perfeitamente com o modelo do Blogger Ou você pode apenas deixa-lo como você o vê.



Personalizar as cores do menu.



Agora, por favor olhar o código acima, você verá alguns códigos são escritos em cores. i no código acima descrito o que cada parte responsável. Tudo o que você tem a fazer é ir para o nosso Html gerador cores hexadecimal e obter o seu código cor favorita cola-lo ao invés do código de cor no código acima.



Por exemplo, se você deseja alterar a cor de fundo para o menu.

você vai encontrar uma linha que diz



  background-color: # 2175bc / * cor de fundo do menu    * / 


Basta alterar 2175bc ao seu código de cor favorita que você começou. a partir dessas cores hexadecimal



 



Technorati Marcas: ,,,,,

LEI MAIS

Bookmark and Share

uma lista com as últimas postagens que ira gostar.

Hello visitante seja bem vindo sua presença é um prazer

ads ads ads
 

Recommended links

  • ads
  • ads
  • ads
  • ads

DOUTOR. Copyright © 2009 Gadget Blog is Designed by Ipietoon Sponsored by Online Business Journal

Creative Commons License
This work is in the Public Domain.
Linkbão Oi Torpedo Click Jogos Online Rastreamento Correios Mundo Oi oitorpedo.com.br mundo oi torpedos mundo oi.com.br oi.com.br torpedo-online Tv Online torrent Resultado Dupla Sena Resultado Loteria Federal Resultado Loteca Resultado Lotofacil Resultado Lotogol Resultado Lotomania Resultado Mega-sena Resultado Quina Resultado Timemania baixa-facil Link-facil Resultado Loterias