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.

Posted in: Intermediário,Sidebars,Widgets