Nota importante: É sempre recomendável, sobretudo para aqueles que não estão muito habituados a isso, gravar sempre o seu Esquema do blogger, no seu computador, antes de mexer no código (html) do mesmo. Veja aqui como deve proceder a esse passo elementar.
Passo 1: Instalar o núcleo da biblioteca de Javscript
Este passo permitirá depois utilizar outros widgets sem efectuar este passo.
Edite o html do seu Esquema de Blogger e...
Coloque o código seguinte imediatamente antes da tag </head>
Este passo é uma amabilidade de Hoctro.
Os seguintes são amabilidade de Amanda.
Passo 2: Instalar os Requisitos Yahoo! Tab View
Logo imediatamente a seguir ao código que inseriu no passo anterior, coloque este código:
<link href="'http://yui.yahooapis.com/2.3.0/build/tabview/assets/tabview.css'" rel="'stylesheet'" type="'text/css'/">
<link href="'http://yui.yahooapis.com/2.3.0/build/tabview/assets/border_tabs.css'" rel="'stylesheet'" type="'text/css'/">
<script src="'http://yui.yahooapis.com/2.3.0/build/yahoo-dom-event/yahoo-dom-event.js'" type="'text/javascript'/">
<script src="'http://yui.yahooapis.com/2.3.0/build/element/element-beta-min.js'" type="'text/javascript'/">
<script src="'http://yui.yahooapis.com/2.3.0/build/tabview/tabview-min.js'" type="'text/javascript'/">
<style type="'text/css'">
.yui-content {
padding:1em; /* pad content container */
}
.yui-navset .yui-content {
border:1px solid #ccc;
}
.yui-navset .yui-nav .selected a, .yui-navset .yui-nav a:hover {
background-color:#fff;
}
.yui-navset .yui-nav li a {
background:#e5e5e5 url(http://developer.yahoo.com/yui/examples/tabview/img/round_4px_trans_gray.gif) no-repeat;
}
.yui-navset .yui-nav li a em {
background:transparent url(http://developer.yahoo.com/yui/examples/tabview/img/round_4px_trans_gray.gif) no-repeat top right;
padding:0.5em;
}
/* top oriented */
.yui-navset-top .yui-nav { margin-bottom:-1px; } /* for overlap, based on content border-width */
.yui-navset-top .yui-nav li a {
border-bottom:1px solid #ccc;
}
.yui-navset-top .yui-nav .selected a { border-bottom:0; }
.yui-navset-top .yui-nav .selected a em { padding-bottom:0.6em; } /* adjust height */
</style>
Passo 3: Instalação do Widget
No local que pretender - barra lateral, zona central, etc. - cole o seguinte código:
<div id="demo" class="yui-navset">
<ul class="yui-nav">
<li><a href="#tab1"><em>Tab1</em></a></li>
<li class="selected"><a href="#tab2"><em>Tab2</em></a></li>
<li><a href="#tab3"><em>Tab3</em></a></li>
</ul><br/>
<div class="yui-content">
<div id="tab1"><p>Tab One Content</p></div>
<div id="tab2"><p>Tab Two Content</p></div>
<div id="tab3"><p>Tab Three Content</p></div>
</div>
</div>
<script>
(function() {
var tabView = new YAHOO.widget.TabView('demo');
YAHOO.log("The example has finished loading; as you interact with it, you'll see log messages appearing here.", "info", "example");
})();
Nesta altura do campeonato deverá estar assim:
Passo 4: Adicionar conteúdo.
Agora é só colocar no widget o conteúdo que pretender.
Pode ser um rss feed, uma lista de links, etc., sendo que o rss feed pode dizer respeito ao seu blog (posts mais recentes, comentários mais recentes, etc.) ou o feed de outro blog qualquer.
Vou exemplificar como fiz no meu caso. Se pretenderem listar numa das abas os últimos comentários e tiverem alguma dificuldade, enviem-me um email que eu ajudarei.
Então, onde está
<em>Tab1</em>
substituam Tab1 pelo nome/título que querem usar para a vossa aba nº 1. Eu usei Posts Recentes.
Façam o mesmo para as outras abas.
Reparem que o código referente à aba 2 é diferente do das abas 1 e 3. Isto quer dizer que é a aba 2, neste caso, aquela cujo conteúdo irá aparecer no ecrã do browser logo que a página é carregada. Se quiserem alterar essa definição é só alterar o código em conformidade.
Vamos passa ao conteúdo de cada uma das abas:
Na aba (no meu caso a aba 1) que quiserem mostrar os vossos posts mais recentes, alterem o código de
<div id="tab1"><p>Tab One Content</p></div>
para
colocando o endereço do vosso blog, em vez do meu.
Depois, se quiserem, como eu, colocar numa aba os vossos sites/blogs Favoritos e na outra aba dar destaque a alguns dos vossos posts (eu dei destaque aos posts que permitem enriquecer a experiência de navegação de um blog, através da introdução de alguns widgets, como este do Tab View, o método é o mesmo:
Substituam
<div id="tab3"><p>Tab Three Content</p></div>
por
<div id="tab3"><p> <ul> <li><a href="http://linkone.com">link one</a></li> <li><a href="http://linktwo.com">link two</a></li> <li><a href="http://linkthree.com">link three</a></li> </ul> </p></div>
e colocando os vossos links em vez dos ...linkone..., ...linktwo..., etc.
Podem depois fazer coisa similar para a Tab 2.
Eu utilizei-a a Tab 2 para dar destaque aos meus posts de "Recursos para Blogs", mas vocês podem lá pôr outra coisa, como por exemplo, as vossas labels/etiquetas (pergunte-me como), últimos comentários (pergunte-me como), etc.
Podem ainda pôr mais abas, como é evidente. Tendo seguido a explicação até aqui, penso que já não terão dificuldades nisso.
Caso alguma coisa não funcione ou não percebam como fazer, coloquem um comentário a relatar isso mesmo que eu prometo ajudar.
Boas navegações!
Tags:
Responda a este post
Enviar um comentário