Tutorial: Menu de Abas e Códigos

A pedido da Sophy-chii, vim trazer este tutorial:

Vamos lá? Aviso: Eu realizo os pedidos quer sejam na ask ou no blog. Mas podiam usar a ask para variar? Eu não recebo quase nada lá  x( e gostam do Pics? Irei pôr lá todas as ilustrações para post daqui do blog^^

Menu de Abas

1 - Num gadget HTML/JavaScript, colar:

<script type="text/javascript">
document.write('<style type="text/css">.tabber{display:none;}< \/style>');
</style></script>
<script type="text/javascript" src="http://static.tumblr.com/dlelfro/DZqmha795/javascriptkw.js"></script>
<link rel="stylesheet" href="http://static.tumblr.com/fmf4w4k/qnsmqro46/estilo.css" type="text/css" media="screen" />
<br />
<div class="tabber">
<div class="tabbertab" title="Aba 1">Coisas da aba 1</div>
<div class="tabbertab" title="Aba 2">Coisas da aba 2</div>
<div class="tabbertab" title="Aba 3">Coisas da aba 3</div>
<div class="tabbertab" title="Aba 4">Coisas da aba 4</div>
<div class="tabbertab" title="Aba 5">Coisas da aba 5</div>
</div><br />

Créditos: Chá Com Anjos 

Menu Status 1

1 - Modelo >> Editar HTML >> Procurar por ]]></b:skin> >> Acima de ]]></b:skin> colar: não consegui pôr em blockquote

.heart {
display : block;
 font-size: 10px;
font-family: Tahoma;
letter-spacing : 0;
border-bottom : 1px solid #eee;
background-repeat : no-repeat;
text-indent : 5px;
vertical-align : middle;
text-decoration : none;
 line-height : 15px;
margin-bottom : 1px;
padding-left : 3px;
 -webkit-transition: all 0.9s ease-out; -moz-transition: all 0.9s ease-out;
border-left: solid #ff7db6;/*Cor do fundo da borda */
background: #d8e2ff; /*Cor do fundo*/
 color: #666 !important;
}
.heart:hover {
display : block;
text-decoration: none;
 vertical-align: middle;
line-height: 15px;
background: #ffe1f8;/*Cor do fundo hover*/
 border-left: solid #d8e2ff;/*Cor do fundo da borda hover*/

 padding-left: 15px;}

2 - Num gadget HTML/JavaScript colar:

<div class="heart">texto</div>

Aviso: Recomendo porem Nome Sigla Desde Dona Meta
Créditos: Bunny Crazy e My Animes World 

Menu Status 2

1 - Num gadget HTML/JavaScript colar:

<style>
/*Gagdet Status por www.cherry-liah.blogspot.com*/
.stats {
border-bottom: 1px dotted #000;width: 180px;
}
</style>
<div class="stats"><img src="http://i45.tinypic.com/2cnz79i.jpg"/><script style="text/javascript">
function numberOfPosts(json) {
document.write('Posts: <i>' + json.feed.openSearch$totalResults.$t + '</i><br>');
}</script>
<script src="URL_SEU_BLOG/feeds/posts/default?alt=json-in-script&callback=numberOfPosts"></script></div>
<div class="stats"><img src="http://i45.tinypic.com/17y71f.jpg"/><script style="text/javascript">function numberOfComments(json) {
document.write('Comentários: <i>' + json.feed.openSearch$totalResults.$t + '</i><br>');
}</script>
<script src="URL_SEU_BLOG/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script></div>
<div class="stats"><img src="http://i46.tinypic.com/okwuaq.jpg"/><script language="JavaScript" type="text/javascript" src="http://www.usuariosonline.org/ver.php?domain=URL_SEU_BLOG" charset="ISO-8859-1"></script> usuários online</a>
</div>

O que está assim são os icons que aparecem antes do texto. Podes encontrar vários aqui. Aviso: Têm de procurar em 16x16px, é o único tamanho que funciona. Eu já alterei para o tamanho que devem usar.
Créditos: Cherry Bomb