Home Uncategories

Add Comment Edit

Depois de muito tempo este truque eu libero, eu tenho essa idéia quando Webitect feito tutorial para Sidebar Tabbed.
Até ontem eu não fiz tutorial ainda, porque estou ocupado e difícil para mim fazer bom tutorial para este truque especial para o blogueiro.
Eu modifiquei este truque especial para Bloggertuts depois que Dantearaujo feitas tutorial e estilo CSS para esse TAB e colocá-lo em bloggertuts .
Alhamdulillah fez ótimo tutorial para este truque, todo mundo vai entender facilmente. Você pode ler aqui
Na verdade, entre este truque e Webitect é completamente diferente eu só tenho inspiração a partir daí. Porque eles fizeram para o site em geral.
Se você procurar no Google você vai encontrar muitas maneiras de fazer Sidebar Tabbed mas difícil de implementar no blogger, porque temos de modificar HTML ou XML na parte da barra lateral. Este truque é muito fácil só colocar CSS e JS. A JS vai fazer automático estrutura de guias e não temos para modificar na parte da barra lateral.
Portanto, este truque não vai atrapalhar você html e perturbar a sua barra lateral. Depois de colocar js Você pode mudar de posição ou o conteúdo da barra lateral, que era muito fácil.
Aqui estão algumas características do meu método:
  • Fácil de instalar.
  • Não há necessidade de editar html na parte da barra lateral.
  • Automaticamente colocar seus widgets escolhidos a dedo dentro de abas.
  • Liberdade para definir o que widgets de ficar de fora das guias.
  • Após a implementação, Widgets são normalmente editados a partir de seção Elementos da página.

O Resultado Final

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

Passo 1 - Colocar os estilos em seu CSS

O estilo das guias pode ser facilmente alterada a qualquer momento usando apenas CSS, mas esta não é a principal razão para este tutorial, é até você para mudar ou não, usar suas próprias habilidades CSS. Fizemos um esquema geral para isso, para instalá-lo basta colocar o seguinte código logo antes do ]]> </ b: skin> linha:
/ * Os Widgets da barra lateral com guias 
--------------------------------- * / 
. widget wrapper2 {
 fronteira : 1px solid # 494e52; 
background-color : # 636d76; 
preenchimento : 8px;
}

. Widget guia- {: url (http repeat-x deslocamento para a esquerda inferior importante; / i195.photobucket.com/albums/z105/dantearaujo/tabcontentbg.gif /)! fronteira : 1px solid # CFCFCF; font-family : Arial, Helvetica, sans -serif; estofamento : 15px ! importante;




}

. Widget guia-   ul {
 margem : 0px; 
preenchimento : 0px 20px 0px 20px;
}
. Widget guia-   ul  li {
 list-style : none; 
fronteira - bottom : 1px solid # d6dde0; 
estofamento - top : 10px; 
estofamento - bottom : 10px; 
tamanho da fonte : 13px;
}
. Widget guia-   ul  li : last-child {
 fronteira - fundo : none;
}
. Widget guia-   ul  li a {
 text-decoration : none; 
cor : # 3e4346;
}
. Widget guia-   ul  li uma pequena {
 cor : # 8b959c; 
font-size : 9px; 
text-transform : maiúsculas; 
font-family : Verdana, Arial, Helvetica, sans -serif; 
posição : relative; 
esquerda : 4px; 
superior : 0px;
}
. Guia de conteúdo   ul  li a: hover {
 cor : # a59c83;
}
. Guia de conteúdo   ul  li a: hover pequena {
 cor : # baae8e;
}

. Ativo-guia {
 fundo : # FFFFFF url (http: / i195.photobucket.com/albums/z105/dantearaujo/tabtopbg.gif /) repeat-x deslocamento para a esquerda top importante;! 
cor-fronteira : # # CFCFCF CFCFCF # FFFFFF # CFCFCF importante;! 
fronteira de estilo : solid ! importante; 
border-width : 1px 2px 1px importante;! 
cor : # 282E32 ! importante;        

}

ul . guia-wrapper {
 margem : 0px;  preenchimento : 0px; 
margem - top : 5px; 
margem - fundo : 6px;
}
ul . guia-wrapper  li {url (http: / i195.photobucket.com/albums/z105/dantearaujo/tabinactivebg.gif /) repeat-x deslocamento para a esquerda superior; fronteira : 1px solid 14px; text-align : center; text-decoration : none; text-transform : maiúsculas; 
}

Passo 2 - Instalando biblioteca jQuery

Este script precisa do jQuery biblioteca JavaScript, se você já tiver instalado, você pode pular esta etapa, se você não é só colar o código abaixo antes de seu direito </ head> linha:
<! - Chamada jQuery ->

< roteiro  src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js'  tipo 'text / javascript "= />

<! -  Fim  do  jQuery  chamada  ->

Passo 3 - Instalar o Script

Ok, agora que você fez certo de que você tem jQuery instalado, você precisará instalar o script que vai fazer toda a magia para nós, basta colocar o seguinte código logo antes de sua </ head> linha:
<Tipo de script = "text / javascript" >
 var starttab = 0;
 var endtab = 2;
 var sidebarname = "sidebar1" ;
</ Script>
<Script

Personalizar

Como você notou que você vai ter algumas linhas que podem ser personalizados, são:
var starttab = 0 ;
var endtab = 2 ;
var sidebarname = " barra lateral ";
Muito rapidamente: starttab . é o número de partida para seus widgets escolhidos, ele inicia a contagem de 0 endtab . é o número de seu Widget última incluída sidebarname é ID de sua barra lateral, é geralmente apenas " barra lateral ", mas apenas no caso de você ter um ID diferente, nós vamos ajudá-lo a encontrar o caminho certo para colocar aqui.

Como encontrar o seu ID barra lateral

Ok, se você tiver instalado o script e não está funcionando, você pode ter um ID diferente barra lateral que não só é " lateral ", use os seguintes métodos para localizar ele id direito da barra lateral.

Método 1 - Obtendo a partir do HTML

Este pode ser o mais rápido, se você usar Minima modelo, 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 = 'sidebar'  id = 'sidebar'  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, basta baixá-lo aqui .
imagem

Método 3 - Usando Web developer Firefox Plugin

Este é outro grande extensão, se você não tem, obtê-lo aqui .
imagem
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 de seus 3 primeiros widgets, para que o seu número inicial será 0 eo número do seu acabamento será de 2:
var starttab = 0 ;
var endtab = 2 ;
var sidebarname = "sidebar";
Confira imagens abaixo para melhor entendimento:
imagem
imagem
Neste caso, Widget 3 e 4 não receberá nenhuma guias, porque o seu número de acabamento foi 2. Muito fácil né?

Conselhos

  • Este script funciona para apenas uma barra lateral por blog.
  • Nós incluímos alguns estilos gerais de seus guias, no entanto, você pode usar suas habilidades de CSS para personalizá-los, 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.

Share this:

ABOUT THE AUTHOR

Hello We are OddThemes, Our name came from the fact that we are UNIQUE. We specialize in designing premium looking fully customizable highly responsive blogger templates. We at OddThemes do carry a philosophy that: Nothing Is Impossible

0 comentários:

Postar um comentário

Assinar: Postar comentários ( Atom )