Tutorial Slide no Blog


 Olá pessoas, nossa, estou muito empolgado para fazer meu outro blog, tenho tudo na mente já, as cores, tudinho tudinho, acreditam que eu já até decidi o nome dele? Entusiasmo total, não acham? Acho que amanha ou hoje mesmo eu começo a fazer o Layout dele, provavelmente ele sai daqui alguns dias (não sei ao certo, pois criar um blog, leva dias, muito trabalho, e eu preciso pensar mais, com calma, não concordam comigo?) Mais uma coisa eu posso dar certeza á vocês, ele será 100% Pessoal, terá coisa do meu dia a dia, por isso irei estar com o eJhonas e o (Não vou dizer o nominho, não, tá?). Então, eu vi alguns tutoriais muito interessantes nos outros blog's, decidi postar alguns mais é claro, eu tive que testar antes, alguns não deram certo, já outros deram, o que eu irei mostrar á vocês HOJE é um bem simplesinho mais que faz a diferença.. Ele é super simples, agora vamos começar..
 Vá no Blogger  Design  Editar HTML  Expandir Modelo de Widgets  Ctrl + F (Procure por:)
</head>
Logo acima esta tag, cole este código:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'/>
<script src='http://static.tumblr.com/ifqwhnb/GBsm20q7d/jquery.nivo.slider.pack.js' type='text/javascript'/>
<script type='text/javascript'>
var $nv4wp = jQuery.noConflict();
$nv4wp(window).load(function() {
$nv4wp(&#39;#slider&#39;).nivoSlider({
effect:&#39;random&#39;,
slices:15, // For slice animations
boxCols: 4, // For box animations
boxRows: 2, // For box animations
animSpeed:500, // Slide transition speed
pauseTime:3000, // How long each slide will show
startSlide:0, // Set starting Slide (0 index)
directionNav:true, //Next and Prev
directionNavHide:true, //Only show on hover
controlNav:true, // 1,2,3... navigation
controlNavThumbs:false, // Use thumbnails for Control Nav
controlNavThumbsFromRel:false, // Use image rel for thumbs
controlNavThumbsSearch: &#39;.jpg&#39;, // Replace this with...
controlNavThumbsReplace: &#39;_thumb.jpg&#39;, // ...this in thumb Image src
keyboardNav:true, //Use left and right arrows
pauseOnHover:true, //Stop animation while hovering
manualAdvance:false, //Force manual transitions
captionOpacity:0.8, //Universal caption opacity
prevText: &#39;Prev&#39;, // Prev directionNav text
nextText: &#39;Next&#39;, // Next directionNav text
beforeChange: function(){}, // Triggers before a slide transition
afterChange: function(){}, // Triggers after a slide transition
slideshowEnd: function(){}, // Triggers after all slides have been shown
lastSlide: function(){}, // Triggers when last slide is shown
afterLoad: function(){} // Triggers when slider has loaded
});
});
</script> 
Agora procure por:
]]></b:skin>
Acima desta tag, cole este código:
/* The Nivo Slider styles */
#slider {position:relative;}
#slider img {position:absolute; top:0px; left:0px;
display:none;}
#slider a {border:0; display:block;}
.nivoSlider {position:relative; width: 356px;}
.nivoSlider img {position:absolute; top:0px; left:0px;}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {position:absolute; top:0px;
left:0px; width:100%; height:100%; border:0;
padding:0;margin:0; z-index:6; display:none;}
/* The slices and boxes in the Slider */
.nivo-slice
{display:block;position:absolute;z-index:5;height:100%;}
.nivo-box {display:block;position:absolute;z-index:5;}
/* Caption styles */
.nivo-caption {position:absolute;left:0px; bottom:0px;
background:#000; color:#fff; text-transform: uppercase; width: 100%;
z-index:50; border-right: 5px solid #;padding: 5px 0;}
.nivo-caption p {padding:0 20px;margin:0;font-size:14px;}
.nivo-caption a {display:inline !important;}
.nivo-html-caption {display:none;}
.nivo-directionNav a
{position:absolute;top:45%;z-index:99;cursor:pointer;}
.nivo-prevNav {left:0px;}
.nivo-nextNav {right:0px;}
/*============================*/
/*=== Custom Slider Styles ===*/
/*============================*/
.slider {width:100%;}
.slider img
{position:absolute;top:0px;left:0px;display:none;}
.slider a {border:0;display:block;}
.nivo-controlNav {display:none;}
.nivo-directionNav a
{display:block;width:31px;height:34px;background:url(http://twizonebr.com/Novidades/wp-content/themes/twizonebrvrs1/arrowswleft.png)
no-repeat;text-indent:-9999px;border:0;
}
a.nivo-nextNav {background-position:-30px 0;right:15px;}
a.nivo-prevNav { left:15px;}
.nivo-caption {font-family:"Trebuchet MS", Arial,
Helvetica, sans-serif;}
.nivo-caption a {color:#efe9d1; text-decoration:underline;}
Salve e Feche! Para poder concluir tudo, logo após ter fechado, entre na parte de Layout  Adicionar Gadgets  HTML/Javascript  Cole este código:
<div id="slide"><div
id="slider">
<a href="Link" target="_blank"><img src="Link da imagem"
width="763" height="277" /></a>
<a href="Link" target="_blank"><img src="Link da imagem "
width="763" height="277" /></a>
<a href="Link" target="_blank"><img src="Link da imagem "
title="Descrição"width="763"
height="277" /></a>
</div></div>
Entendendo um pouquinho mais:
Onde está Link, você deverá colocar o endereço para onde será redirecionado ao clica-lo, já na parte Link da imagem você deverá colocar o endereço da imagem que você quer que apareça no blog (Em forma de Slide), Espero ter ajudado vocês, eu aprendi esse tutorial em diversos lugares, mais especificamente esse, eu peguei do WHH!
Não poderia me esquecer de avisar vocês né, o eJhonas está tendo o seu primeiro Concurso valendo um domínio .com (Perfeito, não acham?), Caso queira participar basta clicar aqui.

Um comentário:

  1. Nossa adorei e estou esperando pelo blog novo *u*. O tuto é simples mesmo ^^, adorei ele!

    jovenclube(.blogspot.com.br)

    ResponderExcluir

© eJhonas - 2012. Todos os direitos reservados.
Design Jhonas Balsas.
Tecnologia do Blogger.
imagem-logo