Ai galera estou aqui hoje para ensinar como por um slide das postagens que voces quiserem por de destaques.
resolvi fazer esse tutorial porque hoje uma pessoa me perguntou como por esse slide igual ao do meu blog .
É simples so é meio trabalhoso mais se vcs seguirem direitinho irão conseguir.
Então vamos la, primeiramente vá na aba layout-editar HTML e faça um backup do seu blog porque se ouver erro da para corrigir
resolvi fazer esse tutorial porque hoje uma pessoa me perguntou como por esse slide igual ao do meu blog .
É simples so é meio trabalhoso mais se vcs seguirem direitinho irão conseguir.
Então vamos la, primeiramente vá na aba layout-editar HTML e faça um backup do seu blog porque se ouver erro da para corrigir
Seu blog tem que ter alguma area na sidebar com uma dimensão de 425 de largura no caso deve estar assim no seu blog width:425px; ficando com uma area para adicionar um novo gadget assim :
- Voce pode adicionar aonde voce quiser contanto que tenha uma largura igual ou maior a 425
- Voce precisara dois arquivos para que o slide funcione um em .js e outro em .css.
- download arquivo em java
- faça o download do arquivo em .js e hospede em algum site de sua preferencia, ja o arquivo em .css ele voce não precisa baixar.
- Depois de feito o download do arquivo .js localize o ]]></b:skin> em seu template e cole esse codigo logo abaixo de ]]></b:skin>
<link href='http://www.zinhowebdownload.net/vi.css' rel='stylesheet' type='text/css'/>
<script src='o endereço que voce hospedou seu arquivo .js' type='text/javascript'/>
<script src='o endereço que voce hospedou seu arquivo .js' type='text/javascript'/>
- Ou voce pode usar o nosso arquivo .js que ja esta hospedado ai o codigo ficaria assim
<link href='http://www.zinhowebdownload.net/vi.css' rel='stylesheet' type='text/css'/>
<script src='http://sites.google.com/site/playmusic2009/Home/tv.js' type='text/javascript'/>
<script src='http://sites.google.com/site/playmusic2009/Home/tv.js' type='text/javascript'/>
- depois que colocou o codigo abaixo de ]]></b:skin> clike em salvar o modelo.
- Agora vá na aba elementos da pagina e adicione um HTML/JavaScript
- e cole esse codigo:
<div id="tv">
<div id="tvshow">
<a href="http://mundoinvasaohacker.blogspot.com/2009/11/fullpostdisplayinline-o-sexto-filme.html"><img border="0" src="http://i34.tinypic.com/13z4yo0.jpg"/>Jogos Mortais 6</a><br/><span>Novo simulador de corridas da Codemasters, com gráficos incrivelmente realistas em disputas cheias de adrenalina e ação.</span>
</div>
<div id="nav">
<a href="LINK-DA-POSTAGEM"><img id="tvn1" border="0" style="width: 46px; height: 30px;" onmouseover="tvch(1,1)" src="ENDEREÇO-DA-IMAGEM-PEQUENA" onmouseout="tvch(1,0)" class="opac"/></a>
<a href="LINK-DA-POSTAGEM"><img id="tvn2" border="0" style="width: 46px; height: 30px;" onmouseover="tvch(2,1)" src="ENDEREÇO-DA-IMAGEM-PEQUENA" onmouseout="tvch(2,0)" class="transp"/></a>
<a href="LINK-DA-POSTAGEM"><img id="tvn3" border="0" style="width: 46px; height: 30px;" onmouseover="tvch(3,1)" src="ENDEREÇO-DA-IMAGEM-PEQUENA" onmouseout="tvch(3,0)" class="transp"/></a>
<a href="LINK-DA-POSTAGEM"><img id="tvn4" border="0" style="width: 46px; height: 30px;" onmouseover="tvch(4,1)" src="ENDEREÇO-DA-IMAGEM-PEQUENA" onmouseout="tvch(4,0)" class="transp"/></a>
<a href="LINK-DA-POSTAGEM"><img id="tvn5" border="0" style="width: 46px; height: 30px;" onmouseover="tvch(5,1)" src="ENDEREÇO-DA-IMAGEM-PEQUENA" onmouseout="tvch(5,0)" class="transp"/></a>
</div>
<ul id="hid">
<li id="tv1">
<a href="LINK-DA-POSTAGEM"><img border="0" style="width: 354px; height: 177px;" src="ENDEREÇO-DA-IMAGEM-GRANDE" title="TITULO"/>TITULO</a><br/><span>DESCRIÇAO-RESUMIDA </span>
</li>
<li id="tv2">
<a href="LINK-DA-POSTAGEM"><img border="0" style="width: 354px; height: 177px;" src="ENDEREÇO-DA-IMAGEM-GRANDE" title="TITULO"/>TITULO</a><br/><span>DESCRIÇAO-RESUMIDA</span>
</li>
<li id="tv3"><a href="LINK-DA-POSTAGEM"><img border="0" style="width: 354px; height: 177px;" src="ENDEREÇO-DA-IMAGEM-GRANDE" title="TITULO"/>TITULO</a><br/><span>DESCRIÇAO-RESUMIDA</span>
</li>
<li id="tv4"><a href="LINK-DA-POSTAGEM"><img border="0" style="width: 354px; height: 177px;" src="ENDEREÇO-DA-IMAGEM-GRANDE" title="TITULO"/>TITULO</a><br/><span>DESCRIÇAO-RESUMIDA</span>
</li>
<li id="tv5">
<a href="LINK-DA-POSTAGEM"><img border="0" style="width: 354px; height: 177px;" src="ENDEREÇO-DA-IMAGEM-GRANDE" title="TITULO"/>TITULO</a><br/><span>DESCRIÇAO-RESUMIDA</span>
</li>
</ul>
<script type="text/javascript">channel(1);</script>
</div>
<div id="tvshow">
<a href="http://mundoinvasaohacker.blogspot.com/2009/11/fullpostdisplayinline-o-sexto-filme.html"><img border="0" src="http://i34.tinypic.com/13z4yo0.jpg"/>Jogos Mortais 6</a><br/><span>Novo simulador de corridas da Codemasters, com gráficos incrivelmente realistas em disputas cheias de adrenalina e ação.</span>
</div>
<div id="nav">
<a href="LINK-DA-POSTAGEM"><img id="tvn1" border="0" style="width: 46px; height: 30px;" onmouseover="tvch(1,1)" src="ENDEREÇO-DA-IMAGEM-PEQUENA" onmouseout="tvch(1,0)" class="opac"/></a>
<a href="LINK-DA-POSTAGEM"><img id="tvn2" border="0" style="width: 46px; height: 30px;" onmouseover="tvch(2,1)" src="ENDEREÇO-DA-IMAGEM-PEQUENA" onmouseout="tvch(2,0)" class="transp"/></a>
<a href="LINK-DA-POSTAGEM"><img id="tvn3" border="0" style="width: 46px; height: 30px;" onmouseover="tvch(3,1)" src="ENDEREÇO-DA-IMAGEM-PEQUENA" onmouseout="tvch(3,0)" class="transp"/></a>
<a href="LINK-DA-POSTAGEM"><img id="tvn4" border="0" style="width: 46px; height: 30px;" onmouseover="tvch(4,1)" src="ENDEREÇO-DA-IMAGEM-PEQUENA" onmouseout="tvch(4,0)" class="transp"/></a>
<a href="LINK-DA-POSTAGEM"><img id="tvn5" border="0" style="width: 46px; height: 30px;" onmouseover="tvch(5,1)" src="ENDEREÇO-DA-IMAGEM-PEQUENA" onmouseout="tvch(5,0)" class="transp"/></a>
</div>
<ul id="hid">
<li id="tv1">
<a href="LINK-DA-POSTAGEM"><img border="0" style="width: 354px; height: 177px;" src="ENDEREÇO-DA-IMAGEM-GRANDE" title="TITULO"/>TITULO</a><br/><span>DESCRIÇAO-RESUMIDA </span>
</li>
<li id="tv2">
<a href="LINK-DA-POSTAGEM"><img border="0" style="width: 354px; height: 177px;" src="ENDEREÇO-DA-IMAGEM-GRANDE" title="TITULO"/>TITULO</a><br/><span>DESCRIÇAO-RESUMIDA</span>
</li>
<li id="tv3"><a href="LINK-DA-POSTAGEM"><img border="0" style="width: 354px; height: 177px;" src="ENDEREÇO-DA-IMAGEM-GRANDE" title="TITULO"/>TITULO</a><br/><span>DESCRIÇAO-RESUMIDA</span>
</li>
<li id="tv4"><a href="LINK-DA-POSTAGEM"><img border="0" style="width: 354px; height: 177px;" src="ENDEREÇO-DA-IMAGEM-GRANDE" title="TITULO"/>TITULO</a><br/><span>DESCRIÇAO-RESUMIDA</span>
</li>
<li id="tv5">
<a href="LINK-DA-POSTAGEM"><img border="0" style="width: 354px; height: 177px;" src="ENDEREÇO-DA-IMAGEM-GRANDE" title="TITULO"/>TITULO</a><br/><span>DESCRIÇAO-RESUMIDA</span>
</li>
</ul>
<script type="text/javascript">channel(1);</script>
</div>
- AONDE ESTA ESCRITO LINK-DA-POSTAGEM é para voces colocarem o link para sua postagem.
- Aonde esta escrito ENDEREÇO-DA-IMAGEM-PEQUENA é para voces colocarem o link de uma foto que ficara como miniatura.
- Aonde esta escrito ENDEREÇO-DA-IMAGEM-GRANDE é para voces colocarem o link da imagem que ficara em destaque.
- Aonde esta escrito TITULO é para voces colocarem o titulo do slide.
- Aonde esta escrito DESCRIÇAO-RESUMIDA é para voces colocarem uma descrição resumida para o slide
Depois de editado salve seu gadget, se voce fez tudo certinho ele ficara igual ao meu.
Duvidas deixem um comentario
Um comentário:
nossa vc gosta de escrever heim !!!!
Postar um comentário
Leia as regras
Todos os comentários são lidos e moderados previamente.
São publicados aqueles que respeitam as regras abaixo:
- Seu comentário precisa ter relação com o assunto do post;
- Não inclua links desnecessários no conteúdo do seu comentário;
- Ofensas pessoais, ameaças e xingamentos não são permitidos;