El boton de google+1 no se ve en mi web

Hola hace ya unos días que veo que esta fallando el el famoso botón +1 de google pero este fallo mayormente lo vamos a ver con Mozilla FireFox el cual deja de verse y nos preguntamos pero porque si he puesto los códigos bien que me brinda google+1 esta entrada la he hecho para explicarles la solución porque en muchos sitio brindan códigos y códigos pero ninguno me funciono por lo que yo mismo he implementado después de una horas rompiendo la cabeza ya me funciono de maravilla el cual trabaja en todos los navegadores ahora  les voy a mostrar dos tipos de códigos para dos diferentes botones para el que usa el siguiente botón:



Vamos a  añadir este código  en la cabecera  entre <head> y </head> o adelante de la etiqueta </body>
Para eso vamos a diseño > Edición de HTML > y marcamos > Expandir plantillas de artilugios.
Para una búsqueda mas rápida Ctrl+F y colocamos lo que queremos buscar.

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
  {lang: 'es'}
</script>

 Una ves colocado el código guardamos y nos dirigimos a diseño y  añadimos un gadget en donde queremos que aparezca el botón ejemplo la sidebar ect.. buscamos HTML/Javascript  y pegamos el siguiente código:

<g:plusone href="Aquí va la url de su sitio"size='Estándar'></g:plusone>
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'></script>

 Si quieren cambiar el tamaño aquí les dejo los diferente tamaños que que hay

     


El que quiera  tener el siguiente  botón  nuevo que les muestro en la imagen 





Para poner este botón va a ser el mismo código que les dije que colocaran  en la cabecera o el body una ves puesto vamos a seguir los mismos pasos del anterior y vamos a colocar el siguiente código:

<div class='goog-inline-block dummy-container'><g:plusone source='blogger' href='Aquí va la url de su sitio' size='medium' width='300' annotation='inline'/></g:plusone></div>
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'></script>

Una ves puesto guardamos y es todo lo van a tener funcionando  en todos los navegadores .





Widget Join conversation twitter

He visto en muchos lugares que preguntan hacerca del Join conversation de twitter de como modificarlo y ponerlo a que pase todo lo que ocurre en tu perfil de twitter automaticamente y no con la Scroll-Box bueno despues de haber visto tantas preguntas y no con las respuesta adecuadas decidi hacer una entrada hacerca de lo mencionado,hoy les voy a mostrar como ponerlo a que pasen automaticamente las entradas de twitter a que velocidad cuantas entradas a pasar y cuantas a mostrar colores a cambiar y mucho mas....




                                                         Widget de Perfil
                                  Muestra tus tweets más recientes en cualquier página.

                                                     Widget de Búsqueda
Widget de Búsqueda Despliega resultados de búsqueda en tiempo real! Ideal para eventos en vivo, transmisiones, conferencias, programas de TV o incluso sólo para mantenerte al día con las noticias.

                                                     Widget de Favoritos
Widget de Favoritos Revela tus tweets favoritos! También en tiempo real, este widget arrastrará los tweets que has marcado como favoritos. Es genial para administrar.

                                                        Widget para listas
Widget para listas Pon en una lista a tus twitteros favoritos! Y muéstralos en un widget. Genial también para moderaciones.


En el codigo a continuacion voy a marcar todo lo que pueden modificar , si decean cambiar los colores pueden encontrar  los codigos de colores  aquí
y recuerden poner el nombre de usuario de la cuenta de twitter donde dice tubetrucos cambienlo por el de ustedes.donde dice 40 son los twitter que quieren que aparesca 8000 es la velocidad con la que quieren que vayan pasando menos es mas rapido mas es mas lento tambien pueden modificar el ancho 250 y la altura 300 si quieren mostrar en todas las entradas el avatar de su perfil donde dice avatars: false, cambienlo por true

Aquí les muesto un ejemplo como quedaria:








Para colocarlo en la sidebar o barra lateral es tan simple como ir a diseño >>> Añadir un gadget >>>HTML/Javascript Añadir >>> y una ves abierta la ventana pegamos el siguiente codigo:

<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 40,
  interval: 8000,
  width: 250,
  height: 300,
  theme: {
    shell: {
      background: '#333333',
      color: '#ffffff'
    },
    tweets: {
      background: '#000000',
      color: '#ffffff',
      links: '#a9a9ba'
    }
  },
  features: {
    scrollbar: false,
    loop: false,
    live: true,
    hashtags: true,
    timestamp: false,
    avatars: false,
    toptweets: false,
  

    behavior: 'default'
  }
}).render().setUser('tubetrucos').start();
</script>

Una ves pegado el codigo le damos a guardar y es todo ya van a tener su  Join conversation twitter en su sitio





Añadir botones de redes sociales con opacidad

No es la primera ves que preguntan  sobre la forma de añadir los iconos de redes sociales en la sidebar con opacidad  y no es nada dificil todo lo contrario, de forma muy sencilla los añadiremos paso a paso.
Lo primero que vamos a hacer es crear una clase a los botones y añadirle los estilos a esa clase, para eso  
debemos de ir a diseño > Edición HTML >
Activar la opción de “Expandir plantillas de artilugios.
Para una busqueda mas rapída tecleamos Ctrl+F  y ponemos lo que queremos buscar.
en este caso vamos a buscar lo siguiente: ]]></b:skin> y una ves encontrado añadimos el siguiente codigo justo antes :



Subcribete a nuestro RSS FeedSiguenos en TwitterSiguenos en FacebookSiguenos en youtubeSiguenos en google+







#redes-sociales {
text-align: center;
padding:14px;
border: 0px dashed #C0C0C0;
}

a.redes-sociales img {
filter:alpha(opacity=40);
opacity: 0.4;
}
a.redes-sociales:hover img {
filter:alpha(opacity=100);
opacity: 1.0;
}



Una ves puesto este codigo en su lugar nos vamos a dirigir a colocarlo en la sidebar para eso vamos a diseño y a añadir un gadget en donde ustedes quieran mostrar las redes sociales una ves abierta la ventanita para añadir un gadget buscamos HTML/Javascript y pegamos el siguiente codigo:



<div id="redes-sociales">
<center><a class="redes-sociales" href="http://feeds.feedburner.com/tu-nombre-feedburner" target="_blank"><img style="width: 45px; height: 45px;" alt="Subcribete a nuestro RSS Feed" src="http://dl.dropbox.com/u/25944020/para%20tube%20rss.png" title="Subcribete a nuestro RSS Feed" /></a><a class="redes-sociales" href="http://twitter.com/tu-nombre-twitter" target="_blank"><img style="width: 45px; height: 45px;" alt="Siguenos en Twitter" src="http://dl.dropbox.com/u/25944020/para%20tube%20twitter.png" title="Siguenos en Twitter" /></a><a class="redes-sociales" href="http://facebook.com/tu-perfil-facebook" target="_blank"><img style="width: 45px; height: 45px;" alt="Siguenos en Facebook" src="http://dl.dropbox.com/u/25944020/para%20tube%20facebook.png" title="Siguenos en Facebook" /></a><a class="redes-sociales" href="http://www.youtube.com/user/tu-nombre?feature=mhsn" target="_blank"><img style="width: 45px; height: 45px;" alt="Siguenos en youtube" src="http://dl.dropbox.com/u/25944020/para%20tube%20youtube.png" title="Siguenos en youtube" /></a><a class="redes-sociales" href="Url de la pagina de google+" target="_blank"><img style="width: 45px; height: 45px;" alt="Siguenos en google+" src="http://dl.dropbox.com/u/25944020/google%2B1%20tube%29.gif" title="Siguenos en google+" /></a>

</center></div>


Una ves puesto el codigo le damos a guardar y es todo ya tiene sus botones de redes sociales con opacidad.

Lo que esta en rojo debes poner los datos correspondiente .
Lo que esta en naranja lo pueden modificar a sus gustos.
Lo que esta en amarillo es la url de la imagen.





Poner facebook,twitter,y google+1 en todas las entradas

En la entrada anterior les explique como poner el botón de facebook me gusta en en todas las entradas lo cual era fácil de implementarlo,bueno hoy les voy a explicar como colocar los tres botones juntos uno arladito del otro facebook,twitter,y google+1 es muy fácil de implementar también son los mismos pasos a seguir.



Lo primero que vamos a hacer es ir a diseño > Edición de HTML > y marcamos > Expandir plantillas de artilugios.
Para una búsqueda mas rápida Ctrl+F y colocamos lo que queremos buscar.

El que lo quiera poner después del titulo antes de la entrada buscamos lo siguiente:

<div class='post-header-line-1'/>

El que lo quiera poner al final de cada entrada buscamos el siguiente codigo:

<div class='post-footer-line post-footer-line-1'>

Una ves encontrado colocamos el siguiente código justo después del código que buscamos.




<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='clear:both;'/>
<div style='float: left;'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;send=false&amp;layout=button_count&amp;show_faces=false&amp;width=110&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:110px; height:21px;'/>
</div>

<div style='float:left;'>
<a class='twitter-share-button' data-count='horizontal' data-via='tubetrucos' href='https://twitter.com/share'>Tweet</a><script src='//platform.twitter.com/widgets.js' type='text/javascript'/>
</div>

<div style='float: left;'>
<g:plusone size='medium'/>
</div></b:if>



Parámetros a tomar en consideración para facebook

  • layout – Estilo del botón. Valores: standard o button_count.box_count
  • show_faces – Muestra o no el avatar de quienes del gusta la anotación. Valores: true o false.
  • width – Ancho del iframe.
  • action – Texto del botón. Valores like o recommend.
  • font – Fuente a utilizar.
  • colorscheme – Esquema de colores. Valores: light, dark o evil.
Si quieres que aparezca arlado del botón el botoncito enviar solo tienen que activarlo donde dice send=false
cambian el false por true

En el código de twitter donde dice tubetrucos lo cambian por su nombre de usuario .
En el código de google +1 no hay que hacer nada lo único que si no tienen el botón +1 en algún lugar de tu sitio entonces tienen que añadir el siguiente codigo en la cabecera o delante de la etiqueta body.



<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
  {lang: 'es-419'}
</script>



Bueno una ves puesto el código donde lo queremos y visto las alternativas  lo que nos queda es guardar los cambios y es todo.





Botón de Facebook "Me gusta" en todas las entradas

Bueno me decidí a crear esta entrada porque he visto en muchos lugares que siguen preguntando como poner el botón me gusta de facebook en cada entrada,lo cual hay muchos citios donde explican como pero bueno aquí les voy a explicar como implementarlo es muy sencillo.


Lo primero que vamos a hacer es ir a diseño > Edición de HTML > y marcamos > Expandir plantillas de artilugios.
Para una búsqueda mas rápida Ctrl+F y colocamos lo que queremos buscar.

El que lo quiera poner después del titulo antes de la entrada buscamos lo siguiente:

                                                  <div class='post-header-line-1'/>
El que lo quiera poner al final de cada entrada buscamos el siguiente codigo:

                                           <div class='post-footer-line post-footer-line-1'> 
Una ves encontrado colocamos el siguiente codigo justo despues del codigo que buscamos.


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;send=false&amp;layout=button_count&amp;show_faces=false&amp;width=110&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:110px; height:21px;'/>
</b:if>


Puedes cambiar el aspecto del botón gracias a layout. Los  valores son: standard, button_count o box_count.
Parámetros a tomar en consideración:
  • layout – Estilo del botón. Valores: standard o button_count.box_count
  • show_faces – Muestra o no el avatar de quienes del gusta la anotación. Valores: true o false.
  • width – Ancho del iframe.
  • action – Texto del botón. Valores like o recommend.
  • font – Fuente a utilizar.
  • colorscheme – Esquema de colores. Valores: light, dark o evil.

Si quieres que aparesca arlado del boton el botoncito enviar solo tienen que activarlo donde dice send=false
cambian el false por true

Bueno una ves puesto el codigo donde lo queremos y visto las arternativas en el codigo me gusta lo que nos queda es guardar los cambios y es todo





Como eliminar la numeración en las etiquetas de Blogger

En blogger por defecto la lista de etiquetas se muestra la cantidad de entradas que han sido clasificadas en cada una de ellas,algunas personas no les gusta ya sea por estética o espacio,he visto en algunos sitios que han preguntado Como eliminar la numeración en las etiquetas de Blogger y he ahí que decidí investigar y es muy sencillo y rápido solamente debemos de eliminar un pequeño código.
Aquí les muestro un ejemplo de como es y como quedaría.



Para la eliminacion de ese pequeño codígo debemos de ir a diseño > Edición HTML >
Activar la opción de “Expandir plantillas de artilugios.
Para una busqueda mas rapída tecleamos Ctrl+F  y ponemos lo que queremos buscar.
en este caso vamos a buscar lo siguiente:

(<data:i.post-count/>) o busquen este (<data:label.count/>)

Una ves encontrado lo eliminamos guardamos los cambios y  es todo ahora vayan a verificar que todo este bien y sin numeros en las etiquetas.








Opacidad en una imagen al pasar el cursor

Con el código de hoy vamos a obtener el efecto de opacidad en una imagen al pasar el cursor y viseversa también, por lo tanto vamos a obtener dos códigos,este efecto es muy fácil de implementar copien el código que les brindo y lo puedes colocar en la plantilla o en Diseño > añadir gadget > HTML/Javascript y pegamos es todo.
Aquí les muestro el ejemplo como quedaría:















En el codigo donde nos dice "URL de la imagen" ponen entre las comillas la url de la imagen que quieren mostrar





<img style="opacity: 0.2; filter:alpha(opacity=20);" src="URL de la imagen" onmouseover="this.style.opacity=1;this.filters.alpha.opacity='100';" onmouseout="this.style.opacity=0.2;this.filters.alpha.opacity='20';"/><br /> <br />





<br /><img src="URL de la imagen" onmouseout="this.style.opacity=1;this.filters.alpha.opacity='100';" onmouseover="this.style.opacity=0.2;this.filters.alpha.opacity='20';"/>









Efecto magico de estrellitas al mover el mouse

Con el código que les brindo hoy vamos a obtener un efecto muy bonito el cual se trata de cuando muevas el mouse,ratón este va a ir dejando unas estrellitas de varios colores este efecto es como una varita mágica jajaja ,pero este no hace magia ok solo hace ese efecto maravilloso de la forma que se los voy a brindar no tienen que hacer nada simplemente copien el código que les voy a brindar a continuación y lo van a pegar justo después de el  <body>

Aquí pueden ver el ejemplo >>>> Ver <<<<

Bueno para implementarlo,hacemos los siguientes pasos :
1.Vamos a diseño > Edición de HTML y click a Expandir plantillas de artilugios
2.Para una busqueda mas rapida CTRL+F y buscamos   <body> y justo despues de éste, pegamos el siguiente codigo:















Envia tus post a twitter y facebook por feedburner

En un post,entrada anteriormente les explique de una forma de enviar las entradas automaticamente hacia twitter y facebook mediante twitterfeed.com la cual es una vía muy buena pero casualmente mirando en mi cuenta de feedburner vi que tienen la misma opcion igual sin necesidad de hacer nada simplemente vas a tu cuenta de feedburner y le das click a Socialize escoges a donde quieres twitter o facebook o otras redes, lo configuran a sus gustos y mas abajo les muestra como va a mostrarse le dan click a activate y es todo sus entradas directo a sus redes sociales.
Aquí les muestro un ejemplo:










Tus post automaticamente a twitter y facebook

Anteriormente todo aquel cada ves que creaba una entrada,post tenia que ir a twitter y escribir manualmente acerca de su entrada bueno ya no es necesario hoy en día hay muchos sitios que lo hacen por ti automatícamente sin tu tener que mover un dedo estos sitios se basan en la url de tu feed bueno como dije hay varios pero yo personalmente uso twitterfeed.com yo creo una entrada y en unos minutos ya esta en twitter  y facebook este sitio es gratis y se actualiza cada media hora para usarlo hay que registrarse poniendo su dirección de email y creando un password,contraseña una ves hecho eso están dentro ahí van a indicar la url de tu feed y luego indicas a donde quieres enviar tus entradas a twitter o facebook o las dos escribes el nombre de usuario ,una ves terminado con esos datos es todo espera de 12 a 24 horas y cada ves que creas una entrada esta aparecerá en tu twitter en minutos.





http://twitterfeed.com/




Paquete de 593 emoticones de calidad

Hoy les voy a compartir un paquete de emoticones,caritas que encontre hace unos dias para mi son espertaculares tienen muy buena calidad y nos sirven para msn para los comentarios de cualquier sitio web hay mucha variedad tienen para escoger la que deceen disfruteno y espero que les guste





descargar paquete de emoticones








Poner emoticones en los comentarios de Blogger

Como poner los emoticones en tu blog,ponerlo es muy sencillo,simplemente hay que hacer dos busquedas y poner un scripts y una tabla html con los emoticones y el simbolo a utilizar en tu plantilla sencillo verdad? en el codigo que les brindo ya esta todo no tienen que hacer ningun cambio excepto si no les gusta los emoticones pueden cambiarlos por los suyos las emoticones yo las tengo alojadas en dropbox si ustedes quieren las pueden cambiar las pueden alojar en donde ustedes quieran ,la tabla html ya esta hecha no tienen que hacerla. Estas son los emoticones que utilice:

:-) :-S :-P :-[ :-D }:-] X* ;-D :-| :-} :*) :-( ;-) XD

Primero debes ir a tu plantilla: Diseño > Edicion HTML y Expandir plantillas de artilugios una vez expandida hay que buscar    </head> Para buscar codigos en la plantilla mas rapido es presionar Ctrl+F esto despliega una pequeña ventanita donde introduces lo que quieres buscar bueno una ves encontrado el  </head> van a colocar el script siguiente justo antes .
<!-- (Script Emoticones) -->
<script type='text/javascript'>
//<![CDATA[
document.getElementsByClassName = function(clsName){
    var retVal = new Array();
    var elements = document.getElementsByTagName("*");
    for(var i = 0;i < elements.length;i++){
        if(elements[i].className.indexOf(" ") >= 0){
            var classes = elements[i].className.split(" ");
            for(var j = 0;j < classes.length;j++){
                if(classes[j] == clsName)
                    retVal.push(elements[i]);
            }
        }
        else if(elements[i].className == clsName)
            retVal.push(elements[i]);
    }
    return retVal;
}

function addSmiley(){
  var postBodyClass = (postBodyClass) ? postBodyClass : 'post-body';
  var d = document.getElementsByClassName(postBodyClass);
  for(var i=0;i<d.length;i++){
        d[i].innerHTML = d[i].innerHTML.replace(/\:\-\)/gi, ' <img src="http://dl.dropbox.com/u/25944020/tubetrucos1.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\:\-S/gi, ' <img src="http://dl.dropbox.com/u/25944020/tubetrucos2.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\:\-P/gi, ' <img src="http://dl.dropbox.com/u/25944020/tubetrucos3.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\:\-\[/gi, ' <img src="http://dl.dropbox.com/u/25944020/tubetrucos4.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\:\-D/gi, ' <img src="http://dl.dropbox.com/u/25944020/tubetrucos5.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\}\:\-\]/gi, ' <img src="http://dl.dropbox.com/u/25944020/tubetrucos6.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/x\*/gi, ' <img src="http://dl.dropbox.com/u/25944020/tubetrucos7.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\;\-D/gi, ' <img src="http://dl.dropbox.com/u/25944020/tubetrucos8.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\:\-\|/gi, ' <img src="http://dl.dropbox.com/u/25944020/tubetrucos16.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\:\-\}/gi, ' <img src="http://dl.dropbox.com/u/25944020/tubetrucos10.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\:\*\)/gi, ' <img src="http://dl.dropbox.com/u/25944020/tubetrucos11.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
      d[i].innerHTML = d[i].innerHTML.replace(/\:\-\(/gi, ' <img src="http://dl.dropbox.com/u/25944020/tubetrucos12.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
      d[i].innerHTML = d[i].innerHTML.replace(/\;\-\)/gi, ' <img src="http://dl.dropbox.com/u/25944020/tubetrucos13.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
      d[i].innerHTML = d[i].innerHTML.replace(/XD/gi, ' <img src="http://dl.dropbox.com/u/25944020/tubetrucos14.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
    }

var d = document.getElementsByClassName('comment-body');
  for(var i=0;i<d.length;i++){
 d[i].innerHTML = d[i].innerHTML.replace(/\:\-\)/gi, ' <img src="http://dl.dropbox.com/u/25944020/tubetrucos1.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\:\-S/gi, ' <img src="http://dl.dropbox.com/u/25944020/tubetrucos2.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\:\-P/gi, ' <img src="http://dl.dropbox.com/u/25944020/tubetrucos3.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\:\-\[/gi, ' <img src="http://dl.dropbox.com/u/25944020/tubetrucos4.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\:\-D/gi, ' <img src="http://dl.dropbox.com/u/25944020/tubetrucos5.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\}\:\-\]/gi, ' <img src="http://dl.dropbox.com/u/25944020/tubetrucos6.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/x\*/gi, ' <img src="http://dl.dropbox.com/u/25944020/tubetrucos7.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\;\-D/gi, ' <img src="http://dl.dropbox.com/u/25944020/tubetrucos8.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\:\-\|/gi, ' <img src="http://dl.dropbox.com/u/25944020/tubetrucos16.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\:\-\}/gi, ' <img src="http://dl.dropbox.com/u/25944020/tubetrucos10.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\:\*\)/gi, ' <img src="http://dl.dropbox.com/u/25944020/tubetrucos11.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
      d[i].innerHTML = d[i].innerHTML.replace(/\:\-\(/gi, ' <img src="http://dl.dropbox.com/u/25944020/tubetrucos12.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
      d[i].innerHTML = d[i].innerHTML.replace(/\;\-\)/gi, ' <img src="http://dl.dropbox.com/u/25944020/tubetrucos13.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
      d[i].innerHTML = d[i].innerHTML.replace(/XD/gi, ' <img src="http://dl.dropbox.com/u/25944020/tubetrucos14.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
    }
}

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}

addLoadEvent(addSmiley);
//]]>
</script>
<!-- (Fin Script Emoticones) -->
Una ves puesto este codigo van a buscar este otro:

<p><data:blogCommentMessage/></p>
Ya encontrado justo debajo van a colocar el siguiente codigo :
<!-- ini tabla emoticones --><table border='0' cellpadding='0' cellspacing='1'><tr> <td align='center' width='26'><img height='21' src='http://dl.dropbox.com/u/25944020/tubetrucos1.gif' width='20'/></td> <td align='center' width='26'><img height='21' src='http://dl.dropbox.com/u/25944020/tubetrucos2.gif' width='20'/></td> <td align='center' width='26'><img height='21' src='http://dl.dropbox.com/u/25944020/tubetrucos3.gif' width='20'/></td><td align='center' width='26'><img height='21' src='http://dl.dropbox.com/u/25944020/tubetrucos4.gif' width='20'/></td> <td align='center' width='26'><img height='21' src='http://dl.dropbox.com/u/25944020/tubetrucos5.gif' width='20'/></td> <td align='center' width='26'><img height='21' src='http://dl.dropbox.com/u/25944020/tubetrucos6.gif' width='20'/></td><td align='center' width='26'><img height='21' src='http://dl.dropbox.com/u/25944020/tubetrucos7.gif' width='20'/></td> <td align='center' width='26'><img height='21' src='http://dl.dropbox.com/u/25944020/tubetrucos8.gif' width='20'/></td> <td align='center' width='26'><img height='21' src='http://dl.dropbox.com/u/25944020/tubetrucos16.gif' width='20'/></td><td align='center' width='26'><img height='21' src='http://dl.dropbox.com/u/25944020/tubetrucos10.gif' width='20'/></td> <td align='center' width='26'><img height='21' src='http://dl.dropbox.com/u/25944020/tubetrucos11.gif' width='20'/></td> <td align='center' width='26'><img height='21' src='http://dl.dropbox.com/u/25944020/tubetrucos12.gif' width='20'/></td> <td align='center' width='26'><img height='21' src='http://dl.dropbox.com/u/25944020/tubetrucos13.gif' width='20'/></td> <td align='center' width='26'><img height='21' src='http://dl.dropbox.com/u/25944020/tubetrucos14.gif' width='20'/></td></tr> <tr><td align='center' width='26'>:-)</td> <td align='center' width='26'>:-S</td> <td align='center' width='26'>:-P</td> <td align='center' width='26'>:-[</td> <td align='center' width='26'>:-D</td> <td align='center' width='26'>}:-]</td><td align='center' width='26'>X*</td> <td align='center' width='26'>;-D</td><td align='center' width='26'>:-|</td> <td align='center' width='26'>:-}</td><td align='center' width='26'>:*)</td> <td align='center' width='26'>:-(</td><td align='center' width='26'>;-)</td><td align='center' width='26'>XD</td> </tr></table><!-- fin tabla emoticones -->
Por ultímo guardamos y nos vamos a chequear que todo este bien .






Efecto de esquina doblada en la web con flash

Hoy les traigo un efecto muy bonito para quien le guste claro,se trata de el borde de una esquina de sus sitio web se va a encontrar como doblada (page peel) y mostrando una imagen pequeña la cual debe ser de 100px x 100px o un letrero o lo que se les ocurra una ves pasen el mouse (raton) por encima de esa pequeña imagen se desplegará y va a mostrar una imagen oculta que va a ser un enlace hacia donde ustedes quieran esa imagen debe de ser de 500px x 500px una ves quiten el mouse de encima de ella se vuelve a poner pequeña,Hasta hace no mucho, todos los scripts para generar el efecto Page Peel eran de pago, sin embargo, poco a poco han ido apareciendo alternativas gratuitas basadas en javascript, flash, jquery, etc. A continuación les muestro como implementarlos en sus página web o blog.



En todo el codigo lo unico que  deben modificar es lo siguiente .


jaaspeel.ad_url = escape('http://feeds.feedburner.com/blogspot/dfaMG'); Url de enlace a donde  quieras que te dirija ar  dar click

jaaspeel.small_path = ' http://img5.xooimage.com/files/7/9/7/small-1e8e2b.swf';  flash pequeño
jaaspeel.small_image = escape(' http://dl.dropbox.com/u/25944020/rss3d.gif');  imagen pequeña
jaaspeel.small_width = '100';
jaaspeel.small_height = '100';
jaaspeel.small_params = 'ico=' + jaaspeel.small_image;

jaaspeel.big_path = ' http://img26.xooimage.com/files/5/7/a/large-1016114.swf'; flash grande
jaaspeel.big_image = escape(' http://dl.dropbox.com/u/25944020/corner.gif'); Imagen grande
jaaspeel.big_width = '500';
jaaspeel.big_height = '500';


Lo que termina en swf  es el efecto flash lo pueden dejar asi si quieren .
Los gif  son las imagenes que deben de cambiar


Una ves visto los cambios que debemos hacer vamos a proceder  a copiar el codigo hagan los cambios debidos y lo guardan con  el nombre que quieran siempre terminando en .js ejemplo :  esquina.js  o borde.js


Nota  el notepad sirve para guardarlo en el ,así que copien el codígo y peguenlo en el notepad modifican los cambios correspondientes y lo guardan con el nombre que quieran terminando en .js

Pueden copiarlo o descargarlo como quieran descargalo aquí




var jaaspeel = new Object(); jaaspeel.ad_url = escape('http://feeds.feedburner.com/blogspot/dfaMG'); jaaspeel.small_path = ' http://img5.xooimage.com/files/7/9/7/small-1e8e2b.swf'; jaaspeel.small_image = escape(' http://dl.dropbox.com/u/25944020/rss3d.gif');jaaspeel.small_width = '100'; jaaspeel.small_height = '100'; jaaspeel.small_params = 'ico=' + jaaspeel.small_image; jaaspeel.big_path = ' http://img26.xooimage.com/files/5/7/a/large-1016114.swf'; jaaspeel.big_image = escape(' http://dl.dropbox.com/u/25944020/corner.gif'); jaaspeel.big_width = '500'; jaaspeel.big_height = '500';  jaaspeel.big_params = 'big=' + jaaspeel.big_image + '&ad_url=' + jaaspeel.ad_url; function sizeup987(){ document.getElementById('jcornerBig').style.top = '0px'; document.getElementById('jcornerSmall').style.top = '-1000px'; } function sizedown987(){ document.getElementById("jcornerSmall").style.top = "0px"; document.getElementById("jcornerBig").style.top = "-1000px";}jaaspeel.putObjects = function () { // <jcornerSmall> document.write('<div id="jcornerSmall" style="position:absolute;width:'+ jaaspeel.small_width +'px;height:'+ jaaspeel.small_height +'px;z-index:9999;right:0px;top:0px;">'); // object document.write('<img src="http://img2.blogblog.com/img/video_object.png" style="background-color: #b2b2b2; height: '+jaaspeel.small_height+'px; width: '+jaaspeel.small_width+'px; " class="BLOGGER-object-element tr_noresize tr_placeholder" id="jcornerSmallObject" data-original-id="jcornerSmallObject" /></div>');document.write('</script>'); // </jcornerSmall> // <jcornerBig> document.write('<div id="jcornerBig" style="position:absolute;width:'+ jaaspeel.big_width +'px;height:'+ jaaspeel.big_height +'px;z-index:9999;right:0px;top:0px;">'); // object document.write('<img src="http://img2.blogblog.com/img/video_object.png" style="background-color: #b2b2b2; height: '+ jaaspeel.big_height +'px; width: '+ jaaspeel.big_width +'px; " class="BLOGGER-object-element tr_noresize tr_placeholder" id="jcornerBigObject" data-original-id="jcornerBigObject" /></div>'); // </jcornerBig> setTimeout('document.getElementById("jcornerBig").style.top = "-1000px";',1000); } jaaspeel.putObjects();


Bueno una ves hecho todo nada mas falta subir el archivo .js a un servidor pueden usar xooimage subes el archivo desde tu pc y una ves cargado nos brinda una url al igual que dropbox la cual vamos a copiar y poner en el siguiente codigo:


<script src='AQUI VA LA URL DEL ARCHIVO.js' type='text/javascript'/>


Y lo vamos a poner despues de la etiqueta <body>
guardamos y es todo disfrutenlo








Gadget de estadisticas del sitio

bueno este gadget nos va a mostrar las estadísticas del sitio cuantos días tiene el blog cuantas entradas,post,cuantos seguidores tienen en twitter,cuantos suscriptores tienen a los feeds y cuantos comentarios tienen en el blog ya por ahí estaba andando este gadget pero en ciudad blogger le añadieron  los días online del blog bueno yo le boy a añadír lo de los seguidores de twitter  y los suscriptores a los feeds y hare algunos cambios mas y ya quedaría mas completo cuando lo pongan en su sitio les quedaría como el que yo tengo puesto en mi sitio a la izquierda.



Para implementarlo solo entra a Diseño > Elementos de la página > Añadir un gadget > HTML/Javascript y ahí pegar todo este codigo:







<script language='javascript' type='text/javascript'>
function snfbc(json){
document.write(parseInt(json.value.items[0].feed.entry.circulation));
}
function xfeedburner(uri){
if(uri){
document.write('<sc'+'ript src="http://pipes.yahoo.com/pipes/pipe.run?_id=e61a81bcdb1660ebf8bc1a7c130f1f7b&_render=json&uri='+uri+'&_callback=snfbc" type="text/javascript"></s'+'cript>');
} else{
return false;
}
}

function sntwitter(json){
document.write(parseInt(json.followers_count));
}
function xtwitter(user){
if(user){
document.write('<scr'+'ipt src="http://twitter.com/users/show/'+user+'.json?callback=sntwitter" type="text/javascript"></scr'+'ipt>');
} else{
return false;
}
}

</script>






<div class='widget-content'>
<center><div style="float: left;"><img style="width: 59px; height:75px;" src="http://dl.dropbox.com/u/25944020/tubegrafica4.gif"/></div>
<div style=" float: left; text-align: left; font-size:12px;">
<script> function DiasOnline(Dia, Mes, Year, Texto) { Meses = new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"); Hoy = new Date(); Inicio = Date.parse(Meses[Mes - 1] + " " + Dia + " " + Year); Resultado = Math.round((Hoy.getTime() - Inicio) / 86400000); document.write(Resultado + " " + Texto); } DiasOnline(11, 8, 2011, "" );</script> Días online<br/>
<script style="text/javascript">
function showpostcount(json) {
document.write(parseInt(json.feed.openSearch$totalResults.$t,10));
}</script>

<script type="text/javascript"> xtwitter("tubetrucos") </script> Segui en twitter<br />
<script type="text/javascript"> xfeedburner("blogspot/dfaMG") </script> suscript a feed<br />

<script style="text/javascript">
function showpostcount(json) {
document.write(parseInt(json.feed.openSearch$totalResults.$t,10));
}</script>
<script src="/feeds/comments/default?alt=json-in-script&callback=showpostcount"></script> Comentarios<br /><!--[if IE]><![endif]-->
<script src="http://fasetube.blogspot.com/feeds/posts/default?alt=json-in-script&callback=showpostcount"></script> Entradas<br /><!--[if IE]><br /><![endif]-->

</div></center></div>





Cambien lo que esta en rojo por lo que ustedes quieran que muestre.
Lo que esta en naranja es la url de la imagen .
Lo que esta en azul debes de poner la fecha en que hicistes tu blog.
Lo que esta en verde deben poner el user id de twitter
Lo que esta en amarillo es la url de los feeds lo que esta al final
por ejemplo la mia es esta : http://feeds.feedburner.com/blogspot/dfaMG

Aquí les dejo unas imagenes por si quieren usarlas.









Mas de 20 páginas independientes en blogger

Anteriormente meses atrás si queríamos tener páginas independientes en nuestro blog de Blogger, como las que tienen en Wordpress, había que hacer algunos cambios en nuestra plantilla, lo que a veces resultaba engorroso, ya que entre plantillas hay diferencias en el código que hacían que los códigos que encontrábamos en algunos sitios no siempre se adaptaban bien a nuestra plantilla.afortunadamente después de un tiempo blogger implementó la opción de crear paginas independientes.La diferencia de una entrada común era que no aparecía en la página de inicio como las entradas normales, tampoco tendría ni fecha ni etiquetas, y no aparecería en los feeds del blog.También tendría una url más corta que los posts, ya que seria del tipo: http://TU-BLOG.blogspot.com/p/pagina.html.
Blogger primero nos brindo la opción de 10 paginas independientes pero con el tiempo ya no nos bastaba con 10 entonces había que recurrir a algunos trucos para obtener mas.Pero por fin ya no mas trucos por ahora ya que blogger recientemente añadió 10 mas ahora tenemos para crear hasta un máximo de 20 páginas independientes que bien se nota estamos mejorando cada día mas.
Para crearlas o administrarlas bastará con acceder a la sección "Creación de entradas", y allí a "Editar páginas", donde podremos crear nuevas páginas o editar las que ya hayamos creado.
Si quieres mostrar las paginas independientes en la pagina principal en la barra lateral hay un gadget, titulado precisamente "Páginas", que podemos agregar para mostrar todas las páginas independientes en un menú.









Poner un mapa en tu sitio (sitemap)

Los mapas en los sitios web(sitemaps)son importantes ya que han dado prueba de su utilidad. Los administradores de los sitios lo utilizan como herramientas que permiten orientarse rápidamente en los archivos, es una herramienta de muy buena utilidad ya que puedes encontrar lo que buscas mas rápido,muchas empresas lo usan para mostrar los servicios que brindan ya que con este código les muestra todo. también Los mapa en los sitios (sitemaps) informan a Google acerca de todas tus entradas de tu sitio web que no podrían detectar de otra forma. Los "sitemaps", son listas que incluyen las entradas,páginas que integran los sitios web. La creación y el envío de un sitemap permite a Google conocer todas las páginas
de un sitio, incluyendo las URL que los procesos de rastreo habituales de Google podrían no detectar.

Como poner un mapa en tu sitio es muy facil acontinuacion les boy a bridar el codigo que deben poner para
obtener el resultado.Para ponerlo en tu blog crea una página estática o una entrada normal, luego en el editor de entradas en la parte superior derecha pincha en Edición de HTML y pega el siguiente código:



<script style="text/javascript"
src="http://dl.dropbox.com/u/25944020/tubetrucossitemap.js"></script>
<script src="http://LA-URL-DE-TU-SITIO/feeds/posts/default?max-results=10000&alt=json-in-
script&callback=loadtoc"></script>



Ejemplo: en mi caso quedaria así

<script src="http://tubetrucos.com/feeds/posts/defaul
t?max-results=10000&alt=json-in-script&callback=loadtoc"></script>








data:newerPageTitle data:olderPageTitle data:homeMsg