domingo, 20 de noviembre de 2011

cambiar el color del blog ò pagina web con un click

cambiar el color del blog con javascript con un click

bueno he mirado en otro blog como cambia el color del blog con un script pero ese script lo tiene muy largo o con fallas yo lo edite borrandole algunos codigos inecesarios

bueno para ver como funciona miren











solo den click en cualquier color y cambia el blog de color.

para instalarlo en su blog hacen lo siguiente:

para instalarlo en un gadget
vamos a

Diseño > Elementos de la página > Añadir gadget > HTML/Javascript, y ahí pega esto:

<center>

<a href="#" onclick="javascript:document.body.style.backgroundColor='#ff0000';"><img src="http://4.bp.blogspot.com/_dsEG33PDaHw/S32TTX4H60I/AAAAAAAAAJU/qYc4BYZclgg/s200/body-rojo.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#fff000';"><img src="http://2.bp.blogspot.com/_dsEG33PDaHw/S32TK7730eI/AAAAAAAAAIs/3v5O2GDrs1s/s200/body-amarillo.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#04B404';"><img src="http://2.bp.blogspot.com/_dsEG33PDaHw/S32TTyfDggI/AAAAAAAAAJk/9x17-Ec7Dnw/s200/body-verde.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#0080FF';"><img src="http://4.bp.blogspot.com/_dsEG33PDaHw/S32TLXeztWI/AAAAAAAAAI0/7hWfrfWsdKU/s200/body-azul.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#CC00FF';"><img src="http://2.bp.blogspot.com/_dsEG33PDaHw/S32TMB5SOXI/AAAAAAAAAJE/PRMfKVBj6fM/s200/body-morado.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#F781BE';"><img src="http://1.bp.blogspot.com/_dsEG33PDaHw/S32TTl7vW9I/AAAAAAAAAJc/GHdXgYyF4Ro/s200/body-rosa.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#000000';"><img src="http://2.bp.blogspot.com/_dsEG33PDaHw/S32TMY3FA9I/AAAAAAAAAJM/6Hx0CAagVOQ/s200/body-negro.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#FFFFFF';"><img src="http://2.bp.blogspot.com/_dsEG33PDaHw/S32TLuZ0f1I/AAAAAAAAAI8/r1AHB4GpoPQ/s200/body-blanco.png" /></a>
</center>


y listo guardan y miran como quedo.

ahora si quieren este codigo en las entradas de los post , que aparesca la opcion de cambiar el color del blog en las entradas de los post con este javascript debemos hacer lo siguiente:

vamos diseño --> edicion html--> y buscamos la siguiente etiqueta:

<data:post.body/>


justo despues de esta etiqueta agregan este codigo:

<center>

<a href="#" onclick="javascript:document.body.style.backgroundColor='#ff0000';"><img src="http://4.bp.blogspot.com/_dsEG33PDaHw/S32TTX4H60I/AAAAAAAAAJU/qYc4BYZclgg/s200/body-rojo.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#fff000';"><img src="http://2.bp.blogspot.com/_dsEG33PDaHw/S32TK7730eI/AAAAAAAAAIs/3v5O2GDrs1s/s200/body-amarillo.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#04B404';"><img src="http://2.bp.blogspot.com/_dsEG33PDaHw/S32TTyfDggI/AAAAAAAAAJk/9x17-Ec7Dnw/s200/body-verde.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#0080FF';"><img src="http://4.bp.blogspot.com/_dsEG33PDaHw/S32TLXeztWI/AAAAAAAAAI0/7hWfrfWsdKU/s200/body-azul.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#CC00FF';"><img src="http://2.bp.blogspot.com/_dsEG33PDaHw/S32TMB5SOXI/AAAAAAAAAJE/PRMfKVBj6fM/s200/body-morado.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#F781BE';"><img src="http://1.bp.blogspot.com/_dsEG33PDaHw/S32TTl7vW9I/AAAAAAAAAJc/GHdXgYyF4Ro/s200/body-rosa.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#000000';"><img src="http://2.bp.blogspot.com/_dsEG33PDaHw/S32TMY3FA9I/AAAAAAAAAJM/6Hx0CAagVOQ/s200/body-negro.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#FFFFFF';"><img src="http://2.bp.blogspot.com/_dsEG33PDaHw/S32TLuZ0f1I/AAAAAAAAAI8/r1AHB4GpoPQ/s200/body-blanco.png" /></a>
</center>


y listo eso es todo

domingo, 13 de noviembre de 2011

poner el menu de google en blogger o mi web

bueno esto es para poner el menu de google en el blog o en una pagina web


bueno primero en blogger debes ir a diseño edicion html y buscas la etiqueta </head>

antes de esta etiqueta agregas este codigo

<link type="text/css" rel="stylesheet" href="http://ensayandopopup.webcindario.com/css/menugoogle.css"/>



luego guardas

2. luego de guardar te vas a diseño -- agregar un gadget--html/javascript- y pones el siguiente codigo


<ul class="googleTab">

<li class="active"><a href="#">Home link 1</a></li>

<li><a href="#">About us link 2</a></li>

<li><a href="#">Our Services link3</a></li>


<li><a href="#">Our Technologies link 4</a></li>

<li><a href="http://efectosparabloggerywebs.blogspot.com/">andres2288 link 5</a></li>

</ul>


donde dice link 1 link 2 agregas el nombre del link y donde dice # la url del link puedes ver al ultimo link andres2288 y el enlace a mi sitio

eso es todo

martes, 8 de noviembre de 2011

cambiar el color de la letra de los comentarios de facebook incrustado en mi blog o web

cambiar el color de la letra de la caja de comentarios de facebook incrustado en mi blog o web

cambiar el color de la letra de la caja de comentarios de facebook en mi blog de color negro

no cambia el color de la letra solo le pone un fondo claro a la caja de comentarios
para que se vea la letra

A.bueno esto es para los usuarios que tienen un blog de color negro y hallan añadido la caja de comentarios de facebook en su blog y los comentarios casi no se ven por el color negro del blog como la siguiente imagen



al modificarlo que dara como la siguiente siguiente imagen






1. bueno lo primero que tienes que hacer es ir a Diseño edicion html y buscas con control +f la siguiente etiqueta: ]]></b:skin>

justo antes de esa etiqueta pones el siguiente codigo:

<link href='http://ensayandopopup.webcindario.com/css/1.css' rel='stylesheet' type='text/css'/>


le dan guardar.

2. ahora digamos que ustedes tienen el codigo que les dio facebook o los desarrolladores de facebook para incrustalo en tu blog como por ejemplo este:


<div id="fb-root"></div>
<script src="http://connect.facebook.net/es_LA/all.js#appId=APP_ID&amp;xfbml=1"></script>
<b:if cond='data:blog.pageType == &quot;item&quot;'><div><br/><br/><fb:comments expr:href='data:post.url'/></div></b:if>


lo que tienen que hacer es agregar las etiquetas pre y code antes y despues tomando un ejemplo del codigo anterior entonces que daria asi:


<pre><code>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/es_LA/all.js#appId=APP_ID&amp;xfbml=1"></script>
<b:if cond='data:blog.pageType == &quot;item&quot;'><div><br/><br/><fb:comments expr:href='data:post.url'/></div></b:if>
</code></pre>



es facil solo agregan esas dos etiquetas , entonces si tienen el codigo que les da facebook agregan antes estas 2 <pre><code>

y despues del codigo que les da facebook agregan estas 2 </code></pre>


y finalmente podra verse la letra de los comentarios asi:





y listo eso es todo




ay otra forma de cambiarle el color ustedes eligiran cual de las 2 quieren la 2da opcion es la siguiente:

B.digamos que ustedes tienen el codigo que les genero facebook de comentarios por ejemplo:


<div id="fb-root"></div>
<script src="http://connect.facebook.net/es_LA/all.js#appId=APP_ID&amp;xfbml=1"></script>
<b:if cond='data:blog.pageType == &quot;item&quot;'><div><br/><br/><fb:comments expr:href='data:post.url'/></div></b:if>



bueno justo antes de este codigo agregan el siguiente codigo :

<div class='likeboxwrap'>


y despues de ese codigo agregan esta etiqueta



</div>



osea que el codigo quedaria asi


<div class='likeboxwrap'>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/es_LA/all.js#appId=APP_ID&amp;xfbml=1"></script>
<b:if cond='data:blog.pageType == &quot;item&quot;'><div><br/><br/><fb:comments expr:href='data:post.url'/></div></b:if>

</div>



y despues de este codigo agregamos el estilo o color con este codigo este codigo lo colocan despues del anterior


<style type='text/css'>
div.likeboxwrap {
width:500px; /* Quitar 2px al ancho del gadget */
height:auto; /* Quitar 25px al alto del gadget */
background-color:#8A084B; /* Color de fondo del gadget */
overflow:hidden;
}
div.likeboxwrap iframe {margin:-1px}
</style>



le dan guardar y listo

si ven el numero 500 es el ancho lo pueden ajustar a su manera si el codigo de facebook dice width ustedes miran el tamaño y lo ponen en el estilo de arriba que queden iguales si no no y donde dice background-color:#8A084B ponen el color hexadecimal que quieran

los colores hexadecimales los puden conseguir en esta pagina

http://html-color-codes.info/codigos-de-colores-hexadecimales

para ver una imagen de como queda miren la siguiente imagen