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:
Recomendo que arraste o gadget e deixe acima das postagens, assim:
Tendo colado o código, faça as modificações nele e pronto!!!<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($){$('#responsive-slider').advancedSlider({width: 940, height: 100, responsive: true, skin: 'glossy-square-gray', shadow: false, effectType: 'swipe', slideshow: true, pauseSlideshowOnHover: true, swipeThreshold: 30, slideButtons: false, thumbnailType: 'scroller', 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://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>
