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