Poner imagen de Fondo en HTML

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.

Seguir Leyendo...

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

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

Seguir Leyendo...

Publicar entradas de blogger a facebook

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!

Seguir Leyendo...

Descripción del Blog al azar

¿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[
<!--
function text() {
};
text = new text();
number = 0;
// textArray
text[number++] = "Descripción #1"
text[number++] = "Descripción #2"
text[number++] = "Descripción #3"
text[number++] = "Descripción #4"
increment = Math.floor(Math.random() * number);
document.write(text[increment]);
//-->
//]]>
</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"

Seguir Leyendo...

Mostrar fragmento de la publicación excepto Primera la entrada

 

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 != &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>

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

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.

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

Seguir Leyendo...

Ocultar Barra Boogler

 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!

Seguir Leyendo...