Tutoriais 2 em 1: Coin Slider e Como voltar ao topo com efeito deslizante + imagens fofas

                                                                         Hey pessoal ♥

Vamos primeiro com o tutorial do slide cute, na verdade o nome dele é "Coin Slider" *-*

O slide é do mesmo modelo da imagem abaixo !

a imagem foi pega do blog http://cherry-liah.blogspot.com

Lindo né ? É ótimo para as pessoas que querem fazer um blog estilo revista e claro, para aqueles que não se conformam em ter um slide que mostre as páginas mais interessantes do blog 'hehe'

Bom... vamos ao tutorial logo ...

Vá no painel do seu blog > Design > Editar HTML e procure por (CTRL+F) </head>
Acima desta tag, cole o código abaixo: 

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'/>
<script src='http://rascunhosblogger.webs.com/Scripts/coin-slider.min.js' type='text/javascript'/>
<script>$(document).ready(function() {
$(&#39;#CoinSlider&#39;).coinslider({
delay: 3000,
hoverPause: false,
navigation: true,
width: 565,
height: 290,
});
});
</script>

Entendendo o código:

delay: 3000 -  tempo em milésimos de segundo em que uma imagem será exibida, (neste caso 3000, corresponde a 3 segundos)
hoverPause: false – controle de pausa que aparecerá ao passar o cursor sobre a imagem. Para que seja ativado, substitua false por true.
navigation: true - são os botões Anterior e Seguinte que aparecem ao passar o cursor do rato. Para que sejam desativados, substitua true por false.
width: 565 – comprimento do slide.
height: 290 -  altura do slide.

Se alterar o comprimento do slide, também deve alterar o comprimento da área da descrição na parte destacada onde se encontram os estilos (código destacado a vermelho no passo seguinte).  

Agora, procure por : ]]></b:skin> 

e cole o código abaixo acima:

.coin-slider { overflow: hidden; zoom: 1; position: relative; }
.coin-slider a{ text-decoration: none; outline: none; border: none; }
.cs-buttons { font-size: 0px; padding: 10px; float: left; }
.cs-buttons a { margin-left: 5px; height: 10px; width: 10px; float: left; border: 1px solid #B8C4CF; color: #B8C4CF; text-indent: -1000px; }
.cs-active { background-color: #B8C4CF; color: #FFFFFF; }
.cs-title { width: 545px; padding: 10px; background-color: #000000; color: #FFFFFF; }
.cs-prev,
.cs-next { background-color: #000000; color: #FFFFFF; padding: 0px 10px;}

Agora visualize o seu blog e se não estiver nada errado salve.

Agora, vamos em > elementos da Pagina > Adicionar Gadget > HTML/Javascript

Agora cole o código a seguir no lugar que desejar:

<center><div id="CoinSlider">
<a href="LINK_IMAGEM_1">
<img src="URL_IMAGEM_1"/>
<span>DESCRIÇÃO_IMAGEM_1</span></a>
<a href="LINK_IMAGEM_2">
<img src="URL_IMAGEM_2"/>
<span>DESCRIÇÃO_IMAGEM_2</span></a>
<a href="LINK_IMAGEM_3">
<img src="URL_IMAGEM_3"/>
<span>DESCRIÇÃO_IMAGEM_3</span></a>
</div></center>

    e substitua as partes em que se pede !

Prontinho pessoal ! Fácil né ? Além de ser lindo, é bem prático :) 

 Créditos ao blog: http://empire69.blogspot.com.br

------------------------------------------------------------------------- 

Agora vamos aprender a colocar imagens de volta ao topo com efeito deslizante !

Vá para > editar HTML > procure por </body> 

Agora cole o código abaixo, antes da tag procurada:

<script type="text/javascript">
    $(document).ready(function() {
       $('#subir').click(function(){
          $('html, body').animate({scrollTop:0}, 'slow');
      return false;
         });
     });
</script>

Agora procure por  </head> e antes da tag cole:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

Salve. E agora vá em > elementos da pagina > adicionar um HTML/Javrascript e cole o código abaixo, onde você quer que a seta de "ir ao topo" apareça. Recomendo que cole no ultimo gadget da sidebar.

<a href="#" id="subir"><img src="URL_DA_IMAGEM"/></a> 

Agora é só substituir "URL da imagem" pela imagem que você quiser ou até mesmo um texto :)

Trouxe umas imagens de volta ao topo, todas encontradas na net, não necessáriamente em um blog, então por favor, se a imagem for sua, me fale que eu coloco os créditos :3

 Espero que gostem !

 

 Créditos : x x x x