Programa de afiliados hostingparaBlogs

Hace unos meses en una entrevista de Blogtecnia respondía a una pregunta de Carlos con "No hay metas, ilusiones muchas pero son ilusiones que ayudan a ver las cosas de otro modo.

Esas ilusiones a las que hago referencia se referían a un proyecto que siempre he tenido en mente, algo que rondaba mi cabeza pero nunca me decía a dar ese primer paso.

Ese proyecto ya tiene nombre y se llama hostingparaBlogs es una pequeña sociedad aunque yo prefiero llamarlo llamarlo trabajo en equipo.  Soy, una pequeña pieza de ese equipo formado por grandes profesionales con experiencia en técnicas SEO, PHP, HTML, XHTML y JavaScript.

Hace algo más de un mes que todo se puso en marcha y di a conocer los servicios ofrecidos, el motivo de esta entrada es sobre otro servicio que recientemente ha incorporado hostingparaBlogs se trata del programa de afiliados.

Afiliados

Hay un programa de afiliados que quizás pueda interesaros, con este sistema podemos ganar un dinerillo extra que nunca viene mal. Lo único que debemos hacer es registrarnos y añadir un banner en la sidebar. Más detalles sobre el programa de afiliados.

Ya de paso recordar que en hostingparaBlogs podemos disponer de nuestro propio dominio y servicio de alojamiento y escoger entre tres planes mi primer Hosting - plán Básico - plán Plus

Planes de Hosting

Otros servicios

• WordPress preinstalado (no hacen falta conocimientos previos)

• Creación de páginas web para pequeñas empresas o proyectos personales

• Servicios para Blogger: Diseño e instalación de plantillas, solución a problemas.

Plantilla "Mis Recetas Secretas" más amplia

Hoy les tengo la versión más amplia de la plantilla Mis Recetas Secretas, ya me lo había pedido,  también aproveché para hacer otros cambios, tales como:

• El menú de navegación superior (en el top) son los enlaces de las páginas estáticas.


• El menú de pestañas soporta páginas, por lo que si te decides por poner los enlaces de las páginas estáticas, en lugar de categorizar las entradas con las etiquetas, como en la plantilla original, los enlaces de las páginas (y el efecto de pestaña abierta) se agregarán de forma automática.


• Debido a que cree estilos individuales para las pestañas, cuando entres a una entrada en particular, se cerraran todas las pestañas del menú de navegación, cosa que no sucedía en la plantilla original.


• La columna principal ahora mide 540 pixeles, anteriormente era de 430 pixeles.

La mecánica para crear el efecto de pestaña abierta cuando se usan las categorías usando las etiquetas es el mismo, el código que hace que se cree el efecto es este:

<!-- Estilos menu de navegacion de pestañas -->



<b:if cond='data:blog.pageType == &quot;index&quot;'>

 <b:if cond='data:blog.pageName == &quot;Entradas&quot;'>

    <style>

#header-wrapper {

background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX-H2ShUx1Px6lK9JL0BCBUWWyX9Y5Tap08HIGXzf_DGRhpsa7OlZqHIxjW7rtNFs3_YQ6Q542F5rE3a-l5AYOPmBSbVtWiV4S-ujFUzZtYHA8sd7jcBP6HOhyq0MOpK5LbmxO9r-W2t4/s1200/header-w-entradas.png);}

a#menuEntradas {color:#d78306 !important;font-weight:bold;}

#main{

width:800px;

padding:0 5px 0 10px;

}

#sidebar-wrapper {

width: 0px;

visibility:hidden;

display:none;

}

#menu li a {

background: none !important;

}

</style>

</b:if>

<b:if cond='data:blog.pageName == &quot;Platillos&quot;'>

    <style>

#header-wrapper {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5IFY1XJ-szemsXfnusM4Uxmx51i832VT63TERbXt2GH7sqek2zHuwqqmFSBkudvaKJfrL9mMEJGDkfOZMH_kepbFlTHA35-tV_bDXV5pmc0px1GLrD28wL1z4fZi1sy7hJ0EwtNKDZFM/s1200/header-w-Platillos.png);

}

a#menuPlatillos {color:#d78306 !important;font-weight:bold;}

#main{

width:800px;

padding:0 5px 0 10px;

}

#sidebar-wrapper {

width: 0px;

visibility:hidden;

display:none;

}

#menu li a {

background: none !important;

}

</style>

</b:if>

<b:if cond='data:blog.pageName == &quot;Postres&quot;'>

    <style>

#header-wrapper {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib2Lv4NNB86GWds8U5Fye_i0zsrH9vcBixltEGdJjbh3mV5ztTfdAaCPWgjfykevWowK2l0OA5Yok6s3BiDQKY05hZjqUxQRTHAOesw2fsR06U8o6AbCjQr51DoK7p5EkusqkKIel-ioo/s1200/header-w-postres.png);

}

a#menuPostres {color:#d78306 !important;font-weight:bold;}

#main{

width:800px;

padding:0 5px 0 10px;

}

#sidebar-wrapper {

width: 0px;

visibility:hidden;

display:none;

}

#menu li a {

background: none !important;

}

</style>

 </b:if>



<b:if cond='data:blog.pageName == &quot;Favoritos&quot;'>

    <style>

#header-wrapper {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSeaIisaxxpDT_flatZh74U9qVdC6tUZI03OPLK16tY-ioUShtz9SHMix65c165vl8UoJnU3q_00ylu3Dfst6dvtHyCGy8LYHr558ulyHNgTSp9m2fykZoq6sFSoJ3DtsMJ6XeGBuGu3Y/s1200/header-wn-postre.png) ;

}

a#menuFavs {color:#d78306 !important;font-weight:bold;}

#main{

width:800px;

padding:0 5px 0 10px;

}

#sidebar-wrapper {

width:0px;

visibility:hidden;

display:none;

}

#menu li a {

background: none !important;

}

</style>

  </b:if>

    </b:if>

Instrucciones para personalizar los enlaces de las pestañas por lo propios



Para personalizar los enlaces de  Entradas, Platillos, Postres y Favoritos deberás hacer los siguiente:



Paso 1. Ir a diseño►edición HTML de tu plantilla y selecciona expandir plantillas de artilugios.





Paso 2. Con la ayuda de CTRL F, busca:





<li><a href='#' id='menuEntradas'>Entradas</a></li>

  <li><a href='#'  id='menuPlatillos'>Platillos</a></li>

   <li><a href='#' id='menuPostres'>Postres</a></li>

    <li><a href='#' id='menuFavs'>Favoritos</a></li>

   



Paso 3. Sustutuye los gatitos # , por los enlaces de las categorías, que deberás usar por medio de las etiquetas, el enlace siempre se verá así:



http://URL_DE_TU_BLOG/search/label/NOMBRE_DE_ LA_ ETIQUETA



Puedes cambiar los títulos de las categorías como en la plantilla original, siguiendo los mismos pasos.





IMPORTANTE: Cuando bajas la plantilla y la instalanles por primera vez el inicio dirá "PAGINA PRINCIPAL", esto es por que soporta páginas, sin embargo,  puedes cambiar el título a Inicio (para que sea más corto), también debes ingresar a editar páginas en el diseño de tu plantilla, en la sección de pestañas y quita la selección que dice:





Añadir nuevas páginas automáticamente cuando se publiquen



Recuerda, no la selecciones,  ya que como el menú de pestañas soporta páginas, si la tienes seleccionado se agregarán las nuevas páginas que crees a esta sección, y una pestaña más, supera el ancho que le he dado para que contenga solo 5 pestañas, por eso, la pestaña se irá para abajo. Si quieres agregar una pestaña mas tendrías que editar el ancho asignado para el menú.



Para agregar el buscador interno a la columna lateral, harás lo mismo que en la entrada de "Mis recetas secretas".



Demo | Descargar

Añadir al blog la suscripción por correo

Algunas de las preguntas pendientes de respuesta tratan sobre la forma de añadir el formulario de suscripción por E-mail, el que puedo proporcionar es el que tengo añadido a la sidebar y lo podéis usar cambiando donde dice Gemablog (dos veces) por vuestro nombre de usuario en FeedBurner. En un gadget de HTML añadimos lo siguiente:

<style>#fbForm {background: url() no-repeat scroll 10px 10px; margin:-10px auto; padding:10px; width:210px;}#fbForm a.fbSuscribe {margin: 0; padding: 1px 0 0 37px; display: block; color: #111111; font-weight: bold; font-family: verdana; font-size: 12px;}#fbForm a.fbSuscribe:hover {color: #111111;}#fbForm input.fbTexto {background-color: #ffffff; border: 1px dotted #111111; color: #111111; padding: 2px; height: 16px; margin-right: 5px; width: 140px;}#fbForm input.fbBoton { background-color:#C0C0C0; border:1px dotted #990000; color:#333333; cursor:pointer; font-size:10px; height:21px; padding:1px 0 3px;}</style><!--[if IE]><style>#fbForm input.fbTexto {border: 1px solid #CCCCCC; width: 130px;}#fbForm input.fbBoton {border:1px solid #CCCCCC; width: 50px;}#fbForm a.fbContador {display: block; float: none; text-align: right;}</style><![endif]--><form id="fbForm" action="http://feedburner.google.com/fb/a/mailverify" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Gemablog', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" method="post"><p style="margin-top: 0px; margin-bottom: 0px;color:#333333;font-family:Arial;text-align: center;font-size:80%;">Suscribirse vía mail</p><p style="margin-bottom: 10px;"><input class="fbTexto" name="email" type="text" /><input value="es_ES" name="loc" type="hidden" /><input value="Gemablog" name="uri" type="hidden" /><input class="fbBoton" value="Subscribir" type="submit" /></p>

Hay algunos cambios que se pueden hacer como por ejemplo el texto de Suscribirse Vía mail

<p style="margin-top: 0px; margin-bottom: 0px;color:#333333;font-family:Arial;text-align: center;font-size:80%;">Suscribirse vía mail</p>

En color:#333333 - font-family:Arial;text-align: center y font-size:80% podemos cambiar el color de texto, tipo de fuente, justificar el texto, y tamaño de fuente.

El texto de suscribir lo cambiamos en:

<p style="margin-bottom: 10px;">

<input class="fbTexto" name="email" type="text" />

<input value="es_ES" name="loc" type="hidden" /><input value="Gemablog" name="uri" type="hidden" />

<input class="fbBoton" value="Subscribir" type="submit" />

</p>

Y nos queda el espacio para añadir la cuenta de correo si nos vamos a suscribir.

#fbForm {background: url() no-repeat scroll 10px 10px; margin:-10px auto; padding:10px; width:210px;}

#fbForm a.fbSuscribe {margin: 0; padding: 1px 0 0 37px; display: block; color: #111111; font-weight: bold; font-family: verdana; font-size: 12px;}

#fbForm a.fbSuscribe:hover {color: #111111;}

#fbForm input.fbTexto {background-color: #ffffff; border: 1px dotted #111111; color: #111111; padding: 2px; height: 16px; margin-right: 5px; width: 140px;}

#fbForm input.fbBoton { background-color:#C0C0C0; border:1px dotted #990000; color:#333333; cursor:pointer; font-size:10px; height:21px; padding:1px 0 3px;}

❀ #fbForm podemos hacer que sea más o menos ancho con width
❀ #fbForm input.fbTexto cambiamos los estilos del texto "Buscar"
❀ #fbForm input.fbBoton es el espacio dónde escribimos la direción de correo para suscribirnos.

Se sabrá que todo ha ido bien cuando alguien ingrese su mail y muestre algo así:

Agregar un FanBox de Twitter

AVISO
La API de Twitter cambió y ahora requiere autenticación para obtener los datos de los seguidores, por tal motivo éste y los demás fanbox para Twitter han dejado de funcionar. Si me entero de una solución u otra alternativa lo publicaré de inmediato.

Es muy común ver en los blogs los Fan Box de las páginas de Facebook, sí, esas cajitas que muestran el número de fans que tiene la página así como los avatares de ellos. También podemos tener un Fan Box para los que nos siguen en Twitter y mostrar en ella el número de seguidores así como los últimos 10 seguidores que tenemos.

Esto es posible a través de un gadget creado por Moopz y que nos permitirá tener un fan box de Twitter usando un script.

Para agregarlo en tu blog sólo entra en Diseño | Elementos de la página | Añadir gadget | HTML/Javascript y ahí pega lo siguiente:

<div class="textwidget">
<script type="text/javascript" src="http://s.moopz.com/fanbox_init.js"></script><div id="twitterfanbox">
<script type="text/javascript">fanbox_init("usuario");</script></div>
</div>

<style>
.FB_SERVER_IFRAME {
width: 290px !important; /* Ancho del gadget */
height: 250px !important; /* Alto del gadget */
}
</style>

En donde dice usuario deberemos poner nuestro nombre de usuario de Twitter (sin la @)
El ancho y alto del gadget se modifican donde se especifica en color verde.

Generador recortes de letras

strix.org.uk

Ni es un menú, ni un nuevo modelo de plantilla, tampoco el nuevo sistema de alojamiento, simplemente es un generador de recortes de texto que nos permite añadir una imagen de fondo.Y es que una es débil ante estas cosas.

Necesitamos autores para nuestro blog

Si estás interesado por compartir y aportar a nuestro Blog, puedes enviarnos un correo electrónico a cloudx18administrador@blogsydescargas.co.cc con tu nombre, tu nick, tu usuario Gmail, tus intereses y por qué quieres publicar en este blog.

Se le enviará un correo de respuesta para que sepas si fuiste aceptado. y se te dará una guía con los pasos a seguir para que aprendas a crear nuevas entradas con nuestro formato en nuestro Blog.

Los requisitos para que te demos permisos de autor son los siguientes:

1. Necesitas ser mayor de 14 años.
2. Necesitas tener una cuenta Gmail (de no ser así se te dará una automáticamente pero con una dirección arbitraria. 
3. No permito el copy-paste. En mi blog necesito originalidad y creatividad.

Estate atento a las actualizaciones, si no deseas enviar un correo electrónico puedes crear el tópico en nuestro Foro Peticiones

Personalizar las etiquetas de post-footer

Hace un tiempo vimos la forma de añadir iconos a las etiquetas del post-footer, hoy vamos a añadirle unos sencillos estilos de forma que las resaltaremos.

En edición de html marcamos para expandir la plantilla y buscamos la parte que afecta a las etiquetas.

Resaltado en negrita está la etiqueta <data:label.name/> que es la encargada de generar las etiquetas, a continuación añadiremos lo marcado en color rojo.

<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><span class='etiquetas'><data:label.name/></span></a>
<b:if cond='data:label.isLast != &quot;true&quot;'>  , </b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=20&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>
</span>

Ahí mismo podemos eliminar la coma que separa las etiquetas, está marcado con fondo negro.
Si queremos en el lugar de la coma podemos añadir algo decorativo una imagen o carácter unicode.

<span style="vertical-align: middle; color:#000; font-size:24px;text-shadow: 1px 1px 1px #505050">&#10087;</span>

Guardamos los cambios y añadimos los estilos para las etiquetas justo antes de ]]></b:skin>

.etiquetas {

padding:4px;

color:#ffffff;

opacity:0.6;

text-shadow:0 3px 2px #000000;

background:none repeat scroll 0 0 #990000;

}

.etiquetas: hover {

opacity:0.9;

}

En background cambiamos el color de fondo, el color de fuente en "color" text-shadow lo utilizamos para dar sombra el al texto y opacity para el efecto hover.

Cualquier estilo podemos añadirlo y ver el resultado o seguir cambiando.

.etiquetas {

padding:4px;

color:#ffffff;

-moz-border-radius: 5px 5px 5px 5px;

background:none repeat scroll 0 0 #990000;

text-shadow: -1px -1px 1px #555;

-moz-box-shadow: 3px 3px 3px #000000;

}

.etiquetas:hover {

opacity:0.9;

}