Vídeo com efeito apagar luz

DEMO

Para quem usa vídeos com frequencia em seu blog, um bom efeito é este de "apagar luzes". Ao clicar, o vídeo fica em destaque, deixando o resto do blog em segundo plano e todo escuro, conforme puderam constatar na demonstração. Siga as dicas e instale este hack em seu blog.


Vá até o "Modelo de seu blog", clique em "Editar HTML"

  Hack para o template do Blogger, implementado em  abril de 2013.

Procure por </head>

Acima dele cole este próximo código.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$("#oscuridad").css("height", $(document).height()).hide();
$(".lightSwitcher").click(function(){
$("#oscuridad").toggle();
if ($("#oscuridad").is(":hidden"))
$(this).html("Apagar a Luz").removeClass("turnedOff");
else
$(this).html("Acender as Luzes").addClass("turnedOff");
});
});
//]]>
</script>

Agora procure por </body>

Acima dele cole este próximo código

<div id='oscuridad'/>

Salve.


Agora vamos dar estilo. Vá até o layot de seu blog.

Ao abrir essa janela, vá em Avançado  -------> Adicionar CSS 

Copie o código abaixo e cole no local indicado.

/* Apagar las luces
----------------------------------------------- */
#videoLuces {
position:relative;
z-index:102;
}
#apagador {
max-width:640px;
text-align:left;
position:relative;
height:25px;
display:block;
margin: 25px 0 0 60px;
}
.lightSwitcher {
position:absolute;
z-index:101;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYCDPSv1LTTiH4eRFxn2T0jnve6sTJksI25B0ssIIvhZjZvWFLs-PbOYTvMLEXn892Sc6sGqegdUnXWTEXr3czgGAFvPY30NGWsgJoQgQItqBK7xTJO7gcQq7kzqfjB3n5_IkjV6oU31A/s16/luces-on.png);
background-repeat:no-repeat;
background-position:left;
padding: 0 0 0 20px;
outline:none;
text-decoration:none;
}
.lightSwitcher:hover {text-decoration:underline;}
.turnedOff {
color:#ffff00 !important;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXcPTCrrxjDGm9I4hEpEG5PTNoxn83L2tCihzm8wFFCb1fYishpa6d6BVc9cLXCZYvRC6wBtfPEYwrBMhS3uNBVVHB3VDhc-ZTkmaU23Svh54J0gjUyorWxE5_0JVwCbwjb6Z7aZsisFM/s16/luces-off.png);
}
#oscuridad {
background:#000;
opacity:0.9; /* Opacidade da Tela */
filter:alpha(opacity=90); /* Opacidade da tela */
position:absolute;
left:0;
top:0;
width:100%;
z-index:100;
}

Depois, clique em "Aplicar ao blog", no canto direito de seu monitor, na parte superior para salvar.

Salve. Agora clique em Layout...

Clique em Adicionar um Gadget

Ao abrir, clique em  HTML/Javascript

Cole então o próximo código colando o código do vídeo no local indicado.

<center>
<div id="apagador"><a class="lightSwitcher" href="javascript:void(0);">Apagar as luzes</a></div>
<div id="videoLuces">
COLE AQUI O CÓDIGO DO VÍDEO DO YOU TUBE
</div>
</center>

»»Leia mais...

Menu com efeito Jquery- lavalamp para o Blogger

 

DEMO

Vá até o "Modelo de seu blog", clique em "Editar HTML"

  Hack para o template do Blogger, implementado em  abril de 2013.

Clique no botão "Editar modelo" e depois nas teclas Ctrl e F. Ao abrir a janela, procure pelo seguinte trecho.

Procure por <b:skin>...</b:skin> que está logo acima no código.

Abaixo dele, cole o próximo código:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<!--Início lavalamp menu -->
    <script type='text/javascript'>
    //<![CDATA[
      $(document).ready(function () {
    var dleft = $('.lavalamp li.active').offset().left - $('.lavalamp').offset().left;
        var dwidth = $('.lavalamp li.active').width() + "px";
 
    $('.floatr').css({
        "left": dleft+"px",
        "width": dwidth
    });

    $('li').hover(function(){
               var left = $(this).offset().left - ($(this).parents('.lavalamp').offset().left + 15);
        var width = $(this).width() + "px";
        var sictranslate = "translate("+left+"px, 0px)";              
        $(this).parent('ul').next('div.floatr').css({
            "width": width,
            "-webkit-transform": sictranslate,
            "-moz-transform": sictranslate
        });

    },

    function(){
        var left = $(this).siblings('li.active').offset().left - ($(this).parents('.lavalamp').offset().left + 15);
        var width = $(this).siblings('li.active').width() + "px";

        var sictranslate = "translate("+left+"px, 0px)";

        $(this).parent('ul').next('div.floatr').css({
            "width": width,
            "-webkit-transform": sictranslate,
            "-moz-transform": sictranslate         
        });
     
    }).click(function(){      
        $(this).siblings('li').removeClass('active');
        $(this).addClass('active');
        return false;      
    });
});
    
      //]]>
</script>
    <!-- Fim do lavamap menu -->
   

Procure por:  <header>  e acim dele, cole o código abaixo, colocando seus links nos locais indicados e, se quiser trocar a cor do meu. troque o código que está grifdo em vermelho por um dos códigos

magenta
yellow
orange
cyan

<div class="lavalamp dark">
 <ul>
  <li class="active"><a href="ENDEREÇO DE SEU BLOG">Home</a></li>
  <li><a href="ENDEREÇO DO LINK 1">LINK 1</a></li>
  <li><a href="ENDEREÇO DO LINK 2">LINK 2</a></li>
  <li><a href="ENDEREÇO DO LINK 3">LINK 3</a></li>
  <li><a href="ENDEREÇO DO LINK 4">LINK 4</a></li>
  <li><a href="ENDEREÇO DO LINK 5">LINK 5</a></li>
  <li><a href="ENDEREÇO DO LINK 6">LINK 6</a></li>
  <li><a href="ENDEREÇO DO LINK 7">LINK 7</a></li>
 </ul>
 <div class="floatr"></div>
</div>

Implementar CSS                                                                             



No modelo de seu blog", clique em "Personalizar"

Ao abrir essa janela, vá em Avançado  -------> Adicionar CSS 

Copie o código abaixo e cole no local indicado.

/*Lavalamp menu------------------------------------------*/

.lavalamp {
    position: relative;
    border: 1px solid #d6d6d6;
    background: #fff;
    padding: 15px;
    -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
 -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
    border-radius : 10px;
    -moz-border-radius : 10px;
    -webkit-border-radius : 10px;
    background : -webkit-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
    background : -moz-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
 height: 18px;
        font-family: calibri;
}

.magenta {
 background : rgb(190,64,120);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91)));
 background : -moz-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91)));
 border: 1px solid #841144;

}

.cyan {
 background : rgb(64,181,197);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187)));
 background : -moz-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187)));
 border: 1px solid #2f8893;

}

.yellow {
 background : rgb(255,199,79);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43)));
 background : -moz-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43)));
 border: 1px solid #c08c1f;

}

.orange {
 background : rgb(255,133,64);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24)));
 background : -moz-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24)));
 border: 1px solid #c04f11;

}

.dark {
 background : rgb(89,89,89);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54)));
 background : -moz-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54)));
 border: 1px solid #272727;

}

.magenta li a , .cyan li a, .yellow li a , .orange li a, .dark li a{
 color: #fff;
 text-shadow: 0 -1px 0 rgba(0,0,0,.40);

}

.lavalamp a {
    text-decoration: none;
    color: #262626;
    line-height: 20px;
}

.lavalamp ul {
    margin: 0;
    padding: 0;
    z-index: 300;
    position: absolute;
}

.lavalamp ul li {
    list-style: none;
    float:left;

    text-align: center;
    }

.lavalamp ul li a {
    padding: 0 20px;
    text-align: center;
    }

.floatr {
    position: absolute;
    top: 10px;
    z-index: 50;
    width: 70px;
    height: 30px;
    border-radius : 8px;
    -moz-border-radius : 8px;
    -webkit-border-radius : 8px;
    background : rgba(0,0,0,.20);
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
}

Depois, clique em "Aplicar ao blog", no canto direito de seu monitor, na parte superior para salvar.

Créditos: HelpBlogger

»»Leia mais...

Não à redução da maioridade penal

São crianças como você...

Sei que este blog trata de assuntos relacionados a hacks e dicas para o Blogger mas, devido ao acalorado debate que se deu nos últimos dias pela redução da maioridade penal depois que um jovem de classe média foi covardemente assassinado por um outro jovem em frente a sua residência, não posso me furtar a deixar minha opinião a respeito deste passo muito importante que a sociedade quer vir a dar.

Na verdade na verdade o que no fundo a sociedade quer não é justiça, é mais segregação. As pessoas não querem punição para os jovens abandonados pelo Estado e velependiados pela sociedade, as pessoas querem é que desapareçam da face da terra esses jovens. Esses jovens negros e pardos, que vigiam carros, cheiram cola, fumam crack, puxam carrinho de feira, fazem malabares nos sinais. A sociedade alienada não quer dividir espaço com pedinte, com morador em situação de rua, com crianças brutalizadas por esse sistema excludente e marginalizante. Não, o que querem é tranca-los, e se possível, que joguem a chave fora ou que aconteça a eles a mesma sorte dos presos do Carandirú. Essa soiciedade hipócrita, vagabunda quer mesmo é que morram, querem mais mesmo é que sejam assassinados por policiais, por traficantes, pela miséria que cresce por causa de um sistema capitalista opressor.

No fundo todos sabemos quem é que vai parar em presídios super-lotados, faculdades de fazer bandidos-fascínoras. Todos sabemos que presídios não regeneram porquê são perversos, são depósitos de seres humanos sem eira nem beira, sem educação, sem cultura. Todos sabemos que a justiça, não só no Brasil mas em todos os lugares, só funcionam para pobres. Jamais farei coro com soluções imediatistas como essas, soluções de fundo silenciadores que desviam o foco, que não mostram o que de fato está por trás. Uma sociedade consumista, egocêntrica, corrupta e corruptivel, maniqueista e intolerante. Que cobrem do Estado o que está na constituição que é saúde, educação e moradia para todos. Que cobrem de seus representantes políticos soluções de fato para toda essa população que existe em situação de risco. Que olhem para um todo com mais amor, caridade, solidariedade e misericórdia. Se você  concorda que os presídios não recuperam, ao contrário, só agravam mais a situação, porquê diabos então você ainda quer depositar alí, seres humanos que estão ainda em formação ?

»»Leia mais...

Text-shadow, colocar sombra nos textos

Alguns códigos para deixar textos com sombras. Estes códigos podem ser aplicados em pequenas partes para dar a seu texto um maior destaque. Pode ser nos títulos das postagens, dos widgets, algum texto que se queira dar uma maior dramaticidade e chamar atenção.

Percebam que coloquei não só o código CSS do efeito da sombra como também a cor do background (fundo) e da font (letra).

                              Escrevendo assim                     

           color: #000; background: #808080; text-shadow: 0.1em 0.1em 0.05em #333;

               Escrevendo assim                           

           color: #fff; background: #808080; text-shadow: 0.1em 0.1em 0.05em #333;

                 Escrevendo assim                        

           color: #000; background: #808080;text-shadow: 0.1em 0.1em #333;

                                        Escrevendo assim                 

           color: #fff; background: #808080; text-shadow: 0.1em 0.1em 0.05em #cc0000;

                                        Escrevendo assim             

           color: #fff; background: #eee; text-shadow: black 0.1em 0.1em 0.2em;

                                        Escrevendo assim                     

           color: #000; background: #808080; text-shadow: 0.2em 0.5em 0.1em #600,
      -0.3em 0.1em 0.1em #060,
      0.4em -0.3em 0.1em #006;

                                  Escrevendo assim                        

           color: #333; background: #808080; text-shadow: -1px -1px white, 1px 1px #333;

                                   Escrevendo assim                     

           color: #808080; background: #808080; text-shadow: 1px 1px white, -1px -1px #444;

                 Escrevendo assim                     

           color: #808080; background: #808080; text-shadow: -1px -1px white, 1px 1px #333;

                                        Escrevendo assim                

           color: #fff; background: #808080; text-shadow: -1px 0 black, 0 1px black,
      1px 0 black, 0 -1px black;

                   Escrevendo assim                       

           color: #fff; background: #808080; text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F,
        0 0 0.2em #87F;

                                        Escrevendo assim                           

           color: #000; background: #808080; text-shadow: 0.1em 0.1em 0.05em #333;

                                        Escrevendo assim                           

           color: #fff; background: #808080; text-shadow: 2px 2px 0 #ffd217, 4px 4px 0 #5ac7ff, 6px 6px 0 #ffd217, 8px 8px 0 #5ac7ff;

                                        Escrevendo assim                           

           color: #000; background: #808080;  text-shadow: 0 0 4px #fefcc9, 5px -5px 9px #feec85, -6px -6px 9px #ffae34, 6px -6px 8px #ec760c, -4px -8px 8px #cd4606, 0 -10px 12px #973716, 10px -10px 8px #451b0e;

                                        Escrevendo assim                           

           color: #000; background: #808080; text-shadow: 1px 1px 0px #808080, 2px 2px 0px #000000;

                                        Escrevendo assim                           

           color: #fff; background: #808080; text-shadow: 0 0 2px #fff, 0 0 4px #fff, 0 0 7px #fff, 0 0 10px #ff00de, 0 0 12px #ff00de, 0 0 14px #ff00de, 0 0 17px #ff00de, 0 0 200px #ff00de; ;

»»Leia mais...

Usar comentários do Facebook e Blogger juntos no blog

DEMO

Para quem quer o sistema de comentários do Facebook em seu blog, conforme ensinei neste post mas não quer perder o sistema de comentários do Blogger, eis uma solução: coloca-los em sistema de menu de abas, assim, seu leitor decidirá onde comentar. Para isso é necessário conseguir o ID do Facebook. A primeira coisa a fazer é se logar no Facebook, depois clique AQUI e escreva o endereço completo de seu blog.

Depois clique em "GET CODE", abrirá uma janela, copie e cole todo o código em algum local (pode ser o bloco de notas) para separar apenas o número.

No modelo de seu blog clique em Personalizar

Cole então o código abaixo no local indicado.

/*Sistem comentarios Facebook e Blogger------------------------------------------------*/
.comments-page {  background-color: #f2f2f2;}
#blogger-comments-page {  padding: 0px 5px;  display: none;}
.comments-tab { background-color: #808080; float: left; padding: 5px; margin-right: 3px; cursor: pointer; }
.comments-tab-icon { height: 14px;  width: auto;  margin-right: 3px;}
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #d1d1d1;}

Volte ao modelo de seu blog

<head>


E depois dele cole o seguinte código, colocando o número do ID do Facebook no local indicado.

<script src='http://connect.facebook.net/pt_BR/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='AQUI O NÚMERO DE SEU ID DO FACEBOOK' property='fb:admins'/>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(&quot;.comments-tab&quot;).addClass(&quot;inactive-select-tab&quot;);
$(selectTab).removeClass(&quot;inactive-select-tab&quot;);
$(&quot;.comments-page&quot;).hide();
$(selectTab + &quot;-page&quot;).show();
}
</script>

Salve.


Clique então em Ir para um widget e depois clique em Blog1

Procure por <b:includable id='comments' var='post'>...</b:includable>

 

Procure por <div class='comments' id='comments'>

Troque-o por: (número grifado em rosa representa a largura da área do Facebook, troque-a caso necessário.)


 <div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comentários no Facebook'>
<img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
<fb:comments-count expr:href='data:post.url'/> Comentários
</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Comentários no Blogger'>
<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comentários
</div><div class='clear'/>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='52' width='400'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>

Procure agora por:

<b:includable id='comment-form' var='post'>...</b:includable>


Clique na setinha para expandir.

Agora procure por:


<h4 id='comment-post-message'>
        <a expr:id='data:widget.instanceId + &quot;_comment-editor-toggle-link&quot;' href='javascript:void(0)'><data:postCommentMsg/></a></h4>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
    <b:else/>
      <h4 id='comment-post-message'><data:postCommentMsg/></h4>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
    </b:if>



Onde estiver o número:  410

Troque-o por: 1410

Salve e  pronto

»»Leia mais...

Dar estilo aos comentários do novo Blogger

Ah, quem disse que a área de comentários do Blogger tem que ser essa coisinha sem graça ? Vamos modificar tudo dando uma corzinha e inserir botões ?

Fácil, fácil...

Procure por <b:skin>...</b:skin> e clique na setinha ao lado para abrir a área.

Procure então por:

/* Comments
----------------------------------------------- */
.comments .comments-content .icon.blog-author {
  background-repeat: no-repeat;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);
}

.comments .comments-content .loadmore a {
  border-top: 1px solid $(widget.alternate.text.color);
  border-bottom: 1px solid $(widget.alternate.text.color);
}

.comments .comment-thread.inline-thread {
  background-color: $(post.footer.background.color);
}

.comments .continue {
  border-top: 2px solid $(widget.alternate.text.color);
}
  

Substitua então pelo código abaixo:

/*Comentario personalizado----------------------------------------------------------------*/
.comments {
background: #808080;
  clear: both;
  margin-top: 10px;
  margin-bottom: 0px;
  line-height: 1em;
}
.comments .comments-content {
background: #eee;
padding: 10px 10px 10px 10px;
font-size: 12px;
margin-bottom: 16px;
font-weight: normal;
text-align:left;
line-height: 1.4em;
}
.comments .comment .comment-actions a {
display: inline-block;
margin: 0;
padding: 1px 6px;
border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
color: #424242 !important;
text-align: center;
text-shadow: 0 -1px 0 white;
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #ccc;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );
background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );
font: 11px/18px sans-serif;
padding:2px 8px; margin-right:10px;
}
.comments .comment .comment-actions a:hover {
text-decoration: none; background:#fff; border:1px solid #5AB1E2;
}
.comments .comments-content .comment-thread ol {
  list-style-type: none;
  padding: 0;
  text-align: none;
}
.comments .comments-content .inline-thread {
  padding: 0.5em 1em;
}
.comments .comments-content .comment-thread {
  margin: 8px 0px;
}
.comments .comments-content .comment-thread:empty {
  display: none;
}
.comments .comments-content .comment-replies {
  margin-top: 1em;
  margin-left: 40px;   font-size:12px; background:#cccccc;
}
.comments .comments-content .comment {
  margin-bottom:16px;
  padding-bottom:8px;

}
.comments .comments-content .comment:first-child {
  padding-top:16px;
}
.comments .comments-content .comment:last-child {
  border-bottom:0;
  padding-bottom:0;
}
.comments .comments-content .comment-body {
  position:relative;
}
.comments .comments-content .user {
  font-style:normal;
  font-weight:bold;
}
.comments .comments-content .user a {
color:#cccccc; font-size:14px; font-weight: bold;text-decoration: none;
}
.comments .comments-content .icon.blog-author {
  width: 18px;
  height: 18px;
  display: inline-block;
  margin: 0 0 -4px 6px;
}
.comments .comments-content .datetime {
color: #999999;
float: right;
font-size: 11px;
text-decoration: none;
}
.comments .comments-content,
.comments .comments-content .comment-content {
  margin:0 0 8px;
}

.comment-header {background-color: #F4F4F4;
    border: thin solid #E6E6E6;
    margin-bottom: 5px;
    padding: 5px;
}
.comments .comments-content .comment-content {
  text-align:none;
}
.comments .comments-content .owner-actions {
  position:absolute;
  right:0;
  top:0;
}
.comments .comments-replybox {
  border: none;
  height: 250px;
  width: 100%;
}
.comments .comment-replybox-single {
  margin-top: 5px;
  margin-left: 48px;
}
.comments .comment-replybox-thread {
  margin-top: 5px;
}
.comments .comments-content .loadmore a {
  display: block;
  padding: 10px 16px;
  text-align: center;
}
.comments .thread-toggle {
  cursor: pointer;
  display: inline-block;
}
.comments .continue {
  cursor: pointer;
}
.comments .continue a {
display: inline-block;
margin: 0;
padding: 1px 6px;
border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
color: #424242 !important;
text-align: center;
text-shadow: 0 -1px 0 white;
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #cc0000;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );
background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );
font: 11px/18px sans-serif;
padding:2px 8px; margin-right:10px;
}
.comments .comments-content .loadmore {
  cursor: pointer;
  max-height: 3em;
  margin-top: 3em;
}
.comments .comments-content .loadmore.loaded {
  max-height: 0px;
  opacity: 0;
  overflow: hidden;
}
.comments .thread-chrome.thread-collapsed {
  display: none;
}
.comments .thread-toggle {
  display: inline-block;
}
.comments .thread-toggle .thread-arrow {
  display: inline-block;
  height: 6px;
  width: 7px;
  overflow: visible;
  margin: 0.3em;
  padding-right: 4px;
}
.comments .thread-expanded .thread-arrow {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent;
}
.comments .avatar-image-container {background-image: url("http://img846.imageshack.us/img846/7357/unled1oww.jpg");background-position: center center;background-repeat: no-repeat;float: left;width: 36px;max-height: 36px;margin: 0;outline: 1px solid #FFFFFF;padding: 3px;vertical-align: middle;overflow: hidden;
border: 1px solid #DDDDDD;}
.comments .avatar-image-container img {
  width: 36px;
}
.comments .comment-block {
  margin-left: 48px;
  position: relative;
}

/* Responsive styles. */
@media screen and (max-device-width: 480px) {
  .comments .comments-content .comment-replies {
    margin-left: 0;
  }
}

Salve.

»»Leia mais...

Como usar qualquer menu nos templates do Blogger

Os templates nativos do Blogger limitam o uso de wigets na parte do cabeçalho e colocar códigos de menus com submenus nos templates. Para corrigir este erro é necessário criar uma div para alí, dentro dela, instalar junto um widget de HTML/Javascript parapodermos usar livremente os menu com submenu de sua escolha. Para isso siga esta tutorial.


Vá até o "Modelo de seu blog", clique em "Editar HTML"

  Hack para o template do Blogger, implementado em  abril de 2013.

Clique no botão "Editar modelo" e depois nas teclas Ctrl e F. Ao abrir a janela, procure pelo seguinte trecho.

Procure por </header> se quiser seu menu abaixo do cabeçalho, se quiser acima, procure por <header>

Abaixo dele cole este próximo código.

<div style='clear: both'/>   
    <div class='menu-blog'>
      <b:section class='banner2' id='banner2' maxwidgets='2' showaddelement='no'>
        <b:widget id='HTML111' locked='false' title='' type='HTML'>
          <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:includable>
        </b:widget>
      </b:section>
    </div>
    <div style='clear: both'/>

Salve.

 Pronto. Veja, o código de seu template está todo dividido em partes. Mas para encontrar o código que queremos você precisará abrir a seguinte parte:



Uma outra maneira de fazer isso é seguindo a outra dica, publicada no blog Passo a Passo

»»Leia mais...

Efeito degradê com CSS

Para fazer efeitos em seu blog como background não é necessários para isso colocar imagens. O CSS deixa o blog mais leve e moderno acrescentando algumas linhas onde quer se dar um efeito. Pode usa-lo como fundo da área do título, do título dos widgets, na área de fundo de imagens, etc. Para tanto, vá mudando as cores dos gradientes para que se adapte com harmonia a seu template.

Este é um bom efeito de background em CSS para você usar em seus layouts para usar em fundo de títulos, de blogs, posts, imagens...

background: -moz-linear-gradient(bottom, #FFC0C0, #fff 50%); background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #FFC0C0), color-stop(0.20, #fff));

Este é um bom efeito de background em CSS para você usar em seus layouts para usar em fundo de títulos, de blogs, posts, imagens...

 -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);

Este é um bom efeito de background em CSS para você usar em seus layouts para usar em fundo de títulos, de blogs, posts, imagens...

background: -webkit-gradient(linear, left top, left bottom, from(#F9E245), to(#F96319));
background: -moz-linear-gradient(top, #F9E245, #F96319);filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#F9E245', EndColorStr='#F96319');

Este é um bom efeito de background em CSS para você usar em seus layouts para usar em fundo de títulos, de blogs, posts, imagens...

background: -moz-linear-gradient(left, #F9E245, #F56D13); background: -webkit-gradient(linear, left top, right top, from(#F9E245), to(#F56D13)) no-repeat;  filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#F9E245, EndColorStr='#F56D13');

»»Leia mais...

Código CSS para dar estilo aos widgets do Blogger

Mais um modelo para aplicar na sidebar de seu blog e dar um ar mais profissional porquê esse modelito que vem nativo no Blogger parece nossos carrinhos populares. Mais um pouco e roda e volante serão opcionais.



Implementar CSS                                                                             



No modelo de seu blog", clique em "Personalizar"

Ao abrir essa janela, vá em Avançado  -------> Adicionar CSS 

Copie e cole este código abaixo.

/*Sidebar-------------------------------------------*/
#sidebar-right-1 .widget, #sidebar-right-3 .widget {
background: #fff; margin: 50px -40px  20px -20px; padding: 6px 8px
}
#sidebar-left-1 .widget, #sidebar-left-3 .widget {
background: #fff; margin: 50px -30px  20px -40px; padding: 6px 8px
}
#sidebar-right-2-1 .widget, #sidebar-left-2-1 .widget {background: #fff;  margin: 30px -25px  20px -20px; padding: 6px 8px }

#sidebar-right-2-2 .widget, #sidebar-left-2-2 .widget {background: #fff;  margin: 30px -35px  20px 5px; padding: 6px 8px }

#sidebar-right-1 h2, #sidebar-right-2-1 h2, #sidebar-right-2-2 h2, #sidebar-right-3 h2, #sidebar-left-1 h2, #sidebar-left-2-1 h2, #sidebar-left-2-2 h2, #sidebar-left-3 h2 {
text-transforme: none;
background: #808080; padding: 12px; font-size: 18px; text-align: right; float: right; margin: -45px 0 30px 0;
color: white; text-shadow: black 0.1em 0.1em 0.2em;
}
#sidebar-right-1 li, #sidebar-right-3 li,  #sidebar-right-2-1 li,  #sidebar-right-2-2 li,  #sidebar-left-1 li,  #sidebar-left-3 li, #sidebar-left-2-1 li,  #sidebar-right-2-2 li{
border-bottom: 1px solid #eee;
list-style-type : none;
}
#sidebar-right-1 .widget-content, #sidebar-right-2-1 .widget-content, #sidebar-right-2-2 .widget-content, #sidebar-right-3 .widget-content{
 border: 4px solid #808080;
padding: 10px 3px;
-moz-box-shadow: -3px -3px 3px #888;
-webkit-box-shadow: -3px -3px 3px #888;
box-shadow: -3px -3px 3px #888;
}
#sidebar-left-1 .widget-content, #sidebar-left-3 .widget-content, #sidebar-left-2-1 .widget-content, #sidebar-left-2-2 .widget-content{
 border: 4px solid #808080;
padding: 10px 3px;
-moz-box-shadow: -3px -3px 3px #888;
-webkit-box-shadow: -3px -3px 3px #888;
box-shadow: -3px -3px 3px #888;
}

/*Footers --------------------------------------------*/

#footer-1 .widget, #footer-2-1 .widget, #footer-2-2 .widget, #footer-2-3 .widget{
background: #fff; margin: 35px -15px  20px -20px; padding: 6px 8px
}
#footer-1 h2, #footer-2-1 h2 , #footer-2-2 h2, #footer-2-3 h2{
background: #808080; padding: 12px; font-size: 18px; text-align: right; float: right; margin: -45px 0 30px 0;
color: white; text-shadow: black 0.1em 0.1em 0.2em;
}
#footer-1 .widget-content, #footer-2-1 .widget-content, #footer-2-2 .widget-content, #footer-2-3 .widget-content{
border: 4px solid #808080;
padding: 10px 3px;
-moz-box-shadow: -3px -3px 3px #888;
-webkit-box-shadow: -3px -3px 3px #888;
box-shadow: -3px -3px 3px #888;
}
#footer-1 li, #footer-2-1 li,  #footer-2-2 li,  #footer-2-3 li{
border-bottom: 1px solid #eee;
list-style-type : none;
}

Depois clique em "Aplicar ao blog", no canto direito de seu monitor, na parte superior.

»»Leia mais...

Última postagem maior com posts menores ao lado na primeira página do Blogger

Que tal dar a seu blog uma aparência mais inusitada, facilitar a navegação do leitor e economizar espaço na primeira página do template de seu blog ? Este é um hack antiguinho que, se não me engano foi introduzido na blogosfera pela Ariane do Templates para o Novo Blogger. Dei uma atualizada no código HTML, mas está bem básico, prometendo aqui fazer mais dois códigos mais incrementados...



Vá até o modelo de seu blog e clique em Editar HTML.

Ao abrir a janela, clique em Ir para um widget e depois clique em Blog1

 Agora clique na setinha para abrir o código

Depois que abrir, clique novamente na setinha, para abrir o seguinte trecho:


 <b:includable id='main' var='top'>...</b:includable>



É dentro desta tag que encontraremos o código.

Agora, procure por:

<b:include data='post' name='post'/>

Troque-o por:

<b:if cond='data:post.isFirstPost'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<div id='first'>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
<div class='first-body'>
<p><data:post.body/></p>
</div>
<div class='post-footer'>
<span class='post-comment-link'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</span>
</div>
</div>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

 Procure agora por: <b:skin>...</b:skin>

E abaixo dele, cole o próximo código.

<!-- Design post grande-->
<style>
#first{
width: 60%; /*largura do post grande*/
margin: 0px 0px 10px 0px;
padding:0px;
float:left;
}

.first-body{
margin: 0px;
padding: 10px 10px;
line-height:1.5em;
text-align:justify;
}

#first h3{
display:block;
margin: 10px auto;
width: 100%;
padding: 0px 0px 4px 0px;
line-height:1.4em;
}
.first-body img{ /* estilo para as imagens */
padding:10px;
}
</style>
<!-- Design posts pequenos-->
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
.post{
border-top: 1px solid #eee;
width:38%;/*largura dos posts pequenos*/
height:180px;/*comprimento dos posts pequenos*/
font-size: 10px; /*tamanho da fonte dos posts*/
margin:12px 2px 15px 5px;
float:left;
overflow:hidden;
padding:2px;
line-height:1.4em;
font-size:12px;
}
.post-body{
height: 140px;/*largura do corpo das postagens */
padding: 0px;
margin:5px 2px 2px 2px;
line-height:1.4em;
}
.post-body img{
width: 95%;
height: 110px;/*largura das imagens dos posts */
padding: 0px;
margin:5px 2px 2px 2px;
line-height:1.4em;
}
.post-body iframe{
width: 95%;
height: 120px;/*largura das imagens dos iframes */
padding: 0px;
margin:5px 2px 2px 2px;
line-height:1.4em;
}
.post h3{
height: 30px;
font-size: 11px;/*tamanho da fonte do título*/
margin:0px;
padding:0px 0 5px 0px;
line-height:1.4em;
letter-spacing:1px;
}
.post h3 a, .post h3 a:visited, .post h3 strong{ display:block;
text-decoration:none;
color:$titlecolor;
font-weight:normal;
border:none;
padding:0 0 0;
}
.date-header{display:none;}
.post img{border:none;}
.post-footer{display: none;}


#showlink{
padding: 1px 3px 0 0;
margin: 0 2px 0 0;
float:right;
font-size: 10px;
}
</style>
</b:if>
</b:if>

SALVE!


Gostei muito, ficou legal Elke mas, cade o menu de navegação do blog ???

Calma apressadinho, agora vamos acrescentar mais um código...

Procure agora por  <b:includable id='nextprev'>...</b:includable> e abara a setinha que tem ao lado.

Cole então o código abaixo logo depois de <b:includable id='nextprev'>

<div style='clear: both;'/>

Salve e aproveite seu layout bacanudo :-)

»»Leia mais...