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.
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.
Método 3 - Usando o desenvolvedor web Firefox Plugin
Este é outro grande extensão, se você não tem, obtê-lo aqui.
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:
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.
Technorati Marcas:
As,
guias,
são,
bem,
conhecidas,
por,
serem,
muito,
úteis,
para,
todos,
especialmente,
aqueles,
que,
têm,
uma,
grande,
quantidade,
de,
conteúdo
.png "English"){kind=small}
Postagens
![https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTBe8ix-ipvuYz4lt-_8D-h_rOJhxC_laclRiPa2E539AYdGJjDvIy9rIlQ83aeg0i4hYQWoWd-IEKh6gjpmT4N7q8WCf6sXjZaqcACd0w8-q-VCwGLd4b27Rlo4vnqAUQz75NsC33BrUJ/s320/count2.png"](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTBe8ix-ipvuYz4lt-_8D-h_rOJhxC_laclRiPa2E539AYdGJjDvIy9rIlQ83aeg0i4hYQWoWd-IEKh6gjpmT4N7q8WCf6sXjZaqcACd0w8-q-VCwGLd4b27Rlo4vnqAUQz75NsC33BrUJ/s320/count2.png"){kind=link}
![https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjboH31cG1Y16Z0vTc6tnWn-0XXuh-BztN2rOFE4akhkkJ3MtUUmFs0KrE6yg6ZgLC7i3ASfN44D1khlKq8JpJE5U_FYMcl_2x2MAcpQnm-YFOM5Zi_gObnAEmVrTCJxLw7-cNxYSB7wWih/s320/count+blogger.png"](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjboH31cG1Y16Z0vTc6tnWn-0XXuh-BztN2rOFE4akhkkJ3MtUUmFs0KrE6yg6ZgLC7i3ASfN44D1khlKq8JpJE5U_FYMcl_2x2MAcpQnm-YFOM5Zi_gObnAEmVrTCJxLw7-cNxYSB7wWih/s320/count+blogger.png"){kind=link}
![https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv93cPYRjCV6PdsDdFSVukKvmy47deRSS32KtY8OObP0lS0seek8xUDRMmWroyXB0nwpFrOy2NRUc0ud6pmBoUCxS7nFcULMR4LUj8cVRX8rNiuCW3G7BBugZCsdE77q2zzvVyagWzfUeS/s320/countblogger2.png"](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv93cPYRjCV6PdsDdFSVukKvmy47deRSS32KtY8OObP0lS0seek8xUDRMmWroyXB0nwpFrOy2NRUc0ud6pmBoUCxS7nFcULMR4LUj8cVRX8rNiuCW3G7BBugZCsdE77q2zzvVyagWzfUeS/s320/countblogger2.png"){kind=link}