Iremos a vista Diseño, añadiremos un gadget HTML y copiaremos el siguiente código, lo pondremos donde queramos que salga la fecha de hoy en nuestro blog.

<div 1px="" 3px="" background:="" border:="" cccccc="" id="calendariolared style=" padding:="" solid="" transparent="">
<script type="text/javascript">
var mydate=new Date()
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym
var dayarray=new Array("Domingo","Lunes","Martes","Miércoles","Jueves","Viernes","Sábado")
var montharray=new Array("Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre")
document.write("<p> "+dayarray[day]+" "+daym+" de "+montharray[month]+" de "+year+".</p>
")
</script></div>

 Si nos situamos sobre nuestro gadget en vista diseño, abajo nos aparecerá el ID del gadget, sabiendo el nombre, lo demás es seguir los pasos:

Y  sabremos  Cómo reducir el espacio entre los gadgets  Esta es la parte que tenemos que mirar:


Una vez que tenemos el nombre del gadget, tan solo nos queda ir a diseño, plantilla,personalizar,  avanzado, Añadir CSS.
Como es la cabecera la que quiero subir:

Pondremos el siguiente código:

#Header1{
margin-bottom: -40px !important;
}

Se puede usar para cualquier gadget, que queramos juntar o separar, dependiendo de los px que se le den. Eso es cuestión de trastear y probar.. el resultado sera el siguiente:

Seguir a @laredteayudara            

Directamente a tu e-mail     

                                                    O suscríbete por otras vías: RSS

  Una vez mas trasteando con los gadget y el css, he puesto unos menú desplegable mini que os acompañaran en todas las entradas de La Red Te Ayudara para que en cualquier momento volváis donde más os interese.

He puesto un CSS común para los tres y los tres en un gadget. de manera que todos tienen mas mismas características en cuanto a forma , color y demás características.

<style type="text/css">
.etiblog {
background-color: #bbf2ce;
border-top-style: dotted;
border-right-style: dotted;
border-bottom-style: dotted;
border-left-style: dotted;
border-top-color: #2dcf94;
border-right-color: #2dcf94;
border-bottom-color: #2dcf94;
border-left-color: #2dcf94;
height: auto;
width: 200px;
font-family: Verdana, Geneva, sans-serif;
font-size: 18px;
font-style: normal;
text-align: center;
text-transform: capitalize;
}
</style>

<select name="etiblog" size="1" class="etiblog" id="etiblog" onchange="if(options[selectedIndex].value){location = options[selectedIndex].value}"><option selected/>El nombre que quieras<option value="Url de la pagina"/>Nombre de la Pagina<option value="Url de la pagina"/>Nombre de la Pagina<option value="Url de la pagina"/>Nombre de la Pagina<option value="Url de la pagina"/>Nombre de la Pagina</select>

Podrás trastear en el primer código para cambiar las características.
Y este código:

<option value="Url de la pagina"/>Nombre de la Pagina

Podrás poner tantos como necesites.

Blog Inicio Indice Archivos RSS Contacto Sigueme Redes Sociales Facebook Google + Twitter Blog Rss You Tube Email Etiquetas del Blog Blog Botones Comentarios Correo Cosicas Códigos Diseño Fiestas Gadget Herramientas Imagenes Los Mas Vistos Menu Pie Planificador Post Script Seo Titulos Tutoriales

Espero que le encontreis utilidad ya que con un poco de atencion y tiempo los resultados pueden ser sorprendentes y super practico.
Ya sabes si te gusto compartelo...

Seguir a @laredteayudara     
    

Directamente a tu e-mail     

 O suscríbete por otras vías: RSS

El anterior post, daba repuesta a una consulta, pero aunque se soluciono, quedo una duda que hoy, si doy por explicada.

Así que después de pensarla  os dejo la otra manera de hacerlo y que desde luego me parece mejor.

Código para  tres columnas o más

Copiaremos el código en HTML y donde pone  Pegar el Texto  pondremos el texto que deseamos.

Tres Columnas

<div style="width:33%;float:left;padding:4px;"> Pegar el Texto </div>
<div style="width:33%;float:left;padding:4px;">  Pegar el Texto </div>
<div style="width:30%;float:right;padding:4px;">  Pegar el Texto</div>
<div style="clear:both;"></div>

Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.

Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original.

Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.

Cuatro Columnas

<div style="float: left; padding: 4px; width: 24%;"><div style="text-align: justify;"> Pegar el Texto </div></div>
<div style="float: left; padding: 4px; width: 24%;"><div style="text-align: justify;"> Pegar el Texto</div></div>
<div style="float: left; padding: 4px; width: 24%;"><div style="text-align: justify;"> Pegar el Texto</div></div>
<div style="float: right; padding: 4px; width: 23%;"><div style="text-align: justify;"> Pegar el Texto</div></div>

Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.

Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.

Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.

Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.

Y modificando los porcentajes, podremos poner las columnas que queramos.

Si te gusto comenta y compártelo

Seguir a la red

Me ha llegado una pregunta sobre una entrada que se publico, relacionada con columnas que se refería a este post. La pregunta era:

“Me gusto esa entrada de como escribir en dos columnas y te quería preguntar si se puede hacer en tres, yo ya lo he intentado pero sin éxito”

Una solución para escribir varias columnas seria lo siguiente:

<table width="100%" border="0" cellspacing="10" cellpadding="10">
  <tr>
    <td><div align="justify">Primer Texto</div></td>
    <td><div align="justify">Segundo Texto</div></td>
    <td><div align="justify">Tercer Texto</div></td>
  </tr>
</table>

Para escribir 4 columnas seria el siguiente:

<table width="100%" border="0" cellspacing="10" cellpadding="10"> 

  <tr>
    <td><div align="justify">Primer Texto</div></td>
    <td><div align="justify">Segundo Texto</div></td>
    <td><div align="justify">Tercer Texto</div></td>
    <td><div align="justify">Cuarto Texto</div></td>
  </tr>
</table>

Y así añadiríamos tantas columnas como quisiéramos, por cada columna añadiríamos:

  <td><div align="justify">Otro Texto</div></td>

Esta seria la estructura básica, se podrá cambiar todas las características que queramos ya podremos elegir la anchura el color, la separación y demás. Si las columnas tienen distintas medidas, podriamos jugar con los espacios para dejarlas iguales. Espero que os sirva y si os gusta lo compartáis...

 

Después de mucho buscar he encontrado el resultado Como colocar aviso de uso de cookies en el blog y se trata de poner un gadget HTML y pegar el siguiente código, para Blogger:

<script src="http://j.maxmind.com/app/geoip.js"></script>
<div id="barritaloca" style="display:none;position:fixed;left:0px;right:0px;bottom:0px;width:100%;min-height:40px;background: #333333;color:#dddddd;z-index: 99999;">
<div style="width:100%;position:absolute;padding-left:5px;font-family:verdana;font-size:12px;top:30%;">
Usamos cookies propias y de terceros para mostrar publicidad personalizada seg&uacute;n su navegaci&oacute;n. Si continua navegando consideramos que acepta el uso de cookies.
<a href="javascript:void(0);" style="padding:4px;background:#4682B4;text-decoration:none;color:#fff;" onclick="PonerCookie();"><b>OK</b></a>
<a href="http://www.google.com.ar/intl/es-419/policies/technologies/types/" target="_blank" style="padding-left:5px;text-decoration:none;color:#ffffff;">M&aacute;s informaci&oacute;n</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(geoip_country_code()=="ES" && getCookie('aviso')!="1"){
document.getElementById("barritaloca").style.display="block";
}
function PonerCookie(){
setCookie('aviso','1',365);
document.getElementById("barritaloca").style.display="none";
}
</script>

Para Worpress lo hariamos en el archivo footer.php
Con este código lo verían solo los visitantes españoles, a los cuales les afecta la ley de cookies, pero si queremos que todos los visitantes sean de donde sean, lo vean agregaremos el siguiente:

<div id="barritaloca" style="display:none;position:fixed;left:0px;right:0px;bottom:0px;width:100%;min-height:40px;background: #333333;color:#dddddd;z-index: 99999;"><div style="width:100%;position:absolute;padding-left:5px;font-family:verdana;font-size:12px;top:30%;"> Usamos cookies propias y de terceros para mostrar publicidad personalizada seg&uacute;n su navegaci&oacute;n. Si continua navegando consideramos que acepta el uso de cookies. <a href="javascript:void(0);" style="padding:4px;background:#4682B4;text-decoration:none;color:#fff;" onclick="PonerCookie();"><b>OK</b></a> <a href="http://www.google.com.ar/intl/es-419/policies/technologies/types/" target="_blank" style="padding-left:5px;text-decoration:none;color:#ffffff;">M&aacute;s informaci&oacute;n</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>

Con cualquiera de estos codigos evitaremos posibles sanciones por la ley de cookies. El creador del script es Cicklow

La barra se coloca abajo pero si quieres que aparezca arriba, busca en el codigo:

style="display:none;position:fixed;left:0px;right:0px;bottom:0px;width:100%;min-height:40px;background: #333333;color:#dddddd;z-index: 99999;">

en vez de bottom pon top y aparecera arriba.

 Mi código y mis colores:

<script src="http://j.maxmind.com/app/geoip.js"></script><div id="barritaloca" style="display:none;position:fixed;right:0px;top:0px;width:100%;min-height:40px;background: #bbf2ce;color:#0d430f;z-index: 99999;"><div style="width:100%;position:absolute;padding-left:200px;font-family:verdana;font-size:12px;top:30%;">Usamos cookies propias y de terceros para mostrar publicidad personalizada seg&uacute;n su navegaci&oacute;n. Si continua navegando consideramos que acepta el uso de cookies.<a href="javascript:void(0);" style="padding:4px;background:#2dcf94;text-decoration:none;color:#fff;" onclick="PonerCookie();"><b>OK</b></a><a href="http://www.google.com.ar/intl/es-419/policies/technologies/types/" target="_blank" style="padding-left:5px;text-decoration:none;color:#0d430f;">M&aacute;s informaci&oacute;n</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(geoip_country_code()=="ES" && getCookie('aviso')!="1"){document.getElementById("barritaloca").style.display="block";}function PonerCookie(){setCookie('aviso','1',365);document.getElementById("barritaloca").style.display="none";}</script>

En este post, vamos a ver como poner unos códigos para tener un Enlace a Seguidores


    
                             Seguir La Red Te Ayudara



La idea es sin tener el gadget de seguidores, con estos enlaces poderlo hacer, y por supuesto poder ponerlo en el lugar que queramos.
Ya que añadiremos un gadget HTML y lo colocaremos donde queramos.

Con enlace en texto e imagen:

<a href="http://www.blogger.com/follow-blog.g?blogID=XXXXXXXXXXXX" target="_blank"><img src="AQUI LA URL DE LA IMAGEN"/> Seguir La Red Te Ayudara</a>

Con enlace en una imagen:

<a href="http://www.blogger.com/follow-blog.g?blogID=XXXXXXXXXXXX" target="_blank"><img src="AQUI LA URL DE LA IMAGEN"/></a>

Con enlace de texto:

<a href="http://www.blogger.com/follow-blog.g?blogID=XXXXXXXXXXXX" target="_blank"> Seguir La Red Te Ayudara</a>

Ictus


Vamos aprovechar que mañana es un día reivindicativo de
los accidentes cardio vasculares
para aprender como poner una imagen flotante ,
con un  código.
Pondremos nuestro lazo amarillo del Ictus.

Para ello lo que haremos, sera ir a vista diseño y Añadir gadget, copiaremos y pegaremos el siguiente código:

<a style="display:scroll;position:fixed;top:35px;left:35px;" href="#" alt="Ictus" title="Lazo Ictus"><img style="border:0;" src="http://goo.gl/uDGtEK"/></a>

Lo pondremos donde queramos y tendremos
una imagen flotante en nuestro blog.

Nos puede servir para muchas cosas.

Cambiando los atributos podremos ponerla de muchas maneras.

top: 35px;  Arriba
left: 35px;  Derecha 

con ellas podremos subirla o bajarla o para que este en la posición que mejor nos interese

alt="Ictus"  La descripción de la imagen
title="Lazo Ictus"  El texto que saldrá al pasar el ratón por encima

 La dirección de muestra imagen

<img style="border:0;" src="URL DE TU IMAGEN"/> 

Si queremos que se nos habrá alguna página sustituimos # por la dirección que queramos

href="#"  

Nuevo gadget en el blog, por si alguien quiere ponerme en su blog, estaría muy contenta. 

Copiaremos el código de la cajita y añadiremos un gadget HTML lo pegas y lo guardas. Así estaré en tu blog.

<div align="center">
<a href="http://lasredesteayudaran.blogspot.com.es/" title="La Red Te Ayudara" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio1aWZAgzBb0gPqmkcQJPOe0_06UJe85s-JyHmv1KN2NkrssOHUO_OX48XTq211yz8YqX5C2OD6J3dcWcFLNb_ssr71VDMhDvXfam6HzALWcjbubdlfXOlx6KpzyvnEXe-w6F5v1F1blQ/w177-h105-no/la+red+peque%25C3%25B1a.png" alt="La Red Te Ayudara" style="border:none;" /></a></div>

Vamos a ver:;

Como poner un botón de blog con cajita de código

Lo primero sera diseñar la imagen que queremos que nos represente y segundo será tenerlo alojado para tener la URL . Con esto ya podremos acceder a esta herramienta y segur los pasos.

Grab My Button

Como he puesto el enlace a la página en español, bastara con seguir y rellenar los datos y luego darle a vista previa y si todo está bien, copiar y pegar, el código que nos dan, en un gadget.

Diseño, añadir gadget, HTML vista previa y si todo esta correcto,

guardar.

Como agradecimiento, nos piden que pongamos algún enlace o articulo a esta  herramienta.

Muchas veces el titulo del gadget, queda mal y es repetitivo.

Me refiero a:

GADGET

Si queremos ocultar el titulo de los gadget,de manera sencilla y fácil de recordar, bastara con poner

<h2></h2>

Y simplemente, con este código nos dejara guardarlo sin ningún titulo, quedando más estético.

Si quisiéramos poner Fotos de antes y después que cambian con el ratón que seria muy interesante para ver un cambio, por ejemplo la decoración de una habitación, o simplemente cambiar de una foto a otra, como en el ejemplo que a continuación he puesto en este post.
Bastaría con poner el siguiente código,

<img src="UNO" onmouseover="this.src='DOS';" onmouseout="this.src='UNO';"/>

remplazando donde dice UNO por la URL de la imagen  uno y donde dice DOS por la URL de la imagen Dos.
Así que tendremos que tener nuestras imágenes alojadas en un servidor y tener la url de la imagen.
Sustituir el UNO por la Url de la imagen que queramos sea la primera. y
sustituir el DOS por la Url de la imagen  que se vea al poner el ratón encima.
Esto si queremos ponerlo en una entrada lo pondremos en HTML,  guardaremos y daremos en vista previa para ver los resultados.
Si nos interesa ponerlo en un gadget,
Añadiremos en vista Diseño un gadget y lo elegiremos en HTML/Javascript: y pegaremos el codigo con los cambios antes mencionados, pudiendo ponerlo donde nos interese..

Un gadget para iconos sociales, no deja de ser útil para nuestro blog.
¿Como poner nuestros iconos sociales?
Para ello iremos a Diseño, añadiremos gadget, elegiremos HTML y pegaremos el siguiente código:

<div id="social">
<a href="HTTP                   FACEBOOK" target="_blank">
<img alt="Facebook" src="http://goo.gl/n2PoaI" title="Siguenos en Facebook" /></a>
<a href="HTTP               GOOGLE PLUS" target="_blank">
<img alt="Google+" src="http://goo.gl/w3W8MA" title="Siguenos en Google Plus" /></a>
<a href="HTTP                       TWITTER" target="_blank">
<img alt="Twitter" src="http://goo.gl/iU7MFl" title="Siguenos en Twitter" /></a>
<a href="HTTP            DE    TU    BLOG" target="_blank">
<img alt="Blog" src="http://goo.gl/mCxHG3" title="Siguenos en nuestro blog" /></a>
<a href="HTTP   DE TU  FEEDFURNER" target="_blank">
<img alt="RSS" src="http://goo.gl/JR0GJr" title="Suscribete a nuestro RSS" /></a>
<a href="HTTP       DE           YOU TUBE" target="_blank">
<img alt="RSS" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgoNl8kUPKyZ3UeUAlkSHneEQpXOx2FU74PlNKyOc6BnSNJ_fKtwHlk3pVMASW5rJQIWpe0Uj8Rzm9rwiq2JcqhEMsg7YYFt4frx0txrndpG7_bXGQtXf5wVcRWforOibT6kdziX5Int0/h120/youtube.png" title="Siguenos en You Tube" /></a>
<a href="mailto:              TU     CORREO" target="_blank"><img src="http://goo.gl/VFfdCO" /></a><br /></div>

Hay que respetar las comillas, espero que te resulte sencillo. Luego solo nos quedara ponerlo en el lugar que nos guste mas.

Ya sabes, si quieres comentar...  y si te gusto compártelo...

A medida que nuestro blog, va creciendo y lo vamos organizando nuestras etiquetas aumentan, tenemos varias maneras de exponerlas, pero una sencilla manera sera poner las etiquetas en dos columnas,  de una manera sencilla y fácil lo conseguimos.

En esta imagen como lo tenemos:

Vamos a Diseño - Edición de HTML.,buscamos el id del widget de etiquetas.En mi caso es Label1

<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'>

Ahora lo que haremos sera ir a Plantilla, Personalizar, Avanzados y añadir CSS 
En ella pondremos el siguiente código:

#Label1 ul li{float: left;width: 40%;}

daremos dos intros y aplicar al blog, asi guardaremos los cambios que si nos fijamos nada mas dar los intros veremos los cambios en vista previa.
Así es como quedaran nuestras etiquetas.

Tendremos que estar pendiente del ID, si no corresponde con Label1 tendremos que poner el que tengamos nosotros en nuestra plantilla con esto habremos puesto nuestras etiquetas en dos columnas.

¿Te ha resultado practico?

Que sólo lo pueda ver el administrador del blog y no los lectores.

Siempre estamos modificando los gadget y muchas veces nuestros lectores, están viendo los gadget mal puestos o inacabados, puede ser cualquier tipo de gadget.

Con este código veremos que podremos ocultarlo mientras lo manipulamos y dejamos a nuestro gusto, solamente agregaremos dos líneas a nuestro gadget para ocultarlo.

Entraremos en vista Diseño y  en Edición HTML de la plantilla con Ctrol f buscaremos el gadget.

Cualquiera nos va a servir para ver como ocultarlo,

Con  un  gadget HTML/Javascript  veremos un código, asi:

<b:widget id='HTML1' locked='false' title='' type='HTML'><b:includable id='main'><!-- only display title if it's non-empty --><b:if cond='data:title != &quot;&quot;'><h2 class='title'><data:title/></h2></b:if><div class='widget-content'><data:content/></div><b:include name='quickedit'/>
</b:includable></b:widget>

Lo único será añadirle lo escrito en azul.

<b:widget id='HTML1' locked='false' title='' type='HTML'><b:includable id='main'><span class='item-control  blog-admin'><!-- only display title if it's non-empty --><b:if cond='data:title != &quot;&quot;'><h2 class='title'><data:title/></h2></b:if><div class='widget-content'><data:content/></div><b:include name='quickedit'/></span></b:includable>
</b:widget>

Si cierras la sesión y entras a tu blog no veras  el gadget que ocultaste, pero si inicias sesión estará  visible para ti.

Para los gadget que no tienen el código igual, una referencia será buscar

<b:includable id='main'>              

 y colocas después

<span class='item-control  blog-admin'>

No todos los gadgets tienen la misma estructura como la del ejemplo, pero será fácil guiarte,
sólo debes colocar el primer código azul  justo después de

<b:includable id='main'> 

 y

 </span> 

 antes de

 </b:includable>

Ahora solo tu veras ese gadget…

¿Te ha servido esta información?

Si quieres las columnas de gadgets encima de las entradas, entonces agrega arriba de lo anterior esto:

<div id='BlogGadget1' style='width: 48%; float: left; margin:0; padding: 5px;'>
<b:section class='sidebar' id='gadget-1' preferred='yes' style='float:left;'/>
</div>
<div id='BlogGadget2' style='width: 48%; float: right; margin:0; padding: 5px;'>
<b:section class='sidebar' id='gadget-2' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>

Si también quieres dos columnas de gadgets debajo de las entradas, entonces agrega debajo del primer código esto:

<div id='BlogGadget3' style='width: 48%; float: left; margin:0; padding: 5px;'>
<b:section class='sidebar' id='gadget-3' preferred='yes' style='float:left;'/>
</div>
<div id='BlogGadget4' style='width: 48%; float: right; margin:0; padding: 5px;'>
<b:section class='sidebar' id='gadget-4' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>

Para añadir un gadget arriba o abajo de las entradas bastara con arrastrar el gadget hasta donde queramos que aparezca,

Pero si queremos añadir dos columnas de gadget arriba o abajo de las entradas. tal y como vemos en la siguiente imagen

 Entraremos en Edición HTML de la plantilla,y con Ctrl F buscaremos este código:

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='false' title='Entradas del blog' type='Blog'/>
</b:section>

Si quieres las columnas de gadgets encima de las entradas, entonces agrega arriba de lo anterior esto:

<div id='BlogGadget1' style='width: 48%; float: left; margin:0; padding: 5px;'>
<b:section class='sidebar' id='gadget-1' preferred='yes' style='float:left;'/>
</div>
<div id='BlogGadget2' style='width: 48%; float: right; margin:0; padding: 5px;'>
<b:section class='sidebar' id='gadget-2' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>

Si también quieres dos columnas de gadgets debajo de las entradas, entonces agrega debajo del primer código esto:

<div id='BlogGadget3' style='width: 48%; float: left; margin:0; padding: 5px;'>
<b:section class='sidebar' id='gadget-3' preferred='yes' style='float:left;'/>
</div>
<div id='BlogGadget4' style='width: 48%; float: right; margin:0; padding: 5px;'>
<b:section class='sidebar' id='gadget-4' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>

El % en color rojo es el ancho de cada uno de los contenedores, si los gadgets no estuvieran igualados, reduce esos valores hasta que los gadgets se vean igualados, conseguiremos tener dos columnas en esa zona del blog.


Puedes poner las columnas arriba, las columnas abajo o arriba y abajo, eso es ya decision de cada uno o bien la necesidad que tengamos en cada blog

Una manera de poner  Botones Flotantes de medios sociales para Blogger, Seguir este enlace  

Botones Flotantes

Bastara con que rellenemos los requisitos y veamos la vista previa, si nos convence tendremos nuestros botones flotantes en unos momentos.