Slider de imagens com efeitos em jQuery

Bom galera, hoje  vou mostrar como colocar um slidershow em cima dos arquivos aqui no blogger, estou devendo este artigo  só que o tempo é muito corrido pra mim por isso demorei um pouco, vamos lá, é um slider de imagens e tem efeitos Jquery, e tem também um controle no canto superior esquerdo que mostra qual imagem está mostrando no momento e com botão de pausa no canto direito.

Vamos ao Tutorial: 

OBS: Recomendamos que faça um backup antes de mexer no código do seu template, caso ocorra algum erro terá como recuperá-lo evitando qualquer transtorno no final. 

1º - Depois clique em na Caixa Expandir Modelos de Widgets.
2º - aperte as Teclas CTRL+F e procure por: </head>  e cole antes o seguinte código.

<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>

 3º- Agora procure por ]]></b:skin> antes cole o seguinte código,

/* 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/AVvXsEjngHfH0xOgf_CcITcQuCCXaLxOEkZdb7nDBPSZgeF3aGN-dDbNs5AdBDQbrZ1OzVfBsqYwvYHBcbeprhsZ_4bNVctBR21fqTxJSBYBpTNhqaOAvVI5t9mKbdIcNbNP0zuRSUaPBC4ohm86/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/AVvXsEgj9LeVfnF5d2oR0A-WRQHP9q_37nPTQpV307-bSaLuROsxohiGA4q64hwQnTI5OVc_S05AtJgkWCdoZiVotwe4FzdaeaQ4hQhKlTkWbzKBm2ABYU7h0xYZPAkBthzjqAsfoCMAPYODDjrG/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/AVvXsEgW9Kli4i4chfgHMfUVUY5jA51jVwDn-IDrwEeJH6sjKHQ3A2eS_JhF1wy0U_X6WE1GsIMrKBx-pY6zR_Fl7YTphwEQRerPyr_-lFqsR5W6_NSCyiJeyIL27BYF313sjHBKFB004xromUX9/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/AVvXsEj7PZrXpIkICVAkomLRBua8o8leq7q3TYHHql3Q-QSZzr1LKrelSMbH-YooJz5Ruyg3hlSEm1R-6MLwoLigTTP0jONBrCM8X4d7t-HOQxbOVNRMjKw0EAYFoOHFMouBQ9921At26pY-1_ch/s1600/right-arrow.png);
right: 10px;
}
div.slider-nav span.left {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZHBncxT4SANwJd4R21rqe7OW1IPTLrxf6xwUwOQZ6dJaWf7wSrvTc6pipZW2UF4XAJKTHMTxMGIvHNsO4fjSJL5RkADQGiUNIpHYFBEyMG7ifmmiN5EnDB6W5exsGjvdrHC8M4PTUFeuY/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/AVvXsEj_qdn3wsS_hI8LulKeYKxf6FUrvlRGVVBLUjkUKX9zWBiqEd0ldOBqJ283UHER_7f5s7_e7ASAdqFSaZxv-yd-l152A3UiqnemRZgGXttN_XY5cQhKJc_ozq1b8JgouKXArYwhxFhSSzRR/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; }

Va  Layout →Adicionar um Gadgat→ HTml/Javascript e cole o seguinte código.

 <div id='featured'>

<a href='URL do artigo'><img rel='foto1' src="URL da imagen" style='width:490px; height:238px;'/></a>
<span class='orbit-caption' id='foto1'>descrição do artigo.</span>

<a href="URL do artigo"><img rel='foto2' src="URL da imagen" style='width:490px; height:238px;'/></a>
<span class='orbit-caption' id='foto2'>Este é um exemplo da descrição do artigo: <a href='URL do artigo' style='color: #fff';'>Tecno Blogger</a></span>

<a href="URL do artigo"><img rel='foto3' src="URL da  imagen" style='width:490px; height:238px;'/></a>
<span class='orbit-caption' id='foto3' style='text-align:center;'>Descrição do artigo.</span>

<a href='URL do artigo'><img rel='foto4' src="URL da imagen" style='width:490px; height:238px;'/></a>
<span class='orbit-caption' id='foto4'>Este é um exemplo da descrição do artigo: <a href='URL do artigo' style='color: #fff';'>Tecno Blogger</a></span>

</div>

 Para configurar o tamanho basta substituir o numero em azul pelo tamanho que deseja width:490px; height:238px pelo tamanho que deseja

Salve e pronto,
 

Caixa de pesquisa estilo google

Olá galera hoje vou ensinar colocar uma caixa de pesquisa, é muito importante para que o leitor possa achar com mais facilidades o artigo que deseja, além de deixar mais elegante seu blog, barra de pesquisa tem um visual mais moderno e minimalista, com cantos arredondado com efeitos jquery com o mesmo estilo da caixa da Google o maior site de busca do mundo.

Antes do tutorial peço ajuda ao blog que é novo e toda ajuda são bem vindo, seja como divulgação comentário, curtidas no facebook, troca de banner e etc... de qualquer jeito retribuiremos ajuda dada.

Vamos ao tutorial:

1º- Clique em Editar HTML e expandir modelos de widgets.

2º- Aperte Ctrl + F e procure por ]]></b:skin>

E cole o código abaixo antes.

/*Start Css For Google Style Search Box*/

/* div container containing the form */
#searchContainer {
margin:20px;
}

/* Style the search input field. */
#field {
float:left;

width:200px;

 3º- em seguida procure por </head> e cole antes o código abaixo.

<script src='http://code.jquery.com/jquery-1.6.1.min.js' type='text/javascript'/>

<script type='text/javascript'>
$().ready(function() {
// if text input field value is not empty show the &quot;X&quot; button
$(&quot;#field&quot;).keyup(function() {
$(&quot;#x&quot;).fadeIn();
if ($.trim($(&quot;#field&quot;).val()) == &quot;&quot;) {
$(&quot;#x&quot;).fadeOut();
}
});
// on click of &quot;X&quot;, delete input field value and hide &quot;X&quot;
$(&quot;#x&quot;).click(function() {
$(&quot;#field&quot;).val(&quot;&quot;);
$(this).hide();
});
});
</script>

 Salve seu template agora vamos colocar o Html/Javascript

4º- Vá em layout >>  adicionar widget >> HTML/javaScript e cole o código abaixo onde deseja que apareça a caixa.

<div id="searchContainer">
<form name="SUYB" action="/search" method="get">
<input type="text" id="field" id="s" name="q"/>
<div id="delete"><span id="x">x</span></div>
<input type="submit" name="submit" id="submit" value="Search" />
</form>
</div>

Para ajustar a largura procure width:200px; no 2º passo e substitua o 200 pelo tamanho que deseja.

 Agora só salvar