Tutorial duplo - Como colocar o nivo slide e efeito Caption

 

Hi dreams

                    Só deu pra postar hoje.Semana de provas Ç.Ç .Vou ter que estudar o resto do dia então os estudos sugaram minha criatividade então vim trazer um post de tutorial ;-;.O primeiro é do Nivo Slide,ele é simples mas é muito fofo :3 (Aqui♥) .Já o segundo é do efeito Caption ,para moderadores (Aqui♥).

                                                       Tutorial :Nivo Slide
            É fácil .Primeiro vá no Layout do seu blog >> Adicionar um gadget >> HTML/Javascript e cole :

 

 /* Imagens que aparecerão, altere o que está em itálico para o endereço das sua*/

<div id="slider">

<a href="seulink"><img src="URL DA IMAGEM" title="Legenda da Imagem" /></a>

<a href="seulink"><img src="URL DA IMAGEM" title="Legenda da Imagem" /></a>

<a href="seulink"><img src="URL DA IMAGEM" title="Legenda da Imagem" /></a>

</div>

/* Style*/

<style>

/* Posição do slider- Não mecha!*/

#slider     {position: relative;} #slider img {display: none;} #slider a {display: block;}

/* Dimensões do Slider- Altere de acordo com suas imagens e o tamanho que quer seu slide */

.nivoSlider {width: 300px;height: 150px;} .nivoSlider img {width: 300px;height: 150px;}

.nivo-slice {position: absolute;display: block;z-index: 5;height: 100%;}

.nivo-box   {position: absolute;display: block;z-index: 5;}

.slider     {width: 100%;} .slider a {border: 0;display: block;} .slider img {position: absolute;top: 0px;left: 0px;display: none;} 

/* Images- não mecha aqui.. */

.nivoSlider a.nivo-imageLink {position: absolute;display: none;top: 0px;left: 0px;width: 100%;height: 100%;border: 0;padding: 0;margin: 0;z-index: 6; }

/* Legenda- pode se altear as cores*/

.nivo-caption   {position: absolute;width: 96.8%;left: 0px;bottom: 0px;background: pink;color: #fff;text-transform: uppercase;padding: 5px;text-align:center;

z-index: 50;}

.nivo-caption p {margin: 0;font-size: 11px;}

/* Imagens de Navegação - corações, podes trocar por outra imagem*/

.nivo-directionNav a {position: absolute;top: 45%;z-index: 99;cursor: pointer;}

.nivo-prevNav {left:0px;} .nivo-nextNav {right:0px;}

.nivo-directionNav a {display: block;width: 35px;height: 35px;background: url(http://static.tumblr.com/l2v8dwa/MKkn79x3y/sem_t__tulo-1.png) no-repeat;font:0px arial; margin-top:-11px;}

.nivo-controlNav {display: none;}

a.nivo-nextNav {background-position: -30px 0;right: 15px;} a.nivo-prevNav {left: 15px;}

</style>

/* Script*/

<script src="http://yourjavascript.com/1250421341/jquery-min.js" type="text/javascript"></script>

<script src="http://yourjavascript.com/3641231211/jquery-nivo-slider-pack.js" type="text/javascript"></script>

<script type="text/javascript">

var $nv4wp = jQuery.noConflict();

$nv4wp(window).load(function() {

$nv4wp('#slider').nivoSlider({

effect:'random', slices:15, // What animations and how many you want to be shown

boxCols: 5, //For box animations 

boxRows: 3, //For box animations 

animSpeed: 400, // Slide transition speed 

pauseTime: 4000, //How long each slide will show 

startSlide:0, //Set what image will show first

directionNav:true, //True: if you want the next&prev buttons, False: if you don't want

directionNavHide:true, //True: the next&prev buttons will appear only in hover

keyboardNav:true, //Use left & right arrows

pauseOnHover:true, //Stop animation while hovering 

manualAdvance:false, //Force manual transitions

captionOpacity:.6, //Change to play with the caption's opacity

prevText: 'Prev', // Prev directionNav text 

nextText: 'Next', // Next directionNav text 

});}); </script></center>

                                                  Agora  é só editar as partes destacadas e prontinho ^^ .

                                        Tutorial : Efeito Caption
            Vá no HTML do seu blog >> Procure por  ]]></b:skin> .Se você é igual a mim que dando CTL F nunca acha o código ,procure sem ele.Vá rolando até acahar o código .Cole :

@font-face {font-family: "04b03"; src: url('http://static.tumblr.com/qbzesex/2tSm7y7gy/04b_03_.ttf'); format("truetype");}

imagem {display: block; position: relative; float: left; overflow: hidden; margin: 0 2px 2px 0;}

captioon {position: absolute; background: #000; color: #fff; padding: 3px 25%; opacity: 0; -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -o-transition: all 0.6s ease; text-align: center; line-height: 10px; font-size: 8px; font-family: "04b03", small-fonts; text-shadow: 1px 1px 3px #000;}

imagem:hover captioon {opacity: 0.75;}

imagem:hover:before {opacity: 0;}

.caption:before {bottom: 10px; right: 10px;}

.caption captioon {bottom: 3px; right: 30%;}

.caption:hover captioon {right: 0px;}

                          Depois disso é só colar num HTML/JavaScript esse código ^^ :

<imagem class="caption"><img src="LINK DA IMAGEM" /><captioon>Legenda Aqui</captioon></imagem>

         
                                               Eu acho os dois bem simples ^-^ .E também ficam bem legais no blog.
                          Ah,eu esqueci de falar que dessa vez não vamos ter selinho pela meta alcançada.Estou fazendo um coisa diferente e.e ...

Bj♥
CRÉDITOS : Breathing Again e Chá com Anjos