Agregar publicidad de AdSense a feeds RSS

Por xploit29 En: Tutoriales 1 Comentario »

Las formas de recibir las actualizaciones del contenido de los sitios web cambian, y la aparición de los feeds RSS quizás para algunos significa la disminución de la cantidad de visitas directas la cuál tiene sus ventajas y desventajas; y el que se muestre publicidad no debe ser una desventaja así que aprenderemos a mostrar publicidad de AdSense en nuestros feeds RSS.

Antes de iniciar es necesario tener una cuenta en Google AdSense, así que si no la tienes aún consigue una.

Ya dentro de nuestra cuenta, nos dirigimos a “Configuración de AdSense” y escogemos “Sindicación para feeds RSS” tal y como se muestra en la siguiente imagen:
Luego tendremos tres alternativas: agregar nuestro feed, migrar nuestros feeds de Feedburner a Google (pues Google adquirió a Feedburner) o añadir los blog que ya aparecen en lista, en este caso se insertará publicidad a un nuevo feed RSS
Luego de hacer clic en el botón de “Crear feed nuevo” se muestra un recuadro en el cual se deberá ingresar el link RSS del sitio que deseamos añadir:
Modificamos y verificamos algunos datos adicionales, como el idioma del feed:
Luego al hacer clic en el botón se nos mostrará un recuadro en que se nos indica que el feed ha sido añadido correctamente, luego de que se muestre ese recuadro es necesario que recarguemos la página para que se muestre el feed añadido:
El siguiente paso será añadir el(los) feed(s) a la lista de feed en los cuáles se desea que se muestre la publicidad de Google AdSense:
Guardamos los cambios hechos y listo, finalmente podrán aparecer publicidad en tu feed de RSS.

Si tienes alguna pregunta o comentario respecto a este tutorial no dudes en dejar tu comentario.

29 Noviembre, 2008
Etiquetas: AdSense, Dinero, Feed, Ganar, Google, Internet, Monetizar, Plata, Publicidad, RSS, Sindicacion, Tutorial

Cómo utilizar teclados multimedia con iTunes

Por pinwin0 En: Trucos, Tutoriales 2 Comentarios »

Si posees un teclado multimedia para tu desktop, o tu laptop tiene teclas multimedia incorporadas, y además utilizas iTunes para manejar tu biblioteca musical, te habrás dado cuenta de que las teclas multimedia no funcionan a menos que iTunes sea la aplicación seleccionada.

Esto se soluciona de una manera muy sencilla, tan solamente hace falta descargar éste archivo y descomprimirlo. Cierra iTunes si está en ejecución, acto seguido, deberás ir a la siguiente dirección C:\Users\your_username\AppData\Roaming\AppleComputer\iTunes\iTunes Plug-ins (reemplazar username por el nombre de usuario. Ej: C:\Users\Estrella\AppData ) en caso de usar Windows Vista y C:\Program Files\iTunes\Plug-ins si usas Windows XP, para pegar el archivo en esa dirección. Toma en cuenta que en caso de usar Windows Vista, AppData es una carpeta oculta por defecto, por lo que tendrás que copiar y pegar la dirección.

Ahora sí, al abrir iTunes podrás acceder a las funciones que te proporcionan las teclas multimedia sin importar cual sea la aplicacion principal.

21 Noviembre, 2008
Etiquetas: iTunes, Música, teclado, teclado multimedia, teclas, Windows

Crear tabs para cualquier sitio con jQuery (Parte II)

Por xploit29 En: Tutoriales 1 Comentario »

Continuando con este tutorial para incorporar “TABS” o pestañas a nuestro sitio web, ahora vamos a aprender a incorporarlos a WordPress, que pasos debemos seguir y que hay que tener en cuenta. Antes de comenzar es necesario que revisen el primer tutorial de esta serie para que tengan una idea de lo que me refiero con algunos términos.

Para incorporarlos a nuestra plantilla debemos seguir lo siguientes pasos,

Nos dirigimos a nuestro panel de administración en WordPress, luego al editor de temas y editamos el archivo header.php (Encabezado)

Dentro de la edición de este archivo añadimos las siguientes líneas entre las etiquetas <head> y </head>

  <script src="http://code.jquery.com/jquery-latest.js">
  	 <!--mce:0-->
  </script>
  <script src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.core.js" type="text/javascript">
     <!--mce:1-->
  </script>
  <script src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.tabs.js" type="text/javascript">
     <!--mce:2-->
  </script>
  <script type="text/javascript">
     <!--mce:3-->
  </script>

A continuación nos dirigimos a editar el archivo style.css (Hoja de estilos) para definir el estilo de nuestro widget.

A este archivo le tenemos que añadir las líneas de código de CSS del tutorial anterior, lo mejor es que ingresen su hoja de estilos propias, verán que no es muy difícil editarla. Pero en caso deseen practicar, aquí tienen el ejemplo que tienen que añadir al final del archivo style.css

.estilo {
			margin:0 0 15px 0;
			padding:0;
			width:310px;
		}
		.ui-tabs-nav{
			margin:0;
			padding:0;
			list-style:none;
		}
		.ui-tabs-nav li {
			margin:0 2px 0 0;
			padding:0 5px 0 5px;
			float:left;
			height:30px;
			border-top:1px #3399FF solid;
			border-right:1px #3399FF solid;
			border-left:1px #3399FF solid;
			font-family:Verdana, Arial, Helvetica, sans-serif;
			font-size:12px;
			line-height:30px;
			text-transform:uppercase;
		}
		.ui-tabs-nav li:hover {
			background:#EBEBEB;
			color:#333333;
		}
			.ui-tabs-nav li:hover a {
				color:#333333;
			}
		.ui-tabs-nav li {
			background:#FFFFFF;
		}
			.ui-tabs-nav li a {
				color:#336699;
				text-decoration:none;
			}
		.ui-tabs-panel {
			margin:0;
			padding:5px;
			float:none;
			clear:both;
			border:#3399FF solid 1px;
			width:298px;
			font-family:Verdana, Arial, Helvetica, sans-serif;
			font-size:12px;
			color:#333333;
		}
			.ui-tabs-panel ul {
				margin:0;
				padding:0 0 0 15px;
			}
			.ui-tabs-panel ul li {
				margin:0 0 5px 0;
			}
		.ui-tabs-panel a {
			color:#336699;
			text-decoration:none;
		}
			.ui-tabs-panel a:hover {
				color:#3399FF;
				text-decoration:underline;
			}
		.ui-tabs-hide {
			margin:0;
			padding:5px;
			float:none;
			clear:both;
			display:none;
			border:#3399FF solid 1px;
			width:298px;
			font-family:Verdana, Arial, Helvetica, sans-serif;
			font-size:12px;
			color:#333333;
		}
			.ui-tabs-hide ul {
				margin:0;
				padding:0 0 0 15px;
			}
			.ui-tabs-hide ul li {
				margin:0 0 5px 0;
			}
		.ui-tabs-hide a {
			color:#336699;
			text-decoration:none;
		}
			.ui-tabs-hide a:hover {
				color:#3399FF;
				text-decoration:underline;
			}

Lo siguiente, es editar el archivo sidebar.php (Barra lateral) para poder añadir nuestros “widgets” en código bruto PHP (que más adelante verán) ya que al usar esta sidebar con pestañas no pueden usar el sistema de WordPress para añadir “widgets” a sus recuadros con pestañas.

Dentro de la edición de este archivo, tenemos que añadir las siguientes líneas de código, si lo deseamos visualizar en la parte superior de nuestra plantilla lo tenemos que añadir antes de la siguiente línea de código:

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>

Pero si lo desea visualizar en la parte inferior, lo tenemos que poner antes del final del sidebar, es decir, antes de la última etiqueta </div>. La líneas de código a añadir son las siguientes:

    <div id="EJEMPLO" class="estilo">
    <ul>
        <li><a href="#tab-1">Título 1</a></li>
        <li><a href="#tab-2">Título 2</a></li>
    </ul>
    <div id="tab-1">
            Aquí el contenido</div>
    <div id="tab-2">
            Aquí el contenido</div>
    </div>

Debemos recordar mantener la estructura que se mencionó en el tutorial anterior para así evitar que nuestro código no funcione.

Finalmente, nuevamente nos dirigimos al archivo header.php para una última adición. Tenemos que añadir lo siguiente tantas veces se hallan añadido recuadros en la edición del archivo sidebar.php manteniendo los nombres de los respectivos id. La línea de código a añadir es la siguiente:

  <script type="text/javascript">
  $(document).ready(function(){
    $("#EJEMPLO > ul").tabs();
  });
  </script>

Repito, debemos repetir, tantas veces sea necesario.

Luego de realizar todas esas modificaciones, nuestro widget con pestañas se mostrará en nuestra barra lateral de WordPress. A continuación, les daré una lista de funciones en PHP que llamarán algunos widgets sin la necesidad de llamarlos a través de nuestro panel de administración de WordPress:

<?php
//Mostrar cateogrías
wp_list_categories('orderby=name&title_li=');
?>
<?php 
//Mostrar archivo
wp_get_archives('type=monthly'); 
?>
<?php
//Ultimos 10 posts
get_archives('postbypost', 10); 
?>
<?php
//Blogroll
wp_list_bookmarks('title_before=<span style="display:none;">&title_after=</span>&title_li=&category_before=&category_after=');
?>

En caso, tengas alguna duda acerca de este tutorial, déjanos un comentario y recuerda que respecto a la edición de la barra lateral, cada barra lateral es distinta en cada plantilla así que ten cuidado.

Crear tabs para cualquier sitio con jQuery (Parte I)

Por xploit29 En: Tutoriales 1 Comentario »

jQuery es una tecnología que simplifica muchas cosas a la hora de realizar el trabajo de estructura de un sitio web, como verán, anteriormente en el desarrollo de esta plantilla, los “TABS” del Sidebar se establecían a través del script de DOMTAB, sin embargo estos me presentaron problemas al incorporarlos a WordPress, así que decidí usar jQuery y en realidad ha sido muy sencillo el insertarlo a la plantilla.

Para iniciar el proceso, entre las etiquetas <head> y </head> debemos añadir las siguientes líneas:

  <script src="http://code.jquery.com/jquery-latest.js">
  	 <!--mce:0-->
  </script>
  <script src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.core.js" type="text/javascript">
     <!--mce:1-->
  </script>
  <script src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.tabs.js" type="text/javascript">
     <!--mce:2-->
  </script>
  <script type="text/javascript">
     <!--mce:3-->
  </script>

A continuación, insertaremos entre las etiquetas <body> y </body> el contenido del recuadro, más adelante, veremos como agregar más recuadros también.

    <div id="EJEMPLO" class="estilo">
    <ul>
        <li><a href="#tab-1">Título 1</a></li>
        <li><a href="#tab-2">Título 2</a></li>
    </ul>
    <div id="tab-1">
            Aquí el contenido</div>
    <div id="tab-2">
            Aquí el contenido</div>
    </div>

Podemos agregar tantas pestañas como deseemos sin ningún problema, pero hay que intentar mantener el órden así que es mejor no recargar de pestañas un recuadro. El siguiente paso será la hoja de estilos (el mismo al que uso para esta plantilla) para poder asignarle un diseño al recuadro que contiene la pestañas:

.estilo{
			margin:0 0 15px 0;
			padding:0;
			width:310px;
		}
		.ui-tabs-nav{
			margin:0;
			padding:0;
			list-style:none;
		}
		.ui-tabs-nav li {
			margin:0 2px 0 0;
			padding:0 5px 0 5px;
			float:left;
			height:30px;
			border-top:1px #3399FF solid;
			border-right:1px #3399FF solid;
			border-left:1px #3399FF solid;
			font-family:Verdana, Arial, Helvetica, sans-serif;
			font-size:12px;
			line-height:30px;
			text-transform:uppercase;
		}
		.ui-tabs-nav li:hover {
			background:#EBEBEB;
			color:#333333;
		}
			.ui-tabs-nav li:hover a {
				color:#333333;
			}
		.ui-tabs-nav li {
			background:#FFFFFF;
		}
			.ui-tabs-nav li a {
				color:#336699;
				text-decoration:none;
			}
		.ui-tabs-panel {
			margin:0;
			padding:5px;
			float:none;
			clear:both;
			border:#3399FF solid 1px;
			width:298px;
			font-family:Verdana, Arial, Helvetica, sans-serif;
			font-size:12px;
			color:#333333;
		}
			.ui-tabs-panel ul {
				margin:0;
				padding:0 0 0 15px;
			}
			.ui-tabs-panel ul li {
				margin:0 0 5px 0;
			}
		.ui-tabs-panel a {
			color:#336699;
			text-decoration:none;
		}
			.ui-tabs-panel a:hover {
				color:#3399FF;
				text-decoration:underline;
			}
		.ui-tabs-hide {
			margin:0;
			padding:5px;
			float:none;
			clear:both;
			display:none;
			border:#3399FF solid 1px;
			width:298px;
			font-family:Verdana, Arial, Helvetica, sans-serif;
			font-size:12px;
			color:#333333;
		}
			.ui-tabs-hide ul {
				margin:0;
				padding:0 0 0 15px;
			}
			.ui-tabs-hide ul li {
				margin:0 0 5px 0;
			}
		.ui-tabs-hide a {
			color:#336699;
			text-decoration:none;
		}
			.ui-tabs-hide a:hover {
				color:#3399FF;
				text-decoration:underline;
			}

El significado de cada una de las etiquetas de estilo CSS:

estilo: Es el estilo de todo el recuadro con el cual trabajaremos
ui-tabs-nav: Es la lista que alojará a los títulos de las pestañas
ui-tabs-panel: Es el recuadro que aloja el contenido de un recuadro. Este es el estilo del recuadro visible
ui-tabs-hide: Es el recuadro que aloja el contenido de un recuadro. Este es el estilo del recuadro oculto que más adelante al pulsar sobre el título del recuadro se verá y convertirá en ui-tabs-panel

El agregar otro recuadro con contenido no es difícil, simplemente duplicamos el anterior recuadro y realizamos lo siguiente:

id: modificamos este atributo del primer div para asignarle un identificador al recuadro
href: modificamos este atributo por otro que identifique a otro título (manteniendo el símbolo de numeral)
Añadimos entre las etiquetas <script> y </script> que usamos en el primer paso lo siguiente:
```
	$(document).ready(function(){
    $("#EJEMPLO2 > ul").tabs();
  });
```
En donde editamos la palabra EJEMPLO por el nombre que le asignamos al segundo recuadro (el atributo id)

Definitivamente, este es un uso básico de esta herramienta y existen uso m´ñas complejos que se le pueden asignar, tal y como se puede observar en el sitio de jQuery.

Actualización: Si tienes un blog en WordPress, puede seguir el siguiente manual para integrarlo.

13 Octubre, 2008
Etiquetas: JavaScript, jQuery, Manual, Pestañas, Programación, Tabs, Tutorial, Utilidades, Web, Wordpress

Configurar dominio de Name.com en Blogger

Por xploit29 En: Tutoriales Ningún comentario »

Para quienes desconocen acerca de Name.com, ellos se encargan de la venta de dominios de la misma manera que lo hacen otras empresas como enom o godaddy. Las personas que adquieren dominios en Name.com no encuentran en el manual de configuración de DNS de Blogger ayuda alguna para configurar este proveedor, salvo que se contacte con el servicio técnico de Google.

A continuación los pasos a seguir para configurar un dominio de Name.com en Blogger.

Ingresamos a nuestra lista de dominios:

Seleccionamos el dominio al cual deseamos configurar en nuestro blog de Blogger. Puede parecer extraño pero de momento, es necesario a través del menú del lado izquierdo realizar un “URL Forwarding” (Redirección de la URL) del dominio a nuestro blog.

Ya dentro, lo configuramos de la siguiente manera:

Point to (Redirigir a): Nuestra cuenta de blog ubicada en Blogger, por ejemplo: “http://xploit29.blogspot.com”
Using (Usando): Si seleccionamos 301 significa que es una redirección permanente, mientras que una redirección 302 se refiere a una redirección temporal.
Page title (El título de nuestro sitio): Esto simplemente le asigna un título temporal al dominio antes de que sea redirigido.
Meta tags (Etiquetas meta): A través de estas etiquetas podemos asignarle palabras claves y/o una descripción al sitio antes de que sea redirigido.

“DNS Management”. Recordando que para poder tener disponible esta opción, es necesario que las DNS del dominio sean las de defecto, es decir: “ns1.name.com”, "ns2.name.com”, “ns3.name.com” y “ns4.name.com”

Dentro de la opción, tenemos que añadir un nuevo registro de “CNAME” con los siguientes datos:

Add Record: CNAME
Sub-dominio: “www”
Record Anwser: “ghs.google.com”
TLD: 1800

Una vez realizados todos los pasos anteriores, podemos dirigirnos a nuestra cuenta en Blogger y configurar nuestro blog de la siguiente manera:

Dentro de el panel de nuestro blog nos dirigimos a: “Configuración” > “Publicación”

Dentro del menú, escogemos “Cambiar por: Dominio personalizado”. Nos mostrará la opción para buscar nuestro dominio y comprarlo, pero eso no es necesario así que evitamos ello haciendo clic en “Cambiar a opciones avanzadas”

Al hacer clic en él, iniciaremos el proceso para añadir nuestro dominio personalizado a nuestra cuenta de Blogspot. Simplemente escribimos el nombre de nuestro dominio allí y listo, el proceso habrá finalizado.

Vía | Smartz Bloggers

9 Octubre, 2008
Etiquetas: Blogger, Blogspot, Configurar, Custom, Dominio, Google, Name, Name.com, Propio, Tutorial

Caracteres especiales que puedes usar en Twitter

Por xploit29 En: Tutoriales, Utilidades 1 Comentario »

La necesidad de expresarnos en más de 140 caracteres nos exige reducir una frase a acrónimos como un “What The Fuck?!” a “WTF” y realmente son cosas realmente útiles. Es por ello que a continuación, les presento una lista de caracteres especiales con los cuáles podemos reducir por ejemplo la palabra “música” a “♬”:

♥ ✈ ☺ ♬ ☑ ♠ ☎ ☻ ♫ ☒ ♤ ☤ ☹ ♪ ♀

✩ ✉ ☠ ✔ ♂ ★ ✇ ♺ ✖ ♨ ❦ ☁ ✌ ♛ ❁

☪ ☂ ✏ ♝ ❀ ☭ ☃ ☛ ♞ ✿ ☮ ☼ ☚ ♘ ✾

☯ ☾ ☝ ♖ ✽ ✝ ☄ ☟ ♟✺ ☥ ✂ ✍ ♕ ✵

Enlace | Twitter
Vía | Walhez

3 Octubre, 2008
Etiquetas: Acronimos, Caracteres, Internetm Utilidad, Signos, Twitter, Web 2.0

Verifica tu cuenta de PayPal con tu tarjeta Pagum

Por xploit29 En: Tutoriales 12 Comentarios »

PayPal, la más grande plataforma de pagos en el mundo, es el intermediario de pagos de muchos sitios de Internet. A pesar de ser criticada por muchos, PayPal en cierto sentido facilita los pagos haciéndolos seguros, es por ello que buscamos métodos más sencillos para poder usarlo, es allí donde aparece Pagum.

pagum-logo Pagum es un servicio ofrecido en Perú inicialmente por el Banco Wiese Sudameris que luego fue adquirido por Scotiabank el cual consiste en crear una tarjeta de débito virtual Mastercard con la cual podemos realizar compras en Internet con toda la libertad del mundo. Acerca de Pagum podemos encontrar mayor información aquí. No es necesario ser cliente del banco para poder acceder a este servicio.

¿Como cargar mi cuenta Pagum para verificar mi cuenta de PayPal?

Para poder cargar nuestra cuenta de Pagum simplemente nos acercamos a cualquier ventanilla del banco Scotiabank y solicitamos a quien se encuentre en ventanilla que deseamos realizar un “depósito en nuestra cuenta virtual Pagum”. A continuación nos solicitarán el monto a depositar y el correo electrónico al cual deseamos hacer el depósito. Pues nosotros nos identificamos en Pagum a través de nuestro correo electrónico.

También es posible cargar nuestra cuenta de Pagum enlazando nuestra cuenta del banco Scotiabank con nuestra cuenta de Pagum.

¿Cómo usar la tarjeta de débito Mastercard de Pagum?

Lo primero que debemos tener antes de poder realizar esto es tener por lo menos $1.95 USD (para pode verificar nuestra cuenta de PayPal) (Dólares americanos) en nuestra cuenta de Pagum.

Es necesario que el saldo que poseamos se encuentre en Dólares y no en soles pues el uso de la tarjeta de débito se realiza única y exclusivamente en dólares americanos. A continuación nos dirigimos a través del menú del lado izquierdo a “Tarjeta Pagum Mastercard” en donde ingresaremos nuestro PIN o lo crearemos en caso de que no lo poseamos.

Lo que tenemos que hacer es cargar nuestra tarjeta de débito con el monto que deseemos y listo, podremos usar nuestra tarjeta de débito Pagum Mastercard. La tarjeta puede ser cargada y descargarla tantas veces como deseemos sin ningún cargo adicional, recomiendo descargarla después de usarla por seguridad.

¿Cómo verifico mi cuenta de PayPal?

Una vez realizado todos los pasos anteriores, nos dirigimos a nuestra cuenta de PayPal en donde seguramente tendremos un aspecto similar al siguiente en nuestra cuenta, para poder verificar la cuenta, haremos clic sobre “No verificada” para iniciar el proceso de verificación:

Debemos asegurarnos que al crear la cuenta en PayPal ingresemos nuestros datos completos y la dirección con la que nos hemos registrado debe coincidir con la de nuestra cuenta Pagum; si los datos no coinciden con los de nuestra cuenta Pagum es muy posible que no se pueda realizar la verificación por conflicto de datos.

En la página ingresaremos los datos de nuestra cuenta Pagum, el número de la tarjeta de débito, sin guiones, la fecha de vencimiento y el código de seguridad o CVC. una vez ingresados los datos, guardaremos y continuaremos, PayPal nos solicitará realizar un cobro de $1.95 USD para finalizar el proceso de verificación. Luego de que aceptamos y PayPal realiza el cobro a nuestra tarjeta, nos dice que ingresemos el código de 4 dígitos generado en el recibo de pago.

¿Dónde encuentro el código de 4 dígitos para finalizar la verificación?

El código de 4 dígitos para realizar la verificación se encuentra dentro del sitio de Pagum. El código no se mostrará inmediatamente realizado el pago, tardará por lo menos unos días en mostrarse. Para ver el código nos dirigimos a “Mi cuenta Pagum” y hacemos clic donde nos indica la imagen.

Una vez que hagamos clic allí, nos mostrará una lista de los 4 últimos movimientos de nuestra tarjeta Pagum.

Si el último movimiento que hemos hecho ha sido el de verificar la cuenta de PayPal entonces, haremos clic sobre el primer “COM” y nos aparecerá una nueva ventana con los detalles adicionales del movimiento realizado. El código “COM” identifica el tipo de movimiento realizado:

COM: Compra
ABO: Abono a la tarjeta Pagum Mastercard

En la línea “Información Adicional” es donde se muestra el código requerido por PayPal para la verificación de la cuenta. Y luego de haber realizado la respectiva verificación nuestra cuenta de PayPal se mostrará de la siguiente manera:

Enlace | Pagum
Enlace | PayPal