Trouxe um tutorial de colocar o nivo slider no blog de vocês.
Ficará tipo esse:
Créditos:Cherry Bomb, Things to Help You e Kawaii World
Vamos Aprender ?
Vá no seu HTML e procure por </head> acima desse código cole:
<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/AVvXsEgOmZoMRU6bu2RaE4oNmXoq9t_zhTUcs3rc2GDkPtP5P6condQHhKWWneKbXi5NDrOvU_CEcLFqggGiuDuEu9KZT8VLu54ZQApvST1NKmPqqnoX2FtdT5H7yQq6fB00x0B0qqHaK9FvObIC/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_BULLETS") 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://bloggerblogwidgets.googlecode.com/svn/trunk/jquery.nivo.slider.pack.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>
Destaquei algumas coisas importantes em Negrito para ajudar
vocês na hora de editar o código.
Depois Vá no seu Layout>>Adicione um Gadget>>HTML/Javascript
e cole esse código:
<div id="w2bSlideContainer"><div id="w2bNivoSlider"><a href="LINK_DO_SLIDE_1"><img src="URL_DA_IMAGEM_1" title="LEGENDA DA IMAGEM 1"/></a><a href="LINK_DO_SLIDE_2"><img src="URL_DA_IMAGEM_2" title="LEGENDA DA IMAGEM 2"/></a><a href="LINK_DO_SLIDE_3"><img src="URL_DA_IMAGEM_3" title="LEGENDA DA IMAGEM 3"/></a><a href="LINK_DO_SLIDE_4"><img src="URL_DA_IMAGEM_4" title="LEGENDA DA IMAGEM 4"/></a></div></div>
Edite e coloque onde você quer que fique o Slide.
Setas:
Bolinhas:
Que slide lindo mano! Adorei, adorei, adorei! *---*
ResponderExcluirVou usá-lo com certeza, favoritadíssimo!
Amor, passa na minha última postagem e dá a tua opinião sobre o sorteio que eu quero fazer? obrigada desde já!
Beeeijos
myacidblackcherry.blogspot.com
Amo esse nivo slide o resultado é lindo, amo ele, é perfeitoo *--*
ResponderExcluirCliquesnocapricho.blogspot.com
Por favor, pode votar no meu blog aqui :
http://wehearthtml.blogspot.com.br/ (o segundo da enquete) !!
Ótimo tuto! Em quase todo blog que eu entro, eu vejo.
ResponderExcluirNão coloquei no meu primeiro lay pois tinha pouquíssimas postagens.
Mas no meu próximo irei usar, sem dúvidas!
gostei bastante viu.
ResponderExcluirAmei o tutorial!!! já coloquei slider no meu blog só que depois eu tirei!!
ResponderExcluiracomplicadaeperfeiitinha.blogspot.com
participa da brincadeirinha!!!
Oi flor! ótimo tutorial!
ResponderExcluirJá coloquei o Sunday HTML nos afiliados. Quando vc colocar o meu blog, me avisa?
:D Beijos!
garotapetulante.blogspot.com.br
Fica divo *--* Acho que vou usar no proximo layout (:
ResponderExcluirBeijos !
Cherry Of Shine ( no perfil )
Amei o slider, muito divo *-* Sempre uso algum nos meus lays!
ResponderExcluirchovendodiamantes.blogspot.com
Amei! Linda, te indiquei com o blog de melhor layout.
ResponderExcluirgarotaestranha-oficial.blogspot.com.br/2012/11/blogs-com-melhor-layout.html?showComment=1352933441613#c6094141581425819926
Super lindo *u*
ResponderExcluirAmor ja te botei na minha elite faz tempo, vc e a ultima imagem, so estou esperando vc me colocar na sua XD\
BVBeijos
gostinhoporsuicidio.blogspot.com
Ohhh God!
ResponderExcluirEu já disse q o layout do seu blog é
p-e-r-f-e-i-t-o ? *33*
Sériio mesmo, amei!!
~ xoxo :**
myshineforever.blogspot.com