"Adicionar V2"... "Estilo Popular Posts"..." Widget" " Com Multi Color"... "Para Blogger"

Add V2 Style Popular Posts Widget With Multi Color For Blogger

This is about Popular post widget. Actually
earlier i posted about How To Add Multi-Color 
Popular Posts Widget For Blogger. So this is
also same, But, this design is different, Its
look Like round corners. You can add this effect
with easily,You can try it.

1. Log in to blogger account & Go to Design >> Edit HTML

2. Find this code  by using Ctrl+F  ]]></b:skin>

3.Paste below code Before ]]></b:skin> code

#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}
#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;  color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}

4. Now Click  Save Template.
    You are done...

fonte: bloggertrix

traduzido:

"Adicionar V2 

Estilo Popular Posts Widget 

Com Multi Color Para Blogger"

Este é widget post sobre Popular. Na verdade, 
mais cedo eu postei sobre como adicionar Multi-Color 
Mensagens Popular Widget para Blogger. Portanto, este é 
também mesmo, Mas, este projeto é diferente, seu 
olhar como cantos arredondados. Você pode adicionar este efeito 
com facilidade, você pode experimentá-lo.

. 1 Efetue login na conta blogger & Go para projetar >> Editar HTML 

2. Encontre este código  usando Ctrl + F  ]]> </ b: skin> 

3. Cole o código abaixo antes de ]]> </ b: skin> código:

# PopularPosts1 ul li a: hover {color: # fff; text-decoration: none}
# PopularPosts1 ul li a {-webkit-text-size-adjust: auto-webkit-text-stroke-width: 0px; color: # 333333; display: block; font-family: Georgia, 'Times New Roman', Times , serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 0px 0px 40px; min-height: 30px; órfãos: 2; padding: 0px; text-align:-webkit-auto, text-decoration: nenhum importantes; text-indent: 0px; text-transform: none; white-space: normal; viúvas: 2; palavra -spacing: 0px;}
# PopularPosts1 ul li
# PopularPosts1 ul li: first-child: em seguida,
# PopularPosts1 ul li: first-child + li: depois,
# PopularPosts1 ul li: first-child + li + li: depois,
# PopularPosts1 ul li: first-child + li + li + li: depois,
# PopularPosts1 ul li: first-child + + li li li + + li: depois,
# PopularPosts1 ul li: first-child + + li li li + + + li li: depois,
# PopularPosts1 ul li: first-child li + + + li li li + + + li li: depois,
# PopularPosts1 ul li: first-child + + li li li + + + li li li + + li: depois,
# PopularPosts1 ul li: first-child + + li li li + + + li li li + + + li li: depois,
# PopularPosts1 ul li: first-child li + + + li li li + + + li li li + + + li li: after {position: absolute; top: 10px; direita: 5px; border-radius: 50%; margem: 2px solid # ccc; background: # 353535;-webkit-box-shadow: 0px 0px 5px # 000;-moz-box-shadow: 0px 0px 5px # 000; width: 30px; height: 30px; line-height: 1em; text-align: center; font-size: 28px; color: # fff}
# PopularPosts1 ul li: first-child + + li li li + + + li li li + + li {background: # DF01D7; width: 90%}
# PopularPosts1 ul li: first-child + + li li li + + + li li li + + li: after {content: "8"}
# PopularPosts1 ul li: first-child + + li li li + + + li li li + + + li li {background: # B041FF; width: 90%}
# PopularPosts1 ul li: first-child + + li li li + + + li li li + + + li li: after {content: "9"}
# PopularPosts1 ul li: first-child li + + + li li li + + + li li li + + + li li {background: # F52887; width: 90%}
# PopularPosts1 ul li: first-child li + + + li li li + + + li li li + + + li li: after {content: "10"}
# PopularPosts1 ul li: first-child + + li li li + + + li li {background: # 7ee3c7; width: 90%}
# PopularPosts1 ul li: first-child + + li li li + + + li li: after {content: "6"}
# PopularPosts1 ul li: first-child li + + + li li li + + + li li {background: # f6993d; width: 90%}
# PopularPosts1 ul li: first-child li + + + li li li + + + li li: after {content: "7"}
# PopularPosts1 ul li: first-child + + li li li + + li {background: # 33c9f7; width: 90%}
# PopularPosts1 ul li: first-child + + li li li + + li: after {content: "5"}
# PopularPosts1 ul li: first-child li + + + li li {background: # c7f25f; width: 90%}
# PopularPosts1 ul li: first-child + li + li + li: after {content: "4"}
# PopularPosts1 ul li: first-child + + li li {background: # ffde4c; width: 90%}
# PopularPosts1 ul li: first-child + li + li: after {content: "3"}
# PopularPosts1 ul li: first-child + li {background: # ff764c; width: 90%}
# PopularPosts1 ul li: first-child + li: after {content: "2"}
# PopularPosts1 ul li: first-child {background: # ff4c54; width: 90%}
# PopularPosts1 ul li: first-child: after {content: "1"}
# PopularPosts1 ul {margin: 0; padding: 0px 0; tipo list-style: none}
# PopularPosts1 ul li {position: relative; margin: 6px 0; border-radius: 25px 0px 25px 0px; border: 2px solid # f7f7f7;-webkit-box-shadow: 3px 3px 3px # 000;-moz-box-shadow: 3px 3px 3px # 000; padding: 10px}

4. Agora Clique em  Salvar modelo.
    Está feito ...

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