Mais tutorial bem facil e vai deicha seu blog bem legal.
1° Vá em Design e Editar Html do seu blog.

2° Procure pela Tag abaixo:

]]></b:skin>

3° Acima dela Cole o seguinte codigo:

body, a {cursor: url(LINK_DO_SEU_CURSOR), progress;} a:hov

Onde está escrito LINK_DO_SEU_CURSOR você ira colocar o cursor que você queira,mais atenção a imagem tem que ser em .png ou seja sem fundo e um tamanho legal para cursor.Deichei um Cursor De exemplo e pode ser usado tambem.

Galera este tutorial é muito bom simples e vai ajuda vocês.
Ele vai retirar a barra de rolagem da horizontal se por acaso ela apareça e não consiga tirar ela então lembre deste tutorial.
O que é a barra de rolagem? É a barra que fica nas lateral ou horizontal fazendo com que possa se mover ambos para lados.

1° Vai no editar do seu Html e procure por:

body {

2° Então adicione está linha abaixo na tag 'body':

overflow:hidden-x;

Pronto, agora só salvar.

Primeiro vamos adicionar as configurações da área de widgets no css do template
procure pela linha:

]]></b:skin>

Acima dela cole o código abaixo:

#newsidebar-widget {
width:148px; /* largura do widget */
float:right; /* posicionamento do widget */
margin-top:-19px; /* abaixar ou levantar o widget */
margin-right:15px; /* carregar o widget para direita */
font-size:97%;
display:inline;
line-height:1.5em;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
}

pronto as configurações estão adicionadas , agora vamos adicionar a área dos widgets no template
procure por:

<div id='main-wrap1'>

Acima dela cole o código abaixo:

<div id='newsidebar-widget'>
        <b:section class='sidebar' id='newsidebar' showaddelement='no'>
<b:widget id='HTML20' locked='false' title='' type='HTML'/>
</b:section>
      </div>

empre quando adicionar uma área de widget novo, troque "HTML20" para HTML+qualquernumero ( os ID's não podem ser iguais , se tiver igual algum outro id do seu template irá dar erro ) e troque nome "newsidebar-widget" no css e na id da div ( atenção: o nome que estiver no css tem que ser exatamente igual o nome da ID da div )
Pronto visualize , alinhe sua área de widget e salve

Este menu é compatível com a maioria dos browsers modernos e clássicos, e podem ser adicionados para qualquer modelo em apenas 3 passos.

Antes de editar o modelo, é recomendável salvar uma cópia do mesmo.

1 - Adicionando o CSS:
Clique em DESIGN > EDITAR HTML e procure pela linha:

]]></b:skin>

E acima dela, cole o código css:

#jsddm {
margin: 0;
padding: 15px;
z-index:1000000000;
position:relative;
}
#jsddm li {
float: left;
list-style: none;
font: 12px Tahoma, Arial;
}
#jsddm li a {
display: block;
white-space: nowrap;
margin:1px 3px;
border: 1px solid #AAAAAA;
background: #cccccc;
background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#cccccc));
background: -moz-linear-gradient(top, #ebebeb, #cccccc);
padding: 5px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: #ffffff 0 1px 0;
color: #363636;
font-size: 15px;
font-family: Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}
#jsddm li a:hover {
background: #C8C8C8;
}
#jsddm li ul {
margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white;
}
#jsddm li ul li {
float: none;
display: inline;
}
#jsddm li ul li a {
width: auto;
background: #CAE8FA;
}
#jsddm li ul li a:hover {
background: #A3CEE5;
}

2 - Adicionando o Javascript:
Procure pela linha:

</head>

Acima dela, cole o codigo Javascript

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js' type='text/javascript'/>
  <script type='text/javascript'>
  //<![CDATA[
var timeout    = 500;
  var closetimer = 0;
  var ddmenuitem = 0;
function jsddm_open()
  {  jsddm_canceltimer();
  jsddm_close();
  ddmenuitem = $(this).find('ul').css('visibility', 'visible');}
function jsddm_close()
  {  if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}
function jsddm_timer()
  {  closetimer = window.setTimeout(jsddm_close, timeout);}
function jsddm_canceltimer()
  {  if(closetimer)
  {  window.clearTimeout(closetimer);
  closetimer = null;}}
$(document).ready(function()
  {  $('#jsddm > li').bind('mouseover', jsddm_open)
  $('#jsddm > li').bind('mouseout',  jsddm_timer)});
document.onclick = jsddm_close;
  //]]>
  </script>

Agora clique em Salvar "Template"

3 - Colocando o menu em seu Blog:
Clique em Elementos da Página e adicione um Gadget onde você quer que apareça o menu
escolha "HTML / JavaScript", Deixe o título em branco e cole o seguinte código:

<ul id="jsddm">
  <li><a href="#">Home</a>
  <li><a href="#">Menu 1</a>
  <ul>
  <li><a href="#">Drop 1-1</a></li>
  <li><a href="#">Drop 1-2</a></li>
  <li><a href="#">Drop 1-3</a></li>
  </ul>
  </li>
 <li><a href="#">Menu 2</a>
  <ul>
  <li><a href="#">Drop 2-1</a></li>
  <li><a href="#">Drop 2-2</a></li>
  </ul>
  </li>
 <li><a href="#">Menu 3</a>
  <ul>
  <li><a href="#">Drop 3-1</a></li>
  <li><a href="#">Drop 3-2</a></li>
  <li><a href="#">Drop 3-3</a></li>
  <li><a href="#">Drop 3-4</a></li>
  </ul>
  </li>
 <li><a href="#">Menu 4</a></li>
  <li><a href="#">Menu 5</a></li>
  <li><a href="#">Anime Design</a></li>
  </li></ul>

Clique em Salvar e está pronto o seu menu.

se o seu template não tiver uma área para adicionar o menu, CLIQUE AQUI e veja o tutorial de como adicionar Área de Widget.

Antes de editar o modelo, é recomendável salvar uma cópia do mesmo.

1 - Adicionando Javascript:
Clique em DESIGN > EDITAR HTML e procure pela linha:

</head>

Acima dessa linha, cole o seguinte código:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js' type='text/javascript'/>
        <script>
                $(function() {
                        $(&quot;.meter &gt; span&quot;).each(function() {
                                $(this)
                                        .data(&quot;origWidth&quot;, $(this).width())
                                        .width(0)
                                        .animate({
                                                width: $(this).data(&quot;origWidth&quot;)
                                        }, 1200);
                        });
                });
        </script>

2 - Adicionando CSS
Procure pela linha:

]]></b:skin>

Acima dessa linha, cole o seguinte código:

.meter {
                        height: 20px;  /* Can be anything */
                        position: relative;
                        margin: 60px 0 20px 0; /* Just for demo spacing */
                        background: #555;
                        -moz-border-radius: 25px;
                        -webkit-border-radius: 25px;
                        border-radius: 25px;
                        padding: 10px;
                        -webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
                        -moz-box-shadow   : inset 0 -1px 1px rgba(255,255,255,0.3);
                        box-shadow        : inset 0 -1px 1px rgba(255,255,255,0.3);
                }
                .meter > span {
                        display: block;
                        height: 100%;
                           -webkit-border-top-right-radius: 8px;
                        -webkit-border-bottom-right-radius: 8px;
                               -moz-border-radius-topright: 8px;
                            -moz-border-radius-bottomright: 8px;
                                   border-top-right-radius: 8px;
                                border-bottom-right-radius: 8px;
                            -webkit-border-top-left-radius: 20px;
                         -webkit-border-bottom-left-radius: 20px;
                                -moz-border-radius-topleft: 20px;
                             -moz-border-radius-bottomleft: 20px;
                                    border-top-left-radius: 20px;
                                 border-bottom-left-radius: 20px;
                        background-color: rgb(43,194,83);
                        background-image: -webkit-gradient(
                          linear,
                          left bottom,
                          left top,
                          color-stop(0, rgb(43,194,83)),
                          color-stop(1, rgb(84,240,84))
                         );
                        background-image: -moz-linear-gradient(
                          center bottom,
                          rgb(43,194,83) 37%,
                          rgb(84,240,84) 69%
                         );
                        -webkit-box-shadow:
                          inset 0 2px 9px  rgba(255,255,255,0.3),
                          inset 0 -2px 6px rgba(0,0,0,0.4);
                        -moz-box-shadow:
                          inset 0 2px 9px  rgba(255,255,255,0.3),
                          inset 0 -2px 6px rgba(0,0,0,0.4);
                        box-shadow:
                          inset 0 2px 9px  rgba(255,255,255,0.3),
                          inset 0 -2px 6px rgba(0,0,0,0.4);
                        position: relative;
                        overflow: hidden;
                }
                .meter > span:after, .animate > span > span {
                        content: "";
                        position: absolute;
                        top: 0; left: 0; bottom: 0; right: 0;
                        background-image:
                           -webkit-gradient(linear, 0 0, 100% 100%,
                              color-stop(.25, rgba(255, 255, 255, .2)),
                              color-stop(.25, transparent), color-stop(.5, transparent),
                              color-stop(.5, rgba(255, 255, 255, .2)),
                              color-stop(.75, rgba(255, 255, 255, .2)),
                              color-stop(.75, transparent), to(transparent)
                           );
                        background-image:
                                -moz-linear-gradient(
                                  -45deg,
                              rgba(255, 255, 255, .2) 25%,
                              transparent 25%,
                              transparent 50%,
                              rgba(255, 255, 255, .2) 50%,
                              rgba(255, 255, 255, .2) 75%,
                              transparent 75%,
                              transparent
                           );
                        z-index: 1;
                        -webkit-background-size: 50px 50px;
                        -moz-background-size: 50px 50px;
                        -webkit-animation: move 2s linear infinite;
                           -webkit-border-top-right-radius: 8px;
                        -webkit-border-bottom-right-radius: 8px;
                               -moz-border-radius-topright: 8px;
                            -moz-border-radius-bottomright: 8px;
                                   border-top-right-radius: 8px;
                                border-bottom-right-radius: 8px;
                            -webkit-border-top-left-radius: 20px;
                         -webkit-border-bottom-left-radius: 20px;
                                -moz-border-radius-topleft: 20px;
                             -moz-border-radius-bottomleft: 20px;
                                    border-top-left-radius: 20px;
                                 border-bottom-left-radius: 20px;
                        overflow: hidden;
                }
             
                .animate > span:after {
                        display: none;
                }
             
                @-webkit-keyframes move {
                    0% {
                       background-position: 0 0;
                    }
                    100% {
                       background-position: 50px 50px;
                    }
                }

Clique em Salvar Template.

3 - Adicionando a Barra de progresso
Crie um Gadget onde você queira que fique a barra de progresso e cole o seguinte código:

<div class="meter">
 <span style="width: 25%"></span>
</div>

Para mudar o progesso , altere onde está width: 25%

Para mudar as cores da barra de progesso volte em EDITAR HTML e procure pela linha:

.meter > span {

e altere as linhas:
background-color: rgb(43,194,83);

color-stop(0, rgb(43,194,83)),
color-stop(1, rgb(84,240,84))

Ficando assim:
background-color: #000000;

color-stop(0, #676767),
color-stop(1, #333333)

Ai galera é ume feito simple, não vai ser demorado e o efeito e bem legal, espero que gostem.

Vá em design editar html e procure por:

.post-body {

No final desta tag html coloque o seguinte codigo css:

text-shadow:0px 0px 1px #000;

Só issu galera, agora só SALVA, pronto.

Apostila CSS Básico: Apostila do curso onde ensinará tudo sobre o básico de CSS.

Nota: 10
Download

Apostila HTML Básico: Apostila do curso onde ensinará tudo sobre o básico de HTML.

Nota: 10
Download

Esse slider, funciona da seguinte maneira, as imagens ficam passando de 3 em 3 segundos.
Pra fazer ele funcionar no blogger vamos usar HTML , CSS e Javascript.

Primeiro vamos adicionar o Javascript, Vá em EDITAR HTML e procure pela linha:

</head>

Acima dessa linha copie e cole o código javascript: Clique Aqui
Após fazer isso procure pela linha:

]]></b:skin>

Acima dela copie cole o código Css:

/*--Container geral--*/
.main_view {
float: left;
position: relative;
}
/*--Estilos do containert das imagens--*/
.window {
height:289px; /*-- as imagens devem ter a mesma altura ou mais-- */
width: 800px;  /*-- as imagens devem ter a mesma largura ou mais-- */
border:1px solid #610000;
overflow: hidden;
position: relative;
}.image_reel {
position: absolute;
top: 0; left: 0;
}
.image_reel img {
float: left;
}
/*--Estilos do container da numeração--*/
.paging {
position: absolute;
bottom: 40px;
right: -1px;
width: 220px;
height:41px;
z-index: 100;
text-align: center;
line-height: 40px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKB5y0R10ZGQmxvsuvgZvD_PZiM7JDzCUMueU7JTl54ELDzReJfv1nbWUcVWioKQgIF5o9SP3Votsox-IHIC2Mbwp15p298HtE7VwNyU07dQGr4L54D0-l-wtiSjHhMpRGrgDfoCNg2GkP/s0/transparencia.png);
-moz-border-radius-topleft: 15px;
-moz-border-radius-bottomleft: 15px;
-webkit-border-radius-bottomleft: 15px;
-webkit-border-radius-topleft: 15px;
border:1px solid #000;
display: none;
}
/*--Estilos do link da numeração--*/
.paging a {
outline:none;
padding: 5px 10px;
text-decoration: none;
color: #999;
background: #000;border: 1px solid #000;
-moz-border-radius: 17px;
-khtml-border-radius: 17px;
-webkit-border-radius: 17px;
}
/*--Estilos do link ativo da numeração--*/
.paging a.active {
font-weight: bold;
border: 1px solid #000;
color: #fff;
background: #920000;
-moz-border-radius: 17px;
-khtml-border-radius: 17px;
-webkit-border-radius: 17px;
}
/*--Estilos do link hover da numeração--*/
.paging a:hover {
font-weight: bold;
}

Salve e crie um Widget para adicionar o código HTML:

<div class="main_view">
<div class="window">
<div class="image_reel"><img src="url-imagem-1" alt="" />
<img src="url-imagem-2" alt="" />
<img src="url-imagem-3" alt="" />
<img src="url-imagem-4" alt="" />
</div></div>
<div class="paging">
<a href="insira-seu-link-1" rel="1">1</a>
<a href="insira-seu-link-2" rel="2">2</a>
<a href="insira-seu-link-3" rel="3">3</a>
<a href="insira-seu-link-4" rel="4">4</a>
</div>
</div>

Lembrando que para o slider funcionar perfeitamente as imagens devem ser do mesmo tamanho do slider.
Para mudar a largura, tamanho,borda e fundo, volte em EDITAR HTML e procure pela linha:

.window

e altere em "WIDTH" E "HEIGHT"
edite a cor da borda em "BORDER"
e mude a cor de fundo em "BACKGROUND"
Pronto seu slide está pronto. -Gostou,comenta.

OnClick é um código para se aplicar em afiliados, o código funciona da seguinte maneira, ao passar o mouse sobre o link acima irá aparecer a imagem do afiliado.

Crie um widget HTML/Javascript,e cole o código abaixo e altere:

<center><img src="BANNER DO SEU SITE" name="button" width="88" height="31" border="0" id="button" /></center><br />
<a onmouseover=button.src="AQUI BANNER DO AFILIADO"; onmouseout=button.src="BANNER DO SEU SITE"; href="LINK DO SITE DO AFILIADO" target="_blank" style="text-decoration: none"><img src="BANNER DO SEU SITE">nome do site do afiliado</a><br />

Se você gosto,comente!

Ai galera, estarei ensinando como deixar sua postagem fixada, e muito simples não precisa de codigo nem nada.

1° Passo:  depois de ter feito toda a postagem, clique em "Opções de Postagem"
2° Passo:  Em "Data e Hora da Postagem" marque a opção "Programado em"

Coloque uma data do seu critério, sua postagem ficará fixa ate o dia que você colocou,só vai desce juntos com as outras quando chega na data colocada.

OBG. se gostou, e o tutorial ajudou, comente custa nada.