Carregando atualizações...

X

Slide Com Puro CSS No Blogger


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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh955zNU9ipeLDnl_LA6JAVHLGI7iM91OspKjtPl8ikxjerj8Sz3dXsMn2S1KhSvNGfrrOvRJ9-5raaqAxzSY5W43IWLW6xeVAkqxVZqth5oL0EYPmiWezA4r7c7h0KquEoIdvcQZp2wMk/s1600/Novo+dicashot.png'/>
<img alt='Slide 1' class='thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPLGjb-VESFutgAiTMzC5BiFRek8wUiCgOEn7miVGV-wZ0Z9Va-wo8qumyQCkSXVgdZKzKvG4KFWNDasTlLgSHvFwBXB0zZ_Q1VM7rNPRivTXlhyhWlJ65HLKX__8cxsTvSpHS42mWM0c/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYcDQM8JoBFKE35KcUJID4cpD9oWm-z7sXJlcdWfeGib-akG93_QzB8SzN1U9zWV4iZX_nlzIUGeVDppns764K5xZg6Q-NmOSN1Dx5X_Qscn56XjdpQvQ4wNBxphnbpyHkl26KQLF_IM8/s1600/DicasHot2.png'/>
<img alt='Slide 2' class='thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMmcx-BGcaMzAtzmxdZ4sZ8EHzmyLtA0ktMZ0fhxtoJYnXW2z4HNcdp70V3KWS3UOuVxsrDza0ZJ92Kdu-2wDeSK63FXR-y2OYlw0aIUoFBd6XQmJDD5jduDbQxap_JYH-qG6l8ma3BK4/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmnPYEqKL8Eq7DvpxkdjB5pBRiNs_3bEeorNqGcbnk2eifOtjNP1gopzy_ruxpo4A9_24tnQsYEmIuDKiByu-81_HyDf44OLd0lxzVFfRg8oZraOZ0UF_lMawsuCowfkjq28SI0bL_kc4/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2YUo4tf0WtBKMTF4X8rCzaWjhjYzk9zkFI0ynC19oTa9yDoQU6Dl5veaALSWCnxQqwOaEZQIl_MRi50J-WVpju7LWej1aymdjjojXwqHCtJaKuey1l3dsK1L3R15aOebAOrZu6nz1gY0/,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

NOSSO CANAL
VER TV A CABO ONLINE GRÁTIS
TV ONLINE 1.0