blogsmadeinspain: noviembre 2011

Aquí encontrarás plantillas para Blogger diseñadas por mí totalmente gratuitas, conocerás como se manipulan imágenes, fondos, texto, enlaces o links, los mejores widgets o gadgets, herramientas y utilidades, etc... Y además puedo diseñarte una plantilla exclusiva para tí, totalmente a tu gusto, y solo por 38 Euros.

Acceso restringido por contraseña en Blogger

Muchos de vosotros me habéis preguntado por la posibilidad de acceder a vuestro blog de Blogger, o a algunas de sus entradas con carácter restringido, es decir, teniendo un control de acceso mediante contraseña. Esto serviría para crear contenido que solo sea accesible a las personas que vosotros decidáis, a las cuales les habréis facilitado anteriormente la contraseña para tener acceso. 
Con ello se abren infinidad de posibilidades en los blogs de Blogger, como zonas VIP o Premium, de acceso previo pago, contenido personal visible solo para vuestros amigos o visitantes especiales, etc...

He conseguido averiguar como hacerlo de una manera muy fácil. Para que podáis ver su funcionamiento he creado una página de Blogsmadeinspain de acceso restringido mediante contraseña. La contraseña para acceder a ella es 123456.

Ver Demo

Si estáis interesado en este tema. Seguid leyendo….

Leer completo...[+/-]

    Como seguramente sabéis, la totalidad de un blog puede hacerse con acceso restringido en “Configuración / Permisos”, con la figura de los “lectores invitados”. Pero esta figura, además de restringir el acceso a la totalidad del blog, y no solo a una o varias entradas, tiene la limitación actual de 100 “lectores invitados”. Número totalmente insuficiente en la mayoría de los casos.

    Para restringir el acceso a una entrada, solamente tenéis que pegar un pequeño código en la entrada de que se trate. Pero vayamos por orden. Seguid estos puntos:

    1.- Cread una página o entrada donde se desvíe a vuestros visitantes que introduzcan una contraseña incorrecta. Podéis ver un ejemplo de ello si en mi Demo no colocáis la contraseña que os he indicado arriba. Esta entrada podría ser una entrada normal o página estática de vuestro propio blog o una entrada en un blog creado exclusivamente para esto, como es el caso de mi ejemplo. La dirección completa URL de esta entrada con el mensaje de error la llamaremos URL página de Contraseña incorrecta.

    2.- En el Editor de Entradas, al crear la entrada que queremos proteger mediante contraseña, pincharemos sobre la pestaña “Edición de HTML”, y añadiremos justo al principio este código:

    <script languaje="javascript">
    var cLAVEnjte = prompt("Necesitas una contraseña para acceder a este sitio.") if cLAVEnjte!="contraseña")
    {location.href='URL página de Contraseña incorrecta'}
    else {alert('Tu contraseña ha sido aceptada. Pincha en Aceptar para acceder al sitio')} </script>

    En contraseña colocar la contraseña que queráis. (Evidentemente puede ser diferente para cada entrada de acceso restringido). La URL página de Contraseña incorrecta ya os expliqué arriba qué es lo que era. Y por último, de color rojo lleváis marcados los mensajes que podéis personalizar a vuestro gusto.

    Otras consideraciones:

    - Sería conveniente que en la página que creéis con el mensaje de “Contraseña incorrecta” coloquéis también un enlace o link para volver a la página inicial de vuestro blog.

    - La protección por contraseña estará operativa tanto en la entrada individual que se ha restringido, como en cualquier página de vuestro blog donde aparezca dicha entrada. Es decir, también deberá introducirse la contraseña para acceder a la página principal o de etiquetas, si contiene al menos una entrada restringida. Es precisamente esta última propiedad la que podemos aprovechar para proteger íntegramente un blog en su totalidad. Para ello debemos colocar los códigos antes indicados en todas las entradas.

El mejor traductor actual para un blog

Después de probar varias de las posibilidades que actualmente existen para colocar un traductor en tu blog, sigo recomendando “Google Traductor”. Se ha remodelado estéticamente y funcionalmente para darnos un mejor servicio en nuestros blogs.
Presenta varias posibilidades de visualización: insertado en algún lugar del blog, en forma de pestaña en una de las esquinas del sitio, e incluso con la posibilidad de que automáticamente presente un banner de traducción al detectar el lugar de visita con lengua diferente a la que está escrito el blog.

Y como siempre, resulta rápido y fiable. Si queréis colocar este traductor, que podéis ver y probar en la sidebar derecha de mi blog, pinchad AQUÍ.

Os explico a continuación algunos aspectos a tener en cuenta a la hora de configurar este gadget de traducción para vuestro blog.

Leer completo...[+/-]

    Después de decidir en los dos primeros pasos, en el “Paso 3” pinchad sobre “Mostrar configuración opcional”. Entonces se desplegarán varias opciones para poder configurar el gadget. La primera opción que se os presenta es poder elegir entre todos los idiomas (53 idiomas) o seleccionar vosotros mismos los que queráis. Después tendréis que elegir el “Modo de presentación”, entre los tres que os comentaba al principio del post. Y dentro de cada uno hay varias posibilidades. Lo mejor es que hagáis pruebas a ver cual os gusta más para vuestro blog.

    Una vez decididas estas opciones, en el “Paso 4” se os mostrará el código que tenéis que pegar como elemento “HTML/Javascript” en “Añadir un gadget” de vuestro blog. Pero antes pinchad, debajo del cuadro donde aparece el código, en “Vista previa de la página” y podréis ver justo debajo como os quedará el gadget con las opciones que habéis elegido.

    Por si alguno quiere ahorrar tiempo y le gusta tal y como yo lo tengo en mi sidebar derecha, este es el código que yo uso:

    <center><div id="google_translate_element"></div><script>
    function googleTranslateElementInit() {
      new google.translate.TranslateElement({
        pageLanguage: 'es',
        includedLanguages: 'de,ar,cs,zh-CN,zh-TW,da,es,fi,fr,el,iw,hi,nl,en,it,ja,pt,ro,ru,sv,tr',
        autoDisplay: false,
        layout: google.translate.TranslateElement.InlineLayout.SIMPLE
      }, 'google_translate_element');}
    </script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script></center>

    Centrar fotografía en su columna con el gadget de Blogger “Imagen”

    La mayoría de blogueros que comienzan en Blogger usan para colocar sus imágenes en las columnas laterales de su blog el gadget estandar de Blogger titulado “Imagen”.
    Ese gadget se usa para colocar imágenes en cualquier parte del blog que no sean entradas, además permite colocarle un enlace o link a la imagen y un texto de “Pie de foto”.

    Pero en la mayoría de los casos, la imagen que se coloca queda descentrada respecto a la columna, apareciendo alineada a la izquierda. He recibido varias consultas sobre este tema, y he encontrado una solución muy fácil para centrar la imagen que se coloca.

    Leer completo...[+/-]

      Basta con acceder a “Diseño / Edición de HTML”, y colocar en la plantilla el siguiente código, antes de ]]></b:skin>

      .sidebar img { display: block; margin: 0 auto;}

      Pero el mismo problema tendremos con el texto “Pie de foto” si no ocupa un renglón completo o varios renglones, es decir, nos quedará alineado a la izquierda y no centrado en la columna.
      Pero esto tiene todavía una solución más fácil. Delante y detrás del texto que queramos poner como “pie de foto” colocamos <center> y </center> respectivamente. Quedando de esta forma:
      <center>TEXTO DE PIE DE FOTO</center>

    Corregir el error en los botones para "compartir" de algunas plantillas.

    Hace ya algún tiempo Blogger cambió el sistema que venía usando de botones para "compartir"  , eliminando el botón Buzz y modificando otros temas internos.
    Pués bien, en alguna de las plantillas que diseñé antes de ese cambio, este sistema de botones daba algún error en su visualización o no se veían. Solo se producía error en algunas de las plantillas, en el resto funcionan perfectamente.

    La solución para los que tengáis instalada alguna de esas plantillas es muy fácil, solo hay que modificar un par de códigos.

    Leer completo...[+/-]

      Entrad en "Diseño/Edición de HTML" y, antes de ]]></b:skin> , colocar este código:

      .share-button {display: inline-block;}

      También localizar este otro código:

      <b:includable id='shareButtons' var='post'>
      <b:if cond='data:post.sharePostUrl'>
      <a class='share-button sb-email' expr:href='data:post.sharePostUrl +
      &quot;&amp;target=email&quot;' expr:title='data:top.emailThisMsg' target='_blank'>
      <span class='share-button-link-text'><data:top.emailThisMsg/></span></a>
      <a class='share-button sb-blog' expr:href='data:post.sharePostUrl + &quot;&amp;target=blog&quot;' expr:onclick='&quot;window.open(this.href, &quot;&quot; + data:top.blogThisMsg + &quot;&quot;, &quot;height=270,width=475&quot;); return false;&quot;' expr:title='data:top.blogThisMsg' target='_blank'>
      <span class='share-button-link-text'><data:top.blogThisMsg/></span></a>
      <a class='share-button sb-twitter' expr:href='data:post.sharePostUrl + &quot;&amp;target=twitter&quot;' expr:title='data:top.shareToTwitterMsg' target='_blank'> <span class='share-button-link-text'><data:top.shareToTwitterMsg/></span></a>
      <a class='share-button sb-facebook' expr:href='data:post.sharePostUrl + &quot;&amp;target=facebook&quot;' expr:onclick='&quot;window.open(this.href, &quot;&quot; + data:top.shareToFacebookMsg + &quot;&quot;, &quot;height=430,width=640&quot;); return false;&quot;' expr:title='data:top.shareToFacebookMsg' target='_blank'>
      <span class='share-button-link-text'><data:top.shareToFacebookMsg/></span></a>
      <a class='share-button sb-buzz' expr:href='data:post.sharePostUrl + &quot;&amp;target=buzz&quot;' expr:onclick='&quot;window.open(this.href, &quot;&quot; + data:top.shareToBuzzMsg + &quot;&quot;, &quot;height=415,width=690&quot;); return false;&quot;' expr:title='data:top.shareToBuzzMsg' target='_blank'>
      <span class='share-button-link-text'><data:top.shareToBuzzMsg/></span></a>
      </b:if>
      </b:includable>

      Y cambiarlo por este otro:

      <b:includable id='shareButtons' var='post'>
      <b:if cond='data:post.sharePostUrl'>
      <a class='share-button sb-email' expr:href='data:post.sharePostUrl + &quot;&amp;target=email&quot;' expr:title='data:top.emailThisMsg' target='_blank'> </a>
      <a class='share-button sb-blog' expr:href='data:post.sharePostUrl + &quot;&amp;target=blog&quot;' expr:onclick='&quot;window.open(this.href, &quot;&quot; + data:top.blogThisMsg + &quot;&quot;, &quot;height=270,width=475&quot;); return false;&quot;' expr:title='data:top.blogThisMsg' target='_blank'> </a>
      <a class='share-button sb-twitter' expr:href='data:post.sharePostUrl + &quot;&amp;target=twitter&quot;' expr:title='data:top.shareToTwitterMsg' target='_blank'> </a>
      <a class='share-button sb-facebook' expr:href='data:post.sharePostUrl + &quot;&amp;target=facebook&quot;' expr:onclick='&quot;window.open(this.href, &quot;&quot; + data:top.shareToFacebookMsg + &quot;&quot;, &quot;height=430,width=640&quot;); return false;&quot;' expr:title='data:top.shareToFacebookMsg' target='_blank'> </a>
      <a class='share-button sb-buzz' expr:href='data:post.sharePostUrl + &quot;&amp;target=buzz&quot;' expr:onclick='&quot;window.open(this.href, &quot;&quot; + data:top.shareToBuzzMsg + &quot;&quot;, &quot;height=415,width=690&quot;); return false;&quot;' expr:title='data:top.shareToBuzzMsg' target='_blank'> </a>
      </b:if>
      </b:includable>

    Blogsmadeinspain reanuda totalmente su actividad

    Después de muchos meses de parada obligada, os anuncio que ya vuelvo a prestar desde este blog todos los servicios de diseño de plantillas exclusivas Blogger y diseño gráfico en general.
    He tenido que subir el precio del diseño de plantillas, ya que son muchas las horas que dedico a cada diseño. Pero creo que todavía es bastante económico y está al alcance de todos.

    Os recuerdo que podéis ver muchos de mis trabajos de diseño en Designmadeinspain, plantillas Blogger, logotipos, banners, carteles, diseño publicitario, etc...

    Además os tengo una sorpresa... Pongo en marcha un nuevo servicio de realización de caricaturas digitales, llamado DIGIcaturas.


    Son caricaturas digitales personalizadas ideales para imprimir en alta resolución y enmarcar para sobremesa o pared, regalos, invitaciones de boda, tarjetas, cumpleaños, felicitaciones, camisetas, etc... Por 26 euros

    Envíanos tu foto y en menos de 48 horas tendrás tu caricatura. Sin esperas, sin gastos de envío...   INFORMAROS PINCHANDO SOBRE EL BANNER

    Además os he dejado en esta entrada anterior el primer diseño que hago de una plantilla para un Fotoblog. Con un diseño muy elegante y llamativo, y totalmente gratis.

    Nuestra amiga Gem@ nos presenta "reinventaWEB"

    La mayoría de vosotros conoceréis a nuestra amiga Gem@. Ella, junto con algunos otros blogueros, han sido mis maestros en estos temas, y por ello les estoy enormemente agradecido.

    En esta ocasión nos presenta "reinventaWEB", sitio donde os podrán diseñar páginas webs, plantillas para WordPress y Tumblr, hacer trabajos con Javascript, páginas para Facebook, además de tener un amplio muestrario de plantillas gratuitas. También podéis comprar dominios o hosting propios para alojar vuestros blogs.

    Ellos os podrán ayudar en esos temas en que Blogsmadeinspain no puede ayudaros.


    Plantilla gratuita para Fotoblog

    Aquí os dejo la primera plantilla que diseño para crear un fotoblog en Blogger. Estas son plantillas muy especiales que plantean diversos problemas en su estructura y organización, pero creo que el resultado es muy funcional, además de elegante y muy llamativo. Espero que os guste, su diseño es muy original.
    Permite alojar las fotografías con una descripción o texto que se verá al desplegar la entrada completa de que se trate, o ver directamente la imagen a mayor tamaño, pinchando sobre ella.

    Plantilla "Fotoblog_01":

    Plantilla con tres pequeñas columnas en la parte superior e inferior, y ordenación de las miniaturas de fotos de tres en tres.

    Ya lleva incorporada la paginación para acceso a las distintas páginas. 
    Colores muy sobrios, basados en grises y colores oscuros. Un menú superior con grandes letras completa el diseño.

    DEMO...

    (Instrucciones de descarga)

    Descargar esta plantilla . . .