Script Mangas Online Blogger

 

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.