Comentários Recentes "Widget" com animação

 »  » » Comentários Recentes "Widget" com animação

"Comments 

"Widget"

 recente , com animação"



Comentários Recentes Widget / Recent Post um script do Blog Tune-Up tem por Mas Taufik ~ DTE.

"Este widget irá exibir os últimos comentários em seu blog é muito fácil. "


Seguir os caminhos abaixo: 
INSTALAÇÃO no Blogspot

Primeiro de tudo ir ao "lay-out da página", clicando no menu "Lay-out":

Ir para o layout da página

Adicionar um elemento de página 
HTML / JavaScript e 
...colocá-lo na forma,
copie todo esse código 

<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://mkr-site.blogspot.com"; </script> <script src="https://ivyth.googlecode.com/svn/js/rc-comments.js" type="text/javascript"></script>

var jmlkomentar para determinar o número de comentários que será mostrado, e jmlkarakter var para determinar o número de caracteres. 

"Em seguida, substitua o código em seu blog home_page com seu próprio endereço." 

"Clique em Salvar
 e ver os resultados:

►clique aqui e Veja a demo◄

"Se você quiser adicionar efeitos de animação ...
... colocá-lo 
após 
o
código anterior.

...copiar o script 
existente abaixo:

▼

<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>









►clique aqui e Veja a demo◄








 



...ficará, o código então, com a animação, 
assim:▼

<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://mkr-site.blogspot.com"; </script> <script src="https://ivyth.googlecode.com/svn/js/rc-comments.js" type="text/javascript"></script>

 <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: DTE ~ JavaScript Comentário Recente / Comentários recentes com CSS 
Roteiro Original: Blog Tune-Up SatankMKR
MKR Satank


fonte e créditos:
mkr-site.
blogspot.com.br