quinta-feira, 30 de dezembro de 2010

Mostra e oculta

Aqui vem o texto que vai aparecer e que vem antes do botão...
<div class="pre-spoiler">
<input id="xs" value="Leia Mais" style="margin-left: 50px; padding: 0px; width: 80px; " onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Ocultar'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Leia Mais';}" type="button"> </div>
<div>
<div class="spoiler" style="display: none;">
Aqui você coloca o texto que quer esconder e que só vai aparecer quando clicarem no botão.
</div>
</div>
E aqui a continuidade do texto do seu artigo que aparece abaixo do botão e continua mesmo depois que clicam para ver o trecho escondido.

terça-feira, 28 de dezembro de 2010

Menu com imagens e efeito hover

Procurando uma maneira de criar um menu com imagens individuais (um ícone para cada item da lista) com efeito hover, lembrei de um menu vertical que vi no blog Vagabundia que apresenta este bonito efeito. O que fiz foi estudar o código fonte, entender seu funcionamento e pedir ao JMiur (muito obrigada, de novo!) permissão para publicar este tutorial, que me foi solicitado tantas vezes.

Para que vocês entendem do que se trata, antes de continuar lendo, visitem este blog de testes e passem o cursor do mouse sobre cada item do menu (vertical e horizontal). Quebrei muito a cabeça tentando encontrar uma maneira limpa e eficaz de criar este efeito (e tudo o que conseguia era uma gambiarra feia e confusa) até me deparar com algo tão simples e, por que não dizer, óbvio! A idéia é criar uma imagem só, com o ícone para o estado inicial do link e outro para o estado hover e usar a propriedade background-position para definir quando um e outro deve aparecer.

As medidas a seguir se baseiam no exemplo em meu blog de testes:

1-Crie imagens .gif com fundo transparent de tamanho 64px x 106px e posicione os ícones da maneira que se segue:

2-Faça uma imagem neste modelo para cada item do menu;
3-Hospede as imagens, copie a url de cada um e no CSS do código do template (acima de ]]></b:skin>) coloque este código que corresponde à cada link do menu:

a#m1, a#m1:link, a#m1:visited, a#m1:active {
background: transparent url(url da primeira imagem) no-repeat left top;
display: block;
height: 54px;
width: 64px;
}
a#m1:hover {background-position: left bottom;}

a#m2, a#m2:link, a#m2:visited, a#m2:active {
background: transparent url(url da segunda imagem) no-repeat left top;
display: block;
height: 54px;
width: 64px;
}
a#m2:hover {background-position: left bottom;}

a#m3, a#m3:link, a#m3:visited, a#m3:active {
background: transparent url(url da terceira imagem) no-repeat left top;
display: block;
height: 54px;
width: 64px;
}
a#m3:hover {background-position: left bottom;}

a#m4, a#m4:link, a#m4:visited, a#m4:active {
background: transparent url(url da quarta imagem) no-repeat left top;
display: block;
height: 54px;
width: 64px;
}
a#m4:hover {background-position: left bottom;}

a#m5, a#m5:link, a#m5:visited, a#m5:active {
background: transparent url(url da quinta imagem) no-repeat left top;
display: block;
height: 54px;
width: 64px;
}
a#m5:hover {background-position: left bottom;}

a#m6, a#m6:link, a#m6:visited, a#m6:active {
background: transparent url(url da sexta imagem) no-repeat left top;
display: block;
height: 54px;
width: 64px;
}
a#m6:hover {background-position: left bottom;}

Para tantos forem os itens do menu, acrescente o trecho:

a#m6, a#m6:link, a#m6:visited, a#m6:active {
background: transparent url(link da sexta imagem) no-repeat left top;
display: block;
height: 54px;
width: 64px;
}
a#m6:hover {background-position: left bottom;}

Note que atribuímos uma ID para os links que compõem o menu e que, nas palavras do mestre Maujor: id deve ser única, isto é, um e somente um elemento ou seletor deve estar identificado com determinada id. Por isso, ao acrescentar novos links à sua lista, você deve criar uma nova ID (nome), ou seja, à partir de #m6 deve se seguir #m7 ou qualquer outro nome que seja único e exclusivo.

Para que você entenda o que está fazendo (e não simplesmente copie e cole sem conseguir criar variações ao seu gosto), vejamos:

a#m1, a#m1:link, a#m1:visited, a#m1:active {
background: transparent url(link da primeira imagem) no-repeat left top;

display: block;

height: 54px;

width: 64px;

}
a#m1:hover {background-position: left bottom;}

em vermelho atribuimos um identificador ID para o elemento a (link), no caso #m1;
em background definimos que nos estados a:link, a:visited e a:active a imagem apareça no topo à esquerda. Como definimos uma altura e largura para a área 'clicável' (com height e width) impedimos que o restante da imagem apareça (lembre que a imagem original tem height:106px). Ou seja, o que excede a altura de 54px não aparecerá. Veja na imagem abaixo:

Para o estado hover a posição do background muda para left bottom (em laranja) e agora o que fica escondido é a parte superior da imagem, novamente limitada pela altura estabelecida para a área do link. Veja:

Um truque simples e genial que não sofre incompatibilidade de navegadores e não causa nenhuma dor de cabeça. Enfim, algo que não fui capaz de pensar :)

Agora, para criar um menu horizontal onde os links aparecerão, acrescente também no CSS:

#navigation{height:50px; /*altura do menu*/
width: 600px; /*área total ocupada pelo menu*/
margin:0px auto; /*margin que centraliza o menu na tela*/
background: url(http://i41.tinypic.com/690sux.jpg) no-repeat top left; /*imagem de fundo do menu*/
}

#navigation ul{width: 400px; /*largura da área ocupada pelos ícones*/
margin: 0px auto 0; /*centralizando os ícones*/
padding: 0 0 0;
}

#navigation li{float:left;/*flutuação à esquerda garante que os ícones fiquem na horizontal*/
margin-top:4px; /*margens dos ícones*/
list-style-type:none;
}

Salve as modificações. Agora no HTML do código, e aqui você escolhe onde aparecerá seu menu, acrescente:

<div id='navigation'>
<ul>
<li><a href='Link do Blog/' id='m1' title='Home'> </a></li>

<li><a href='Link 01/' id='m2' target='_blank' title='Download'> </a></li>

<li><a href='Link 02/' id='m3' target='_blank' title='Vídeos'> </a></li>

<li><a href='Link 03/' id='m4' target='_blank' title='MP3'>
</a></li>

<li><a href='Link 04/' id='m5' target='_blank' title='Feed'>
</a></li>

<li><a href='Link 05/' id='m6' rel='nofollow' target='_blank' title='Contato'> </a></li>

</ul>
</div>

No caso do meu exemplo eu acrescentei o código dentro do cabeçalho, assim:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Menu Hover (Cabeçalho)' type='Header'/>
</b:section>

Aqui o código do menu

</div>

Mas você pode colocar acima ou abaixo de header,como queira. Para colocar verticalmente na sidebar, basta copiar o HTML à partir de <ul> até </ul> ,abrir um elemento de página HTML/JavaScript e colar o código.

Recapitulando:

crie uma ID para cada link da lista;
crie uma imagem com o dobro da altura determinada para a área de cada link, contendo as imagens para o estador inicial e hover do link.
acrescente os links em um menu

Espero que gostem e principalmente, que tenham compreendido o procedimento. Sei que muitas pessoas que entendem de CSS e HTML podem achar que me estendo demais nas explicações - pois para eles basta bater os olhos no código para perceber o funcionamento - mas este blog foi criado para ajudar o usuário comum do blogger que deseja apenas dar uma incrementada no visual de sua página, não sendo portanto, profundo conhecedor de CSS e HTML. Minha intenção também não é apenas distribuir códigos que podem facilmente ser copiados e colados. Quero mesmo que entendam o que estão fazendo para que possam criar livremente. E como também não sou profunda conhecedora de nada e me defino sempre apenas como alguém muito xereta :) agradeceria muito qualquer correção que possa ser feita à minha explicação.

Menu marquee

<marquee scrolldelay="150">
<p>
<script>
var linktext=new Array()
linktext[0]="ESCREVA AQUI ALGO SOBRE O SEU LINK 1"
linktext[1]="ESCREVA AQUI ALGO SOBRE O SEU LINK 2"
linktext[2]="ESCREVA AQUI ALGO SOBRE O SEU LINK 3"
linktext[3]="ESCREVA AQUI ALGO SOBRE O SEU LINK 4"
linktext[4]="ESCREVA AQUI ALGO SOBRE O SEU LINK 5"
linktext[5]="ESCREVA AQUI ALGO SOBRE O SEU LINK 6"
var ns6=document.getElementById&&!document.all
var ie=document.all
function show_text(thetext, whichdiv){
if (ie) eval("document.all."+whichdiv).innerHTML=linktext[thetext]
else if (ns6) document.getElementById(whichdiv).innerHTML=linktext[thetext]
}
function reset(whichdiv){
if (ie) eval("document.all."+whichdiv).innerHTML=' '
else if (ns6) document.getElementById(whichdiv).innerHTML=' '
}
</script>
<p>
<img src="AQUI O ENDEREÇO DA IMAGEM"/><a onmouseover="show_text(0,'div2')" onmouseout="reset('div2')" href="ENDEREÇO DO LINK 1">LINK 1</a>
<img src="AQUI O ENDEREÇO DA IMAGEM"/><a onmouseover="show_text(1,'div2')" onmouseout="reset('div2')" href="ENDEREÇO DO LINK 2">LINK 2</a>
<img src="AQUI O ENDEREÇO DA IMAGEM"/><a onmouseover="show_text(2,'div2')" onmouseout="reset('div2')" href="ENDEREÇO DO LINK 3">LINK 3</a>
<img src="AQUI O ENDEREÇO DA IMAGEM"/><a onmouseover="show_text(3,'div2')" onmouseout="reset('div2')" href="ENDEREÇO DO LINK 4">LINK 4</a>
<img src="AQUI O ENDEREÇO DA IMAGEM"/><a onmouseover="show_text(4,'div2')" onmouseout="reset('div2')" href="ENDEREÇO DO LINK 5">LINK 5</a>
<img src="AQUI O ENDEREÇO DA IMAGEM"/><a onmouseover="show_text(5,'div2')" onmouseout="reset('div2')" href="ENDEREÇO DO LINK 6">LINK 6</a>
<br/>
<i><span id="div2"> </span></i>
</p>
</p></marquee>

Expandir imagens ao passar o mouse

Para quem tem blog e utiliza iamagens eis um bom código para economizar espaço e organizar bem os posts.Super fácil e leve, pode ser usado direto nas páginas de postagem do blog, no modo "Editar HTML"

<img class="expa" src="AQUI O ENDEREÇO DA IMAGEM" />
<style>
  img.expa {
   cursor: pointer;
   max-width: 150px;
  }
  img.expa:hover {
   max-width: none;
  }
</style>

Vagabundia

Mas se quer mais praticidade, vá até o HTML de seu blog e depois de ]]></b:skin> cole o código abaixo

<style>

img.expa {

cursor: pointer;

max-width: 150px;

}

img.expa:hover {

max-width: none;

}

</style>

Agora vá até Configurações, agora clique em Formatação. Lá em baixo na página vc verá uma área em branco, cole o código abaixo e salve.

Sempre que precisar basta colar o endereço da imagem desejada, se não, basta apagar.

segunda-feira, 27 de dezembro de 2010

Como retirar a linha "Attribution"

Quem já testou o novo menu de criar templates para o Blogger, chamado de "Designer do Modelo", percebeu que o rodapé dos layouts tem uma mensagem chamada de "Attribution". Trata-se dos créditos dos criadores desses novos modelos/templates. Muita gente tem perguntado como retirar isso. Eu vou mostrar, mas com algumas recomendações sérias.

O Blogger tem aparecido com algumas novidades. Os novos templates do Blogger (Blogspot) vêem agora com um rodapé padrão com o nome e link dos criadores dos modelos originais que podemos customizar e modificar como queremos. Também vem o link do Blogger, claro. Esses são os créditos de quem teve o trabalho de criar e disponibilizar gratuitamente algo.

No painel do Blogger como um Widget

Ou na página de seu blog com os links e créditos

Se você ainda não saber criar seu próprio template no menu "Design" ~> "Designer do modelo", veja aqui como proceder:

Como criar Template para Blogger - Designer do Modelo

É possível retirar esse formato de crédito dado ao criador do modelo, mas não recomendamos! Mesmo assim vou ensinar.

Por um motivo muito simples: Retirar totalmente os créditos é violar o direito de uso concedido pelo criador dado ao seu blog. Se você quer usar um template criado por terceiros, mesmo que você faça modificações, os créditos do original têm que ser mantidos. Isso se chama RESPEITO!

Só siga esse procedimento se você for mudar o rodapé de seu template e tiver outro espaço para exibir os links dos criadores originais.

Comece fazendo um backup de seu blog para evitar problemas e erros, especialmente porque esse procedimento é irreversível sem um backup.

Backup no Blogger – seu Blog seguro

Abra o painel de controle do Blogger e clique no menu "Design" ~> "Editar HTML". NÃO marque o "Expandir modelos de widgets".
Então procure pela seguinte linha:

<b:widget id='Attribution1' locked='true' title='' type='Attribution'/>

Proceda excluindo essa linha e apenas ela. Cuidado para não apagar mais nada. Assim, clique no botão "Salvar modelo".

Será exibida a seguinte mensagem de confirmação:

Confirme clicando no botão azul que diz "Excluir Widgets". Lembrando que esse procedimento é irreversível e não pode ser refeito mesmo recolocando o código apagado.

Feito isso, veja o resultado em seu blog.

Menu drop-down com CSS e Javascript

Segue o código para criar um menu drop-down utilizando CSS e Javascript, o código está rolando pela internet, não é de minha autoria. O menu funcionou no I.E 7 e no Firefox até onde eu testei. Você pode ver o menu funcionando neste link.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Testando o menu drop-down</title>
<style type="text/css">
body { font: normal 62.5% verdana; }

ul.menubar{
  margin: 0px;
  padding: 0px;
  background-color: #FFFFFF; /* IE6 Bug */
  font-size: 100%;
}

ul.menubar .submenu{
  margin: 0px;
  padding: 0px;
  list-style: none;
  background-color: #FFFFFF;
  border: 1px solid #ccc;
  float:left;
}

ul.menubar ul.menu{
  display: none;
  position: absolute;
  margin: 0px;
}

ul.menubar a{
  padding: 5px;
  display:block;
  text-decoration: none;
  color: #777;
  padding: 5px;
}

ul.menu, ul.menu ul{
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #ccc;
  width: 150px; /* Width of Menu Items */
  background-color: #FFFFFF; /* IE6 Bug */
}

ul.menu li{
  position: relative;
  list-style: none;
  border: 0px;
}

ul.menu li a{
  display: block;
  text-decoration: none;
  border: 1px solid #ccc;
  border-bottom: 0px;
  color: #777;
  padding: 5px 10px 5px 5px;
}

ul.menu li sup{
  font-weight:bold;
  font-size:7px;
  color: red;
}

/* Fix IE. Hide from IE Mac \*/
* html ul.menu li { float: left; height: 1%; }
* html ul.menu li a { height: 1%; }
/* End */

ul.menu ul{
  position: absolute;
  display: none;
  left: 149px; /* Set 1px less than menu width */
  top: 0px;
}

ul.menu li.submenu ul { display: none; } /* Hide sub-menus initially */

ul.menu li.submenu { background: transparent url(arrow.gif) right center no-repeat; }

ul.menu li a:hover { color: #E2144A; }

</style>

<script type="text/javascript">
function horizontal() {

   var navItems = document.getElementById("menu_dropdown").getElementsByTagName("li");
  
   for (var i=0; i< navItems.length; i++) {
      if(navItems[i].className == "submenu")
      {
         if(navItems[i].getElementsByTagName('ul')[0] != null)
         {
            navItems[i].onmouseover=function() {this.getElementsByTagName('ul')[0].style.display="block";this.style.backgroundColor = "#f9f9f9";}
            navItems[i].onmouseout=function() {this.getElementsByTagName('ul')[0].style.display="none";this.style.backgroundColor = "#FFFFFF";}
         }
      }
   }

}

</script>

</head>

<body onload="horizontal();">

<ul id="menu_dropdown" class="menubar">
   <li class="submenu"><a href="#">Not&iacute;cias</a></li>
   <li class="submenu"><a href="#">Institucional</a>
      <ul class="menu">
        <li><a href="#">Fotos da Frota</a></li>
        <li><a href="#">História</a></li>
        <li><a href="#">Missão</a></li>
        <li><a href="#">Visão</a></li>
    <li><a href="#">Instalações</a></li>
      </ul>
   </li>
   <li class="submenu"><a href="#">Qualidade</a>
      <ul class="menu">
        <li><a href="#">Resultado dos indicadores</a></li>
        <li><a href="#">Informativos da Qualidade</a></li>
        <li><a href="#">Política de Qualidade</a></li>
        <li><a href="#">Projetos Sociais</a></li>
    <li><a href="#">Resultado da pesquisa de satisfação</a></li>
      </ul>
   </li>
   <li class="submenu"><a href="#">Serviços</a>
      <ul class="menu">
        <li><a href="#">Links Úteis</a></li>
        <li><a href="#">Itinerário</a></li>
        <li><a href="#">Mapa das Rotas<sup>novo</sup></a></li>
      </ul>
   </li>
      <li class="submenu"><a href="#">Contato</a>
      <ul class="menu">
        <li><a href="#">Colabore Conosco</a></li>
        <li><a href="#">Enquetes finalizadas</a></li>
        <li><a href="#">Fale Conosco</a></li>
    <li><a href="#">Trabalhe Conosco</a></li>
      </ul>
   </li>
   <li class="submenu"><a href="#">Localize seu ônibus</a></li>
</ul>
  
</body>
</html>

Menu Horizontal

Atendendo a pedidos....

Vou ensinar hoje como ter uma linkbar no seu blog.
A linkbar é esta barrinha onde colocamos links em destaque no lauyout do blog , também chamada de Menu Horizontal.

Para conseguir este efeito, é necessário utilizar um template que já venha com esta opção visível, ou seja, quando você for baixá-lo, observe se no layout existe um menu destes.

Existem 02 tipos de templates com linkbar:

o que é necessário mexer no código html e
o que já vem com uma opção nos "elementos de página".

No primeiro caso, devemos entrar no layout do Blogger e escolher a opção "editar html".
Feito isto, procurar por esta linha:

<div id='navigation'>

Abaixo encontre:

<li><a href='inserir link aqui' title='Artigos'>Artigos</a></li>
<li><a href='inserir link aqui' title='Fotos'>Fotos</a></li>
<li><a href='inserir link aqui' title='Links'>Links</a></li>
<li><a href='inserir link aqui' title='Forum'>Forum</a></li>

Em "inserir link" coloque o link para o qual você deseja apontar. No título, o nome que você quer dar a este link quando o leitor passar o mouse sobre seu link e depois, o título que aparecerá na sidebar.

Exemplo:

<li><a href='http://anime-jw.blogspot.com/' title='Home'>Home</a></li>

Não é tão difícil... smile_wink

E, no segundo caso, basta ir em "elementos de página" e procurar por "linkbar".

Clique em editar e insira os links.

quinta-feira, 23 de dezembro de 2010

Eminem - Not Afraid

11eyes

11eyes - 1° Temporada
Episodio: 01 : Download | Assistir

11eyes - 1° Temporada
Episodio: 02 : Download | Assistir

11eyes - 1° Temporada
Episodio: 03 : Download | Assistir

11eyes - 1° Temporada
Episodio: 04 : Download | Assistir

11eyes - 1° Temporada
Episodio: 05 : Download | Assistir

11eyes - 1° Temporada
Episodio: 06 : Download | Assistir

11eyes - 1° Temporada
Episodio: 07 : Download | Assistir

11eyes - 1° Temporada
Episodio: 08 : Download | Assistir

11eyes - 1° Temporada
Episodio: 09 : Download | Assistir

11eyes - 1° Temporada
Episodio: 10 : Download | Assistir

11eyes - 1° Temporada
Episodio: 11 : Download | Assistir

11eyes - 1° Temporada
Episodio: 12 : Download | Assistir

11eyes - 1° Temporada
Episodio: 13 : Download | Assistir

Bleach

Título: Bleach

Categoria: Anime
Total de Episódios: Ainda em lançamento
Genero: Shounen
Produtora: Estúdio Pierrot
Ano de Lançamento: 2004

Resumo:

Ichigo Kurosaki é um garoto de 15 anos que tem uma estranha capacidade de ver, tocar e falar com espíritos de pessoas mortas (Plus). Logo que a shinigami Rukia Kuchiki toma conhecimento dos poderes de Ichigo vai atrás dele para investigar, e acaba em uma luta com um Hollow que foi atraído pelo forte poder espiritual de Ichigo, antes de ser derrotada pela criatura, Rukia passa seus poderes a Ichigo, o qual se torna um substituto de shinigami, e após derrotar o Hollow ingressa em uma jornada para proteger os humanos e os espíritos da ameaça dos Hollows.

Episódio Online

Episódio 001 - O dia em que me tornei Shinigami
Episódio 002 - Um trabalho de Shinigami
Episódio 003 - O desejo do irmão mais velho, o desejo da irmã mais nova
Episódio 004 - Papagaio Amaldiçoado
Episódio 005 - Derrote o inimigo invisível!
Episódio 006 - Batalha até a morte! Ichigo vs Ichigo
Episódio 007 - O acolher de um Brinquedo de Pelúcia
Episódio 008 - 17 de Junho, Memórias de Chuva
Episódio 009 - Inimigo Invencível
Episódio 010 - Ataque na viajem ao lugar sagrado
Episódio 011 - O lendário Quincy
Episódio 012 - O Gentil Braço Direito
Episódio 013 - Flor e Hollow
Episódio 014 - Costa a costa, uma luta até a morte
Episódio 015 - O ótimo plano de Kon
Episódio 016 - Encontro: Abarai Renji!
Episódio 017 - Ichigo Morre!
Episódio 018 - Recupere! O poder de Shinigami
Episódio 019 - Ichigo se transforma em um Hollow!
Episódio 020 - Ichimaru Gin a sombra prateada
Episódio 021 - Entre! O mundo do Shinigami
Episódio 022 - O homem que odeia Shinigamis
Episódio 023 - A Sentença de Rukia, antes do 14º dia!
Episódio 024 - Reunam-se! As 13 Divisões
Episódio 025 - Penetrar o centro com uma gigantesca bola de canhão?
Episódio 026 - Formação! A pior companhia
Episódio 027 - Libere o golpe fatal!
Episódio 028 - Orihime está sendo visada
Episódio 029 - Avançar! A rede abrangente dos Shinigamis
Episódio 030 - O confronto de Renji
Episódio 031 - A resolução para matar
Episódio 032 - Estrelas e o devaneo
Episódio 033 - Milagre! O misterioso novo herói
Episódio 034 - Tragédia do amanhecer
Episódio 035 - Assassinato de Aizen! As trevas que se aproximam
Episódio 036 - Zaraki Kenpachi se aproxima!
Episódio 037 - A Razão do Punho
Episódio 038 - Desespero! A Zangetsu destruída
Episódio 039 - O homem da imortalidade
Episódio 040 - A Shinigami que Ganju conheceu
Episódio 041 - Reunião, Ichigo e Rukia
Episódio 042 - Yoruichi, dança!
Episódio 043 - O Shinigami desprezível
Episódio 044 - Ishida, Poder dos Limites!
Episódio 045 - Ultrapasse os limites!
Episódio 046 - Recordes Autênticos! Escola de Shinigami
Episódio 047 - Os vingadore
Episódio 048 - Hitsugaya ruge!
Episódio 049 - O pesadelo de Rukia
Episódio 050 - O despertar do leão
Episódio 051 - Manhã da sentença
Episódio 052 - Renji, juramento de alma!

Trigun

Episódio Online

Episódio 01: Assistir Online
Episódio 02: Assistir Online
Episódio 03:Assistir Online
Episódio 04:Assistir Online
Episódio 05:Assistir Online
Episódio 06:Assistir Online
Episódio 07:Assistir Online
Episódio 08:Assistir Online
Episódio 09:Assistir Online
Episódio 10:Assistir Online
Episódio 11:Assistir Online
Episódio 12:Assistir Online
Episódio 13:Assistir Online
Episódio 14:Assistir Online
Episódio 15:Assistir Online
Episódio 16:Assistir Online
Episódio 17:Assistir Online
Episódio 18:Assistir Online
Episódio 19:Assistir Online
Episódio 20:Assistir Online
Episódio 21:Assistir Online
Episódio 22: Em Breve
Episódio 23: Em Breve
Episódio 24: Em Breve
Episódio 25: Em Breve
Episódio 26: Em Breve

Retirar número dos Marcadores

Depois de criar marcadores para as suas postagens, como forma de classificar seus artigos e facilitar a busca de conteúdo em seu blog, pode ser interessante não mostrar quantos textos existem para cada marcador específico (ou por serem poucos ou por serem muitos ou, simplesmente, por questão de estética). Aparecem números ao lado de cada marcador e é simples retirar isso, caso você queira.

Penso que só seja interessante retirar a marcação numérica se for por questão de estética – vc precisa saber como fica melhor para o seu blog, então pode fazer essa mudança e verificar o resultado.
Não sabe o que são Marcadores e como criar? Leia:

Criar Marcadores de postagem do Blog

ATUALIZAÇÃO:
O Blogger reformulou os Marcadores e as funções disponíveis. Agora é possível tirar os números dos marcadores e até escolher outros formatos de lista, como Nuvens, com ou sem números. Veja mais sobre as novidades:

Gadget Marcadores do Blogger - Novidades

Segue abaixo o modo manual de retirar os números dos Marcadores padrão do Blogger.
Não tem segredo, mas como tudo que precisa de mudanças no HTML (o código fonte do seu blog), tem que ter atenção e se fazer backup do modelo completo antes de executar a alteração.
Seguro de que não perderá nada, vá ao “Layout” e clique na opção “Editar HTML”. Para implantar a mudança será necessário marcar o “Expandir os modelos de widgets” acima da caixa de códigos.

Agora, ache as seguintes linhas no seu código:

<li>
<b:if cond='data:blog.url == data:label.url'>
<a class='activelabel' expr:href='data:label.url'><data:label.name/> (<data:label.count/>)</a>
<b:else/>
<a expr:href='data:label.url'><data:label.name/> (<data:label.count/>)</a>
</b:if>
</li>

Basta apagar as partes marcadas em vermelho e salvar. Abra o seu blog e verifique o resultado.

hellsing 05- Irmandade

hellsing 04- Inocente como um Humano

hellsing 03- O Dançarino da Espada

hellsing 02- Clube M

Hellsing 01- O Morto-Vivo

Hellsing

Sinopse

Vampiros, seres que fazem nossa imaginação voar a lugares imagináveis. Quem nunca se imaginou como sendo um ser da noite? Ou, então, um implacável caçador no maior estilo Blade ou Angel? Enfim, o tema vampiros inspira livros, filmes, games e até novelas. Então, por que não um animê com o tema vampiros?
Para quem gosta do gênero, realmente não tem o que reclamar, pois os animês baseados em vampiros existem aos montes. Para citar alguns casos que fizeram sucesso, temos Vampire Hunter D, Blood – The Last Vampire, Vampire Princess Miyu e aquele que foi o primeiro deles: Don Drácula, lançado na década de 80. Outras produções menores também tiveram seu espaço entre os fãs. Podemos citar, por exemplo, Vampyan Kid e Night Walker. Mas vamos falar de uma série que se destaca entre os outros. Agora é a vez de Hellsing!
Quando começou!
A revista Young King Ours, da Editora Shonen Gahosha, segue o mesmo estilo da Shonen Jump, por exemplo, mas é bem diferente de sua “amiga” mais conhecida e lucrativa. Ela é direcionada a jovens com mais de 17 anos e traz em suas paginas histórias mais fortes e, talvez, menos comerciais. Foi em suas páginas que surgiu o sucesso Excel Saga, por exemplo. Voltando a Hellsing, a série estreou nas páginas da revista em 1998, desenhada por Kouta Hirano. O mangá traz cenas fortes de violência e certas cenas de sensualidade. Perfeito para conquistar um público bem fiel de fãs.
O animê!
Já é meio repetitivo, mas mangás de sucesso sempre ganham sua versão em mangá (está certo que às vezes isso pode demorar e muito, mas tende a ocorrer) e com Hellsing não foi diferente. Em 2001, estreava na TV Fuji a versão animada que narra as aventuras de Alucard. Foram apenas 13 episódios produzidos graças à parceria de duas empresas para lá de conhecidas e respeitadas pela qualidade: Pionner (que, entre diversos animês, é responsável por maravilhas, como Tenchi Muyo e Serial Experiments Lain) e o estúdio Gonzo (Final Fantasy Unlimited, Blue Submarine 6, Vandread, entre outros).
O resultado dessa união não poderia ser diferente. A qualidade de Hellsing graficamente é impecável. Uma curiosidade: a série foi exibida somente nas madrugadas da emissora. Isso é normal no Japão, onde uma série, com alto teor de sensualidade e violência, tem um horário nada convencional para ser exibida. Apesar disso, a média do animê sempre foi muito boa.
O ambiente...
Hellsing é um animê sobre vampiros, certo? Mas outras criaturas da noite fazem suas pontas na série também. A maior parte da história passa-se ao cair da noite, uma noite avermelhada de sangue, que aumenta ainda mais o clima sombrio do animê. A trilha sonora não deixa por menos e também contribui para a ambientação do animê. O tema de encerramento “Shine” merece todo o destaque.
Em Hellsing, podemos resumir a história desta forma, para colocá-lo por dentro dos acontecimentos: Arucard é um vampiro a trabalho de uma instituição secreta que tenta defender a humanidade de seres malignos, diferente de Arquivo X, por exemplo, onde os detetives investigam acontecimentos estranhos com desconfiança ou, de certa forma, com medo de descobrir a verdade. Essa instituição sabe que há coisas estranhas entre nós e faz questão de acabar com elas.
Uma coisa muito presente em todo o desenrolar da história é a questão da religiosidade, principalmente a católica, e só isso já garante bons momentos de reflexão e discussões calorosas entre os amigos, pois cada um entende aquilo que quer entender. Meio confuso, né? Talvez, mas o certo seria dizer: bem curioso!
Finalmente, a história!
Logo de cara, percebemos que Arucard trabalha para alguém. O vampiro presta serviços a Instituição Hellsing (nome dado a Ordem Britânica dos Cavaleiros da Igreja Anglicana), uma organização altamente secreta, cuja função é agir nas sombras, defendendo a humanidade de diversas criaturas malignas (entre elas os vampiros e os ghouls). A Ordem é chefiada por Sir Integral Wingates Hellsing e, misteriosamente, ela exerce um grande poder sobre Arucard. Esse poder é realmente um mistério. Mas o fato é que ele obedece às ordens dadas pela mulher.
Explicando: ghouls é o nome dado aos mortos-vivos que foram mordidos por vampiros apenas como alimento. Eles não podem ser considerados realmente vampiros.
O primeiro episódio mostra logo de cara Arucard entrando em ação. Numa pequena cidade, há informações que um padre vem transformando pessoas em zumbis. Esse é um caso para Arucard, que odeia esses vampiros que gostam de se mostrar. Na região, já havia uma equipe das forças especiais Hellsing, mas eles não são nada diante do poder do padre vampiro e seu exército de zumbis.
Na tentativa de exterminar o padre, Arucard acaba ferindo mortalmente o soldado Celes Victoria (atenção: Victoria é uma garota). Para que ela não morresse, a única solução encontrada pelo vampiro foi transformar a bela Victoria em uma criatura das noites. A partir daquele instante, Victoria seria uma espécie de “parceira” para o solitário Arucard. E as aventuras só estão para começar.
Muitos desafios!
Arucard e Victoria terão grandes desafios durante sua aventura. Inicialmente, a trama gira em torno da investigação de um caso onde diversos vampiros vêm surgindo na cidade e atacando humanos. Mais tarde, descobre-se que esses vampiros não são criaturas da noite originais, e sim artificiais. São vampiros criados a partir de um chip e a instituição vai querer descobrir quem são os responsáveis por isso.
Temos também uma trama paralela vivida por Victoria, um conflito interno, já que a garota não aceita tão facilmente sua nova condição (lembre-se: ela não é mais humana). Para viver, ela precisa de sangue e é difícil se acostumar com isso. Além do mais, sua nova situação lhe deu poderes também. Ela vai precisar se adaptar a essa nova condição.
Não pensem que Arucard e a instituição Hellsing estão sozinhos nessa batalha. Existem muitas coisas que serão desvendadas no decorrer das aventuras, inclusive uma outra organização secreta e um inimigo mortal de Arucard.

Episódio 01 - O Morto-Vivo
Assistir - Download

Episódio 02 - Clube M
Assistir - Download

Episódio 03 - O Dançarino das Espadas

Assistir - Download

Episódio 04 - Inocente como um Humano

Assistir - Download

Episódio 05 - Irmandade

Assistir - Download

Episódio 06 - Zona da Morte

Assistir - Download

Episódio 07 - Duelo

Assistir - Download

Episódio 08 - A Casa da Morte

Assistir - Download

Episódio 09 - A Vertigem da Rosa Vermelha
Assistir - Download

Episódio 10 - Mestre dos Monstros
Assistir - Download

Episódio 11 - Força Transcendental
Assistir - Download

Episódio 12 - Destruição Total
Assistir - Download

Episódio 13 - Fogo do Inferno - FiNaL
Assistir - Download

Visitantes do BlogBlogs

Quer exibir os visitantes recentes do BlogBlogs que acessaram seu blog da mesma forma que o UsuárioCompulsivo, lá no rodapé da página, sem frescuras, ícones ou cores que nada tem a ver com o seu template? Fácil, é só seguir mais esta dica compulsiva.

A primeira coisa a fazer é descobrir e anotar o ID do seu blog no BlogBlogs. Acesse a página Widget Novos Leitores, selecione o blog onde deseja incluir o Widget e role a página até o final. Localize seu BlogID dentro do código gerado, conforme o exemplo abaixo:

Em seguida é só preencher os campos apropriados no instalador abaixo conforme indicado e não tem erro!

Retirar o link : Assinar: Postagens (Atom)

Para retirar este link padrão do Blogger que fica sob as postagens, procure no código do seu template este trecho:

.feed-links {
clear: both;
line-height: 2.5em;
text-indent:-9999em;
}

e acrescente o que está em negrito.
Obs: Se você não encontrar este trecho no template que usa, basta copiar tudo e colar antes de ]]></b:skin> no código do template

terça-feira, 21 de dezembro de 2010

Colocar ou alterar as bordas

Existem vários modos de mudar o visual do blog somente utilizando o estilo CSS um deles é colocar ou alterar as bordas. Esse código é bem simples e pode se usado em qualquer lugar, serve inclusive para fazer botões quando combinados com uma cor de fundo, além disso podemos usar para colocar bordas nas postagens, menus e qualquer outra coisa no blog. O código das bordas deve ser moficado pela página editar HTML, agora vamos entender melhor esse código:

border: 1px solid #0000FF

1px é a largura

solid é o estilo

#0000FF é a cor

Por exemplo para colocar bordas nos link procure por:

a:link, a:visited {
color:#0000ff;
text-decoration:none;
}

e coloque border: 1px solid #0000FF, dentro das chaves, deixando o código assim:

a:link, a:visited {
border: 1px solid #0000FF;
color:#0000ff;
text-decoration:none;
}

Logo abaixo você pode ver outros exemplos de bordas e alterar como quiser a largura, estilo, cor e se precisa aqui tem o código das cores.

border: 2px dotted #000000

border: 2px dashed #000000

border: 1px solid #0000FF

border: 4px double #FF0000

border: 3px groove #6666FF

border: 4px ridge #FFFFCC

border: 3px inset #FFFF99

border: 2px outset #6699FF

Colocar bordas nas imagens do blog

É possível colocar uma borda em todas as imagens das postagens de uma só vez e ainda dar um efeito diferente nesta borda quando o mouse está sobre a imagem. Isso é uma alteração bem fácil e modifica um pouco o template, podendo deixar o blog mais bonito. Veja como ficou nosso banner com bordas(ao lado).

Para colocar uma borda em todas as imagens das postagens entre na pagina editar html e coloque no junto dos outros estilos css esse código:

.post img{border: 1px solid #000000;padding: 1px;}
.post a:hover img{border: 1px solid #6699FF;}

Se tiver duvidas sobre onde colocar procure por body{.... e coloque na linha acima dele, assim fica fácil achar para futuras alterações, o código acima é só uma das possibilidades de bordas você pode ver aqui informações mais detalhadas sobre como modificar o estilo das bordas.

A parte padding:1px faz que a borda não fique colada na imagem, você pode retirar essa parte do código ou aumentar a distancia para deixar as imagens do seu blog com uma melhor aparência. Queremos lembrar as bordas somente mudam de aparência se a imagem tiver um link nelas, senão mesmo com o mouse sobre elas continuaram com a mesma borda.

Código das Cores

Quando vamos mudar a cor de alguma coisa no blog ou site precisamos saber qual o código HTML da cor que vamos usar, porque o template é feito em CSS usando códigos para definir as cores de tudo menos as imagens é claro. Então aqui está uma lista com o código de muitas cores para você usar como quiser no seu blog.

Apesar do blogspot ter uma página de cores com algumas opções elas são limitadas então procure a cor que gostar na lista abaixo e copie o código para usar no blog, esses códigos serem para mudar a cor de tudo: fundo do blog, cores das letras, fundo das postagens ou sidebar, cores das bordas, enfim qualquer cor que veja num blog é definido através desses códigos. Então é só usar a lista de cores e deixar seu blog mais bonito e com cores diferentes. Essa lista foi adaptada apartir de uma página do site MXStudio.

Snow -#FFFAFA

GhostWhite#F8F8FF

WhiteSmoke #F5F5F5

Gainsboro #DCDCDC

FloralWhite #FFFAF0

OldLace #FDF5E6

Linen #FAF0E6

AntiqueWhite #FAEBD7

PapayaWhip #FFEFD5

BlanchedAlmond #FFEBCD

Bisque #FFE4C4

PeachPuff #FFDAB9

NavajoWhite #FFDEAD

Moccasin #FFE4B5

Cornsilk #FFF8DC

Ivory #FFFFF0

LemonChiffon #FFFACD

Seashell #FFF5EE

Honeydew #F0FFF0

MintCream #F5FFFA

Azure #F0FFFF

AliceBlue #F0F8FF

lavender #E6E6FA

LavenderBlush #FFF0F5

MistyRose #FFE4E1

White #FFFFFF

Black #000000

DarkSlateGray #2F4F4F

DimGrey #696969

SlateGrey #708090

LightSlateGray #778899

Grey #BEBEBE

LightGray #D3D3D3

MidnightBlue #191970

NavyBlue #000080

CornflowerBlue #6495ED

DarkSlateBlue #483D8B

SlateBlue #6A5ACD

MediumSlateBlue #7B68EE

LightSlateBlue #8470FF

MediumBlue #0000CD

RoyalBlue #4169E1

Blue #0000FF

DodgerBlue #1E90FF

DeepSkyBlue #00BFFF

SkyBlue #87CEEB

LightSkyBlue #87CEFA

SteelBlue #4682B4

LightSteelBlue #B0C4DE

LightBlue #ADD8E6

PowderBlue #B0E0E6

PaleTurquoise #AFEEEE

DarkTurquoise #00CED1

MediumTurquoise #48D1CC

Turquoise #40E0D0

Cyan #00FFFF

LightCyan #E0FFFF

CadetBlue #5F9EA0

MediumAquamarine #66CDAA

Aquamarine #7FFFD4

DarkGreen #006400

DarkOliveGreen #556B2F

DarkSeaGreen #8FBC8F

SeaGreen #2E8B57

MediumSeaGreen #3CB371

LightSeaGreen #20B2AA

PaleGreen #98FB98

SpringGreen #00FF7F

LawnGreen #7CFC00

Green #00FF00

Chartreuse #7FFF00

MedSpringGreen #00FA9A

GreenYellow #ADFF2F

LimeGreen #32CD32

YellowGreen #9ACD32

ForestGreen #228B22

OliveDrab #6B8E23

DarkKhaki #BDB76B

PaleGoldenrod #EEE8AA

LtGoldenrodYello #FAFAD2

LightYellow #FFFFE0

Yellow #FFFF00

Gold #FFD700

LightGoldenrod #EEDD82

goldenrod #DAA520

DarkGoldenrod #B8860B

RosyBrown #BC8F8F

IndianRed #CD5C5C

SaddleBrown #8B4513

Sienna #A0522D

Peru #CD853F

Burlywood #DEB887

Beige #F5F5DC

Wheat #F5DEB3

SandyBrown #F4A460

Tan #D2B48C

Chocolate #D2691E

Firebrick #B22222

Brown #A52A2A

DarkSalmon #E9967A

Salmon #FA8072

LightSalmon #FFA07A

Orange #FFA500

DarkOrange #FF8C00

Coral #FF7F50

LightCoral #F08080

Tomato #FF6347

OrangeRed #FF4500

Red #FF0000

HotPink #FF69B4

DeepPink #FF1493

Pink #FFC0CB

LightPink #FFB6C1

PaleVioletRed #DB7093

Maroon #B03060

MediumVioletRed #C71585

VioletRed #D02090

Magenta #FF00FF

Violet #EE82EE

Plum #DDA0DD

Orchid #DA70D6

MediumOrchid #BA55D3

DarkOrchid #9932CC

DarkViolet #9400D3

BlueViolet #8A2BE2

Purple #A020F0

MediumPurple #9370DB

Thistle #D8BFD8

Snow1 #FFFAFA

Snow2 #EEE9E9

Snow3 #CDC9C9

Snow4 #8B8989

Seashell1 #FFF5EE

Seashell2 #EEE5DE

Seashell3 #CDC5BF

Seashell4 #8B8682

AntiqueWhite1 #FFEFDB

AntiqueWhite2 #EEDFCC

AntiqueWhite3 #CDC0B0

AntiqueWhite4 #8B8378

Bisque1 #FFE4C4

Bisque2 #EED5B7

Bisque3 #CDB79E

Bisque4 #8B7D6B

PeachPuff1 #FFDAB9

PeachPuff2 #EECBAD

PeachPuff3 #CDAF95

PeachPuff4 #8B7765

NavajoWhite1 #FFDEAD

NavajoWhite2 #EECFA1

NavajoWhite3 #CDB38B

NavajoWhite4 #8B795E

LemonChiffon1 #FFFACD

LemonChiffon2 #EEE9BF

LemonChiffon3 #CDC9A5

LemonChiffon4 #8B8970

Cornsilk1 #FFF8DC

Cornsilk2 #EEE8CD

Cornsilk3 #CDC8B1

Cornsilk4 #8B8878

Ivory1 #FFFFF0

Ivory2 #EEEEE0

Ivory3 #CDCDC1

Ivory4 #8B8B83

Honeydew1 #F0FFF0

Honeydew2 #E0EEE0

Honeydew3 #C1CDC1

Honeydew4 #838B83

LavenderBlush1 #FFF0F5

LavenderBlush2 #EEE0E5

LavenderBlush3 #CDC1C5

LavenderBlush4 #8B8386

SlateGray4 #6C7B8B

LightSteelBlue1 #CAE1FF

LightSteelBlue2 #BCD2EE

LightSteelBlue3 #A2B5CD

LightSteelBlue4 #6E7B8B

LightBlue1 #BFEFFF

LightBlue2 #B2DFEE

LightBlue3 #9AC0CD

LightBlue4 #68838B

LightCyan1 #E0FFFF

LightCyan2 #D1EEEE

LightCyan3 #B4CDCD

LightCyan4 #7A8B8B

PaleTurquoise1 #BBFFFF

PaleTurquoise2 #AEEEEE

PaleTurquoise3 #96CDCD

PaleTurquoise4 #668B8B

CadetBlue1 #98F5FF

CadetBlue2 #8EE5EE

CadetBlue3 #7AC5CD

CadetBlue4 #53868B

Turquoise1 #00F5FF

Turquoise2 #00E5EE

Turquoise3 #00C5CD

Turquoise4 #00868B

Cyan1 #00FFFF

Cyan2 #00EEEE

Cyan3 #00CDCD

Cyan4 #008B8B

DarkSlateGray1 #97FFFF

DarkSlateGray2 #8DEEEE

DarkSlateGray3 #79CDCD

DarkSlateGray4 #528B8B

Aquamarine1 #7FFFD4

Aquamarine2 #76EEC6

Aquamarine3 #66CDAA

Aquamarine4 #458B74

DarkSeaGreen1 #C1FFC1

DarkSeaGreen2 #B4EEB4

DarkSeaGreen3 #9BCD9B

DarkSeaGreen4 #698B69

SeaGreen1 #54FF9F

SeaGreen2 #4EEE94

MistyRose1 #FFE4E1

MistyRose2 #EED5D2

MistyRose3 #CDB7B5

MistyRose4 #8B7D7B

Azure1 #F0FFFF

Azure2 #E0EEEE

Azure3 #C1CDCD

Azure4 #838B8B

SlateBlue1 #836FFF

SlateBlue2 #7A67EE

SlateBlue3 #6959CD

SlateBlue4 #473C8B

RoyalBlue1 #4876FF

RoyalBlue2 #436EEE

RoyalBlue3 #3A5FCD

RoyalBlue4 #27408B

Blue1 #0000FF

Blue2 #0000EE

Blue3 #0000CD

Blue4 #00008B

DodgerBlue1 #1E90FF

DodgerBlue2 #1C86EE

DodgerBlue3 #1874CD

DodgerBlue4 #104E8B

SteelBlue1 #63B8FF

SteelBlue2 #5CACEE

SteelBlue3 #4F94CD

SteelBlue4 #36648B

DeepSkyBlue1 #00BFFF

DeepSkyBlue2 #00B2EE

DeepSkyBlue3 #009ACD

DeepSkyBlue4 #00688B

SkyBlue1 #87CEFF

SkyBlue2 #7EC0EE

SkyBlue3 #6CA6CD

SkyBlue4 #4A708B

LightSkyBlue1 #B0E2FF

LightSkyBlue2 #A4D3EE

LightSkyBlue3 #8DB6CD

LightSkyBlue4 #607B8B

SlateGray1 #C6E2FF

SlateGray2 #B9D3EE

SlateGray3 #9FB6CD

Firebrick4 #8B1A1A

Brown1 #FF4040

Brown2 #EE3B3B

Brown3 #CD3333

Brown4 #8B2323

Salmon1 #FF8C69

Salmon2 #EE8262

Salmon3 #CD7054

Salmon4 #8B4C39

LightSalmon1 #FFA07A

LightSalmon2 #EE9572

LightSalmon3 #CD8162

LightSalmon4 #8B5742

Orange1 #FFA500

Orange2 #EE9A00

Orange3 #CD8500

Orange4 #8B5A00

DarkOrange1 #FF7F00

DarkOrange2 #EE7600

DarkOrange3 #CD6600

DarkOrange4 #8B4500

Coral1 #FF7256

Coral2 #EE6A50

Coral3 #CD5B45

Coral4 #8B3E2F

Tomato1 #FF6347

Tomato2 #EE5C42

Tomato3 #CD4F39

Tomato4 #8B3626

OrangeRed1 #FF4500

OrangeRed2 #EE4000

OrangeRed3 #CD3700

OrangeRed4 #8B2500

Red1 #FF0000

Red2 #EE0000

Red3 #CD0000

Red4 #8B0000

DeepPink1 #FF1493

DeepPink2 #EE1289

DeepPink3 #CD1076

DeepPink4 #8B0A50

HotPink1 #FF6EB4

HotPink2 #EE6AA7

Gold2 #EEC900

HotPink3 #CD6090

HotPink4 #8B3A62

Pink1 #FFB5C5

Pink2 #EEA9B8

Pink3 #CD919E

Pink4 #8B636C

LightPink1 #FFAEB9

LightPink2 #EEA2AD

LightPink3 #CD8C95

LightPink4 #8B5F65

PaleVioletRed1 #FF82AB

PaleVioletRed2 #EE799F

PaleVioletRed3 #CD6889

PaleVioletRed4 #8B475D

Maroon1 #FF34B3

Maroon2 #EE30A7

Maroon3 #CD2990

Maroon4 #8B1C62

VioletRed1 #FF3E96

VioletRed2 #EE3A8C

VioletRed3 #CD3278

VioletRed4 #8B2252

Magenta1 #FF00FF

Magenta2 #EE00EE

Magenta3 #CD00CD

Magenta4 #8B008B

Orchid1 #FF83FA

Orchid2 #EE7AE9

Orchid3 #CD69C9

Orchid4 #8B4789

Plum1 #FFBBFF

Plum2 #EEAEEE

Plum3 #CD96CD

Plum4 #8B668B

MediumOrchid1 #E066FF

MediumOrchid2 #D15FEE

MediumOrchid3 #B452CD

MediumOrchid4 #7A378B

DarkOrchid1 #BF3EFF

DarkOrchid2 #B23AEE

DarkOrchid3 #9A32CD

DarkOrchid4 #68228B

Purple1 #9B30FF

Purple2 #912CEE

SeaGreen3 #43CD80

SeaGreen4 #2E8B57

PaleGreen1 #9AFF9A

PaleGreen2 #90EE90

PaleGreen3 #7CCD7C

PaleGreen4 #548B54

SpringGreen1 #00FF7F

SpringGreen2 #00EE76

SpringGreen3 #00CD66

SpringGreen4 #008B45

Green1 #00FF00

Green2 #00EE00

Green3 #00CD00

Green4 #008B00

Chartreuse1 #7FFF00

Chartreuse2 #76EE00

Chartreuse3 #66CD00

Chartreuse4 #458B00

OliveDrab1 #C0FF3E

OliveDrab2 #B3EE3A

OliveDrab3 #9ACD32

OliveDrab4 #698B22

DarkOliveGreen1 #CAFF70

DarkOliveGreen2 #BCEE68

DarkOliveGreen3 #A2CD5A

DarkOliveGreen4 #6E8B3D

Khaki1 #FFF68F

Khaki2 #EEE685

Khaki3 #CDC673

Khaki4 #8B864E

LightGoldenrod1 #FFEC8B

LightGoldenrod2 #EEDC82

LightGoldenrod3 #CDBE70

LightGoldenrod4 #8B814C

LightYellow1 #FFFFE0

LightYellow2 #EEEED1

LightYellow3 #CDCDB4

LightYellow4 #8B8B7A

Yellow1 #FFFF00

Yellow2 #EEEE00

Yellow3 #CDCD00

Yellow4 #8B8B00

Gold1 #FFD700

Gold3 #CDAD00

Gold4 #8B7500

Goldenrod1 #FFC125

Goldenrod2 #EEB422

Goldenrod3 #CD9B1D

Goldenrod4 #8B6914

DarkGoldenrod1 #FFB90F

DarkGoldenrod2 #EEAD0E

DarkGoldenrod3 #CD950C

DarkGoldenrod4 #8B658B

RosyBrown1 #FFC1C1

RosyBrown2 #EEB4B4

RosyBrown3 #CD9B9B

RosyBrown4 #8B6969

IndianRed1 #FF6A6A

IndianRed2 #EE6363

IndianRed3 #CD5555

IndianRed4 #8B3A3A

Sienna1 #FF8247

Sienna2 #EE7942

Sienna3 #CD6839

Sienna4 #8B4726

Burlywood1 #FFD39B

Burlywood2 #EEC591

Burlywood3 #CDAA7D

Burlywood4 #8B7355

Wheat1 #FFE7BA

Wheat2 #EED8AE

Wheat3 #CDBA96

Wheat4 #8B7E66

Tan1 #FFA54F

Purple3 #7D26CD

Purple4 #551A8B

MediumPurple1 #AB82FF

MediumPurple2 #9F79EE

MediumPurple3 #8968CD

MediumPurple4 #5D478B

Thistle1 #FFE1FF

Thistle2 #EED2EE

Thistle3 #CDB5CD

Thistle4 #8B7B8B

grey11 #1C1C1C

grey21 #363636

grey31 #4F4F4F

grey41 #696969

grey51 #828282

grey61 #9C9C9C

grey71 #B5B5B5

gray81 #CFCFCF

gray91 #E8E8E8

DarkGrey #A9A9A9

DarkBlue #00008B

DarkCyan #008B8B

DarkMagenta #8B008B

DarkRed #8B0000

LightGreen #90EE90

Chocolate3 #CD661D

Chocolate4 #8B4513

Firebrick1 #FF3030

Firebrick2 #EE2C2C

Firebrick3 #CD2626

Gold4 #8B7500

Goldenrod1 #FFC125

Goldenrod2 #EEB422

Goldenrod3 #CD9B1D

Goldenrod4 #8B6914

DarkGoldenrod1 #FFB90F

DarkGoldenrod2 #EEAD0E

DarkGoldenrod3 #CD950C

DarkGoldenrod4 #8B658B

RosyBrown1 #FFC1C1

RosyBrown2 #EEB4B4

RosyBrown3 #CD9B9B

RosyBrown4 #8B6969

IndianRed1 #FF6A6A

IndianRed2 #EE6363

IndianRed3 #CD5555

IndianRed4 #8B3A3A

Sienna1 #FF8247

Sienna2 #EE7942

Sienna3 #CD6839

Sienna4 #8B4726

Burlywood1 #FFD39B

Burlywood2 #EEC591

Burlywood3 #CDAA7D

Burlywood4 #8B7355

Tan2 #EE9A49

Tan3 #CD853F

Tan4 #8B5A2B

Chocolate1 #FF7F24

Chocolate2 #EE7621