Desculpa+2Tutoriais

Heyy Girls!!!

Desculpe-me pelo sumiço, é que fiquei sem ideia para postar então agora vou postar minhas desculpas+2 tutoriais veja:

-Como colocar um cursor diferente quando se passa o mouse por cima do link

-Slide de imagens com JQuery-Orbit

CLIQUE EM LEIA+

-Agora vou ensinar a mudar o cursor do mouse quando tiver por cima do link:

Créditos do tutorial : Clique Aqui

Vá na aba Design depois de ter logado em seu blog, aperte Ctrl+F do seu teclado e procure por:

]]></b:skin>

Em cima dele cole o código abaixo:

{cursor: url("URL_DA_IMAGEM"), url("URL_DA_IMAGEM"), auto;}
A:hover{cursor: url("URL_DA_IMAGEM "), url("URL_DA_IMAGEM"), auto;}

e é isso... bem simples lembrando de sempre substituir URL_DA_IMAGEM pela url do seu cursor ok? Não deu pra tirar print porque quando tiramos o mouse não sai na foto então quem quiser ver o efeito é só passar o mouse em um dos links ok? Beijos!

-Agora vou ensinar a fazer um Slide de imagens com JQuery-Orbit

Créditos do tutorial : Clique Aqui

DESCRIÇÃO_IMAGEM_1

• 0
• 1
• 2
• 3

Hoy pessoal, depois da calorosa recepção de vocês com a República Trechy resolvi fazer uma série de tutoriais super legais e uns que eu usei para fazer o layout do lá.Hoje eu vou ensinar vocês a colocarem um slide super bacana em seus blogs, eu indico ele porque foi um dos melhores e mais fáceis que encontrei, além de a personalização dele ser super fácil, e ele também é bastante leve.

O melhor do Orbit é que os botões para next e prev das imagens são personalizáveis, as imagens tem descrição e o link do post já fica nas imagens.Quero dar os parabéns para oRascunhos Blogger por ter explicado o tutorial bem direitinho, vou fazer o meu tutorial caso vocês não consigam vão lá neste link anterior.O único porém do slide é que não são automático os posts, você tem de colocar o link a descrição ..etc mas não vamos reclama de algo quase perfeito.Vamos ao tutorial:

Façam o tutorial com organização e seguindo todos os passos, um de cada vez, o slide é simples então não tem muito o que fazer.

Primeiro, caso você já tenha um slide em seu blog o retire completamente caso contrário este slide não irá aparecer.

Antes de salvar qualquer passo em seu blog visualize sempre.

Antes de fazer o tutorial, abra seu bloco de notas, e cole todo seu código HTML de seu template nele assim você pode substituir pelo que der erro.

Primeiro vá em Design > Editar HTML

marque a opção expandir modelos de widgets

pressione as teclas Ctrl + F e procure por : </head>
Logo acima dela coloque o código abaixo

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/> 
<!--[if IE]> 
<style type="text/css"> 
.timer { display: none !important; } 
div.caption { background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);zoom: 1; } 
</style> 
<![endif]--> 
<script type='text/javascript'> 
$(window).load(function() { 
$(&#39;#featured&#39;).orbit({ 
advanceSpeed: 5000, 
&#39;bullets&#39;: true, 
&#39;timer&#39; : true, 
&#39;animation&#39; : &#39;horizontal-slide&#39; 
}); 
}); 
</script> 
<script type='text/javascript'> 
//<![CDATA[ 
/* 
* jQuery Orbit Plugin 1.1 
* www.ZURB.com/playground 
* Copyright 2010, ZURB 
* Free to use under the MIT license. 
* http://www.opensource.org/licenses/mit-license.php 
*/ 
(function(e){e.fn.orbit=function(a){a=e.extend({animation:"fade",animationSpeed:800,advanceSpeed:4E3,startClockOnMouseOut:true,startClockOnMouseOutAfter:3E3,directionalNav:true,captions:true,captionAnimationSpeed:800,timer:false,bullets:false},a);return this.each(function(){function m(c){function g(){f.eq(h).css({"z-index":1});s=false}var h=b,k=c;if(h==k)return false;if(!s){s=true;if(c=="next"){b++;if(b==n)b=0}else if(c=="prev"){b--;if(b<0)b=n-1}else{b=c;if(h<b)k="next";else if(h>b)k="prev"}a.bullets&& 
x();if(a.animation=="fade"){f.eq(h).css({"z-index":2});f.eq(b).css({opacity:0,"z-index":3}).animate({opacity:1},a.animationSpeed,g);a.captions&&o()}if(a.animation=="horizontal-slide"){f.eq(h).css({"z-index":2});k=="next"&&f.eq(b).css({left:t,"z-index":3}).animate({left:0},a.animationSpeed,g);k=="prev"&&f.eq(b).css({left:-t,"z-index":3}).animate({left:0},a.animationSpeed,g);a.captions&&o()}if(a.animation=="vertical-slide"){f.eq(h).css({"z-index":2});k=="prev"&&f.eq(b).css({top:u,"z-index":3}).animate({top:0}, 
a.animationSpeed,g);k=="next"&&f.eq(b).css({top:-u,"z-index":3}).animate({top:0},a.animationSpeed,g);a.captions&&o()}}}var b=0,n=0,t,u,s,d=e(this).addClass("orbit"),f=d.find("img, a img");f.each(function(){var c=e(this),g=c.width();c=c.height();d.width(g);t=d.width();d.height(c);u=d.height();n++});f.eq(b).css({"z-index":3});if(a.timer){d.append('<div class="timer"><span class="mask"><span class="rotator"></span></span><span class="pause"></span></div>');var j=e("div.timer"),p;if(j.length!=0){var C= 
a.advanceSpeed/180,v=e("div.timer span.rotator"),y=e("div.timer span.mask"),z=e("div.timer span.pause"),l=0,A,w=function(){p=true;z.removeClass("active");A=setInterval(function(){var c="rotate("+l+"deg)";l+=2;v.css({"-webkit-transform":c,"-moz-transform":c,"-o-transform":c});if(l>180){v.addClass("move");y.addClass("move")}if(l>360){v.removeClass("move");y.removeClass("move");l=0;m("next")}},C)},q=function(){p=false;clearInterval(A);z.addClass("active")};w();j.click(function(){p?q():w()});if(a.startClockOnMouseOut){var B; 
d.mouseleave(function(){B=setTimeout(function(){p||w()},a.startClockOnMouseOutAfter)});d.mouseenter(function(){clearTimeout(B)})}}}if(a.captions){d.append('<div class="caption"><span class="orbit-caption"></span></div>');var r=d.children("div.caption").children("span").addClass("orbit-caption").show(),o=function(){var c=f.eq(b).attr("rel"),g=e("#"+c).html(),h=r.height()+20;r.attr("id","#"+c).html(g);g?r.parent().stop().animate({bottom:0},a.captionAnimationSpeed):r.parent().stop().animate({bottom:-h}, 
a.captionAnimationSpeed)};o()}if(a.directionalNav){d.append('<div class="slider-nav"><span class="right">Right</span><span class="left">Left</span></div>');j=d.children("div.slider-nav").children("span.left");var D=d.children("div.slider-nav").children("span.right");j.click(function(){a.timer&&q();m("prev")});D.click(function(){a.timer&&q();m("next")})}if(a.bullets){d.append('<ul class="orbit-bullets"></ul>');var E=e("ul.orbit-bullets");for(i=0;i<n;i++){j=e("<li>"+i+"</li>");e("ul.orbit-bullets").append(j); 
j.data("index",i);j.click(function(){a.timer&&q();m(e(this).data("index"))})}var x=function(){E.children("li").removeClass("active").eq(b).addClass("active")};x()}})}})(jQuery); 
//]]> 
</script>

OBS: Na linha destacada em azul é o tempo de transição de uma imagem para a outra, ao colocar um número maior o tempo de uma imagem passar para outra é aumentado, se for mudar altere apenas o número nada mais.

Agora pressione novamente Ctrl + f e procure por : ]]></b:skin>
Logo ACIMA dele cole o código abaixo:

/* ORBIT SLIDER 
----------------------------------------------- */ 
#featured {height: 1px; width: 1px; overflow: hidden;} 
div.orbit { 
width: 1px; 
height: 1px; 
position: relative; 
overflow: hidden; 
} 
div.orbit img { 
position: absolute; 
top: 0; 
left: 0; 
} 
div.orbit a img {border: none;} 
div.timer { 
width: 40px; 
height: 40px; 
overflow: hidden; 
position: absolute; 
top: 10px; 
right:10px; 
opacity: .6; 
cursor: pointer; 
z-index: 1001; 
} 
span.rotator { 
display: block; 
width: 40px; 
height: 40px; 
position: absolute; 
top: 0; 
left: -20px; 
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVRgbWMj4lPMCtHtcvonzsgxUUk9snFrCUfGZS6ccGON-yFz890L0yB15xx929a1WXcltjm8ydTSHWC9j9vVgOTJl5L36-q0Mfach-Q7DXHoJ35r3A0i03tMRqxTkU9h8TScxYXwlic3Rp/s1600/rotator-black.png); 
background-repeat: no-repeat; 
z-index: 3; 
} 
span.mask { 
display: block; 
width: 20px; 
height: 40px; 
position: absolute; 
top: 0; 
right: 0; 
z-index: 2; 
overflow: hidden; 
} 
span.rotator.move {left: 0;} 
span.mask.move { 
width: 40px; 
left: 0; 
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2a8WmTTHF5BmkdRQGI9m6Ua8bJc0AB0A1cYuw24YsC5b3eEkfy7vKqpFl_jMUbMGUEdpyf150lgIcSj2n-87TIjS_Y2E7thtgPvpgqKy7PU1VBqILQH8MM0PYTJHgr1AM1BAKZf0XRIw2/s1600/timer-black.png); 
background-repeat: repeat; 
background-position: 0px 0px; 
} 
span.pause { 
display: block; 
width: 40px; 
height: 40px; 
position: absolute; 
top: 0; 
left: 0px; 
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxLbbkp8R50ceMNyXyuAxgzYH_JlXN93mGzdirOegICwXIcWd-MK6A1Hi46tjiHmD90QsLJpk36vauqMGmQc93ONH2fNtKBiKtb2KEb5emspiMM0RpEskBESx4dZhJASeu0dGr3AuGfz7C/s1600/pause-black.png); 
background-repeat: no-repeat; 
z-index: 4; 
opacity: 0; 
} 
div.timer:hover span.pause, 
span.pause.active, 
div.timer:hover span.pause.active { opacity: 1; } 
div.caption { 
background: #000; 
background: rgba(0,0,0,.6); 
width: 100%; 
z-index: 1000; 
position: absolute; 
bottom:-100px; 
color: #fff; 
padding: 8px 0; 
text-align: center; 
} 
div.caption span { 
padding: 0 10px; 
font-size: 14px; 
text-shadow: 0px 1px 0px rgba(0,0,0,.8); 
margin: 0; 
} 
.orbit-caption { display: none; } 
div.orbit:hover div.slider-nav { display: block; } 
div.slider-nav { display: none; } 
div.slider-nav span { 
width: 33px; 
height: 33px; 
text-indent: -9999px; 
position: absolute; 
z-index: 1000; 
top: 43%; 
cursor: pointer; 
} 
div.slider-nav span.right { 
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSIdnJy3Ikmj0qPknRWpx_dzm-qn-7YqJOCienJCFx0rUKwrpLd0kxxGOHxhfTvk8F5UkqiXp_tU3HtlKKnzo5v5uC61mvTOxisapxeXEJAHJ5MEyJTfPHf6QZZvaJPpHeZUiBo04hsYuO/s1600/right-arrow.png); 
right: 10px; 
} 
div.slider-nav span.left { 
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj18vgRGA_PJeZkwfeXjh0E2GyZZpD6_ch683W2WrKhv26Z3mgTaErFJg1NwEMSGVC7f82Jw8xR6YYIwGvzN6YaHfoFl7CwJJiC-xpnwBKkLhML9hzFt81jnjdLY4VZb34oe_sj9U7t4bnM/s1600/left-arrow.png); 
left: 10px; 
} 
.orbit-bullets { 
position: absolute; 
z-index: 1000; 
list-style: none; 
top: 10px; 
left: 7px; 
margin: 0; 
padding: 0; 
} 
.orbit-bullets li { 
float: left; 
margin-left: 5px; 
cursor: pointer; 
color: #999; 
text-indent: -9999px; 
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP-yJxE0K6uftyHtfjjUo5IPafGhQtIRadvPuDQ1caoQvSZ0OsVGV-e7Qeo0eYdnbwUnK8wpHFhUqA-nF27bC8gTgjZLdpiyNJxtV4pKFIaUWDSDj4RunKA4nrhV-QP34avsGk64n49quy/s1600/bullets.png); 
background-repeat: no-repeat; 
background-position: 0 0; 
width: 7px; 
height: 7px; 
overflow: hidden; 
} 
.orbit-bullets li.active { color: #222; background-position: -7px 0; }

PERSONALIZAÇÃO:

Para personalizar os botões basta vocês olhar casa imagens destas url presentes no código acima, caso queira tirar alguma imagens como a de carregamento é só apagar a url que se refere a ela, caso queira mudar por uma feita por você veja o tamanho que a imagem é em heigth e Width , crie sua imagem e substitua a url dela pela que está no código.

Está parte acima é o CSS do slide e você pode personalizar tudo, mas aconselho fazer isso quando o slide já estive adicionado, então NÃO altere nada ainda, visualize se tudo está ok, se estiver, clique em Salvar Modelo.

Agora direcione-se para a página Design de seu blog e adicione um novo gadget de HTML/ Javascript e neste gadget cole o código abaixo:

<div id='featured'> 
<a href="LINK_IMAGEM_1"><img rel='foto1' src="URL_IMAGEM_1" style='width:490px; height:238px;'/></a><span class='orbit-caption' id='foto1'>DESCRIÇÃO_IMAGEM_1</span>

<a href="LINK_IMAGEM_2"><img rel='foto2' src="URL_IMAGEM_2" style='width:490px; height:238px;'/></a><span class='orbit-caption' id='foto2'>DESCRIÇÃO_IMAGEM_2</span>

<a href="LINK_IMAGEM_3"><img rel='foto3' src="URL_IMAGEM_3" style='width:490px; height:238px;'/></a><span class='orbit-caption' id='foto3'>DESCRIÇÃO_IMAGEM_3</span>

<a href="LINK_IMAGEM_4"><img rel='foto4' src="URL_IMAGEM_4" style='width:490px; height:238px;'/></a><span class='orbit-caption' id='foto4'>DESCRIÇÃO_IMAGEM_4</span>

</div>

É com este código acima que o slide irá aparecer, claro depois de ter adicionado todos os outros primeiro, nas linhas em vermelho coloque os links das postagens, nas em azul o endereço/URL das imagens e nas linhas em laranja coloque a descrição das postagens de cada uma.

Procure deixar este código bem organizado para não ter erros depois.
Caso queira aumentar o tamanho do slide é só trocar os valos de height e Width e deixar todos com o mesmo valor.Antes de salvar teste colocar já algumas imagens para visualizar melhor como irá ficar, salve o gadget e o arraste para onde achar melhor, seja acima dos posts por exemplo.

Dei os créditos viu! Beijinhos fofis xauzim até!