Twilight Eclipse Blogger Template




Twilight Eclipse Blogger Template es inspirado en la saga de vampiros protagonizada por kristen stewart, robert pattison y Taylor Lauther.

Características:

  • 3 Columnas
  • Enlaces Top Menu
  • Enlaces Pie de Pagina
  • sIFR
  • Buscador
    Google Ajax
  • Menu sidebar en Ajax
  • Crear Botones
  • Uso de tag code
  • 4 widgets publicidad 125x125
  • Otras funciones

Configurar el Top Menu es sencillo solo vamos a Diseño / Elementos de la Pagina y buscamos el Gadget Top Menu:






Presionas Editar y en la ventana emergente añades tus enlaces y guarda.

Para configurar los botones de publicidad 125x125 ve a Diseño / Elementos de la Pagina y buscas los Gadgets 125x125 Ads :




Presionas Editar y en la ventana emergente añades tu enlace con imagen y guarda.

Para configurar el menu del sidebar vas a Diseño / Elementos de la Pagina y buscas el Gadget Menu :






Aun no es automático con las tags existente necesitas hacerlo manual, pero queda muy bien y vale la pena, presionas Editar y en la ventana emergente añades tus enlaces y guarda.

Necesitas usar botones?, con este template podrás hacerlo usando una una clase del css este seria un ejemplo de boton:




Usa el siguiente código para crearlos:


<a href='DIRECCION DEL ENLACE' class='twblog-button' target='_blank'>Texto del Boton</a>


Con esto obtendrás el efecto botón, puedes modificar a tu gusto la forma del enlace solo necesitas usar la clase :

<br />class='twblog-button'<br />



Con esto mayormente tendrás configurado el template, si tienes dudas solo hazla llegar...






Coda Bubble - Crea Tooltips en jQuery



Coda Bubble - jQuery plugin  que te permite agregar información sobre tooltips emergentes, permitir configurar las opciones para sustituir a las imágenes PNG, GIF, o simplemente eliminar burbujas en Internet Explorer.

Instalación :

Añade en la sección de Head de tu template la librería jQuery, bubble.css y jquery.codabubble.js


<link href="http ://www.myjquery.co.uk/jslib/jquery_plugins/coda_bubble/bubble.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="http ://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http ://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/jquery-ui.min.js"></script>
<script type="text/javascript" src="http ://www.myjquery.co.uk/jslib/jquery_plugins/coda_bubble/jquery.codabubble.js"></script>


Ahora abajo del código anterior agregas el script con el cual configuras el tamaño de las burbujas y dirección de las imágenes (Configuración para 2 burbujas):

<br /><script type="text/javascript"><br />$(function(){<br />   opts = {<br />      distances : [40,40],<br />      leftShifts : [-30,-30],<br />      bubbleTimes : [400,400],<br />      hideDelays : [0,0],<br />      bubbleWidths : [200,200],<br />      bubbleImagesPath : "DIRECCION URL CARPETA DE IMAGENES",<br />      msieFix : true<br />   };<br />   $('.coda_bubble').codaBubble(opts);<br />});<br /></script> <br />


Con el siguiente código generas las burbujas en tu template:

<br /><div class="coda_bubble"><br />        <div><br />            <p class="trigger">Nombre de la Burbuja</p><br />        </div><br />        <div class="bubble_html"><br />           <!-- Aqui el texto u contenido de la burbuja --><br />        </div><br />    </div><br />


Plugin configuración:

distances = Distancias de las burbujas

leftShifts = Posicionar las burbujas a la izquierda

bubbleTimes = Tiempo de duracion de las burbujas

hideDelays = Ocultar las burbujas a cierto tiempo

bubbleWidths = Ancho de burbujas

bubbleImagesPath = Ruta de las imagenes de la burbujas

msieFix = Arreglo para IE para PNG, sustituye PNGS con GIFS si fuera necesario, por defecto: true

msiePop = Si es en "false" elimina las burbujas en el IE. Por defecto: true (activas)


Developer | Carlo Tasca





Twitter My Site - Generador de Botones Twitter



Twitter My Site - Puedes agregar un botón de Twitter para tu blog o página web, y hacer que la gente que te siga!
Puede personalizar la imagen con el twitter de identidad o cualquier texto que desee.



Permite añadir texto debajo de la imagen selecciona, así como podrás elegir entre 18 imágenes para generar el código script para obtener tu boton.







CSS3 Generator - Utilidad para generar CSS3 Online



CSS3 Generator - Realmente la herramienta con mayor utilidad para generar CSS3 tales como radio del borde, sombra de caja, sombra de texto, RGBA, @font-face, varias columnas, cambiar el tamaño de cuadro, tamaño de cuadro y el esquema.



Colección de 36 Botones Gratuitos en PSD




36 Web Buttons Collection - Estos botones están disponibles en 6 colores diferentes, puedes modificar el archivo desde Photoshop (PSD) para cambiar los colores y nombre de acuerdo a sus necesidades específicas.

Diseño | Sketchdock



Iconos Sociales Gratuitos en Formato PSD




Free Social Media Icon Set - Estos iconos no tienen restricciones, así que siéntete libre de usarlos como quieras, puedes redistribuir, revender o usarlo de forma comercial. El paquete incluye 42 iconos 64×64 en PNG y en formato PSD.

Diseño | ElegantThemes



Botones para Descargas en PSD




Web2.0 Download Buttons - Botones gratuitos estilo Web2.0 para Descargas en PSD, diseñado por design3edge puedes cambiar el color fácilmente, simplemente edita el "Superposición de degradado" o "Superposición de colores" en "Estilo de capa".

Características:

Set organizaod por capaz
Fácil de modificar
Texto editable
Cambiar el color con facilidad, simplemente edita el "Superposición de degradado" o "Superposición de colores" en "Estilo de capa"

Diseño | Design3edge



Generador de Gradientes para CSS3 Online




CSS3 Gradient Generator - Un generador de gradiente tiene 2 objetivos. El primero es proporcionar gradientes en CSS, el segundo, es proporcionar una interfaz gráfica al usuario en la que puede crear código degradado de forma visual para el uso en su CSS, o donde lo consideran necesario.



Para hacer esto, crearon una interfaz de usuario que es muy familiar, a una herramienta de edición gráfica como Adobe Photoshop. Proporcionar muestras de colores para compensar el gradiente y un regulador para cada uno para determinar la posición del color en el degradado.



Generador de CSS Blueprint Online




Blueprint Grid CSS Generator - Esta herramienta le ayudará a generar versiones más flexibles de grid.css Blueprint y compressed.css y archivos grid.png.

Ya sea que prefiera 8, 10,16 o 24 columnas en su diseño, este generador permite trabajar con mas flexibilidad con Blueprint.



Crear Botones Gradientes en CSS3



Esta es una forma de crear botones en CSS3 sin necesidad de javascript o cualquier imagen, simplemente usando una  clase del CSS, te sera fácil cambiar colores, fuentes, ajustar el gradiente, sombras, radio, borde, etc...

El siguiente código es el estilo general de la clase del botón, usando el valor em en el relleno y la propiedad border-radius para que sea escalable sobre la base de font-size. Para ajustar las esquinas redondeadas y el tamaño de los botones, cambiar el borde de radio, tipo de letra, tamaño y los valores de relleno:


.boton {
display: inline-block;
zoom: 1;
*display: inline;
vertical-align: baseline;
margin: 0 2px;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.boton:hover {
text-decoration: none;
}
.boton:active {
position: relative;
top: 1px;
}





ahora añadimos la clase dle tamaño por si lo quermeos usar mas grande o mas pequeño:

<br />.bgrande {<br />	-webkit-border-radius: 2em;<br />	-moz-border-radius: 2em;<br />	border-radius: 2em;<br />}<br />.bmedio {<br />	font-size: 12px;<br />	padding: .4em 1.5em .42em;<br />}<br />.bpeque {<br />	font-size: 11px;<br />	padding: .2em 1em .275em;<br />}<br /><br />



Ahora añadimos la clase del color, esto es un ejemplo con el color negro gradiente:

<br />.bcolor {<br />	color: #d7d7d7;<br />	border: solid 1px #333;<br />	background: #333;<br />	background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000));<br />	background: -moz-linear-gradient(top,  #666,  #000);<br />	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#000000');<br />}<br />.bcolor:hover {<br />	background: #000;<br />	background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000));<br />	background: -moz-linear-gradient(top,  #444,  #000);<br />	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#000000');<br />}<br />.bcolor:active {<br />	color: #666;<br />	background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444));<br />	background: -moz-linear-gradient(top,  #000,  #444);<br />	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666');<br />}<br /><br />



Detalles que necesitas saber para editar tus propio botones :

zoom = hack IE7
*display = hack IE7
cursor = tipo de cursor
text-align = alineacion del texto texto
font = fuentes (letras)
text-shadow = sombreado de la fuente
-webkit-border-radius = radio del borde (ajusta redondeo de las esquinas)
-moz-border-radius = radio del borde para Firefox (ajusta redondeo de las esquinas)
border-radius = radio del borde (si el navegador no soporta CSS3)
-webkit-box-shadow = sombreado de la caja
-moz-box-shadow = sombreado de la caja para Firefox
box-shadow = sombreado de la caja (si el navegador no soporta CSS3)
background = color de fondo (si el navegador no soporta CSS3)
background: -webkit-gradient = gradiente para webkit
background: -moz-linear-gradient = gradiente para Firefox
filter = hack para IE

Bien ahora crearemos los botones, aqui es lo mas sencillo solo debemos llamar la clase del boton en el link usando class="boton bcolor", ejemplo :

Boton de auto ajuste, usando la clase class="boton bcolor":

<br /><a href="DIRECCION DEL ENLACE" class="boton bcolor">Boton</a>


Boton pequeño, usando class="boton bcolor bpeque":

<br /><a href="DIRECCION DEL ENLACE" class="boton bcolor bpeque">Boton</a>


Boton mediano, usando class="boton bcolor bmedio":

<br /><a href="DIRECCION DEL ENLACE" class="boton bcolor bmedio">Boton</a>


Boton grande, usando class="boton bcolor bgrande":

<br /><a href="DIRECCION DEL ENLACE" class="boton bcolor bgrande">Boton</a>


Tambien puedes crear botones tipos input, un ejempo:

<br /><input class="boton bcolor" type="button" value="nombre del botón"    /> 


otras formas de crear botones:

<br /><button class="boton bcolor">Tag Boton</button><br />	<span class="boton bcolor">Span</span> <br />	<div class="boton bcolor">Div</div> <br />	<p class="boton bcolor">P Tag</p> <br />	<h3 class="boton bcolor">H3</h3> <br />


Botones en varios colores?, si, puedes crear varios colores a tu gusto solo debes llamar el color la boton, un ejemplo rápido... arriba veras que el color del ejemplo del CSS se llama con bcolor siendo de color negro, tu puedes crear varios colores cada uno con una clase ejemplo: bazul, brojo, bamarillo, etc... y llamar la clase: class="boton bazul".


Via | Web Designer Wall

Pictaculous - Genera Tabla de Colores de una Imagen



Pictaculous - Es una herramienta para generar una tabla de colores desde una imagen. Pictaculous se puede definir como un servicio web que genera una paleta de colores de cualquier imagen que pueda imaginar.



El sistema analiza la imagen y extrae los colores del contenido con el fin de crear una paleta de color a juego de la imagen digital con sus colores a juego. Una vez que el sistema crea la paleta, usted tendrá la oportunidad de descargar en un Swatch Adobe.



Twitter lanza la cuenta regresiva para OAuthcalypse



En la actualidad, hay dos maneras de conectarse a las aplicaciones: la autenticación básica, en que proporciona su nombre de usuario y contraseña a un tercero, y OAuth, que le permite conectarse a las aplicaciones sin revelar información de su cuenta. Como parte de un movimiento de hacer de Twitter más seguro y estable, la autenticación básica se eliminará el 30 de junio, aplicaciones ya no podrán pedir su nombre de usuario y contraseña.

El cambio en la política y la puesta en marcha del reloj de cuenta atrás OAuthcalypse viene por el rápido crecimiento de Twitter y el deseo de proporcionar más seguridad mientras se proporcionará a los desarrolladores un montón de tiempo y aviso para cambiar sus aplicaciones de OAuth.

Social Media Icons Pack v2.0 - En Forma Circular




Social Media Icons Pack v2.0 - incluye 17 iconos en 3 tamaños: 128×128, 64×64 y 32x32.

Contiene iconos de: Blogger, Delicious, DesignFloat, Digg, Facebook, Flickr, Google, un icono del corazón que funcione para nada (como favorito), MySpace, Reddit, un icono de RSS, StumbleUpon, Technorati, Twitter, WordPress, Yahoo y YouTube.

Diseño | Blog Perfume



Handycons 2 - Set de Iconos de Redes Sociales




Handycons 2 - Set de iconos que contiene 20 iconos. El paquete contiene iconos de Facebook, Blinklist, Feedburner, Flickr, FriendFeed, Furl, Gmail, Google, icono del Corazón, Last FM, Linked In, Magnolia, Newsvine, PayPal, Skype, Sphinn, Twitter, Vimeo, Yahoo y Tube.

Todos los iconos vienen en cuatro tamaños: 16x16, 32x32, 64x64 y 12x128px.

Diseño | Janko at Warrp Speed



Red Table Blogger Template



Red Table Template es un diseño para Blogger, predominan los colores cálidos en tonos cremas en forma de tablas y rojo.

Características:

  • 3 Columnas
  • Enlaces Top Menu
  • Enlaces Footer
  • sIFR
  • Buscador Google Ajax
  • Menu sidebar en Ajax
  • Twitter Actualizaciones (header)
  • Crear Botones
  • Uso de tag code
  • 4 widgets publicidad 125x125
  • Marcadores sociales
  • Otras funciones



La configuración es sencilla, primero configuraremos las actualizaciones Twitter vamos a Diseño / Edición de HTML y buscamos asi que buscamos esta linea:

<div id='twitter_div'>



ahí cambiaremos en la URL de Twitter, USER_TWITTER a tu usuario:



Configurar el Top Menu es sencillo solo vamos a Diseño / Elementos de la Pagina y buscamos el Gadget Top Menu:






Presionas Editar y en la ventana emergente añades tus enlaces y guarda.

Para configurar los botones de publicidad 125x125 ve a Diseño / Elementos de la Pagina y buscas los Gadgets 125x125 Ads :




Presionas Editar y en la ventana emergente añades tu enlace con imagen y guarda.

Para configurar el menu del sidebar vas a Diseño / Elementos de la Pagina y buscas el Gadget Menu :






Aun no es automático con las tags existente necesitas hacerlo manual, pero queda muy bien y vale la pena, presionas Editar y en la ventana emergente añades tus enlaces y guarda.

Necesitas usar botones?, con este template podrás hacerlo usando una una clase del css este seria un ejemplo de boton:




Usa el siguiente código para crearlos:

<br /><a href='DIRECCION DEL ENLACE' class='tblog-button' target='_blank'>Texto del Boton</a>


Con esto obtendrás el efecto botón, puedes modificar a tu gusto la forma del enlace solo necesitas usar la clase :

class='tblog-button'


Con esto mayormente tendrás configurado el template, si tienes dudas solo hazla llegar...






Suscripciones

Blog Archivo