A maneira mais simples de incluir um selo em sua página é incluindo a tag do selo e dentro da mesma adicionar o JavaScript necessário para o processo ser realizado:
<w:selo class="BadgeWikiblogs" id="SealCompact" onload="seloWiki">
<script language="JavaScript" src="https://sites.google.com/site/devwikiblogs/scriptbadgeSelo.js" type="text/javascript"></script>
<w:selo>O script deve ser obtido na página do Developers e só pode ser incluído entre as tags personalizadas do selo. Ao mudar o script, o ID da tag do selo também deve ser mudada e depois pode ser adicionada em qualquer ponto na página sem restrição.
Veja abaixo um exemplo da sintaxe da tag padrão do selo:
<w:selo class="BadgeWikiblogs" id="SealCompact" onload="seloWiki"></w:selo>Se desejar, você pode usar essa tag do selo válida em HTML5 (o atributo "onload" deve ser definido como seloWiki-HTML e todos os atributos do selo devem ser mantidos).
<div class="BadgeWikiblogs" id="SealCompact" onload="seloWiki-HTML"></div>| Exemplo | Largura (px) | Altura (px) |
|---|---|---|
| 164 | 42 | |
| 262 | 54 | |
| 138 | 94 |
O plano de fundo do selo compacto da Wikiblogs pode ser mudado para combinar com sua página, para isso basta mudar o atributo "wcolor" para uma das cores prescritas abaixo.
| Cor | Valor | Exemplo |
|---|---|---|
| Preto | wcolor="black" | |
| Azul | wcolor="blue" | |
| Vermelho | wcolor="red" | |
| Roza | wcolor="pink" | |
| Branco (Padrão) | wcolor="white" ou apague o atributo ''wcolor'' |
<w:selo class="BadgeWikiblogs" id="SealCompact" onload="seloWiki-HTML" wcolor="blue"></w:selo>OBS: apague o atributo ''wcolor'' para deixa o selo na sua cor padrão (branco).| Atributo | Valor | Padrão | Descrição |
|---|---|---|---|
| wcolor (Cor) | black Preto blue Azul red Vermelho pink Rosa white Branco |
white | A cor do plano de fundo do selo. O atributo wcolor serve para mudar a cor de fundo do selo, caso ele não combine com sua página. |
| wsize (tamanho) | small Pequeno normal big Grande |
normal | O tamanho do botão a ser processado na hora do carregamento. |
| onload (carregamento) | selo-wiki selo-wikiHTML |
selo-wiki | O atributo define se o selo deve ser carregado com a tag personalizada ou com sintaxe válida em HTML. |
Veja abaixo um exemplo da sintaxe da tag padrão do badge:
<w:badge class="BadgeWikiblogs" id="badgePlus" onload="badgeWiki"></w:badge>
Se desejar, você pode usar essa tag do selo válida em HTML5 (o atributo "onload" deve ser definido como badgeWiki-HTML e todos os atributos do selo devem ser mantidos).
<div class="BadgeWikiblogs" id="badgePlus" onload="badgeWiki-HTML"></div>A dimensção padrão do badge é de 386px de lagura e 232px de altura.
| Atributo | Valor | Padrão | Descrição |
|---|---|---|---|
| wcolor (Cor) | black Preto blue Azul red Vermelho pink Rosa white Branco |
white | A cor do plano de fundo do selo. O atributo wcolor serve para mudar a cor de fundo do selo, caso ele não combine com sua página. |
| wsize (tamanho) | small Pequeno normal big Grande |
normal | O tamanho do botão a ser processado na hora do carregamento. |
| onload (carregamento) | selo-wiki selo-wikiHTML |
selo-wiki | O atributo define se o selo deve ser carregado com a tag personalizada ou com sintaxe válida em HTML. |
A inclusão padrão assíncrona permite que sua página da web continue carregando enquanto seu navegador busca o JavaScript da aplicação. Carregando esses elementos em paralelo, você permite que a solicitação HTTP seja respondida, fazendo com que o badge não aumente o tempo de carregamento de sua página.
<html>
<head>
<title>demo selo Wikiblogs</title>
<link href="https://sites.google.com/site/iagob26/style-dev.css" rel="stylesheet" type="text/css" />
</head>
<body>
<w:badge class="BadgeWikiblogs" id="badgePlus" onload="badgeWiki"></w:badge>
</body>
</html>