-->
Mostrando entradas con la etiqueta blogger. Mostrar todas las entradas
Mostrando entradas con la etiqueta blogger. Mostrar todas las entradas

Cómo insertar vídeo YouTube responsive

Insertar vídeo YouTube responsive

En el artículo de hoy vamos a explicar cómo insertar un vídeo de YouTube responsive a través de un ejemplo gráfico.

Pero antes de mostrar cómo se inserta un vídeo de YouTube de manera responsive os contaré que un diseño responsive redimensiona y coloca los elementos de una página web de forma que se adapten al ancho de cada dispositivo permitiendo una correcta visualización y una mejor experiencia de usuario.

Cómo añadir un banner a mi Blogger



En este artículo vamos a ver cómo añadir un banner en la barra lateral de Blogger, en este caso añadiremos un banner compuesto por 4 imágenes de 125 x 125. Para que podamos añadir este banner a la barra lateral de nuestro Blogger ésta debe tener un ancho mínimo de 280px.

PASOS PARA AÑADIR UN BANNER LATERAL EN BLOGGER

Como podréis comprobar a continuación añadir un banner en la barra lateral de Blogger es un procedimiento sencillo, tan solo deberéis seguir los siguientes pasos:

  1. Paso 1 Dirigirse a la sección Diseño > Edición de HTML y buscar el siguiente texto ]]></b:skin>
  2. Paso 2 Pegar el siguiente código:
    /* PERSONALIZACIÓN BANNERS DE 125 x 125
    ---------------------------------------------------- */
    .BannerLateral {
    margin-top:5px;
    margin-left:5px;
    }
    .BannerLateral img {
    padding: 4px;
    margin-bottom: 5px;
    }
  3. Paso 3 Una vez pegado el código anterior tendremos que añadir un gadget de tipo HTML/Javascript por lo que nos dirigimos a la sección Diseño > Añadir un gadget > HTML/Javascript y pegamos el siguiente código:
    <div class="BannerLateral">
    <a href="URL del enlace"><img src="URL de la imagen" width="125px" height="125px" /></a>
    <a href="URL del enlace"><img src="URL de la imagen" width="125px" height="125px" /></a>
    <a href="URL del enlace"><img src="URL de la imagen" width="125px" height="125px" /></a>
    <a href="URL del enlace"><img src="URL de la imagen" width="125px" height="125px" /></a>
    </div>
  4. Paso 4 Una vez que hayáis añadido el gadget tendréis que personalizarlo cambiando el texto que aparece en rojo por vuestros datos.


Si te ha gustado el artículo sobre cómo añadir un banner en la barra lateral de Blogger puedes colaborar con este Blog visitando a nuestros patrocinadores, con esto me ayudarás a mantener el Blog y pueda escribir más artículos.

ARTÍCULOS QUE TE PUEDEN INTERESAR

Cómo crear un mapa del sitio para Blogger

Una de las limitaciones que nos encontramos en Blogger es que no existe un mapa del sitio o sitemap que permita a nuestros lectores encontrar el contenido que buscan.

En este artículo veremos cómo crear un mapa del sitio para Blogger que muestre un índice con todos los post de nuestro Blogger ordenados por categorías.



Si queréis ver el funcionamiento del mapa del sitio para Blogger podéis hacerlo pinchando aquí.

CÓMO CREAR UN MAPA DEL SITIO PARA BLOGGER

Para crear el mapa del sitio en vuestro Blogger deberéis seguir los siguientes pasos:

  • Paso 1. Acceder al panel de control de vuestro Blogger.
  • Paso 2. Dirigirse a la sección Páginas -> Página nueva -> HTML
  • Paso 3. Pegar el siguiente código:
    <style>
    p.labels a{color: #242424; text-transform: uppercase;font-size: 15px;}
    a.post-titles {color: #0000FF;}
    ol li{list-style-type:decimal;line-height:25px;}
    </style>
    <script>
    //<![CDATA[ var postTitle=new Array();var postUrl=new Array();var postPublished=new Array();var postDate=new Array();var postLabels=new Array();var postRecent=new Array();var sortBy="titleasc";var tocLoaded=false;var numChars=250;var postFilter="";var numberfeed=0;function bloggersitemap(a){function b(){if("entry" in a.feed){var d=a.feed.entry.length;numberfeed=d;ii=0;for(var h=0;h<d;h++){var n=a.feed.entry[h];var e=n.title.$t;var m=n.published.$t.substring(0,10);var j;for(var g=0;g<n.link.length;g++){if(n.link[g].rel=="alternate"){j=n.link[g].href;break}}var o="";for(var g=0;g<n.link.length;g++){if(n.link[g].rel=="enclosure"){o=n.link[g].href;break}}var c="";if("category" in n){for(var g=0;g<n.category.length;g++){c=n.category[g].term;var f=c.lastIndexOf(";");if(f!=-1){c=c.substring(0,f)}postLabels[ii]=c;postTitle[ii]=e;postDate[ii]=m;postUrl[ii]=j;postPublished[ii]=o;if(h<10){postRecent[ii]=true}else{postRecent[ii]=false}ii=ii+1}}}}}b();sortBy="titleasc";sortPosts(sortBy);sortlabel();tocLoaded=true;displayToc2();document.write('</br><div class="sitemap-link"><a href="http://tutorialesyopiniones.blogspot.com.es/2015/03/como-crear-un-sitemap-para-blogger.html" style="font-size: 10px; text-decoration:none; color: #5146CD;">Obtener este widget</a></div>')}function filterPosts(a){scroll(0,0);postFilter=a;displayToc(postFilter)}function allPosts(){sortlabel();postFilter="";displayToc(postFilter)}function sortPosts(d){function c(e,g){var f=postTitle[e];postTitle[e]=postTitle[g];postTitle[g]=f;var f=postDate[e];postDate[e]=postDate[g];postDate[g]=f;var f=postUrl[e];postUrl[e]=postUrl[g];postUrl[g]=f;var f=postLabels[e];postLabels[e]=postLabels[g];postLabels[g]=f;var f=postPublished[e];postPublished[e]=postPublished[g];postPublished[g]=f;var f=postRecent[e];postRecent[e]=postRecent[g];postRecent[g]=f}for(var b=0;b<postTitle.length-1;b++){for(var a=b+1;a<postTitle.length;a++){if(d=="titleasc"){if(postTitle[b]>postTitle[a]){c(b,a)}}if(d=="titledesc"){if(postTitle[b]<postTitle[a]){c(b,a)}}if(d=="dateoldest"){if(postDate[b]>postDate[a]){c(b,a)}}if(d=="datenewest"){if(postDate[b]<postDate[a]){c(b,a)}}if(d=="orderlabel"){if(postLabels[b]>postLabels[a]){c(b,a)}}}}}function sortlabel(){sortBy="orderlabel";sortPosts(sortBy);var a=0;var b=0;while(b<postTitle.length){temp1=postLabels[b];firsti=a;do{a=a+1}while(postLabels[a]==temp1);b=a;sortPosts2(firsti,a);if(b>postTitle.length){break}}}function sortPosts2(d,c){function e(f,h){var g=postTitle[f];postTitle[f]=postTitle[h];postTitle[h]=g;var g=postDate[f];postDate[f]=postDate[h];postDate[h]=g;var g=postUrl[f];postUrl[f]=postUrl[h];postUrl[h]=g;var g=postLabels[f];postLabels[f]=postLabels[h];postLabels[h]=g;var g=postPublished[f];postPublished[f]=postPublished[h];postPublished[h]=g;var g=postRecent[f];postRecent[f]=postRecent[h];postRecent[h]=g}for(var b=d;b<c-1;b++){for(var a=b+1;a<c;a++){if(postTitle[b]>postTitle[a]){e(b,a)}}}}function displayToc(a){var l=0;var h="";var e="Post Title";var m="Click to sort by title";var d="Date";var k="Click to sort by date";var c="Category";var j="";if(sortBy=="titleasc"){m+=" (descending)";k+=" (newest first)"}if(sortBy=="titledesc"){m+=" (ascending)";k+=" (newest first)"}if(sortBy=="dateoldest"){m+=" (ascending)";k+=" (newest first)"}if(sortBy=="datenewest"){m+=" (ascending)";k+=" (oldest first)"}if(postFilter!=""){j="Click to view all"}h+="<table>";h+="<tr>";h+='<td class="header1">';h+='<a href="javascript:toggleTitleSort();" title="'+m+'">'+e+"</a>";h+="</td>";h+='<td class="header2">';h+='<a href="javascript:toggleDateSort();" title="'+k+'">'+d+"</a>";h+="</td>";h+='<td class="header3">';h+='<a href="javascript:allPosts();" title="'+j+'">'+c+"</a>";h+="</td>";h+='<td class="header4">';h+="Read all";h+="</td>";h+="</tr>";for(var g=0;g<postTitle.length;g++){if(a==""){h+='<tr><td class="entry1"><a href="'+postUrl[g]+'">'+postTitle[g]+'</a></td><td class="entry2">'+postDate[g]+'</td><td class="entry3">'+postLabels[g]+'</td><td class="entry4"><a href="'+postPublished[g]+'">Read</a></td></tr>';l++}else{z=postLabels[g].lastIndexOf(a);if(z!=-1){h+='<tr><td class="entry1"><a href="'+postUrl[g]+'">'+postTitle[g]+'</a></td><td class="entry2">'+postDate[g]+'</td><td class="entry3">'+postLabels[g]+'</td><td class="entry4"><a href="'+postPublished[g]+'">Read</a></td></tr>';l++}}}h+="</table>";if(l==postTitle.length){var f='<span class="toc-note">Show All '+postTitle.length+" Posts<br/></span>"}else{var f='<span class="toc-note">Show '+l+" posts by category '";f+=postFilter+"' the "+postTitle.length+" Total Posts<br/></span>"}var b=document.getElementById("toc");b.innerHTML=f+h}function displayToc2(){var a=0;var b=0;while(b<postTitle.length){temp1=postLabels[b];document.write("<p/>");document.write('<p class="labels"><a href="/search/label/'+temp1+'">'+temp1+"</a></p><ol>");firsti=a;do{document.write("<li>");document.write('<a class="post-titles" href="'+postUrl[a]+'">'+postTitle[a]+"</a>");if(postRecent[a]==true){document.write(' - <strong><span style="color: rgb(255, 0, 0);">¡Nuevo!</span></strong>')}document.write("</li>");a=a+1}while(postLabels[a]==temp1);b=a;document.write("</ol>");sortPosts2(firsti,a);if(b>postTitle.length){break}}}function toggleTitleSort(){if(sortBy=="titleasc"){sortBy="titledesc"}else{sortBy="titleasc"}sortPosts(sortBy);displayToc(postFilter)}function toggleDateSort(){if(sortBy=="datenewest"){sortBy="dateoldest"}else{sortBy="datenewest"}sortPosts(sortBy);displayToc(postFilter)}function showToc(){if(tocLoaded){displayToc(postFilter);var a=document.getElementById("toclink")}else{alert("Just wait... TOC is loading")}}function hideToc(){var a=document.getElementById("toc");a.innerHTML="";var b=document.getElementById("toclink");b.innerHTML='<a href="#" onclick="scroll(0,0); showToc(); Effect.toggle('toc-result','blind');">?? Display Table of Contents</a> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSkUj3rVjx_q_bWODJ9oeUz_K-MPb_EUkxTuz_LzOX1v672gaGXAtUTRoactu6pet8loajrDRrj58hotUzzDfbX1QvtCJ4s5jI2M37HJ8a61wrvbPafXQcWQE8dF_vZlydXknpOsZpPUsW/s1600/new_icon.gif"/>'}function looptemp2(){for(var a=0;a<numberfeed;a++){document.write("<br>");document.write('Post Link : <a href="'+postUrl[a]+'">'+postTitle[a]+"</a><br>");document.write('Read all : <a href="'+postPublished[a]+'">'+postTitle[a]+"</a><br>");document.write("<br>")}}; //]]>
    </script>
    <script src="http://tutorialesyopiniones.blogspot.com.es/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=bloggersitemap">
    </script>

    Una vez que hayáis pegado el código tendréis que sustituir la URL de mi Blog escrita en azul por la URL de vuestro Blogger.
  • Paso 4. En la columna de la derecha hacer click en Opciones -> No permitir, ocultar los publicados
  • Paso 5. Para acabar deberéis pulsar el botón Actualizar.
Si habéis seguido todos los pasos obtendréis un sitemap ordenado alfabéticamente que se actualizará automáticamente cada vez que publiquéis un post.


Si te ha gustado el artículo sobre cómo crear un sitemap o mapa del sitio para Blogger puedes colaborar con este Blog visitando a nuestros patrocinadores, con esto me ayudarás a mantener el Blog y pueda escribir más artículos.

ARTÍCULOS QUE TE PUEDEN INTERESAR

Widget últimas entradas Blogger

Un widget que muestre las últimas entradas de Blogger es sin lugar a dudas una herramienta muy útil para mostrar a nuestros lectores las últimas novedades de nuestro Blog.

Añadiendo las últimas entradas de nuestro Blog a la página de inicio además de mostrar las últimas novedades permitimos a nuestros lectores una navegación rápida e intuitiva por nuestro Blog por lo que os recomiendo a todos que incluyáis un widget con las últimas entradas en vuestro Blogger.

PASOS PARA CREAR UN WIDGET CON LAS ÚLTIMAS ENTRADAS DE BLOGGER

Crear nuestro propio widget con las últimas entradas para Blogger es una tarea sencilla, simplemente tenéis que seguir los pasos que a continuación os dejo:
  • Paso 1. Deberemos acceder al panel de administración de nuestro Blogger.
  • Paso 2. Acceder a la sección "Diseño" y hacer click sobre "Añadir un gadget".
  • Paso 3. De la lista de gadgets disponibles seleccionar "HTML/JavaScript".
  • Paso 4. Pegar el siguiente código:

    <div class="recentpoststyle">
    <script src="https://dl.dropboxusercontent.com/u/41911263/recentposts.js"></script>
    <script>
    var posts_no = 5;var posts_date = true;var post_summary = true;var summary_chars = 80;</script>
    <script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showlatestposts">
    </script><a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://tutorialesyopiniones.blogspot.com.es/2015/03/widget-ultimas-entradas-blogger.html" rel="nofollow">Widget últimas entradas Blogger</a>
    <noscript>Tu navegador no soporta JavaScript</noscript>
    <style type="text/css">
    .recentpoststyle {counter-reset: countposts;list-style-type: none;}
    .recentpoststyle a {text-decoration: none; color: #49A8D1;}
    .recentpoststyle a:hover {color: #000;}
    .recentpoststyle li:before {content: counter(countposts,decimal);counter-increment: countposts;float: left;z-index: 2;position:relative;font-size: 20px;font-weight: bold;color: #fff;background: #69B7E2; margin: 15px 5px 0px -6px; padding: 0px 10px; border-radius: 100%;}
    li.recent-post-title { padding: 5px 0px;}
    .recent-post-title { font-family: "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;}
    .recent-post-title a {color: #444;font-size: 13px; text-decoration: none; padding: 2px; font-weight: bold;}
    .post-date {padding: 5px 2px 5px 30px; font-size: 11px; color: #999; margin-bottom: 5px;}
    .recent-post-summ { border-left: 1px solid #69B7E2; color: #777; padding: 0px 5px 0px 20px; margin-left: 11px; font-family: Garamond,Baskerville,"Baskerville Old Face","Hoefler Text","Times New Roman",serif; font-size: 15px;}
    </style>
    </div>

Si te ha gustado el artículo sobre cómo hacer redirecciones en Blogger puedes colaborar con este Blog visitando a nuestros patrocinadores, con esto me ayudarás a mantener el Blog y pueda escribir más artículos.


ARTÍCULOS QUE TE PUEDEN INTERESAR

Cómo hacer redirecciones en Blogger

A menudo los blogs sufren modificaciones, borrado o editado de post sobre todo, que afectan a la navegabilidad de los mismos por lo que a veces nos encontramos con el típico Error 404. Una de las maneras más efectivas de evitar los links rotos y mantener la navegabilidad de nuestro blog es utilizar la herramienta de redireccionamiento personalizado de Blogger.

En este artículo veremos cómo realizar un redireccionamiento permanente desde una URL antigua a una URL nueva. Pero antes de redireccionar cualquier URL de nuestro BLogger debemos saber que existen dos tipos de redireccionamiento:
  1. Redireccionamiento 302: Se emplea para indicar que hemos movido una página o URL temporalmente, esta redirección la usaremos cuando por ejemplo el sitio web no va a estar disponible por un tiempo o bien estemos realizando actualizaciones.

  2. Redireccionamiento 301: Utilizamos las redirecciones 301 cuando cambiamos una o varias URL de una Web definitivamente.

Ahora vamos a ver cómo realizar las redirecciones dentro de Blogger.

CÓMO REDIRIGIR DESDE UNA URL ANTIGUA A UNA NUEVA URL EN BLOGGER

  1. Paso 1: Nos dirigimos a Configuración -> Preferencias para motores de búsqueda y hacemos click en "Edit" junto a Redireccionamiento personalizado.

  2. Paso 2: En el campo De pondremos la URL antigua que queremos redireccionar y en el campo Para pondremos la nueva URL.

  3. Paso 3: Para finalizar deberemos hacer click en el botón Guardar cambios

Si te ha gustado el artículo sobre cómo hacer redirecciones en Blogger puedes colaborar con este Blog visitando a nuestros patrocinadores, con esto me ayudarás a mantener el Blog y pueda escribir más artículos.

ARTÍCULOS QUE TE PUEDEN INTERESAR

  1. Tutoriales de Blogger
  2. Tutoriales de Windows
  3. Artículos de opinión
  4. Tutoriales de SEO
  5. Tutoriales de Prestashop

Cómo poner separadores en Blogger

En este artículo veremos cómo poner separadores entre los post de blogger con un ejemplo muy sencillo que podréis seguir sin ningún problema.

PASOS PARA PONER SEPARADORES ENTRE LOS POST DE BLOGGER

A continuación os mostramos los pasos necesarios para poner separadores entre los post de blogger:

  1. Nos dirigimos a la sección Plantilla de nuestro Blog y pinchamos sobre el botón Editar HTML.

  2. Se abrirá una ventana donde se muestra el código de la plantilla que estamos utilizando en nuestro blog. En este código debemos buscar el siguiente texto:

    <b:include data=’post’ name=’post’/>
  3. Justo debajo del texto que hemos encontrado en nuestra plantilla escribiremos el siguiente código:
    <center><img src=’https://dl.dropboxusercontent.com/u/41911263/separador-boton.png‘/></center>
  4. En este punto podéis utilizar la imagen del ejemplo o sustituirla por otra cualquiera.
  5. Realizando el punto anterior estaréis utilizando una imagen como separador entre los post de vuestro Blogger.

Si te ha gustado el artículo sobre cómo poner separadores entre los post de Blogger puedes colaborar con este Blog visitando a nuestros patrocinadores, con esto me ayudarás a mantener el Blog y pueda escribir más artículos.

ARTÍCULOS QUE TE PUEDEN INTERESAR

  1. Tutoriales de Blogger
  2. Tutoriales de Windows
  3. Artículos de opinión
  4. Tutoriales de SEO
  5. Tutoriales de Prestashop

Deshabilitar botón derecho Blogger


En este artículo veremos una manera sencilla y rápida de deshabilitar el botón derecho en nuestro Blogger. Para seguir el ejemplo necesitaréis los siguientes elementos:
  1. 1. Imagen que mostraremos al pulsar el botón derecho del ratón.
  2. 2. Archivo javascript que se ejecutará al pulsar el botón derecho del ratón.
  3. 3. Código que deberemos incluir en la plantilla de nuestro Blogger.

PASOS PARA DESHABILITAR EL BOTÓN DERECHO DEL RATÓN EN BLOGGER
  1. Paso 1 Debes acceder a la sección Plantilla + Edición de HTML.
  2. Paso 2 Antes de </body> debes pegar el siguiente código:
<script>
var DADrccolor = "#F1F1F1";
var DADrcimage = "https://dl.dropboxusercontent.com/u/41911263/superheroe.png";
</script>
<script type="text/javascript" src="https://dl.dropboxusercontent.com/u/41911263/antirightclick.js"></script>

  • Una vez copiado el código de arriba en nuestra plantilla puedes probar el funcionamiento de este método que bloquea el uso del botón derecho del ratón en nuestro Blogger.


  • Si te ha gustado el artículo sobre cómo deshabilitar el botón derecho en Blogger puedes colaborar con este Blog visitando a nuestros patrocinadores, con esto me ayudarás a mantener el Blog y pueda escribir más artículos.

    ARTÍCULOS QUE TE PUEDEN INTERESAR

    Cómo corregir error al iniciar Xampp: Apache shutdown unexpectedly
    Cómo guardar la configuración de una red wifi en Windows 7
    Cómo abrir puertos windows 7
    Atajos de teclado de Windows
    Windows 7 no muestra la fecha

    Etiquetas title y alt en imágenes

    Cómo utilizar correctamente las etiquetas TITLE y ALT en las imágenes.

    En este artículo trataré de explicar cómo utilizar correctamente las etiquetas TITLE y ALT en las imágenes que insertemos en cualquier página web.

    DIFERENCIAS ENTRE LAS ETIQUETAS TITLE Y ALT

    La etiqueta TITLE se utiliza para mostrar una descripción de la imagen. Normalmente en la etiqueta TITLE de las imágenes se suele escribir el título o una breve descripción de la misma, de esta manera tanto los navegadores como los internautas saben de qué va la foto.

    La etiqueta TITLE funciona con todos los navegadores y se manifiesta cuando el usuario pone el ratón encima de una imagen, en ese momento aparece un cuadro emergente con el texto que se ha indicado en el TITLE.

    Mediante la etiqueta ALT definimos un texto alternativo sobre las imágenes que se mostrará únicamente cuando éstas no puedan mostrarse, como por ejemplo un error en su carga. Esta etiqueta es de suma importancia puesto que hace que nuestra web sea más accesible.

    Si las imágenes se utilizan como enlace a otras páginas, la etiqueta ALT puede emplearse para dar información sobre el enlace. Si no se utilizan como enlaces, se pueden emplear para complementar la información definida en la etiqueta TITLE.

    CÓMO UTILIZAR LAS ETIQUETAS TITLE Y ALT

    Vamos a mostrar un ejemplo práctico sobre cómo utilizar correctamente las etiquetas TITLE y ALT: Mostraremos una imagen con el logo de Apnea Academy (Organización internacional para la enseñanza de la Apnea) que emplearemos como enlace a una página con información sobre un curso de apnea.

    Primer curso de Apnea Academy en Valencia organizado por EspaiSub

    Veamos el código HTML que hemos insertado para mostrar la imagen:
    <a href="URL de la página web"><img alt="Primer curso de Apnea Academy en Valencia organizado por EspaiSub" src="URL de la imagen" title="Apnea Academy - Organización para la enseñanza e investigación de la apnea" />
    Explicación del uso de las etiquetas TITLE y ALT:
    TITLE: Hemos escrito una breve descripción de la imagen para que la gente sepa qué es Apnea Academy. En este caso indicamos qué es Apnea Academy.

    ALT: He escrito una breve descripción sobre el enlace que contiene la imagen, para que se tenga información sobre donde va el enlace.


    Si te ha gustado el artículo sobre Etiquetas title y alt en imágenes puedes colaborar con este Blog visitando a nuestros patrocinadores, con esto me ayudarás a mantener el Blog y pueda escribir más artículos.


    ARTÍCULOS QUE TE PUEDEN INTERESAR

    Cómo corregir error al iniciar Xampp: Apache shutdown unexpectedly
    Cómo guardar la configuración de una red wifi en Windows 7
    Cómo abrir puertos windows 7
    Atajos de teclado de Windows
    Windows 7 no muestra la fecha

    Widget formulario de contacto para blogger

    CÓMO AÑADIR WIDGET FORMULARIO DE CONTACTO EN BLOGGER

    En este artículo veremos cómo añadir el widget formulario de contacto en nuestro Blogger a través de un ejemplo práctico muy sencillo.

    Hace apenas unas semanas Blogger ha añadido a su repositorio de Widgets el tan esperado Widget formulario de contacto que permite a los lectores del Blog ponerse en contacto con el autor del mismo.

    PASOS PARA AÑADIR WIDGET FORMULARIO DE CONTACTO EN BLOGGER

    Para añadir el Widget formulario de contacto a nuestro Blogger deberemos realizar los siguientes pasos:
    1. Abrir la pestaña Diseño de nuestro Blogger.
    2. Añadir Widget Formulario de contacto para Blogger
      Añadir Widget Formulario de contacto para Blogger - Paso 1

    3. Hacer clic sobre la opción Añadir un gadget.
    4. Añadir Widget Formulario de contacto para Blogger
      Añadir Widget Formulario de contacto para Blogger - Paso 2

    5. En la ventana que se abre deberéis seleccionar la pestaña Más gadgets y a continuación Formulario de contacto.
    6. Añadir Widget Formulario de contacto para Blogger
      Añadir Widget Formulario de contacto para Blogger - Paso 3
    Una vez realizados los tres pasos anteriores contaremos con el widget formulario de contacto en la posición de nuestro Blogger que hayamos seleccionado.

    Si te ha gustado el artículo sobre cómo añadir un widget formulario de contacto en Blogger puedes colaborar con este Blog visitando a nuestros patrocinadores, con esto me ayudarás a mantener el Blog y pueda escribir más artículos.


    ARTÍCULOS QUE TE PUEDEN INTERESAR

    Cómo corregir error al iniciar Xampp: Apache shutdown unexpectedly
    Cómo guardar la configuración de una red wifi en Windows 7
    Cómo abrir puertos windows 7
    Atajos de teclado de Windows
    Windows 7 no muestra la fecha

    Cómo añadir breadcrumbs en Blogger

    CÓMO AÑADIR BREADCRUMBS EN BLOGGER

    En el artículo de hoy vamos a ver cómo añadir breadcrumbs a nuestro blogger y explicar las ventajas que aportan los breadcrums o migas de pan al posicionamiento SEO de nuestro Blog o página web.

    Los breadcrums o rastro de migas de pan es una técnica de navegación utilizada en páginas web cuya característica principal es que permite al usuario conocer exactamente la estructura interna de nuesro blog o página web lo que le permite navergar de manera fácil e intuitiva por ella.

    VENTAJAS DE UTILIZAR BREADCRUMBS

    Las ventajas de utilizar breadcrumbs o migas de pan en nuetro blog o página web son innumerables, a continuación mostramos las ventajas que consideramos más significativas:
    • Los breadcrumbs facilitan el acceso directo a determinadas categorías o páginas si tener que pasar por el home de la web.

    • Los breadcrumbs o migas de pan permiten al usuario crear un modelo mental del mapa del sitio, con lo que le será más fácil navegar por la web y acceder a los contenidos.

    • Los breadcrumbs son un elemento de navegación que ocupan poco espacio y ofrecen mucha información.

    • Los breadcrumbs pueden aparecer en los resultados de las páginas de búsqueda de Google con lo que aportan información adicional al usuario del buscador.

    • Los breadcrumbs mejoran la usabilidad de nuestra página web o blog.

    • Los breadcrumbs mejoran los enlaces internos de nuestra página web.

    CONCLUSIÓN SOBRE LOS BREADCRUMBS

    Los breadcrumbs o migas de pan es de esas mejoras que requieren muy poco esfuerzo y que tienen un alto impacto por lo que recomiendo a todos los lectores que se animen y los introduzcan en sus respectivas páginas web o blogs.

    AÑADIR BREADCRUMS EN BLOGGER

    Vamos a ver mediante un ejemplo práctico la manera de implementar los breadcrums en nuestro blogger
    1. Nos dirigimos al menú Plantilla de nuestro panel de control de Blogger y pulsamos el botón Editar HTML.

    2. Dentro del código de nuestra plantilla pulsamos las teclas CTRL + F y buscamos el siguiente texto
      <b:include data='top' name='status-message'/>

    3. Reemplazar el código e arriba por el siguiente:
      <b:include data='top' name='status-message'/>
      <b:include data='posts' name='breadcrumb'/>

    4. Buscar el siguiente texto en el código de nuestra plantilla pulsando CTRL + F:
      <b:includable id='main' var='top'>

    5. Reemplazar el código de arriba por el siguiente:
      <b:includable id='breadcrumb' var='posts'>
      <b:if cond='data:blog.homepageUrl == data:blog.url'>
      <!-- No añadimos los breadcrumb en la home de nuestro blogger -->
      <b:else/>
      <b:if cond='data:blog.pageType == "item"'>
      <!-- Añadimos los breadcrumb en los post -->
      <p class='breadcrumbs'>
      <span class='post-labels'>
      <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
      <b:loop values='data:posts' var='post'>
      <b:if cond='data:post.labels'>
      <b:loop values='data:post.labels' var='label'>
      <b:if cond='data:label.isLast == "true"'> »
      <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
      </b:if>
      </b:loop>
      <b:else/>
      »Unlabelled
      </b:if>
      » <span><data:post.title/></span>
      </b:loop>
      </span>
      </p>
      <b:else/>
      <b:if cond='data:blog.pageType == "archive"'>
      <!-- Añadimos los breadcrumb para las etiquetas y las páginas de búsquedas -->
      <p class='breadcrumbs'>
      <span class='post-labels'>
      <a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
      </span>
      </p>
      <b:else/>
      <b:if cond='data:blog.pageType == "index"'>
      <p class='breadcrumbs'>
      <span class='post-labels'>
      <b:if cond='data:blog.pageName == ""'>
      <a expr:href='data:blog.homepageUrl'>Home</a> » All posts
      <b:else/>
      <a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/>
      </b:if>
      </span>
      </p>
      </b:if>
      </b:if>
      </b:if>
      </b:if>
      </b:includable>
      <b:includable id='main' var='top'>
      <!--Breadcrumbs por http://tutorialesyopiniones.blogspot.com.es/-->

    6. Buscar el siguiente texto en la plantilla ]]></b:skin>

    7. Pegar el siguiente código justo antes el texto que hemos buscado en el punto exterior:
      /* Breadcrumbs por http://tutorialesyopiniones.blogspot.com.es/ */ .breadcrumbs {
      padding:5px 5px 5px 0px;
      margin: 0px 0px 15px 0px;
      font-size:95%;
      line-height: 1.4em;
      border-bottom:3px double #e6e4e3;
      }

    8. Pulsa el botón Guardar.


    Si te ha gustado el artículo sobre cómo añadir breadcrumbs en Blogger puedes colaborar con este Blog visitando a nuestros patrocinadores, con esto me ayudarás a mantener el Blog y pueda escribir más artículos.

    ARTÍCULOS QUE TE PUEDEN INTERESAR

    Cómo guardar la configuración de una red wifi en Windows 7
    Cómo abrir puertos windows 7
    Atajos de teclado de Windows
    Windows 7 no muestra la fecha

    Añadir gadget últimos tweets en Blogger

    Tutorial blogger: Cómo añadir gadget últimos tweets en blogger

    En este tutorial voy a explicar cómo añadir un gadget que incluya los últimos tweets que hemos escrito para que los seguidores de nuestro blog puedan leer lo que escribimos en Twitter.

    Para el ejemplo del presente tutorial crearemos un gadget donde mostraremos una pestaña flotante en la columna derecha de nuestro blog que dará acceso a nuestros últimos tweets.

    El gadget últimos tweets quedará de la siguiente manera en vuestro blog:


    Ejemplo: Crear gadget con los últimos tweets. Cuando un lector de nuestro blog pinche en la pestaña flotante se mostrarán los últimos tweets que hemos escrito.
    1. Nos dirigimos a la sección Diseño de nuestro blogger.
    2. En este momento se abre una página donde se muestra una representación visual de nuestro blog.
    3. Para el ejemplo actual he creado el gadget últimos tweets en el panel lateral derecho, en dicho panel hacemos clic en la opción Añadir un gadget.
    4. En este momento se abrirá una ventana donde podremos seleccionar el tipo de gadget que queremos añadir.
    5. Dentro de la pestaña Lo básico seleccionamos la opción HTML/Javascript
    6. Al seleccionar dicha opción se abre una página donde configuraremos el gadget últimos tweets de la siguiente manera:
      1. Título: Escribir el título que queremos que se muestre al visualizar el gadget últimos tweets. En mi caso he puesto "Últimos tweets".
      2. Contenido: Espacio destinado para poner el código HTML que queremos mostrar en el gadget últimos tweets, en nuestro caso deberemos poner el siguiente:
    <style>img,a{border:0;}#on{visibility:visible;}#off{visibility:hidden;}#facebook_div{width:196px;height:353px;overflow:hidden;}#twitter_div{width:246px;height:353px;overflow:hidden;}#google_plus_div{width:152px;height:97px;overflow:hidden;margin-left:50px;margin-top:10px;}#knfeedburner_div{width:300px;height:97px;margin-top:25px;overflow:hidden;}#kakinetwork_div{width:300px;height:97px;overflow:hidden;}

    #twitter_right{z-index:10004;border:2px solid #6CC5FF;background-color:#6CC5FF;width:246px;height:353px;position:fixed;right:-250px;}

    #twitter_right_img{position:absolute;top:-2px;left:-35px;border:0;} #kakinetwork_right{z-index:10003;border:2px solid

    #303030;background-color:#fff;width:300px;height:97px;position:fixed;}#kakinetwork_right img{position:absolute;top:-2px;left:-101px;}/* left side style */#facebook_left{z-index:10005;border:2px solid #3c95d9;background-color:#fff;width:196px;height:353px;position:fixed;left:-200px;}#facebook_left img{position:absolute;top:-2px;right:-35px;}#facebook_left iframe{border:0px solid #3c95d9;overflow:hidden;position:static;height:360px;right:-2px;top:-3px;}#twitter_left{z-index:10004;border:2px solid #6CC5FF;background-color:#6CC5FF;width:246px;height:353px;position:fixed;left:-250px;}#twitter_left_img{position:absolute;top:-2px;right:-35px;border:0;} #kakinetwork_left{z-index:10003;border:2px solid #303030;background- color:#fff;width:300px;height:97px;position:fixed;}#kakinetwork_left img{position:absolute;top:-2px;right:-101px;} </style>

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script><script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script><script type="text/javascript">jQuery(document).ready(function(){ jQuery("#facebook_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#facebook_right").stop(true,false).animate({right: -200}, 500); }); jQuery("#twitter_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#twitter_right").stop(true,false).animate({right: -250}, 500); }); jQuery("#google_plus_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#google_plus_right").stop(true,false).animate({right: -154}, 500); }); jQuery("#feedburner_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#feedburner_right").stop(true,false).animate({right: -303}, 500); }); });</script> <div id="on"><div id="twitter_right" style="top: 20%;"><div id="twitter_div"><img id="twitter_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiixb95clFEz3t-WSp3s50hyejOGzDnF2V5mST-WAFbJRjD-s4XreQwM-d-htbOqA5XIZ53BDOB23hA6ZCedaxwLWJv8WK_SVYGmIz-VF4Uc7ItDlVeAjplXlNvqRBYIhdl_kYhzQtOuFU/s320/allbloggingtips.com-twitter-icon.png" /><script src="http://widgets.twimg.com/j/2/widget.js"></script><script>new TWTR.Widget({version: 2,type: 'profile',rpp: 4,interval: 1000,width: 246,height: 260,theme: {shell: {background: '#63BEFD',color: '#FFFFFF'},tweets: {background: '#FFFFFF',color: '#000000',links: '#47a61e'}},features: { loop: false,live: true,scrollbar: false,hashtags: false,timestamp: true,avatars: true,behavior: 'all' }}).render().setUser('masetru').start();</script></div></div></div> </div>

    En el código de arriba deberéis sustituir el texto que aparece en rojo por vuestro nombre de usuario de Twitter.


    Si te ha gustado el artículo sobre cómo añadir gadget últimos tweets en Blogger puedes colaborar con este Blog visitando a nuestros patrocinadores, con esto me ayudarás a mantener el Blog y pueda escribir más artículos.

    ARTÍCULOS QUE TE PUEDEN INTERESAR

    Cómo guardar la configuración de una red wifi en Windows 7
    Cómo abrir puertos windows 7
    Atajos de teclado de Windows
    Windows 7 no muestra la fecha

    Cómo poner una imagen de fondo en Blogger

    Cómo hacer que ocupe toda la pantalla la imagen de fondo de Blogger

    En el artículo de hoy vamos a ver cómo hacer que la imagen de fondo de nuestro blogger ocupe toda la pantalla sin importar la resolución del monitor. Y como en todos nuestros artículos lo haremos a través de un ejemplo muy sencillo.

    CÓMO MOSTRAR IMAGEN DE FONDO DE BLOGGER EN TODA LA PANTALLA

    Esta solución requiere modificar el CSS de nuestra plantilla añadiendo la propiedad background-size lo que nos permitirá especificar el tamaño de la imagen de fondo.


    PASOS PARA MOSTRAR IMAGEN DE FONDO DE BLOGGER EN TODA LA PANTALLA

    A continuación mostramos los pasos necesarios para conseguir que la imagen de fondo de nuestro blogger ocupe toda la pantalla en cualquier resolución:
    1. Abrir la sección Plantilla de nuestro blogger
    2. Pulsar el botón Editar HTML
    3. Localizar el texto background situado dentro de body{
    4. Sustituir background por el siguiente código
      background: URL(URL de la imagen) no-repeat center center fixed;
      background-size: cover;
    5. Después de la modificación el body quedaría de la siguiente manera:
      body {
      background: url(URL de la imagen) no-repeat center center fixed;
      background-size: cover;

      margin:0;
      color:#000;
      font:x-small Georgia Serif;
      font-size/* */:/**/small;
      font-size: /**/small;
      text-align: center;
      }
    6. Recuarda que en el punto 4 debes indicar la URL de tu imagen de fondo
    Siguiendo estos sencillos pasos harás que la imagen de fondo de tu blogger ocupe toda la pantalla y se vea correctamente en cualquier resolución.


    Si te ha gustado el artículo sobre cómo poner una imagen de fondo en Blogger puedes colaborar con este Blog visitando a nuestros patrocinadores, con esto me ayudarás a mantener el Blog y pueda escribir más artículos.

    ARTÍCULOS QUE TE PUEDEN INTERESAR

    Cómo añadir gadget redes sociales en Blogger
    Cómo crear índice de contenido en Blogger
    Cómo crear un sitemap para Blogger
    Cómo añadir mi blogger al buscador Bing
    Cómo añadir la descripción de tu Blogger al título de tus páginas

    Cómo crear un sitemap para Blogger

    Crear sitemap para Blogger

    Crear sitemap para blogger
    Crear sitemap para blogger
    En el artículo de hoy vamos a ver cómo crear un sitemap para Blogger con un ejemplo sencillo y rápido de implementar.

    En realidad, un sitemap es un documento que contiene la lista de todas las páginas que componen nuestra web o blog.

    Los mapas de sitio, término en castellano de sitemap, nos ayudan a mejorar el posicionamiento en buscadores (SEO) ya que a través de ellos nos aseguramos que los buscadores conocen todas las páginas de nuestro blogger o página web.

    Es importante enviar a Google y resto de buscadores la dirección URL de nuestro sitemap para que pueda indexar todas las URL de nuestro blog. Para enviar el sitemap utilizaremos WebMaster Tools de Google.

    CÓDIGO DEL SITEMAP PARA BLOGGER

    Con el siguiente código podremos enviar el sitemap de nuestro blogger a Google. /atom.xml?redirect=false&start-index=1&max-results=500
    Con el código de arriba le indicamos a Google que le estamos enviando las primeras 500 páginas de nuestro blogger, si en tu blog tienes más de 500 páginas lo que debes hacer es crear más sitemaps, uno por cada 500 páginas, tal y como se muestra a continuación:
    /atom.xml?redirect=false&start-index=1&max-results=500 1er bloque de páginas.
    /atom.xml?redirect=false&start-index=501&max-results=1000 2do bloque de páginas
    /atom.xml?redirect=false&start-index=1001&max-results=1500 3er bloque de páginas

    CÓMO SUBIR TU SITEMAP PARA BLOGGER A GOOGLE

    Para enviar el sitemap de nuestro blogger a Google debemos realizar los siguientes pasos:
    1. Entrar a WebMasterTools de Google.
    2. Hacer clic en "Optimización", situado en la parte izquierda de la pantalla.
    3. Seleccionar la opción "Sitemaps".
    4. Pinchar sobre el botón "Añadir o probar sitemap" situado en la parte derecha de la pantalla.
    5. Escribir la url de nuestro sitemap. El código del punto anterior.
    6. Pulsar el botón "Enviar".
    7. Se mostrará el número de url que han sido enviadas a Google.
    8. En este punto toca esperar que Google indexe todas las url de nuestro sitemap. Esto suele tardar varios días.


    Si te ha gustado el artículo sobre cómo crear un sitemap para Blogger puedes colaborar con este Blog visitando a nuestros patrocinadores, con esto me ayudarás a mantener el Blog y pueda escribir más artículos.

    ARTÍCULOS QUE TE PUEDEN INTERESAR

    Cómo añadir gadget redes sociales en Blogger
    Cómo crear índice de contenido en Blogger
    Cómo crear un sitemap para Blogger
    Cómo añadir mi blogger al buscador Bing
    Cómo añadir la descripción de tu Blogger al título de tus páginas

    Cómo añadir mi Blogger al buscador Bing

    Cómo añadir nuestro blogger al buscador Bing

    En el artículo de hoy vamos a ver cómo añadir nuestro blogger al buscador Bing (Because It's Not Google), tarea fundamental si queremos mejorar el posicionamiento de nuestro blogger.

    PASOS PARA AÑADIR NUESTRO BLOGGER A BING

    1. Abrir la siguiente url: http://www.bing.com/toolbox/submit-site-url

    2. Deberemos escribir la dirección de nuestro blog en el campo que nos indican y escribir el Captcha correctamente. Ver imagen de ejemplo.


    3. Una vez introducida la dirección de tu blog o página web. Bing nos recuerda que podemos utilizar su herramienta para administradores web. Yo recomiendo que la utilicéis.


    4. Como se puede apreciar en la imagen de arriba, nos da la opción de registrarnos. Si tenemos una cuenta de hotmail no hará falta el registro, podremos loguearnos sin problema.

    5. Ahora es cuando debemos añadir nuestro blog a la lista de sitios que queremos controlar con la herramienta para administradores web de Bing.

    6. Una vez añadido nuestro blog deberemos verificar que somos los propietarios. La manera más sencilla es copiar el código de identificación que nos ofrece Bing y pegarlo en la sección HEAD de nuestro Blog.

    7. ¿Cómo se copia el código de verificación en nuestro blogger? Nos dirigimos a la sección "Plantilla" de blogger y pinchamos en el botón "Editar HTML". Buscamos el siguiente texto: <head> y antes copiamos el código de verficación.


    Si te ha gustado el artículo sobre cómo añadir mi Blogger al buscador Bing puedes colaborar con este Blog visitando a nuestros patrocinadores, con esto me ayudarás a mantener el Blog y pueda escribir más artículos.

    ARTÍCULOS QUE TE PUEDEN INTERESAR

    Cómo guardar la configuración de una red wifi en Windows 7
    Cómo abrir puertos windows 7
    Atajos de teclado de Windows
    Windows 7 no muestra la fecha

    Optimizar SEO Blogger: Añadir descripción del blog al título de tus páginas

    Optimizar SEO Blogger: Añadir descripción del blog al título de tus páginas.

    En este artículo vamos a mostrar la manera de optimizar el SEO de nuestro Blogger añadiendo la descripción del blog al título de nuestras páginas.

    Consejo SEO

    La idea es tener en la descripción de nuestro blog las palabras claves por las que queremos ser posicionados y reforzarlas en cada uno de los artículos que escribamos.

    Explicación de lo que vamos a hacer

    Vamos a incluir en el título de todos nuestros artículos la descripción o texto que nosotros queramos de manera que obtendremos las siguientes ventajas:
    1. A efectos de posicionamiento es una mejora porque en cada página de nuestro blog incluimos las palabras clave por las que queremos ser encontrados.
    2. Reforzamos la densidad de palabras clave de nuestros artículos con lo que facilitamos a Google y el resto de buscadores la comprensión de la temática de nuestro Blog y artículos.

    Optimizar SEO Blogger: Ejemplo práctico

    1. Abrir la sección "Plantilla" y hacer clic en el botón EDICIÓN HTML
    2. Busca el siguiente código <title><data:blog.pagetitle/></title> y sustitúyelo por el siguiente código <title><data:blog.pageName/> | <data:blog.title/> | Pon aquí tus palabras clave o descripción de Blog</title>
    3. Pulsa el botón "Guardar"

    Cómo comprobar que la descripción del Blog está en el título de las páginas

    Es muy sencillo, pon el ratón sobre el título de de este artículo y verás como se muestra un texto que incluye el título de la página, el título del Blog y la descripción del blog.

    Si te ha gustado el artículo sobre cómo añadir descripción del blog al título de las páginas puedes colaborar con este Blog visitando a nuestros patrocinadores, con esto me ayudarás a mantener el Blog y pueda escribir más artículos.

    ARTÍCULOS QUE TE PUEDEN INTERESAR

    Cómo guardar la configuración de una red wifi en Windows 7
    Cómo abrir puertos windows 7
    Atajos de teclado de Windows
    Windows 7 no muestra la fecha

    Añadir iconos redes sociales que giran en blogger

    Cómo añadir iconos redes sociales que giran en blogger

    En este artículo voy a explicar cómo añadir iconos de redes sociales que giran en nuestro blog en dos posiciones diferentes de nuestro blog.

    Si realizas todos los pasos de este tutorial, los iconos de redes sociales quedarían de la siguiente manera en tu blog:


    A continuación os muestro los pasos a seguir para añadir iconos redes sociales que giran en blogger:
    1. Añadir los estilos a la plantilla: Debes dirigirte a la sección "Plantilla" de tu blog y pulsar el botón "Editar HTML".

      Busca el siguiente texto ]]></b:skin> y justo andes de él añade el siguiente código:

      /* ICONOS REDES SOCIALES DE TUTORIALES Y OPINIONES*/
      #social-iconos {
      width:100%;
      height:50px;
      margin-bottom:10px; display:block;
      clear:both;
      }
      .social-icons{display:table}
      .social-icons ul {
      list-style-image:none;
      list-style-position:outside;
      list-style-type:none;
      text-align:right;
      padding:5px 5px 0 0
      }
      .social-icons ul {
      padding:0;
      float:right;
      margin-bottom:0;
      }
      .social-icons li.social_icon {
      background:none !important;
      padding-left:0 !important;
      display:inline;
      float:left;
      margin-left:6px;
      }
      .social-icons li:hover {
      -moz-transition: all 0.5s ease-in-out;
      -webkit-transition: all 0.5s ease-in-out;
      -o-transition: all 0.5s ease-in-out;
      -ms-transition: all 0.5s ease-in-out;
      transition: all 0.5s ease-in-out;
      -moz-transform: rotate(360deg);
      -webkit-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(-360deg);
      }

    2. Añadir los iconos de redes sociales en la CABECERA del Blog: Debes dirigirte a la sección "Plantilla" de tu blog y pulsar el botón "Editar HTML".

      Busca SIN expandir artilugios el siguiente texto:
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> y pega antes de él el siguiente código:

      <div class='social-icons' id='social-iconos'>
      <ul>
      <li class='social_icon'><a href='http://facebook.com/Nombre_Usuario'><img border='0' src='http://www.characterscounter.com/img/iconos-sociales/facebook-32x32.png'/></a></li>
      <li class='social_icon'><a href='https://twitter.com/Nombre_Usuario'><img border='0' src='http://www.characterscounter.com/img/iconos-sociales/twitter-32x32.png'/></a></li>
      <li class='social_icon'><a href='https://plus.google.com/ID_Usuario/about'><img border='0' src='http://www.characterscounter.com/img/iconos-sociales/google-32x32.png'/></a></li>
      <li class='social_icon'><a href='http://Nombre_de_tu_blog.com/feeds/posts/default'><img border='0' src='http://www.characterscounter.com/img/iconos-sociales/rss-32x32.png'/></a></li>
      </ul>
      </div>

      IMPORTANTE: Debes cambiar el texto que aparece en rojo por tus datos.

    3. Añadir los iconos de redes sociales COMO GADGET del Blog: Deberás dirigirte a la sección "Diseño" y pulsar la opción "Añadir un gadget".

      De la lista de gadgets disponibles, deberás seleccionar el "HTML/Javascript" y pegar en su interior el código del punto anterior.


    Artículos que te pueden interesar

    Añadir gadget redes sociales en blogger.
    Cómo proteger las imágenes de tu blogger.
    Cómo etiquetar entradas de blogger.

    Widget nube etiquetas para Blogger

    Widget nube etiquetas para Blogger

    En este artículo vamos a ver cómo añadir un widget nube etiquetas para Blogger de una manera rápida y sencilla. Incluir el widget nube etiquetas para Blogger en tu blog tiene dos ventajas:
    1. Permite filtrar las entradas por sus etiquetas.
    2. Permite incluir palabras clave en tu blog que ayudarán a su posicionamiento en buscadores.


    Pasos para incluir widget nube etiquetas:
    1. Dirígete a la pestaña "Diseño" de Blogger.

    2. Haz clic en la opción "Añadir un Gadget".

    3. En la lista de Gadgets debes seleccionar la opción "Etiqueta".
    4. Configura el Gadget etiquetas según tu gusto.

    5. Pulsa el botón "Guardar".

    6. Este es el resultado de añadir el widget etiquetas en mi blog.

    Si te ha gustado el artículo sobre cómo crear widget nube etiquetas para Blogger puedes colaborar con este Blog visitando a nuestros patrocinadores, con esto me ayudarás a mantener el Blog y pueda escribir más artículos.

    ARTÍCULOS QUE TE PUEDEN INTERESAR

    1. Tutoriales de Blogger
    2. Tutoriales de Windows
    3. Artículos de opinión
    4. Tutoriales de SEO
    5. Tutoriales de Prestashop

    Cómo etiquetar entradas de blogger

    Cómo etiquetar entradas de blogger

    En el artículo de hoy os voy a explicar cómo etiquetar entradas de blogger, proceso de suma importancia para nuestro blog ya a través de las etiquetas clasificamos las entradas publicadas.

    Pasos para etiquetar un conjunto de entradas:
    1. Dirígete a la sección "Entradas" de Blogger.
    2. Selecciona las entradas a las que quieres asignar la misma etiqueta.
    3. Despliega el menú "Etiquetas" y selecciona una etiqueta existente o créala en ese momento.

    Pasos para eliminar una etiqueta de un conjunto de entradas:
    1. Dirígete a la sección "Entradas" de Blogger.
    2. Selecciona las entradas a las que quieres quitar la misma etiqueta.
    3. Despliega el menú "Etiquetas" y selecciona la etiqueta que quieres quitarle a las entradas, con esta acción blogger comprueba que las entradas ya la tienen asignada la etiqueta seleccionada por lo que la borrará.


    Artículos que pueden interesarte

    Cómo añadir gadget para redes sociales en Blogger.
    Cómo incluir tablas en las entradas de Blogger.
    Cómo incluir código en las entradas de Blogger.

    Añadir gadget redes sociales en blogger



    Tutorial blogger: Como añadir gadget redes sociales en blogger

    En este tutorial voy a explicar cómo añadir un gadget que incluya las redes sociales donde nos pueden encontrar todos los lectores de nuestro blog.

    Para el ejemplo del presente tutorial crearemos un gadget donde mostraremos los iconos de las redes sociales donde nos pueden encontrar los lectores del blog y un enlace a nuestro perfil de usuario. En este ejemplo las redes sociales que voy a incluir son las siguientes:

    1. 1. Twitter
    2. 2. Facebook
    3. 3. Google+
    4. 4. Linkedin
    5. 5. Youtube
    6. 6. Metroblog

    El gadget redes sociales en blogger quedará de la siguiente manera en vuestro blog:


    Ejemplo: Crear gadget en nuestro Blogger con las redes sociales que utilizamos. Cuando un lector de nuestro blog pinche en alguno de los iconos se mostrará la página de nuestro perfil.
    1. Paso 1 Nos dirigimos a la sección Diseño de nuestro blogger.
    2. Paso 2 En este momento se abre una página donde se muestra una representación visual de nuestro blog.
    3. Paso 3 Para el ejemplo actual he creado el gadget redes sociales en el panel lateral derecho, en dicho panel hacemos clic en la opción Añadir un gadget.
    4. Paso 4 En este momento se abrirá una ventana donde podremos seleccionar el tipo de gadget que queremos añadir.
    5. Paso 5 Dentro de la pestaña Lo básico seleccionamos la opción HTML/Javascript
    6. Paso 6 Al seleccionar dicha opción se abre una página donde configuraremos el gadget redes sociales de la siguiente manera:
      1. - Título: Escribir el título que queremos que se muestre al visualizar el gadget redes sociales. En mi caso he puesto "Sígueme en las redes sociales".
      2. - Contenido: Espacio destinado para poner el código HTML que queremos mostrar en el gadget redes sociales, en nuestro caso deberemos poner el siguiente:
    // Icono y link a tu perfil de twitter
    <a href='URL twitter' target='_blank'><img alt='twitter' src="http://2.bp.blogspot.com/-HoByHzmab00/T-WiFnncFXI/AAAAAAAAAuM/eIStHRliy7Y/s000/twitter.png" title='twitter'/></a>

    // Icono y link a tu perfil de facebook
    <a href='URL facebook' target='_blank'><img alt='facebook' src="http://4.bp.blogspot.com/-KGUfFpIGxDo/T-WiF2abbMI/AAAAAAAAAuU/YUHVZnWeTAQ/s000/facebook.png" title='facebook'/></a>

    // Icono y link a tu perfil de google+
    <a href='URL google+' target='_blank'><img alt='google plus' src="http://4.bp.blogspot.com/-FbyQUvCfcsc/T-WiGWwdzZI/AAAAAAAAAuc/23NBI95QlmY/s000/gplus.png" title='google plus'/></a>

    // Icono y link a tu perfil de Linkedin
    <a href='URL linkedin' target='_blank'><img alt='linkedin' src="http://3.bp.blogspot.com/-HPHUoa0ufsw/T-WiGqwz3YI/AAAAAAAAAuk/MEYc0chl5zs/s000/linkedin.png" title='linkedin'/></a>

    // Icono y link a tu perfil de Youtube
    <a href='http://www.youtube.com/user/masetru' target='_blank'><img alt='Youtube' src="http://static.tiendy.com/shops/mimomimascota/theme/assets/icono_youtube.png" title='Youtube'/></a>

    // Icono y link a tu perfil de Metroblog
    <a href='http://NombreUsuario.metroblog.com/' target='_blank'><img alt='Metroblog' src="http://blog.mp3.es/wp-content/uploads/2013/03/metro-last-light.png" title='Metroblog'/></a>

    En el código de arriba deberéis sustituir el texto URL twitter, URL facebook, URL google+ y URL linkedin por la URL de vuestros perfiles en cada una de estas redes sociales.

    Podríamos personalizar el código del gadget redes sociales de muchas maneras, yo os propongo las siguientes:
    1. - Personalizar el contenido de la meta etiqueta title.
    2. - Modificar contenido de la meta etiqueta alt.


    Si te ha gustado el artículo sobre cómo añadir gadget redes sociales en blogger puedes visitar a alguno de nuestros patrocinadores, con esto me ayudarás a mantener el Blog y pueda escribir más artículos.

    ARTÍCULOS QUE TE PUEDEN INTERESAR

    Cómo guardar la configuración de una red wifi en Windows 7
    Cómo abrir puertos windows 7
    Atajos de teclado de Windows
    Windows 7 no muestra la fecha

    Como incluir tablas en tus post de blogger

    Tutorial HTML: Incluir tablas en tus post de blogger

    En este artículo voy a explicar la manera de incluir tablas en tus post de blogger ya que en ocasiones nos encontramos con la necesidad de incluirlas en nuestros artículos y observamos que el editor de blogger no dispone de ninguna herramienta que nos permita insertar tablas.

    Para incluir tablas en los post de blogger tendremos que recurrir al editor HTML y definir nosotros mismos la estructura de la tabla en html. A continuación os pongo el código html necesario para definir una tabla en vuestros post de blogger:

    <table border="1" style="float: left; margin-right: 2%; width: 100%;">
    <tbody>
    <tr>
    <td>Columna 1</td>
    <td>Columna 2</td>
    <td>Columna 2</td>
    </tr>
    </tbody>
    </table>

    Y el resultado de aplicar el código anterior es el siguiente:

    Columna 1Columna 2Columna 2



    Explicación: Elementos utilizados en la creación de la tabla.
    1. table: Instrucción que indica que se va a definir una tabla en HTML.
    2. style: Instrucción que se utiliza para definir el estilo de la tabla.
    3. float: Indica donde se alinea la tabla, en nuestro caso a la izquierda de su contenedor.
    4. margin-right: Margen derecho de la tabla, en nuestro ejemplo el 2% del contenedor de la tabla.
    5. width: Ancho que ocupará la tabla, en nuestro ejemplo el 100% del contenedor de la misma. 
    6. tbody: Indica que se va a definir el contenido del cuerpo de la tabla.
    7. tr: Se utiliza para definir el contenido de una fila de la tabla
    8. td: Instrucción para definir celdas en una tabla
    A través del ejemplo anterior podéis personalizar las tablas que incluyáis en vuestros post de blogger ya que con cambiar los valores de las propiedades que he descrito anteriormente observaréis como va cambiando la tabla.


    ARTÍCULOS QUE TE PUEDEN INTERESAR

    Añadir gadget últimos tweets en Blogger
    Cómo poner una imagen de fondo en Blogger
    Cómo crear un sitemap para Blogger
    Widget nube etiquetas para Blogger
    Añadir gadget redes sociales en Blogger