domingo, 27 de octubre de 2013

Gato Animado Widget para tu pagina web o blog



Excelente Widget de Lindo Gatito Virtual para tu blog Copia el código abajo  y pegalo en tu blog, en tu perfil de algunas red social como Hi5, My Space, Facebook espero que les guste no olviden comentar. Gatito animado para tu blog blogger


Copia el código y pegarlo en tu Pagina o Blog

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" height="400" title="Toy Cat" width="330">
                      <param value="http://www.pageplugins.com/generators/virtual_cat/cat.swf" name="movie">
                      <param value="high" name="quality">
                      <param value="transparent" name="wmode">
    <embed width="330" height="400" wmode="transparent" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" quality="high" src="http://www.pageplugins.com/generators/virtual_cat/cat.swf">
  </object>

Colocar Musica,Radio en linea en tu blog

 
En esta ocacion les traigo un gadget de radio online ahora podrán poner en sus blog música online radio , en esta radio pasan muy buenas música en español e ingles puedes cambiar de Emisoras. Radio Top Latino en tu blog Cadenatop

Top Latino Radio: Lo mas escuchado en el mundo latino
Radio Reggae: Solo música reggae, en español y en inglés. recomendado
Top Urbano: Música urbana, hip hop y reggaeton muy buena 
Top-x:  Pasan Música de los 90 en inglés


Codigo de la Radio

<embed pluginspage="http://www.adobe.com/go/getflashplayer"src="http://cadenatop.com/cadenatop_mini.swf" width="200" height="228" wmode="transparent"type="application/x-shockwave-flash" allowscriptaccess="always"></embed>


viernes, 25 de octubre de 2013

Caja de Seguidores de Redes sociales para tu blogger


En esta ocacion traigo caja de botones redes sociales de facebook , twitter y google+ para tu blog o pagina web 

Para agregar esta caja de redes sociales ve a Diseño > Agregar un gadget > HTML/JavaScript y pega lo siguiente :

<style>
/* Botones redes Sociales */
ul#caja-redes{
width:275px;
padding:0;
margin:0;
list-style:none;
background:#f7f7f7;
border:1px solid #dcdcdc;
overflow:hidden;
}
ul#caja-redes strong,{
color:#848484;
font-size:12px;
}
ul#caja-redes li{
overflow:hidden;
}
li.cg-plus{
height:48px;
padding-bottom:4px;
border-right:1px solid #dcdcdc;
border-bottom:1px solid #dcdcdc;
margin:0 -1px 0 -5px;
}
li.c-fb{
border-bottom:1px solid #dcdcdc;
padding:5px 3px 2px;
margin:4px;
}
li.c-tw,{
margin:4px;
padding:5px 3px 2px;
}
/* para mas info trucosgadgetsblogger.blogspot.com/*/
</style>
<br />
<ul id="caja-redes">
<li class="c-fb"><iframe allowtransparency="true" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/follow.php?href=https%3A%2F%2Fwww.facebook.com%2Fdnis.villeda&amp;send=false&amp;layout=standard&amp;width=260&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=42" style="border: none; height: 42px; overflow: hidden; width: 260px;"></iframe> </li>
<li class="c-tw"><a class="twitter-follow-button" data-dnt="true" data-lang="es" href="https://twitter.com/dniscriss">Seguir a @dniscriss</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> </li>
<li class="cg-plus"><div class="g-plus" data-href="//plus.google.com/107424685125055103818" data-rel="publisher" data-width="286">
</div>
<!-- Inserta esta etiqueta después de la última etiqueta de insignia. --> <script type="text/javascript"> window.___gcfg = {lang: 'es'}; (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script> </li>
</ul>

 Color Rojo: Tu nombre de usuario de facebook ID
 Color Azul: Primero tu nombre de usuario de twitter y después el texto que apare sera en el botón
 Color fucsia: El id de tu cuenta de google plus 

Como añadir los Emotiones en los Comentarios Blogger

En este pequeño tutorial les explicara breve mente muy fácil de colo colocar Emotiones para los comentarios Blogger 

A continuación les mostrare los Emotiones:


Para agregar los emotiones blogger comentarios en tu blog ve a Plantilla > Edicion HTML buscas la etiqueta </body> y pegas antes el siguiente codigo:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script src='http://dl.dropbox.com/u/35784805/Mil%20Trucos%20Blogger/emoticonesblogger.js' type='text/javascript'/>
<script type='text/javascript'>
emoticonComentario();
</script>
</b:if>
 Ahora buscas la siguiente linea:

 <div class='post-footer-line post-footer-line-3'/>
Y debajo de la linea agregas el siguiente código:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='divspoiler'>
<img onclick='if (this.parentNode.nextSibling.childNodes[0].style.display != &apos;&apos;) { this.parentNode.nextSibling.childNodes[0].style.display = &apos;&apos;; } else { this.parentNode.nextSibling.childNodes[0].style.display = &apos;none&apos;;}' src='http://3.bp.blogspot.com/-NVnnuH5VK6M/T1OKnwBNp5I/AAAAAAAAAz8/UDsvHVEj7Yw/s1600/Sin+t%C3%ADtulo-1.png'/>
</div><div><div class='spoiler' style='display: none;'>
<div class='comment-content' id='bc_0_1MC'>
<img src='http://static.mobile9.com/bbcode/smileys/smile.gif'/> :) <img src='http://static.mobile9.com/bbcode/smileys/tongue.gif'/> X( <img src='http://static.mobile9.com/bbcode/smileys/wink.gif'/> :cool: <img src='http://static.mobile9.com/bbcode/smileys/laugh.gif'/> :cry: <img src='http://static.mobile9.com/bbcode/smileys/frown.gif'/>  :blaf: <img src='http://static.mobile9.com/bbcode/smileys/thumbup.gif'/> :winky: <img src='http://static.mobile9.com/bbcode/smileys/blush.gif'/> :noo: <img src='http://static.mobile9.com/bbcode/smileys/byebye.gif'/> :twisted: <img src='http://static.mobile9.com/bbcode/smileys/clapping.gif'/>:D <img src='http://static.mobile9.com/bbcode/smileys/wow.gif'/> :oops: <img src='http://static.mobile9.com/bbcode/smileys/help.gif'/> :? <img src='http://static.mobile9.com/bbcode/smileys/devil.gif'/> :F
<img src='http://static.mobile9.com/bbcode/smileys/wub.gif'/> :alaba: <img src='http://static.mobile9.com/bbcode/smileys/cry.gif'/>:lpmqtp: <img src='http://static.mobile9.com/bbcode/smileys/thumbdown.gif'/> :idiot:</div>
</div></div>
</b:if>
Y listo espero que les guste no olviden comentar

martes, 15 de octubre de 2013

Pajaro de twitter volando por tu blog blogger



Hola en esta ocacion les traego un efecto o truco para que coloquen una animación en movimiento de un Pájaro de twitter volando por el blog 

El tutorial de como colocar el Pájaro twitter volando por el blog blogger es muy fácil no es nada del otro mundo 

Para agregar el Pájaro flotando por tu blog blogger , ve a Diseño ,  a Añadir Gadgets HTML/JavaScript y pego lo siguiente:

<style type="text/css">
#twitter {
width: 125px;
height: 125px;
position: fixed;
background: url(https://lh6.googleusercontent.com/-lsTVVhpR3ME/UXmKPhM-_eI/AAAAAAAAAmA/OFGDPUi28yk/h120/sigueme.png);
animation: twitter 25s infinite;
-o-animation: twitter 25s infinite;
-moz-animation: twitter 25s infinite;
-webkit-animation: twitter 25s infinite;
}
@-webkit-keyframes twitter
{
0% {left:-5%;bottom:0px;}
10% {bottom:15%}
20% {bottom:2%}
30% {bottom:15%}
40% {bottom:2%}
50% {bottom:15%}
60% {bottom:2%}
70% {bottom:15%}
80% {bottom:2%}
100% {left:105%;bottom:15%}
}
@keyframes twitter
{
0% {left:-5%;bottom:0px;}
10% {bottom:15%}
20% {bottom:2%}
30% {bottom:15%}
40% {bottom:2%}
50% {bottom:15%}
60% {bottom:2%}
70% {bottom:15%}
80% {bottom:2%}
100% {left:105%;bottom:15%}
}
@-moz-keyframes twitter
{
0% {left:-5%;bottom:0px;}
10% {bottom:15%}
20% {bottom:2%}
30% {bottom:15%}
40% {bottom:2%}
50% {bottom:15%}
60% {bottom:2%}
70% {bottom:15%}
80% {bottom:2%}
100% {left:105%;bottom:15%}
}
@-o-keyframes twitter
{
0% {left:-5%;bottom:0px;}
10% {bottom:15%}
20% {bottom:2%}
30% {bottom:15%}
40% {bottom:2%}
50% {bottom:15%}
60% {bottom:2%}
70% {bottom:15%}
80% {bottom:2%}
100% {left:105%;bottom:15%}
}
</style>
<a href="http://twitter.com/NombreUsuario" target="_blank" id="twitter"></a>

Lo que dice Nombre de Usuario lo cambias por tu nombre de usuario twitter y listo 


domingo, 6 de octubre de 2013

Colocar el Titulo del Blog en movimiento



Hoy les traigo este efecto para blogger es bastante sencillo y fácil de colocar,lo único que hace el efecto o script  es ponerle al titulo del blog que aparece en tu navegador movimiento.

Para instalar este truco nos vamos a Plantilla > Diseño HTML y buscas la etiqueta </body> y encima de ella pegas el siguiente codigo

<SCRIPT LANGUAGE='JavaScript'>
var txt=" Titulo de tu blog  ";
var espera=100;
var refresco=null;
function rotulo_title() {
document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0);
refresco=setTimeout("rotulo_title()",espera);}
rotulo_title();
</SCRIPT>

Ahora solo reemplazas en el codigo " Titulo de tu blog " por el titulo de tu blog y listo.

Santa Claus Volando con su Trineo en el Blog

Buenos amigos como falta unos pocos meses para el periodo navideño les traigo unos trucos efectos para que adornen su blog con este script.



El script no tienen ningún tipo de opcion para configurar lo y es muy sencillo de color a continuacion les mostrare.

Para ponerlo solo entras en Plantilla > Edicion HTML , luego buscas la etiqueta de </head> lo agregas antes este código Script.

<!-- Santa Claus volando por el blog -->
<script type="text/javascript" src="http://blogparts.giffy.me/0017/parts.js" />
<!-- Santa Claus volando por el blog -->

Cuanto terminen las fiestas navideñas solo borras el codigo de Santa Claus volando en su trineo por el blog.

sábado, 5 de octubre de 2013

Agregar Meta Tags en tu Blog Blogger


¡Que son los meta tags!

Los meta tags son etiquetas HTML dentro de una web que contienen información util para los robots y solo es visible para ellos. nos sirve para una mejor y correcta indexacion y clasificación del blog.en esas  etiquetas  se encuentra informaciones básicas de nuestra web, blog como el titulo, idioma y su descripción

Para añadir las meta tags en nuestro blog es muy fácil

Estos meta tags se colocan en Plantilla > Edicion HTML, antes de la etiqueta <head>

<meta content='Título del blog' name='Title'/>
<meta content='palabraclave1, palabraclave2,palabraclave3' name='keywords'/>
<meta content='Tema del blog' name='Subject'/>
<meta content='Descripción del blog' name='description'/>
<meta content='El autor' name='author'/>
<meta content='es' name='language'/>
<meta content='3 days' name='Revisit-After'/>
<meta content='all' name='robots'/>
<meta content='all, index, follow' name='robots'/>
<meta content='all' name='googlebot'/>
<meta content='all, index, follow' name='googlebot'/>
<meta content='all' name='yahoo-slurp'/>
<meta content='all, index, follow' name='yahoo-slurp'/>
<meta content='index, follow' name='msnbot'/>
<meta content='all' name='googlebot-image'/>

Title Aquí el titulo de tu web blog
Keywords Palabras clave de tu sitio pagina web blog
Subject Es la tematica de tu blog web
Description Una descripción corta y precisa de tu sitio web o blog
Author Tu nombre aquí
Language Idioma de tu blog "es" español
Revisit-After El tiempo que tardarán los bots en visitar tu sitio web o blog de nuevo(bots de Google, Bing y Yahoo)

Artículos relacionados en tu Blogger


Hoy les traigo este tutorial de como poner el gadget de articulos relacionados en tu web blogger, este gadget es parecido al de la web LinkWithin pero sin dejarle un moles toso link que dirige a su pagina web 

Al igual que el gadget de LinkWithin incluye imágenes en miniaturas 

Para colocar el gadget primero debemos ir a Plantilla > Editar HTML y buscamos el siguiente código :

</head>

Despues de esa etiqueta pegamos el siguiente código :


<!-- Articulos relacionados con miniaturas -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>

#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts a:hover {
background-color:#d4eaf2;
}

</style>

<script type='text/javascript'>
//<![CDATA[

//Script by Aneesh of www.bloggerplugins.org
//Released on August 19th August 2009
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
var thumburl = new Array();
function related_results_labels_thumbs(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
try
{thumburl[relatedTitlesNum]=entry.media$thumbnail.url;}



catch (error){
s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){
thumburl[relatedTitlesNum]=d;} else thumburl[relatedTitlesNum]='http://lh4.ggpht.com/_NNS6r_z4aeg/SuOQIOq8y3I/AAAAAAAAN_o/hD-YGKj_QFg/sinimagen.jpg';

}

if(relatedTitles[relatedTitlesNum].length>35) relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0, 35)+"...";
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;



}
}
}
}
function removeRelatedDuplicates_thumbs() {
var tmp = new Array(0);
var tmp2 = new Array(0);
var tmp3 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains_thumbs(tmp, relatedUrls[i]))
{
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp3.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
tmp3[tmp3.length - 1] = thumburl[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
thumburl=tmp3;



}

function contains_thumbs(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels_thumbs() {
for(var i = 0; i < relatedUrls.length; i++)
{
if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i])))
{
relatedUrls.splice(i,1);
relatedTitles.splice(i,1);
thumburl.splice(i,1);

}
}



var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;

if(relatedTitles.length>0) document.write('<h2>'+relatedpoststitle+'</h2>');
document.write('<div style="clear: both;"/>');
while (i < relatedTitles.length && i < 20 && i<maxresults) {



document.write('<a style="text-decoration:none;padding:5px;float:left;');
if(i!=0) document.write('border-left:solid 0.5px #d4eaf2;"');
else document.write('"');
document.write(' href="' + relatedUrls[r] + '"><img style="width:72px;height:72px;border:0px;" src="'+thumburl[r]+'"/><br/><div style="width:72px;padding-left:3px;height:65px;border: 0pt none ; margin: 3px 0pt 0pt; padding: 0pt; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; line-height: normal; font-size-adjust: none; font-stretch: normal;">'+relatedTitles[r]+'</div></a>');



if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</div>');

}

//]]>
</script></b:if>
<!-- fin artículos relacionados -->

 Luego buscamos esto 


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

debajo pegamos esto 


<!-- Articulos relacionados con miniaturas -->

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=4;
var relatedpoststitle=&quot;Articulos Relacionados&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>

<!-- Articulos relacionados con miniaturas -->


Para editar el numero de artículos que queremos que aparezca editamos la linea :


var maxresults=4;

Y sustituyes el numero 4 por la cantidad de artículos que quieres que aparezcan , esto era todo ya tienes el gadget artículos relaciones en blogger

Eliminar Atribucion (con la tecnologia de blogger)

Eliminar el molesto texto Con la tecnologia de blogger les mostrare como eliminarlo de nuestro plantilla blogger

Primero vamos a Platilla > Edicion HTML y buscamos la siguiente linea


Attribution1

Cuando encuentres la linea buscas en la misma linea la palabra " true " y la cambias por  " false " ,guardas y debera quedar de esta manera.


<b:widget id='Attribution1' locked='false' title='' type='Attribution'/>
Luego vamos a "Diseño" y buscamos el gadget llamado Atribución le damos editar y nos aparecera esta pantalla


Ahora solo le damos eliminar y listo ya se ha eliminado el gadget molesto de Con la tecnología blogger

Lista Entradas al azar gadget


El gadget de entradas al azar blogger nos permite  hacer una lista de entradas al azar, permitiendo mas contenido a nuestros lectores. para añadir a tu blog sigue este tutorial.

Para agregarlo ve a Diseño > Añadir un gadget selecciones HTML/JavaScript pega el siguiente código y guardas


<div id="random-posts">
<script type="text/javascript">
function getRandomPosts(json) {
var maxEntries = 5;
var numPosts = json.feed.openSearch$totalResults.$t;
var indexPosts = new Array();
for (var i = 0; i < numPosts; ++i) {
indexPosts[i] = i;
}
indexPosts.sort(function() {return 0.5 - Math.random()});
if (maxEntries > numPosts) {
maxEntries = numPosts;
}
var container = document.getElementById('random-posts');
var ul = document.createElement('ul');
for (i = 0; i < maxEntries; ++i) {
var entry = json.feed.entry[indexPosts[i]];
var li = document.createElement('li');
var a = document.createElement('a');
a.title = entry.title.$t;
for (var j = 0; j < entry.link.length; ++j) {
if (entry.link[j].rel == 'alternate') {
a.href = entry.link[j].href;
break;
}
}
a.appendChild(document.createTextNode(entry.title.$t));
li.appendChild(a);
ul.appendChild(li);
}
container.appendChild(ul);
}
</script>
<script src="http://tublog.blogspot.com/feeds/posts/summary?alt=json-in-script&callback=getRandomPosts&max-results=999" type="text/javascript"></script>
</div>

Para configurar lo:

El numero 5 en color rojo es el numero de entradas que mostrara lo puedes modificar por el numero de entradas que quieras.

Y la direccion de tu blog marcada en color azul

Codigo Movimiento de Texto



Hoy les traigo unos código HTML que les permiten darle efecto al texto de manera muy fácil, solo tienen que cambiar la palabra Movimiento de Texto por la palabra que quieras dar el efecto de movimiento de texto 

A continuación unos ejemplos con sus respectivos códigos HTML:

1° Movimiento de Texto

<marquee> 1° Movimiento de Texto</marquee>

2° Movimiento de Texto


<marquee direction="right">2 ° Movimiento de Texto</marquee> 

3° Movimiento de Texto


  <marquee direction="up"> 3° Movimiento de Texto</marquee>


4° Movimiento de Texto



<marquee direction="down"> 4° Movimiento de Texto</marquee>

viernes, 4 de octubre de 2013

Google buscador en tu pagina web


Les traigo un código sencillo para que coloque un buscador de google en tu pagina web o blogger es muy sencillo y solo tienen que utilizar el codigo que les dare


El codigo que tienen que usar es este :

<center>
<form method="get" action="http://www.google.com/search" target="_blank">
<input type="text" name="q" size="40" maxlength="255" onfocus="if(this.value=='Buscar En Google') this.value='';" onblur="if(this.value=='') this.value='Buscar En Google';" value=
"Buscar En Google" style="color: #?--#ff0000--?; font-size: 12pt; border: 1px solid #888888; background-color: #ffffff" /> <input type="hidden" name="hl" value="es" /> <input name="btnG"
value="Buscar" type="submit" style="color: #ffffff; font-size: 11pt; border: 1px solid #888888; background-color: #000000" />
</form>
</center>

Solo tienen que usar el codigo en HTML espero que les guste.

miércoles, 2 de octubre de 2013

Corazones cayendo en nuestra web o blog



Este efecto es muy parecido al efecto de copos de nieves en nuestra blog , es algo sencillo de colocar y de quitar se lo explico a continuación espero que les guste este efecto corazones cayendo en nuestra web

Diseño> Nuevo Gadget  HTML/JavaScript> pegamos y guardamos y listo 

<script language='javascript' type='text/javascript'>
//<![CDATA[
// Script original de Eloi Gallés Villaplana
var numero =25
var velocidad = 20
var imagenamor = "https://lh4.googleusercontent.com/-_DubFGB9694/TyjSYMzn48I/AAAAAAAAAIo/fQ4ArWbipE8/s40/corazon.gif"
var ns4arriba = (document.layers) ? 1 : 0
var ie4arriba = (document.all) ? 1 : 0
var dombrowser = (document.getElementById) ? 1 : 0
var dx, xp, yp
var am, stx, sty
var i, doc_ancho = 1024, doc_alto = 768
function amor() {
establece_dimensiones()
dx = new Array()
xp = new Array()
yp = new Array()
am = new Array()
stx = new Array()
sty = new Array();
for (i = 0; i < numero; ++ i) {
dx[i] = 0
xp[i] = Math.random()*(doc_ancho-50)
yp[i] = Math.random()*doc_alto
am[i] = Math.random()*20
stx[i] = 0.02 + Math.random()/10
sty[i] = 0.7 + Math.random()
if (document.layers) {
if (i == 0) {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" ")
document.write("top=\"15\" visibility=\"show\"><img src=\"")
document.write(imagenamor + "\" border=\"0\"></layer>")
} else {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" ")
document.write("top=\"15\" visibility=\"show\"><img src=\"")
document.write(imagenamor + "\" border=\"0\"></layer>")
}
} else if (document.all || document.getElementById) {
if (i == 0) {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ")
document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ")
document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\"")
document.write(imagenamor + "\" border=\"0\"></div>")
} else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ")
document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ")
document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\"")
document.write(imagenamor + "\" border=\"0\"></div>")
}
}
}
corazon()
}
function corazon() {
for (i = 0; i < numero; ++ i) {
yp[i] += sty[i];
if (yp[i] > doc_alto) {
xp[i] = Math.random()*(doc_ancho-am[i]-30)
yp[i] = 0
stx[i] = 0.02 + Math.random()/10
sty[i] = 0.7 + Math.random()
establece_dimensiones()
}
dx[i] += stx[i];

if ( document.all ) {
var imagen = eval("dot" + i )
imagen.style.posLeft = xp[i] + am[i]*Math.sin(dx[i])
imagen.style.posTop = yp[i]
}
else if ( document.layers ) {
var imagen = eval("document.dot" + i)
imagen.left = xp[i] + am[i]*Math.sin(dx[i])
imagen.top = yp[i]
}
else if ( document.getElementById ) {
var imagen = document.getElementById( "dot" + i)
imagen.style.left = xp[i] + am[i]*Math.sin(dx[i]) + 'px'
imagen.style.top = yp[i] + 'px'
}
}
setTimeout("corazon()", velocidad)
}
function establece_dimensiones() {
if (self.innerHeight) {
doc_ancho = self.innerWidth - 50
doc_alto = self.innerHeight - 21
} else if (document.documentElement && document.documentElement.clientHeight) {
doc_ancho = document.documentElement.clientWidth
doc_alto = document.documentElement.clientHeight - 25
} else if (document.body) {
doc_ancho = document.body.clientWidth
doc_alto = document.body.clientHeight - 25
}
}
//]]>
</script>
<script language='javascript' type='text/javascript'>
amor()
</script>
Puedes cambiar la imagenes de corazones cambiando el link de color azul por su imagen que quieran eso era todo .


Codigo Buscador de Youtube en tu Blog



Con este codigo javascript vamos a poder poner en nuestro blog o web un buscador de youtube asi:


Es muy sencillo solo tenemos que utilizar este código en HTML espero que les guste no olvides dejar tu comentario 

<center>
<form method="get" action="http://www.youtube.com/results" target="_blank">
<input type="text" name="q" size="40" maxlength="255" onfocus="if(this.value=='Buscar En Youtube') this.value='';" onblur="if(this.value=='') this.value='Buscar En Youtube';" value=
"Buscar En Youtube" style="color:#?--#ff0000--?; font-size: 12pt; border: 1px solid #888888; background-color: #ffffff" /> <input type="hidden" name="hl" value="es" /> <input name="btnG"
value="Buscar" type="submit" style="color: #ffffff; font-size: 11pt; border: 1px solid #888888; background-color: #000000" />
</form>
</center>

martes, 1 de octubre de 2013

Efecto Nieve en el blog

Quieres agregar tener nieve en tu blog ? , asi como sale en la imagen   que estas viendo lograr este efecto es muy sencillo , basta con simplemente insertar este codigo y tendras un bonito Efecto nieve JavaScript en tu Blog



Para colocar este codigo solo vas a diseño, agregar un nuevo gadget, HTML/JavaScript  colocar el codigo y listo

<script>

if ((document.getElementById) &&
window.addEventListener || window.attachEvent){

(function(){

//Configure here.

var num = 30; //Number of flakes
var timer = 30; //setTimeout speed. Varies on different comps
var enableinNS6 = 1 //Enable script in NS6/Mozilla? Snow animation could be slow in those browsers. (1=yes, 0=no).

//End.

var y = [];
var x = [];
var fall = [];
var theFlakes = [];
var sfs = [];
var step = [];
var currStep = [];
var h,w,r;
var d = document;
var pix = "px";
var domWw = (typeof window.innerWidth == "number");
var domSy = (typeof window.pageYOffset == "number");
var idx = d.getElementsByTagName('div').length;

if (d.documentElement.style &&
typeof d.documentElement.style.MozOpacity == "string")
num = 12;

for (i = 0; i < num; i++){
sfs[i] = Math.round(1 + Math.random() * 1);

document.write('<div id="flake'+(idx+i)+'" style="position:absolute;top:0px;left:0px;width:'
+sfs[i]+'px;height:'+sfs[i]+'px;background-color:#ffffff;font-size:'+sfs[i]+'px"><\/div>');

currStep[i] = 0;
fall[i] = (sfs[i] == 1)?
Math.round(2 + Math.random() * 2): Math.round(3 + Math.random() * 2);
step[i] = (sfs[i] == 1)?
0.05 + Math.random() * 0.1 : 0.05 + Math.random() * 0.05 ;
}



if (domWw) r = window;
else{
if (d.documentElement &&
typeof d.documentElement.clientWidth == "number" &&
d.documentElement.clientWidth != 0)
r = d.documentElement;
else{
if (d.body &&
typeof d.body.clientWidth == "number")
r = d.body;
}
}



function winsize(){
var oh,sy,ow,sx,rh,rw;
if (domWw){
if (d.documentElement && d.defaultView &&
typeof d.defaultView.scrollMaxY == "number"){
oh = d.documentElement.offsetHeight;
sy = d.defaultView.scrollMaxY;
ow = d.documentElement.offsetWidth;
sx = d.defaultView.scrollMaxX;
rh = oh-sy;
rw = ow-sx;
}
else{
rh = r.innerHeight;
rw = r.innerWidth;
}
h = rh - 2;
w = rw - 2;
}
else{
h = r.clientHeight - 2;
w = r.clientWidth - 2;
}
}



function scrl(yx){
var y,x;
if (domSy){
y = r.pageYOffset;
x = r.pageXOffset;
}
else{
y = r.scrollTop;
x = r.scrollLeft;
}
return (yx == 0)?y:x;
}



function snow(){
var dy,dx;

for (i = 0; i < num; i++){
dy = fall[i];
dx = fall[i] * Math.cos(currStep[i]);

y[i]+=dy;
x[i]+=dx;


if (x[i] >= w || y[i] >= h){
y[i] = -10;
x[i] = Math.round(Math.random() * w);
fall[i] = (sfs[i] == 1)?
Math.round(2 + Math.random() * 2): Math.round(3 + Math.random() * 2);
step[i] = (sfs[i] == 1)?
0.05 + Math.random() * 0.1 : 0.05 + Math.random() * 0.05 ;
}
theFlakes[i].top = y[i] + scrl(0) + pix;
theFlakes[i].left = x[i] + scrl(1) + pix;

currStep[i]+=step[i];
}
setTimeout(snow,timer);
}



function init(){
winsize();
for (i = 0; i < num; i++){
theFlakes[i] = document.getElementById("flake"+(idx+i)).style;
y[i] = Math.round(Math.random()*h);
x[i] = Math.round(Math.random()*w);
}
snow();
}



if (window.addEventListener){
window.addEventListener("resize",winsize,false);
window.addEventListener("load",init,false);
}
else if (window.attachEvent){
window.attachEvent("onresize",winsize);
window.attachEvent("onload",init);
}


})();
}//End.

</script>

Fuegos artificiales en tu blog




Fuegos artificiales para tu pagina web.se trata de un codigo javascript que hace que en la pantalla se vean fuegos artificaciles

la idea es para de este codigo javascript es para las fiestas de fin de año o para otro event.

El Codigo es el siguiente :

<script type="text/javascript">
//<![CDATA[
var bits=100; // cuantos bits
var intensity=7; // que tan "poderosa" es la explosión. (recomendado entre 3 y 10)
var speed=20; // rapidez (a menor numero, mas rapido)
var colours=new Array("#03f", "#f03", "#0e0", "#93f", "#0cc", "#f93");
//azul rojo verde purpura cyan, naranjo
var dx, xpos, ypos, bangheight;
var Xpos=new Array();
var Ypos=new Array();
var dX=new Array();
var dY=new Array();
var decay=new Array();
var colour=0;
var swide=800;
var shigh=600;
function write_fire() {
var b, s;
b=document.createElement("div");
s=b.style;
s.position="absolute";
b.setAttribute("id", "bod");
document.body.appendChild(b);
set_scroll();
set_width();
b.appendChild(div("lg", 3, 4));
b.appendChild(div("tg", 2, 3));
for (var i=0; i<bits; i++) b.appendChild(div("bg"+i, 1, 1));
}
function div(id, w, h) {
var d=document.createElement("div");
d.style.position="absolute";
d.style.overflow="hidden";
d.style.width=w+"px";
d.style.height=h+"px";
d.setAttribute("id", id);
return (d);
}
function bang() {
var i, X, Y, Z, A=0;
for (i=0; i<bits; i++) {
X=Math.round(Xpos[i]);
Y=Math.round(Ypos[i]);
Z=document.getElementById("bg"+i).style;
if((X>=0)&&(X<swide)&&(Y>=0)&&(Y<shigh)) {
Z.left=X+"px";
Z.top=Y+"px";
}
if ((decay[i]-=1)>14) {
Z.width="3px";
Z.height="3px";
}
else if (decay[i]>7) {
Z.width="2px";
Z.height="2px";
}
else if (decay[i]>3) {
Z.width="1px";
Z.height="1px";
}
else if (++A) Z.visibility="hidden";
Xpos[i]+=dX[i];
Ypos[i]+=(dY[i]+=1.25/intensity);
}
if (A!=bits) setTimeout("bang()", speed);
}
function stepthrough() {
var i, Z;
var oldx=xpos;
var oldy=ypos;
xpos+=dx;
ypos-=4;
if (ypos<bangheight||xpos<0||xpos>=swide||ypos>=shigh) {
for (i=0; i<bits; i++) {
Xpos[i]=xpos;
Ypos[i]=ypos;
dY[i]=(Math.random()-0.5)*intensity;
dX[i]=(Math.random()-0.5)*(intensity-Math.abs(dY[i]))*1.25;
decay[i]=Math.floor((Math.random()*16)+16);
Z=document.getElementById("bg"+i).style;
Z.backgroundColor=colours[colour];
Z.visibility="visible";
}
bang();
launch();
}
document.getElementById("lg").style.left=xpos+"px";
document.getElementById("lg").style.top=ypos+"px";
document.getElementById("tg").style.left=oldx+"px";
document.getElementById("tg").style.top=oldy+"px";
}
function launch() {
colour=Math.floor(Math.random()*colours.length);
xpos=Math.round((0.5+Math.random())*swide*0.5);
ypos=shigh-5;
dx=(Math.random()-0.5)*4;
bangheight=Math.round((0.5+Math.random())*shigh*0.4);
document.getElementById("lg").style.backgroundColor=colours[colour];
document.getElementById("tg").style.backgroundColor=colours[colour];
}
window.onscroll=set_scroll;
function set_scroll() {
var sleft, sdown;
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
var s=document.getElementById("bod").style;
s.top=sdown+"px";
s.left=sleft+"px";
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}
window.onload=function() { if (document.getElementById) {
set_width();
write_fire();
launch();
setInterval('stepthrough()', speed);
}}
//]]>
</script>

Para agregar es muy sencillo , vas a diseño agregar un nuevo gadget , HTML/JavaScript y pegas el codigo Es todo espero que les guste. 

Caja de aviso pasa tu blog con opción cerrar

Esta caja de aviso es una caja muy sencilla y bonita con opciones de colocar tu facebook y twitter , es una mezcla del mensaje tipo Post-it, y de etiquetas Fieldset esta caja de aviso sencilla para tu blog blogger espero que les guste



Para la colocación es muy fácil prácticamente un solo paso únicamente tienes que seguir estos pasos:

1. Diseño
2. Elementos de la pagina
3. Añadir un gadget HTML/Javacript

<style type="text/css">
#aviso{
width:500px; /* Ancho de la caja */
padding:5px; position:absolute; z-index:5000;}
.caja-aviso{
border:4px double #0080FF; /* Color del borde */
-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 8px 8px 6px #808080; -moz-box-shadow: 8px 8px 6px #808080; box-shadow: 8px 8px 6px #808080;
background-color: #CEECF5; /* Color de fondo */
padding: 10px; font-family: Verdana, Geneva, sans-serif;
color: #0B173B; /* Color del texto */
}
.letrero-aviso { /* Estilos de la palabra AVISO */
font-size:18pt;
font-weight:bold;
color:#B4045F;
text-shadow: 0px 0px 10px #BA55D3;}
</style>
<div id="aviso" style="left:300px; top:100px; padding:0;">
<div align="right" style="margin-bottom:-30px;"><b><a href="javascript:closeit()" ><font face="Arial" size="1">[CERRAR]</font> <img valign="middle" src="https://lh5.googleusercontent.com/-46DmTbFSiuQ/TliKe_XV0lI/AAAAAAAAGJ4/_H2c3HB4XoY/CloseIcon-small.png" style="vertical-align:middle;"/></a></b></div>
<br/>
<fieldset class="caja-aviso">
<legend class="letrero-aviso" align="center">AVISO</legend>
...Aquí va el mensaje...<br/><div align="right"><a href="http://www.facebook.com/usuario" target="blank"><img src="https://lh6.googleusercontent.com/-9TNSAdSEm2o/Tlgi_wnuKZI/AAAAAAAAGJw/6rLfLd-QfkE/facebook.png" width="26"/></a>
<a href="http://twitter.com/usuario" target="blank"><img src="https://lh6.googleusercontent.com/-xk9JDUThPo0/TlgjAUiI4eI/AAAAAAAAGJ0/t5QtAN0xPco/twitter.png" width="25"/></a></div>
</fieldset>
<script>
function closeit(){
document.getElementById("aviso").style.visibility = "hidden";
}
</script>
</div><div class="clear"/></div>
Solo tienes que agregar agregar el mensaje donde te indica , y tu usuario de facebook y twitter si esque tienes no olvides dejar tu comentario gracias..

En donde dice left:300px; top100px; se puede controlar la posición de la caja de aviso , left es la distancia desde la izquierda y top la distancia arriba


Gadget transforma el texto en audio real


VozMe es un gadget o pagina web que transforma el texto que quieres en voz, puedes elegir entre las voces de un otro o una mujer parecido al programa loqueando pero sin descargar ningún programa sera en linea

Un Ejemplo prueba :


Para colocar este Gadget de Vozme.com en tu blog sigue estos sencillos pasos:

1.) Ver a Diseño
2.) Agregar un Gadget
3.) HTML/Javascript y pega el siguiente código:













lunes, 30 de septiembre de 2013

Gadget Top Comentarios en tu blog blogger

Gadget de top comentarios en tu blog blogger, bueno les traego aora este truco para poder colocar top comentarios en tu blog.

Con este gadget de los top comentarios le dará mas vida al blog abriendo y causando debates lo que genera mas actividad en las entradas, también sabrás cuales son los usuarios mas activos en tu blog los usuarios que mas comentan 

Vista previa de como se vera el gadget en tu blog : 


El gadget viene optimizado para ver el avatar del usuario y el numero del top comentario esta hecho por en JavaSript y el codigo pertenece a MS-Potilas.

Para agregar este gadget tienes que entrar a Diseño, Añadir gadget, HTML/JavaScript y pegar el siguiente código:


<style type="text/css">
.top-commenter-line {margin: 3px 0;}
.top-commenter-line .profile-name-link {padding-left:0;}
.top-commenter-avatar {vertical-align:middle;}
</style>
<script type="text/javascript">
//
// Top Commentators gadget with avatars, by MS-potilas 2012.
// Gets a list of top commentators from all comments, or specified number of days in the past.
// See http://yabtb.blogspot.com/2012/05/top-commenters-gadget-with-avatars.html
//
// CONFIG:
var maxTopCommenters = 8; // how big a list of top commentators
var minComments = 1; // how many comments must top commentator have at least
var numDays = 0; // from how many days (ex. 30), or 0 from "all the time"
var excludeMe = true; // true: exclude my own comments
var excludeUsers = ["Anonymous", "someotherusertoexclude"]; // exclude these usernames
var maxUserNameLength = 42; // 0: don't cut, >4: cut usernames
//
var txtTopLine = '<b>[#].</b> [image] [user] ([count])';
var txtNoTopCommenters = 'No top commentators at this time.';
var txtAnonymous = ''; // empty, or Anonymous user name localized if you want to localize
//
var sizeAvatar = 28;
var cropAvatar = true;
//
var urlNoAvatar = "http://lh4.googleusercontent.com/-069mnq7DV_g/TvgRrBI_JaI/AAAAAAAAAic/Iot55vywnYw/s"+sizeAvatar+"/avatar_blue_m_96.png"; // http://www.blogger.com/img/avatar_blue_m_96.png resizeable
var urlAnoAvatar = 'http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=' + sizeAvatar;
var urlMyProfile = ''; // set if you have no profile gadget on page
var urlMyAvatar = ''; // can be empty (then it is fetched) or url to image
// config end
// for old IEs & IE modes:
if(!Array.indexOf) {
Array.prototype.indexOf=function(obj) {
for(var i=0;i<this.length;i++) if(this[i]==obj) return i;
return -1;
}}
function replaceTopCmtVars(text, item, position)
{
if(!item || !item.author) return text;
var author = item.author;
var authorUri = "";
if(author.uri && author.uri.$t != "")
authorUri = author.uri.$t;
var avaimg = urlAnoAvatar;
var bloggerprofile = "http://www.blogger.com/profile/";
if(author.gd$image && author.gd$image.src && authorUri.substr(0,bloggerprofile.length) == bloggerprofile)
avaimg = author.gd$image.src;
else {
var parseurl = document.createElement('a');
if(authorUri != "") {
parseurl.href = authorUri;
avaimg = 'http://www.google.com/s2/favicons?domain=' + parseurl.hostname;
}
}
if(urlMyProfile != "" && authorUri == urlMyProfile && urlMyAvatar != "")
avaimg = urlMyAvatar;
if(avaimg == "http://img2.blogblog.com/img/b16-rounded.gif" && urlNoAvatar != "")
avaimg = urlNoAvatar;
var newsize="s"+sizeAvatar;
avaimg = avaimg.replace(/\/s\d\d+-c\//, "/"+newsize+"-c/");
if(cropAvatar) newsize+="-c";
avaimg = avaimg.replace(/\/s\d\d+(-c){0,1}\//, "/"+newsize+"/");
var authorName = author.name.$t;
if(authorName == 'Anonymous' && txtAnonymous != '' && avaimg == urlAnoAvatar)
authorName = txtAnonymous;
var imgcode = '<img class="top-commenter-avatar" height="'+sizeAvatar+'" width="'+sizeAvatar+'" title="'+authorName+'" src="'+avaimg+'" />';
if(authorUri!="") imgcode = '<a href="'+authorUri+'">'+imgcode+'</a>';
if(maxUserNameLength > 3 && authorName.length > maxUserNameLength)
authorName = authorName.substr(0, maxUserNameLength-3) + "...";
var authorcode = authorName;
if(authorUri!="") authorcode = '<a class="profile-name-link" href="'+authorUri+'">'+authorcode+'</a>';
text = text.replace('[user]', authorcode);
text = text.replace('[image]', imgcode);
text = text.replace('[#]', position);
text = text.replace('[count]', item.count);
return text;
}
var topcommenters = {};
var ndxbase = 1;
function showTopCommenters(json) {
var one_day=1000*60*60*24;
var today = new Date();
if(urlMyProfile == "") {
var elements = document.getElementsByTagName("*");
var expr = /(^| )profile-link( |$)/;
for(var i=0 ; i<elements.length ; i++)
if(expr.test(elements[i].className)) {
urlMyProfile = elements[i].href;
break;
}
}
if(json && json.feed && json.feed.entry && json.feed.entry.length) for(var i = 0 ; i < json.feed.entry.length ; i++ ) {
var entry = json.feed.entry[i];
if(numDays > 0) {
var datePart = entry.published.$t.match(/\d+/g); // assume ISO 8601
var cmtDate = new Date(datePart[0],datePart[1]-1,datePart[2],datePart[3],datePart[4],datePart[5]);
//Calculate difference btw the two dates, and convert to days
var days = Math.ceil((today.getTime()-cmtDate.getTime())/(one_day));
if(days > numDays) break;
}
var authorUri = "";
if(entry.author[0].uri && entry.author[0].uri.$t != "")
authorUri = entry.author[0].uri.$t;
if(excludeMe && authorUri != "" && authorUri == urlMyProfile)
continue;
var authorName = entry.author[0].name.$t;
if(excludeUsers.indexOf(authorName) != -1)
continue;
var hash=entry.author[0].name.$t + "-" + authorUri;
if(topcommenters[hash])
topcommenters[hash].count++;
else {
var commenter = new Object();
commenter.author = entry.author[0];
commenter.count = 1;
topcommenters[hash] = commenter;
}
}
if(json && json.feed && json.feed.entry && json.feed.entry.length && json.feed.entry.length == 200) {
ndxbase += 200;
document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&start-index='+ndxbase+'&alt=json-in-script&callback=showTopCommenters"></'+'script>');
return;
}
// convert object to array of tuples
var tuplear = [];
for(var key in topcommenters) tuplear.push([key, topcommenters[key]]);
tuplear.sort(function(a, b) {
if(b[1].count-a[1].count)
return b[1].count-a[1].count;
return (a[1].author.name.$t.toLowerCase() < b[1].author.name.$t.toLowerCase()) ? -1 : 1;
});
// list top topcommenters:
var realcount = 0;
for(var i = 0; i < maxTopCommenters && i < tuplear.length ; i++) {
var item = tuplear[i][1];
if(item.count < minComments)
break;
document.write('<di'+'v class="top-commenter-line">');
document.write(replaceTopCmtVars(txtTopLine, item, realcount+1));
document.write('</d'+'iv>');
realcount++;
}
if(!realcount)
document.write(txtNoTopCommenters);
}
document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&alt=json-in-script&callback=showTopCommenters"></'+'script>');
</script>
Para modificar cuantos numeros de top comentarios quieres que aparezcan solo tienes que buscar en el codigo var maxTopCommenters = 8; y cambia el 8 por el numero que quieras.


Para modificar el numero del tamaño del avatar buscar en el codigo var sizeAvatar = 28; y cambia el numero 28 por el numero por el numero de tamañan que desees. NO OLVIDES DEJAR TU COMENTARIO

Significados de las zonas resaltadas del código
LO QUE ESTÁ EN ROJO ->  Para excluir los comentarios de un usuario en concreto. Debes poner su nombre de usuario de Blogger. Recuerda que el nombre debe ir entre los corchetes “[]” y acompañados por dos comillas “” de lado a lado.
LO QUE ESTÁ EN AZUL -> Sirve para modificar el número de usuarios que se muestran en el gadget o dicho de otra manera, para poner el ranking más largo o más corto.





Caja Popup de Bienvenida para tu blogger


Hola a todos en esta ocacion les vengo a traer este cuadro de bienvenido para su sitio web o blog blogger, quizás ya hayan visto esta caja de bienvenida en otros sitios web y les aya gustado este cuadro es muy efectivo para atraer seguidores en tus redes sociales espero que les guste.

Este cajón de popup , contiene un diseño emergente usando jquery css. para cualquier pagina web para su sitio , el truco es que el o ella se unan de una manera rápido y fácil es un truco sencillo y fácil.

Pueden ver un demo del gadgets en este blog, haciendo click aqui abajo:

Ver Demo


Bueno pongamos en marcha el gadget en nuestro blog :

1. Ir a Diseño >> Añardir un gadget >> Añadir un gadget HTML / JavaScript  después añadir este código:



<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<style>
#fanback {
display:none;
background:rgba(0,0,0,0.8);
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
z-index:99999;
}
#fan-exit {
width:100%;
height:100%;
}
#JasperRoberts {
background:white;
width:420px;
height:270px;
position:absolute;
top:58%;
left:63%;
margin:-220px 0 0 -375px;
-webkit-box-shadow: inset 0 0 50px 0 #939393;
-moz-box-shadow: inset 0 0 50px 0 #939393;
box-shadow: inset 0 0 50px 0 #939393;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin: -220px 0 0 -375px;
}
#TheBlogWidgets {
float:right;
cursor:pointer;
background:url(http://3.bp.blogspot.com/-NRmqfyLwBHY/T4nwHOrPSzI/AAAAAAAAAdQ/8b9O7O1q3c8/s1600/TheBlogWidgets.png) repeat;
height:15px;
padding:20px;
position:relative;
padding-right:40px;
margin-top:-20px;
margin-right:-22px;
}
.remove-borda {
height:1px;
width:366px;
margin:0 auto;
background:#F3F3F3;
margin-top:16px;
position:relative;
margin-left:20px;
}
#linkit,#linkit a.visited,#linkit a,#linkit a:hover {
color:#80808B;
font-size:10px;
margin: 0 auto 5px auto;
float:center;
}
</style>
<script type='text/javascript'>
//<![CDATA[
jQuery.cookie = function (key, value, options) {
// key and at least value given, set cookie...
if (arguments.length > 1 & String(value) !== "[object Object]") {
options = jQuery.extend({}, options);
if (value === null || value === undefined) {
options.expires = -1;
}
if (typeof options.expires === 'number') {
var days = options.expires, t = options.expires = new Date();
t.setDate(t.getDate() + days);
}
value = String(value);
return (document.cookie = [
encodeURIComponent(key), '=',
options.raw ? value : encodeURIComponent(value),
options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : ''
].join(''));
}
// key and possibly options given, get cookie...
options = value || {};
var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
};
//]]>
</script>
<script type='text/javascript'>
jQuery(document).ready(function($){
if($.cookie('popup_user_login') != 'yes'){
$('#fanback').delay(20000).fadeIn('medium');
$('#TheBlogWidgets, #fan-exit').click(function(){
$('#fanback').stop().fadeOut('medium');
});
}
$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });
});
</script>
<div id='fanback'>
<div id='fan-exit'>
</div>
<div id='JasperRoberts'>
<div id='TheBlogWidgets'>
</div>
<div class='remove-borda'>
</div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?
href=https://www.facebook.com/pages/Te-extra%C3%B1o/224640427727351&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'
style='border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;'></iframe><center>
<span style="color:#a8a8a8;font-size:8px;" id="linkit">Powered by <a rel="nofollow" style="color:#a8a8a8;font-size:8px;" href="http://jasperroberts.com">Jasper Roberts Consulting</a> - <a style="color:#a8a8a8;font-size:8px;" href="

">Widget</a></span></center>
</div>
</div>


2. Ahora solo reemplazamos este link:  "https://www.facebook.com/pages/Te-extra%C3%B1o/224640427727351"  por el url de tu pagina facebook


Si quieres puedes cambiar el mensajes de bienvenido del cuadro de visitante en tu blog cambiando solo este mensaje  "Bienvenidos a mi Blog" por el que desees.

Tambien el tiempo de cierre de la caja de me gusta facebook  donde dice : timeout : 30

Listo eso fue todo no olvides comentar y seguirnos en nuestras redes sociales.







domingo, 29 de septiembre de 2013

Como agregar Gadgets al blog


Si recién eres nuevo en el mundo de los bloggers y quieres aprender como colocar los accesorios a tu blog en este pequeño tutorial te explicare muy fácil y breve espero que te sea de gran ayuda

Bueno aqui te mostrare paso a paso como agregar los accesorios para tu blog. sin mas nada que decir les dejo los paso a seguir para poner aprender agregar gadgets a tu blog blogger espero que le ayude mucho.


1.Primero Haces click en diseño
Has clic en las imágen para ampliarla
Has clic en las imagen para ampliarla


2. Click en añadir gadget 
Has clic en las imagen para ampliarla


3. Click añadir en HTML / JAVASript

Has clic en las imagen para ampliarla

4.Pegar el codigo
Has clic en las imagen para ampliarla






Espero que les aya ayudado el pequeño tutorial no olviden dejar su comentario, espero que vuelvas pronto recomienda el blog con tus amigos




 

©2011 Trucos Gadgets Para Blogger | FuuTheme diseñado por Fuutec | Ir arriba ↑