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/AVvXsEjuhjc7QtuXumOGvRWYaxfI93xTS53sM89IDUfPBTYS2LfMLpTULRV0nYhmpFMhm04OD1Q2fZBibyK6rU96-kKyIYgr3cPPKpqBVIEBCmgp_HVXG8kIe6yxr5mD_e5f2K1Clyyj_dGdeKs/s1600/Novo+dicashot.png'/><img alt='Slide 1' class='thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzkPA1F4YVsCe5PqcJLot-f0uOzZYhppDCy7XjS7j_XA_VoOpKe0NatZEvjcfV2zyCkaUHvieXB8luHQjbdOLR44s6-IkKszrROXBwK5Euojuq_QiT-xmBFpOXPt0lMmCnaoQopWLEFrg/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/AVvXsEgAW9R0bkM5X_jLqY2jYkKVErdGo-pkiK4GMG0RcP5BqZbug-y9bE99jU5XytHeChPkjhzGkU75ihAs7erocScucCJl1-QWVvYPU-iEyaNI9pK74ZRpdPBNWsMy3EeYsMxlaOW2sjbFsaY/s1600/DicasHot2.png'/><img alt='Slide 2' class='thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgr65LbXvMRxowvVDi1sJZ_OsL2FZMgrRvJXfMUj7OHv3ZP0KoEbdZzuHoKsG7KvC4vhe25w4p2enXzY4LP9uVcXDmU5Gp7aj6mjFh1w_TbsHX1plS6tPpY-n2IQkS2LO3peKgCRYhqZsY/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/AVvXsEgYb8JefaNr_BfbsZKA_yg2asTMHAnh4DJRCYEs-sdBSyNxXhRKFm2l-ueFd0n1danEMt_eBQ71_8LQp71fU4ffqAooc9Otp5e1g5N8ejJa9Qj9h4O4fjo5P52RC8BiZDauSmjgHodZpXQ/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>
Nenhum comentário:
Postar um comentário