Consejos Blogger: enero 2011

lunes, 31 de enero de 2011

Plantilla para Blogger: Dione

Dione Blogger Template es una plantilla especial para películas o fotografías, esta contiene una llamativa y elegante galería de carátulas, es bastante simple, y a la ves estéticamente perfecta.

Características de la plantilla Dione:

Fondo Gris
No contiene Sidebar
4 Columnas
Barra de búsqueda
Íconos sociales
Barra superior

Calificación:

Recuerda comentar.

.

Entradas antiguas, inicio y entradas nuevas, fijo abajo del blog

El ejemplo lo pueden ver en mi blog abajo a la derecha. Algo así:

¿Cómo se hace...?

Ir a Diseño, Edición de HTML, Expandir plantillas de artilugios.

Buscar el siguiente código: (Ctrl+F)

Puede variar según la plantilla o si le han hecho algún cambio.

<b:if cond='data:blog.homepageUrl != data:blog.url'>
      <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
      <b:else/>
      <b:if cond='data:newerPageUrl'>
        <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
      </b:if>
    </b:if>
</div>



<div class='clear'/>

Donde dice:  poner el siguiente código:

<span style='position:fixed;bottom:5px;right:80px;z-index:99999999;'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
   <a expr:href='data:blog.homepageUrl' title='Ver entradas nuevas'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY5k8Jaxg7lo5rkxFQgMmvA4m9uJv2R70VJVGDP5lXSovk4DHYVZWVRAA5AEV3SUG1UEMUx2NaOPzPdhWDfVOO45S8xIs_92953gXTG19TKZya5URAlqGJryZgvGQcSbtyaKe4i9IO3iw/s1600/Left.png'/></a>
<b:else/>
          <a expr:href='data:newerPageUrl' title='Ver entradas nuevas'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY5k8Jaxg7lo5rkxFQgMmvA4m9uJv2R70VJVGDP5lXSovk4DHYVZWVRAA5AEV3SUG1UEMUx2NaOPzPdhWDfVOO45S8xIs_92953gXTG19TKZya5URAlqGJryZgvGQcSbtyaKe4i9IO3iw/s1600/Left.png'/></a></b:if>
          <a expr:href='data:blog.homepageUrl' title='Inicio'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0uG6P5Vbl3UMGsQg4g_E4tS1qmbDL9IAMYeoLzyzEssfrkaM10_mtXVEgmr1omMOM-QToQqj2LO3Sy2DEvAE-qL7zFZX6e7uSVyRX4gfN476CfHZMIUfMDBS_dR1NRXnsL-4Xg3I5nUQ/s1600/Home.png'/></a>
          <a expr:href='data:olderPageUrl' title='Ver entradas antiguas'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj98f5ub5xrOddDF_u3AnFolYuU_BaBl39tqoA5e_s72r9B4rfvk4dTWRoJeQGSAto7nKInHgmiuoIEgvIUVDHAzgTtPDwwHlErKJ9IMUs1eUVsKg9CokcyCgLwW0aRUd1SmXQ8x4ll3gs/s1600/Right.png'/></a>
</span>

Cambiar por sus propias imágenes y su título.

Ajustar las distancias desde abajo (bottom:5px) y desde la derecha (right:80px)

Vista previa y si todo va bien guardar.

Entrada a pedido de Angel.

Menú deslizante arriba del blog

Muchas veces cuando pensamos en hacer un blog se nos viene a la mente ponerle muchos gadgets aunque muchos de ellos no sean necesarios, o tal vez sí. Pero lo cierto es que en ocasiones lo que menos disponemos es de espacio suficiente para agregar algunos de ellos. Así que en esos momentos una buena y elegante opción es usar un menú plegable que quede oculto y que aparezca sólo cuando el usuario desee.

Originalmente este artilugio llamado Sliding login panel es un slide para que los usuarios se registren a determinado sitio, pero como ya sabemos, en Blogger no se puede crear un registro de usuarios al blog, pero eso no significa que no podamos sacarle partido a este artilugio y usarlo para agregar en él otros elementos como un menú y un acceso de registro al feed.

¿Que cómo se ve? He aquí la muestra en este blog de pruebas, sólo abre el menú de arriba para verlo.

Este menú deslizante está hecho con jQuery, así que lo primero que haremos será agregar el script; eso lo hacemos pegando después de <head> lo siguiente:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function() {

$("#open").click(function(){
$("div#panel").slideDown("slow");
});

$("#close").click(function(){
$("div#panel").slideUp("slow");
});

$("#toggle a").click(function () {
$("#toggle a").toggle();
});

});</script>

<b:if cond='data:blog.pageType != "item"'>
<style>
body#layout #toppanel {display:none !important;}
</style>
</b:if>

Ahora agregaremos los estilos CSS antes de ]]></b:skin>

/* Top Sliding Menu
----------------------------------------------- */

.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}
.clearfix {height: 1%;}
.clearfix {display: block;}

.tab {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnatjvFE4zDk773vZjhcjzG0ctWUKa-Ai150pXREvjSP2bziYbzEBuiP1y1Eap2efXtaR893UsAu8PaLFFgn2dzHuO6d_RXblvGXq4DkhE9DOcPZThKsN21vlYvVVj1svklmIKmADNQmm5/s1600/tab_b.png) repeat-x 0 0;
height: 42px;
position: relative;
top: 0;
z-index: 999;
}
.tab ul.login {
display: block;
position: relative;
float: right;
clear: right;
height: 42px;
width: auto;
font-weight: bold;
line-height: 42px;
margin: 0;
right: 150px;
color: white;
font-size: 80%;
text-align: center;
}
.tab ul.login li.left {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpTT2pMmXH8jaVlDcqFn__pwwa9p8OYjvOTp3SxX8UQ3d1dFCwQpHEsNlIKRhuVg7rojMTlgNST2u0LFyHTinXAYc1m8pbzjva1B7exzPd2pdlCSK6N4uJo6Pim5snC2RW5rlADRekHEf1/s1600/tab_l.png) no-repeat left 0;
height: 42px;
width: 30px;
padding: 0;
margin: 0;
display: block;
float: left;
}
.tab ul.login li.right {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-F2_ub-OMqLg52jvZliCGT9FaZolHhOClFmZQ5wWYWSh1piNQT3ABV3hTNDdS6Xxa-i8BxUJeDs6mMc6BcVNTj3gfO0MVrm7uH5sJcy-jHMbw8VpS58cAd0xxw43QyRI_HFka5maoSoh4/s1600/tab_r.png) no-repeat left 0;
height: 42px;
width: 30px;
padding: 0;
margin: 0;
display: block;
float: left;
}
.tab ul.login li {
text-align: left;
padding: 0 6px;
display: block;
float: left;
height: 42px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoeJ3m7cBiLt32_5trbHIbeJ4AHyBnR1Ik3nKyKAk-pe5jjm1Y3q20lcbxe7zYB_6jDH25OZtU3XOXr4akUr4G1Lrt7ijYRtCLncCYxPYSlXEzKYgJotAKy2JuU9RdK_14NqKf2KikV7vJ/s1600/tab_m.png) repeat-x 0 0;
}

.tab ul.login li a {color: #15ADFF;}
.tab ul.login li a:hover {color: #FFFFFF;}
.tab .sep {color:#414141}

.tab a.open, .tab a.close {
height: 20px;
line-height: 20px !important;
padding-left: 30px !important;
cursor: pointer;
display: block;
width: 100px;
position: relative;
top: 11px;
}

.tab a.open {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPZrFoN1fxigr_Ty0KRDateyokZ-bEfOGB_SQG8TNatlDqt6s5-F4HbTTRfcnCKKuf6Sgkcg-Bh3qEz88iEZVx9tgRFH-G8M3Z6APz8qDEvOwqflUmGOACUk225IIdTZaNpfnbPpHsd4nt/s1600/bt_open.png) no-repeat left 0;}
.tab a.close {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf4Okee5Pr3AOR7QL36RJkG7gMokFVDYd2OOlfDJrclkh0Caz1D7_xW26MGmO2dcoGuT23RDJLIUKRjI0CVfavdFPKNpWZH5r3ogs53C1SkVVvSmUJGDHdJSDJY7uuMWmElCYdDVQSNjao/s1600/bt_close.png) no-repeat left 0;}
.tab a:hover.open {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPZrFoN1fxigr_Ty0KRDateyokZ-bEfOGB_SQG8TNatlDqt6s5-F4HbTTRfcnCKKuf6Sgkcg-Bh3qEz88iEZVx9tgRFH-G8M3Z6APz8qDEvOwqflUmGOACUk225IIdTZaNpfnbPpHsd4nt/s1600/bt_open.png) no-repeat left -19px;}
.tab a:hover.close {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf4Okee5Pr3AOR7QL36RJkG7gMokFVDYd2OOlfDJrclkh0Caz1D7_xW26MGmO2dcoGuT23RDJLIUKRjI0CVfavdFPKNpWZH5r3ogs53C1SkVVvSmUJGDHdJSDJY7uuMWmElCYdDVQSNjao/s1600/bt_close.png) no-repeat left -19px;}

#toppanel {
position: absolute;
top: 0;
width: 100%;
z-index: 999;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#panel {
width: 100%;
height: 270px; /* Alto del slide */
color: #999999;
background: #272727;
overflow: hidden;
position: relative;
z-index: 3;
display: none;
}
#panel h4 {
font-size: 1.6em;
padding: 5px 0 10px;
margin: 0;
color: #FFFFFF;
text-align: center;
}
#panel p {
margin: 5px 0;
padding: 0;
}
#panel a {
text-decoration: none;
color: #15ADFF;
}
#panel a:hover {
color: white;
}
#panel .content {
width: 960px;
margin: 0 auto;
padding-top: 15px;
text-align: left;
font-size: 0.85em;
}
#panel .content .left {
width: 280px;
float: left;
padding: 0 15px;
border-left: 1px solid #333;
}
#panel .content .right {
border-right: 1px solid #333;
}
#panel .content form {
margin: 0 0 10px 0;
}
#panel .content label {
float: left;
padding-top: 8px;
clear: both;
width: 280px;
display: block;
}
#panel .content input.field {
border: 1px #1A1A1A solid;
background: #414141;
margin-right: 5px;
margin-top: 4px;
width: 200px;
color: white;
height: 16px;
}
#panel .content input:focus.field {
background: #545454;
}
#panel .content input.bt_register {
display: block;
float: left;
clear: left;
height: 24px;
text-align: center;
cursor: pointer;
border: none;
font-weight: bold;
margin: 10px 0;
}
#panel .content input.bt_register {
width: 94px;
color: white;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLyFrHN68Q9BEPLYYchusmt3pfbnEUtXhhGg9sgepq5VQV9IAum1o6vnCvGW4tc48Q-A8wn-IKyyUfhm2Mpc9iLf7GriXP9JPsI-m0cExz-QmFzO6bYZmEJ_Sh0dlKnAidNOaS62DFdzhG/s1600/bt_register.png) no-repeat 0 0;
}

#slide-menu {
width: 160px;
float: left;
}
#slide-menu2 {
width: 160px;
float: right;
}
#slide-menu ul, #slide-menu2 ul{
font-family: Arial, Helvetica, sans-serif;
list-style-type:none;
margin:0;
padding:0;
}
#slide-menu ul li a, #slide-menu2 ul li a {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQDFtpiTkSCuGqC459Fyiyj8Pvr5Gxb7MrGF5k4gm88zd6gSFrRt9GA6DAdXuMdDQbnx_fe_6LHuw4Dtb0CquU4rH2nRaRGjiszLhGFbDZCCf2x4pavYOAUpqQnh6-Z4rjUn8XxlItlnG1/s1600/bullet_blue.png) center left no-repeat;
margin:0;
padding:3px 3px 3px 18px;
}
#slide-menu li, #slide-menu2 li {display: inline;}
#slide-menu a, #slide-menu2 a{
color: #FFFFFF;
text-decoration: none;
font-size: 13px;
display: block;
padding: 3px;
width: 160px;
}
#slide-menu a:link, #slide-menu a:visited, #slide-menu2 a:link, #slide-menu2 a:visited {
color: #999;
text-decoration: none;
}
#slide-menu a:hover, #slide-menu2 a:hover {
color: #FFFFFF;
}

Y por último vamos a colocar la estructura, así que justo después de <body> agrega lo siguiente:

<div id='toppanel'>
<div id='panel'>
<div class='content clearfix'>


<div class='left' style='width:240px !important'>

<h4>Hola, Bienvenido a mi blog!</h4>
<p>Puedes seguirnos en las redes sociales o suscribirte al feed.</p>

<div align='center'>
<a href='http://nombre-de-mi-blog.blogspot.com/atom.xml'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNGHK8eocQGouMnz2GhqZgTDJJPqIJdoCaAQwcgDEqyILSlkLS3bHDPfoVRcbUD0i57_pnTsPskNxVHjcCFEEofYL8oLPyHsXAc4sQdPRgIgNvN0MmtqQSZ9hO7tPhZLLiSTfYgOxFm6Wa/s1600/Feed_.png' style='padding:25px 5px;' width='60'/></a> <a href='http://www.facebook.com/usuario'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb3RRwjNKVOZxqKCSyTU_Bexvz5Q2eY8XCUBYNUuwABqTcLVBE5XIO-RhGcHevTinUFRePRmtYpiGHZUW3E8MzhkNw7YoF_afPs5Aidc_XMw8CQZTX-VD0ulPT9lTRgJa4GDgYFrEROyV6/s1600/FaceBook_.png' style='padding:25px 5px;' width='60'/></a> <a href='http://twitter.com/usuario'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh75ASnDkCPTCLzJBPLl38IVgn1ZdVwZ7q2GswNQnCj_DaWvMG4st24esh64zndIwAOV7FeHTW4p9rEMj9HOWDDCz0_XQdDt0iUbGI9yu0yNMsX7Ey9rNZGGtAV2CGZbjLK1n2Y6aAFdRWX/s1600/Twitter_.png' style='padding:25px 5px;' width='60'/></a>
</div>

</div>


<div class='left' style='width:320px !important'>
<h4>Categorías</h4>

<div id='slide-menu'>
<ul>
<li><a href='URL del enlace'>Menu item uno</a></li>
<li><a href='URL del enlace'>Menu item dos</a></li>
<li><a href='URL del enlace'>Menu item tres</a></li>
<li><a href='URL del enlace'>Menu item cuatro</a></li>
<li><a href='URL del enlace'>Menu item cinco</a></li>
<li><a href='URL del enlace'>Menu item seis</a></li>
<li><a href='URL del enlace'>Menu item siete</a></li>
<li><a href='URL del enlace'>Menu item ocho</a></li>
<li><a href='URL del enlace'>Menu item nueve</a></li>
<li><a href='URL del enlace'>Menu item diez</a></li>
</ul>
</div>

<div id='slide-menu2'>
<ul>
<li><a href='URL del enlace'>Menu item uno</a></li>
<li><a href='URL del enlace'>Menu item dos</a></li>
<li><a href='URL del enlace'>Menu item tres</a></li>
<li><a href='URL del enlace'>Menu item cuatro</a></li>
<li><a href='URL del enlace'>Menu item cinco</a></li>
<li><a href='URL del enlace'>Menu item seis</a></li>
<li><a href='URL del enlace'>Menu item siete</a></li>
<li><a href='URL del enlace'>Menu item ocho</a></li>
<li><a href='URL del enlace'>Menu item nueve</a></li>
<li><a href='URL del enlace'>Menu item diez</a></li>
</ul>
</div>
</div>


<div class='left right'>

<h4>¡Suscríbete a nuestro blog!</h4>
<p>Recibe en tu correo las últimas noticias del blog. Sólo ingresa tu correo para suscribirte.</p>

<form action='http://feedburner.google.com/fb/a/mailverify?uri=Nombre-del-Feed' method='post' target='_blank'>
<input class='field' name='email' type='text/' value=''/>
<input name='uri' type='hidden' value='Nombre-del-Feed'/>
<input name='loc' type='hidden' value='es_ES'/>
<input class='bt_register' type='submit' value='Suscribir'/></form>

</div>
</div>
</div>

<div class='tab'>
<ul class='login'>
<li class='left'/>
<li>Hola invitado!</li>
<li class='sep'>|</li>
<li id='toggle'>
<a class='open' href='#' id='open'>Abrir menú</a>
<a class='close' href='#' id='close' style='display: none;'>Cerrar menú</a>
</li>
<li class='right'/>
</ul>
</div>
</div>

Si usas una plantilla hecha a través del Diseñador de plantillas de Blogger entonces el código anterior deberás pegarlo después de:

<body expr:class='"loading" + data:blog.mobileClass'>

Ahora bien, esta última parte que hemos agregado es lo que contiene todo lo que se oculta y despliega. He puesto en color verde los nombres de cada sección para que les sea más fácil reconocerlas.

En la primera sección puedes cambiar el mensaje de bienvenida; seguido de él están los iconos de las redes sociales, sólo cambia lo que está en color naranja por tu nombre de usuario ya sea de Facebook, Twitter y el nombre de tu blog.

En la segunda sección está el menú de categorías que hemos agregado, basta con poner las URLs de los enlaces y los nombres de los enlaces que hemos añadido al menú.

Y en la tercera sección está la suscripción por correo electrónico, recuerda que debes tener habilitada esa opción en Feedburner. Y ya habilitada sólo hay que poner donde se indica en color azul el nombre del feed que tenemos.

Y listo. Básicamente esas son las áreas importantes que podemos personalizar, aunque por supuesto podemos quitar algo de eso para pegar alguna otra cosa.
El alto de todo el contenedor se cambia donde dice /* Alto del slide */, esto es sólo por si queremos ajustar otra medida.
Y como seguramente muchos querrán cambiar el color de una vez aclaro que son muchas imágenes así que para hacerlo tendrán que editar cada imagen que vean en los estilos y después cambiar el color en background: #272727;

Por último y no menos importante, recuerda que este menú usa jQuery así que si en tu plantilla estás usando Scriptaculous, Prototype o Mootools entonces no te funcionará.

Ahora sí, a disfrutar de este elegante menú con efecto deslizante, que por cierto, lucirá mejor si tenemos oculta la navbar.

Sitio del autor | Web-Kreation

Publicidad muy efectiva

(hay que leer la letra chica)

Plantilla para Blogger: Game Premium 2010

Demo | Descargar

Game Premium es una plantilla creada por Jhonel89, Es una excelente plantilla para usuarios que deseen crear un blog de juegos, contiene variadas secciones, entre las cuales se destaca de las otras plantillas, por integrarse con Disqus Comments, está basada en el desarrollo de API pre-loader, la cual está optimizada para flash.

Diseño de la plantilla:

2 Columnas
Compresión CSS, JavaScript incorporada
Compatibilidad con IE6

Guía de instalación:
Game Premium 2010 Guía

Calificación:

domingo, 30 de enero de 2011

Agrega tu Favicon en Ayuda Bloggers

Me he unido a la iniciativa, al igual que muchos blogs, de compartir un pequeño espacio en mi sidebar para los que deseen agregar sus favicons.

Para los que no tengan claro de qué se trata esto:

Primero, un favicon es el ícono que aparece al lado izquierdo de la URL en la barra de direcciones.
Una Faviconera, es una zona en donde agregas una gran cantidad de íconos de Blogs o Webs con el fín de aumentar las visitas y la popularidad de éste.

Cómo Obtener un espacio en mi Faviconera:

Lo único que pido a cambio, es que me agreguen también, así nos beneficiaremos todos de esta iniciativa.

URL de mi Blog	http://ayuda-bloggers.blogspot.com
La URL de mi Favicon (GIF)	https://lh3.googleusercontent.com/-VSdGVB4dtIQ/TYgjwVmR6gI/AAAAAAAAAig/fIgLzCTEqCc/s1600/098300-blue-jelly-icon-social-media-logos-blogger-logo-square.png
Nombre de mi Blog	Ayuda Bloggers \| Tutoriales Blogger y más para tu Blog.

Recordar que deben rellenar el siguiente formulario:

URL de su Blog
La URL de su Favicon
Nombre de su Blog

Para que recibamos tu Favicon, recuerda que deberás crear un comentario, si tienes problemas con éste, puedes enviarnos el Favicon desde el siguiente enlace: Contáctanos.

Requisitos:

Sólamente se aceptarán imágenes de 16x16px en cualquier formato, ya sea .ICO,. PNG, .JPEG, etc.
Si recibimos tu petición y vemos que no haz agregado o que haz eliminado mi Favicon, esta se omitirá.

Eso es todo, cualquier otra duda, puedes comentar, se responderá a la brevedad y se confirmará tu Favicon en nuestro sidebar.

Saludos!

.

Fuentes para tus diseños

Los detalles de Jose a secas siempre vienen en zip, y vienen así porque son fuentes para descargar e instalarlas en nuestro PC. - Sitio tripwire Magazine

sábado, 29 de enero de 2011

Post relacionados con imágenes en Blogger

Hay varias formas de agregar un ''Related post'' al final de las entradas de blogger, pero el mejor, y el más sencillo de instalar, es mediante LinkWithin.

¿Qué lo hace mejor que otros?

Primero, cabe señalar que la instalación de este plugin en Blogger no requiere registro, sólamente necesitas loguearte en Blogger y puedes instalarlo con 1 sólo clic.
A diferencia de los distintos métodos que se conocen, éste es el más rápido y menos riesgoso, no necesitas modificar nada en tu plantilla (LinkWithin lo hace por tí).
Es compatible con WordPress, Blogger y TypePad.
Incluye thumbnails (imágenes previas) y puedes escoger hasta un máximo de 5 post relacionados.

El resultado de LinkWithin es el siguiente:

Imágen de muestra.

¿Cómo instalar LinkWithin en nuestro Blog?

1. Primero vamos a la página de LinkWithin y rellenamos los campos que nos piden:

2. Hacemos clic en ''Get Widget!'' y nos vamos al siguiente paso:

a. Primero presionamos en el enlace ''Install Widget'' y deberás loguearte con tu cuenta en Blogger.

b. Nos aparecerán algunas opciones, de las cuales tendrás que escoger el blog a modificar (en el caso de usar más de uno). y seleccionar en el botón ''Añadir Artilugio''

c. Para aumentar el rendimiento y la velocidad del widget haremos lo siguiente:

-Vé al Escritorio Blogger, seguido de Diseño, y luego moverás el widget debajo de la sección de los post, tal como sale en la imágen:

-Guardas los cambios.

Para comprobar si el cambio fue efectivo, busca algún post y lo corroboras.

Nota:
Recuerda que dentro de unas horas tus etiquetas serán mejor indexadas en LinkWithin, por lo que los post relacionados tendrán mas relevancia unos con otros.

Espero que les haya servido este tutorial, recuerda que tu comentario es importante.

Saludos.

Lightheaded

REFERENCIA:Blogtecnia

viernes, 28 de enero de 2011

Plantilla para Blogger: Intent

Demo | Descargar

Intent es una plantilla para Blogger adaptada desde WordPress, contiene las siguientes características:

2 Columnas.
Sidebar a la derecha.
Estilo Revista.
SlideShow.

Calificación:

Multisesiones en messenger sin instalar nada

Es facil de hacer, solo deben seguir los siguientes pasos y tener mucho cuidado de no borrar nada cuando entren a los registros.

Pasos:

1. Ir a Inicio. Deben abrir "run" o "ejecutar".
2. Cundo lo tengan abierto debe escribir lo siguiente: "regedit" y aceptar.

3. Respaldo del registro:

     3-1: Marcar Mi PC.
     3-2: Archivo > Exportar. Le ponen un nombre y guardan en su computadora.

4. Modificar el registro:

     4-1: Navegan a traves de las carpetas hasta que encuentren lo siguiente:
              HKEY_LOCAL_MACHINE > SOFTWARE > Microsoft > Windows Live.
     4-2: En "Messenger" hacemos clic con botón derecho y creamos un DWORD con el nombre de MultipleInstances.
     4-3: Luego damos clic derecho en MultipleInstances, seleccionamos modificar y establecemos un valor de 1.
     4-4: Salir

Listo a disfrutar de multisesiones sin necesidad de instalar nada.

Para ti amigo Dj Edu de VituaRadio.

jueves, 27 de enero de 2011

Efectos de Fotos en línea: LoonaPix

LoonaPix es una aplicación web que permite modificar nuestras imágenes, contiene variados efectos los cuales agregan un estilo único a tus fotografías.

La página contiene 131 efectos para tus fotografías, con una calidad impresionante, muchos de éstos son imágenes con una calidad excepcional.

Utilizar LoonaPix es bastante sencillo:

1. Primero vamos a LoonaPix.com

2.Segundo, subiremos la imágen al servidor donde aparece ''Carga tu foto'' (ver imágen):

3. Seleccionamos alguno de los efectos de la derecha:

4. Ahora seleccionaremos las dimensiones de la imágen subida:

5. Hacemos clic en donde dice ''Crear'' y nos enviará al resultado de nuestra imágen el ejemplo es este:


Clic en la imágen para ver completa.

Hay muchos otros servicios que hacen lo mismo, pero en lo personal, no hay ninguno tan bueno como éste, la calidad es excelente y además las variaciones hacen de LoonaPix un buen servicio.

Cómo aparecer en Google.

Darse de alta en Google, constituye una importante fuente de visitas a nuestro blog, a pesar de conocer su importancia, muchos no sabemos cómo añadir nuestras URL a Google, en este tutorial les enseñaré a hacerlo.

Primero iremos al siguiente enlace: Incluye tu URL en Google

y tal como sale en la imágen, completamos los campos:

No olvides que el formato de la URL es http://tublog.blogspot.com

¿Bastante simple no? A pesar de eso muchos desconocemos la utilidad de esto.

Recuerda que puede tardar desde horas, hasta algunos días hasta que los bots de Google verifiquen tu URL.

Eso es todo.

Saludos.

Freebies: una forma de atraer seguidores.

Para los que no saben lo que son las freebies, existen muchos servicios que ofrecen muestras gratis a los usuarios, ya sea un producto físico o uno virtual con el fín de atraer más usuarios. En el tema del Blogging se puede hacer lo mismo, no necesariamente tiene que ser un objeto físico, puede ser algo simple y novedoso, como un hermoso pack de íconos, programas freeware, plantillas, imágenes, texturas, íconos para escritorio, plugins, extensiones, o cualquier cosa que se nos venga a la mente.

Es importante considerar varios aspectos:

-La relevancia: Obviamente que los freebies deberán tener relevancia con la temática de tu blog, por ejemplo si tu blog es sobre música, imposible que agregues contenido con material fuera de lugar, como por ejemplo imágenes de vehículos.

-La variación: Es crucial que al momento de tener un freebie, éste tenga bastantes variaciones, pongamos de ejemplo una imágen o un ícono, es importante que venga en varios formatos, ya sea PNG, JPEG, TGA, ICO, también las resoluciones (imágenes widescreen y estándar).

-Inclusión de tus enlaces: Cuando agregas un freebies a tu blog, pretende siempre que si vienen en algún formato comprimido, ya sea .ZIP, RAR, o algún otro tipo, es importante que crees un enlace a internet con la dirección de tu blog, o ya sea un documento de texto en el cual se muestre tu dirección y/o algún mensaje.

-La novedad: Mientras más novedosos tus freebies, ganas originalidad.

-La calidad: Recuerda que es importante que tus freebies contengan un mínimo de calidad, por ejemplo si creas un pack de íconos, lo ideal es que mantengan un estándar de calidad bueno, no es correcto que subas un montón de íconos hechos con Paint. Esfuérzate.

Eso es todo, espero que les haya gustado este consejo, si tienen alguna duda, problema, o sugerencia pueden comentar o contactarnos en la zona superior de mi blog.

Saludos.

.

miércoles, 26 de enero de 2011

Gadget multipestañas en Blogger

Insertar un Gadget Multipestañas en tu Blog, es algo muy recomendado ya que en él puedes organizar tus gadgets de tal forma que ocupen menor espacio en la sidebar, además de ser algo bastante vistoso, es algo muy configurable, se puede insertar cualquier otro gadget sobre él, ya sea desde un simple texto, hasta un avanzado Gadget HTML, puedes ver este gadget en acción en la siguiente imágen:

Cómo instalar este Gadget en Blogger:

1. Primero vamos a nuestro escritorio en Blogger, y nos vamos a Diseño, Edición de HTML.

2. Seleccionamos ‘’Expandir plantillas de artilugios’’.

3. Buscamos el siguiente código: ]]></b:skin> y sobre éste agregamos el siguiente código:

ul.bltabcaja {height:24px;
margin: 0 auto;
width: 100%;
padding: 0;
float: left;
list-style: none;
list-style-type: none;
}
ul.bltabcaja li {
height:23px;
line-height:23px;
overflow: hidden;
background: #b3e0b5;
float: left;
position: relative;
margin: 0 auto;
padding: 0;
border-left: none;
margin-bottom: -1px;
border: 1px solid #999999;
}
ul.bltabcaja li a {
padding: 0 18px;
font-size: 14px;
text-decoration: none;
color: #000000;
display: block;
outline: none;
}
ul.bltabcaja li a:hover {
text-decoration: none;
background:#81D585;
}
ul.bltabcaja li a:active {
background: #6db671;
}
#bltabcaja2 {
width: 218px;
clear: both;
border-top: none;
border: 1px solid #999999;
overflow: hidden;
float: left;
background: #ffffff;
}
.bltabcaja_contenido {
font-size: 14px;
padding: 20px;
}
html ul.bltabcaja li.actual a:hover {
background: #ffffff;
border-bottom: none;
}

4. Ahora buscamos </head> y sobre éste pegamos el siguiente código:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function()
{
$(".bltabcaja_contenido").hide();
$("ul.bltabcaja li:first").addClass("active").show();
$(".bltabcaja_contenido:first").show();
$("ul.bltabcaja li").click(function()
{
$("ul.bltabcaja li").removeClass("active");
$(this).addClass("active");
$(".bltabcaja_contenido").hide();
var bltababierta = $(this).find("a").attr("href");
$(bltababierta).fadeIn();
return false;
});
});
</script>

5. Guardamos la plantilla.

6. Ahora creamos un Gadget HTML y sobre él escribimos el siguiente código:

<ul class="bltabcaja">
<li><a href="#bl1">TITULO TAB 1</a></li>
<li><a href="#bl2">TITULO TAB 2</a></li>
</ul>
<div id="bltabcaja2">
<div id="bl1" class="bltabcaja_contenido">
CONTENIDO TAB 1
</div>
<div id="bl2" class="bltabcaja_contenido">
CONTENIDO TAB 2
</div>
</div>

Donde dice TITULO TAB X, corresponde al título de cada pestaña, donde dice CONTENIDO TAB X corresponde al contenido del gadget.
Puedes agregar otra pestaña agregando antes del cierre (</div>) el siguiente código:

<div id="bl3" class="bltabcaja_contenido">
CONTENIDO TAB 2
</div>

También antes de </ul> deberás pegar lo siguiente:

<li><a href="#bl3">TITULO TAB 3</a></li>

Si deseas agregar otras más deberás pegar el mismo código pero donde dice ‘’bl3’’ deberás reemplazar el número por bl4, bl5, así consecutivamente.

Eso es todo, y cualquier duda o problema, puedes comentar.

.

Botón ''Twittear'' en las entradas de Blogger

Existe la posibilidad de que todos los usuarios que visiten tu blog puedan twittear tus entradas fácilmente con un clic, para ello existe este plugin oficial para blogger, es simple y bastante fácil de instalar.

Cómo instalar este botón:

1. Primero debemos ir al siguiente enlace: Botón twittear en el cual tendremos que seleccionar el botón que más nos guste, existen 3 botones, cuenta vertical, horizontal y nula (sin contador de tweets) tal y como aparece en la imágen inferior:

2. Más abajo aparecerá un código HTML el cual utilizarán posteriormente (clic en la imágen para ver el ejemplo):

3. Seguido de eso, vamos a nuestro escritorio en Blogger, de ahí iremos a Diseño y continuado de ''Edición de HTML''. Seleccionaremos ''Expandir plantillas de artilugios'' y buscaremos el siguiente código:

<div class='post-body entry-content'>

4. Debajo de este código pegamos la siguiente línea:

<b:if cond='data:blog.pageType == "item"'>

AQUI EL CODIGO QUE COPIAMOS EN TWITTER PARA EL BOTON

</div>

</b:if>

5. En donde aparece ''AQUI EL CODIGO QUE COPIAMOS EN TWITTER PARA EL BOTON'' deberán reemplazarlo por el código que generó el botón SIN BORRAR NINGUNA OTRA COSA.

Importante:

Si desean instalar a la izquierda de la entrada este botón, deberán reemplazar el código float: right; margin-left: 5px; por el siguiente:

float: left; margin-right: 5px;

Si deseas insertar el botón en la zona inferior de una entrada, deberás pegar el código debajo de:

<data:post.body/>

Valentine's Day Icon Set

Valentine's Day Icon Set es una colección de íconos especiales para el día de San Valentín.

CARACTERÍSTICAS

Pack de cinco íconos: un ramo de flores, un oso de peluche, chocolates, un corazón y cupido.
Autor : IconShock
Formato: PNG.
Tamaño: 512x512, 256x256.

Descargar

Nota: En el archivo encontrarán dos carpetas; deben abrir la llamada valentines-day-icons-iconshock-dawghouse

martes, 25 de enero de 2011

Efecto esquina doblada en los post con CSS

En la entrada anterior vimos la forma de añadir un efecto esquina doblada con CSS, me preguntaba Enrique si había forma de aplicar ese mismo efecto como fondo de los post y el resultado es una forma original de mostrar nuestras entradas.

En plantilla edición de HTML podemos encontrar algo así:

.post {

margin:.5em 0 1.5em;

border-bottom:0px dotted $bordercolor;

padding-bottom:1.5em;

}

Es el sitio indicado para añadir una imagen de fondo o color en los post y en este caso el efecto de esquina doblada, tendremos que eliminar lo anterior y en su lugar añadimos:

.post {
background:#ccc;/* color del post */
color: #333; /* color del texto */
margin: 2em auto;
overflow: hidden;
padding: 1em 1.5em;
position: relative;
width: 580px; /* ancho del post*/
}
.post:before {
content:"";
position:absolute;
top:0;
right:0;
border-width:0 40px 40px 0;
border-style:solid;
border-color:#fff #fff #333 #000;/* color borde y pestaña */
background:658E15;
/* sombra pestaña opcional*/
-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.3), -2px 2px 2px rgba(0,0,0,0.2);
-moz-box-shadow:0 2px 2px rgba(0,0,0,0.3), -2px 2px 2px rgba(0,0,0,0.2);
box-shadow:0 2px 2px rgba(0,0,0,0.3), -2px 2px 2px rgba(0,0,0,0.2);
}

En vista previa ya podemos ver el resultado, si deseamos usar nuestros propios colores sólo debemos sustituirlos, para facilitar la tarea en el mismo código está indicado el lugar para hacerlo.

Cómo subir archivos en Google Sites

Cuando nos proponemos personalizar el blog nos damos cuenta que hay archivos que necesitamos subir a la red tales como scripts, imágenes, objetos swf, etc., y nos rompemos la cabeza buscando un hosting decente y gratuito que nos saque del apuro.

Si bien hay excelentes servicios sin costo para alojar archivos a veces nos encontramos con que no aceptan todo tipo de archivos o que su interfaz es tan complicada que parecería diseñada sólo para ingenieros informáticos.

Aunque no me gusta depender de tantos servicios externos (pero tampoco quiero pagar por uno propio) una de las mejores opciones es utilizar el servicio de alojamiento de Google a través de Google Sites, total, si nuestros blogs y fotos se alojan en los servicios de Google pues qué más da usar uno más de él.

Lo primero es entrar a Google Sites y crear un sitio.

A continuación aparecerán opciones para elegir el diseño y para ponerle un nombre al sitio. Seleccionamos el diseño, indicamos el nombre y abajo hacemos click en Mas opciones, ahí verificamos que esté marcada la casilla Compartir con todo el mundo.

Una vez hecho esto habremos creado el sitio, ahora vamos a la parte superior derecha y hacemos click en Crear página.

Ahí deberemos seleccionar la plantilla Archivador y ponerle un nombre.

Habiendo hecho esto ya podemos subir archivos a Google Sites, sólo damos click en Añadir archivo.

Una característica que tiene es que podemos agregar una descripción al archivo que estamos subiendo, esto es para que no nos hagamos un lío cuando tengamos muchos archivos ahí.

Ya que el archivo se ha subido veremos que aparece en la lista junto con un link que dice Descargar. Con el botón derecho damos click sobre ese enlace y copiamos la dirección del enlace.

Esa es la URL del archivo que podremos usar en donde lo vayamos a ocupar, sólo deberemos borrar el ?attredirects=0&d=1 que aparece a final de todas las URLs que tomemos de Google Sites.

Si quieres que tu página de archivos sea lo primero que se vea cuando entres a tu sitio de Google Sites entonces estando en la página de archivos que has creado haz click en la parte superior derecha donde dice Más acciones y luego en Administrar sitio.

Ahora en el menú del lado izquierdo click en General y donde dice Página de destino damos click en Cambiar.

Ahí elegimos la página de archivos que creamos y listo.

Las ventajas de usar Google Sites como alojamiento son que acepta múltiples tipos de archivos, el ancho de banda es bastante bueno y la interfaz es muy sencilla.

Las desventajas es que hay limitación de tamaño en los archivos y que los archivos subidos ahí no funcionan si queremos usarlos en un dominio propio.

lunes, 24 de enero de 2011

¡35 nuevas fuentes para tu Blog!

Hace unos meses se introdujo Fuentes Web para Blogger en Borrador. Hoy estamos muy contentos no sólo porque lanzamos las fuentes Web para todos los usuarios de Blogger, si no porque también anunciamos que hemos añadido 35 fuentes y hacemos así un total de 77 fuentes para Blogger!

Henry Ford dijo una vez: "Cualquier cliente puede tener su auto pintado de cualquier color, siempre y cuando sea negro". Cuando se trata de Internet y de las tipografías, a veces esto también sucede: "Se puede utilizar cualquier fuente que se desee, siempre y cuando sea Arial". Con la introducción de fuentes Web, ¡esto está muy lejos de la verdad!

Fuentes Web, presentadas por nuestros buenos amigos de Fuentes de Google, te permiten adornar y personalizar aún más tu blog. Sólo echa un vistazo a lo que hemos hecho con los títulos de entradas de este blog. Y para aquellos que estén interesados en las fuentes de alfabetos no latinos como el cirílico y el griego, ¡también las tenemos!

¿Listo para probarlas? Sólo tienes que ir a la pestaña “Avanzado” del Diseñador de plantillas de Blogger para tu blog, selecciona el tipo de texto que deseas cambiar (título de la entrada, la página de texto, etc) y haz clic en cualquiera de las nuevas fuentes web para una vista previa. No te preocupes, nada va a cambiar en tu blog hasta que selecciones "Aplicar a los blog". Así, podrás probar con todas las fuentes y sólo hacer el cambio cuando estés listo.

¡A probar nuevas fuentes!

Publicado por Anil Sabharwa.

Fuente:

Ganadores del concurso ¡Aquí es Ciudad Blogger!

De verdad que me he quedado impresionado por la respuesta que tuvo el concurso de fotografía para celebrar los 2 añitos de vida que tiene esta ciudad virtual.

Aunque mandaron muchas más fotografías de las que están publicadas lamentablemente muchas de ellas no cumplían con los términos del concurso y por eso no pudieron participar pero aun así la convocatoria hizo que muchos se levantaran del escritorio y salieran a capturar los lugares que más les gustan de su ciudad y compartirla con todos nosotros para decirnos dónde está Ciudad Blogger.

En total participaron 37 concursantes con 48 fotografías de 38 ciudades y 14 países diferentes que sin duda nos han dejado impresionados con los lugares tan hermosos que existen en el planeta. ¿Vemos las fotos de los participantes?

Si ya se dieron una vuelta por la página de Facebook seguramente ya sabrán cuál de estas fotos ganó uno de los premios. De cualquier manera vamos a ver el video para conocer a los 2 ganadores. Recuerden que son 2 premios, uno de ellos se va para el concursante cuya fotografia tuvo mayor número de votos y el ganador del otro premio fue elegido al azar a través de un sorteo en el cual se incluyeron los nombres de todos los participantes excepto el del primer ganador. Conozcamos entonces a los ganadores.

¡Muchas felicidades a Franco Paravecino y Carmen Martin!
Ambos han ganado 1 dominio por 2 años y 1 banner por 2 meses en Respondones.com

Mil gracias a todos los participantes y a quienes estuvieron apoyando a sus favoritos. Nos vemos muy pronto con otro dominio que estaremos regalando.