-->
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