sábado, 26 de junio de 2010

 

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

sshot-5

2.- Luego click en Edición HTML
sshot-2

3.- Expandemos la Plantilla de artilugios

sshot-1

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

sshot-2

5.- Y lo sustituimos por esto:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div style='text-align:justify;' expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</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 == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

 

6.- Ahora buscamos el </head>

sshot-3

7.- Y antes de eso pegamos este script:

<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>

 

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>&#160;</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 != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<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'>
<!-- email post links -->
<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 != &quot;true&quot;'>,</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>

Seguir Leyendo...

viernes, 25 de junio de 2010

Contadores de Visitas

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.

sshot-1

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.

99counters

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í.

 

analytics_logo

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.*

Seguir Leyendo...

jueves, 24 de junio de 2010

Abrir todos los link en pestañas aparte

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.
sshot-5
2.- Luego click en Edición HTML
sshot-2
3.- Buscas <head>
sshot-3
4.- Y por ultimo pegas esto después de <head>y LISTO!:
<base target='_blank'/>
Seguir Leyendo...

Suscribete a Cirujano Blogger

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


Escribe tu correo aquí:

Delivered by FeedBurner



 Subscribe in a reader
Add to Google Reader or Homepage

Add to My AOL






Cirujano Blogger



Seguir Leyendo...

Menú Despegable

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

sshot-5 

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

sshot-1

3.- Sleccionas HTML/Javascript icon_html

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.

Seguir Leyendo...

Arrastrar las imágenes del blog

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
sshot-5
2.- Luego hacemos click en Edición HTML
sshot-2
3.- Buscamos esto: </head>
sshot-3
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>

<!-- Prototype y Scriptaculous-->
<script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;prototype&quot;,&quot;1.6.0.3&quot;);
google.load(&quot;scriptaculous&quot;, &quot;1.8.2&quot;);
</script>
<!-- Prototype y Scriptaculous-->



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.

Seguir Leyendo...

Guardar gradget sin título

Hasta hace algún tiempo blogger ha creado un impidimento para guardar los gadget al no tener título:
sshot-2
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: &nbsp;
Quedará así: sshot-3
2.- Clickeas Guardar y Listo!
gadget añadido cirujano.blogspot.-com
sshot-4
Seguir Leyendo...