Blog

15

Click here to load reader

Transcript of Blog

Page 1: Blog

► Paso 1: En edición HTML marcamos expandir plantillas de artilugios

► Paso 2: Buscamos </head> y antes pegamos este código:

<script src='http://ar.geocities.com/blogdecesar/functiontoggleIt.js' type='text/javascript'/>

Page 2: Blog

►Paso 3: Después buscamos en la plantilla esto:

<b:includable id='post' var='post'><div class='post uncustomized-post-template'<a expr:name='data:post.id'/><b:if cond='data:post.title'><h3 class='post-title'><b:if cond='data:post.url'><a expr:href='data:post.url'><data:post.title/></a><b:else/><data:post.title/></b:if></h3></b:if><div class='post-header-line-1'/><div class='post-body'><p><data:post.body/></p><div style='clear: both;'/> <!-- clear for photos floats --></div>

Page 3: Blog

Búscalo bien que está! En el blog que doy de ejemplo se encuentra abajo.Cuando lo encuentres REEMPLAZARLO por lo que sigue:<b:includable id='post' var='post'><div class='post uncustomized-post-template' expr:id='"post-" + data:post.id'><a expr:name='data:post.id'/><b:if cond='data:post.title'><h3 class='post-title'><b:if cond='data:post.url'><a expr:href='data:post.url'><data:post.title/></a><b:else/><data:post.title/></b:if></h3></b:if><div class='post-header-line-1'/><div class='post-body'><b:if cond='data:blog.pageType == "item"'><p><data:post.body/></p><b:else/><style>#fullpost {display:none;}</style><p><data:post.body/></p><span id='showlink'><p><a href='javascript:void(0);' expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"'>SIGA LEYENDO</a></p></span><span id='hidelink' style='display:none'><p><a href='javascript:void(0);' expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"'>CERRAR NOTA</a></p></span><script type='text/javascript'>checkFull("post-" + "<data:post.id/>");</script></b:if><div style='clear: both;'/> <!-- clear for photos floats --></div>

Page 4: Blog

Donde dice “siga leyendo” y “cerrar nota” puedes poner una imagen.Guardas plantilla y listo.

►Paso 4: Cuando hacemos una entrada usamos esto: <span id="fullpost"> y al final de todo lo cerras con esto </span>Código:

texto<span id="fullpost">texto</span>

Si queremos que este ultimo código nos aparezca cada vez que hagamos una entrada podemos hacerlo. Se pueden configurar las entradas y estos aparecen. Es asi:a) Vas a opciones/formatob) Mira abajo de todo que dice PLANTILLA DE ENTRADA y ahí pegas los códigos del punto "4"guardar valores y listo, cada vez que creamos una entrada ya lo tendrás.

Page 5: Blog

Para poner el traductor de Google con banderas tan solo necesitamos un código, y debemos pegarlo en un gadget HTML/Javascript. Lo bueno de este Traductor con banderas es que se adapta a cualquier espacio. Como el código es largo lo pondremos en las siguientes dos diapositivas.

Page 6: Blog

<style>

.google_translate img {filter:alpha(opacity=100);-moz-opacity: 1.0;opacity: 1.0;border:0;}.google_translate:hover img {filter:alpha(opacity=30);-moz-opacity: 0.30;opacity: 0.30;border:0;}.google_translatextra:hover img {filter:alpha(opacity=0.30);-moz-opacity: 0.30;opacity: 0.30;border:0;}</style>

<div>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" height="24" src="http://4.bp.blogspot.com/_5jbh95HruKA/S1YVBORD9bI/AAAAAAAAACs/XkaLmmin4zg/s200/United+Kingdom(Great+Britain).png" style="cursor: pointer;margin-right:8px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cfr&hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" height="24" src="http://4.bp.blogspot.com/_5jbh95HruKA/S1YVBrDZLrI/AAAAAAAAAC0/Kc6eDMT9LFI/s200/France.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cde&hl=en'); return false;"><img alt="German" border="0" align="absbottom" title="German" height="24" src="http://1.bp.blogspot.com/_5jbh95HruKA/S1YVBzoFF2I/AAAAAAAAAC8/WgvMK3zP1Rk/s200/Germany.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Ces&hl=en'); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" height="24" src="http://3.bp.blogspot.com/_5jbh95HruKA/S1YVCdHp5VI/AAAAAAAAADE/lWHzr5znExU/s200/Spain.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

Page 7: Blog

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cit&hl=en'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" height="24" src="http://4.bp.blogspot.com/_5jbh95HruKA/S1YVCskNubI/AAAAAAAAADM/ChdHC6vYT4s/s200/Italy.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cnl&hl=en'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" height="24" src="http://3.bp.blogspot.com/_5jbh95HruKA/S1YWRkFo9UI/AAAAAAAAADU/4AzKfc6Oyxg/s200/Netherlands.png" style="cursor: pointer;margin-right:8px" width="24"/></a><a class="google_translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cru&hl=en'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" height="24" src="http://4.bp.blogspot.com/_5jbh95HruKA/S1YWR-jg9pI/AAAAAAAAADc/vYZrPOzazHU/s200/Russian+Federation.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cpt&hl=en'); return false;"><img alt="Portuguese" border="0" align="absbottom" title="Portuguese" height="24" src="http://1.bp.blogspot.com/_5jbh95HruKA/S1YWSGHcxOI/AAAAAAAAADk/ElHZBjDCZn8/s200/Brazil.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cja&hl=en'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" height="24" src="http://1.bp.blogspot.com/_5jbh95HruKA/S1YWSR2_wYI/AAAAAAAAADs/GtKdPLKUluE/s200/Japan.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cko&hl=en'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" height="24" src="http://2.bp.blogspot.com/_5jbh95HruKA/S1YWSrlfMyI/AAAAAAAAAD0/_MACsRIW8wg/s200/South+Korea.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Car&hl=en'); return false;"><img alt="Arabic" border="0" align="absbottom" title="Arabic" height="24" src="http://3.bp.blogspot.com/_5jbh95HruKA/S1YWq7SrDkI/AAAAAAAAAD8/ZE8A1isEZrw/s200/Saudi+Arabia.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Czh-CN&hl=en'); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" height="24" src="http://1.bp.blogspot.com/_5jbh95HruKA/S1YWrMQAw9I/AAAAAAAAAEE/r-DEVtWXp50/s200/China.png" style="cursor: pointer;margin-right:8px" width="24"/></a> </div> <div 0px 0pxâ?? style="â??font-size:10px;margin:8px" 3px></div>

<br/><a href="http://www.bloggerarticle.com/"><font size="1px">this widget by www.AllBlogTools.com</font></a>

Page 8: Blog

►Paso 1: Lo primero será crear nuestro propio favicon y para no complicaros demasiado podéis optar por hacer como yo y crearlo online. En Favicon from Pics

(http://www.html-kit.com/favicon/) podréis hacerlo sin ningún problema, pinchando en Examinar subís la imagen que vais a transformar en favicon desde vuestro PC, os saldrá una vista previa, incluso sale un favicon con movimiento. Descargáis el favicon a vuestro PC en formato zip, una vez descomprimido nos dará tres imágenes en distintos formatos, escogemos la que está en formato.ico.

►Paso 2: Subimos la imagen a un servidor de archivos que admita el formato .ico, como por ejemplo SkyDrive.

►Paso 3: Vamos a Plantilla -Edición HTML y buscamos el título del blog, es decir, esta parte del código:

<title><data:blog.pagetitle><title>y justo antes colocamos esto:

<link href='URL DE TU IMAGEN-FAVICON' rel='shortcut icon' type='image/x-icon'/><link href='URL DE TU IMAGEN-FAVICON' rel='icon' type='image/x-icon'/>

Page 9: Blog

SkyDrive es un servicio de alojamiento de archivos que, entre otros tipos de archivos, nos permite alojar script en unos pocos pasos.El uso de este servicio es bastante sencillo, el mayor problema se puede presentar a la hora de localizar exactamente cual es la URL que debamos usar.

[1] Una vez hemos accedido a SkyDrive mediante nuestra id de Windows Live (Hotmail, MSN, etc.) lo primero que vemos es una pantalla con algo como esto:

Page 10: Blog

[2] Pinchamos en la carpeta que vemos en primer lugar y que dice "Publico".Pasaremos entonces a otra pantalla con una serie de enlaces, pinchamos en "Crear carpeta":

Le ponemos un nombre cualquiera a la carpeta y pasamos a una nueva pantalla donde mediante un enlace se nos invita a incluir un archivo:

Pinchamos en ese enlace y agregamos el archivo que vamos a subir mediante "Examinar" desde nuestro PC (pueden subirse hasta cinco al mismo tiempo), pinchamos en "Cargar" y esperamos.

Page 11: Blog

[3] Pinchamos ahora sobre el icono del archivo (ese que parece una hoja de papel con la esquinita doblada) y en la pantalla individual del archivo, vemos el mismo icono pero a mayor tamaño:

Por supuesto no tenemos en cuenta el aviso que saldrá resaltado en amarillo, ya que saldrá por defecto siempre que el archivo subido sea un script. [4] Llego el momento de obtener URL del archivo:

FirefoxLo haremos pinchando sobre el icono grande con el botón derecho del ratón, y en la ventanita que se abre en "Propiedades" copiamos la dirección del enlace que será algo así:

http://w522ka.bay.livefilestore.com/y1pem4zcAZ0A7OliKRG1Dul3RhUEHg12E69eLnuGiOcaW35wOUKj0iL7SrvowrRg52jiC1Ch76dOSs/linkprefs.js?download

Para usarla lo hacemos eliminando la parte final, el ?download que está destacado en color rojo.

IExplorerBastará con pinchar con el botón derecho y "Copiar acceso directo". Para usarla también hemos de eliminar por supuesto, la parte final, el ?download.

Page 12: Blog

Las flechas de “IR ARRIBA” e “IR ABAJO” son muy fáciles de poner, lo explicare en unos pasos:

Paso 1: se trata de colocar un script antes de </head>.Vas a Diseño > HTML > y busca </head>.

Justo antes de </head> pegas este código:

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

Page 13: Blog

Guarda el cambio.

Paso 2: ahora vamos a las flechitas y la posición en tu blog. Debes buscar </body>. Justo antes pega este código:

<a href='#outer-wrapper' onclick='new Effect.ScrollTo(&quot;outer-wrapper&quot;,{offset:-140}); return false'><img border='0' src='URL de la imagen' style='position:fixed; top:0; right:0;' title='Arriba'/></a>

<a href='#footer-wrapper' onclick='new Effect.ScrollTo(&quot;footer-wrapper&quot;,{offset:-140}); return false'><img border='0' src='URL de la imagen' style='position:fixed; bottom:0; right:0;' title='Abajo'/></a>

Remplaza “URL de la imagen” por la imagen que deseamos poner.

En esta pagina hay muchos iconos que poner:

http://icons.mysitemyway.com/free-icons-clipart-tagged/arrow/748/.

Page 14: Blog

Una marquesina que va y vuelve. Puede ir en la sidebar o transportarlo como elemento HTML sobre la columna de entradas o bajo la cabecera del blog.

<marquee style="FONT-WEIGHT: bold; FONT-SIZE: 14pt; WIDTH: 350px; COLOR: #1e2552; FONT-FAMILY: Trebuchet MS; HEIGHT: 14px" behavior="alternate"><div align="center">BienVenidos</marquee></span>

Puedes reemplazar la FUENTE, TAMAÑO DE LA LETRA, ANCHO (width), COLOR Y ALTURA (heigth). En el sector de TEXTO reemplacen por el que deseen.

Page 15: Blog

www.pageplugins.com

www.bunnyherolabs.com

www.webneko.net

www.poqbum.com

www.mixpod.com

Aquí dejo algunas de las paginas que he utilizado para hacer el blog. No están todas, si quieres algo pincha dos veces sobre el y aparecerá en otra ventana la pagina con todas las variables.