Adicionar coluna Horizontal Lateral

Há algum tempo eu estava procurano um tutorial de como adicionar uma coluna horizontal lateral sobre as duas colunas do template. Não encontrei.

 

O que eu fiz? Utilizei alguns templates de teste e pesquisei no HTML dos templates como as sidebars horizontais ficavam sobre as duas colunas laterais. Então, com um pouco de paciência, descobri e vou postar aqui.

 

Em "Layout" e Editar "HTML", clique em "Expandir modelo de Widget". Encontre (Ctrl+F) primeira tag das sidebar do seu blog, como (no caso do meu template) no exemplo a seguir:

#sidebar {
    width:230px;
    float:left;
    text-align:left;
    padding: 5px;
    overflow: hidden;
}

Cole o seguinte código logo acima da tag encontrada. Este código abaixo é o da sidebar horizontal sobre as duas colunas.

 

* Se você quiser adicionar essa sidebar horizontal também abaixo das duas colunas, deverá procurar nas sequências da tag acima a que representa a última coluna e colar o seguinte código abaixo dela.

#rightsidebar2-wrapper {
  background: url() top no-repeat;
  width: 320px;
  margin-top:10px;
  margin-right:10px; _margin-right:0px;
  margin-left: 0px;
  float:right;
  word-wrap: break-word; 
  overflow: hidden;

}

A marcação em vermelho é a largura da área destina à sidebar horzontal, que deve ser a soma das larguras das colunas (cuidado com margins e paddings). Altere de acordo. Veja o exemplo:

 

Sidebar Horizontal sobre as colunas= 250px Coluna Esquerda= 100px Coluna Direita= 150px

 

A marcação de azul é a flutuação na página. Se as colunas do seu template são à esquerda da coluna do post, altere este valor para float:left;

 

Agora encontre a sequencia das sidebars do seu blog que indica as posições. (Mais ao final do código HTML)

Algo mais ou menos como: (Estas linhas do código representam as duas colunas do blog)

             <div id='sidebar2'>
<b:section id='sidebar2-widget' showaddelement='yes'>
<b:widget id='HTML4' locked='false' title='Your Feed Here' type='HTML'/>
<b:widget id='HTML2' locked='false' title='Posts Recentes' type='HTML'/>
</b:section>
            </div>

            <div id='sidebar'>
<b:section id='categories-widget' showaddelement='yes'>
<b:widget id='Label1' locked='false' title='Categories' type='Label'/>
<b:widget id='BlogArchive1' locked='false' title='ARCHIVES' type='BlogArchive'/>
</b:section>
            </div>

Cole o seguinte código logo acima da tag encontrada.

<div id='rightsidebar2-wrapper'> 
<b:section class='rightsidebar' id='rightsidebar2' preferred='yes'>
<b:widget id='Subscribe1' locked='false' title='Inscrever-se' type='Subscribe'/>
</b:section>
      </div>

* Vale lembrar que, se você quiser adicionar essa sidebar horizontal também abaixo das duas colunas, deverá colar o código abaixo dessa tag.

 

Existem outras alterações masi complexas no código HTML do template a fazer, mas essa vai ficar pra uma outra postagem.

Visualize, faça vários testes e salve o template. Agora você inseriu uma sidebar superior às duas colunas do seu blog.

Read more »

Tutorial - Como Instalar Sidebar Tab no Template

Fazendo umas pesquisas em alguns blogs, em especial o Meu Super Blog e o Dicas Blogger, descobri como inserir a sidebar tab no template que você está usando. É aquele menu lateral com três abas como na figura abaixo (exemplo do Usuário Compulsivo).

Eu ja havia postado aqui uma forma de sidebar tab para iniciantes e intermediários, que não precisa alterar nada no código HTML do blog. Não era fixo no template, era apenas colocado em uma nova gadget, porém, não era muito funcional nem tampouco profissional.

Esse que vou mostrar agora, é o mesmo daqueles tempaltes que ja vêm com esse recurso instalado. Consegui montar um passo-a-passo de como adiciona-lo ao seu blog. Então, vamos lá.

É o seguinte, para adionar no seu blog, siga o passo-a-passo:

1 - Vá ao código HTML do seu blog e clique em "Expandir modelo de widget". Abaixo das sequências de características das sidebars (depois daquelas que contem #sidebar 1{ etc... e antes das tags sobre Profiles, Blockquote, Comment e etcc., etendeu?), cole o seguinte código:

Exemplo: No meu template, eu colei depois de:

.sidebar a img {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

Então, faça como o descrito copiando e colando o código abaixo, formatando a largura da Ta View de acordo com a coluna (sidebar) do seu blog:

/*--------Tabber ---------------------------------*/
#tabsidebar-wrapper{
width: 375px; /* Mesma largura da Sidebar */
float: right;
border: 1px none #CCC;
margin-bottom: 15px;
}
.tabberlive .tabbertabhide {display:none;}
.tabber {display:none;}
.tabberlive {margin-top:1em;}
.tabber h2 {
border-bottom:2px solid #5B0;
margin-bottom: .3em;
padding: 0;
line-height:1.2em;
}
.tabber .widget {margin-bottom: 1em;}
.tabber .widget-content {margin: 0 0px;}
ul.tabbernav{
margin:0;
padding: 8px 0;
border-bottom: 1px solid #ccc;
}
ul.tabbernav li{
list-style: none;
margin: 0;
display: inline;
}
ul.tabbernav li a{
padding: 8px 0.5em;
margin-right:2px;
border: 1px solid #CCC;
border-bottom: none;
background: #fff;
text-decoration: none;
}
ul.tabbernav li a:link { color:#369;}
ul.tabbernav li a:visited { color: #369;}
ul.tabbernav li a:hover{color:#369; background: #e6e6e6; border-color: #CCC;}
ul.tabbernav li.tabberactive a{
background-color: #e6e6e6;
color: #369;
border-bottom: 1px solid #e6e6e6;
}
ul.tabbernav li.tabberactive a:hover{
color: #369;
background: #e6e6e6;
border-bottom: 1px solid #e6e6e6;
}
.tabberlive .tabbertab {
background: #e6e6e6;
padding:5px;
border:1px solid #ccc;
border-top:0;
}

.tabberlive .tabbertab h2 {display:none;}
.tabberlive .tabbertab h3 {display:none;}

2 - Agora, cole o código seguinte antes da tag </head>:

<!-- JavaScript Menu em Abas -->
<script src='http://pi0qqg.bay.livefilestore.com/y1pzujTC-NnsVpna7xTKKxk2oqK_xXox33_8y_NuoWuWFYBgDdqUYqso_r2FPHlEhpQL0ACpEZJSkwoDWiDk7VYPA/tabber.js?download' type='text/javascript'/>

Feito isso, salve o modelo.

 

3 - Apartir da tag <body> existe uma sequência de tags que identificam a estrutura do seu blog, onde ficam as colunas, etc... Aqui, vamos inserir o local onde ficará a sidebar tab (Tabber):

Então, encontre uma tag mais ou menos igual a esta:

<div id='main-wrapper'>
<b:section class='main' id='main' preferred='yes'>
<b:widget id='Blog1' locked='true' title='Postagens no blog' type='Blog'/>
</b:section>
</div>

OBS.: É imposrtante colar abaixo de <b:section></div> em negrito acima.

Abaixo dela, cole o seguinte código:

<div id='tabsidebar-wrapper'>
<div class='tabber' id='tab1'>
<div class='tabbertab'>
<b:section class='sidebar' id='tabbertab1' maxwidgets='1' showaddelement='yes'/>
</div>
<div class='tabbertab'>
<b:section class='sidebar' id='tabbertab2' maxwidgets='1' showaddelement='yes'/>
</div>
<div class='tabbertab'>
<b:section class='sidebar' id='tabbertab3' maxwidgets='1' showaddelement='yes'/>
</div>
</div></div><!-- Fim da tabsidebar-wrapper-->

 

Pronto! Agora vc tem um recurso bem interessante para seu blog. Dúvidas? Pergunte através dos comentários.

Read more »

Widget Sidebar Tab

 

Procurei por vários sites algum widget para criar uma sidebar com tab no blogger (aquele com abas). Achei alguns, mas tinha que fazer várias alterações no HTML e ainda baixar e hospedar um arquivo java script. Mei complicado.

Encontrei no Blogger Templetes um widget em que você não precisa fazer alteração alguma no código HTML do seu blog. Basta apenas copiar o código e colar em um elemento de página. (Ficará mais ou menos como na figua ao lado)

Copie e cole o código abaixo num elemento de página do seu Blog. Depois é só configuras o nome das abas e o tamanho da tab.

De laranja, se refera ao menu de abas, e como são três menus, deve ter 1/3 (um terço) da largura da tab que está marcada de verde.

De vermelho, são as alterações referentes ao título da cada aba e o código ou texto inserido em cada uma.

style type="text/css"> div.TabTampil div.TTs {height: 24px; overflow: hidden; } div.TabTampil div.TTs a:hover, div.TabTampil div.TTs a.Active { background-color: #77d0ee; } div.TabTampil div.Halamans { clear: both; border: 1px solid #0199cb; overflow: hidden; background-color: #ffffff;} div.TabTampil div.Halamans div.Halaman { height: 100%; padding: 0px; overflow: hidden; } div.TabTampil div.Halamans div.Halaman div.Alas { padding: 3px 5px; } div.TabTampil div.TTs a { border-left:1px solid #0199cb; border-right:1px solid #0199cb; border-top:1px solid #0199cb; border-bottom:0px solid #0199cb; float: left; display: block; width: 100px; text-align: center; height: 24px; padding-top: 3px; vertical-align: middle; text-decoration: none; font-family: "Arial", Serif; font-size: 12px; font-weight: 900; color: #222} </style>   <form action="tabtampil.html" method="get"> <div id="TabTampil" class="TabTampil"> <div style="width: 370px;" class="TTs"> <a>Tab 1 Name</a> <a>Tab 2 Name</a> <a>Tab 3 Name</a></div> <div style="width: 350px; height: 300px;" class="Halamans">   <div class="Halaman"> <div class="Alas"> Tab 1 Insira aqui o código que deseja utilizar </div> </div> <div class="Halaman"> <div class="Alas"> Tab 2 Insira aqui o código que deseja utilizar </div> </div> <div class="Halaman"> <div class="Alas"> Tab 3 Insira aqui o código que deseja utilizar </div> </div> </div> </div></form>   <script style="text/javascript" src="http://meichelina.googlepages.com/newscriptab.js"></script> <script type="text/javascript">tabtampil_inisial('TabTampil');</script>

Em breve, mais scripts para Blogger.

Read more »