Pular para o conteúdo principal

Slideshow personalizado no Blog ! Editando passo a passo.


 Se voce quer deixar seu blog com uma aparencia mais moderna, ou passar uma impressão de profissionalismo um Slider personalizado pode ser uma excelente ferramenta, hoje vamos estudar um slider simples e aprender a edita-lo .
Primeiramente Salve o modelo do seu blog, sempre aviso aqui, que é de extrema importância, para que voce nao perca todo nosso trabalho ate aqui,acompanhe os códigos e logo abaixo como fazer as edições. 

Em tema  clique em editar html, de um Ctrl+f  digite </head> e de enter,abaixo dela vamos inserir o seguinte código  css. Salve se não for editar agora.

Adicionando o Slide no Layout.

Para adicionar no Layout, basta adicionar Gadget escolher Html/JavaScript e adicionar o código abaixo.





Editando.

Lembrando que as alterações abaixo não são necessárias,apenas se você quiser. 
Alterar fonte.
font-family: Arial,sans-serif;position:absolute; /*determniar fonte da legenda*

 aonde:  Arial,sans-serif;position:absolute; altere pela fonte que desejar.

/Font-size: 16px; /*Tamanho da fonte da legenda*/background:#000; /*Cor de fundo da legenda*/color:#fff; /*Cor do texto da legenda*/

Na parte:
border: 3px solid #000;/*determinar cor da borda*/ }
aonde #000 é onde alteramos o codigo de cor das bordas.


Alterar largura e altura dos slides.
Se quiser alterar basta procurar por:

width:500px  !important; /*essa e a largura do slide*/height:300px  !important; /*Essa e altura do slide*/ 
e alterar onde 500px que é a largura, e 300px que é altura.

Você ira ver a url seguinte no codigo :

https://3.bp.blogspot.com/-T1ptyRVDjVs/WzPcvc5ccQI/AAAAAAAABcg/iO0-_IILtacxtRbnUujVb_UvpyN_A8ypgCLcBGAs/s1600/seta.png
Este é o modelo de setas, se voce quiser alterar basta substituir a url pela sua imagem de setas.

Editando esferas 
Basta novamente alterar a url pela sua imagem se quiser. A url padrão é essa:

https://1.bp.blogspot.com/-BZE9x1w3ND4/WzPbLC8AaSI/AAAAAAAABcM/Rdu-qai1asI4paO-PtHV3P_aBThXxbx7QCLcBGAs/s1600/18.png


Editando Links:

Basta alterar onde:

 Link numero1 ,2 3 e 4 pelo link destino.
Url da imagem1,2 3 e 4 pelo Url da imagem, lembrando que as dimensões tem que corresponder a altura e largura que você determinou.
Titulo1,2 3 e 4 Pelo titulo de sua preferencia .