Só 72 Bundas
Só 72 Bundas
(+18)
AS BARATINHAS #39
AS BARATINHAS #39...
...Conteúdo (+18)
superentretenimento
Cabeça, ombro,
joelho e pernas
Buião
37 decotes que vão deixar a
sua semana melhor



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='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
Slide Com Puro CSS No Blogger Slide Com Puro CSS No Blogger Reviewed by Muca on 12/11/2013 08:56:00 AM Rating: 5

Baixe o seu e-book com mais de 1,200 mágicas para fazer com seus amigos | "Download"