Portal Fofoca Alheia: Colocar Slide para seu Blog

Bom galera, como eu já tenho tempo que uso slide para blog. Só para manter as atualizações em dia, decidi mostrar a vocês como colocar Slide para o seu Blog sem nenhuma dificuldade e muito menos normas técnicas para se entender.
Siga os passos a seguir:

1°  HTML
Clique em Modelo> Editar HTML.

2°  No HTML
Já no HTML, aperte as teclas do teclado Shift e a letra F.
OBS: Shift fica embaixo de Caps Lock e acima de Ctrl, é uma seta para cima.
Depois de apertas as teclas, digite <head> e aperte enter.

3°  Ainda no HTML
Depois que você viu a palavra <head> no seu HTML dê um enter abaixo da palavra e copie o código:

<style type="text/css">
/* <![CDATA[ */
#w2bSlideContainer {position: relative;display: block; top:0px; left:0px; right:0px;/*Ajuste as posição do slide*/}
#w2bNivoSlider { position:relative;
width:640px !important; /*largura do slide*/height:300px !important; /*Altura do slide*/
background: #fff url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP_XsR0RxQWF2qKQVoQm-FNvRSyoKTg4Do4flkExcp2TpHxtM-RJMPutAobm8pSAy3NXlK3_b3uAoaWq2tYRnONxuqST9bZjhsROfAcnWWRDn2lMNWv6BGZRvhxWVz51jOK50fyS8dPcYl/s1600/w2bLoader.gif") no-repeat 50% 50%;
margin: 20px auto 35px;
border: 3px solid #000;/*Coloque borda se quiser*/ }
#w2bNivoSlider img {position:absolute; top:0; left:0;  display:none}
.nivoSlider {position:relative;width:100%;height:auto;}
.nivoSlider img {position:absolute;top:0;left:0}
.nivo-main-image {display:block!important;position:relative!important;width:100%!important}
.nivoSlider a.nivo-imageLink {position:absolute;top:0;left:0;width:100%;height:100%;border:0;padding:0;margin:0;z-index:6;display:none}
.nivo-slice {display:block;position:absolute;z-index:5;height:100%;top:0}
.nivo-box {display:block;position:absolute;z-index:5;overflow:hidden}
.nivo-box img {display:block}
.nivo-caption {padding: 5px;
font-family: Arial,sans-serif;position:absolute; /*Fonte da legenda*/Font-size: 14px; /*Tamanho da fonte da legenda*/background:#000; /*Cor de fundo da legenda*/color:#fff; /*Cor do texto da legenda*/-ms-filter:"alpha(opacity=80)";filter:alpha(opacity=80);opacity:.8; width: 630px;/*Largura da legenda*/ z-index:8;}
.nivo-caption p {padding:2px;margin:0}
.nivo-caption a {display:inline!important}
.nivo-html-caption {display:none}
.nivo-directionNav a {position:absolute;top:45%;z-index:9;cursor:pointer;display:block;width:30px;height:30px;
background: url("URL_IMG_SETA") no-repeat;text-indent:-9999px;border:0}
.nivo-prevNav {left:10px}
.nivo-nextNav {background-position:-30px 0!important;right:10px}
.nivo-controlNav {position:absolute;left:0;right:0;bottom:-35px;text-align:center}
.nivo-controlNav a {position:relative;z-index:9;cursor:pointer;display:inline-block;width:22px;height:22px;
background:url("URL_IMG_BOLAS") no-repeat;text-indent:-9999px;border:0;margin-right:3px}
.nivo-controlNav a.active {font-weight:bold;background-position:0 -22px}
/* ]]> */
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='http://static.tumblr.com/y66747w/9hlmdpcpa/nivoslider.js' type='text/javascript'/>
<script type='text/javascript'>
/* <![CDATA[ */
jQuery(document).ready(function($) {
$('#w2bNivoSlider').nivoSlider({
effect : 'random',
slices : 10,
boxCols : 8,
boxRows : 4,
animSpeed : 500,
pauseTime : 4000,
startSlide : 0,
directionNav : true,
directionNavHide : true,
controlNav : true,
keyboardNav : false,
pauseOnHover : true,
captionOpacity : 0.8
});
});
/* ]]> */
</script>

OBS: Cole esse código abaixo da palavra <head>

4°  Prestando atenção:
Você está vendo nesse código tem palavras vermelhas, essas são as que você pode ajustar ou substituir quando quiser.
Mas primeiro, você tem quer ver no código a palavra (''URL_IMG_SETAS") e ("URL_IMG_BOLAS")

5°  Alterando URL:
Agora é a parte complicada, que muita gente se perde.

Copie o URL da SETA, com o seu próprio mouse.
Pra facilitar, sabe quando você quer salvar uma imagem? Também está escrito para Copiar URL da imagem você somente clica nessa opção

As imagens que você pode copiar o URL são:

Bolinhas

Escolha a cor desejada e copie o URL de algumas dessas imagens.

Depois de copiar o URL da imagem escolhida cole no código no lugar de ("URL_IMG_BOLAS"). Veja o exemplo:

(''http://2.bp.blogspot.com/-rQ783rJYsBI/UDqA2NIRiiI/AAAAAAAACeU/5t3Y/s1600/b-6.png'').

OBS: Não apague as ('' aspas e as chaves '').

Depois que você substituiu esse código, agora faça o mesmo com as setas.

Setas

Faça do mesmo modo explicado acima, não esquecendo de que NUNCA apague ('' aspas e as chaves '').

. 6° Depois das alterações feitas no código:

Agora vem a parte mais simples. Pegue o código que já tem o URL da Seta e o URL da Bolinha e jogue no Editar HTML abaixo da palavra <head> e é claro salve.

. 7° Depois de salvo no HTML:

Depois de salvar, Clique em Layout e depois em Adicionar um Gadget.

Escolha a opção HTML/Javascript

Depois de entrar na pagina copie o código abaixo:

. 8° Explicando detalhadamente:

Vou explicar detalhadamente o que substituir nesse outro código.

LINK_DO_SLIDE_1 - É o link da página onde o seu leito vai clicar, no caso para ver a notícia
URL_DA_IMAGEM_1 - É o URL da imagem que você quer que apareça no seu Slide
LEGENDA_DA_IMAGEM_1 - Escreva qualquer coisa relacionada a imagem ou a postagem.

OBS: Também nesse código, tome cuidado para não apagar as ''aspas''. Pois se um deles tiverem sem aspas o link,imagem ou legenda não irá aparecer.

. 9° Se você tem alguma dúvida:

Se você tem alguma dúvida, não desista amigo. Perguntar não custa nada e você aprenderá mais fácil o código.

Notícias Recentes:

Sala de Bate-Papo

Pesquise no Blog

Colocar Slide para seu Blog

Agradecimentos:

Número de Acessos:

LinkWithin