PASOS PARA INSERTAR IMÁGENES TIPO JQUERY EN EL BLOGS
1. Crear una nueva entrada con el Titulo de nombre IMÁGENES
2. Escriba como comentario texto relacionado a las imágenes en uso
3. Luego publicar la entrada (un clic BIM en el botón Publicar) 4. Hacer un clic BIM en la opción Diseño
5. Hacer un clic BIM en añadir un gadget ya sea en la parte inferior o derecha de la ventana
6. En al siguiente ventana seleccione la opciรณn HTML/Javascript
7. En al siguiente ventana copie la siguiente informaciรณn <!-- SLIDER CSS converted by ayudadeblogger.com --> <style type="text/css"> /* * jQuery FlexSlider v2.2.0 * http://www.woothemes.com/flexslider/ * * Copyright 2014 WooThemes * Free to use under the GPLv2 license. * http://www.gnu.org/licenses/gpl-2.0.html * * Contributing author: Tyler Smith (@mbmufffin) */ /* Browser Resets *********************************/ .flex-container a:active,
.flexslider a:active, .flex-container a:focus, .flexslider a:focus {outline: none;} .slides, .flex-control-nav, .flex-direction-nav {margin: 0; padding: 0; list-style: none;} /* FlexSlider Necessary Styles *********************************/ .flexslider li { border: 0 none !important; padding: 0 !important; text-indent: 0 !important; } .flexslider {margin: 0; padding: 0;} .flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */ .flexslider .slides img {width: 100%; display: block;} .flex-pauseplay span {text-transform: capitalize;} /* Clearfix for the .slides element by grupodelecluse.com*/ .slides:after {content: "\0020"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} html[xmlns] .slides {display: block;} * html .slides {height: 1%;} /* No JavaScript Fallback */ /* If you are not using another script, such as Modernizr, make sure you * include js that eliminates this class on page load */ .no-js .slides > li:first-child {display: block;} /* FlexSlider Default Theme*****/ .flexslider { margin: 0 0 60px; background: #fff; border: 4px solid #fff; position: relative; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); -o-box-shadow: 0 1px 4px rgba(0,0,0,.2); box-shadow: 0 1px 4px rgba(0,0,0,.2); zoom: 1; } .flex-viewport { max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } .loading .flex-viewport { max-height: 300px; } .flexslider .slides { zoom: 1; } .carousel li { margin-right: 5px; } /* Direction Nav */ .flex-direction-nav {*height: 0;} .flex-direction-nav a { text-decoration:none; display: block; width: 40px; height: 45px; margin: -20px 0 0; position: absolute; top: 50%; z-index: 10; overflow: hidden; opacity: 0; cursor: pointer; color: rgba(0,0,0,0.8); text-shadow: 1px 1px 0 rgba(255,255,255,0.3); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease; }
.flex-direction-nav .flex-prev { background: url("http://project.dimpost.com/flexsliderbasic/img/arrows1.png") no-repeat scroll -15px -92px transparent; left: -50px; } .flex-direction-nav .flex-next { background: url("http://project.dimpost.com/flexsliderbasic/img/arrows1.png") no-repeat scroll -15px -15px transparent; right: -50px; text-align: right; } .flexslider:hover .flex-prev { opacity: 0.5; left: 10px; } .flexslider:hover .flex-next { opacity: 0.5; right: 10px; } .flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover { opacity: 0.9; } /* Pause/Play */ .flex-pauseplay a { display: block; width: 20px; height: 20px; position: absolute; bottom: 5px; left: 10px; opacity: 0.8; z-index: 10; overflow: hidden; cursor: pointer; color: #000; } .flex-pauseplay a:before { font-family: "flexslider-icon"; font-size: 20px; display: inlineblock; content: '\f004'; } .flex-pauseplay a:hover { opacity: 1; } .flex-pauseplay a.flex-play:before { content: '\f003'; } /* Control Nav */ .flex-control-nav {width: 100%; position: absolute; bottom: -40px; text-align: center;} .flex-control-nav li {margin: 0 6px; display: inline-block; zoom: 1; *display: inline;} .flex-control-paging li a {width: 11px; height: 11px; display: block; background: #666; background: rgba(0,0,0,0.5); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; -webkit-boxshadow: inset 0 0 3px rgba(0,0,0,0.3); -moz-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); -obox-shadow: inset 0 0 3px rgba(0,0,0,0.3); box-shadow: inset 0 0 3px rgba(0,0,0,0.3); } .flex-control-paging li a:hover { background: #333; background: rgba(0,0,0,0.7); } .flex-control-paging li a.flex-active { background: #000; background: rgba(0,0,0,0.9); cursor: default; } .flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;} .flex-control-thumbs li {width: 25%; float: left; margin: 0;} .flex-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer;} .flex-control-thumbs img:hover {opacity: 1;} .flex-control-thumbs .flex-active {opacity: 1; cursor: default;} @media screen and (max-width: 860px) { .flex-direction-nav .flex-prev { opacity: 1; left: 10px;} .flex-direction-nav .flex-next { opacity: 1; right: 10px;} } </style> <!-- SLIDER HTML --> <div id="flex-isfb"> <!-- Preloader --> <div id="preloader"></div> <style> /* Preloader */ #preloader { position: absolute; top:0; left:0;
right:0; bottom:0; background-color:#fff; /* change if the mask should have another color then white */
z-index:999999999999; /* makes sure it stays on top */ } </style> <div class="flexslider"> <ul class="slides"> <li> <img src=" www.taringa.net โ บ Imรกgenes" /> </li> <li> <img src=" https://www.youtube.com/watch?v=5UmFIcqYO9w" /> </li> <li> <img src=" https://www.youtube.com/watch?v=pjNse15MDbY" /> </li> <li> <img src=" www.ecologiaverde.com/fotos-de-paisajes-naturales/" /> </li> <li> <img src=" imagenesbonitas.bosquedefantasias.com/imagenes-paisajes " /> </li> </ul> </div> </div>
<!-- SLIDER JS --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src="http://yourjavascript.com/1123117413/ayudadeblogger-jquery-flexslidermin.js"></script> <script type="text/javascript"> $(window).load(function(){ $('.flexslider').flexslider({ animation: "slide", controlNav: true, directionNav: true, easing: "swing", slideshowSpeed: 3000, animationSpeed: 600, }); }); //<![CDATA[ $(window).load(function() { $('#preloader').delay(350).fadeOut('slow'); }) //]]> </script>
8. Proceda a modificar los textos que están de color rojo, estos representan la ubicación de las imágenes dispuestas en internet, estas imágenes se utilizaron para hacer el jquery. 9. Luego de finalizar la configuración hacer un clic BIM en Guardar y Publicar
COMO OBTENER LA DIRECCIÓN DE UNA IMAGENE DE INTERNET a) Ubicar la imagen en internet
b) Ubicar el puntero sobre la imagen
c) Hacer un clic BDM (botón derecho del mouse) d) Hacer un clic BIM en Copiar dirección de la imagen e) Pegar entre las comillas del texto insertado
Reemplazar este contenido con la direcciรณn de la imagen