Tutorial: Como colocar Slide no Blog

Olá queridos, beleza?

Logo no começo do blog A Mocinha Do Filme, tive muita dificuldade em escolher meu Layout e o que colocaria para deixa-lo mais fofo e agradável. Hoje trago o primeiro tuto pra vocês que estão começando a ornamentar os seus blogs. Vamos aprender como colocar um slide super meigo.

* É recomendado que antes de tudo, faça um backup do tema do seu blog por segurança, para que caso ocorra algum erro você possa restaurar o tema e dados HTML que já estavam no seu Blog

Vá em Design e em Editar HTML. Digite Ctrl+F, abrirá uma abinha de pesquisa, clique nela e pesquise </head>. ACIMA A~C~I~M~A (KKK) desta tag cole o seguinte código, este código NÃO PODE SER ALTERADO:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {

//Set Default State of each portfolio piece
 $(".paging").show();
 $(".paging a:first").addClass("active");
  
 //Get size of images, how many there are, then determin the size of the image reel.
 var imageWidth = $(".window").width();
 var imageSum = $(".image_reel img").size();
 var imageReelWidth = imageWidth * imageSum;
 
 //Adjust the image reel to its new size
 $(".image_reel").css({'width' : imageReelWidth});
 
 //Paging + Slider Function
 rotate = function(){ 
  var triggerID = $active.attr("rel") - 1; //Get number of times to slide
  var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

$(".paging a").removeClass('active'); //Remove all active class
  $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
  
  //Slider Animation
  $(".image_reel").animate({
   left: -image_reelPosition
  }, 500 );
  
 };
 
 //Rotation + Timing Event
 rotateSwitch = function(){  
  play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
   $active = $('.paging a.active').next();
   if ( $active.length === 0) { //If paging reaches the end...
    $active = $('.paging a:first'); //go back to first
   }
   rotate(); //Trigger the paging and slider function
  }, 7000); //Timer speed in milliseconds (3 seconds)
 };
 
 rotateSwitch(); //Run function on launch
 
 //On Hover
 $(".image_reel a").hover(function() {
  clearInterval(play); //Stop the rotation
 }, function() {
  rotateSwitch(); //Resume rotation
 }); 
 
 //On Click
 $(".paging a").click(function() { 
  $active = $(this); //Activate the clicked paging
  //Reset Timer
  clearInterval(play); //Stop the rotation
  rotate(); //Trigger rotation immediately
  rotateSwitch(); // Resume rotation
  return false; //Prevent browser jump to link anchor
 }); 
 
});

</script>

Depois de fazer isso, pesquise por ]]></b:skin>. Quando encontrar, cole também ACIMA o seguinte código ESSE DEVE SER ADITADO DE ACORDO COM O SEU GOSTO E TAMANHO DE LAYOUT:

.main_view {
float: left;
position: relative;
}
/*--Estilos do container das imagens--*/
.window {
height:200px; /*-- Altura do Slide (as imagens devem ter a mesma altura */
width: 550px;  /*-- Largura do Slide (as imagens devem ter a mesma largura)-- */
overflow: hidden;
position: relative;
}.image_reel {
position: absolute;
top: 0; left: 0;
}
.image_reel img {
float: left;
}
/*--Estilos do container da numeração(Não precisa mudar nada aqui)--*/
.paging {
position: absolute;
bottom: 40px;
right: -1px;
width: 220px;
height:41px;
z-index: 100;
text-align: center;
line-height: 40px;
-moz-border-radius-topleft: 15px;
-moz-border-radius-bottomleft: 15px;
-webkit-border-radius-bottomleft: 15px;
-webkit-border-radius-topleft: 15px;
display: none;
}
/*--Estilos do link da numeração (Estilo dos numeros)--*/
.paging a {
outline:none;
padding: 5px 10px;
text-decoration: none;
color: #fff;
background: #bad5d9;
-moz-border-radius: 17px;
-khtml-border-radius: 17px;
-webkit-border-radius: 17px;
}
/*--Estilos do link ativo da numeração--*/
.paging a.active {
font-weight: bold;
color: #fff;
background: #b97ac9;
-moz-border-radius: 17px;
-khtml-border-radius: 17px;
-webkit-border-radius: 17px;
}
/*--Estilos do link hover da numeração--*/
.paging a:hover {
font-weight: bold;
}.feed-links { 
 display: none; }

Agora é só criar o gadget de HTML/JavaScript e cole nele o seguinte código:

Neste último, você coloca o URL da imagem e do post ou página que preferir.

E ai? ficou tudo em ordem? ;)

Resenha do Filme: AZUL É A COR MAIS QUENTE

"La vie d'Adéle" foi lançado em 23 de Maio de 2013. Dirigido por Abdellatif Kechiche e baseado no romance "Le Bleu Est Une Couleur Chaude" de Julie Maroh. O filme é um DRAMA que conta a história da jovem Adéle hello, is't me... (Adéle Exarchopoulos) estudante que, aos 15 anos, tenta se apaixonar por um menino, mas acaba perdidamente apaixonada por uma moça de madeixas azuis com quem troca olhares uma vez na rua, até então desconhecida. Essa tal moça nada mais é que Emma, artista plástica( Léa Seydoux). A Artista encontra Adéle em um bar (gay) onde a jovem foi parar MISTERIOSAMENTE. Conversaram... e daí surgiu todo esse fire hahahaha Para viver este romance, Adéle precisa encarar todo o preconceito de amigos e família... com isso, a relação sofre muitos percalços que acompanham o amadurecimento e as frustrações da Jovem Adéle. Vejam o Trailer aqui:

ㅤㅤA Mocinha Do Filme

Pesquisar este blog

Tutorial: Como colocar Slide no Blog

Marcadores

Comentários

Postar um comentário

Postagens mais visitadas deste blog

Dicas para organizar seu casamento passo-a-passo

Resenha do Filme: AZUL É A COR MAIS QUENTE