22 feb. 2013

Script Mangas Online Blogger

-- Nueva Actualización Del Script Manga Online V2 --
 
Muchos se preguntan cual es el script para poner mangas online en su blog, por ello haré este tutorial donde explicare paso a paso de como insertar este script en tu blog.



1. Primero vamos insertar este código después de la etiqueta </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>

<script src='http://s1.manganimeland.com/files/js/jquerypack2.js' type='text/javascript'></script>

<script> // actual = 0 function a() { if (document.formulario.imagen[actual+1]) { document.images.visor.src = document.formulario.imagen[actual+1].value document.formulario.imagen.selectedIndex = ++actual } else b() } function c() { if (actual-1 >= 0) { document.images.visor.src = document.formulario.imagen[actual-1].value document.formulario.imagen.selectedIndex = --actual } } function b() { actual = 0 document.images.visor.src = document.formulario.imagen[0].value document.formulario.imagen.selectedIndex = 0 } function d() { actual = document.formulario.imagen.selectedIndex document.images.visor.src = document.formulario.imagen[actual].value } </script> <script type='text/javascript'> // We only want these styles applied when javascript is enabled $('div.navigation').css({'width' : '300px', 'float' : 'left'}); $('div.content').css('display', 'block'); // Initially set opacity on thumbs and add // additional styling for hover effect on thumbs var onMouseOutOpacity = 0.67; $('#thumbs ul.thumbs li').css('opacity', onMouseOutOpacity) .hover( function () { $(this).not('.selected').fadeTo('fast', 1.0); }, function () { $(this).not('.selected').fadeTo('fast', onMouseOutOpacity); } ); $(document).ready(function() { // Initialize Advanced Galleriffic Gallery var galleryAdv = $('#gallery').galleriffic('#thumbs', { delay: 2000, numThumbs: 1, preloadAhead: 10, enableTopPager: true, enableBottomPager: true, imageContainerSel: '#slideshow', controlsContainerSel: '#controls', captionContainerSel: '#caption', loadingContainerSel: '#loading', enableHistory: true, autoStart: false, onPageTransitionIn: function() { $('#thumbs ul.thumbs').fadeIn('fast'); } }); }); </script>

<script type='text/javascript'> var myflowers=new ddajaxtabs("flowertabs", "flowerdivcontainer") myflowers.setpersist(true) myflowers.setselectedClassTarget("link") //"link" or "linkparent" myflowers.init() </script>

<script src='http://s1.manganimeland.com/files/js/jquery.js' type='text/javascript'></script>

<script src='http://s1.manganimeland.com/files/js/banner00.js' type='text/javascript'></script>

<script language='javascript' src='http://s1.manganimeland.com/files/js/jquery01.js' type='text/javascript'></script>


2. Como segundo paso vamos a insertar el codigo Css, para darle forma y estilo.


margin:0; color:#fff; font:x-small Georgia Serif; font-size/* */:/**/small; font-size: /**/small; text-align: center; }

a img { border-width:0; }

.toolbar-breadcrums {position: absolute;top:4px;left:60px;}

div.controls { background:#fff; margin-bottom:10px; font: normal normal 100% Verdana, sans-serif; color: #fff; }

div.controls a { color: #fff; background: #6E6E6E; margin-right: 2px; padding: 4px 7px 2px 7px; border: 1px solid #1C1C1C; }

div.controls a:hover { color: #fff; background-color:#A4A4A4 ; text-decoration: none; }

div.ss-controls { background:#fff; }

div.nav-controls { background:#fff; }

div.loader { background-image: url('http://s1.manganimeland.com/files/images/loading3.gif'); background-repeat: no-repeat; background-position: center; width: 550px; height: 350px; }

#thumbs { display:none; }

ul.thumbs { clear: both; margin: 0; padding: 0; }

ul.thumbs li { float: left; padding: 0; margin: 5px 10px 5px 0; list-style: none; }

a.thumb { padding: 2px; display: block; border: 1px solid #ccc; }

ul.thumbs li.selected a.thumb { background: #fff ; }

a.thumb:focus { outline: none; } ul.thumbs img { border: none; display: block; } div.caption { background-color: #000; padding: 12px; color: #fff; } div.caption a { color: #fff; }

3. Como ultimo añadiremos el código html en un entrada.
<div style='padding:2px; border:2px solid #ffd57c; background:#ffffcc; font-weight:normal'>

<center><div style="color: black;"><b>Tip: Haz clic en la imagen del manga para pasar a la próxima página. También puedes usar los Botones (Pagina anterior/siguiente).</b></div></center></div><center> <div class="content"

id="gallery"><div class="controls" id="controls"></div></div><div class="slideshow"

id="slideshow"></div><div class="loader" id="loading"></div><div class="navigation"

id="thumbs"><ul class="thumbs noscript">

<li><a class="thumb" href="http://manga.mcanime.net/manga/6872/2346/168636/1.jpg"></a></li>

<li><a class="thumb" href="http://manga.mcanime.net/manga/6872/2346/168636/2.jpg"></a></li>

</ul></div></center>


Con esto tendras listo tu blog para publicar mangas online en blogger.

17 comentarios :

  1. Amigo, te pregunto una cosa, ¡Porque no me funciona? hice una prueba y no me funciona correctamente, no me muestra las imagenes ni nada, es decir no me muestra los botones de pagina siguiente o anterior ni las imagenes ¡Que hago? ya reemplac{e de hsting los scripts pero no só que mas hacer.

    Gracias por el aporte

    ResponderEliminar
  2. grax por el aporte pero keria ver si puedes explicarlo un poko mas x favor

    ResponderEliminar
  3. Ya que tenga un poco mas de tiempo con gusto explicare mejor el proceso ;;)

    ResponderEliminar
  4. porfa explicate mejor no entendi donde debo pegar esos codigos los pegue ..en gatges html javascrip pero no sirve

    ResponderEliminar
  5. ya lo hice gracias por la informacion...me gustaria saber los botones de siguiente y atras como los ubico gracias

    ResponderEliminar
  6. Respuestas
    1. mira... a mi tambien me costo recordar donde habia visto eso CSS...
      te vas a ir a:
      Plantilla/Personalizar/Avanzado/ (de donde te salen las opciones para modificar el texto y todo eso del blog hasta hbajo dice "Añadir CSS" y ahi lo pegas...
      Visita mi Manga de 3x3 Eyes Traducido al Español...
      http://3x3eyes-manga-enespanol-mexico.blogspot.mx/p/descripcion.html

      Eliminar
  7. si sirvio el code pero para jale rapido ay que subir los escriks a tu servidos yo los puse en dropbox :)

    ResponderEliminar
  8. No se me ve ami en mi blog y hice esos procedimientos

    ResponderEliminar
  9. Hola, ami me funciona el problema es q no carga las imágenes que hago??
    HELP ME!! aquí te dejo una prueba de un blog ( http://123prueba2014.blogspot.mx/ ) (que estoy haciendo mal)... te lo agradecería mucho:).

    ResponderEliminar
  10. no cargan la imagenes ni los controles. para mi que este visor no funciona bien.

    ResponderEliminar
  11. El script funciona pero cuando ponemos una img que publicamos la entrada no carga la imagen, ni los controles por lo menos haz un video de como poner eso o sino actualiza el Script

    ResponderEliminar
  12. Si quieren pueden revisar esta plantilla y de ahi sacar los codigos : http://thelariosblogger.blogspot.mx/2014/09/mangascan-blogger-templates-mangas.html

    ResponderEliminar
    Respuestas
    1. Haz otra entrada pero con los codigos de la plantilla Mangascan y listo, No crees que asi es mejor amigo.

      Eliminar
  13. Hice todo lo que decía, pero no me fusiona... hice la prueba con unas imágenes de la nube...
    No carga nada solo "Tip: haz..." y no las imágenes ni los controles... también hace que todo el Blog se retraca mucho

    ResponderEliminar