#a dica ee - a dica é ...►INICIO◄: bloggeradicaee

Pesquisar

Mostrando postagens com marcador blogger. Mostrar todas as postagens
Mostrando postagens com marcador blogger. Mostrar todas as postagens

Saiba Como:..."Como dividir o cabeçalho do Blogger"

. Saiba Como:..."Como dividir o cabeçalho do Blogger" 



Mensagem do formulário de comentário:
"comentários de anônimos, não serão publicados, e aqui... 
...não é local para desentendimentos e discórdias! 
Seja bastante educado! Frequenta qual escola, ou frequentou?
 ...ou a educação vem de berço?

botão voltar ao topo do blog, com "efeito-scroll" (deslizante)


 
 Botão "voltar  ao topo  do blog", com "efeito-scroll" (deslizante)


Tutorial:

Primeiro:

Logado no seu painel blogger;
Vá até o html dele.
E, procure por  ]]></b:skin>


Uma vez, encontrando-o,

acima de ]]></b:skin>
cole o código:



/* to top */
    #toTop {
    width:50px;  /* Largura do botão * /
    border:1px solid #000; /* Cor e tipo da borda */
    text-align:center; /* Alinhamento do texto */
    padding:5px; /* Distancia entre texto e borda */
    position:fixed; /* Posição que faz com que ele corra por toda a página*/
    bottom:5px; 
    right:5px;
    cursor:pointer;
    color:#ff0000; /* Cor da fonte do botão */
    text-decoration:none;
    font-weight:700;  /* Define o negrito da fonte */
    -moz-border-radius:5px;  /* Definições para o ângulo do botão */
    -khtml-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    }



Visualize!
Salve!


Agora,
acima de </body>

cole o código:


<a href='#' id='toTop'>Topo</a> 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> 
<script type='text/javascript'>    
/*-----------------------     
* jQuery Plugin: Scroll to Top     
* by Craig Wilson, Ph.Creative (http://www.ph-creative.com)     
*      
* Copyright (c) 2009 Ph.Creative Ltd.     
* Description: Adds an unobtrusive &quot;Scroll to Top&quot; link to your page with smooth scrolling.     
* For usage instructions and version updates to go http://blog.ph-creative.com/post/jquery-plugin-scroll-to-top.aspx     
*      
* Version: 1.0, 12/03/2009     
-----------------------*/ 
$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr(&quot;href&quot;);if($(window).scrollTop()!=&quot;0&quot;){$(this).fadeIn(&quot;slow&quot;)}var   scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()==&quot;0&quot;){$(scrollDiv).fadeOut(&quot;slow&quot;)}else{$(scrollDiv).fadeIn(&quot;slow&quot;)}});$(this).click(function(){$(&quot;html,  body&quot;).animate({scrollTop:0},&quot;slow&quot;)})}}); 
  $(function() {    
                $(&quot;#toTop&quot;).scrollToTop();     
            });     
        </script>


Visualize!
Estando tudo certo,
Salve!


 Nota:

Caso prefira uma imagem,ao invez de escrito "topo"

troque
o código


<a href='#' id='toTop'>Topo</a> 

por este código a seguir:


<a href='#' id='toTop'><img src='Aqui você insere o ENDEREÇO DE SUA IMAGEM aonde a hospedou'>
 </img></a>

Caso você prefira, uma dica mais simples:


cole, em gadget, do lado de "html" (<>),
de seu "lay-out", do template blogger,
fazendo as alterações necessárias,
o código a seguir:
 

<div style="position:fixed; bottom:0px; right:0px;"><a href="#">
<img src="LINK DA IMAGEM" border="0" /></a></div>                 
 
 
 
 
 
 
 

Mensagem do formulário de comentário:
"comentários de anônimos, não serão publicados, e aqui... 
...não é local para desentendimentos e discórdias! 
Seja bastante educado! Frequenta qual escola, ou frequentou?
 ...ou a educação vem de berço?

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

Multi-Color Blogger Popular Posts


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.

Multi-Color Blogger Posts mais populares


. 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

Postagem em destaque

Como usar a mesma conta do WhatsApp em dois celulares

Como usar a mesma conta do WhatsApp em dois celulares

Topo