Tecnologia do Blogger.

quinta-feira, 15 de março de 2012

Artigos em destaque em forma de slide Blogger/Blogspot

Filled under:






Aprenda a destacar seus artigos de forma simples, usando imagens que tem relação com as postagens, ainda é possível adicionar uma breve descrição da postagem, aqui noNotícia e blog  eu utilizo para realçar as postagens mais interessantes. Este hack é o Smooth Gallery um script de simples aplicação mais muito util veja abaixo como criar seu Gadget de destaque de postagens:



1.Faça login no Blogger


2.Vá para Layout->Editar HTML
Agora Utilizando as tecla Ctrl e F procure pelo código abaixo:
</head>
E abaixo deste código adicione o código abaixo:
<script src='http://www.yourjavascript.com/12300300114/mootools.v1.11.js' type='text/javascript'/>
<script src='http://www.yourjavascript.com/10162001424/jd.gallery.js' type='text/javascript'/> <link href='http://api.ning.com:80/files/SN3eeozgUFWu*rJrzfJnsEuXtQuTxjUiS6nF2kD5NjG*p341SM0ecKKlIYZHbbNpw-19mQEl257b2cGsvHx8uVz-IyRDaVdN/jd.gallery.css' media='screen' rel='stylesheet' type='text/css'/>

3.Agora procure pelo código abaixo:
]]></b:skin>
Antes dele adicione o trecho abaixo personalizando de acordo com a nota:
#myGallery{
width200px !important;height100px !important;
overflow: hidden;
}

 Nota: Width é a largura personalize o número de acordo com largura desejada, Height é a altura personalize a de acordo com a altura desejada.


4.Salve as alterações


5.Vá para Layout->Elementos da página->Adicionar um Gadget->HTML/JavaScript


Agora insira como conteúdo o código abaixo personalizando:
<script type="text/javascript">
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: true,
showArrows: false,
showCarousel: false
});
}
window.addEvent('domready', startGallery);
</script>
<div id="myGallery">
<div class="imageElement">
<a class="open" href="http://www.noticiaeblog.com/2009/10/hoje-um-dos-problemas-do-blogger-e-nao.html"/>
<img alt="Otimizando os títulos das postagens" src="http://i33.tinypic.com/25ppf84.png" class="full"/>
<h3>Otimizando os títulos das postagens</h3>
<p>Veja como ter seu blog bem posicionado... </p>
</a></div>
<div class="imageElement">
<a class="open" href="http://www.noticiaeblog.com/2009/12/exibindo-p.html"/>
<img src="http://imgur.com/iA61u.png" class="full"/>
<h3>Posts Randômicos</h3>
<p>Aprenda a  colocar seus posts em random...</p>
</a></div>
<div class="imageElement">
<a class="open" href="http://www.noticiaeblog.com/2010/01/calcular-pagerank-verifique-seu.html"/>
<img src="http://i.imgur.com/Fi0Po.jpg" class="full"/>
<h3>Calcular PageRank - verifique seu PageRank</h3>
<p>Verifique seu PageRank...</p>
</a></div>
</div>

Nota: Substitua os itens em vermelho pelas urls
6.Salve


Pronto você destacou seu artigos!

0 comentários:

Postar um comentário

Digite seu comentário e depois clique em publicar e prontinho!