Tutoriales Blogger

Este truco está muy chulo y al instalarlo en el blog nos da la estadistica de cuantos números de post tenemos y de cuantos comentarios.
<script style="text/javascript">

function numberOfPosts(json) {
document.write('Total Posts: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}

function numberOfComments(json) {
document.write('Total Comments: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}

</script>

<ul><li><script src="http://TUBLOG/feeds/posts/default?alt=json-in-script&callback=numberOfPosts"></script></li>

<li><script src="http://TUBLOG/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script></li></ul>



Cambiaremos donde dice TUBLOG en color rojo por la direccion de nuestro blog o la direccion con la que hemos creado el feed,si no sabeis como crearlo podeis verlo Aqui

guardamos el gadgets y listo.

Podeis ver un ejemplo Aqui


Visto en:assessmyblog

Para instalar esta barra informativa o barra de enlace a otro sitio necesitas instalar estos códigos en tu plantilla:

Diseño,edición de html y vamos a buscar :

]]><b:skin>

y justo encima ponemos este código:

#mta_bar {
background:#003366;
border-top: 3px solid #6699ff;
margin: 0;
padding: 7px 0;
z-index: 100;
bottom:0px;
right:0px;
width: 100%;
overflow: auto;
position: fixed;
}
* html #mta_bar{
/*IE6 hack*/
position: absolute;
width: expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px" : body.clientWidth+"px");
}
#mta_bar .left { float: left; text-align: center; font-family: Arial; font-size: 13px; font-weight: bold; font-style: normal; color: #0000FF; width:92%;}
#mta_bar .right {font-family: Arial, Helvetica, sans-serif; float: right; text-align: center; font-weight: normal; font-size: 10px;letter-spacing: 0; width: 30px; white-space: nowrap;}
#mta_bar .right a {font-size: 10px; color: #0000FF; text-decoration: underline;}
#mta_bar .right a:hover {font-size: 10px; color: #0000FF; text-decoration: none;}
#left_bar a {background: url('http://lh4.ggpht.com/_pt7i0nbIOCY/SRtNzbvDqPI/AAAAAAAAAXk/KxbvrpJ1DE4/ico-rss-trans_thumb%5B1%5D.png?imgmax=800') no-repeat; text-decoration: none; color: #fff; padding:5px 0px 5px 30px;}
#left_bar a:hover { text-decoration: underline; color: #fff; }

**He puesto en rojo lo que puedes modificar(fondo y color).

Ahora buscamos </head>  Y Justo encima pegamos este otro código:

<script type='text/javascript'>
//<![CDATA[
var mta_arr = new Array();
var mta_clear = new Array();
function mtaFloat(mta) {
mta_arr[mta_arr.length] = this;
var mtapointer = eval(mta_arr.length-1);
this.pagetop = 0;
this.cmode = (document.compatMode && document.compatMode!="BackCompat") ? document.documentElement : document.body;
this.mtasrc = document.all? document.all[mta] : document.getElementById(mta);
this.mtasrc.height = this.mtasrc.offsetHeight;
this.mtaheight = this.cmode.clientHeight;
this.mtaoffset = mtaGetOffsetY(mta_arr[mtapointer]);
var mtabar = 'mta_clear['+mtapointer+'] = setInterval("mtaFloatInit(mta_arr['+mtapointer+'])",1);';
mtabar = mtabar;
eval(mtabar);
}
function mtaGetOffsetY(mta) {
var mtaTotOffset = parseInt(mta.mtasrc.offsetTop);
var parentOffset = mta.mtasrc.offsetParent;
while ( parentOffset != null ) {
mtaTotOffset += parentOffset.offsetTop;
parentOffset = parentOffset.offsetParent;
}
return mtaTotOffset;
}
function mtaFloatInit(mta) {
mta.pagetop = mta.cmode.scrollTop;
mta.mtasrc.style.top = mta.pagetop - mta.mtaoffset + "px";
}
function closeTopAds() {
document.getElementById("mta_bar").style.visibility = "hidden";
}
//]]>

</script>

Para terminar instalamos este código justo encima de </body>

<div id='mta_bar'>
<div id='left_bar'><span class='left'><a href='URLDELENLACE' target='_blank'>FRASEPARAVER</a></span></div>
<span class='right' onmouseout='self.status=&apos;&apos;' onmouseover='self.status=&apos;DIRECCIONDETUBLOG&apos;;return true;'> <img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='http://lh5.ggpht.com/_pt7i0nbIOCY/SRGg-N2bQ4I/AAAAAAAAAVE/pG-pTLXsMtc/close_thumb%5B1%5D.png?imgmax=800' style='cursor:hand;cursor:pointer;'/></span></div>

He puesto en rojo lo que debes cambiar:

url del enlace: tendras que insertar ahi el enlace.
frase para ver: aqui insertaras lo que quieres que se lea.
direccion de tu blog: la pondremos de esta manera: por ejemplo :
elisabeth-probandolasplantillas.blogspot.com

Puedes ver como queda pulsando Aqui


Visto en:  anshuldudeja

Si estas cansado de ver el mismo gadget de perfil en tu blog,puedes hacer uno diferente como este:

<p align="center"><img src="http://img252.imageshack.us/img252/377/iconoperfil.png"/><br/>
<a href="URLDETUPERFIL"><img border="0" onmouseover="this.src='http://img517.imageshack.us/img517/4833/perfilblanco.jpg';" onmouseout="this.src='http://img39.imageshack.us/img39/1086/perfilazul.jpg';" src="http://img39.imageshack.us/img39/1086/perfilazul.jpg"/></a><br/>
<a href="mailto:CORREOELECTRONICO"><img border="0"
onmouseover="this.src='http://img27.imageshack.us/img27/4151/contactoblanco.jpg';" onmouseout="this.src='http://img509.imageshack.us/img509/7829/contaacazul.jpg';" src="http://img509.imageshack.us/img509/7829/contaacazul.jpg"/></a><br/>
<a href="URLDETUFEED"><img border="0" onmouseover="this.src='http://img509.imageshack.us/img509/7852/feedblanco.jpg';" onmouseout="this.src='http://img252.imageshack.us/img252/7717/feedazul.jpg';" src="http://img252.imageshack.us/img252/7717/feedazul.jpg"/></a><br/></p>

He puesto en color rojo todo aquello que debemos cambiar:
http://img252.imageshack.us/img252/377/iconoperfil.png esa es la imagen del muñeco que veis,la podeis cambiar por vuestra imagen de perfil o dejar esta si os gusta.
URLDETUPERFIL pondreis vuestra url de vuestro perfil.
CORREOELECTRONICO aqui debereis poner vuestro correo electrónico tipo xxxxxxx@hotmail.com por ejemplo
URLDETUFEED este es para insertar la url de vuestro feed por ejemplo: http://feeds.feedburner.com/xxxx.

le dais a guardar y listo.

Desde esta página: embedit



se puede subir al blog toda clase de documentos:

• Documentos: Word (DOC/DOCX), Excel (XLS/XLSX), PowerPoint (PPT/PPTX), WPD, ODT, ODP, ODS, PDF
• Imagenes: GIF, JPEG, PNG, TIFF, BMP, PSD
• Vectores gráficos: API, EPS, PS
• Textos: TXT, RTF, CSV
• Codigos: HTML, SQL, JS
• Web: Paginas y web y otras url.
  

Puedes subir hasta unos 20 MB.

Entramos a la pagina y pulsamos sobre Select Files:


Seleccionamos el documento que queremos subir y le damos a abrir para que el documento se suba a la página,nos saldrá el documento subido :



Podemos elegir entre embed,thumb y link para ponerlo en el blog, podemos cambiarle las dimensiones q más se adapten a nuestro blog (width y height) si lo queremos privado o no.

Add markup es por si queremos señalar algo en rojo en el documento.

En el lado izquierdo nos sale el código q tenemos q insertar en nuestro post para que se vea el documento.

Si elegimos la opción embed,copiais el codigo y cuando lo inserteis en el post teneis que cerrarlo con sino no irá bien.

ejemplo:

<embed src="Direccióndeltexto" height="300" width="300" type="application/x-shockwave-flash" allowFullScreen="true"></embed>

Si elegimos la opción Thumb copiamos el código tal y como nos lo dan y lo insertamos en el post esto sería como se veria el documento:

Añadiendo el traductor  Google a tu blog puedes hacer que las visitas de tu blog tengan una traducción automática a su idioma de una manera bastante rápida.


Nos vamos a Diseño,Elementos de la Página y seleccionamos Añadir un Gadgets de Html/Javascript y pegamos el siguiente código:

<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'es'
  }, 'google_translate_element');
}
</script><script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>


Aceptamos el gadgets y ya lo tendriamos,es facil de instalar y en mi opinión es necesario en el blog.

En esta ocasión os voy a enseñar, de manera fácil, aplicar textura a una fotografía. Esta técnica es una de mis favoritas ya que la empleo para mis trabajos de “ARTE OSCURO” –inspirado en el movimiento gótico y utilización de sombras-.

En pocos pasos vamos a convertir una fotografía en algo “impactante” o “fascinante”, tras la aplicación de una o varias texturas.

COMENZAMOS:

1. Abrir la fotografía.

2. Pulsar Control + J, para realizar un duplicado (este paso siempre es obligatorio, nunca me cansaré de deciros que trabajéis sobre copia, nunca sobre el original).

3. A continuación abrir la textura que vais a emplear para este trabajo (en mi caso he usado una fotografía de un terreno seco). Si no tenéis acceder a Internet y escoger una de las miles que encontrareis.

4. Pulsar Control + A, para seleccionar toda la imagen de la Textura y Control + C, para copiarla en el portapapeles. Seguidamente podéis cerrarla, al no tener necesidad de volver a usarla.

5. Regresar a la fotografía y pulsar Control + V, para copiar la Textura en una nueva capa y nombrarla. En mi caso le puse el nombre de “Textura”. Cosa lógica.

6. Crear una Máscara en esta Capa –Textura-, haciendo clic en el icono situado en la parte inferior de la Paleta Capas con forma rectangular y un círculo blanco en su centro-.

7. Pulsar la letra B, para activar la herramienta Pincel, bajar la Opacidad a 65%, escoger el color negro y pintar sobre la textura fuera de los límites de la piel, (dentro de la máscara que habéis creado en el paso anterior).

8. Cambiar el Modo de Fusión, de la capa Textura, de Normal a LUZ SUAVE. De esta manera aplicamos la textura a la cara.

9. Pulsar Control + J, para duplicar ésta Capa –Capa Textura con máscara- y cambiar el Modo de Fusión de Normal a SUPERPONER.

10. Situaros sobre la Capa Fondo y pulsar Control + J, para hacer un duplicado de la misma. Seguidamente añadir color a ésta capa yendo a EDICION > AJUSTES > TONO/SATURACION o bien pulsando Control + U. En el cuadro de dialogo Tono/Saturación poner los valores que queráis –el color os lo dejo a vuestra elección-.

11. Cambiar el Modo de Fusión, de esta Capa, a SUPERPONER.

12. Pulsar el icono “Crear nueva capa de Ajustes” ubicado en la parte inferior de la Paleta Capas, con forma circular mitad negro mitad blanco, y escoger BRILLO/CONTRASTE. Situar esta capa por debajo de la capa de Textura y poner estos valores en el cuadro de dialogo Brillo/Contraste: Brillo -20 y +41 en Contraste. Así conseguimos que la imagen sea un poco más oscura.

13. Situaros en la Capa de color –la que creasteis en el paso 10 y que tendrá el nombre de Fondo copia2- y ajustar el Tono/Saturación, reduciendo la Saturación a -70.

14. Tod@s aquellos que quieran descubrir el ojo o los ojos, de la fotografía a la que le habéis aplicado la textura, crear una Máscara de Capa y con un Pincel negro pintar sobre ella –la capa del paso del paso 10- para descubrir el ojo y el iris (en mi caso no he realizado este paso, ya que he querido aplicar la textura de la tierra a toda la cara).

15. Para finalizar activar la herramienta Subexponer, pulsando la letra O, y utilizando esta configuración: Medios Tonos y 40% de Exposición, pintar las zonas del rostro que queráis dar más énfasis, dándole sombras.

Esto es todo. Como siempre os digo, lo que importa es aprender la técnica. El que salga bien o regular el trabajo es cosa de tiempo y eso se consigue practicando, practicando y practicando.. Este ojo con textura es el resultado de aplicarle "varias texturas" con distintos modos de fusión. Lo realicé como actividad en uno de los foros que participo.



Cualquier duda que tengáis me la hacéis llegar mediante un correo a ANRAFERA@terra.es e intentaré resolverla lo más rápido posible.

Os invito a visitar mi blog de Diseño Grafico con PhotoShop: http://www.ramonferrera.blogspot.com (tutoriales fáciles de realizar para el manejo de Phothoshop)

DISEÑO ES IMAGINACION

Saludos.

Si no quereis que aparezca el número al lado de vuestras etiquetas este truco es fácil de hacer....


vamos a Diseño,Edición de html y Expandimos artilugios.

Buscamos esta línea:

(<data:label.count/>)

y la borramos,le damos a Vista Previa y si ha quedado bien Guardamos la plantilla 

Este sería el resultado:






Espero que os guste

Un Spoiler es un truco que podemos utilizar en nuestras entradas del blog para ocultar cierta información y que sólo pueda ser vista al pulsar en el enlace que te da,osea q esa información quedaría oculta y sólo se podría ver al pulsar.

Lo he probado en el post anterior y me ha resultado y quiero compartirlo con todos vosotros.

Ejemplo;

Si quieres ver lo Ultimo en diseño de timbres pulsar Abrir



Vereis que fácil es:

Nos vamos a Diseño,Edicion de html y buscamos


justo encima ponemos este código:


a continuación ponemos esto encima de ]]></b:skin>

.commenthidden {display:none;}
.commentshown {display:inline;}

 y guardamos la plantilla.

Ahora cuando estemos haciendo un post y queramos insertar este truco hariamos esto:


<a aiotitle="click para expandir" href="javascript:togglecomments('NOMBREUNICO')">SPOILER</a>
<div class="commenthidden" id="NOMBREUNICO">CONTENIDOOCULTO</div>
 Os pongo un ejemplo aqui:

Este truco me encanta...vamos a cambiar el link de ir a entradas recientes,entradas antiguas y pagina principal por unas imagenes,en algunos blogs vienen como Newer post + Older post + Home.


Nos vamos a Diseño,Edición de html y expandimos artilugios.

Buscamos lo siguiente:

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>

Yo voy a cambiarlos por estos iconos:


Podeis encontrar más iconos en este enlace:
iconshock

Ahora veamos el código como se pone:
 Pulsa Aqui para ver el Codigo completo


Podeis poner estas mismas imagenes o bien poner las que vosotros elijais...

Asi se quedaría :


Espero que os haya gustado.

Para insertar en tu blog un gadgets para que tus visitantes agreguen tu blog a favoritos vamos a crear un gadgets de html/javascript y vamos a insertar el siguiente código:

<center><script type="text/javascript">
function agregar(){
//IE
if ((navigator.appName=="Microsoft Internet Explorer") && (parseInt(navigator.appVersion)>=4)) {
var url="URL DE TU BLOG"; //
var titulo="Nombre de tu blog"; //
window.external.AddFavorite(url,titulo);
}
//Para Firefox
else {
if(navigator.appName == "Netscape")
//
window.sidebar.addPanel("Nombre de tu blog", "URL DE TU BLOG","");
}
}
</script>
<a href="javascript:agregar()"><img alt="favoritos" src="http://img412.imageshack.us/img412/6612/agregame.jpg"/></a></center>


Deberemos cambiar lo que está en rojo por nuestros datos y la imagen (url en azul) que he puesto la he creado yo,puedes dejarla o bien cambiarla por la imagen que tu quieras.

Guardamos y listo.