.

quarta-feira

Slide Com Puro CSS No Blogger

ACESSOS:
AQUI


Nesta postagem compartilho com vocês este tutorial mostrando como colocar um Slide CSS com espaço para colocar várias imagens. Você pode ver o exemplo do slide aqui no blog mesmo. Já uso a bastante tempo.

O Slide é elaborado ali pelo site BLOG GERENCIADO;

A pedido de Damião Marcos ali do blog Inclusaodiferente.net estarei ensinado como coloca-lo no blogger.


Para coloca-lo no blogger... Entre em "Layout" - "Adicionar um Gadget" - "HTML/JavaScript" e cole o seguinte código

Recomendo que arraste o gadget e deixe acima das postagens, assim:



<link href='https://sites.google.com/site/bloggerenciado/-css/mega%20slide%20.css' rel='stylesheet' type='text/css'/>
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="presentation-assets/presentation-ie7.css" media="screen"/><![endif]-->
<!--[if IE]><script type="text/javascript" src="js/excanvas.compiled.js"></script><![endif]-->
<script src='https://sites.google.com/site/bloggerenciado/java-script/mega%20slide%20%20.js' type='text/javascript'/>
<script src='https://sites.google.com/site/bloggerenciado/java-script/mega%20slide%20%203%20.js' type='text/javascript'/>
<script src='https://sites.google.com/site/bloggerenciado/java-script/mega%20slide%20%202%20.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function($){
$(&#39;#responsive-slider&#39;).advancedSlider({width: 940, height: 100, responsive: true, skin: &#39;glossy-square-gray&#39;, shadow: false, effectType: &#39;swipe&#39;, slideshow: true, pauseSlideshowOnHover: true, swipeThreshold: 30, slideButtons: false, thumbnailType: &#39;scroller&#39;, thumbnailWidth: 140, thumbnailHeight: 80, thumbnailButtons: true, thumbnailSwipe: true, thumbnailScrollerResponsive: true, minimumVisibleThumbnails: 2, maximumVisibleThumbnails: 4, keyboardNavigation: true
});
});
</script>
<div class='advanced-slider' id='responsive-slider'>
<ul class='slides'>
<li class='slide'>
<img alt='' class='image' src='http://3.bp.blogspot.com/-8cZOsy_YO98/UqNGBZmBHsI/AAAAAAAABtI/65h495dhVZU/s1600/Novo+dicashot.png'/>
<img alt='Slide 1' class='thumbnail' src='http://1.bp.blogspot.com/-onfISfqQVIc/UqNE8xLDVXI/AAAAAAAABtA/z1mF9DbCBNg/s1600/Miniatura.png'/>
<div class='layer black' data-horizontal='40' data-vertical='40'>
OS FILMES MAIS ESPERADOS DE 2014
</div>
<div class='layer white' data-delay='400' data-duration='300' data-horizontal='40' data-transition='left' data-vertical='80'>
Veja 
</div>
<div class='layer black' data-delay='600' data-duration='300' data-horizontal='138' data-transition='left' data-vertical='80'>
os filmes mais
</div>
<div class='layer white' data-delay='800' data-duration='300' data-horizontal='300' data-transition='left' data-vertical='80'>
aguardados do ano que vem!
</div>
<div class='layer black' data-delay='1200' data-horizontal='40' data-offset='20' data-transition='up' data-vertical='122'>
Veja a postagem completa!!!
</div>
</li>
<li class='slide'>
<img alt='' class='image' src='http://3.bp.blogspot.com/-My97t5phP6k/UqNS6svLj0I/AAAAAAAABtk/b0f8NSye2Cs/s1600/DicasHot2.png'/>
<img alt='Slide 2' class='thumbnail' src='http://4.bp.blogspot.com/-MRGKarUODpk/UqNTgGWl4qI/AAAAAAAABts/3nnyiw3Fr8Y/s1600/Miniatua2.png'/>
<div class='layer black static' data-horizontal='center' data-vertical='30%' data-width='280'>
Aqui você vai colocar o titulo...
</div>
<div class='layer white' data-horizontal='center' data-vertical='40%' data-width='280'>
Aqui é a descrição da imagem...
</div>
</li>
<li class='slide'>
<img alt='' class='image' src='http://1.bp.blogspot.com/-Jdin-pbg5nQ/UqXfTAWZRLI/AAAAAAAABuU/veoHfaZiPhU/s1600/DicasHot+curtir+Personalizada.png'/>
<img alt='Slide 3' class='thumbnail' src='https://lh4.googleusercontent.com/-fQ1D7mgpiyA/Un2_V4NycFI/AAAAAAAACDQ/CfybHoSZdwk/w164-h90-no/Sem+T%25C3%25ADtulo-1.png'/>
<div class='layer white' data-horizontal='30' data-position='bottomLeft' data-transition='down' data-vertical='70' data-width='320'>
descrição da imagem.....
</div>
<div class='layer white' data-delay='500' data-horizontal='30' data-position='bottomLeft' data-transition='left' data-vertical='30'>
<a href='endereço do link'>tambem é possivel colocar links nos textos</a>
</div>
</li>
<li class='slide'>
<img alt='' class='image' src='http://www.handspartnership.com/wp-content/uploads/2012/12/consultancy-940x270.jpg'/>
<img alt='Slide 4' class='thumbnail' src='https://lh5.googleusercontent.com/-6Sm51JJ0WkI/Un3AwxNPVtI/AAAAAAAACDg/Fw6SqqWVwyE/w164-h90-no/Sem+T%25C3%25ADtulo-1.png'/>
<div class='layer black' data-horizontal='100' data-position='topRight' data-transition='up' data-vertical='30'>
Aqui você vai colocar o título
</div>
<div class='layer black' data-delay='150' data-horizontal='100' data-position='topRight' data-transition='up' data-vertical='70'>
<a href='http//:www.dicashot.blogspot.com'>Aqui você vai colocar um link</a>
</div>
<div class='layer white' data-delay='300' data-horizontal='100' data-position='topRight' data-transition='up' data-vertical='110' data-width='320'>
Este espaço deixamos para escrever algo sobre a imagem ou postagem que você criou..
</div>
</li>
<li class='slide'>
<img alt='' class='image' src='http://danamnelson.com/wp-content/uploads/2011/09/Cut-out-blog-letters1.jpg'/>
<img alt='Slide 5' class='thumbnail' src='https://lh5.googleusercontent.com/-RRSVELocp8Y/Un3Cvrc4LOI/AAAAAAAACDw/FMhT0kby8qY/w164-h90-no/Sem+T%25C3%25ADtulo-1.png'/>
<div class='layer black' data-horizontal='30' data-position='bottomRight' data-vertical='30'>
Fale um pouco sobre a imagem ou o post que você vai mostrar...
</div>
</li>
<li class='slide'>
<img alt='' class='image' src='http://www.fullhdwpp.com/wp-content/uploads/New-Avengers-Wolverine.png'/>
<img alt='Slide 6' class='thumbnail' src='https://lh4.googleusercontent.com/-0H4VvJgw-dY/Un3FiNRRTdI/AAAAAAAACEA/q7AS7dAekwI/w164-h90-no/Sem+T%25C3%25ADtulo-1.png'/>
<div class='layer static white' data-horizontal='10%' data-vertical='center' data-width='500'>
Após a descrição tambem é possivel colocar mais de um link no texto para direcionar o leitor para locais diferentes<a href='#'>1º link</a> <a href='#'>2º link</a>.
</div>
</li>
<li class='slide'>
<img alt='' class='image' src='http://st.gdefon.ru/wallpapers_original/73460_(www.GdeFon.ru).jpg'/>
<img alt='Slide 7' class='thumbnail' src='https://lh3.googleusercontent.com/-p0xFiBJHDJs/Un3HyttIF0I/AAAAAAAACEQ/EXMAA-pkaj0/w164-h90-no/Sem+T%25C3%25ADtulo-1.png'/>
<div class='layer white' data-horizontal='30' data-position='bottomLeft' data-transition='down' data-vertical='70' data-width='320'>
descrição da imagem.....
</div>
<div class='layer white' data-delay='500' data-horizontal='30' data-position='bottomLeft' data-transition='left' data-vertical='30'>
<a href='endereço do link'>Não esqueça de colocar um link aqui!</a>
</div>
</li>
<li class='slide'>
<img alt='' class='image' src='https://lh4.googleusercontent.com/-pZDOCsJ2uVQ/UiRRWxbczxI/AAAAAAAABFM/bV2gDMFmMd8/s1000-fcrop64=1,00000854fffffb73/Camada%2B0.jpg'/>
<img alt='Slide 8' class='thumbnail' src='https://lh3.googleusercontent.com/-xlrQgJw2hec/Un3I1oPCo2I/AAAAAAAACEg/8lYZSnb4Pz8/w164-h90-no/Sem+T%25C3%25ADtulo-1.png'/>
<div class='layer black' data-horizontal='300' data-position='bottomRight' data-transition='down' data-vertical='120'>
Troque nossa logo pela sua imagem...
</div>
<div class='layer white' data-delay='300' data-horizontal='358' data-position='bottomRight' data-vertical='80'>
Use sua criatividade
</div>
<div class='layer black' data-delay='600' data-horizontal='190' data-position='bottomRight' data-vertical='80'>
Fale sobre a imagem
</div>
<div class='layer white' data-delay='900' data-horizontal='45' data-position='bottomRight' data-vertical='80'>
Induza o leitor
</div>
<div class='layer white' data-delay='1400' data-horizontal='auto' data-position='bottomRight' data-vertical='40'>
Escreva sobre a imagem aqui neste espaço...
</div>
</li>
<li class='slide'>
<img alt='' class='image' src='http://5seleto.com.br/blog/wp-content/uploads/2013/06/i-love-blogging.jpg'/>
<img alt='Slide 9' class='thumbnail' src='https://lh5.googleusercontent.com/-MWDQ9_EJjjE/Un3K-ntoJRI/AAAAAAAACEw/uQU1n6bJtWw/w164-h90-no/Sem+T%25C3%25ADtulo-1.png'/>
<div class='layer static black' data-horizontal='50' data-vertical='50' data-width='320'>
Este espaço é para falar um pouco sobre a imagem ou post mostrado aqui ! ... 
</div>
</li>
<li class='slide'>
<img alt='' class='image' src='http://mollyblooms.files.wordpress.com/2013/03/blog-post.jpg'/>
<img alt='Slide 10' class='thumbnail' src='https://lh4.googleusercontent.com/-GnPxErm955Q/Un3OQTLCmoI/AAAAAAAACFQ/q7DB-jwgIao/w164-h90-no/Sem+T%25C3%25ADtulo-1+c%25C3%25B3pia.png'/>
<div class='layer static black' data-horizontal='50' data-vertical='50' data-width='320'>
Este espaço é para falar um pouco sobre a imagem ou post mostrado aqui ! ...
</div>
</li>
</ul>
</div>
Tendo colado o código, faça as modificações nele e pronto!!!

Cursos On-line 24 Horas - Educação a Distância de Qualidade