Como utilizar o Visual PGN em seu blog?

Para começar, copie e cole o código seguinte no "template" de seu blog:

<!-- CHESSTEMPO.COM PGN VIEWER CODE BELOW -->
<!-- Support libraries from Yahoo's YUI project -->

/* A linha abaixo acessa em Chess Tempo um arquivo contendo a tradução para o Português tanto do Visual PGN como do Aplicativo (Widget) de "Três Exercícios de Tática". /*
<script language='javascript' src='http://chesstempo.com/locale/pt_BR/LC_MESSAGES/ct.json'/>

/* A linha abaixo acessa em Chess Tempo o arquivo em javascript contendo o código básico do Visual PGN /*
<script src='http://chesstempo.com/js/pgnyui.js' type='text/javascript'> </script>

/* A linha seguinte acessa em Chess Tempo um arquivo com as configurações de estilo CSS que são default do Visual PGN/*
<script src='http://chesstempo.com/js/pgnviewer.js' type='text/javascript'> </script>

/* As linhas de código abaixo contém as configurações de estilo CSS específicas de seu blog/*
<style type='text/css'>
.ct-board{overflow:hidden; text-align:center;}
.ct-board-container{padding:1px;}
.ct-board-move-mainline{color:blue; font-weight:bold; padding-left:5px;}
.ct-board-move-variation{color:purple; font-weight:bold; cursor:pointer;}
.ct-board-move-comment{color:green; font-weight:bold;}
.ct-board-move-current{color:red; font-weight:italic; cursor:pointer;}
.ct-black-square{background-color:#7085B6;}
.ct-white-square{background-color:#DFDFDF; display:block; float:left;}
.ct-nav-buttons{padding-bottom:7px;padding-top:7px;}
.ct-back,
.ct-forward,
.ct-start,
.ct-end,
.ct-play,
.ct-stop{vertical-align:middle;}
.ct-mainline-commentary{padding-left:5px;}
/* As duas linhas que se seguem são as configurações de estilo CSS do board flipper ou "girador de tabuleiro". */
.ct-board-border{border:2px solid #363A3D; background-color: #808080}
.ct-board-container img{padding: 0px; background-color: transparent; border-color: transparent}
</style>