Testes Bnk

Testes Bnk


Ás vezes, queremos organizar certos textos e/ou imagens e não sabemos como.
Este, é um método que se pode utilizar e é fácil.
Ora vejamos este exemplo:
Este é o conteúdo numero 1. Carregue no 2 para visualizar.

Agora estamos no conteúdo da 2ª parte. Pode ver o número 3.
E cá estamos na 3ª parte. Assim se organiza melhor o conteúdo num post só.
  1. 1
  2. 2
  3. 3
Simples!
Para usar este código, basta ir em Mensagem nova, Redigir | Html, colar o seguinte código:
<div class="content11" id="page-1">
TEXTO (1)</div>

<br />
<div class="content11" id="page-2">
TEXTO (2).</div>

<div class="content11" id="page-3">
TEXTO (3)</div>

<ol id="toc">
<li><a href="#page-1">1</a></li>
<li><a href="#page-2">2</a></li>
<li><a href="#page-3">3</a></li>
</ol>
<script src="http://stylifyyourblog1.googlecode.com/svn/trunk/pageinpost.js"></script>
<script type="text/javascript">
activatables('page', ['page-1', 'page-2','page-3' ]);
</script>

<script src="https://sites.google.com/site/seututorial/seututorial/pagpost.js"></script>
<script type="text/javascript">
activatables('page', ['page-1', 'page-2','page-3' ]);
</script>
<style>
div.content11 {clear: left;padding: 1em;}
div.content11.inactive {display: none;}
ol#toc {height: 2em;list-style: none;margin: 0;padding: 0;}
ol#toc a {background-color: <b><span style="color: red;">#00EEEE</span></b>;padding: 0px 8px 0px;margin: 1px 4px;text-decoration: none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;}
ol#toc a:hover {background-color: <b><span style="color: red;">#DBECF8</span></b>;padding: 0px 8px 0px;border:1px solid #204e73;}
ol#toc a:hover span {background-position: 100% -120px;}
ol#toc li {float: left;margin: 0 6px 0 0;}
ol#toc li a.active {background-color: <b><span style="color: red;">#48f;</span></b>background-position: 0 -60px;color: #fff;font-weight: bold;}
ol#toc li a.active span {background-position: 100% -60px;}
ol#toc span {background: url(tabs.gif) 100% 0;display: block;line-height: 2em;padding-right: 10px;}
</style>
E está feito. Lembre-se de editar os campos "TEXTO".

Este código deve ser formatado sempre em Html.

Partilhar

O seu incentivo é a nossa motivação.

0 comentários:

Enviar um comentário

 
Topo