Cirujano Blogger

Poner Chat o gadget para dejar mensajes

2010-07-07T16:21:00.001-04:00

Poner gadget`s para Chat o para dejar mensajes, opiniones y más desde tu blog.

Existen varios tipos de gadget para agregar una Chat en los blog`s pero aquí se mostraran los mejores y que podrían ser no tan conocidos por ti.

1.- XAT es una forma útil y multipersonalizable de agregar un chat en tu blog ya que contiene opciones para cambiar imagen de fondo y el ancho, pero lo más importante es que no requiere que te registres para optar por un chat, sino que lo puedes hacer de forma automática. El chat te da un nombre que puedes cambiar, un avatar que también puedes cambiar e incluso poner una foto tuya, contiene sonidos, emoticonos y más. Podrá registrarte y adquirir aún más accesorios útiles para ti. Lamentablemente no esta completamente traducido al español pero eso no significa un gran problema ya que es bastante fácil.

Si quieres hacerte un chat en Xat click aquí.

2.-ShoutMix es una buena forma de crear un gadget de chat y para que dejen mensajes en tu blog o web ya que permite la selección del nombre o si se quiere ser anónimo, se puede dejar el link de tu blog y aparte el mensaje. El completamente personalizable porque da opciones selección de color de gadget, tipo de fuente (letra usada) lo que te permitirá si quieres que se escriba en la fuente Comic, Arial o la quieras, puedes agregar emoticonos personalizables. Lamentablemente la página para creártelo esta completamente en ingles, aunque igual podrías guiarte con un poco conocimiento de este idioma. Esta completamente recomendado. Tiene versión de pago o cuenta “premium”.

Para crearte uno haz click aquí.

3.- C-BOX un servicio extremadamente usado por blog`s siento que no es tan “la gran cosa” debido a que tiene opción de pago si quieres obtener todo lo que da. Entrega opción para dejar emoticonos, el nombre y la url de tu blog, no es lento a cargar, puedes elegir algunos colores ya que para personalizarlo a todos los colores que quieras debes pagar, esta mayormente en inglés, te deja a selección propia el tamaño del gadget, no sirve como chat ya que al dejar mensajes no se pueden leer los mensajes que llegan por parte de otra persona, si quieres que sea como un chat debes pagar. En resumen no lo recomiendo pero no es completamente malo.

Para crearte uno haz click aquí.

4.- Chatango es uno se los servicio más extenso o con más opciones ya que entrega, al momento de dejar un mensaje, opciones de dejar los mensajes en negrita, cursiva, subradado, y colores, además la fuente y más tipos de fuentes, se pueden dejar link`s de tu blog, tu nombre, pero es complicado ya que esta todo en ingles y la gente que no sabe mucho del idioma puede confundirse. Otra vez es una página mayormente en ingles.

Para crearte uno haz click aquí.

5.- 99CHATS, de los creadores de 99Counters(servicio de contador de visitas) llega 99CHATS un servicio para incluir un chat en tu blog de forma gratuita y personalizable. Contiene un gran error, que solo sirve se chat y no de mensajero como por ejemplo agradecer a la página por lo que sea, debido a que lo escrito no queda guardado, y cada ves que entres a un blog con esto podrás ver a la gente conectada pero tu mensaje ya no estará. Además cada vez que entres al blog deberas ingresar tu apodo porque ni eso se guarda. Lo bueno es que es un servicio totalmente en español y gratuito.

Para crearte uno haz click aquí.

Gadget de “Buscar” para tu blog

2010-07-04T15:50:00.001-04:00

Los mejores métodos de búsquedas para tu blog.

Es un gran problema cuando vas a un blog o página y quieres buscar algo y no está el gadget de buscar por ningún lado y de ser así podríamos estar mucho tiempo buscando lo que necesitas, para esto están los gadget de búsqueda que comúnmente tienen el nombre “Buscar”. Existen variadas formas de realizar una búsqueda en tu blog pero aquí traigo las más necesarias.

1.- Búsqueda interna en el blog a través de java script, no es atrayente pero se logra una buena búsqueda de entradas, por ejemplo cuando buscas algo aparecen todas las entradas relacionadas con lo que escribiste.

Para instalarlo en tu blog haz lo siguiente:

Desde tu Escritorio en Blogger vas a Diseño, ahí en Elementos de página clickeamos en añadir gadget, se abrirá una ventana y vamos a HTML/JavaScript, en el nombre ponemos   en caso de que queramos dejarlo sin titulo o tan solo escribimos algo parecido a “buscar” o “buscador”, lo que tu quieras, y en contenido escribiremos esto:

<form id="searchthis" action="/search" style="display:inline;" method="get"><input id="search-box" name="q" type="text"/> <input id="search-btn" value="Buscar" type="submit"/></form>

2.- Cuadro de Búsqueda, es sin duda la forma más simple de agregar un buscador al blog pero es lento para cargar no mucho pero algo algo, las entradas se demoran en actualizarse y no se muestra mucho pero sin embargo es bueno y accesible para cualquier persona, el resultado de las búsquedas aparecen abajo o al lado del gadget, aparte de las entradas a diferencia del anterior que dirige todo el blog a la búsqueda, este se queda en el mismo hasta que el usuario elija que entrada quiere.

Para agregarlo solo debes ir de tu Escritorio a Diseño, y desde ahí Agregar Gadget y desde la ventana que se abra buscar Cuadro de búsqueda.

3.- Busqueda a elección de usuario, se agrega de la misma forma que el primero solo que ha diferencia en el contenido se escribe lo siguiente:

<form action="http://www.google.com/search" method="GET">
<input value="UTF-8" name="ie" type="hidden"/>
<input value="UTF-8" name="oe" type="hidden"/>
<table bgcolor="#FFFFFF">
<a href="http://www.google.com/">
<img border="0" alt="Google" src="http://www.google.com/logos/Logo_25wht.gif"/>
</a>
<input maxlength="255" value=""
name="q" size="15" type="text"/> <input value="Buscar" name="btnG" type="submit"/>
<font size="-1">
<input value="URL DEL BLOG"
name="domains" type="hidden"/><br/><input value=""
name="sitesearch" type="radio"/> la Web<input checked value="URL DEL BLOG" name="sitesearch" type="radio"/> NOMBRE DEL BLOG<br/>
</font>
</table></form>

Reemplazamos las letras en color rojo por nuestros datos y listo, quedará algo así, luego el usuario elejira si no encuentra algo en tu blog, que lo busque en google.

4.-Búsqueda personalizada de google, además de blogger esta es otra exquisitez de las que nos podemos dar un gusto con solo tener una cuenta gmail, el servicio para ser entregado solo requiere de que tengas una cuenta gmail y blog por supuesto para realizar la búsqueda.

Para agregarlo a tu blog debes ingresar en Motor de búsqueda personalizada, click en Crear Motor de Búsqueda y escribir los datos solicitados. Luego te llegará un correo a tu gmail con el aviso y de donde sacar el código para que luego lo agregues yendo a (desde tu Escritorio) Diseño y luego añadir gadget luego seleccionar HTML/JavaScript y listo, si tienes complicaciones por no querer poner nombre al gadget escribe esto en el titulo  

Si quieres una información mas extensa sobre de como incorporar una busqueda personalizada has click aquí

Menú Despegable JQuery y CSS

2010-06-29T15:03:00.001-04:00

Sexy Drop Down Menu es un menú horizontal despegable hecho en CSS en el que podrás poner todos tus link`s y sin problema, recuerda que al ponerlo en tu blog este podría modificarse según el tipo de color usado en tu blog.

Para ver como quedara ve al blog de pruebas.

Advertencia: El menú podría tener problemas con el script que permite arrastrar imágenes del blog, si no lo tienes prosigue, si lo tienes y lo quieres conservar no sigas o se desactivará.

Para ponerlo debes ir desde tu Escritorio (blogger) a Diseño, luego Edición HTML y antes de ]]></b:skin> pega lo siguiente:

/* Sexy Drop Down Menu
----------------------------------------------- */
ul.topnav {
list-style: none;
padding: 0 20px;
margin: 0;
float: left;
width: 100%;
background: #222;
font-size: 12px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXynPdAJwuMXByoQcA_1WPDERyasQfkcYf55JFB2kxuUwNjaiN8lsyuBSgIADfM5b0ORby60lE2RcI7rJp97DthmfiygOQuSOLF7jhFQv89EJiMT_iilpLu5kezolkC41MIBhgeS24oRQ/s320/topnav_bg.gif) repeat-x;
}
ul.topnav li {
float: left;
margin: 0;
padding: 0 15px 0 0;
position: relative;
}
ul.topnav li a {
padding: 10px 5px;
color: #fff;
display: block;
text-decoration: none;
float: left;
}
ul.topnav li a:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit49lDDgIJhIBCzVFh6kIHEsBT9K1hZZx7UMFtploICr2r4kTkp1oq8Qaj7MC_i3B7puknAtAHuT996MFW5RjfrKZYXT6PdUrdVcGZCRIERjmMvWfdoDuihnpTng5r3Fg107LigK-t8zo/s320/topnav_hover.gif) no-repeat center top;
}
ul.topnav li span {
width: 17px;
height: 35px;
float: left;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP-I3gsq1PeBbnKsl-dMhyTyEuwLYmDXTR9jWrri0z9ENsO3nzj1DyhksBlSNbEkwxOcKG0vLAX4UReFpBLHaOhatnpK_H2uhHWaveMKmd2_wZS66Um-pUViuHQk-q-BXMrq1NYr78hyphenhyphen0/s320/subnav_btn.gif) no-repeat center top;
}
ul.topnav li span.subhover {
background-position: center bottom;
cursor: pointer;
}
ul.topnav li ul.subnav {
list-style: none;
position: absolute;
left: 0; top: 35px;
background: #333;
margin: 0; padding: 0;
display: none;
float: left;
width: 170px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
border: 1px solid #111;
}
ul.topnav li ul.subnav li {
margin: 0; padding: 0;
border-top: 1px solid #252525;
border-bottom: 1px solid #444;
clear: both;
width: 170px;
}
html ul.topnav li ul.subnav li a {
float: left;
width: 145px;
background: #333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqSP5qA4CgmH1S7icZG1CauFI9wM-KAKJ6MNWOZGJ5YK3lfUSKr7yiYxomDHG8A4h1XL81FkT2by76gOUpUxFuzXb5WnsmyHqL0bFmab_AYTRjZ2kmWBuX7fEwp4qjRkjB6D18q7XR7CA/s320/dropdown_linkbg.gif) no-repeat 10px center;
padding-left: 20px;
}
html ul.topnav li ul.subnav li a:hover {
background: #222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqSP5qA4CgmH1S7icZG1CauFI9wM-KAKJ6MNWOZGJ5YK3lfUSKr7yiYxomDHG8A4h1XL81FkT2by76gOUpUxFuzXb5WnsmyHqL0bFmab_AYTRjZ2kmWBuX7fEwp4qjRkjB6D18q7XR7CA/s320/dropdown_linkbg.gif) no-repeat 10px center;
}

2. Luego buscamos </head> y arriba de ella pegamos el script:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$("ul.subnav").parent().append("<span/>"); //Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav
$("ul.topnav li span").click(function() { //When trigger is clicked...
//Following events are applied to the subnav itself (moving subnav up and down)
$(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click
$(this).parent().hover(function() {
}, function(){
$(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
});
//Following events are applied to the trigger (Hover events for the trigger)
}).hover(function() {
$(this).addClass("subhover"); //On hover over, add class "subhover"
}, function(){ //On Hover Out
$(this).removeClass("subhover"); //On hover out, remove class "subhover"
});
});
</script>

3. Luego vamos a “Elementos de pagina” y en añadir gadget HTML/Javascript ponemos esto:

<ul class="topnav">
<li><a href="URL del enlace">Pestaña1</a></li>
<li>
<a href="URL del enlace">Pestaña2</a>
<ul class="subnav">
<li><a href="URL del enlace">Sub Pestaña</a></li>
<li><a href="URL del enlace">Sub Pestaña</a></li>
<li><a href="URL del enlace">Sub Pestaña</a></li>
</ul>
</li>
<li>
<a href="URL del enlace">Pestaña 3</a>
<ul class="subnav">
<li><a href="URL del enlace">Sub Pestaña</a></li>
<li><a href="URL del enlace">Sub Pestaña</a></li>
<li><a href="URL del enlace">Sub Pestaña</a></li>
<li><a href="URL del enlace">Sub Pestaña</a></li>
</ul>
</li>
<li><a href="URL del enlace">Pestaña 4</a></li>
<li><a href="URL del enlace">Pestaña 5</a></li></ul>

Ponlo debajo de la cabecera

Cambia las URL de los enlaces donde se indica.
Si quisieras agregar más pestañas sólo agrega antes de </ul> esta línea:

<li><a href="URL del enlace">Otra Pestaña</a></li>

Si quieres agregar sub pestañas entonces agrega esto:

<li>
<a href="URL del enlace">Otra Pestaña</a>
<ul class="subnav">
<li><a href="URL del enlace">Sub Pestaña</a></li>
<li><a href="URL del enlace">Sub Pestaña</a></li>
<li><a href="URL del enlace">Sub Pestaña</a></li>
</ul>
</li>

Y listo

Poner imagen de Fondo en HTML

2010-06-28T14:19:00.001-04:00

Desde que nos creamos un blog se nos ofrece la forma de personalizarlo ya sea cambiando el color de la fuente, tipo de fuente (letras), colores del blog, cambio de plantillas, entre otras, sobre todo ahora que se ha agregado un diseñador de plantillas que las opciones de extienden mucho más, pero el servicio de diseñador de plantillas solo entrega un limite de imágenes para poner de fondo en el blog, para eso haremos lo siguiente, que nosotros pongamos nuestras propias imágenes de fondo (esto no afectará en nada a lo que es la plantilla así que se podrá seguir editándola posteriormente).

Primero enseñé como poner una imagen desde el diseñador de plantillas y ahora de la forma HTML.

Primero debes desde tu blog ver si tienes una imagen de fondo y no un color

En caso de que tu blog ya tenga una imagen de fondo leeremos lo siguiente, en caso de NO tener una imagen de fondo preinstalada en tu blog omitiremos este paso.

Vamos a tu blog, y desde allí hacemos un click derecho por el borde de este u exterior donde creas que este la imagen de fondo y seleccionamos Ver imagen de fondo.

Se abrirá la imagen en nuestro navegador y copiamos su url para luego cambiarla por otro (la url corresponde a la dirección de la imagen por ejemplo http://www.guardatusimagenes.com/estaserámmiimagen.jpg)

Ahora desde tu escritorio hacer click en Diseño y luego en Edición HTML

Y en el caso de tener una imagen de fondo ya puesta para cambiarla tan solo buscamos la dirección de la imagen de fondo que queremos cambiar y en su lugar ponemos la url de la imagen que quieres (si no sabes de donde subir una imagen para su url puedes subirla en una entrada del blog y luego haces click en vista HTML y copias el primer link u ocupar otro servicio como photobucket o imageShack)

Si no tienes una imagen previamente instalada en tu blog hacemos lo siguiente:

Una ves en Edición HTML buscamos esto:

body {
background:$bgcolor;
...
}

o también puede ser que solo te salga esto:

background:

con solo buscar esto es posible que salga

Ahora agregaremos lo siguiente lo que esta en color rojo.

body {
background:$bgcolor url(http://Aquí va la url de la imagen que quieras) fixed no-repeat top left;
...
}

Agregamos la url de imagen que queremos donde señala y listo

Si la imagen de fondo no se visializa de forma correcta podemos modificar lo siguiente

- El valor no-repeat, la imagen no se repite. Además podemos cambiarlo por otros valores como repeat-x, repetirá la imagen horizontalmente mientras que el valor repeat-y, repetirá la imagen verticalmente y si se especifica repeat, la imagen se repetirá horizontal y verticalmente.
- El valor fixed, la imagen se desplazará con el contenido o será fija.
- El valor top left, la posición de la imagen.

Nota: Para que la imagen se vaya deslizando cada vez que bajas en el blog debes recordar que la imagen debe ser grande, tipo wallpaper, el cual tienen un ancho de 1024 pixeles (px) y un alto de 685 px aproximadamente.

Pone imagen de fondo en tu blog en diseñador de plantillas

2010-06-28T13:41:00.001-04:00

Es una forma muy fácil de personalizar nuestros blog a nuestro gusto.

Desde nuestro escritorio en draft (click aquí para ir a blogger in draft) vamos a Diseño y luego hacemos click en Diseñador de plantillas.

Ahora se abrirá el diseñador de plantillas de blogger y hacemos click en la pestaña Fondo

Y seleccionamos la imagen de fondo que queramos pero si no te gustan las imágenes puedes editar la imagen de fondo que tu quieras también esta la forma HTML click aquí para ir a la descripción

Publicar entradas de blogger a facebook

2010-06-27T19:59:00.002-04:00

Enviar las entradas para crear un grupo para vuestro blog.
Las redes sociales hacen un esfuerzo por cada vez unificar más y más los servicios de internet consigo mismos ya que dan una gran utilidad para dar más visitas y que la gente los siga tanto en sus cuentas gmail, msn, facebook, twitter y muchas más.
Ahora necesitaras una cuenta facebook, si no tienes has click aquí. llenas los datos que piden y listo.
Ahora nos crearemos una página para nuestro blog en facebook, para comenzar con esto debemos entrar en alguna página previamente hecha en facebook como por ejemplo esta:
http://www.facebook.com/home.php?#!/pages/Abismo-Paranormal/126000090761298?ref=sgm
Ahora que estamos ahí debemos bajar al ultimo de su barra lateral izquierda:

Hacemos click donde dice: “Crear una página para mi empresa”
Nos aparecerá esta página:

Ahora seleccionamos 1.-Crea una página para 2.- Marca producto u organización y seleccionamos página web
Escribe el nombre de tu página
Luego marca:Soy el representante oficial de esta persona, negocio, grupo de música o producto y tengo permiso para crear esta página.Consulta las condiciones de Facebook.
Y por último clickeamos esto:
Y con eso tenemos lista nuestra página de facebook
Ahora vamos por enlazar vuestro blog a la página creada en el facebook, para eso hacemos click en esto Editar página:

Bajamos hasta donde dice “Notas” y seleccionamos editar.

Se abrirá otra pagina y selecionamos donde dice Importar Blog.

Se abrirá otra página introduces el link de tu blog doce dice “Introduce un sitio web…” y marcas la casilla que dice “Al escribir una URL…” es recomendable escribir tu feed de tu blog ahí como por ejemplo http://feeds.feedburner.com/cirujanoblogger

seleccionas “Iniciar Importación” y LISTO!

Descripción del Blog al azar

2010-06-27T14:34:00.002-04:00

¿Cual es la forma en la que describes tu blog? y ¿Qué pasaría si tienes más de una idea?, la respuesta a estas interrogantes es bastante fácil, pon todas las descripciones que quieras pero siempre se mostrara solo una a azar. Para observa como podría quedar entra en el blog de pruebas http://cirujanoblog.blogspot.com/ y puedes presionar F5 para que se actualice el blog y aparezca otra frase cambiante.
Para lograrlo sigue los siguientes pocos pasos:
1.- Entra en Diseño, luego Edición HTML, marca la casilla de Expandir Artilugios y busca la siguiente línea:

<data:description/>

2.- Ahora bórrala y sustitúyela por esto:

<script language='Javascript'>
//<![CDATA[

//]]>
</script>

3.- Ahora solo te resta cambiar la frase del condigo anterior y listo!:

text[number++] = "Descripción #1"

SE CAMBIA SOLO “Descripción #1”
Por ejemplo:

text[number++] = "CIRUJANO BLOGGER, UNA CIRUJIA PARA TU BLOG"

Publica en Twitter lo que publicas en el Blog

2010-06-26T16:35:00.002-04:00

Desde la aparición de Twitter en marzo de 2006 ha ganado gran aceptación por el publico en general debido a la simpleza de publicar, se seguir, de contactar y de enviar pequeños mensajes llamados tweets o gorjeos (de ave en general).
Ahora se abre paso a la nueva forma de unir esta Red Social con Blogger a través de tu feed de tu blog. Cada vez que publiques algo aparecerá en tu Twitter para tener seguidores de ambas partes.
Para hacer la “conexión” de tu blog a Twitter debemos hacer los siguientes pasos:
1.- Registrarte en Twitter click aquí si no lo tienes y si ya lo tienes omite este paso
2.- Entra a tu cuenta de Feedburner. Parecerá esto:

Debes seleccionar tu blog haciendo click sobre él.
3.- Ahora selecciona la pestaña Publicize.

4.- Seleccionamos Socialize que esta en el menú lateral izquierdo.

5.- Presiona el botón que dice Add a Twitter account, se abrirá una ventana solicitando tu permiso para enlazar las cuentas, haz click en Permitir:

6.- Continuas en tu Feed y ahora te toca seleccionar que cosas quieres que se vean el la publicación, esta en ingles pero no presente dificultades y si lo hace CLICK AQUI.
Si tienes más blogs no es necesario repetir todos los pasos, sólo dirígete a Socialize y presiona Activar, tus datos y preferencias estarán guardados.
Title Only : Solo el titulo del post o publicación.
Title and Body: Titulo y parte de la publicación.
Body Only: Solo el contenido del post en resumen.
Hash tags: si quieres Etiquetas.
7.- Por ultimo solo vas hasta bajo y clickeas el boton ACTIVAR y LISTO!

Mostrar solo Fragmento de la Publicación

2010-06-26T14:46:00.002-04:00

Resumen del post con leer más e imagen en miniatura.
El tener muchas cosas en el blog dificulta a la gente poder leer el contenido que realmente se quiere leer, para eso esta “leer más…” que da lugar a la libre elección de selección del contenido que se quiere leer o visualizar en nuestra pantalla.
Las opciones son varias para poner este script en nuestros blog`s como por ejemplo la que presta blogger en la que se pueden cortar las publicaciones para que posteriormente se tenga que elegir el “leer más” para continuar leyendo, pero lamentablemente esta opción no es automática ya que se debe ingresar de una forma “manual” por decirlo así. Para esos que quieren ahorrar espacio y dar una elección al lector de seleccionar que se quiere leer esta esta modificación para la plantilla de vuestro blog.

Ahora lo primero que haremos será:
1.- Ir a Diseño

2.- Luego click en Edición HTML

3.- Marcar la casilla “Expandir Artilugios”

4.- Copias y buscas esto : <data:post.body/>

5.- Ahora borramos <data:post.body/> y lo reemplazamos por esto:
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'>Leer más...</a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>

6.- Buscamos esto: </head> y antes de esto copiamos y pegamos esto y LISTO!:
<script type='text/javascript'>
summary_noimg = 400;
summary_img = 300;
img_thumb_height = 125;
img_thumb_width = 125;
</script>
<script type='text/javascript'>
//<![CDATA[
/******************************************
(C)2008 by Anhvo
visit http://en.vietwebguide.com to get more cool hacks
********************************************/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Si queremos modificar los colores lo corregimos a nuestro gusto en relación con lo siguiente:
summary_noimg = 400; Número de Letras o caracteres cuando la entrada NO tiene una imagen
summary_img = 300; Número de Letras o caracteres cuando la entrada tiene una imagen
img_thumb_height = 125; Alto de la imagen en miniatura
img_thumb_width = 125; Ancho de la imagen en miniatura

También puedes cambiar el texto de “Leer más…” sustituyéndolo por la frase que queramos o por la imagen que queramos modificando lo siguiente:
<img src="URL de la imagen" />

Mostrar fragmento de la publicación excepto Primera la entrada

2010-06-26T14:29:00.002-04:00

Puede prestar ayuda al momento de querer ahorrar espacio pero sin que se deje de leer el ultimo “post” o publicación publicada y que el resto se vea de forma automática en “leer más…”

Para realizar el siguiente acto debemos hacer los siguientes pasos:

1.- Ir a Diseño

2.- Luego click en Edición HTML

3.- Expandemos la Plantilla de artilugios

4.- Buscamos esto: <data:post.body/>

5.- Y lo sustituimos por esto:

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div style='text-align:justify;' expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:right;'><a expr:href='data:post.url'>Leer más...</a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>

6.- Ahora buscamos el </head>

7.- Y antes de eso pegamos este script:

Hasta ahí se ha ejecutado el “Leer más…” en todas las entradas ahora vamos por el siguiente gran paso.

8.- Buscamos esto: <b:include data='post' name='post'/>

9.- Y lo reemplazamos por esto y LISTO!:

<b:if cond='data:post.isFirstPost'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<div class='post hentry'>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
<div class='post-body entry-content'>
<p><data:post.body/></p>
</div>
<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>
<span class='reaction-buttons'>
<b:if cond='data:top.showReactions'>
<table border='0' cellpadding='0' cellspacing='0' width='100%'><tr>
<td class='reactions-label-cell' nowrap='nowrap' valign='top' width='1%'>
<span class='reactions-label'>
<data:top.reactionsLabel/></span> </td>
<td><iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/></td>
</tr></table>
</b:if>
</span>
<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</b:if>
</span>
<span class='post-icons'>

<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<img alt='' class='icon-action' height='13' src='http://img1.blogblog.com/img/icon18_email.gif' width='18'/>
</a>
</span>
</b:if>
</span>
</div>
<div class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span>
</div>
</div>
</div>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

Contadores de Visitas

2010-06-25T17:44:00.001-04:00

Los mejores contadores de visitas para tu blog.

El servicio que entregan estos contadores es darte a conocer a ti y o al publico en general cuantas visitas llevas por día o durante todo el tiempo que lleva tu blog abierto a la gente.

Uno de los mejores y más potentes contadores que contienen analizador con gráficos de cuanto han subido o bajado tus visitas, con estadísticas, multitud de temas para tu contador de visitas o si lo quieres esconder que se invisible también es una opción, contador de click`s, tienes la posibilidad de agregar todos tus blog´s que quieras y mucho más. La pagina es http://www.histats.com/ . Lamentablemente es no recomendable para usuarios sin mucha experiencia ya que contiene demasiado accesorios y se podrían perder en tanta cosa. Otra cosa que complica es que aún la página no esta totalmente traducida al español.

Otro contador algo simple pero no por eso es malo es 99 Counters. Aunque contiene un nombre no muy interesante o atrayente sus contadores son bastantes lucidos por el lado físico de sus temas ya que son muy lindos. Contiene estadísticas de visitas por horas, días, mes, año, índice de visitas en el día y en total que se muestran en el gadget del blog y es visible para todo el publico. Existen muchos temas pero aparte tu puedes diseñar unos propios sin mayor conocimientos debido a la simplicidad. El contador hace una muestra de que países están conectados en el momento y todas las visitas que has tenido a lo largo de la vida de tu blog solo si es que pusiste el contador apenas se inicio. Para ingresar debes registrarte de forma bastante fácil, solo has click aquí.

Uno más nuevo, de google y gratuito es Google Analytics, el analizador de google que llega para aquellos que solo quieren saber cuantas visitas tienen, sin lucirse como en el caso de los anteriores que daban informes a todos publico de las visitas que tiene el blog, este a diferencia no tiene ese elemento. Para conocer Google Analytics click aquí.

Para agregar los gadget de buscadores primero debes registrarte, elegir un tema y luego ir a tu Escritorio de blogger, luego Diseño, y por ultimo Añadir gadget.*

Abrir todos los link en pestañas aparte

2010-06-24T20:01:00.001-04:00

Es de gran necesidad cuando estas en un blog de descargas (como por ejemplo de descarga de juegos) y cuando haces click en descargar este se va a otra página y se sale de esta impidiendo poder descargar más cosas. Aunque ya existe al hacer click con el derecho del mouse y poner que se abra en otra pestaña es mucho mejor tenerlo de forma automatica en el blog.
Para para lograr que tus link`s se abran en ventanas aparte solo debes hacer lo siguiente:
1.- Vas a diseño.

2.- Luego click en Edición HTML

3.- Buscas <head>

4.- Y por ultimo pegas esto después de <head>y LISTO!:
<base target='_blank'/>

Suscribete a Cirujano Blogger

2010-06-24T19:18:00.001-04:00

Puedes suscribirte a través de tu correo electronico, solo escribe tu email en el siguiente espacio y click en aceptar

Subscribe in a reader

↑ Grab this Headline Animator

Menú Despegable

2010-06-24T19:01:00.001-04:00

Si no te gusta ocupar mucho espacio en tus link`s esto te vendrá como anillo al dedo.

Se creará algo así:

Para poder crear un menú despegable te resultará muy sencillo ya que no hace falta una gran mente para hacerlo. Para realizarlo debes hacer lo siguiente:

1.- Vas a diseño

2.- Y luego clickeas en “Añadir un gadget”.

3.- Sleccionas HTML/Javascript

y copia y pega esto:

<select onchange="if(options[selectedIndex].value){location = options[selectedIndex].value}" class="desplegable" name="menu" size="1">
<option selected/>Seleccionar...
<option value=""/>- - - - - - - - - -
<option value="URL de la página"/>Título del menú
<option value="URL de la página"/>Título del menú
<option value="URL de la página"/>Título del menú
<option value="URL de la página"/>Título del menú
<option value="URL de la página"/>Título del menú
</select>

4.- Solo cambias donde dice "URL de la página" y lo reemplazas por cualquier Link

Si quieres añadirle color entonces entra a Diseño > Edición de HTML y antes de ]]></b:skin> pega lo siguiente:

.desplegable {
background-color: #ccc;
color: #000;
}

En background-color puedes elegir el color de fondo del menú, y en color puedes escoger el color de las letras.

Arrastrar las imágenes del blog

2010-06-24T18:41:00.001-04:00

Este es una forma de hacer que tu blog sea mucho más interactivo ya que no en muchas páginas se ve algo parecido a lo que haremos.
ADVERTENCIA: una vez que uses este script prodia desactivarse tu gadget de "Seguidores" impidiendo la vizualicación de este.
Fíjate en este ejemplo que podrás mover dentro del navegador y se quedará donde lo dejes:

Puedes ver como te quedará el efecto haciendo click aquí para ver el blog de pruebas

Para lograr debes hacer lo siguiente:
1.- Hacemos click en Diseño

2.- Luego hacemos click en Edición HTML

3.- Buscamos esto: </head>

Para buscarlo sin problemas presionamos la tecla Atl y al mismo tiempo la tecla F y escribes </head> en el espacio*
4.- Ahora pegamos esto antes del </head>

<script src='http://www.google.com/jsapi'/>
<script>
google.load("prototype","1.6.0.3");
google.load("scriptaculous", "1.8.2");
</script>

5.- Guarda los cambios.
6.- Ahora cuando quieras agregar el efecto a una imagen copias y pegas este codigo:
<img id="drag1" style="cursor:move; border:0px;" src="URL de la imagen"/>
<script type="text/javascript">new Draggable('drag1');</script>

7.- Donde dice “URL de la imagen” copias el link de tu imagen (por ejemplo http://www.guardadordeimagenes.com/tuimagen.jpg) y LISTO!

Recuerda que cada vez que vayas a hacerlo deberás cambiar la ID de la imagen, por ejemplo drag2, drag3, etc. de modo que ninguna imagen tenga el mismo ID.

Guardar gradget sin título

2010-06-24T18:13:00.001-04:00

Hasta hace algún tiempo blogger ha creado un impidimento para guardar los gadget al no tener título:

Sale un error lo que no deja que se guarde el gadget pero para esto haremos lo siguiente
1.- En el título del gadget escribiremos esto:  
Quedará así:
2.- Clickeas Guardar y Listo!

Ocultar Barra Boogler

2010-06-19T12:53:00.001-04:00

Ocultar Barra Boogler (navbar)

A muchas personas le puede molestar su barra de Blogger que al momento de creance un blog este aparece de forma predemitada en la parte superior del blog, ahora explicare como ocultarla.
1.- Ir a Diseño:

2.- Ir a Edición HTML

3.- El codigo que vamos a pegar para esconder la barra puede estar por muchas partes distintas pero en este caso lo pondremos antes de ]]></b:skin> (para encontrar el ]]></b:skin> debes copiar esto y luego presionar las teclas Alt y al mismo momento la tecla F
y pegar el codigo para buscarlo en la plantilla, una vez que lo tengamos ubicado procedemos al siguiente paso)

4.- Luego copias y pegas este código antes de ]]></b:skin>:

#navbar-iframe {
height:0px;
visibility:hidden;
display:none;
}

Luego solo haces click en Guardar Plantilla y LISTO!