Widget Comentários recentes com animação

Olá leitor do blog Mundo Informal! Hoje vou compartilhar com vocês um widget de Comentários Recentes. É um script do Blog Tune-Up que foi modificado por Mas Taufik. Este widget vai exibir os comentários mais recentes em seu blog é muito fácil de instalar. Basta seguir os métodos a seguir:

Instalação no Blogger

1° passo: Acesse o painel do Blogger , escolha o blog que você deseja instalar, e selecione a opção "Layout".

2°passo: Agora adicione um novo elemento de página HTML/JavaScript , e em seguida, copie o código seguinte:

<style type="text/css">#komentar {font:normal 11px Tahoma,Verdana,Arial,Sans-Serif;background-color:#DADADA4;margin:0px 0px;padding:10px 10px;color:#000;border:4px solid #A8A8A8;-webkit-box-shadow:inset 0px 0px 2px #000;-moz-box-shadow:inset 0px 0px 2px #000; box-shadow:inset 0px 0px 2px #000;} #komentar ul {margin: 0;padding: 0;border-top: 1px solid #7E7E7E;border-bottom: 1px solid #FAFAFA;} #komentar ul li {border-top: 1px solid #FAFAFA;border-bottom: 1px solid #7E7E7E;padding: 3px 0px;list-style: none;} #komentar ul li b a, #komentar ul li b a:link, #komentar ul li b a:visited, #komentar ul li b {color:#006B00;text-shadow:0 1px 1px rgba(175, 175, 175, 0.49);} #komentar ul li b:before {content:url(http://3.bp.blogspot.com/-abTiDALn6h0/TpJYHn1AmoI/AAAAAAAAA8I/hRAhFSBZhlY/s1600/feed-icon-green.png);margin:0px 4px 0px 0px;display:inline-block;*display:inline;vertical-align:middle;} </style><script type="text/javascript">var jmlkomentar = 10, jmlkarakter = 150, home_page = "http://www.mundoinformal.com"; </script><script src="https://ivyth.googlecode.com/svn/js/rc-comments.js" type="text/javascript"></script>

Substitua o valor após var jmlkomentar para determinar o número de comentários que  devem ser mostrados, e jmlkarakter var para determinar o número de caracteres. Em seguida, substitua o código http://www.mundoinformal.com com o próprio endereço do blog.

Clique em Salvar e veja os resultados:

Demonstração

Se você quiser adicionar efeitos de animação nesse código, basta copiar o script abaixo e colocá-lo abaixo do código anterior.

<script type="text/javascript">var $ul = $('#komentar'), roll = function() { $ul.find('li').first().slideDown('slow', function() { $(this).appendTo($(this).parent()).fadeIn(); }); }, anim = setInterval(roll, 3000); // Pause on hover... $ul.hover(function() { clearInterval(anim); }, function() { setInterval(roll, 3000); }); </script>

Fonte: Mkr-site

Espero que tenham gostado!

Share This :