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

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.







Bookmark and Share

0 comentários:

Postar um comentário

seja bem vindo ao mundo do doutorblogs, e sendo asim espéro ser merecedor de suas amizades e lhe convido para visitar mais e ser um dos Seguidor de nosso blogs.
atenciosamente douotrblogs.

Copie o código referente a imagem e cole
:-A :-Z :-C :-X :-E
:-F :-G :-H :-I :-J
:-K :-L :-M :-N :-O
:-P :-Q :-R :-( :-T
:-a :-e :-i :-o :-w

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