15 enero 2025

Plantillas gratis y personalizables para tu blog






Todos quienes nos animamos a iniciar con un blog nos hemos topado con un gran inconveniente que muchas veces nos mata las ganas de siquiera empezar.


Si ya de por sí dar ese primer paso para empezar un blog es algo que nos puede quitar el sueño, en cuanto a cuál será la temática del blog, sobre qué se supone que voy a escribir, etc. Imagínate si luego de rompernos la cabeza tratando de encontrar nuestro nicho sobre el que vamos a escribir nos topamos con que eso no era nuestro principal problema.


Cuando ves que tu blog poco a poco va cogiendo forma, se va llenando de posts que has creado con tanto entusiasmo, y luego quieres darle una forma más “profesional” pero descubres que el blog gratis que te ofrecieron está condicionado al antojo del creador, que los enlaces que debes cambiar por si elijes tener otro tema o plantilla para tu blog requiere un curso para adquirir conocimientos tal como si estuvieras preparándote para ser astronauta.


Entonces descubres que encontrar el nicho y la temática de tu blog no ha sido ni de lejos tu problema principal. Empiezas un blog y te entusiasma la idea de escribir y contarle al mundo lo que sabes, pero luego te empiezan a hablar de códigos, de iframes, lenguaje html, y la cosa se te antoja en chino.


Y te replanteas la idea de seguir con el blog o darle cristiana sepultura. Nadie te dijo que al empezar un blog tenías que saber además códigos escritos en chino o árabe, o lo que sea. Siempre te habían dicho que empezar un blog era sencillo… y gratis.


Gratis!!!


Bueno, al principio si te conformas con lo básico está bien. No tendrás ningún problema. El blog es gratis.


Pero cuando tu blog ya ha tomado forma, empiezas a tenerle cierto afecto como si se tratase de algo personal y se ha vuelto una especie de ritual sagrado escribir dos o tres entradas al mes, como mínimo, ahí la cosa cambia. Verlo como si se tratase de un blog cualquiera, sin ninguna mejora después de dedicarle bastante tiempo, es lógico que sintamos cierto remordimiento por no darle toda la atención que se merece.


Entonces empezamos a buscarle una nueva apariencia. Queremos, como es lógico, darle un aspecto de auténtico blog. Hombre, que queremos un blog profesional.


Indagamos por aquí, preguntamos por allá… Y nos enteramos que darle una nueva apariencia al blog nos costaría un ojo de la cara.


Que te ofrecen un blog creado, diseñado y listo para que sigas haciendo lo mismo que has estado haciendo hasta hoy por el mismo salario que tú ganas en un mes.


Lo sé. Suena a timo pero es así.


Y la idea de renovar tu blog se esfuma poco a poco.


Pero como eres de esos que han escuchado que solo los cobardes se rinden, vuelves a la carga y te pones a buscar en internet las opciones de themes, plantilla, o diseños para blogs gratis. Y te topas con un montón de oportunidades.


La desgracia es que para implementarlas en tu blog debes tener “mínimos” conocimientos de código html.


Y cuando se refieren a “mínimos conocimientos” están diciendo que si no sabes lo que haces ni te metas en camisa de once varas. 


De lo contrario, si tienes suerte y no haces mierda el blog, la nueva plantilla tendrá todos los enlaces apuntando a la propia página del creador de la plantilla que quieres poner y a sus redes sociales. Y tu blog y tus redes sociales desaparecerán sin dejar rastro. Eso si tienes suerte.


Si no, tu blog ni siquiera tendrá forma de blog. Será un amasijo de códigos y demás cosas que ni te cuento. Y desde allí serás un cadáver desmenuzado (tu blog ni siquiera tendrá una muerte digna, osea ni siquiera será abandonado, estará hecho pedazos, vagando sin sentido por la web sin que lo puedas recuperar intacto).


Triste, verdad. Y patético.


Pero si te sirve de consuelo, déjame decirte que eso le pasa a la mayoría. No serás el único.


Pero si lo que quieres es realmente seguir con el blog que has creado y no necesariamente perder el tiempo en aprender códigos ni enlaces para darle una nueva apariencia a tu blog, déjame decirte que yo puedo ayudarte.


Por si necesitas ayuda para cambiar el theme de tu blog.


Lo que para ti puede ser una pesadilla o una travesía insufrible, para quienes tenemos un poquito de conocimiento de código html se nos hace menos frustrante.


Y lo que para muchos puede significar la diferencia entre seguir o abandonar el blog, para otros no es más que cuestión de mover aquí y allá unas cuantas cosillas.


Esta entrada está creada para aquellos que se han animado a darle un aspecto mejorado a su blog y cambiar de aires.


No es nada del otro mundo. Puedes elegir algunos themes gratuitos que he elegido por si te animas por alguno.



 






En este enlace puedes acceder a esta entrada para saber cómo puedes hacer para tener el nuevo theme ya instalado y configurado con todos los enlaces hacia tí para que no tengas de qué preocuparte. 


Solo es cuestión de que te animes.



También puedes escribirme por si tienes alguna inquietud.



16 mayo 2017

Poner caja -o bloque- de colores para resaltar texto de una entrada

Resaltar parte del texto de una entrada podría ayudarnos a indicar al lector que esa parte podría resultarle interesante

En una entrada siempre es conveniente resaltar alguna parte de esa entrada que a nuestro juicio nos parece no solo necesario sino importante, pues esto vendría a dar más énfasis a lo que queremos decir en esa entrada. Hacerlo no tiene nada de extraordinario ni tampoco hay que ser experto en código html. Apenas si debemos saber manejar unas cuantas teclas y listo.

¿De qué caja de colores hablo? 

Pues más o menos de esto:

Aquí puedes poner el texto que quieres resaltar dentro de la caja

Aquí puedes poner el texto que quieres resaltar dentro de la caja

¿Qué te parece? Pues tampoco es que fuese lo máximo pero de que resulta simpático hay que admitirlo. Y de que nos ayudaría a resaltar parte del texto que nos interesa de nuestra entrada, pues ni dudarlo.

Así que sin más vayamos a ver cómo podemos ponerlo en nuestro blog. Lo primero que hay que hacer es entrar en el blog, ir hasta personalizar, opciones avanzadas y al final hasta llegar a agregar CSS. Allí vamos a pegar el siguiente código:

/* Content Boxes
———————————————————— */
.content-box-blue,
.content-box-gray,
.content-box-green,
.content-box-purple,
.content-box-red,
.content-box-yellow {
margin: 0 0 25px;
overflow: hidden;
padding: 20px;
border-radius: 9px;
-webkit-box-shadow: 1px 1px 4px 0px #CCC;
box-shadow: 1px 1px 4px 0px #CCC;
}
.content-box-blue {
background-color: #d8ecf7;
border: 1px solid #afcde3;
}
.content-box-gray {
background-color: #e2e2e2;
border: 1px solid #bdbdbd;
}
.content-box-green {
background-color: #d9edc2;
border: 1px solid #b2ce96;
}
.content-box-purple {
background-color: #e2e2f9;
border: 1px solid #bebde9;
}
.content-box-red {
background-color: #f9dbdb;
border: 1px solid #e9b3b3;
}
.content-box-yellow {
background-color: #fef5c4;
border: 1px solid #fadf98;
}
[/css]
Perfecto. Este será el que le dé la forma a la caja de colores. Damos en aplicar al blog y cuando vayamos a escribir una entrada en el blog tendremos que pegar este otro código en el lugar que queremos que quede:

<div class="content-box-purple" style="color:#fa8531">Aquí puedes poner el texto que quieres resaltar dentro de la caja</div><br/>

Este código debes pegar cuando escribes tu entrada en la opción html y no en la opción redactar pues aunque muchos blogs interpretan el thml, hay otros que lo ponen tal como lo pegas si escribes en redactar, por eso es mejor no correr riesgos y hacer las cosas de modo correcto.

En el primer código están los bloques de colores que tienen cada bloque, solo debes elegir el color de fondo que desees, yo aquí elegí el purple. En #fa8531 es el color de la leyenda que pondrás dentro de ese cuadro. También puedes sustituirlo con el código de color que desees.  

Aunque hay códigos más cortos y listos para tan solo pegar, el inconveniente con estos es que si no se los pone dentro del blog donde debe ir el CSS, el día que te cambies de lugar o migres de sitio la función de este código se irá a la basura. Y quedarás con la triste tarea de actualizar todo lo que posteaste con ese código. Además, ponerlo en el blog, blogger te lo facilita por lo que es mejor hacerlo como debe ser.

31 enero 2016

Hacer que la url de las entradas de tu blog se muestren al imprimir la entrada


Existen blogs, como los de noticias, blogs de cocina, remedios caseros, etc., en los que el autor pone enlaces en las entradas, ya sea a su twitter, su Facebook, o a algún vídeo en particular al que quiere hacer referencia, y si el lector quiere imprimir dicha entrada, nos gustaría que dichos links o enlaces de las entradas salgan impresos en la hoja que se imprime. Estos son bastante útiles y muy convenientes. Nosotros también podemos ponerle esa opción a nuestro blog. Ya sabes, así nos aseguramos que el link de nuestro blog esté siempre presente y a lo mejor nos ganamos uno que otro visitante permanente. E incluso, esto nos resulta conveniente para recordarles a quienes imprimen  nuestra entrada que ésta nos pertenece. Claro, siempre que tus entradas sean de tu autoría.

Y poner este truco no nos lleva más de unos pocos minutos, y su utilidad puede ser muy beneficiosa para nosotros.


Para hacerlo, entren en Plantilla, Editar Html, y pega antes de </head> este código:


<style media='print' type='text/css'>
a:after {
content:" (" attr(href) ") ";
font-size:0.9em;
font-weight:normal;
font-style:italic;
}
.Header h1 a:after, .post-title a:after, .separator a:after { {
content:"";
}
</style>



Así, cuando tengas unos enlaces puestos en alguna entrada de tu blog, dichos enlaces aparecerán tal cual, a la hora de imprimir la entrada.

03 enero 2016

Poner caja de suscripción con imagen en el blog.



Me preguntaban el otro día cómo podían poner una caja de suscripción en la que podamos ponerle la imagen que queramos. Los gadgets que nos ofrece Blogger son bastantes sencillos pero fácilmente lo podemos modificar para que dentro de ese gadget, o el mismo gadget, se adapte a nuestros gustos, sin perder su utilidad práctica.

Personalizarlo no nos tomará mucho tiempo, y el resultado es bastante bueno.

Para ello, necesitamos tener ya elegida la url de la imagen que vamos a poner con anterioridad, que será la que pongamos como fondo del gadget. Quienes preguntaban querían poner de fondo la imagen de su perfil. Se puede poner cualquier imagen. Hecho esto, entramos en Diseño, Añadir Gadget, Html, y allí pegamos el siguiente código:



<center><form style="border:1px solid #fff;padding:3px;text-align:center; width:auto; height:auto; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY4GOUA7g31jtfy4HngnW1uAI2tsZBmgGsPjPddHnVGcWD9Ys7H08K99cPYEi4JPHqP3_xEFuyQ8q2CovWEmMWVOJsh4FfDChrrQi-CkIqsMBOXe7mikisMi3N_8daKCBlWGAJ6fPBTaw/s675-Ic42/bloger%252526bloger.jpg) no-repeat 0 10px" action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=BlogerBloger', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Recibe las últimas actualizaciones<br />Directamente en tu blog</p><p><input type="text" style="width:140px" name="email"/></p><input type="hidden" value="BlogerBloger" name="uri"/><input type="hidden" name="loc" value="es_ES"/><input type="submit" value="¡Hecho!" /></form></center>



Cambien lo que está en rojo por la dirección del feed de su blog, Puedes consultar el feed de tu blog entrando en FeedBurner con tu misma cuenta de Google. Cambia lo que esta resaltado en verde por la url de tu imagen. Si no sabes cómo obtener la url de una imagen, aquí te digo cómo. Donde pone  width:auto;  height:auto; es el alto y ancho de la imagen que pondrás como fondo, y que, por defecto, se ajustará al gadget donde lo pongas. Si quieres personalizarlo a tu gusto o de acuerdo a la medida que quieras, solo debe reemplazar auto por los valores que tenga la imagen. De modo que quede así:  width:750px; height:200px; Si quieres que las letras queden un poco más a tu derecha, cambia center por right o left para ponerlo a la izquierda. Cambia donde pone Recibe las últimas actualizaciones  <br /> Directamente en tu blog por la leyenda que quieras, teniendo en cuenta de no eliminar <br /> que es lo que le da un salto de línea a la frase. Si la eliminas las palabras no entrarán en la imagen. Recuerda que debes la dirección de tu blog, y listo.

Puedes ver el gadget al final del blog, y si, de paso, quieres probarlo, suscríbete.

Luego me cuentas.

17 diciembre 2015

16 diciembre 2015

Poner siempre una misma entrada en el blog


A veces es muy necesario que nuestro blog presente una entrada en particular que muestre a nuestros visitantes esa entrada con información que a nuestro juicio puede resultar interesante o de valiosa ayuda a quienes visitan el blog.

Hacer que dicha entrada aparezca siempre en primer plano cada vez que alguien entra en el blog es muy sencillo. Solo debemos tener en cuenta ciertos pasos a seguir una vez que tengamos publicada la entrada en cuestión.

Primero publicamos la entrada que queremos que se muestre siempre al principio de todas las entradas, y una vez publicada la entrada (se la publica igual que cualquier entrada) nos vamos a escritorio, editar entrada, y una vez allí, seleccionamos la entrada que queremos se muestre siempre en primer lugar. A esa entrada le editamos la fecha de publicada. Te explico. La entrada que seleccionamos tiene la fecha normal de publicada, o sea, la fecha actual. Allí, le cambias la fecha actual por una que sea un poco más adelante (si la entrada que quieres mostrar tiene como fecha 15 diciembre 2015, la cambias a 15 diciembre 2020) y listo. Así, la entrada siempre aparecerá en primer lugar aún si después de ella publicas otras entradas.

Si quieres que la entrada vuelva al lugar normal, solo tienes que editar la fecha de publicación y todo volverá a su normalidad.

Esto es bastante conveniente cuando lo que queremos es mostrar o destacar alguna entrada en particular, ya sea alguna noticia en particular o alguna promoción que realices en tu blog. Una vez que se consiguió nuestro propósito volvemos la entrada a su normalidad.


Espero que este truco te haya servido de ayuda. 

23 julio 2015

Poner imágenes o videos en los comentarios del blog


Existe una manera muy sencilla para que nuestros lectores puedan poner una imagen o video en los comentarios de nuestro blog.
Claro que para ello nosotros debemos insertar un código dentro de nuestra plantilla para que este truco de resultado y así nuestros lectores puedan hacerlo.
Este truco lo hizo el potro y me pareció baste útil y fácil de realizar.
Lo primero que deben tener en cuenta es que este truco se tiene que utilizar con moderación o nuestro blog se resentirá por el exceso de carga y tardará en mostrarse la entrada en cuestión. Recuerden que este truco solo funciona en las entradas individuales.
Dicho esto, sigamos con el truco. Primero entren en plantilla, edición html, y antes de  </body> peguen este script:

<script>
//<![CDATA[
// Insertar imágenes y videos en los comentarios (ciudadblogger.com)
function InsertarImagenVideo(id) { 
var IDelemento = document.getElementById(id),
sustituir = IDelemento.innerHTML;
sustituir = sustituir.replace(/\[img\](.[^\]]*)\[\/img\]/ig, "<img class='img-comentarios' src='$1'\/>");
sustituir = sustituir.replace(/\[video\]https:\/\/www\.youtube\.com\/embed\/(.*?)\[\/video\]/ig, "<iframe class='vid-comentarios' src='https://www.youtube.com/embed/$1'><\/iframe>");
sustituir = sustituir.replace(/\[video\](https:\/\/youtu\.be\/|https:\/\/www\.youtube\.com\/watch\?v\=)(.*?)\[\/video\]/ig, "<iframe class='vid-comentarios' src='https://www.youtube.com/embed/$2'><\/iframe>");
sustituir = sustituir.replace(/\[video\](http:\/\/youtu\.be\/|http:\/\/www\.youtube\.com\/watch\?v\=)(.*?)\[\/video\]/ig, "<iframe class='vid-comentarios' src='https://www.youtube.com/embed/$2'><\/iframe>");
sustituir = sustituir.replace(/\[video\](http:\/\/player\.vimeo\.com\/video\/)(.*?)\[\/video\]/ig, "<iframe class='vid-comentarios' src='http://player.vimeo.com/video/$2'><\/iframe>");
document.getElementById(id).innerHTML = sustituir;} InsertarImagenVideo('comment-holder');
//]]>
</script>
<style>
<!--
#comment-holder .img-comentarios, #comment-holder i[rel="image"] {
max-width: 450px;
width: auto;
height: auto;
display: block;
border: 5px solid #FFF;
margin: 0 auto;
padding: 0;
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1); 
}
#comment-holder .vid-comentarios {
width: 450px; 
height: 253px; 
display: block;
margin: 0 auto;
padding: 0;
border: 5px solid #FFF; 
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1); 
}
-->
</style>


Con esto, los que comenten podrán insertar un video o una imagen con tal solo poner la url del video o la imagen en sus comentarios, poniendo tan solo este código:

[img]URL de la imagen[/img] para imagen, y

[video]URL del video[/video] para video.

Lógicamente deberán reemplazar la url del video o la imagen por la url del video o imagen que deseen.

18 julio 2015

Poner aviso de políticas de uso de cookies en el blog


Aunque solo es obligatorio cuando se utiliza google analytics, el uso del aviso de políticas del uso de cookies en la web ya se ha generalizado por casi toda la red. Y esto en parte se debe a que al principio una ley obligaba a que toda página web advierta a los visitantes que están siendo monitoreados y que el "rastro" que dejaban al navegar por la web iba a ser usada por google  para conocer más sobre gustos y preferencias del visitante y de acuerdo a esa información, google podría ofrecerle información "más relevante", lo que a ciertos "defensores de la privacidad" les pareció que vulneraba derechos.

En fin, que, so pena de recibir una multa que no es para nada tranquilizadora (algunos dicen que se trata de muchos miles de dólares) nos veremos en la imperiosa necesidad de poner nuestro aviso de cookies para alertar a nuestros visitantes.

La buena noticia es que poner este gadget no es complicado. Solo debes ir a diseño, agregar un gadget html y pegar allí este código:

<div id="barritaloca" style="display:none;position:fixed;left:0px;right:0px;bottom:0px;width:100%;min-height:40px;background: #f3f3f3;color:#000000;z-index: 99999;">
<div style="width:100%;position:absolute;padding-left:5px;font-family:verdana;font-size:12px;top:30%;">
 Estamos obligados a avisarte que esta web utiliza cookies de todos lados para fastidiarte, asi que si continúas navegando aceptas esta política absurda de cookies.
 <a href="javascript:void(0);" style="padding:4px;background:#000;text-decoration:none;color:#f1f1f1;" onclick="PonerCookie();"><b>Acepto</b></a>
 <a href="http://www.google.com/intl/es-419/policies/technologies/cookies/" target="_blank" style="padding-left:5px;text-decoration:none;color:#666666;">Conoce más</a>
</div>
</div>
<script>
function getCookie(c_name){
 var c_value = document.cookie;
 var c_start = c_value.indexOf(" " + c_name + "=");
 if (c_start == -1){
  c_start = c_value.indexOf(c_name + "=");
 }
 if (c_start == -1){
  c_value = null;
 }else{
  c_start = c_value.indexOf("=", c_start) + 1;
  var c_end = c_value.indexOf(";", c_start);
  if (c_end == -1){
   c_end = c_value.length;
  }
  c_value = unescape(c_value.substring(c_start,c_end));
 }
 return c_value;
}
function setCookie(c_name,value,exdays){
 var exdate=new Date();
 exdate.setDate(exdate.getDate() + exdays);
 var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
 document.cookie=c_name + "=" + c_value;
}
if(getCookie('aviso')!="1"){
 document.getElementById("barritaloca").style.display="block";
}
function PonerCookie(){
 setCookie('aviso','1',365);
 document.getElementById("barritaloca").style.display="none";
}
</script>

Lo que puedes personalizar para que el aviso te quede chido. El aviso Estamosobligados..., que puedes poner la lectura que se te ocurra siempre recuerda hacer alusión a la política de cookies; en background: #f3f3f3 que es el color de fondo del aviso y color:#000000 que es el color de las letras. También puedes cambiar  background:#000;text-decoration:none;color:#f1f1f1 que es el color de fondo y de la palabra acepto.

Aunque a mi me gusta tal como muestra la imagen, ustedes pueden personalizarla de acuerdo a su gusto.



12 julio 2015

Sácale partido al enlace "leer más"


La mayoría de los blogs traen por defecto el enlace de "leer más" en su plantilla,  pero así mismo, la mayoría ignora el verdadero valor de éste enlace y sus ventajas...

Si bien es cierto que para todos es sabido que éste truco tan solo se limita a acortar una entrada extensa, su utilidad va un poco más allá de simplemente minimizar una entrada bastante larga.

Todos queremos que nuestro blog sea rápido al cargar nuestras entradas, y más aún si en él hemos puesto algunas imágenes o videos. Y si nuestro blog se demora en mostrar esas imágenes, o videos, corremos el riesgo de que nuestro visitante pierda la paciencia y opte por abandonar nuestro blog a medio cargar. Es que en esto de velocidad en la web, los segundos son cruciales. Unos cuántos segundos de más y pasamos al olvido. Es así de simple.

Pero, precisamente es allí donde el enlace de "leer más" entra en acción. A todos nos gusta que nuestro blog muestre la mayor cantidad de entradas posibles, en un tiempo récord, y este enlace nos ayuda a que nuestras entradas extensas se "compriman", dejando que las imágenes o videos que están dentro de las entradas se muestren únicamente cuando se pinche en una entrada específica, ganando segundos que pueden marcar la diferencia entre seguir o abandonar nuestro blog...

Sí, es sencillo, pero muchos pasamos por alto este detalle que, usándolo de manera apropiada, nos puede ayudar a optener muchos más visitantes. La idea es hacer efectivo nuestro propósito: que nuestro visitante permanezca en el blog y se interese por nuestra entrada. 

No se trata de eliminar imágenes sino que, situándolas de manera estratégica darle mayor soltura a la carga del blog... Y con  ello ganamos mucho más de lo que de manera habitual no podríamos. Y si nuestro blog esta repleto de scripts o artilugios, el tiempo de carga será un verdadero suplicio.

Así que si quieres ganar segundos que hagan la diferencia, empieza a ordenar las entradas del blog de manera estratégica y sácale ventaja al enlace, que, aunque no lo creas, es de mucha utilidad.

19 junio 2015

Nuevo likebox de facebook en el blog


Facebook ha dicho que dejará de dar soporte al likebox (la famosa caha de "me gusta") y en su lugar proporcionará uno mejorado. Así que los que teníamos el likebox instalado en nuestro blog no nos queda más remedio que aceptar los cambios y acomodarnos al nuevo.

Al principio me pareció tedioso tener que cambiar nuevamente los códigos, mover aquí, reemplazar allá. Pero cuando fui a la página de facebook developers para conocer el nuevo likebox (ahora le llaman"page plugin" o botón de página) de verdad me pareció bastante chulisimo y (como dirían los gringos: más very good)

Pues nada, que aquí les digo como cambiarlo de manera rápida y sin mucho lío.

Una ves que están en la página de facebook, ponen los datos que les piden (tu id de facebook), y si no quieren complicarse la vida editando tamaño, color, etc, lo dejan de la medida que esta allí por defecto. Si quieren que la nueva cajita les salga con un enlace de la entrada de su pagina de facebook, marcan la casilla "show page post". Y tendrán algo así como esto:

SI no quieren lo desmarcan, y asi saldrá la caja normal.

Luego de esto dan en generar código y aparecera dos códigos que deberan copiar y pegarlos juntos en un gadget del blog.

Estos son los códigos. Los he unido para que formen un solo cuerpo.

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/es_LA/sdk.js#xfbml=1&version=v2.3";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-page" data-href="https://www.facebook.com/149171335193313" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" data-show-posts="false"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/149171335193313"><a href="https://www.facebook.com/149171335193313">Bloger &amp; Bloger</a></blockquote></div></div>

No olviden cambiar la cuenta de facebook por la de ustedes (esa que está en números, se repite 3 veces) y poner guardar.

Si lo hicieron bjen, el nuevo likebox tendra que aparecer mas o nenos así:



Recuerden que si quieren personalizarlo deben cambiar las medidas en width= y en height dentro de la misma página de facebook

Por lo demás, la cosa no es nada del otro mundo...
Y ya que estás aquí, aprovecha y dale like, te lo agradeceré.

18 junio 2015

Estoy de vuelta...


Hace bastante tiempo que no me he preocupado de escribir en este blog. Y no es que no haya querido hacerlo o ya no me interese, desgraciadamente fue algo que no estuvo en mis manos que me obligó a tomar en aquella ocasión esa decisión.

Sucedieron un montón de cosas y todas casi al mismo tiempo que prácticamente no me dejaron otra alternativa. Pero en ningún momento se me pasó por la cabeza abandonar este blog.

Me gusta escribir en este blog, y ayudar a rediseñarlos me encanta todavía más.

Soy un apasionado del diseño web.

Pero las circunstancias...

Hoy, después de mucho abandono, y algo de tiempo recuperado, me he sentado en mi escritorio y espero volver a recuperar este blog.

Ya no estoy tan consumido por el tiempo y ya no tengo tantas cosas que hacer al mismo tiempo, ni con tanto apremio.

Estos días lo he vuelto a revisar y me ha traído tantos y tan valiosos recuerdos...

Hoy las aguas se han calmado y he vuelto a donde -ahora lo sé- no debí haberme ido nunca, o por lo menos, no debí abandonar del todo.

Trataré de escribir lo más seguido posible, y haré lo que esté en mis manos por responder los comentarios que me escriban.

Gracias a los que aún visitan este blog. Y un millón de gracias a los que me ayudaron con sus comentarios.

A todos... Dios les pague.




03 noviembre 2013

Galería de videos en el blog

Galería de videos en el blog
Aunque poner un video de youtube en el blog es relativamente sencillo (solo es cuestión de copiar y pegar el código donde queramos y listo) la cosa cambia cuando queremos mostrar en el blog más de un video, y hacer que estos se muestren tipo galería para ir mostrándolos de uno en uno es algo que a cualquiera le provoca un dolor de cabeza, a menos que se tenga un poco más de conocimientos básicos de HTML. Eso era lo que yo me temía pero no…

Hace un buen tiempo que me preguntaba cómo hacer para poner una galería de videos en el blog. Y aunque existen bastantes plantillas que ya vienen con esta galería incluida por defecto, personalizarla o mover el script resultaba más que agotador.  Y en realidad incluir esta galería de videos en el blog no resultó tan complicada que digamos (ya saben, aquí fue cierto aquello de que “no es tan fiero el león como lo pintan”) y resulta que hasta mi hija de 14 años lo pudo hacer (y eso me trajo sentimientos encontrados: no sabía si alegrarme o entristecerme) En fin, que pueden ver cómo funciona en este blog de pruebas.

Para ponerlo en el blog, primero entren en Plantilla, Edición Html y antes de </head> pegan el siguiente script:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>


Listo. Guardamos la plantilla siempre dando vista previa por si algo hicimos mal y ahora entramos en Diseño, Añadir Gadget, Html y pegas el siguiente código:

 <center><div id="contenedorYT">Cargando ...</div>

<script type="text/javascript">
swfobject.embedSWF(
'http://www.youtube.com/v/qahBeZB1g54&autoplay=1&enablejsapi=1&rel=0&fs=1',
'contenedorYT',
'640','390', '8',null,null,
{allowScriptAccess: 'always',allowFullScreen: 'true'},
{id: 'reproductorYT'});

function playVideo(id) {
var o = document.getElementById( 'reproductorYT' );
if( o ) {o.loadVideoById( id );}
}
</script></center>
<br/>
<div class="videominiaturas">
<a href="javascript:playVideo('J3OtzDWBwOo');"><img src="http://img.youtube.com/vi/J3OtzDWBwOo/1.jpg" /></a>
<a href="javascript:playVideo('FOJq2dYb4xI');"><img src="http://img.youtube.com/vi/FOJq2dYb4xI/1.jpg" /></a>
<a href="javascript:playVideo('fyWjmlMK8Qg');"><img src="http://img.youtube.com/vi/fyWjmlMK8Qg/1.jpg" /></a>
<a href="javascript:playVideo('Y1cTclxGE64');"><img
src="http://img.youtube.com/vi/Y1cTclxGE64/1.jpg" /></a>
<a href="javascript:playVideo('NY9BtBiUUG8');"><img src="http://img.youtube.com/vi/NY9BtBiUUG8/1.jpg" /></a>
<a href="javascript:playVideo('QUlYbhfpoKU');"><img src="http://img.youtube.com/vi/QUlYbhfpoKU/1.jpg" /></a>
<a href="javascript:playVideo('rU72Kc5yCHI');"><img src="http://img.youtube.com/vi/rU72Kc5yCHI/1.jpg" /></a>
</div>

Reemplazas la ID de los videos en los dos lados que pide y que están resaltados con rojo y listo. Puedes aumentar o disminuir los videos miniaturas con solo eliminar este código:

<a href="javascript:playVideo('rU72Kc5yCHI');"><img src="http://img.youtube.com/vi/rU72Kc5yCHI/1.jpg" /></a>

Si quieres que el video principal empice a “rodar” automáticamente al igual que lo hacen los videos en Youtube, pega el código tal cual, pero si no lo quieres así solo elimina lo que está resaltado en azul y listo.

Se puede modificar el ancho y alto del video principal (640 x 390) para que se ajuste al ancho y alto de cada blog, eso ya dependerá de cómo lo quiera cada quien y dónde lo ponga, yo he puesto 7 miniaturas pues he practicado en un gadget debajo de las entradas con todo el ancho del blog (de ahí que el video principal es del mismo tamaño que el de Youtube) pero si desean ponerlo en una sidebar las medidas del video lo tienen que acomodar de acuerdo al ancho de esa sidebar, al igual que las miniaturas. Por lo demás, la galería funciona muy bien.

BLOGER & BLOGER ® 2020 | Plantilla Adaptada y Rediseñada Por Bloger & Bloger