Delicious LinkedIn Facebook Twitter RSS Feed
Showing posts with label Botones. Show all posts
Showing posts with label Botones. Show all posts

Menu horizontal de pestañas para Blog.

Una pregunta habitual es cómo crear un menú horizontal en Blogger. Hay varios tipos de menú que podemos emplear este es sencillo de instalar y muy vistoso pues da un efecto de resaltado al pasar el mouse sobre el menú.Lo podemos ver funcionando por ejemplo aquí.

Podemos adaptar este menú horizontal,agregando mas botones o editando el contenido enlazando cada botón al contenido que queramos.
Primero entra a Diseño > Edición de HTML y pega antes de ]]></b:skin> lo siguiente:
/* Menú horizontal
----------------------------------------------- */
#menu ul { margin:0; list-style:none;}
#menu li {display:inline;margin:0;padding:0;}
#menu a { float:left;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiY1C6Vyx2RLT6wBwlkckQZb1xkfkCzwb41-mLrUwvKnSA-oVA9O_Cjhkv8YdnGmxGfP7NrjQG-CBYqCUVTJtmHCdacqDOKincxSbr1OJtUuxnpRDQX1VAx9kkj26eQKln_WkhkAVYVQQk/) no-repeat left top;margin:0 1.5px 0 1.5px;padding:0 0 0 4px;text-decoration:none;}
#menu a span {float:left;display:block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAAYRKAKYXyfwgC-froC8OVYJAn27Z_32LZf4F0hWagy-NdBbIv4gyx8b3Ycke5Rhy2c0lJdKfmyZzTMTbcWssgD9zI98O_b1glPOM6Box-DKznSiefzYK23Vd7TgzUC9VI8GvYUb6KtLq/) no-repeat right top;padding:5px 12px 4px 12px;color:#fff;}
#menu a span {font: bold 12px Arial, Helvetica, sans-serif; color:#000; float:none;}
#menu a:hover span {color:#fff;}
#menu a:hover {background-position:0% -27px;}
#menu a:hover span {background-position:100% -27px;}
.clear {clear:left}

Ahora entra en Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript y ahí pega esto:
<div id='menu'>
<
ul>
<
li><a href='URL del enlace'><span>Título 1</span></a></li>
<
li><a href='URL del enlace'><span>Título 2</span></a></li>
<
li><a href='URL del enlace'><span>Título 3</span></a></li>
<
li><a href='URL del enlace'><span>Título 4</span></a></li>
<
/ul>
<
/div>

*Cambia los datos que están en color rojo (Enlace "url" + nombre de Botón)por los tuyos. Puedes agregar las pestañas que quieras, sólo añadelas antes de

Botones para agregar a redes sociales para tu blog

AddThis es el contenido líder mundial más grande que comparte la plataforma. Esto da a usuarios finales un modo simple y fácil de compartir el contenido a través de la web social, y provee de editores del tráfico aumentado,

Pegue este código en su sitio donde le gustaría su compartiendo y que aparezca:
><!-- AddThis Button BEGIN -->
<
div class="addthis_toolbox addthis_default_style ">
<
a class="addthis_button_preferred_1"></a>
<
a class="addthis_button_preferred_2"></a>
<
a class="addthis_button_preferred_3"></a>
<
a class="addthis_button_preferred_4"></a>
<
a class="addthis_button_compact"></a>
<
a class="addthis_counter addthis_bubble_style"></a>
<
/div>
<
script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4f00cd7d24ccf63e"></script>
<
!-- AddThis Button END -->
<!-- AddThis Button BEGIN -->
<
div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<
a class="addthis_button_preferred_1"></a>
<
a class="addthis_button_preferred_2"></a>
<
a class="addthis_button_preferred_3"></a>
<
a class="addthis_button_preferred_4"></a>
<
a class="addthis_button_compact"></a>
<
a class="addthis_counter addthis_bubble_style"></a>
<
/div>
<
script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4f00cd7d24ccf63e"></script>
<
!-- AddThis Button END -->
<!-- AddThis Button BEGIN -->
<
div class="addthis_toolbox addthis_default_style ">
<
a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<
a class="addthis_button_tweet"></a>
<
a class="addthis_button_google_plusone" g:plusone:size="medium"></a>
<
a class="addthis_counter addthis_pill_style"></a>
<
/div>
<
script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4f00cd7d24ccf63e"></script>
<
!-- AddThis Button END -->

Menú Flash Navideño para su sitio.

Este es un menú flash,el cual podemos editar en flashvortex,no es necesario registrarse,tan solo modificar,el diseño,las etiquetas (Button labels),los links (Buttons should link to),las opciones,(layout options),editar color y velocidad de animación(Edit misc options).

Una vez hecho,según se quiera se pulsa sobre "Generate Animation",y en la siguiente pagina elegiremos el código EASY,o también "About Your File" otro código que nos ofrece donde se puede modificar el tamaño ancho y alto.

*Este tipo de menú,lo podemos encontrar no solo para un motivo Navideño,también podemos encontrarlo,para obtener un Menú,según el diseño de nuestra pagina,por ejemplo; Menú baloncesto,Menú Rosas Rojas,Menú Perruno,Menú Autos,Menú tipo Militar,Menú tipo Halloween,y muchos mas,así si no os gustan "las nubes de etiquetas"podéis poner uno de estos menús enlazando a vuestros posts según temáticas.*Puedes ofrecer este menú enlazando a los post Navideños,para ponerlo en tu pagina.CÓDIGO:
<script src="http://h2.flashvortex.com/display.php?id=2_1324242197_16284_151_0_170_267_6_2_78" type="text/javascript"></script>

Crear Botones Online Rápidamente,Fácil y Gratis.

-En Internet hay gran variedad de paginas para crear botones,los cuales poner en la barra lateral,para enviar a otras secciones... podemos elegir el tamaño,el diseño,el color y todo "Online",sin necesidad de descargar ningún programa,es muy fácil,y rápido,
-De las paginas donde mas rápidamente podemos generar el Botón deseado y descargarlo,os recomiendo: thefreewebstuff>

-Un ejemplo de lo que puedes hacer con una pagina así seria crear botones con un determinado diseño,y por ejemplo "yo e creado para un blog de Motociclismo" los siguientes:
-Como veis tienen un "diseño determinado" e indican "diferentes secciones",muy útil para el diseño y para compactar contenido el utilizar botones.

Botones efecto cristal para Feed

-Os dejo estos feeds en efecto cristal para decorar:







-Si aún no teneis Feed ir AQUÍ> .

Boton "Imput" para ahorrar espacio,si el post es muy largo

Os traigo ¡una cosa muy util!,un boton el cual ocupa muy poco espacio,y que es de mucho probecho,para escribir post,tablas u otros,"yo los uso para tablas de tiempos en la barra lateral,podeis verlo AQUÍ


-El botón quedaria así:



-Para quien quiera modificar:

-margin-left: 50px; La distancia del botón al borde de la entrada desde la izquierda.
-width: 80px: Ancho del botón.
-Si ponéis un texto más largo en el botón, tendréis que aumentar su tamaño aquí:
-font-size: 14px; Tamaño de la fuente del texto.
-font-family: trebuchet ms; Tipo de fuente del texto.