Tutoriais

Disponibilizar jogos em flash na sua página do Blogger é bastante simples. Há casos em que um site oferece gratuitamente o arquivo swf  para baixar e basta fazer o download do jogo e hospedar no Google Sites, como mostra este tutorial. 
Em certos casos, porém, alguns sites de jogos permitem que os mesmos sejam publicados em outras páginas mas não disponibilizam links para download. Neste caso você deve usar o iWisoft Flash SWF, um software gratuito que permite copiar as animações em Flash (.swf) de qualquer página. Depois de instalado, abra o programa e cole a url da página onde se encontra o jogo, escolha a pasta de destino e clique em Download. Feito isso, hospede o arquivo do jogo no Google Sites como mostra o tutorial.

Sites como 123Bee e Mochimedia (é necessário fazer registro neste último) disponibilizam os jogos para download gratuitamente, dispensando o uso do iWisoft.

Depois de hospedar o jogo no Google Sites, abra uma postagem, clique em Editar HTML e cole o seguinte código:


<embed height="550px" name="plugin" src="aqui você colocará o link do jogo hospedado no google sites" type="application/x-shockwave-flash" width="720px"></embed>


No Google Sites, clique com o botão direito do mouse sobre download e copie o link:

O link será semelhante à esse:
https://sites.google.com/site/osmeusjogos73/jogos/temple-escape.swf?attredirects=0&d=1


O que você deve fazer é apagar toda a parte em vermelho, que vem depois de .swf. Feito isso, cole a url dentro do código mostrado acima, ficando assim:


<embed height="550px" name="plugin" src="https://sites.google.com/site/osmeusjogos73/jogos/temple-escape.swf" type="application/x-shockwave-flash" width="720px"></embed>


Height define a altura da tela do jogo e width a largura. Você pode mudar estes valores para que se encaixem na largura do seu post.


______________________________________________________________________________________________


                                             Customizar o Gadgt Slide
Quando vi a primeira vez o gadget de slide do Blogger, fiquei toda animada achando que exibiria alguns dos meus albuns de maneira decente mas o que acabou aparecendo na minha sidebar foi isso:

Isso é um slide. Minúsculo. Decepcionante. Tirei do blog.

Mas como sou teimosa, tornei a colocar e comecei a tentar maneiras de transformar aquilo que o Blogger me apresentava, nestes slides que estão em meu blog de testes.

O primeiro é gigante e foi inserido dentro da div crosscol. O segundo tem a largura de main-wrapper e foi inserido acima desta coluna. O terceiro está na sidebar, muito maior que o padrão do Blogger.

Não é possível fazer muita coisa para customizar o slide, além de redimensioná-lo e colocar uma borda para destacá-lo. Pelo menos até agora, não descobri o que mais é possível fazer. 

Para redimensionar o slide, acrescente este código no CSS (clique em Editar HTML e acrescente o código em qualquer local antes da tag ]]></b:skin> ):

#Slideshow1 .slideshow-container {
width: 980px;
height:480px;
margin: 10px auto 10px;
padding:0 0 0;
border: 10px solid #000;background: #000}

.slideshow-container a img{position:absolute;top:0;left:0;width:100%; height:100%}

Em width você deve determinar a largura do seu slide, em height a altura. Margin como se apresenta aqui, centraliza o widget  e dá uma distância de 10px para cima e para baixo. Em bordervocê determina a largura e cor da borda. Em .slideshow-container a img width e height devem ser 100% ou a imagem não ocupará toda a largura e altura que você determinou para o slide.

Se você pretende acrescentar mais de um slide, repita o código, mudando apenas #Slideshow1 para #Slideshow2.

Mas Ariane, eu não quero um slide enorme em todas as páginas do meu blog, só na home,comofas?

Depois de inserir o slide e fazer as modificações, clique em Expandir Modelo de Widget e encontre este trecho, acrescentando o que está em vermelho:

<b:widget id='Slideshow1' locked='false' title='Apresentação de slides' type='Slideshow'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<div class='slideshow-container' expr:id='data:widget.instanceId +   &quot;_slideshow&quot;'>
<span class='slideshow-status'>Loading...</span>
</div>
</div>
<b:include name='quickedit'/> 
</b:if>
</b:includable>
</b:widget>

Pronto, o slide vai aparecer apenas na primeira página.
_____________________________________________________________________________________________
  Como ocultar o blog quando estamos fazendo modificações

  
Geralmente, quando vamos fazer grandes modificações no blog, recorremos a opção de torná-lo visível apenas para o autor do blog, o que pode deixar os leitores bastante confusos (já me aconteceu mais de uma vez...). Seus leitores podem pensar que o blog 'acabou' ou que precisarão solicitar permissão para voltar a acessá-lo. Para evitar qualquer transtorno e deixar um aviso claro aos seus leitores de que a interrupção é temporária, segue este dica que encontrei no blogRandomness:

Acrescente esta linha depois de <body>:

<span class="item-control blog-admin">


e antes de </body>:

</span>

O que fazemos é incluir todo o conteúdo do blog em uma classe utilizada pelo próprio Blogger para mostrar somente ao autor  os ícones de Editar Postagens e Widgets (o ícone da ferramenta).

Para que possamos então apresentar uma imagem de aviso, acrescente logo após <body> (e antes do primeiro código que passei):

<center><img src="URL_imagen"/></center>

Escolha uma imagem adequada para o aviso, hospede e copiei o link (endereço) fornecido e inclua no código, substituindo o trecho em vermelho.
______________________________________________________________________________________________
Como colocar a data abaixo do titulo do post .


Vá no html do seu template, marque Expandir Modelo de Widget e encontre este trecho (lembre de usar o Ctrl+F para localizar mais rápido):

post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

O que você terá que fazer é deslocar este trecho para outro trecho mais acima. Selecione e recorte este trecho do código e depois encontre esta outra parte:

<div class="post-header-line-1">
<div class="post-body">

e cole logo abaixo o código que você recortou antes. Deve ficar assim:

<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2> </b:if>
<p><data:post.body/></p>

Visualize e se tudo estiver ok, salve. Se não estiver correto, é só clicar em Limpar Edições e tentar novamente.
_____________________________________________________________________________________________
  Como colocar um tradutor em seu blog/site
Para colocar um tradutor no seu blog, como o que eu tenho aqui, copie o código abaixo, vá em Modelo->Inserir Elemento de Página-> e escolha HTML/JavaScript e cole o código, salvando.

<center><img src="http://img176.imageshack.us/img176/6091/84056383at1.png"/></center>

<form id="translateForm" action="http://www.worldlingo.com/S1790.5/translation" target="_blank">

<input value="PT" name="wl_srclang" type="hidden"/>

<select style="font-size: 70%; width: 160px;" name="wl_trglang">



<option value="FR"/>Português - Francês

<option value="DE"/>Português - Alemão

<option value="IT"/>Português - Italiano

<option value="PT"/>Português - Português

<option value="RU"/>Português - Russo

<option value="ES"/>Português - Espanhol

</select>

<input value="http://ENDEREÇO DO SE BLOG.blogspot.com/" name="wl_url" type="hidden"/>

<input style="font-size: 70%; width: 50px;" value="Traduza" type="submit"/>

</form>