tag:blogger.com,1999:blog-89907716251779051422024-02-21T12:30:10.949+01:00Diseña y crea tu blog en bloggerAlfonso Canterohttp://www.blogger.com/profile/04957211769182442859noreply@blogger.comBlogger37125tag:blogger.com,1999:blog-8990771625177905142.post-49403459993308397322017-01-24T12:38:00.000+01:002017-01-24T12:38:10.013+01:00Cómo iniciar sesión en Windows 10 sin tener que ingresar una contraseña.Una duda que surge muy frecuentemente entre los usuarios de Windows es <strong>cómo poder iniciar sesión en el sistema sin tener que ingresar una contraseña</strong>,
es decir, encendiendo el equipo y que este vaya directamente al
escritorio, sin necesidad de mayor intervención por parte del usuario.<br />
Microsoft no entrega una vía simple para conseguir esto, pero aun así
es posible lograrlo accediendo a opciones ocultas del sistema. Tan solo
debemos presionar el botón Inicio, escribir el comando <strong>netplwiz</strong> y presionar Enter.<br />
<br />
Luego aparecerá una ventana como esta, en la cual hay que desmarcar la casilla "<em>Los usuarios deben escribir su nombre y contraseña para usar el equipo</em>", y luego presionar <strong>Aceptar</strong>.<br />
<br />
<br />
Finalmente solo queda reiniciar el equipo, y listo. <strong>Windows 10 ya no nos pedirá una contraseña para iniciar sesión al encender el PC.</strong> <br />
Sin embargo, si nuestra cuenta aun tiene contraseña, Windows la seguirá solicitando luego de que el equipo entre en estado de <strong>suspensión</strong>. Para evitar esto último hay que ir a <em>Configuración > Cuentas > Opciones de inicio de sesión</em> y marcar la opción <strong>Nunca</strong> en la sección "Requerir inicio de sesión".<br />
<br />
Y aun así, si nuestra cuenta de Windows está vinculada a una cuenta Microsoft <strong>no se nos permitirá eliminar por completo el uso de contraseña</strong>
(y esa contraseña será siempre la misma que la de cuenta Microsoft), y
por ende, esta se solicitará cada vez que bloqueemos el equipo usando
las teclas WIN + L. <br />
Para poder usar una cuenta <em>totalmente libre</em> de contraseñas, debemos <strong>convertirla en una cuenta local</strong>, lo cual se puede hacer yendo a <em>Configuración > Cuentas > Tu cuenta > Iniciar sesión con una cuenta local en su lugar</em>.<br />
<br />
<br />
Una vez completada la transformación hacia cuenta local, hay que regresar a <em>Configuración > Cuentas > Opciones de inicio de sesión</em>,
hacer clic en el botón "Cambiar", ingresar nuestra contraseña actual, y
cuando se nos pregunte por la nueva contraseña hay que <strong>dejar todos los espacios en blanco</strong>.<br />
Habiendo hecho esto último nos aseguraremos de que Windows no nos
pida jamás una contraseña para iniciar sesión, ni siquiera luego de
bloquear el equipo.<br />
No está de más decir que al no requerir constraseña <strong>corremos el riesgo de que cualquier persona pueda usar nuestro equipo</strong>
y acceder a nuestros datos, incluso para fines maliciosos, por lo que
hay que pensarlo dos veces antes de desactivar el uso de contraseñas
para iniciar sesión.<br />
<br />
Información tomada de:
https://www.xatakawindows.com/windows/como-iniciar-sesion-en-windows-10-sin-tener-que-ingresar-una-contrasenaAlfonso Canterohttp://www.blogger.com/profile/04957211769182442859noreply@blogger.com2tag:blogger.com,1999:blog-8990771625177905142.post-68191073692265098352016-06-21T13:17:00.004+02:002016-06-21T13:23:16.989+02:00Poner posts o artículos más recientes con miniatura y efecto de acercamiento en blogger<div id="carousel">
<span style="font-family: "verdana" , sans-serif;"> Aquí
estamos actu<span style="font-family: "verdana" , sans-serif;">a</span>lizando
un post que ha muerto por culpa de la caída de un script lo que antes
teníamos era un slider que ahora no funciona, pero, este nuevo m<span style="color: #0000ee;"><span style="font-family: "verdana" , sans-serif;">ue</span></span>streo de entradas o posts recientes en blogger con miniatura será más genial. </span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLCl2UGSXBhJ9jD-nk4PBR6Gyzn5HDfi5mdFTd3JLT465Jw29a18533iIgtveuLxAsc2fy2zvhEmBtR00eV4LUO5de35Ecpq-uBvTuAfhPgHVqhWtejc_1LDy65RmfZ1YlpEkqDmKkJGE/s1600/dd.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="177" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLCl2UGSXBhJ9jD-nk4PBR6Gyzn5HDfi5mdFTd3JLT465Jw29a18533iIgtveuLxAsc2fy2zvhEmBtR00eV4LUO5de35Ecpq-uBvTuAfhPgHVqhWtejc_1LDy65RmfZ1YlpEkqDmKkJGE/s400/dd.png" width="400" /></a></div>
<span style="font-family: "verdana" , sans-serif;"> ....................................<span style="font-family: "verdana" , sans-serif;"> </span></span><br />
<br />
<b><i><span style="font-family: "verdana" , sans-serif;">Así que ¿Te gustó? veamos como se pone:</span></i></b><br />
<b><i><span style="font-family: "verdana" , sans-serif;"><br /></span></i></b>
<span style="font-family: "verdana" , sans-serif;"><span style="font-family: "trebuchet ms" , sans-serif;"><i><b>1.</b></i></span> Lo primero será ir a nuestro escritorio blogger allí vamos a <span style="font-family: "trebuchet ms" , sans-serif;"><b><i>Diseño > añadir un gadget > HTML/Javascript</i></b></span>.</span><br />
<span style="font-family: "verdana" , sans-serif;"><br /></span>
<span style="font-family: "verdana" , sans-serif;"><span style="font-family: "trebuchet ms" , sans-serif;"><i><b>2.</b></i></span> Luego allí copiamos el siguiente código:</span><br />
<blockquote class="tr_bq">
<span style="font-family: "trebuchet ms" , sans-serif;"><script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script><br /><style type="text/css"><br />#post-gallery {width:100%; margin:0px auto;font:normal 11px Arial,Sans-Serif;color:##000000;padding:8px;}<br />#post-gallery
.rp-item {float:left;display:inline; position:relative; margin:2px;
padding:0px 0px; background:
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1YqRyopKS57lOL66YOXaXvRne6XztmJroBPMMlfXinG0GwkpMCob6YvSGyPWfx54MEkih5OTpJrdADCkat8kUnvSiPSXaONq_2n9QAUOXT08otEuM7ybEAeXemt099TdW1G5TOmHsLpVs/s1600/LOAD+(66).gif')
no-repeat 50% 50%; width:79px; height:79px;}<br />#post-gallery
.rp-item img { width:69px; height:69px; border:none !important;
margin:0px 0px !important; padding:0px 0px !important;
background:transparent !important; display:none;}<br />#post-gallery
.rp-item img:hover{-moz-transform: scale(1.2)
rotate(-350deg);-webkit-transform: scale(1.2)
rotate(-350deg);-o-transform: scale(1.2) rotate(-350deg);-ms-transform:
scale(1.2) rotate(-350deg);transform: scale(1.2)
rotate(-350deg);-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0
20px rgba(255,255,255,1);-moz-box-shadow: 0 0 20px rgba(255,0,0,.4),
inset 0 0 20px rgba(255,255,255,1);box-shadow: 0 0 20px
rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);}<br />#post-gallery
.rp-item .rp-child { position:relative; top:10%!important;
left:10%!important; z-index:1000; width:200px;
background-color:white; border-bottom:5px solid #1BA1E2;
-webkit-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7); -moz-box-shadow:5px
5px 10px rgba(0, 0, 0, 0.7); box-shadow:5px 5px 10px rgba(0, 0, 0,
0.7); padding:10px 15px; overflow:hidden; word-wrap:break-word;
display:none; opacity: 0.9;}<br />#post-gallery .rp-item .rp-child h4 { font-size:12px; margin:0px 0px 5px; color:#1BA1E2;}<br />#post-gallery .rp-item:hover .hidden {display:block;}</style><br /><script type="text/javascript"><br />var rpTitle = "<span style="color: lime;">Últimos artículos</span>", // Titulo del gadget <br /> numposts = <span style="color: lime;">14</span>, // Numero de posts a mostrar<br /> numchar = <span style="color: lime;">200</span>, // Numero de caracteres a mostrar<br /> rcFadeSpeed = <span style="color: lime;">600</span>, // Velocidad<br /> pBlank = "<span style="color: red;">http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif</span>", // Defecto imagen si el post no tiene<br /> blogURL = "<span style="color: blue;">http://tublogaqui.blogspot.com/</span>"; // URL de tu blog<br /></script><br /><script src="<span style="color: orange;">http://files.allbloggertricks.com/Scripts/abt-recent-posts.js</span>" type="text/javascript"></script></span></blockquote>
------------------------------------------------------------------------------------------------------- <br />
<div style="text-align: justify;">
<span style="font-family: "verdana" , sans-serif;">Ahora bien vamos a modificar por la dirección de nuestro blog lo que está en color <span style="color: blue;"><b><i>azul</i></b></span>, con eso ya podríamos guardar todo y salir sin tanto complique sin embargo dejamos aclaración de lo demás que está resaltado.</span></div>
<div style="text-align: justify;">
<span style="font-family: "verdana" , sans-serif;"><br /></span></div>
<div style="text-align: justify;">
<span style="font-family: "verdana" , sans-serif;">- En color <b><span style="color: orange;"><i>naranja</i></span></b> está el <span style="font-family: "trebuchet ms" , sans-serif;"><b><i>SCRIPT</i></b></span>
que lo controla todo, está alojado en un sitio de terceros este se
satura más a medida que cada vez alguien implemente este mismo código
por ende puedes descargarlo y alojarlo por tu cuenta en donde quieras. <a href="https://drive.google.com/open?id=0B8xtMFpL-ixBa1JMTGg1QVczUGc" target="_blank"><span style="font-family: "trebuchet ms" , sans-serif;"><b><i>click aquí para descargar</i></b></span></a>.</span></div>
<div style="text-align: justify;">
<span style="font-family: "verdana" , sans-serif;"><br /></span></div>
<div style="text-align: justify;">
<span style="font-family: "verdana" , sans-serif;">- En color <span style="color: red;"><b><i>rojo</i></b></span>
tenemos el link de la URL de la imagen que va por defecto cuando un
post o entreda reciente no lleva imagen, puedes cambiarla por una de tu
gusto. </span></div>
<div style="text-align: justify;">
<span style="font-family: "verdana" , sans-serif;"><br /></span></div>
<div style="text-align: justify;">
<span style="font-family: "verdana" , sans-serif;">- Lo que tenemos en <span style="color: lime;"><b><i>verde claro</i></b></span>, especifica datos como velocidad, # de carácteres etc, modificando lo que está en verde lo podrás configurar a tu gusto.</span></div>
<div style="text-align: justify;">
<span style="font-family: "verdana" , sans-serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd5uK3Ua8fsRU2qtB6p98eyDRmWjb9aGU-CVWOhriu8z7iJ6qbt0vLc6BLtjRfVR_Yq6kJWhY4jxUfqC-9uR7HaSeI7Ra0J4MTJ4Y6IxvDqKlLz4Mg-_jxV81B3fZ7sD2AKJvhM9NmnDE/s1600/dd.png" style="display: inline;" /></div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
<span style="font-family: "verdana" , sans-serif;">Y listo hasta aquí todo está hecho, como ven muy fácil de entender y todo comentado para modificar.</span></div>
<div style="text-align: justify;">
<span style="font-family: "verdana" , sans-serif;"><br /></span></div>
<div style="text-align: justify;">
<span style="font-family: "verdana" , sans-serif;"> Información tomada de: <a href="http://www.blogginred.com/2014/01/agregar-slider-automatico-en-blogger_23.html" target="_blank">http://www.blogginred.com/2014/01/agregar-slider-automatico-en-blogger_23.html</a></span></div>
</div>
Alfonso Canterohttp://www.blogger.com/profile/04957211769182442859noreply@blogger.com0tag:blogger.com,1999:blog-8990771625177905142.post-76864419433587276792016-05-02T16:00:00.001+02:002016-05-02T16:00:08.860+02:00Destacar texto en una entrada usando coloresSi lo que pretendemos es destacar un trozo de texto que nos interese poniendole color de fondo, es bastante sencillo.<br />
Hemos de añadir <span style="background-color:orange"> delante de
la palabra o frase que deseamos resaltar. En el ejemplo yo he puesto el
color naranja (orange) pero podemos poner el que necesitemos en ese
momento o nos guste más. Para cerrar la frase a resaltar la terminamos
con </span>. Podemos hacerlo incluso en el título de la entrada.<br />
<br />
<span style="background-color: orange;">La frase, frases o palabras a resaltar han de ir entre <span style="background-color=orange"> y </span></span><br />
<br />
Si
preferimos resaltar un trozo de texto para que nos quede con efecto de
"cajita" usaremos este otro código, ponéis el texto a resaltar entre
<div style="margin:0px
auto;width:250px;text-align:left;padding:10px;background-color:orange;border:1px
solid black;"> y </div>, se vería así:<br />
<br />
<div style="background-color: violet; border: 1px solid black; margin: 0px auto; padding: 10px; text-align: left; width: 250px;">
ANTES DE HACER NINGUNA PRUEBA CON LOS CÓDIGOS, RECUERDA GUARDAR SIEMPRE TU PLANTILLA, NUNCA SE SABE SI ALGO SALDRÁ MAL.</div>
<br />
En el código cambiamos el grosor del borde, color del borde, distancia, color de fondo, del texto...a nuestro gusto.<br />
<br />
<span style="background-color: cyan;">Fácil</span> <span style="background-color: pink;">¿no os parece?</span><br />
Otra ópcion sería emplear siempre el mismo color, para conseguirlo empleamos CSS:<br />
Añadimos estas líneas de código en el CSS de nuestra plantilla:<br />
span.highlight<br />
{<br />
background-color:#CC0000<br />
}<br />
Y
cada vez que queramos resaltar un texto con un fondo de color, lo
ponemos entre <span class="highlight">Texto a
resaltar</span><br />
Si no queremos el fondo, sino solo cambiar el color del texto, en el añadido del CSS, eliminamos background-.<br />
Por supuesto, en #CC0000, sustituimos por el código de color que nos guste más.<br />
Para
tenerlo a mano a la hora de editar nuestra entrada, podemos pegarlo en
plantilla-opciones-formato-caja de plantilla de entrada.Alfonso Canterohttp://www.blogger.com/profile/04957211769182442859noreply@blogger.com0tag:blogger.com,1999:blog-8990771625177905142.post-42689437197088015672016-04-17T15:03:00.000+02:002016-04-17T21:17:50.823+02:00Como instalar la nueva caja de paginas de facebook en tu blog<span style="font-size: small;"><span style="font-family: "arial" , "helvetica" , sans-serif;">Una de las formas de promover una fanpage de <b>Facebook</b> a través de un blog es usando el popular <b>gadget de la fanbox</b>,
pero desafortunadamente la red social ha anunciado que el sistema ya no
seguirá funcionando, aunque si podrás verlo aun en tu blog, al tratar
de agregarlo a un nuevo sitio o en su lugar querer usar el <b>código HTML 5</b>, este no estará disponible.</span></span>
<span style="font-size: small;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<span style="font-size: small;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAUsmizouZncMX86hzBi90I-fIDYLaf-IS-b04NTZRXz66Pq4u7I7l7mEkdYAsV7dbezSM1oI8St69484Vitx21_t69isXNBBGuK_-g40g9DIPVmktXhwhaMZfh0Yta8Ivop6dVJ46bAk0/s1600/nueva+fanpage.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="183" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAUsmizouZncMX86hzBi90I-fIDYLaf-IS-b04NTZRXz66Pq4u7I7l7mEkdYAsV7dbezSM1oI8St69484Vitx21_t69isXNBBGuK_-g40g9DIPVmktXhwhaMZfh0Yta8Ivop6dVJ46bAk0/s1600/nueva+fanpage.jpg" width="400" /></a></span></div>
<span style="font-size: small;">
<br />
<span style="font-family: "arial" , "helvetica" , sans-serif;">De hecho, la popular <b>fanbox para Facebook</b>
ya no se encuentra disponible pero la red social ha liberado un
sustituto, en mi opinión con look más profesional e interesante.</span><br />
<br />
</span><br />
<div style="text-align: center;">
<span style="font-size: small;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><b>Instalación del nuevo gadget de Page</b></span></span></div>
<span style="font-size: small;">
<br />
<span style="font-family: "arial" , "helvetica" , sans-serif;">El proceso de instalación del nuevo plugin o <b>fanbox de Facebook </b>para blogs o sitios webs es muy fácil al anterior. Primero debemos ir a la web oficial del widget: <a href="https://developers.facebook.com/docs/plugins/page-plugin" target="_blank">https://developers.facebook.com/docs/plugins/page-plugin</a></span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "arial" , "helvetica" , sans-serif;">Ahí
veremos una página de ejemplo, por lo que tendremos que llenar los
siguientes datos y a medida que lo hagamos podremos ver como se verá la
nueva caja en nuestro blog:</span><br />
<br />
</span><br />
<div class="separator" style="clear: both; text-align: center;">
<span style="font-size: small;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-PbHhyAqhrSy7T4yIgc-K1bckc0LuYFzdsDYIEG88Cx92Qr256it9oZbJM4Pr908RNrkctUMA6hbLWKYvcD2sU-JmB5zOEDeK7z4St5UieMid3sLEIXYZA6ZPBGlrRNw_-tQY6CkaH4ev/s1600/01+llenar+datos.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="167" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-PbHhyAqhrSy7T4yIgc-K1bckc0LuYFzdsDYIEG88Cx92Qr256it9oZbJM4Pr908RNrkctUMA6hbLWKYvcD2sU-JmB5zOEDeK7z4St5UieMid3sLEIXYZA6ZPBGlrRNw_-tQY6CkaH4ev/s1600/01+llenar+datos.png" width="400" /></a></span></div>
<span style="font-size: small;">
<br />
<br />
<span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="color: red;"><b>Facebook page url</b></span>: ruta completa de tu página de Facebook.</span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="color: red;"><b>Width</b></span>: ancho de la nueva fanbox. El mínimo es 280px y un máximo de 500. </span><br />
<br />
<span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="color: red;"><b>Height</b></span>: alto de la fanbox. El mínimo es de 130px.</span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "arial" , "helvetica" , sans-serif;">Además, podrá ver 3 opciones que puedes marcar si quieres <b>mostrar u ocultar la portada de tu Fanpage</b> (esta opción es nueva), mostrar el rostro de los perfiles de tus seguidores y mostrar los post publicados en tu página.</span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "arial" , "helvetica" , sans-serif;">Una vez que tengas todo listo, selecciona el botón “<b>get code</b>” y podrás ver dos códigos diferentes. El primero, como se puede ver en la imagen va justamente después de abrir la etiqueta <i><body></i>.</span><br />
<br />
</span><br />
<div class="separator" style="clear: both; text-align: center;">
<span style="font-size: small;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWalsDgtrY1gC9eyh-BVTI4kkgxFtBsP02n5CWNSjRtMT6xYwALoNpTJXZqi-cGvRz9BtpGKGGz85GaSwTrVT9l7f_Cu10ks3887JS_BAoxlBaFqUCrwiKiPdisSj-cFD8fVeWVa2OnxF3/s1600/codigo.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="259" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWalsDgtrY1gC9eyh-BVTI4kkgxFtBsP02n5CWNSjRtMT6xYwALoNpTJXZqi-cGvRz9BtpGKGGz85GaSwTrVT9l7f_Cu10ks3887JS_BAoxlBaFqUCrwiKiPdisSj-cFD8fVeWVa2OnxF3/s1600/codigo.png" width="400" /></a></span></div>
<span style="font-size: small;">
<br />
<br />
<span style="font-family: "arial" , "helvetica" , sans-serif;">El
segundo código debes pegarlo donde quieres que aparezca la nueva caja
de Facebook en tu blog. Recuerda que dentro del primero código puedes
cambiar el idioma en esta línea:</span><br />
</span><br />
<blockquote class="tr_bq">
<span style="font-size: small;"><span style="color: #cc0000;">js.src = "//connect.facebook.net/es_ES/sdk.js#xfbml=1&version=v2.3";</span></span></blockquote>
<span style="font-size: small;">Guardar cambios en tu plantilla y listo.</span><br />
<br />
Información tomada de: <a href="http://www.gadgetsblogger.com/2015/04/nueva-fanbox-blog-facebook.html" target="_blank">http://www.gadgetsblogger.com/2015/04/nueva-fanbox-blog-facebook.html</a><br />
<br />
OTRA SOLUCIÓN MUY EFECTIVA: <br />
<div class="separator" style="clear: both; text-align: left;">
Vale ahora bien la razón principal por la que he escrito este post. Os
saldrán dos códigos. El primero para insertar en la sección <body>
de tu plantilla y el segundo para ponerlo en el lugar donde queremos
que aparezca nuestro fanbox. Por alguna razón hay mucha gente que al
introducir el primer código en la plantilla le da error y hay se acabo
su "sueño" de tener un fanbox. Yo soy uno de ellos y leyendo muchos
tutoriales he descubierto que no soy el único.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<div class="separator" style="clear: both; text-align: left;">
<span style="background-color: #3d85c6;"><span style="color: white;">LA SOLUCIÓN→</span></span><b>Tan
sencillo como copiar los dos códigos en una gadget html y añadirlo en
nuestro sidebar (En una columna lateral dela página)</b> . Ya se la forma correcta sería segir los pasos que te
dice facebook y añadirlo en la plantilla, pero si no va, hay que
buscarse alternativas viables. </div>
<div class="separator" style="clear: both; text-align: left;">
Este mismo problema de error en el código puede ocurrir si añadimos los
botones de me gusta, compartir de facebook. Por eso algunos tutoriales
antiguos para añadir plugins ya no son efectivos. Sin embargo desde el
blog Compartidisimo nos solucionan este problema con<a href="http://www.compartidisimo.com/2015/06/boton-me-gusta.html" target="_blank"> este post.</a></div>
<div class="separator" style="clear: both; text-align: left;">
--------------------------------</div>
<div class="separator" style="clear: both; text-align: left;">
Aquí puedes encontrar otro tutorial muy bueno : <a href="http://www.compartidisimo.com/2015/05/como-poner-la-nueva-caja-de-me-gusta-de.html" target="_blank">http://www.compartidisimo.com/2015/05/como-poner-la-nueva-caja-de-me-gusta-de.html</a></div>
Alfonso Canterohttp://www.blogger.com/profile/04957211769182442859noreply@blogger.com2tag:blogger.com,1999:blog-8990771625177905142.post-31830083774656353882016-03-27T15:50:00.000+02:002017-03-12T20:39:35.766+01:00Tus Opciones para Poner Botones de Redes Sociales en las Entradas <div class="hr">
<span class="tria"></span></div>
<div class="post-body entry-content" id="post-body-1284374220801267086" itemprop="articleBody">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-IvMrSRGFUFQ/VUvCCNvCyRI/AAAAAAAASW0/ArClLAyLWJ4/s1600/diagrama-de-flujo.png"><img alt="Diagrama de flujo" class="noborde" height="268" src="https://3.bp.blogspot.com/-IvMrSRGFUFQ/VUvCCNvCyRI/AAAAAAAASW0/ArClLAyLWJ4/s400/diagrama-de-flujo.png" title="" width="400" /></a></div>
<br />
Antes de escribir unas guías para <b>poner botones de redes sociales tanto en la versión de escritorio como la móvil</b>,
quería escribir una entrada que sirviera como introducción, sobre el
muy gastado pero necesario tema de los botones, con el fin de que
cualquier persona, sobre todo los que recién comienzan, sepan con
certeza el panorama actual de los botones para compartir de Blogger y
puedan decidir cuál es la opción más conveniente para su blog.<br />
<br />
<a name='more'></a><br />
<br />
<h2>
<span style="font-weight: normal;">Echando un vistazo al panorama actual de los botones para compartir nativos de Blogger</span></h2>
<br />
<b>Blogger ya nos facilita botones</b> para que podamos agregar al blog
fácilmente. Tal vez no sean los más modernos o vistosos, pero es lo que
hay y cumplen el propósito.<br />
<br />
Para agregarlos, simplemente haces click en la pestaña: Diseño, luego,
haces click en "Editar", en la sección que dice: "Entradas del blog".
Después, marcas la casilla que dice: "<b>Mostrar botones para compartir</b>", tal y como se muestra en la imagen de abajo, y luego guardas el cambio haciendo click en el botón que dice: "Guardar".<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img alt="Opcion de blogger para mostrar botones de redes sociales" height="35" src="https://2.bp.blogspot.com/-HcZWIE2udXA/VQiMFoW2VbI/AAAAAAAARpw/_PQB5AMZaq0/s1600/botones-blogger.png" title="" width="320" /></div>
<br />
Hecho lo anterior, los botones se verán así en la <b>versión Web</b>:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img alt="Botones para compartir de Blogger " src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIxzYk3bTSPnMGVVKr6LCraz9gsM97C7hIFv_PKrrfwRy9qSk2LsVHX2wnZL88itkJiTS0r6SjgMAowNIhyphenhyphenTjFC5b8NQ2o9PA3ZCMdT40NlOnKKQ392UU3fWks3BkqhJFf1Q8jt93zoHA/s1600/botones-blogger-nativos-web.png" title="" /></div>
<br />
Y así lucirán en la <b>versión móvil</b>:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img alt="Botones para compartir de Blogger en la version movil" src="https://4.bp.blogspot.com/-8UoKTbAiyTk/VQiPgGqMfhI/AAAAAAAARqE/ANxZidCfCHo/s1600/botones-blogger-nativos-movil.png" title="" /></div>
<br />
Toma en cuenta que el color de fondo y que en las imágenes anteriores se
ve gris puede ser cualquier otro, ya que ese color de fondo lo
personalizas tú en tu plantilla, si usas una plantilla nativa de
Blogger.<br />
<br />
En la <b>versión de escritorio</b>, aparecen los botones de: <b>Gmail</b>, para enviar una entrada a una dirección de correo electrónico, el de <b>Blogger</b>, para crear un enlace al blog desde una entrada, el de <b>Twitter</b>, el de <b>Facebook</b> y de <b>Pinterest</b> para compartir la entrada respectivamente, y finalmente el botón +1 de <b>Google+</b>, para hacer +1 y/o compartirlo en Google plus.<br />
<br />
Las cosas cambian dramáticamente en en el caso de la <b>versión móvil de Blogger. </b>Ahí aparece un botón que dice:"<b>Compartir</b>",
y al hacer click sobre éste, aparecen las opciones con los botones para
compartir en : Google+, por correo electrónico, en Facebook y en
Twitter. <b>No hay disponible un botón para Pinterest</b>, que <a href="http://www.compartidisimo.com/2014/02/blogger-agrega-boton-de-pinterest-y.html" target="_blank">fue agregado el año pasado</a> solo a la versión Web (nos lo siguen debiendo).<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img alt="Opciones con los botones de redes sociales en la version movil de Blogger" class="gris" src="https://1.bp.blogspot.com/-ayW-yq2BJJI/VQiTKrTWgNI/AAAAAAAARqM/SJW7X8g9MSA/s1600/opciones-compartir-post.png" title="" /></div>
<br />
A un lado del botón: "<b>compartir</b>", figura el botón +1, que solo sirve para hacer más uno a la entrada. No para compartir la entrada.<br />
<br />
Como puedes ver, los botones <b>lucen diferente </b>en ambas versiones.<br />
<br />
Yo no sé que pienses tú pero el hecho de que el botón +1 aparezca a un lado del que dice: "compartir", <b>a simple vista puede creerse que solo ése botón está disponible</b>, me refiero al botón +1. Ya me lo han comentado antes un par de personas.<br />
<br />
Ésto pudiera parecer muy subjetivo, pero el hecho de que alguien lo haya
pensado, hace que surja la duda e inquietud de que otras personas
puedan pensar lo mismo, y creo que merece la pena prestar atención a
ésto.<br />
<br />
Una vez sabiendo lo que Blogger facilita y cómo funciona, habrá que
decidir si ésta opción es la más conveniente para ti, y por ende la
usarás, o si vas a usar otra opción que disponga los botones que<b> </b>a ti te conviene tener.<br />
<br />
<br />
<span style="font-size: large; font-weight: normal;">Las opciones disponibles</span><br />
<span style="font-size: large; font-weight: normal;"><br />
</span> No tienes que resignarte a usar los botones para <b>compartir de Blogger</b>, si no te gustan o quieres algo diferente, o más botones de redes sociales.<br />
<br />
Hay varias opciones por las que puedes optar, y las hay para casi todos
los gustos y necesidades. Veamos algunas ventajas, limitaciones, entre
otros aspectos importantes.<br />
<br />
<h2>
<span style="font-weight: normal;"><span style="font-size: medium;">1. Servicios de terceros que ofrecen botones</span></span></h2>
Existen en la red varios sitios que ofrecen botones de redes sociales
para que puedas poner en el blog. Algunos de los más importantes debido
en gran parte a su <b>antigüedad</b> en la red, y a la <b>popularidad</b> que gozan son:<br />
<br />
<ul>
<li><b><a href="http://www.addthis.com/" target="_blank">AddThis</a></b>. <b>AddThis</b> en un servicio que ofrece <b>botones de redes sociales</b> y otros elementos destinados a la promoción de contenidos.<br />
<br />
Para <b>empezar</b> a usar sus complementos tienes que registrarte o
acceder por medio de tu cuenta de Google+, Twitter o Facebook, y una vez
que lo hagas tendrás acceso a todos sus complementos gratuitos, entre
ellos los botones para compartir.<br />
<br />
A continuación puedes ver dos de sus recursos gratuitos, el primero se
trata de una barra flotante y enseguida unos botones sin el uso de
JavaScript.<br />
<br />
<img alt="Complementos gratuitos de AddThis" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSIrWBbD1lvKrfRqGkCFO9gEyzbMk0viWv0fRl5XM5hwGuWNwNhuPTgwNzRB6qUPSkJjN090VcI_zoSpfbeulQoFkVVwy6AAxTgQISTLuQZNRMvERY75-ww4xUObg5BYRQE7AbxF05uLA/s1600/AddThis.png" title="" /><br />
<br />
<br />
Como ellos<b> facilitan el código</b>, tú solo tienes que preocuparte por agregarlo al blog, y estos estarán funcionando sin problemas.<br />
<br />
Puedes configurar los botones que quieres poner, y<b> no tienes que dedicar tiempo a crear unos botones</b>, lo cual te ahorrará tiempo y trabajo.<br />
<br />
También puedes obtener una cuenta <b>premium</b> que ofrece soporte técnico inmediato y múltiples herramientas para personalizar sus complementos.<br />
<br />
</li>
<li><a href="https://shareaholic.com/publishers/" target="_blank"><b>Shareaholic</b></a> es otro servicio que permite agregar botones de redes sociales a las entradas fácilmente.<br />
Para agregarlos al blog, hay que abrir una cuenta o bien acceder usando tu cuenta de Facebook o Twitter.<br />
<br />
Una vez teniendo la cuenta activa, podrás configurar los botones fácilmente.<br />
<br />
Disponen varios temas y diseños, y puedes elegir el que más te guste
para el blog. A continuación puedes ver las opciones de configuración de
sus botones para compartir.<br />
<br />
<img alt="Opciones de configuracion de los botones de Sharehaolic" src="https://2.bp.blogspot.com/-XVUjfCMof3Y/VTAq_L82sOI/AAAAAAAAR_w/LPHySRRhcLc/s1600/shareaholic.png" title="" /><br />
<br />
Una vez que configures las opciones, guardas los cambios y te darán un código que tendrás que poner en la plantilla. <br />
<br />
Al igual que AddThis, no tendrás que preocuparte por crear los botones.
Sin embargo, el optar por una opción que utilice código JavaScript,
terminará por agregar más peso a tu página.</li>
</ul>
<div>
</div>
<h2>
<span style="font-weight: normal;"><span style="font-size: medium;">2. Obtener los botones oficiales de las distintas redes sociales</span></span></h2>
<span style="font-size: medium;"> </span>Como no podía ser de otra forma,
cada red social nos facilita sus botones con el fin de poderlos usar en
cualquier web para que se comparta el contenido. A continuación una
lista de las páginas de las principales redes sociales:<br />
<ul>
<li><a href="https://developers.facebook.com/docs/plugins/like-button" target="_blank">Facebook</a></li>
<li><a href="https://about.twitter.com/resources/buttons#tweet" target="_blank">Twitter</a></li>
<li><a href="https://developers.google.com/+/web/+1button/?hl=es" target="_blank">Google+</a></li>
<li><a href="https://business.pinterest.com/en/widget-builder#do_pin_it_button" target="_blank">Pinterest</a></li>
</ul>
<br />
Agregarlos de forma individual es más laborioso que usar un servicio de terceros que ya facilita todos los botones.<br />
<br />
Como mínimo, tendrás que preocuparte por agregar algunas reglas de CSS para que aparezcan de <b>forma alineada</b>, y en algunos casos configurar el código para que funcione todo correctamente y como Dios manda.<br />
<br />
<b>Para el caso del botón +1</b>. Como usuarios de Blogger, no tenemos
que preocuparnos por agregar el código JavaScript del Botón +1, ya que
Blogger lo envía al blog de forma predeterminada.<br />
<span style="font-size: medium;"><br />
</span> <br />
<h2>
<span style="font-weight: normal;"><span style="font-size: medium;">3.Crear
unos botones, usar unos de diseñador, o bien obtener los botones
(iconos) de las redes sociales y configurar el código necesario para que
funcionen</span></span></h2>
<span style="font-size: medium;"><b> </b></span> Provengan del sitio de
Juanito o de Pepito, aquí habrá que usar el código de Blogger (etiquetas
propias de Blogger), un poco de HTML y CSS para que funcionen los
botones personalizados.<br />
<br />
<b>Una buena idea es procurar seguir las pautas y recomendaciones de la marca</b>,
si es que optamos por usar unos de diseñador o los creamos nosotros
mismos, para evitar infringir las pautas de uso de la marca. Es lo
recomendable.<br />
<br />
Es cierto, cada diseñador hace y deshace con los iconos, ya hasta <b>alitas</b> les ponen, entre muchas otras cosas...<br />
<br />
Pero bueno, hasta la fecha no se ha sabido que a alguien lo hayan multado o encarcelado por no usar los iconos <b>como se debe</b>, al menos que yo sepa...<br />
<br />
<b>El propio Blogger</b> utiliza una "t", de Twitter!, que según Twitter<b> no debería usarse</b>. Y en la versión móvil figura ese pajarraco copetudo que parece haber adoptado una nueva imagen con el estilista...<br />
<br />
Pero bueno, <b>vamos aprendiendo</b>. Yo también tuve es "t" por mucho tiempo en el blog y Twitter, probablemente ni lo supo, pero, lo<b> mejor y lo más recomendable</b> es apegarse a las pautas de uso de las marcas para evitar broncas.<br />
<br />
A continuación las páginas de las principales redes sociales donde nos explican las pautas y usos de la marca:<br />
<ul>
<li><a href="https://developers.google.com/+/branding-guidelines#matching" target="_blank">Google+</a></li>
<li><a href="https://www.facebookbrand.com/" target="_blank">Facebook</a></li>
<li><a href="https://about.twitter.com/es/press/brand-assets" target="_blank">Twitter</a></li>
<li><a href="https://business.pinterest.com/en/brand-guidelines" target="_blank">Pinterest</a></li>
</ul>
<br />
<h2>
Cuál opción debería usar</h2>
Éso definitivamente lo decidirás tú. Una buena idea es tener accesibles
por lo menos los botones de las principales redes sociales para que los
usuarios puedan compartir una entrada sin problemas.<br />
<br />
Si te sientes indeciso y vas empezando con tu blog, <b>¡usa los de Blogger!</b>. Ya sobre la marcha, podrás usar unos nuevos que se adapten al diseño del blog y a tus necesidades.<br />
<br />
Hay que tomar en cuenta que agregando scripts de terceros agregán más
peso al blog. Si te preocupa este aspecto probablemente la mejor opción
para ti es poner botones sin usar JavaScript (opción 3), y poniendo por
ejemplo <b>todos los iconos en un solo archivo de imagen.</b><br />
<b><br />
</b> <b>Otra opción es prescindir </b>del uso de los iconos y usar solo
botones con los colores propios de los iconos de cada red, como ya han
hecho algunos sitios como Librosweb.es, CSS-Tricks.com, solo por
mencionar algunos. Pero eso sí, de preferencia, hay que <b>evitar usar las imágenes de forma separada </b>a como de lugar.<br />
-<br />
Información tomada de: <a href="http://www.compartidisimo.com/2015/04/tus-opciones-poner-botones-de-redes.html" target="_blank">http://www.compartidisimo.com/2015/04/tus-opciones-poner-botones-de-redes.html</a><a href="http://www.compartidisimo.com/2015/04/tus-opciones-poner-botones-de-redes.html" target="_blank">http://www.compartidisimo.com/2015/04/tus-opciones-poner-botones-de-redes.html</a>Alfonso Canterohttp://www.blogger.com/profile/04957211769182442859noreply@blogger.com0tag:blogger.com,1999:blog-8990771625177905142.post-72793391373459199542015-01-01T18:04:00.001+01:002015-01-04T14:07:51.322+01:00Los 10 mejores sitios para descargar themes WordPress gratis <br />
<br />
<div class="itemIntroText">
<img alt="worpdress themes gratis" src="http://www.webempresa.com/images/stories/articulos/worpdress_themes_gratis.jpg" height="174" style="float: left; margin-right: 20px;" title="plantillas wordpress gratis" width="220" /><span style="font-size: large;">Si
estás buscando una buena plantilla para WordPress, y lo importante para
ti es que la plantilla sea gratis, aquí te mostramos 10 sitios que
hemos seleccionado donde puedes descargar plantillas con un diseño
correcto.</span><br />
<span style="font-size: large;">En webempresa.com solemos recomendar usar plantillas de pago para
proyectos de empresas y negocios, el precio es económico y la fiabilidad
de ese tipo de plantillas justifica el coste, pero para probar y
aprender WordPress una plantilla gratuita es una buena opción. Aquí
tienes la lista de sitios para descargar <b>themes WordPress gratis</b>, seleccionados por nuestros técnicos:</span></div>
<span style="font-size: large;"></span><br />
<a name='more'></a><span style="font-size: large;">Última incorporación al listado:</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;"><b>CPO Themes</b> -> <a href="http://www.cpothemes.com/themes/free" target="_blank">http://www.cpothemes.com/themes/free</a></span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Los temas que puedes encontrar en CPOThemes tienen traducción completa al español, están internacionalizados.</span><br />
<span style="font-size: large;">Nos alegra que empresas españolas empiecen a competir en el sector del diseño de <b>temas para WordPress</b>.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;"><b>WordPress.org Themes Directory</b> -> <a href="http://wordpress.org/themes" target="_blank">http://wordpress.org/themes</a></span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;"><b>TopWPThemes</b> -> <a href="http://topwpthemes.com/" target="_blank">http://topwpthemes.com</a></span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;"><b>Wordpress Themes</b> -> <a href="http://www.wpthemesfree.com/" target="_blank">http://www.wpthemesfree.com</a></span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;"><b>Free Wordpress Themes 4 u</b> -> <a href="http://www.freewordpressthemes4u.com/" target="_blank">http://www.freewordpressthemes4u.com</a></span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;"><b>FreeThemeLayouts</b> -> <a href="http://www.freethemelayouts.com/" target="_blank">http://www.freethemelayouts.com</a></span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;"><b>WPTemplates</b> -> <a href="http://wptemplates.org/" target="_blank">http://wptemplates.org</a></span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;"><b>Blog OH! blog</b> -> <a href="http://www.blogohblog.com/category/wordpress-themes" target="_blank">http://www.blogohblog.com/category/wordpress-themes</a></span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;"><b>FWPThemes</b> -> <a href="http://www.fwpthemes.com/" target="_blank">http://www.fwpthemes.com</a></span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;"><b>Themes para WordPress</b> -> <a href="http://www.themesparawordpress.com/" target="_blank">http://www.themesparawordpress.com</a></span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;"><b>FabThemes</b> -> <a href="http://www.fabthemes.com/" target="_blank">http://www.fabthemes.com</a></span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;"><b>Themes4all</b> -> <a href="http://www.themes4all.com/free-wordpress" target="_blank">http://www.themes4all.com/free-wordpress/</a></span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Accediendo a esos enlaces, puede surgir un dilema, que es normal
cuando hay tanta variedad, realmente no se sabe realmente que theme
escoger.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Es importante que el theme tenga la disposición (layout) de
elementos deseada (cabecera, menús, witgets, etc), más que unos colores
determinados, puesto que muchos themes de WordPress permiten en el
apartado del escritorio -> apariencia -> personalizar, cambiar
colores y otras opciones, un ejemplo es este vídeo:</span><br />
<span style="font-size: large;">-</span><br />
<span style="font-size: large;"><iframe allowfullscreen="" frameborder="0" height="270" src="https://www.youtube.com/embed/-issqAi_QoI" width="480"></iframe></span>
<br />
<center>
</center>
<span style="font-size: large;">Cambiar de theme en WordPress es muy sencillo, al igual instalar y
desinstalar, por eso no os tiene que preocupar probar varios hasta
seleccionar el definitivo. En el vídeo siguiente podéis verlo:</span><br />
<span style="font-size: large;">-</span><br />
<span style="font-size: large;"><iframe allowfullscreen="" frameborder="0" height="344" src="https://www.youtube.com/embed/boGJmnS44yY" width="459"></iframe></span>
<br />
<center>
</center>
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Desde Webempresa puedes <a href="http://www.webempresa.com/descargar-wordpress.html" target="_blank">descargar WordPress en español</a> con el <b>theme Titania</b>. También puedes descargar solo la plantilla, de forma totalmente gratuita y sin restricciones de acceso y uso.</span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Espero que este artículo os sea de utilidad, de forma que podáis
encontrar en los enlaces facilitados el tema, plantilla o theme,
adecuado para vuestro sitio web realizado con WordPress.</span><br />
<span style="font-size: large;">-</span><br />
<span style="font-size: large;">Información tomada de: <a href="http://www.webempresa.com/blog/item/1271-los-10-mejores-sitios-para-descargar-themes-wordpress-gratis.html" target="_blank">http://www.webempresa.com/blog/item/1271-los-10-mejores-sitios-para-descargar-themes-wordpress-gratis.html</a> </span>Alfonso Canterohttp://www.blogger.com/profile/04957211769182442859noreply@blogger.com0tag:blogger.com,1999:blog-8990771625177905142.post-70650058893011338192014-12-08T11:41:00.000+01:002014-12-07T12:27:11.492+01:00Ribbon Blogger Template-<b>Tiene toda la pinta de ser una excelente plantilla para nuestro blog.</b><br />
<img src="http://cdn.newbloggerthemes.com/wp-content/uploads/2014/12/Ribbon-Blogger-Template.jpg" style="margin-top: 23px;" /><br />
<br />
<a name='more'></a><br />
<br />
<table>
<tbody>
<tr>
<td><div class="tdemo">
<span style="color: red;"><a class="tdemo demo-link-main" href="http://newbloggerthemes.com/ribbon-blogger-template/demo/" rel="nofollow" target="_blank">Live Demo</a></span></div>
</td>
<td><div class="tdownload">
<span style="color: blue;"><a class="tdownload" href="http://newbloggerthemes.com/download/174" rel="nofollow" target="_blank">Download Now</a></span></div>
</td>
<td><div class="tinstall">
<a class="tinstall" href="http://newbloggerthemes.com/blogger-template-installation-guide/" target="_blank">Template Installation</a></div>
</td>
</tr>
</tbody>
</table>
<div>
<div style="float: left; height: 25px; width: 210px;">
Template Name:</div>
<div style="float: right; height: 25px; width: 470px;">
Ribbon</div>
</div>
<div>
<div style="float: left; height: 25px; width: 210px;">
Author / URL:</div>
<div style="float: right; height: 25px; width: 470px;">
NewBloggerThemes | http://newbloggerthemes.com/ </div>
</div>
<div>
<div style="float: left; height: 25px; width: 210px;">
Designer / URL:</div>
<div style="float: right; height: 25px; width: 470px;">
MyThemeShop | http://mythemeshop.com/ </div>
</div>
<div>
<div style="float: left; height: 25px; width: 210px;">
Published Date:</div>
<div style="float: right; height: 25px; width: 470px;">
December 7, 2014</div>
</div>
<div>
<div style="float: left; width: 210px;">
Categories:</div>
<div style="float: right; width: 470px;">
1
Column, 1 Sidebar, 3 Column Footer, Adapted from Wordpress, Blue,
Elegant, Fixed width, Fresh, Grey, Header Banner, Magazine, Minimalist,
Red, Responsive, Right Sidebar, Top Navigation Bar, Web 2.0, White, </div>
</div>
<div style="overflow: hidden;">
<div style="float: left; height: 25px; width: 210px;">
Advanced Details:</div>
<div style="float: right; height: 25px; width: 470px;">
http://newbloggerthemes.com/ribbon-blogger-template/</div>
</div>
<div style="margin: 10px 0px 10px 0px; overflow: hidden; width: 100%;">
</div>
<div>
<div style="float: left; height: 25px; width: 680px;">
More Info :</div>
</div>
<br />
Ribbon is a SEO friendly,
responsive, 2 columns, magazine Blogger theme for general purpose blogs.
Ribbon blogger template comes with features such as auto header ad
banner, read more, right sidebar, 3 columns footer, social buttons, post
sharing buttons, related posts, Google fonts, scroll to top button and
more.<br />
<h4>
How To Add Links to Top Navigation Menu</h4>
<img alt="Menu - Ribbon Blogger Template" class="alignnone size-full wp-image-1633" src="http://cdn.newbloggerthemes.com/wp-content/uploads/2014/12/Menu-Ribbon-Blogger-Template.jpg" height="141" width="400" /><br />
Find this in "Edit HTML":<br />
<pre><nav id='navigationnbt'>
<ul class='menunbt'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='#'>Business</a>
<ul class='sub-menu'>
<li><a href='#'>Internet</a></li>
<li><a href='#'>Market</a></li>
<li><a href='#'>Stock</a></li>
</ul>
</li>
...
<li><a href='#'>Uncategorized</a></li>
</ul>
</nav></pre>
Replace "#" marks with real URLs and change anchor texts as you like.<br />
<h4>
How To Configure Social Buttons</h4>
<img alt="Social Buttons - Ribbon Blogger Template" class="alignnone size-full wp-image-1634" src="http://cdn.newbloggerthemes.com/wp-content/uploads/2014/12/Social-Buttons-Ribbon-Blogger-Template.jpg" height="44" width="281" /><br />
<br />
Find this in "Edit HTML":....................<br />
<span id="fullpost"></span><br />
<div align="center">
<pre style="height: 160px; overflow: auto; width: 540px;"><div align="left">
<span id="fullpost"><span style="font-size: 100%;">
</span></span><br />
<pre><div class='ribbon-social-buttons'>
<a href='<span style="color: magenta;">https://plus.google.com/</span>' rel='nofollow' target='_blank' title='GooglePlus'><i class='fa fa-google-plus-square'/></a>
<a href='<span style="color: magenta;">https://twitter.com/</span>' rel='nofollow' target='_blank' title='Twitter'><i class='fa fa-twitter-square'/></a>
<a href='<span style="color: magenta;">https://www.facebook.com/</span>' rel='nofollow' target='_blank' title='Facebook'><i class='fa fa-facebook-square'/></a>
<a href='<span style="color: magenta;">http://instagram.com/</span>' rel='nofollow' target='_blank' title='Instagram'><i class='fa fa-instagram'/></a>
<a href='<span style="color: magenta;">https://www.youtube.com/</span>' rel='nofollow' target='_blank' title='Youtube'><i class='fa fa-youtube-square'/></a>
<a href='<span style="color: magenta;">http://www.pinterest.com/</span>' rel='nofollow' target='_blank' title='Pinterest'><i class='fa fa-pinterest-square'/></a>
<a href='<span style="color: magenta;">http://www.linkedin.com/</span>' rel='nofollow' target='_blank' title='Linkedin'><i class='fa fa-linkedin-square'/></a>
<a href='<span style="color: magenta;">https://vimeo.com/</span>' rel='nofollow' target='_blank' title='Vimeo'><i class='fa fa-vimeo-square'/></a>
<a href='<span style="color: magenta;">http://tumblr.com/</span>' rel='nofollow' target='_blank' title='Tumblr'><i class='fa fa-tumblr-square'/></a>
<a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' rel='nofollow' target='_blank' title='RSS'><i class='fa fa-rss-square'/></a>
</div></pre>
<span id="fullpost"><span style="font-size: 100%;">
</span></span></div>
</pre>
</div>
<span id="fullpost">
<br /> </span>Add your social profile URLs replacing these social media networks homepages URLs.<br />
<br />
<span id="fullpost">-Información tomada de: <a href="http://newbloggerthemes.com/ribbon-blogger-template/" target="_blank">http://newbloggerthemes.com/ribbon-blogger-template/</a></span>Alfonso Canterohttp://www.blogger.com/profile/04957211769182442859noreply@blogger.com0tag:blogger.com,1999:blog-8990771625177905142.post-61222094953225209532014-12-07T10:46:00.000+01:002016-05-26T19:29:06.325+02:00Cómo hacer un blog paso a paso en WordPressAprende <b>c</b><b>ó</b><b>mo crear un blog paso a paso </b>de una forma verdaderamente profesional.<br />
<br />
Tengo la gran suerte que me sigues desde hace un tiempo. Entras,
comentas o compartes lo que escribo o digo. Me gustaría que avanzaras.
Que mejor forma que dar el salto y tener tu propio sitio.<br />
Quizá te ayude mi historia. Lo que me pasó a mi.<br />
<br />
<b> Como logré crear este blog yo sola sin ayuda de nadie.</b> Mi primer blog WordPress sin tener ningún tipo de conocimiento sobre instalación o configuración de blogs.<br />
<h1>
<b>Cómo cree mi blog profesional sin ayuda.</b></h1>
<br />
<a name='more'></a>Hace casi 10 meses tome una decisión. Muy buena a nivel profesional y
personal. La decisión tan importante era la de abrir mi propio blog.
Pero no un blog cualquiera. Uno que fuera mío.<br />
Al principio me costó mucho esfuerzo entender como iban las cosas. A
pesar de todo pienso que debes comprar tu dominio tu hosting y pa
alante como los de Alicante <img alt=":mrgreen:" class="wp-smiley" src="http://silviacueto.com/wp-includes/images/smilies/icon_mrgreen.gif" /><br />
No estoy loca. Sé que puedes. Porque yo pude. Este es mi primer blog.
Te prometo que nunca había tenido ningún otro. Ni siquiera gratis. Sin
conocimientos de programación ni diseño… nada. Nada de blogs me
refiero.<br />
<br />
Es cuestión de tiempo y que te atrevas. Deshazte de esos miedos que
te impiden hacerlo. Todos absolutamente nos equivocamos pero <b>no te equivoques en no intentarlo.</b><br />
<h2>
<b>Tú puedes crear tu blog si quieres.</b></h2>
Sé que muchos expertos opinan lo contrario, pero hablo desde mi
experiencia en estos meses. Porque además es lo que pienso realmente.
Cualquier cosa que haces la primera vez te parece inalcanzable. Muchas
veces dejas de intentar hacer cosas porque piensas que es muy difícil.<br />
<br />
<b>Yo no hice caso de la voz que me decía que no era capaz.</b><br />
<br />
Decidí crear uno de pago después de sopesar los pros y los contras.
Tenia claro que iba en serio así que iba a empezar a crear yo sola mi
blog. Después de mucho investigar me encontré con este magnifico
tutorial de <a href="http://www.ciudadano2cero.com/" target="_blank">Ciudadano 2.0</a> .<br />
<br />
Con su ayuda logre instalar mi propio blog. Tarde unas 5 horas. Pero no me importó.<br />
<br />
<b>Lo único que vale es el resultado no el tiempo que tardes......</b><br />
<br />
<br />
<br />
Al poco me encontré con un articulo de Víctor Martín en el que comentaba el tiempo aproximado que se tardaba en crear un blog.<br />
Entonces respiré porque el tiempo que yo había tardado estaba dentro de lo normal. Ya no era ni tan lenta ni tan tonta ;).<br />
<br />
<b>Así fue como yo lo hice.</b><br />
<br />
Espero que hayas llegado a leer hasta aquí. Lo que tengo que decirte es importante. <b>Existe otra forma de crear tu blog más rápida y mucho más fácil.</b> En Web Empresa existe lo que se llama <b>Installatron</b> y en cuestión de segundos ya tienes tu <b>WordPress.org</b>
instalado. Esta forma la he utilizado en unos blogs de nicho que voy
abrir. Si lo llego a saber cuando cree mi blog me hubiera ahorrado esas 5
horas.<br />
<h1>
<b>Qué necesitas para hacer un blog de aspecto profesional</b></h1>
<ul>
<li><b>Nombe de Dominio </b>el dominio es el nombre de tu blog . El mío es <a href="http://silviacueto.com/mi-primer-post/" target="_blank" title="Mi primer post">silviacueto.com.</a> Para comprar dominios yo uso Don Dominio. Tienen unos precios realmente buenos y encima es Español ;).</li>
</ul>
<ul>
<li><b>Alojamiento o Hosting </b> es la plataforma donde se aloja tu blog. Muy importante que sea un buen hosting. Recientemente me he cambiado a<a href="http://www.webempresa.com/" target="_blank"> Web Empresa</a> y estoy sumamente contenta. Tienen buena fama y cada vez más bloggers lo contratan allí.</li>
</ul>
<ul>
<li><b>Plataforma WordPress </b> es la plataforma más conocida
y utilizada. Existen dos versiones gratis y de pago. La de pago es la
que yo te recomiendo. Si vas en serio con tu blog cómprate uno.</li>
</ul>
<h2>
<b>¿Por qué te digo que pagues cuando lo puedes tener gratis? </b></h2>
Piensa que en esta vida hay muy pocas cosas gratis. Si las hay es con alguna limitación o condición.<br />
<h2>
<b>¿Qué pasa si tienes un blog gratis?</b></h2>
<ul style="list-style-type: square;">
<li>Un blog creado en un a plataforma gratuita no es tuyo. Es decir que
cualquier día puedes llevarte una sorpresa y encontrarte que tu blog ha
desaparecido. Eso fue precisamente lo que le paso a mi gran compañero y
amigo <a href="http://www.angelbanegas.com/blog-despues-de-8-meses/" target="_blank">Angel Banegas </a>.</li>
</ul>
Imagínate la cara que debió poner. El trabajo y esfuerzo de un año tirado por la borda.<br />
Pero no se desanimó y lo que hizo fue aprender de su error. Se dio cuenta que necesitaba su propio blog y se compró uno.<br />
<ul style="list-style-type: square;">
<li>Un blog gratis tiene muchas limitaciones a nivel de plugins , themes
y demás. Y por supuesto no tiene el un aspecto tan profesional.</li>
</ul>
<ul style="list-style-type: square;">
<li>Publicidad no deseada puedes llevarte la no grata sorpresa de que
te cuelen publi que no va con tu blog. De alguna forma se están
aprovechando de tu esfuerzo. El beneficio se lo quedan ellos.</li>
</ul>
<h1>
4 pasos para crear tu blog</h1>
<h2>
<b>Compra el dominio</b></h2>
1º opción Pincha en <a href="http://www.dondominio.com/" target="_blank"> Don dominio</a> .
Escribe el nombre del dominio que quieres comprar en el recuadro. Dale
a la flechita naranja Cruza los dedos para que no esté pillao <img alt=":mrgreen:" class="wp-smiley" src="http://silviacueto.com/wp-includes/images/smilies/icon_mrgreen.gif" /> .<br />
<br />
<a href="http://silviacueto.com/"><img alt="como hacer un blog paso a paso 8" class="aligncenter size-large wp-image-2845" src="http://silviacueto.com/wp-content/uploads/2014/09/2014-09-24_21h49_20-650x55.png" height="33" width="400" /></a><br />
<br />
Pasamos a la siguiente pantalla donde te sale en fila todos los dominios con ese nombre. <b>Pincha en “añadir al carro”</b> cuando te hayas decidido por uno. Ya sabes las mejores terminaciones para nosotros son: com,es y net.<br />
<br />
<a href="http://silviacueto.com/"><img alt="como crear un blo paso a paso 2" class="aligncenter size-large wp-image-2827" src="http://silviacueto.com/wp-content/uploads/2014/09/2014-09-24_10h49_55-650x177.png" height="107" width="400" /></a><br />
<br />
Arriba a la derecha pincha donde pone<b> “Carrito de la compra”</b> no pongo la captura pero bueno se ve bien. Ahí podrás ver la pantalla de abajo. Compruebas los datos si algo está mal en <b>“Editar datos”</b> lo corriges. Para finalizar pincha en <b>“Pagar compra”.</b> Ya solo te faltará registrarte si aún no lo hiciste y escoger la forma de pago. Ya con eso tienes tu dominio comprado.<br />
<br />
<a href="http://silviacueto.com/"><img alt="como hacer un blog paso a paso 3" class="aligncenter wp-image-2828" src="http://silviacueto.com/wp-content/uploads/2014/09/2014-09-24_11h00_43-650x272.png" height="167" width="400" /></a><br />
<br />
2º opción sería comprar el dominio en Web Empresa a la vez que el hosting. Te lo explico más abajo.<br />
<h2>
<b>Contrata el hosting</b></h2>
Para esto pincharías en mi banner donde pone<b> “Prueba ahora”</b>si me quieres dar a mi una pequeña comisión.<br />
Me haría mucha ilusión porque serías el primero. El banner es nuevo y como todo lo nuevo mola<br />
<br />
<br />
<a href="http://clientes.webempresa.com/europa/gestion/aff.php?aff=1871&landing=hosting_wordpress"><img alt="" border="0" class="aligncenter" src="http://afiliados.webempresa.eu/wordpress_250x250_pruebagratis.gif" height="299" title="como hacer un blog paso a paso 5" width="299" /></a><br />
<br />
3 opciones:<br />
<ul style="list-style-type: square;">
<li>La primera es la que te hablé más arriba. Si quieres contratar dominio y hosting todo a la vez</li>
</ul>
<ul style="list-style-type: square;">
<li>La segunda es cuando quieres cambiar un dominio que tenias
contratado en otro sitio a Web empresa. Esta opción por experiencia no
te la aconsejo. Me quedé sin poder entrar al blog 10 largos días. Hasta
que se hicieron todos los cambios. Tengo que aclarar que Web empresa
no ha tenido nada que ver con este problema. Algunas empresas no
facilitan la desión del dominio y esto es lo que me pasó a mi.</li>
</ul>
<ul style="list-style-type: square;">
<li>La tercera opción es la que también mencioné arriba. Tener el dominio en un sitio y el hosting en otro diferente.</li>
</ul>
Escoges la opción que prefieras y escribes el dominio en la cajita. Después pinchas en <b>“Comprueba Dominio”</b><br />
<br />
<a href="http://silviacueto.com/"><img alt="como hacer un blog paso a paso 6" class="aligncenter size-large wp-image-2836" src="http://silviacueto.com/wp-content/uploads/2014/09/2014-09-24_11h56_43-650x315.png" height="192" width="400" /></a><br />
<br />
Selecciona el periódo que quieras contratar. Cuanto más grande sea el
periódo que contrates más grande será el descuento . Yo he contratado
mi hosting por un año y en lo sucesivo lo haré por dos años. Pinchas en
<b>“Aplicar descuento y finalizar “</b>para que te hagan una pequeña rebaja por hacerlo a través de mi banner.<br />
<br />
<a href="http://silviacueto.com/"><img alt="como hacer un blog paso a paso 6" class="aligncenter size-large wp-image-2837" src="http://silviacueto.com/wp-content/uploads/2014/09/2014-09-24_12h16_20-650x255.png" height="156" width="400" /></a><br />
<br />
Por último pasas a <b>“Alta y facturación”</b> te piden tus datos y forma de pago. Y ya lo tienes.<br />
<br />
<a href="http://silviacueto.com/"><img alt="como hacer un blog paso a paso en wordpress" class="aligncenter size-large wp-image-2852" src="http://silviacueto.com/wp-content/uploads/2014/09/2014-09-25_21h12_24-650x345.png" height="212" width="400" /></a><br />
<a href="http://silviacueto.com/"><img alt="como hacer un blog paso a paso en wordpress 10" class="aligncenter size-large wp-image-2853" src="http://silviacueto.com/wp-content/uploads/2014/09/2014-09-25_21h14_30-650x387.png" height="238" width="400" /></a><br />
<h2>
Cambia DNS</h2>
Este paso <b>sólo debes hacerlo si has contratado el dominio en un sitio diferente al hosting (opciónes 2 y 3) .</b> En el caso de que hayas elegido la opción 1 ya te los coloca directamente y no tienes que hacer nada.<br />
Tienes que hacer que tu dominio (Don dominio) apunte a tu hosting (Web empresa). Es muy sencillo.<br />
Web empresa te manda un mail con los DNS. Guarda ese correo en un
lugar seguro. También los puedes encontrar en tu panel de control Web
empresa. Verás una cosa similar a esta.<br />
NameServer 1: <b>ns4005.webempresa.eu</b><br />
NameServer 2: <b>ns4006.webempresa.eu</b><br />
Ahora tienes que entrar a tu área de cliente Web Empresa<br />
<br />
<a href="http://silviacueto.com/"><img alt="como hacer un blog paso a paso en wordpress" class="aligncenter size-full wp-image-2854" src="http://silviacueto.com/wp-content/uploads/2014/09/2014-09-25_21h26_17.png" height="327" width="525" /></a> <b> </b><br />
<br />
<b>Pulsa en Dominios / Mis Dominios y en Gestionar Dominio a la derecha del dominio que precisa cambiar</b><br />
Pulse en la pestaña Nameservers e indiques las DNS a las que apuntar su dominio (*). Guarda los cambios<br />
<br />
<a href="http://silviacueto.com/"><img alt="como hacer un blog paso a paso en wordpress" class="aligncenter size-large wp-image-2855" src="http://silviacueto.com/wp-content/uploads/2014/09/2014-09-25_21h31_45-650x341.png" height="209" width="400" /></a><br />
<br />
∗Los cambios no son inmediatos pueden tardar de 4 a 24 horas llegando incluso a las 72 horas.<br />
<h2>
Instala Worpress.org</h2>
Puedes ingresar a través del correo que te mandaron. Una vez que
estén propagados y cambiados las DNS podrás entrar en el panel de
control. En el área de cliente Web empresa <b>“Servicios” <img alt=":arrow:" class="wp-smiley" src="http://silviacueto.com/wp-includes/images/smilies/icon_arrow.gif" /> “Mis productos” <img alt=":arrow:" class="wp-smiley" src="http://silviacueto.com/wp-includes/images/smilies/icon_arrow.gif" /> </b> <b>“Ver detalles”</b> <img alt=":arrow:" class="wp-smiley" src="http://silviacueto.com/wp-includes/images/smilies/icon_arrow.gif" /> <b> “Ingresar a</b> <b>cpanel”</b> abajo del todo.<br />
Ya estás en el panel en <b>“Sofware servicios”</b> ir a <b>“Packs webempresa”</b><br />
<br />
<a href="http://silviacueto.com/"><img alt="como hacer un blog paso a paso 7" class="aligncenter wp-image-2840 size-full" src="http://silviacueto.com/wp-content/uploads/2014/09/2014-09-24_13h01_38.png" height="219" width="496" /></a><br />
<br />
<b>Installatron</b> es como se llama la herramienta en Web Empresa para instalar WordPress. Pincha en <b>“Navegador de aplicaciones”</b><br />
<br />
<a href="http://silviacueto.com/"><img alt="como hacer un blog paso a paso" class="aligncenter size-large wp-image-2841" src="http://silviacueto.com/wp-content/uploads/2014/09/2014-09-24_13h27_08-650x139.png" height="85" width="400" /></a><br />
<br />
Te quedas con la última opción <b>“Pack WordPress Blog/CMS”</b><br />
<br />
<a href="http://silviacueto.com/"><img alt="como hacer un blog paso a paso" class="aligncenter size-full wp-image-2842" src="http://silviacueto.com/wp-content/uploads/2014/09/2014-09-24_13h31_20.png" height="70" width="400" /></a><br />
<br />
Los únicos cambios que debes hacer son:<br />
<ul style="list-style-type: square;">
<li><b>“Dominio”</b> buscas el nombre del dominio que quieres instalar.</li>
<li><b>“Nombre de</b> <b>usuario administrador “</b> te pondrá admin yo te aconsejo que lo elimines y pongas tu propio usuario personalizado.</li>
</ul>
<ul style="list-style-type: square;">
<li> <b>“Email”</b> el tuyo y para finalizar pinchas abajo en <b>“Instalar”. </b>En cuestión de nada te lo instala es una pasada</li>
</ul>
Ahora ve a tu blog que está siempre en esta dirección <b>http://tudominio.com/wp-admin. </b><br />
Y ya está ya puedes publicar tu primer post<br />
No dejes para mañana hacer tu propio blog profesional hoy. ¿Quién se
apunta a estrenar blog?. Cuando tengas publicado tu primer post pasa
por aquí enlázalo a tu primer post <br />
<br />
<br />
-<br />
<b>Ya sabes que sin tus comentarios no soy nada. Ayúdame a ayudar y a crear una gran familia bloguera. </b><br />
-<br />
Información tomada de: <a href="http://silviacueto.com/como-hacer-un-blog-paso-a-paso-en-wordpress/" target="_blank">http://silviacueto.com/como-hacer-un-blog-paso-a-paso-en-wordpress/</a><br />
<br />Alfonso Canterohttp://www.blogger.com/profile/04957211769182442859noreply@blogger.com2tag:blogger.com,1999:blog-8990771625177905142.post-47562045995179755142014-12-04T12:43:00.002+01:002015-06-14T15:38:39.522+02:00Crear y editar mapas personalizados -<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLfzES_ZcGA7uJynBp_PecATP3CnUXFVrFNiv1pl6QZPppWelnf3dsgedX7Jxiv3IjoOEXyNQqKWtxPwCl57Y-onRKqq8IZ7S8RG-apMZDLd4vv-ZKFi8nZszIEW-Xs03zPnYYQPkUA_X6/s1600/11080785_10205376651790068_6369344279885674672_o.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLfzES_ZcGA7uJynBp_PecATP3CnUXFVrFNiv1pl6QZPppWelnf3dsgedX7Jxiv3IjoOEXyNQqKWtxPwCl57Y-onRKqq8IZ7S8RG-apMZDLd4vv-ZKFi8nZszIEW-Xs03zPnYYQPkUA_X6/s400/11080785_10205376651790068_6369344279885674672_o.jpg" width="400" /></a></div>
Puedes crear mapas personalizados para compartirlos online con Google
My Maps Por ejemplo, crea un mapa para realizar el seguimiento de las
mejores rutas de excursiones para llevar el perro o guarda nuevas
ubicaciones para ampliar tu negocio.<br />
<h3>
Crear un mapa nuevo</h3>
<ol>
<li dir="ltr">Inicia sesión en <a href="https://www.google.com/maps/preview" target="_blank">Google Maps</a> utilizando el botón <b>Iniciar sesión</b> situado en la esquina superior derecha del mapa.</li>
<li dir="ltr">Asegúrate de que el cuadro de búsqueda esté vacío y, a continuación, haz clic en él.</li>
<li dir="ltr">Haz clic en <b>Mis mapas</b>.</li>
<li>Haz clic en el botón <b>Crear</b> <img alt="edit" height="21" src="https://storage.googleapis.com/support-kms-prod/SNP_3025245_en_v0" title="edit" width="21" />.</li>
</ol>
<h4>
Personalizar el mapa</h4>
<div style="overflow: hidden;">
<div class="zippy-content" style="margin-top: 0px;">
Para añadir una ubicación, puedes hacer lo siguiente:<br />
<ul>
<li>Haz clic en el botón de chincheta <img alt="add a placemarker" height="21" src="https://storage.googleapis.com/support-kms-prod/SNP_3024982_en_v0" title="add a placemarker" width="21" /> y, a continuación, haz clic en cualquier lugar del mapa.</li>
<li>Busca la ubicación, haz clic en la chincheta verde del mapa y haz clic en <b>Añadir al mapa</b>.</li>
</ul>
Más información sobre <a href="https://support.google.com/mapsenginelite#topic=3024924" target="_blank">cómo personalizar el mapa</a>.<br />
-<br />
Información tomada de:<a href="https://support.google.com/maps/answer/3045850?hl=es" target="_blank"> https://support.google.com/maps/answer/3045850?hl=es </a><br />
-<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.tuexperto.com/wp-content/uploads/2011/05/mapacorrupcion_1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://www.tuexperto.com/wp-content/uploads/2011/05/mapacorrupcion_1.jpg" height="281" width="400" /></a></div>
<br /></div>
</div>
Alfonso Canterohttp://www.blogger.com/profile/04957211769182442859noreply@blogger.com0tag:blogger.com,1999:blog-8990771625177905142.post-77997043246414443882014-11-11T19:44:00.003+01:002014-11-11T19:46:09.024+01:00Tutorial WordPress.com<h1 class="post-title">
Tutorial WordPress.com</h1>
<div class="post-meta">
<span class="meta-prep meta-prep-author posted"></span><span class="comments-link"><br /> </span>
</div>
<h1 style="text-align: justify;">
<a href="http://alfredohdezdiaz.files.wordpress.com/2013/10/tutorial-wordpress-com.pdf" target="_blank" title="Tutorial de WordPress.com"><img alt="Tutorial WordPress.com" class="aligncenter size-full wp-image-3811" src="http://alfredohdezdiaz.files.wordpress.com/2013/10/tutorialwordpress-com.png?w=605" /></a></h1>
<div style="text-align: center;">
<span style="font-family: calluna-1, calluna-2, 'Open Sans', Helvetica, Arial, sans-serif; font-size: 2em; line-height: 19px; text-align: justify;">Tutorial WordPress.com en pdf</span></div>
<div style="text-align: justify;">
Este <b>tutorial de Worpress.com</b> <b>puedes descargártelo en un pdf</b> y te enseña en 10 pasos básicos cómo crear tu sitio web o blog.</div>
<div style="text-align: justify;">
WordPress.com es una plataforma que te permite crear tu propio site en poco tiempo y sin costes.</div>
<div style="text-align: justify;">
Su gran ventaja frente a su hermano WordPress.org es que<b> no tienes que instalarlo en un <a href="http://www.ciudadano2cero.com/crear-blog-profesional-hosting-wordpress/" target="_blank" title="Hosting propio en wordpress.org">hosting propio</a></b> (servidor propio o alojamiento externo contratado) <b>y te despreocupas de actualizaciones, seguridad, spam, entre otras configuraciones y mantenimientos</b>.</div>
<div style="text-align: justify;">
Se trata de una alternativa para <b>sitios web que no necesitan personalizar el <a href="http://php.net/manual/es/intro-whatis.php" target="_blank" title="Código PHP">código PHP</a></b> (cambio de código o instalación de plugins) o <b>generar ingresos por publicidad a través de plataformas de anuncios, </b>como <a href="https://adwords.google.com/" target="_blank" title="Google Adwords">Google Adwords</a>, aunque WordPress.com cuenta con su propio sistema de publicidad denominado <a href="http://ayudawordpress.com/como-ganar-dinero-en-wordpress-com/" target="_blank" title="Adcontrol Sistema propio de publicidad de WordPress.com">Adcontrol</a> para monetizar tu site.</div>
<div style="text-align: justify;">
Uno de los elementos más importantes a la hora de crear tu blog es la <b>elección de una plantilla adecuada</b>, pues cada una te ofrece distintos grados de personalización (menús, barras o slidebars, etcétera). Puedes seleccionar entre<b> más de 200 temas o plantillas gratuitas</b>.</div>
<div style="text-align: justify;">
Si no estás feliz con un dominio del tipo “misitio.wordpress.com”, WordPress.com te ofrece la posibilidad de <b>registrar tu propio dominio</b> “.com” o de traer un dominio que tengas registrado con otro proveedor de servicios.</div>
<div style="text-align: justify;">
WordPress.com es muy amigable con los buscadores, en consecuencia el rastreo de tu sitio es más fácil, aunque es <b>recomendable darse de alta en las <a href="https://www.google.com/webmasters/tools/" target="_blank" title="Herramientas Webmaster de Google">herramientas webmaster</a></b>, especialmente la de Google, para seguir las evoluciones de tu sito web.</div>
<div style="text-align: justify;">
En este <b>tutorial de WordPress.com en pdf</b>, encontrarás las ventajas del uso de esta plataforma y una descripción en <b>10 pasos</b>, incluidas pantallas capturadas, <b>de cómo crear tu blog</b>:</div>
<ol style="text-align: justify;">
<li>Regístrate en WordPress.com</li>
<li>Conoce el escritorio en detalle</li>
<li>Edita tu perfil público</li>
<li>Configura los ajustes</li>
<li>Conecta tus redes sociales</li>
<li>Crea tus páginas, categorías y etiquetas</li>
<li>Dale apariencia atractiva a tu sitio web</li>
<li>Verifica tu sito web en buscadores</li>
<li>Publica tu primer contenido</li>
<li>Visualiza las estadísticas de tus visitantes </li>
</ol>
-Información tomada de:<br />
<a href="http://alfredohernandezdiaz.com/2013/10/29/tutorial-wordpress-com/" target="_blank">http://alfredohernandezdiaz.com/2013/10/29/tutorial-wordpress-com/</a>Alfonso Canterohttp://www.blogger.com/profile/04957211769182442859noreply@blogger.com0tag:blogger.com,1999:blog-8990771625177905142.post-18332117727945197032014-08-24T11:56:00.001+02:002014-08-24T12:01:22.575+02:00Introduciendo la plantilla para Blogger: Fashionista Esta es una plantilla muy fácil de realizar, con un buén diseño y que puede quedar genial para nuestra pequeña tienda o negocio, además viene con instrucciones.<br />
La he probado y funciona muy bién.<br />
<br />
<div style="text-align: left;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-1_1jGUzAmb0/T4kMa7r61QI/AAAAAAAAJpc/vaCBATNGnWo/s1600/fashionista-blanco.jpg" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" class="noborde" src="http://3.bp.blogspot.com/-1_1jGUzAmb0/T4kMa7r61QI/AAAAAAAAJpc/vaCBATNGnWo/s400/fashionista-blanco.jpg" height="400" width="285" /></a></div>
<br />
<a name='more'></a><br />
<br />
<br />
Esta plantilla puede adaptarse a varias temáticas, como blogs de
moda, decoración, etc. Guarda un orden perfecto en las separaciones de
los posts y la columna lateral, y usa colores sólidos (sin texturas).
Utiliza <a href="http://masonry.desandro.com/" target="_blank">masonry, un plugin de jQuery</a>
que permite que los posts que flotan de este modo, no necesariamente
tengan que tener la misma altura, de ese modo podemos crear el efecto de
mosaico sin problemas.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
Olvídate de ingresar a la edición de HTML de la plantilla para editar
los elementos como el menú desplegable, los iconos sociales y el
carrusel, ya que estos los agregarás/editarás desde un gadget con
la opción HTML/Javascript, así evitarás dolores de cabeza, o perderte
entre el código de la plantilla. Aunque si eres usuario avanzado, desde
luego puedes hacer cambios desde la edición de HTML de la plantilla.<br />
<br />
<div style="text-align: center;">
<a class="descargar-e" href="http://masonry-c.blogspot.com/" rel="nofollow" target="_blank">Demostración</a></div>
<br />
<b>Características</b><br />
<ul>
<li>Plantilla de cuatro columnas (tres de los posts, y una lateral adicional para agregar gadgets)</li>
<li>Iconos sociales en la parte superior</li>
<li>Menú en la parte superior izquierda que son los títulos de las páginas estáticas</li>
<li>Menú desplegable adicional</li>
<li>Carrusel de imágenes para que puedas destacar algunos posts</li>
<li>Cuatro columnas adicionales en el footer</li>
<li>Resumen automático en las entradas</li>
</ul>
<br />
El resumen de las entradas es automático, aunque si lo quieres, puedes
mostrar sólo la imagen en la página principal, es decir, no mostrar
ningún texto como resumén, y para ello, necesitas poner la imagen como
primer elemento en el post, desde el panel de edición de entradas, y
poner el salto de linea debajo de ésta, como se muestra en la imagen.
Puedes ver el resultado en la plantilla de demostración.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-DuTRADItiyU/T4jKd27PQSI/AAAAAAAAJoU/GLAdq5hDpgU/s1600/salto-de-linea.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" class="noborde" src="http://3.bp.blogspot.com/-DuTRADItiyU/T4jKd27PQSI/AAAAAAAAJoU/GLAdq5hDpgU/s1600/salto-de-linea.jpg" /></a></div>
<br />
Así es como se muestra el layout o Diseño, en la imagen puedes ver
la ubicación de cada elemento de la plantilla , ya que todos los
elementos han sido colocados en secciones, de ese modo, puedes editar
los elementos desde la sección de Diseño:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVYY_mjXfqwpVPfaozh1NTqyK4H7Nk-2OWQWrAMmuyIA5GpSy5cXAuiuDnHayi5YOuWaAzmQqJtbXW09W_sYvLoi_q6YwHwbD4cVJbIvm-l7Jn0Qiw9nJDH8h36qdPrHZjB6l7jKqvYgY/s1600/layoutfashionista.gif" style="margin-left: 1em; margin-right: 1em;"><img border="0" class="noborde" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVYY_mjXfqwpVPfaozh1NTqyK4H7Nk-2OWQWrAMmuyIA5GpSy5cXAuiuDnHayi5YOuWaAzmQqJtbXW09W_sYvLoi_q6YwHwbD4cVJbIvm-l7Jn0Qiw9nJDH8h36qdPrHZjB6l7jKqvYgY/s400/layoutfashionista.gif" height="362" width="400" /></a></div>
<div style="text-align: center;">
<span style="font-size: xx-small;">Click para ampliar</span></div>
<br />
<br />
<h3>
Cómo Agregar y Editar los Iconos de Redes Sociales</h3>
<div>
</div>
<div>
Ve a Diseño y en el gadget superior derecho (ver imagen arriba
del diseño donde dice iconos sociales) haz click en "Editar" y agrega el
siguiente código:</div>
<blockquote class="tr_bq">
<span style="font-family: 'Courier New', Courier, monospace; font-size: 12px;"><ul id="m-soc2"><br />
<li><a class="twitter" href="<span style="color: red;">#</span>"></a></li><br />
<li><a class="facebook" href="<span style="color: red;">#</span>"></a></li><br />
<li><a class="google-plus" href="<span style="color: red;">#</span>"></a></li><br />
<li><a class="pinterest" href="<span style="color: red;">#</span>"></a></li><br />
<li><a class="rss" href="<span style="color: red;">#</span>"></a></li><br />
</ul></span></blockquote>
<div>
Luego, sustituye las almohadillas: "<span style="color: red;">#</span>",
por la dirección web de cada página respectivamente. Es fácil saber a
que página corresponde cada enlace, ya que cada linea lleva el nombre
de la red social respectivamente en el atributo: "class".</div>
<div>
<br /></div>
<div>
<h3>
Cómo Agregar y Editar el menú desplegable</h3>
</div>
<div>
</div>
<div>
Ve a Diseño y en el gadget del lado derecho de la cabecera, agrega el siguiente código:<br />
<code><br />
<span style="font-family: 'Courier New', Courier, monospace; font-size: 12px;"><ul id="nav"><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><li><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><a class="inicial" href="<span style="color: red;">#</span>"><span style="color: red;">Salud</span></a><br />
<ul><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><li><a href="<span style="color: red;">#</span>"><span style="color: red;">Salud 1</span></a></li><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><li><a href="<span style="color: red;">#</span>"><span style="color: red;">Salud 2</span></a></li><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span></ul><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span></li><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><li><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><a class="inicial" href="<span style="color: red;">#</span>"><span style="color: red;">Amore</span></a><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><ul><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><li><a href="<span style="color: red;">#</span>"><span style="color: red;">Amore 1</span></a></li><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><li><a href="<span style="color: red;">#</span>"><span style="color: red;">Amore 2</span></a></li><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span></ul><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span></li><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><li><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><a class="inicial" href="<span style="color: red;">#</span>"><span style="color: red;">Belleza</span></a><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><ul><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><li><a href="<span style="color: red;">#</span>"><span style="color: red;">Belleza 1</span></a></li><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><li><a href="<span style="color: red;">#</span>"><span style="color: red;">Belleza 2</span></a></li><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><li><a href="<span style="color: red;">#</span>"><span style="color: red;">Belleza 3</span></a></li><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><span class="Apple-tab-span" style="white-space: pre;"> </span></ul><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span></li><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><li><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><a class="inicial" href="<span style="color: red;">#</span>"><span style="color: red;">Moda</span></a><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><ul><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><li><a href="<span style="color: red;">#</span>"><span style="color: red;">Moda 1</span></a></li><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><li><a href="<span style="color: red;">#</span>"><span style="color: red;">Moda 2</span></a></li><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><li><a href="<span style="color: red;">#</span>"><span style="color: red;">Moda 3</span></a></li><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><li><a href="<span style="color: red;">#</span>"><span style="color: red;">Moda 4</span></a></li><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><span class="Apple-tab-span" style="white-space: pre;"> </span></ul><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span></li><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><li><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><a class="inicial" href="<span style="color: red;">#</span>"><span style="color: red;">Recetas</span></a><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><ul><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><li><a href="<span style="color: red;">#</span>"><span style="color: red;">Recetas 1</span></a></li><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><li><a href="<span style="color: red;">#</span>"><span style="color: red;">Recetas 2</span></a></li><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span></ul><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span></li><br />
<li><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><a class="inicial" href="<span style="color: red;">#</span>"><span style="color: red;">Viajes</span></a><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span></li><br />
<br />
</ul></span></code></div>
<div>
Luego, edita lo que esta resaltado de rojo, guíate por cada linea de código. En donde están las almohadillas "<span style="color: red;">#</span>",
pones la dirección de la página a donde quieres que te dirija, y
enseguida está el texto que corresponde a cada enlace respectivamente.<br />
<br />
Puedes agregar más enlaces dentro de cada sección con enlaces, o bien
puedes quitarlos. Por ejemplo, vamos a suponer que quieres quitar el
último enlace de <b>Moda</b>, entonces, quitarías esta linea:<br />
<blockquote class="tr_bq">
<span style="font-family: 'Courier New', Courier, monospace; font-size: 12px;"><li><a href="</span><span style="color: red; font-family: 'Courier New', Courier, monospace; font-size: 12px;">#</span><span style="font-family: 'Courier New', Courier, monospace; font-size: 12px;">"></span><span style="color: red; font-family: 'Courier New', Courier, monospace; font-size: 12px;">Moda 4</span><span style="font-family: 'Courier New', Courier, monospace; font-size: 12px;"></a></li></span></blockquote>
Si por lo contrario quisieras agregar otro enlace en <b>Recetas</b>, entonces colocarías una linea de código debajo de la última que haya, es decir, debajo de:<br />
<br />
<span style="font-family: 'Courier New', Courier, monospace; font-size: 12px;"><li><a href="</span><span style="color: red; font-family: 'Courier New', Courier, monospace; font-size: 12px;">#</span><span style="font-family: 'Courier New', Courier, monospace; font-size: 12px;">"></span><span style="color: red; font-family: 'Courier New', Courier, monospace; font-size: 12px;">Recetas 2</span><span style="font-family: 'Courier New', Courier, monospace;"><span style="font-size: 12px;"></a></li> <i>pondrías</i>:</span></span><br />
<blockquote class="tr_bq">
<span style="font-family: 'Courier New', Courier, monospace; font-size: 12px;"><li><a href="</span><span style="color: red; font-family: 'Courier New', Courier, monospace; font-size: 12px;">#</span><span style="font-family: 'Courier New', Courier, monospace; font-size: 12px;">"></span><span style="color: red; font-family: 'Courier New', Courier, monospace; font-size: 12px;">Recetas 3</span><span style="font-family: 'Courier New', Courier, monospace; font-size: 12px;"></a></li></span></blockquote>
...y así sucesivamente. Claro que, con tus respectivos textos y direcciones web de las páginas que editarás en el código.</div>
<h3>
Cómo Agregar y Editar el carrusel</h3>
<div>
</div>
<div>
Desde Diseño, identifica el gadget donde colocarás el HTML del carrusel (ver imagen arriba del diseño) y agregas esto:<br />
<br />
<code><br />
<div class="infiniteCarousel"><br />
<div class="wrapper" style="overflow-x: hidden; overflow-y: hidden; "><br />
<ul><br />
<li><a href="<span style="color: red;">#</span>"><img alt="" src="<span style="color: red;">URL DE LA IMAGEN</span>" /><span><span style="color: red;">Texto que se muestra</span></span></a></li></code><br />
<span style="font-family: monospace;"><li> <a href="<span style="color: red;">#</span>"> <img alt="" src="<span style="color: red;">URL DE LA IMAGEN</span>" /><span ><span style="color: red;">Texto que se muestra<</span>/span></a></li></span><br />
<span style="font-family: monospace;"><li><a href="<span style="color: red;">#</span>"><img alt="" src="<span style="color: red;">URL DE LA IMAGEN</span>" /><span><span style="color: red;">Texto que se muestra</span></span></a></li></span><br />
<span style="font-family: monospace;"><li><a href="<span style="color: red;">#</span>"><img alt="" src="<span style="color: red;">URL DE LA IMAGEN</span>" /><span><span style="color: red;">Texto que se muestra<</span>/span></a></li></span><br />
<span style="font-family: monospace;"><li><a href="<span style="color: red;">#</span>"><img alt="" src="<span style="color: red;">URL DE LA IMAGEN</span>"/><span><span style="color: red;">Texto que se muestra</span></span></a></li></span><br />
<span style="font-family: monospace;"><li><a href="<span style="color: red;">#</span>"><img alt="" src="<span style="color: red;">URL DE LA IMAGEN</span>"/><span><span style="color: red;">Texto que se muestra</span></span></a></li></span><br />
<span style="font-family: monospace;"></ul> </span><br />
<span style="font-family: monospace;"></div> </span><br />
<span style="font-family: monospace;"></div></span></div>
<br />
Cada imagen con su enlace y texto que se mostrará al poner el puntero del ratón sobre la imagen, viene resaltado de <span style="color: red;">rojo</span>, y cada uno está dentro de un elemento de lista, es decir dentro de<span style="font-family: 'Courier New', Courier, monospace;"> <li>...</li>, </span>así<span style="font-family: inherit;"> que si necesitas más </span>imágenes<span style="font-family: inherit;">, </span>tendrás<span style="font-family: inherit;"> que repetir todo esto:</span><br />
<blockquote class="tr_bq">
<span style="font-family: 'Courier New', Courier, monospace;"><li><a href="</span><span style="color: red; font-family: 'Courier New', Courier, monospace;">#</span><span style="font-family: 'Courier New', Courier, monospace;">"><img alt="" src="</span><span style="color: red; font-family: 'Courier New', Courier, monospace;">URL DE LA IMAGEN</span><span style="font-family: 'Courier New', Courier, monospace;">"/><span></span><span style="color: red; font-family: 'Courier New', Courier, monospace;">Texto que se muestra</span><span style="font-family: 'Courier New', Courier, monospace;"></span></a></li></span></blockquote>
<div>
...antes de <span style="font-family: 'Courier New', Courier, monospace;"></ul></span> de ese código.<br />
<br />
Donde esta la almohadilla "<span style="color: red;">#</span>", pones
la dirección de la página a donde se va a dirigir, y el resto es para la
URL de la imagen, y para el texto que se muestra al poner el puntero
del ratón sobre la imagen. La medida recomendada para la imagen es de<b> 175 pixeles de ancho x 155 pixeles de alto</b>.<br />
<br />
Puedes usar otro efecto en las imágenes del carrusel, si ya estas
familiarizado con la Edición de HTML de la plantilla y para ello deberás
buscar estas lineas de código:<br />
<br />
<span style="font-family: 'Courier New', Courier, monospace;">.infiniteCarousel ul li a:hover span{<span style="color: red;">height:90px; padding-top:80px;</span></span></div>
<br />
Luego, lo que resalte de <span style="color: red;">rojo</span>, lo
eliminas o bien, lo vuelves comentario poniendo una barra-asterisco al
principio y asterisco barra al final, como se muestra abajo, para que no
se interpreten esas propiedades, de ese modo, puedes usar los dos
estilos cuando quieras, poniéndolo y quitándolo ¿me explico? Entonces
quedaría así:<br />
<br />
<span style="font-family: 'Courier New', Courier, monospace;">.infiniteCarousel ul li a:hover span{<span style="color: blue;"><b>/*</b></span></span><span style="color: red; font-family: 'Courier New', Courier, monospace;">height:90px; padding-top:80px;</span><span style="color: blue; font-family: 'Courier New', Courier, monospace; font-weight: bold;">*/</span><span style="font-family: 'Courier New', Courier, monospace; font-weight: bold;">...</span><span style="font-family: inherit;">el resto de las propiedades</span><br />
<span style="color: blue; font-family: 'Courier New', Courier, monospace;"><b><br />
</b></span><br />
<span style="font-family: inherit;">Enseguida de eso, </span>están<span style="font-family: inherit;"> el resto de las propiedades para la capa con el texto que se muestra en el evento hover (al poner el puntero del </span>ratón<span style="font-family: inherit;"> sobre la imagen). Y el resultado sería este:</span><br />
<span style="font-family: inherit;"><br />
</span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibZfafBTpVHgPEtVxBLe9bwB1odizwaYVJE1gditExjqvIYv5PdyXHYHG61xYxAUISbY3T9RZzoqpp6a824dS4iYJ8RKapdcYUuQSRhmN68lrYFsXEev2C9fo-IfVnkKxYpenufkMlXMw/s1600/hover-efect-galeria.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Ejemplo del evento hover " border="0" class="noborde" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibZfafBTpVHgPEtVxBLe9bwB1odizwaYVJE1gditExjqvIYv5PdyXHYHG61xYxAUISbY3T9RZzoqpp6a824dS4iYJ8RKapdcYUuQSRhmN68lrYFsXEev2C9fo-IfVnkKxYpenufkMlXMw/s1600/hover-efect-galeria.jpg" title="" /></a></div>
<span style="font-family: inherit;"><br />
</span><br />
¡Ah!, pero, ¿quieres crear tu propio look?, entonces ¡ve al <span style="color: #b45f06;">Diseñador de plantillas</span> y consíguelo!<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0eRjSqNyZuEqzahMtAepGHJ2XVF-yUPL1o_lc8b2ndE51bG_YDW5f874-VrK44NOmd3WHIlcoT6o7DC9Yp3Ju9Pd8TeNRDDxB0PD00noSuTu5xd9_jnCmEmFEXQnPFShI4UNv8JdmKgo/s1600/fashionista-gris.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" class="noborde" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0eRjSqNyZuEqzahMtAepGHJ2XVF-yUPL1o_lc8b2ndE51bG_YDW5f874-VrK44NOmd3WHIlcoT6o7DC9Yp3Ju9Pd8TeNRDDxB0PD00noSuTu5xd9_jnCmEmFEXQnPFShI4UNv8JdmKgo/s400/fashionista-gris.jpg" height="400" width="285" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
¿Todavía<span style="font-family: inherit;"> más claridad? No hay problema, puedes conseguirlo </span>fácilmente cambiando los colores... <span style="font-family: inherit;"> </span> <br />
<span style="font-family: inherit;"><br />
</span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-1_1jGUzAmb0/T4kMa7r61QI/AAAAAAAAJpc/vaCBATNGnWo/s1600/fashionista-blanco.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" class="noborde" src="http://3.bp.blogspot.com/-1_1jGUzAmb0/T4kMa7r61QI/AAAAAAAAJpc/vaCBATNGnWo/s400/fashionista-blanco.jpg" height="400" width="286" /></a></div>
<span style="font-family: inherit;"><br />
</span><br />
<span style="font-family: inherit;">Bordes con un tono más fuerte, fuentes distintas, colores brillantes, en fin todo lo que buscas lo </span>conseguirás<span style="font-family: inherit;"> muy </span>fácilmente<span style="font-family: inherit;"> gracias a las bondades del </span><span style="color: #b45f06;">Diseñador</span><span style="font-family: inherit;"><span style="color: #b45f06;"> de plantillas</span> ;)</span><br />
<span style="font-family: inherit;"><br />
</span><br />
<b>¡Así<span style="font-family: inherit;"> que, ve a jugar al <span style="color: #b45f06;">D</span></span><span style="color: #b45f06;">iseñador</span><span style="font-family: inherit;"><span style="color: #b45f06;"> de plantilla</span><span style="color: #bf9000;">s</span> y </span>diviértete creando tu propio look!</b><br />
<br />
<br />
<b><u>ACTUALIZACIÓN</u>.</b> He agregado iconos sociales de Twitter,
Pinterest, Facebook, y Google+ al perfil del autor que aparece debajo de
las entradas, para que puedan seguirte.<br />
<br />
Para que aparezca debajo de cada entrada, tienes que ir a Diseño, luego
hacer click en Editar, en la sección que corresponde a las entradas, que
reconoces por que dice "Entradas del blog".<br />
<br />
Una vez que se abra la ventanita con las opciones de configuración de las entradas, <b>marca la casilla que dice</b>: Mostrar el perfil del autor debajo de la entrada, tal y como puedes apreciar el la siguiente imagen.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_hmAhHJvAHy4y5HR_-72bgEG5rehc_pZY2wVMr9PgYv_GRGDrGimGmyBuN_XBrN-LNyzHwmR66iuO8xDl6lhrYnWl7Ubdf_v16s234CyZhoUB67Q4IeTuwV3YC6Xnq5pR7ShLxHytIYI/s1600/perfil-del-autor.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_hmAhHJvAHy4y5HR_-72bgEG5rehc_pZY2wVMr9PgYv_GRGDrGimGmyBuN_XBrN-LNyzHwmR66iuO8xDl6lhrYnWl7Ubdf_v16s234CyZhoUB67Q4IeTuwV3YC6Xnq5pR7ShLxHytIYI/s1600/perfil-del-autor.png" /></a></div>
<br />
Luego tendrás que <b>agregar la dirección web</b> de cada red social respectivamente.<br />
<br />
Para lograrlo, ve a Plantilla > Editar HTML, y busca, con la ayuda
del buscador del editor que activas si haces click dentro del editor,
luego, pulsas CTRL + F: <span style="background-color: #ffe599; font-family: monospace;"><ul class='so-perfil'></span><br />
<br />
<code><span style="background-color: #ffe599;"><ul class='so-perfil'></span><br />
<li><a class='twitter' href='<span style="color: #990000;">#URL_DE_PAGINA_DE_TWITTER</span>'><span><span style="color: blue; font-family: inherit;">Sígueme en Twitter</span></span></a></li><br />
<li><a class='facebook' href='<span style="color: #990000;">#</span><span style="font-family: monospace;"><span style="color: #990000;">URL_DE_PAGINA_DE_FACEBOOK</span></span>'><span><span style="color: blue; font-family: monospace;">Sígueme en Facebook</span></span></a></li><br />
<li><a class='googlep' href='<span style="color: #990000;">#</span><span style="font-family: monospace;"><span style="color: #990000;">URL_DE_PAGINA_DE_GOOGLE_PLUS</span></span>'><span><span style="color: blue; font-family: monospace;">Sígueme en Google+</span></span></a></li> </code><br />
<code><li><a class='pinterest' href='<span style="color: #990000;">#</span><span style="font-family: monospace;"><span style="color: #990000;">URL_DE_PAGINA_DE_PINTEREST</span></span>'><span><span style="color: blue; font-family: monospace;">Sígueme en Pinterest</span></span></a></li></code><br />
<code></ul><br />
</code><br />
<br />
Debajo, viene el código de cada elemento (el icono con su respectivo
enlace) tal y como se muestra en el código que puse arriba. <br />
<br />
Pon <b>la dirección web</b> (URL) de cada página de la red social respectivamente, como se indica en el texto coloreado de <span style="color: #990000;">guinda</span>, y el texto que he coloreado de <span style="color: blue;">azul</span>,
es el texto que aparecerá en el tooltip de cada icono respectivamente,
es decir, al poner el puntero del ratón encima de cada icono, y que
también puedes editar si quieres.<br />
<br />
Si tienes dudas me dices ;)<br />
<br />
<div style="text-align: center;">
</div>
<a class="descargar-e" href="https://app.box.com/s/pb3aacsa90g4szb3sj72" rel="nofollow" style="text-align: center;" target="_blank">Descargar</a><br />
-<br />
Información tomada de: <a href="http://www.compartidisimo.com/2012/04/introduciendo-la-plantilla-para-blogger.html" target="_blank">http://www.compartidisimo.com/2012/04/introduciendo-la-plantilla-para-blogger.html</a>Alfonso Canterohttp://www.blogger.com/profile/04957211769182442859noreply@blogger.com0tag:blogger.com,1999:blog-8990771625177905142.post-57072526416777145122014-08-15T19:07:00.004+02:002014-08-15T19:10:34.869+02:00Cómo descubrir las contraseñas ocultas bajo los asteriscos<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.baluart.net/files/images/2823/password-oculto.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://www.baluart.net/files/images/2823/password-oculto.jpg" height="165" width="400" /></a></div>
La tecnología ha llegado para resolvernos la vida, muy cierto. Y un buen ejemplo se encuentra en la opción de autorelleno de nombre de usuario y password que disfrutamos en nuestra cuenta de correo. No hay forma más sencilla de iniciar sesión que al alcance de un clic. ¿O no?<br />
<br />
<a name='more'></a><br />
<br />
Sin embargo, ha pasado tanto desde la última vez que escribimos nuestros datos, que llegada la hora de necesitarlos, ni los recordamos. ¿Entonces? Sobretodo si no contamos con un archivo de notas milagroso, en el que copiáramos un respaldo, pensamos: ¿No sería grandioso saber cómo descubrir las contraseñas ocultas bajo los asteriscos?<br />
<br />
Pues a continuación, les dejamos un paso a paso con la forma más sencilla para convertir esos asteriscos en una clave legible y sin necesidad de herramientas externas o conocimientos avanzados. ¡No se lo pueden perder!<br />
<br />
Paso 1.- Hacer clic derecho en el recuadro de la contraseña y escoger "Inspeccionar Elemento".<br />
-<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.baluart.net/files/images/2823/password-oculto-2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://www.baluart.net/files/images/2823/password-oculto-2.jpg" height="160" width="400" /></a></div>
Esto abrirá la ventana de inspector de documentos (document inspector)
en la que automáticamente saldrá resaltado el campo "<input
type>".<br />
-<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.baluart.net/files/images/2823/password-oculto-3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://www.baluart.net/files/images/2823/password-oculto-3.jpg" height="166" width="400" /></a></div>
<br />
Paso 2.- Allí, reemplazar la palabra "password" por la palabra "text". (Entiéndase, escribir una en vez de la otra).<br />
-<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.baluart.net/files/images/2823/password-oculto-4.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://www.baluart.net/files/images/2823/password-oculto-4.jpg" height="165" width="400" /> </a></div>
<div class="separator" style="clear: both; text-align: center;">
Inmediatamente aparecerá la contraseña que hasta entonces estuvo oculta tras los asteriscos!</div>
<div class="separator" style="clear: both; text-align: center;">
-</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.baluart.net/files/images/2823/password-oculto-5.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://www.baluart.net/files/images/2823/password-oculto-5.jpg" height="166" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
Nada más sencillo. ¿Verdad?<br />
Dato adicional: Este demo se hizo utilizando Safari, pero <span class="IL_AD" id="IL_AD7">funciona</span> en todos los navegadores, Google Chrome, Firefox e Internet Explorer. En caso de IE, presionar F12 para abrir la ventana de <span class="IL_AD" id="IL_AD4">herramientas</span> y luego presionar Ctrl+B para activar el elemento modo selección.<br />
-<br />
<span style="font-size: small;"><b>Lo he probado y funciona de verdad. </b></span><br />
-<br />
Información tomada de: <a href="http://www.baluart.net/articulo/como-descubrir-las-contrasenas-ocultas-bajo-los-asteriscos" target="_blank">http://www.baluart.net/articulo/como-descubrir-las-contrasenas-ocultas-bajo-los-asteriscos</a>Alfonso Canterohttp://www.blogger.com/profile/04957211769182442859noreply@blogger.com0tag:blogger.com,1999:blog-8990771625177905142.post-90405162628786953402014-07-27T11:35:00.000+02:002014-07-27T11:41:35.112+02:00Windows 8: ¿Cómo restaurar el sistema? <b>Una de las mejoras incluidas en Windows 8</b> esta relacionado con la posibilidad de restaurar nuestro sistema operativo con mayor facilidad. La función “<b>Restaurar tu PC sin afectar tus archivos o haciendo un borrado total</b>” nos permitirá restablecer nuestro Windows 8 sin que se borren nuestros archivos pero si las aplicaciones instaladas. Respecto de las aplicaciones instaladas desde la Tienda de aplicaciones de Microsoft serán reinstaladas automáticamente. Básicamente podemos decir que es como una reinstalación de Windows, simplificada para el usuario y así mitigar los problemas que podríamos llegar a tener en nuestro equipo.
-
<b> </b><br />
<br />
<a name='more'></a><br /><br />
<b>Con el botón de reinicio </b><br />
-En la pantalla de Inicio o desde la barra lateral derecha buscamos la opción de “Reinicio”.<br />
-La pulsamos <b>a la vez que pulsamos la tecla “shift” </b> (la de las mayúsculas debajo de Bloq mayús)<br />
Al reiniciar entrará en el modo seguro automáticamente en esta ocasión.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP8pzOIDQr0VmvmkeTeEj27W77gGFlrBoDIlvsHFKXBX-QRrFShok6AdLgwXoX8aXIz5v2Yx0TC7urZ0PDdkJeYkatYQAP53iOcgG59Mopgn1boc7MtgxIxmZuJZ94t9SiYZrtPTNc-Ac/s1600/eset-02.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP8pzOIDQr0VmvmkeTeEj27W77gGFlrBoDIlvsHFKXBX-QRrFShok6AdLgwXoX8aXIz5v2Yx0TC7urZ0PDdkJeYkatYQAP53iOcgG59Mopgn1boc7MtgxIxmZuJZ94t9SiYZrtPTNc-Ac/s1600/eset-02.JPG" height="300" width="400" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLmPFthtgOPY0RSKTPJSPDo70RUlr320qBDziGEToV1CjcbIswRJbmOgJjoFZylodIYKW4deSt1zeIXvYDLolx5jw31YgD4qFbo6hsX_T7HgnjqSCcw-WjEBf-CtnlwLVwH538CP0fSZU/s1600/modo-seguro-reinicio-270414.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLmPFthtgOPY0RSKTPJSPDo70RUlr320qBDziGEToV1CjcbIswRJbmOgJjoFZylodIYKW4deSt1zeIXvYDLolx5jw31YgD4qFbo6hsX_T7HgnjqSCcw-WjEBf-CtnlwLVwH538CP0fSZU/s1600/modo-seguro-reinicio-270414.JPG" height="320" width="236" /></a></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
-
Haga clic en <b>Solucionar problemas</b>.</div>
<div style="text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1SXJFfPRS2tRbCwkxWuFRUjuerTTiuD4-PVpZs2IpjV-4GRpR3OD2P-RawPd1JCZAWpJBk0I0SuJ6M7Y4hQ1NoSrJsWUk58j8r9uEQNlqoWCRQS_Ka8_N7PFeq50fkonJosuW5HeBzfM/s1600/eset-03.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1SXJFfPRS2tRbCwkxWuFRUjuerTTiuD4-PVpZs2IpjV-4GRpR3OD2P-RawPd1JCZAWpJBk0I0SuJ6M7Y4hQ1NoSrJsWUk58j8r9uEQNlqoWCRQS_Ka8_N7PFeq50fkonJosuW5HeBzfM/s1600/eset-03.JPG" height="300" width="400" /></a></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
-Presione <b>Restablecer tu PC.</b></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBcb28AVUob6p5ajagXaRQlIwbL5YjImz36AwGnCdRJjEszg_lEGuMcKPBpi9-DpFzbUkFOAymB6ZKM7nX0VZDU261udud9mW-ny5tE1uXLR5GmiRc3inPE10mYWJ0WroM33w4GqVGpGw/s1600/eset-04222.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBcb28AVUob6p5ajagXaRQlIwbL5YjImz36AwGnCdRJjEszg_lEGuMcKPBpi9-DpFzbUkFOAymB6ZKM7nX0VZDU261udud9mW-ny5tE1uXLR5GmiRc3inPE10mYWJ0WroM33w4GqVGpGw/s1600/eset-04222.jpg" height="300" width="400" /></a></div>
<div style="text-align: left;">
A continuación nos dará varias opciones<b> entre ellas estas:</b></div>
<div style="text-align: left;">
<b>1-Sólo quitar los archivos </b>borra los archivos.</div>
<div style="text-align: left;">
<b>2-</b> <b>Limpiar completamente la unidad</b> hace un <a href="http://onsoftware.softonic.com/como-borrar-archivo-seguridad">borrado seguro</a> de los datos, de modo que no se puedan <a href="http://onsoftware.softonic.com/recuperar-archivos-borrados">recuperar</a></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<b>Nota:</b> Con la primera opción yo la he utilizado y suele quedar como cuando lo utilizamos por primera vez, pero si no queda bién siempre queda la la segunda opción. </div>
<div style="text-align: left;">
-</div>
<div style="text-align: left;">
Restablecer deja Windows como <b>recién salido de la tienda</b>. Se explica en la ventana emergente cuando inicias el proceso.</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7C5tXIWWgsiG3tr-U48yMLF5dw-kdib8lf6oQHGZ5iFZCjh9uqlg5M_ppuZ7gJ1bLtpFa9a5kxCA5McxGbP8tJHFs3X4tKuFi6sXtFFa14TiFTujX3Rr7UzjSJ7_S5CyUKshonlysMd0/s1600/Restablecer-el-PC.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7C5tXIWWgsiG3tr-U48yMLF5dw-kdib8lf6oQHGZ5iFZCjh9uqlg5M_ppuZ7gJ1bLtpFa9a5kxCA5McxGbP8tJHFs3X4tKuFi6sXtFFa14TiFTujX3Rr7UzjSJ7_S5CyUKshonlysMd0/s1600/Restablecer-el-PC.JPG" height="205" width="400" /></a></div>
<div style="text-align: left;">
<br />
Otras páginas con información:<br />
<a href="http://articulos.softonic.com/guia-de-win-8-restaurar-reinstalar-reset" target="_blank">http://articulos.softonic.com/guia-de-win-8-restaurar-reinstalar-reset</a><br />
-<br />
<a href="http://www.elgrupoinformatico.com/como-arrancar-modo-seguro-windows-formas-t18978.html" target="_blank">http://www.elgrupoinformatico.com/como-arrancar-modo-seguro-windows-formas-t18978.html</a></div>
<div style="text-align: center;">
<br /></div>
Alfonso Canterohttp://www.blogger.com/profile/04957211769182442859noreply@blogger.com0tag:blogger.com,1999:blog-8990771625177905142.post-15395048096900538202014-05-20T16:30:00.001+02:002014-05-20T16:43:51.699+02:00Efectos de bordes redondeados en las imágenes<br />
<br />
<br />
<br />
<br />
<br />
<br />
<section class="post-body entry-content" id="post-body-3033983721009622953" itemprop="articleBody" style="background-color: white; border-top-color: rgb(235, 235, 235); border-top-style: double; border-top-width: 3px; color: #5e6a72; font-family: 'Open Sans', sans-serif, 'Lucida Grande', Arial, Tahoma, Helvetica; font-size: 12px; line-height: 21.600000381469727px; margin: 5px 0px; padding-top: 18px;"><div style="margin: 0px; padding: 0px;">
<div class="separator" style="clear: both; margin: 0px; padding: 0px; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ_RqYI5PExjZJJ4SLArSPVbJrTgtoeXpLmFvEhkiEQ8aVRLvOVpJav0q1hedhkjF05TFormvMGQD5e11bt_hOahYiTjyoyvNa80WqkOu2cw73ap0SXLqQEaVXX1QKPrnEMOSeQQ8WMcTb/s0/border-radius.png" style="border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; border: 1px solid rgb(204, 204, 204); height: auto; max-width: 94%; width: auto;" /></div>
<br />
<div style="margin: 0px; padding: 0px; text-align: justify;">
Una de las ventajas del <span style="font-weight: bolder;">CSS3</span> es porder aplicar <span style="font-weight: bolder;">bordes redondeados</span> sin complicarnos la existencia, siempre y cuando quien vea la página use un navegador moderno, porque ya sabemos que en navegadores antiguos muchos estilos no son reconocidos.</div>
<div style="margin: 0px; padding: 0px; text-align: justify;">
<br />
<a name='more'></a></div>
<div style="margin: 0px; padding: 0px; text-align: justify;">
Y una forma de poder usar estos bordes es con las imágenes de las entradas, a las que les podemos aplicar algunos efectos al pasar el cursor tales como sombreado y bordes redondeados acompañados de transiciones.</div>
<div style="margin: 0px; padding: 0px; text-align: justify;">
<br /></div>
<div style="margin: 0px; padding: 0px; text-align: justify;">
La declaración del borde redondeado es <span style="font-weight: bolder;">border-radius</span>, y en ella podemos aplicar el borde redondeado a las cuatro esquinas de la imagen, o sólo a algunas de ellas.</div>
<div style="margin: 0px; padding: 0px; text-align: justify;">
<br /></div>
<div style="margin: 0px; padding: 0px; text-align: justify;">
A continuación verás unos ejemplos de estos bordes y cómo se comportan las imágenes al pasar el cursor sobre ellas.</div>
Puedes usar el que más te guste, sólo copia el código, luego entra a la <span style="font-weight: bolder;">Edición HTML</span> de la plantilla y pega dicho código antes de <span style="font-weight: bolder;">]]></b:skin></span><br />
<br />
<br />
<br />
<b>El primer efecto lo podéis ver aquí en este blog</b>: <a href="http://fruteriaanipozoblanco.blogspot.com.es/" target="_blank">http://fruteriaanipozoblanco.blogspot.com.es/</a><br />
<br />
<br />
<center>
<img border="0" class="bordeimg1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_FuM_x4dzz34nD4UYwd20BrmZgbkve3U_g7_eH36qnQ69sPpQCDRRQlAaj2j_c7kSTpghxkbQch62nsD4MxQlmQ_qW38OznNK8vaWzKI2-t0lWNLUo4eEYyCoHoT9xLKH3ROe7Qk43Yhi/s400/paisaje_montanas.jpeg" height="300" style="-webkit-transition: all 1s; border: 1px solid rgb(204, 204, 204); height: auto; max-width: 94%; padding: 15px !important; transition: all 1s; width: auto;" width="400" /></center>
<br />
<blockquote style="-webkit-transition: all 0.2s linear; background-color: #f1f1f1; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid rgb(230, 230, 230); clear: both; color: #424242; margin: 10px 30px; overflow: auto; padding: 4px 10px; transition: all 0.2s linear; width: auto;">
.post-body img {<br />
padding:15px; <span style="color: green;">/* Espacio entre la imagen y el borde */</span><br />
background:#FFF; <span style="color: green;">/* Color de fondo que se ve entre el espacio */</span><br />
-moz-transition: all 1s;<br />
-webkit-transition: all 1s;<br />
-o-transition: all 1s;<br />
}<br />
.post-body img:hover {<br />
border-radius: 0% 50%; <span style="color: green;">/* Borde redondeado */</span><br />
box-shadow: 0px 0px 15px #000; <span style="color: green;">/* Sombra */</span><br />
-moz-transition: all 1s;<br />
-webkit-transition: all 1s;<br />
-o-transition: all 1s;<br />
cursor:pointer;<br />
}</blockquote>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<center>
<img border="0" class="bordeimg2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_FuM_x4dzz34nD4UYwd20BrmZgbkve3U_g7_eH36qnQ69sPpQCDRRQlAaj2j_c7kSTpghxkbQch62nsD4MxQlmQ_qW38OznNK8vaWzKI2-t0lWNLUo4eEYyCoHoT9xLKH3ROe7Qk43Yhi/s400/paisaje_montanas.jpeg" height="300" style="-webkit-transition: all 1s; border-bottom-left-radius: 0px; border-bottom-right-radius: 50%; border-top-left-radius: 50%; border-top-right-radius: 0px; border: 0px; box-shadow: rgb(0, 0, 0) 0px 0px 15px; height: auto; max-width: 94%; padding: 15px !important; transition: all 1s; width: auto;" width="400" /></center>
<br />
<blockquote style="-webkit-transition: all 0.2s linear; background-color: #f1f1f1; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid rgb(230, 230, 230); clear: both; color: #424242; margin: 10px 30px; overflow: auto; padding: 4px 10px; transition: all 0.2s linear; width: auto;">
.post-body img {<br />
border-radius: 50% 0; <span style="color: green;">/* Borde redondeado */</span><br />
box-shadow: 0px 0px 15px #000; <span style="color: green;">/* Sombra */</span><br />
padding:15px; <span style="color: green;">/* Espacio entre la imagen y el borde */</span><br />
background:#FFF; <span style="color: green;">/* Color de fondo que se ve entre el espacio */</span><br />
-moz-transition: all 1s;<br />
-webkit-transition: all 1s;<br />
-o-transition: all 1s;<br />
}<br />
.post-body img:hover {<br />
border-radius:0; <span style="color: green;">/* Con esto quitamos el borde redondeado */</span><br />
-moz-transition: all 1s;<br />
-webkit-transition: all 1s;<br />
-o-transition: all 1s;<br />
cursor:pointer;<br />
}</blockquote>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<center>
<img border="0" class="bordeimg3" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_FuM_x4dzz34nD4UYwd20BrmZgbkve3U_g7_eH36qnQ69sPpQCDRRQlAaj2j_c7kSTpghxkbQch62nsD4MxQlmQ_qW38OznNK8vaWzKI2-t0lWNLUo4eEYyCoHoT9xLKH3ROe7Qk43Yhi/s400/paisaje_montanas.jpeg" height="300" style="-webkit-transition: all 1s; border: none; height: auto; max-width: 94%; padding: 0px !important; transition: all 1s; width: auto;" width="400" /></center>
<br />
<blockquote style="-webkit-transition: all 0.2s linear; background-color: #f1f1f1; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid rgb(230, 230, 230); clear: both; color: #424242; margin: 10px 30px; overflow: auto; padding: 4px 10px; transition: all 0.2s linear; width: auto;">
.post-body img {<br />
padding:0;<br />
border:0;<br />
-moz-transition: all 1s;<br />
-webkit-transition: all 1s;<br />
-o-transition: all 1s;<br />
}<br />
.post-body img:hover {<br />
border-radius: 50%; <span style="color: green;">/* Borde redondeado */</span><br />
box-shadow: 0px 0px 15px #000; <span style="color: green;">/* Sombra */</span><br />
-moz-transition: all 1s;<br />
-webkit-transition: all 1s;<br />
-o-transition: all 1s;<br />
cursor:pointer;<br />
}</blockquote>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<center>
<img border="0" class="bordeimg4" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_FuM_x4dzz34nD4UYwd20BrmZgbkve3U_g7_eH36qnQ69sPpQCDRRQlAaj2j_c7kSTpghxkbQch62nsD4MxQlmQ_qW38OznNK8vaWzKI2-t0lWNLUo4eEYyCoHoT9xLKH3ROe7Qk43Yhi/s400/paisaje_montanas.jpeg" height="300" style="-webkit-transition: all 1s; border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; border-top-left-radius: 50%; border-top-right-radius: 50%; border: 0px; box-shadow: rgb(0, 0, 0) 0px 0px 15px; height: auto; max-width: 94%; padding: 0px !important; transition: all 1s; width: auto;" width="400" /></center>
<br />
<blockquote style="-webkit-transition: all 0.2s linear; background-color: #f1f1f1; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid rgb(230, 230, 230); clear: both; color: #424242; margin: 10px 30px; overflow: auto; padding: 4px 10px; transition: all 0.2s linear; width: auto;">
.post-body img {<br />
border-radius: 50%; <span style="color: green;">/* Borde redondeado */</span><br />
box-shadow: 0px 0px 15px #000; <span style="color: green;">/* Sombra */</span><br />
padding:0;<br />
border:0;<br />
-moz-transition: all 1s;<br />
-webkit-transition: all 1s;<br />
-o-transition: all 1s;<br />
}<br />
.post-body img:hover {<br />
box-shadow: 0; <span style="color: green;">/* Con esto eliminamos la sombra */</span><br />
border-radius: 0; <span style="color: green;">/* Con esto eliminamos el borde redondeado */</span><br />
-moz-transition: all 1s;<br />
-webkit-transition: all 1s;<br />
-o-transition: all 1s;<br />
cursor:pointer;<br />
}</blockquote>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<center>
<img border="0" class="bordeimg5" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_FuM_x4dzz34nD4UYwd20BrmZgbkve3U_g7_eH36qnQ69sPpQCDRRQlAaj2j_c7kSTpghxkbQch62nsD4MxQlmQ_qW38OznNK8vaWzKI2-t0lWNLUo4eEYyCoHoT9xLKH3ROe7Qk43Yhi/s400/paisaje_montanas.jpeg" height="300" style="-webkit-transition: all 1s; border-bottom-left-radius: 45% 20%; border-bottom-right-radius: 45% 20%; border-top-left-radius: 45% 20%; border-top-right-radius: 45% 20%; border: none; box-shadow: rgb(0, 0, 0) 0px 0px 15px; height: auto; max-width: 94%; padding: 0px !important; transition: all 1s; width: auto;" width="400" /></center>
<br />
<blockquote style="-webkit-transition: all 0.2s linear; background-color: #f1f1f1; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid rgb(230, 230, 230); clear: both; color: #424242; margin: 10px 30px; overflow: auto; padding: 4px 10px; transition: all 0.2s linear; width: auto;">
.post-body img {<br />
border-radius: 45% / 20%; <span style="color: green;">/* Borde redondeado */</span><br />
box-shadow: 0px 0px 15px #000;<span style="color: green;"> /* Sombra */</span><br />
padding:0;<br />
-moz-transition: all 1s;<br />
-webkit-transition: all 1s;<br />
-o-transition: all 1s;<br />
}<br />
.post-body img:hover {<br />
border-radius: 0; <span style="color: green;">/* Con esto eliminamos el borde redondeado */</span><br />
-moz-transition: all 1s;<br />
-webkit-transition: all 1s;<br />
-o-transition: all 1s;<br />
cursor:pointer;<br />
}</blockquote>
<br />
<br />
Estos efectos se aplicarán a todas las imágenes de las entradas. Si quiseras usarlo sólo para las que tú elijas entonces cambia <span style="font-weight: bolder;">.post-body img</span> por <span style="font-weight: bolder;">.redondeado</span> y <span style="font-weight: bolder;">.post-body img:hover</span> por <span style="font-weight: bolder;">.redondeado:hover</span><br />
Luego en el código de tu imagen agrega la clase:<br />
<blockquote class="tr_bq" style="-webkit-transition: all 0.2s linear; background-color: #f1f1f1; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid rgb(230, 230, 230); clear: both; color: #424242; margin: 10px 30px; overflow: auto; padding: 4px 10px; transition: all 0.2s linear; width: auto;">
<img <span style="color: red;">class="redondeado"</span> src="URL de la imagen" /></blockquote>
<br />
<div style="margin: 0px; padding: 0px; text-align: justify;">
Esos son sólo unos ejemplos, y a partir de ellos cada quien puede modificarlo tanto como quiera agregando o eliminando más estilos, eso como siempre ya depende de cada quien. Pero como has podido ver, podemos conseguir que las imágenes de las entradas se vean más atractivas, que interactúen con el lector, y tan sólo ha sido añadiendo un poco de CSS.<br />
-<br />
Información tomada de: <a href="http://ciudadblogger.com/2012/02/efectos-de-bordes-redondeados-en-las.html" target="_blank">http://ciudadblogger.com/2012/02/efectos-de-bordes-redondeados-en-las.html</a></div>
<div>
<br /></div>
<div style="clear: both; margin: 0px; padding: 0px;">
</div>
</div>
</section>Alfonso Canterohttp://www.blogger.com/profile/04957211769182442859noreply@blogger.com0tag:blogger.com,1999:blog-8990771625177905142.post-28810778326010318682014-05-14T22:22:00.000+02:002014-05-14T22:26:52.117+02:00Instalar el mapa Topohispania 2.04 en el móvil o tablet android y utilizarlo como GPS de campo. Debido al gran número de consultas que he recibido sobre como intalar en
los móviles con android un mapa de los que se utilizan en los GPS
Garmin que utilizamos los senderistas para hacer nuestras rutas y no
perdernos en el campo.<br />
He decidido publicar esta entrada con un pequeño tutorial de como instalarlo:<br />
<br />
-Primero debemos descargar e instalar en el móvil la aplicación <b><a href="https://play.google.com/store/apps/details?id=com.orux.oruxmaps&feature=search_result#?t=W251bGwsMSwxLDEsImNvbS5vcnV4Lm9ydXhtYXBzIl0." target="_blank">OruxMaps</a></b><br />
"El móvil ya lo tenemos preparado para leer los mapas"<br />
<br />
-Segundo. Ahora nos vamos a nuestro PC. y vamos a instalar el <b><a href="http://www8.garmin.com/support/download_details.jsp?id=4435" target="_blank">BaseCamp de Garmin</a>.</b><br />
"Este programa nos va a servir para visualizar en nuestro PC. mapas de los que utiliza Garmin"<br />
<br />
-Tercero. Nos vamos a la página <b><a href="http://www.elgps.com/foroGPS/viewtopic.php?f=41&t=8646" target="_blank">Foro oficial del la tienda del GPS</a></b>, <b>(<a href="http://www.syncrobike.com/foro/viewtopic.php?f=25&t=2091" target="_blank">Página alternativa a la anterior</a>)</b>
en esta página descargamos el mapa Topohispania 2.04 versión para
"INSTALADOR PARA MAPSOURCE O BASECAMP", una vez descargado este mápa lo
instalamos y nos vamos al BaseCam que intalamos antes y lo abrimos y nos
debe aparecer el Topohispania (Deberemos buscarlo en una pestañita de
las que nos encontramos arriba de la aplicación y marcar la opción
Topohispania)<br />
"Ya tenemos en nuestro PC el mapa con los caminos de toda España"<br />
<br />
-Cuarto. Ahora descargamos <b><a href="http://www8.garmin.com/support/download_details.jsp?id=3291" target="_blank">MapInstall de Garmin</a></b>,
una vez instalada en nuestro PC. esta aplicación nos va a servir para
enviar el trozo de mapa del Topohispania que deseemos a nuestro móvil y
así utilizarlo en nuestras rutas de senderismo. El programa las pondrá
dentro de una carpeta llamada 'Garmin'-, poner esta carpeta dentro de la
carpeta 'Mapfiles' de Orux, abrir este programa, reiniciar el listado
de mapas para que reconozca los nuevos, abrirlos y andando... <br />
"Talvez en el móvil una vez abierto el OruxMaps debamos de irnos a la
opción de mapas y marcar el mapa Topohispania (Nuevo mapa gmapsupp)".<br />
<br />
Ya tenemos nuestro móvil para utilizarlo como un GPS Garmin de campo, para descargar y realizar rutas por la naturaleza.<br />
<br />
<div style="text-align: center;">
<b>Todas las aplicaciones que he utilizado en este tutorial son gratuitas </b></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ6KXkbDquL6q8jgoMGLxNNroZiVN4WuXmsbaplC_He57TZFbtsvnDcRBhshlUbaiaN1Yu0ZgaU9VzQkM75Xz92hvUGMjO9Od6OGXVnqjOiXWHq_yqcLtGZ7CqtVd1XJ2UXWATr14CJ3du/s640/oruxmaps.jpeg" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ6KXkbDquL6q8jgoMGLxNNroZiVN4WuXmsbaplC_He57TZFbtsvnDcRBhshlUbaiaN1Yu0ZgaU9VzQkM75Xz92hvUGMjO9Od6OGXVnqjOiXWHq_yqcLtGZ7CqtVd1XJ2UXWATr14CJ3du/s400/oruxmaps.jpeg" height="195" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://i263.photobucket.com/albums/ii155/reenganchados/tp204/Imagen2.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://i263.photobucket.com/albums/ii155/reenganchados/tp204/Imagen2.jpg" height="253" width="400" /></a></div>
<br />
Aquí también teneis un foro donde se podemos encontrar más información al respecto. <b>(<a href="http://www.mendiak.net/foro/viewtopic.php?p=583997" target="_blank">Las Montañas)</a></b><br />
<b>-</b><br />
<br />
<u><b>También te puede interesar este artículo: </b></u><br />
<span style="font-size: small;"><b><a href="http://alfonsocantero.blogspot.com.es/2013/07/como-cargo-un-track-descargado-de.html" target="_blank">¿Como cargo un track descargado de internet en Oruxmaps?</a></b></span>Alfonso Canterohttp://www.blogger.com/profile/04957211769182442859noreply@blogger.com2tag:blogger.com,1999:blog-8990771625177905142.post-47019851938928585262014-05-14T18:06:00.001+02:002014-05-14T18:31:02.552+02:00Poner una imagen de fondo en tu blog y Como hacer que la imagen cubra toda la pantalla <div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0nVRP9IpE-FQgaRL7QWEO7VWSsa4kJKZM_24Q4S-x2_naKXCOyPyZSqBqcvvn0oFPTviCP26vS5DCkt44Qc-Lopilo9UXRVz-9OX3Pofd1o_AFhspcoCH3N0PJDEPtrjY8zI6yEEcDdcx/s0/resize_image.png" /></div>
<br />
<br />
<div style="text-align: justify;">
Una constante pregunta es <b>cómo hacer para que la imagen de fondo del blog siempre ocupe toda la pantalla sin importar la resolución del monitor</b>.
Y es que a veces ponemos una imagen de fondo según las medidas de
nuestro monitor, y no consideramos que en la actualidad los monitores
los hay de todas las resoluciones, muy pequeños y muy grandes. Así que
si ponemos una imagen de acuerdo a nuestra pantalla habrá alguien con un
monitor mayor que seguramente no verá toda la imagen o la verá
repetida, y en el caso de los que usan monitores muy pequeños verán la
imagen incompleta.</div>
<div style="text-align: justify;">
<br />
<a name='more'></a>Aquí veremos dos soluciones a ello, una usando <b>CSS3</b>, y otra con <b>jQuery</b>.
Con cualquiera de las dos haremos que la imagen de fondo de la página
ocupe toda la pantalla del monitor sin importar la resolución del mismo.</div>
<br />
<b><span style="font-size: medium;">CSS3</span></b><br />
<div style="text-align: justify;">
La primera opción es usando CSS3, la
ventaja con este método es que no sobrecargamos el blog con scripts,
usaremos únicamente la propiedad <b>background-size</b> que se encargará de realizar lo que queremos.</div>
<div style="text-align: justify;">
La
desventaja es que esta propiedad sólo es soportada por los navegadores
modernos, así que en el caso de Internet Explorer sólo se verá de la
versión 9 en adelante, en los demás navegadores no deberá haber
problema.</div>
<div style="text-align: justify;">
El método es muy simple, sólo tenemos que ingresar a la <b>Edición HTML</b> de la plantilla, localizar el <b>background</b> que está dentro de <b>body {</b> y reemplazarlo por esto:</div>
<blockquote>
background: url(<span style="color: red;">URL de la imagen</span>) no-repeat center center fixed;<br />
background-size: cover;</blockquote>
<br />
Se vería más o menos así:<br />
<blockquote>
body {<br />
<i><span style="color: blue;">background: url(</span><span style="color: red;">URL de la imagen</span><span style="color: blue;">) no-repeat center center fixed;</span></i><br />
<i><span style="color: blue;">background-size: cover;</span></i><br />
margin:0;<br />
color:#000;<br />
font:x-small Georgia Serif;<br />
font-size/* */:/**/small;<br />
font-size: /**/small;<br />
text-align: center;<br />
}</blockquote>
<br />
Sólo pon la URL de la imagen y listo.<br />
<br />
<b><span style="font-size: medium;">jQuery</span></b><br />
<div style="text-align: justify;">
Con este método usaremos jQuery con el plugin <b>BackStretch</b>,
la ventaja es que funciona en todos los navegadores, incluyendo IE7 en
adelante. La desventaja no es mayor si ya usas jQuery, ya que el plugin
en realidad es pequeño. Para usar este método en tu blog entra en la <b>Edición HTML</b> y antes de <b></head></b> pega este script:</div>
<blockquote>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/><br />
<script type='text/javascript'><br />
//<![CDATA[<br />
/*<br />
* jQuery Backstretch<br />
* Version 1.2.8<br />
* http://srobbin.com/jquery-plugins/jquery-backstretch/<br />
* Add a dynamically-resized background image to the page<br />
* Copyright (c) 2012 Scott Robbin (srobbin.com)<br />
* Licensed under the MIT license<br />
* https://raw.github.com/srobbin/jquery-backstretch/master/LICENSE.txt<br />
*/<br />
;(function(a){a.backstretch=function(p,b,l){function s(){if(p){var
b;0==c.length?c=a("<div
/>").attr("id","backstretch").css({left:0,top:0,position:m?"fixed":"absolute",overflow:"hidden",zIndex:-999999,margin:0,padding:0,height:"100%",width:"100%"}):c.find("img").addClass("deleteable");b=a("<img
/>").css({position:"absolute",display:"none",margin:0,padding:0,border:"none",zIndex:-999999,maxWidth:"none"}).bind("load",function(d){var
b=a(this),e;b.css({width:"auto",height:"auto"});e=this.width||a(d.target).width();d=this.height||a(d.target).height();n=e/d;q();b.fadeIn(g.speed,function(){c.find(".deleteable").remove();"function"==typeof
l&&l()})}).appendTo(c);0==a("body
#backstretch").length&&(0===a(window).scrollTop()&&window.scrollTo(0,0),a("body").append(c));c.data("settings",g);b.attr("src",p);a(window).unbind("resize.backstretch").bind("resize.backstretch",function(){"onorientationchange"in
window&&window.pageYOffset===0&&window.scrollTo(0,1);q()})}}function
q(){try{j={left:0,top:0},rootWidth=h=o.width(),rootHeight=r?window.innerHeight:o.height(),f=h/n,f>=rootHeight?(k=(f-rootHeight)/2,g.centeredY&&(j.top="-"+k+"px")):(f=rootHeight,h=f*n,k=(h-rootWidth)/2,g.centeredX&&(j.left="-"+k+"px")),c.css({width:rootWidth,height:rootHeight}).find("img:not(.deleteable)").css({width:h,height:f}).css(j)}catch(a){}}var
t={centeredX:!0,centeredY:!0,speed:0},c=a("#backstretch"),g=c.data("settings")||t;c.data("settings");var
o,m,r,n,h,f,k,j;b&&"object"==typeof
b&&a.extend(g,b);b&&"function"==typeof
b&&(l=b);a(document).ready(function(){var
b=window,d=navigator.userAgent,c=navigator.platform,e=d.match(/AppleWebKit\/([0-9]+)/),e=!!e&&e[1],f=d.match(/Fennec\/([0-9]+)/),f=!!f&&f[1],g=d.match(/Opera
Mobi\/([0-9]+)/),h=!!g&&g[1],i=d.match(/MSIE
([0-9]+)/),i=!!i&&i[1];o=(m=!((-1<c.indexOf("iPhone")||-1<c.indexOf("iPad")||-1<c.indexOf("iPod"))&&e&&534>e||b.operamini&&"[object
OperaMini]"==={}.toString.call(b.operamini)||g&&7458>h||-1<d.indexOf("Android")&&e&&533>e||f&&6>f||"palmGetResource"in
window&&e&&534>e||-1<d.indexOf("MeeGo")&&-1<d.indexOf("NokiaBrowser/8.5.0")||i&&6>=i))?a(window):a(document);r=m&&window.innerHeight;s()});return
this}})(jQuery);<br />
//]]><br />
</script><br />
<script><br />
$.backstretch("<span style="color: red;">URL de la imagen</span>");<br />
</script></blockquote>
<div style="text-align: justify;">
Pon la URL de la imagen donde se indica y listo.</div>
<div style="text-align: justify;">
Con
este método la carga de la imagen del fondo se hace hasta el final,
esto es para que el usuario no tenga que estar esperando a que cargue la
imagen para que empiece cargar el blog, así que si en el <b>body {</b>
ya utilizas una imagen de fondo se verá primero e instantes después se
cargará la del script, por lo que si lo deseas puedes eliminar la imagen
que tengas en el body y así dejar que sólo cargue la imagen del script.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Como puedes ver ambos sistemas
son fáciles de aplicar, cada uno con sus pros y contras, pero el
resultado es el mismo, extender la imagen de fondo para que se ajuste a
la pantalla de cualquier monitor sin importar la resolución del mismo.<br />
<br />
Recuerda que en el caso del método con jQuery, deberás verificar que no uses Scriptaculous o Mootools, de ser así tendrás que <a href="http://ciudadblogger.com/2011/02/usar-jquery-y-scriptaculous-al-mismo.html" target="_blank">aplicar unos cambios en el script para hacerlos compatibles</a>.<br />
Y si ya usas jQuery <a href="http://ciudadblogger.com/2011/10/jquery-sus-versiones-y-el-conflito.html" target="_blank">recuerda tener sólo una versión</a>, la última.<br />
-<br />
Información tomada de: <a href="http://ciudadblogger.com/2012/08/hacer-que-la-imagen-de-fondo-del-blog-cubra-toda-la-pantalla.html" target="_blank">http://ciudadblogger.com/2012/08/hacer-que-la-imagen-de-fondo-del-blog-cubra-toda-la-pantalla.html</a></div>
Alfonso Canterohttp://www.blogger.com/profile/04957211769182442859noreply@blogger.com0tag:blogger.com,1999:blog-8990771625177905142.post-20868245854114912502014-05-04T13:58:00.000+02:002014-05-04T13:58:00.837+02:00Cómo Agregar Iconos de Redes Sociales a las Vistas Dinámicas de Blogger <div style="text-align: center;">
<img alt="Demostración iconos de redes en vistas dinamicas" class="noborde" height="375" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5S23NbBrHZ7FAhQQg2aaKmKSCRsNAQxw0RN38y15NqdfNIkHvbx6RxibYA7ceCzsr6K2OcE_A2a0jFI1y2cBrm2n2wxLJXwW3IZEQ1OZhpJ8_6QfbsGn_IXlbTZH6qRgCCld_IhYZXEs/s1600/iconos-redes-sociales-vista.png" title="" width="550" /></div>
<br />
<br />
¡Hola qué tal! hoy veremos la forma de agregar iconos de redes sociales a las vistas dinámicas de Blogger.<br />
<br />
Como usuario de las vistas dinámicas, seguramente ya te habrás dado cuenta que no es posible agregar código desde el gadget <a href="https://plus.google.com/109627432877953314897/posts/VmYL1iq625Y" target="_blank" title="Ver lista de gadgets que funcionan en las vistas dinámicas">con la opción HTML/Javascript</a>, mismo que comúnmente es usado para agregar iconos de redes sociales.<br />
<br />
De todos modos, aunque se pudiera usar dicho gadget, el contenido
quedarían "oculto" en una pestañita, ya que todos los gadgets que
agregas, aparecen a la derecha en la página en dichas pestañas, con
excepción al widget de <b>páginas estáticas</b> que se muestra en la barra que aparece debajo de la cabecera.<br />
<br />
Bueno, pues pensando en tener los iconos sociales visibles cuando un
usuario acceda al blog, lo que haremos entonces es usar el gadget de<b> páginas estáticas</b> para que se muestren, usando también un poco de <a href="http://es.wikipedia.org/wiki/Hoja_de_estilos_en_cascada" target="_blank" title="ver en wikipedia qué es CSS">CSS</a>.<br />
<a name='more'></a><br />
¿Quieres verlo en acción?, échale un vistazo a la <a class="descargar-e" href="http://portafolio2-compartidisimo.blogspot.com/" target="_blank">Demostración</a><br />
<span style="font-size: medium;"><br />
</span><span style="font-size: large;">Sobre el tutorial</span><br />
<br />
<b>El tutorial consta de dos partes. La primera parte</b> explica cómo
agregar los enlaces de redes sociales a la lista de páginas estáticas.
Es muy sencillo, pero para usuarios nuevos será de gran ayuda. Si ya lo
sabes, ve directo a la segunda parte ;)<br />
<b><br />
</b> <b>En la segunda parte</b> explicaré la forma en que cambiamos el
texto de los enlaces por iconos respectivamente. Ahora vayamos al grano y
veamos paso a paso cómo lograrlo ;)<br />
<b><br />
</b> <br />
<h2>
<span style="color: #0b5394; font-size: large; font-weight: normal;">Primera parte: Agregando los enlaces de las redes sociales que usas</span></h2>
<br />
<br />
<span style="color: #0b5394; font-size: medium; font-weight: normal;">Pasos:</span><br />
<br />
<ol>
<li><b>Agrega el gadget de <span style="color: #b45f06;">Páginas</span> si es que no lo has hecho</b>, yendo a la pestaña "<span style="color: #b45f06;">Diseño</span>"
luego, haces click en agregar un gadget, (en cualquier sección ya que
de todos modos se mostrará debajo de la cabecera) y selecciónalo de la
lista de gadgets disponibles.<br />
<img alt="Opcion Gadget de paginas" class="noborde" height="120" src="http://3.bp.blogspot.com/-1XV3O1M0J8k/U1CNOC8qB0I/AAAAAAAAQCk/x01dIKlu4K8/s1600/lista-de-paginas.png" title="" width="438" /><br />
</li>
<li>Luego, copia todas las <b>direcciones web de las distintas redes sociales que usas</b>. Para ello <b>dirígete a cada página en cuestión</b>, y cópiala desde la barra de direcciones del navegador. Por ejemplo, esta sería la dirección web de <a href="https://twitter.com/compartidisimo" target="_blank">mi página de <b>Twitter</b></a>:<br />
<br />
<code>https://twitter.com/compartidisimo</code></li>
<li>Una vez que tengas<b> todas las direcciones web de las páginas de las redes sociales que usas</b>, y que deseas agregar a tu blog, dirígete al panel de Blogger, y haz click en la pestaña "<span style="color: #783f04;">Diseño</span>".</li>
<li>Después, haz click en editar en el gadget de "Páginas" luego en "<b><span style="color: #3d85c6;">Añadir página con enlace</span></b>".<br />
<br />
<img alt="Opcion para agregar enlaces en gadget de paginas" class="gris" height="268" src="http://3.bp.blogspot.com/-fZiiSxeny7U/U1CSrf1vkcI/AAAAAAAAQC8/mFHI-yvst8s/s1600/agregar+-direccionweb.png" title="" width="491" /><br />
<br />
<br />
</li>
<li>Una vez que se abra el cuadro de "<b>Dirección web</b>", <b>agrega una a una, todas las direcciones web de las páginas de redes sociales que ya copiaste y guárdalas</b>.
Deberás repetir el proceso para cada red social que uses. Por ejemplo
en la siguiente imagen puedes ver que estoy agregando a dirección web de
Twitter:<br />
<br />
<img alt="Formato para agregar enlaces " class="gris" height="303" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRbh-OPDwzdRyWx6O61yUFnz7rRZ5G1XdrI8ySvwaP3g4vZr_I_vw85nMqNnI0U-N-12HcNT6Sv_bTRA_Ijc8TcuCN1B_PZ6NQsvm-x1SbgAa4ih6kFv1m0ajkt8avPWXhREjMjmvayN0/s1600/direccion-web.png" title="" width="427" /></li>
</ol>
<div>
<b>Nota</b>: Si por error pusiste mal una dirección web y la guardaste,
¡no todo está perdido! Aunque no puedes editarla, si puedes eliminar el
enlace, y volverlo a poner, ;)<br />
<br />
Cuando termines de agregar todos los enlaces, entonces pasa a lo siguiente ;)<br />
<br />
<br />
</div>
<span style="color: #0b5394; font-size: large; font-weight: normal;">Segunda parte: Personalizar los enlaces de las páginas con iconos de redes sociales</span><br />
<br />
<br />
Para <b>reemplazar los textos de los enlaces por iconos</b>, vamos a
usar un solo archivo de imagen conteniendo todos los iconos. De ese modo
hacemos la carga más eficiente, ya que enlazaremos una sola imagen en
lugar de varias que necesitaríamos.<br />
<br />
He creado esta imagen con los iconos que creo pueden ser usados y es el que puedes ver a continuación:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img alt="Sprite con iconos de redes sociales" class="noborde" height="70" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVmvW21apWoZtRFLFj8spM9aACBt1nGH_y_54-O_2EnXp4HlNcT_fnSCRRmO0w6dKBYufIT2o4ECQZlAsS1XhgNYf3ZwMc3lviVmLSXO-gaNPZEkDSbSAt482vGh7jQV53a_m_VtuQqVg/s1600/iconos-compartidisimo.png" title="" width="350" /></div>
<br />
En donde de izquierda a derecha se muestran así: Inicio, Twitter,
Facebook, Pinterest, Instagram, Google+, RSS, Acerca de, LinkedIn,
Contacto.<br />
<br />
<br />
El truco consiste en usar el llamado <a href="http://www.w3.org/community/webed/wiki/Es/Selectores_avanzados_de_CSS#Selector_de_hermano_adjacente" target="_blank">selector de hermano adyacente</a> en
CSS, de tal modo que podamos seleccionar cada elemento de la lista de
páginas estáticas para poder remplazar el texto por la imagen del icono.<br />
<br />
En tu blog, los iconos no necesariamente tienen que mostrarse en el
orden que aparecen en la imagen (de izquierda a derecha), ni tampoco
ponerlos todos. Lo que si hay que tener en cuenta es la posición de cada
uno dentro de la imagen, para poderlos reemplazar correctamente según
corresponda.<br />
<br />
A continuación puedes ver la <b>posición que corresponde a cada icono en la imagen</b> que creé, y que vas a usar para mostrar cada icono según necesites:<br />
<br />
<table style="border-collapse: collapse; border-spacing: 0;"><tbody>
<tr><th style="border-style: solid; border-width: 1px; font-family: Arial, sans-serif; font-size: 14px; font-weight: normal; overflow: hidden; padding: 10px 5px; word-break: normal;"><br /></th><th style="border-style: solid; border-width: 1px; font-family: Arial, sans-serif; font-size: 14px; font-weight: bold; overflow: hidden; padding: 10px 5px; word-break: normal;"><div style="text-align: left;">
Posición</div>
<div style="text-align: left;">
Icono por defecto</div>
</th><th style="border-style: solid; border-width: 1px; font-family: Arial, sans-serif; font-size: 14px; font-weight: bold; overflow: hidden; padding: 10px 5px; word-break: normal;"><div style="text-align: left;">
Posición</div>
<div style="text-align: left;">
Icono :hover</div>
</th></tr>
<tr><td style="border-style: solid; border-width: 1px; font-size: 14px; overflow: hidden; padding: 10px 5px; word-break: normal;"><span style="font-family: Courier New, Courier, monospace;">Inicio</span></td><td style="border-style: solid; border-width: 1px; font-size: 14px; overflow: hidden; padding: 10px 5px; text-align: center; word-break: normal;"><span style="font-family: Courier New, Courier, monospace;">0 0</span></td><td style="border-style: solid; border-width: 1px; font-size: 14px; overflow: hidden; padding: 10px 5px; text-align: center; word-break: normal;"><span style="font-family: Courier New, Courier, monospace;">0 -35px</span></td></tr>
<tr><td style="border-style: solid; border-width: 1px; font-size: 14px; overflow: hidden; padding: 10px 5px; word-break: normal;"><span style="font-family: Courier New, Courier, monospace;">Twitter</span></td><td style="border-style: solid; border-width: 1px; font-size: 14px; overflow: hidden; padding: 10px 5px; text-align: center; word-break: normal;"><span style="font-family: Courier New, Courier, monospace;">35px 0</span></td><td style="border-style: solid; border-width: 1px; font-size: 14px; overflow: hidden; padding: 10px 5px; word-break: normal;"><span style="font-family: Courier New, Courier, monospace;">-35px -35px</span></td></tr>
<tr><td style="border-style: solid; border-width: 1px; font-size: 14px; overflow: hidden; padding: 10px 5px; word-break: normal;"><span style="font-family: Courier New, Courier, monospace;">Facebook</span></td><td style="border-style: solid; border-width: 1px; font-size: 14px; overflow: hidden; padding: 10px 5px; text-align: center; word-break: normal;"><span style="font-family: Courier New, Courier, monospace;">-70px 0</span></td><td style="border-style: solid; border-width: 1px; font-size: 14px; overflow: hidden; padding: 10px 5px; word-break: normal;"><span style="font-family: Courier New, Courier, monospace;">-70px -35px</span></td></tr>
<tr><td style="border-style: solid; border-width: 1px; font-size: 14px; overflow: hidden; padding: 10px 5px; word-break: normal;"><span style="font-family: Courier New, Courier, monospace;">Instagram</span></td><td style="border-style: solid; border-width: 1px; font-size: 14px; overflow: hidden; padding: 10px 5px; text-align: center; word-break: normal;"><span style="font-family: Courier New, Courier, monospace;">-140px 0</span></td><td style="border-style: solid; border-width: 1px; font-size: 14px; overflow: hidden; padding: 10px 5px; text-align: center; word-break: normal;"><span style="font-family: Courier New, Courier, monospace;">-140px -35px</span></td></tr>
<tr><td style="border-style: solid; border-width: 1px; font-size: 14px; overflow: hidden; padding: 10px 5px; word-break: normal;"><span style="font-family: Courier New, Courier, monospace;">Pinterest</span></td><td style="border-style: solid; border-width: 1px; font-size: 14px; overflow: hidden; padding: 10px 5px; text-align: center; word-break: normal;"><span style="font-family: Courier New, Courier, monospace;">-105px 0</span></td><td style="border-style: solid; border-width: 1px; font-size: 14px; overflow: hidden; padding: 10px 5px; word-break: normal;"><span style="font-family: Courier New, Courier, monospace;">-105px -35px</span></td></tr>
<tr><td style="border-style: solid; border-width: 1px; font-size: 14px; overflow: hidden; padding: 10px 5px; word-break: normal;"><span style="font-family: Courier New, Courier, monospace;">Google+</span></td><td style="border-style: solid; border-width: 1px; font-size: 14px; overflow: hidden; padding: 10px 5px; text-align: center; word-break: normal;"><span style="font-family: Courier New, Courier, monospace;">-175px 0</span></td><td style="border-style: solid; border-width: 1px; font-size: 14px; overflow: hidden; padding: 10px 5px; word-break: normal;"><span style="font-family: Courier New, Courier, monospace;">-175px -35px</span></td></tr>
<tr><td style="border-style: solid; border-width: 1px; font-size: 14px; overflow: hidden; padding: 10px 5px; word-break: normal;"><span style="font-family: Courier New, Courier, monospace;">LinkedIn</span></td><td style="border-style: solid; border-width: 1px; font-size: 14px; overflow: hidden; padding: 10px 5px; text-align: center; word-break: normal;"><span style="font-family: Courier New, Courier, monospace;">-280px 0</span></td><td style="border-style: solid; border-width: 1px; font-size: 14px; overflow: hidden; padding: 10px 5px; word-break: normal;"><span style="font-family: Courier New, Courier, monospace;">-280px -35px</span></td></tr>
<tr><td style="border-style: solid; border-width: 1px; font-size: 14px; overflow: hidden; padding: 10px 5px; word-break: normal;"><span style="font-family: Courier New, Courier, monospace;">RSS</span></td><td style="border-style: solid; border-width: 1px; font-size: 14px; overflow: hidden; padding: 10px 5px; text-align: center; word-break: normal;"><span style="font-family: Courier New, Courier, monospace;">-210px 0</span></td><td style="border-style: solid; border-width: 1px; font-size: 14px; overflow: hidden; padding: 10px 5px; word-break: normal;"><span style="font-family: Courier New, Courier, monospace;">-210px -35px</span></td></tr>
<tr><td style="border-style: solid; border-width: 1px; font-size: 14px; overflow: hidden; padding: 10px 5px; word-break: normal;"><span style="font-family: Courier New, Courier, monospace;">Acerca de</span></td><td style="border-style: solid; border-width: 1px; font-size: 14px; overflow: hidden; padding: 10px 5px; text-align: center; word-break: normal;"><span style="font-family: Courier New, Courier, monospace;">-245px 0</span></td><td style="border-style: solid; border-width: 1px; font-size: 14px; overflow: hidden; padding: 10px 5px; word-break: normal;"><span style="font-family: Courier New, Courier, monospace;">-245px -35px</span></td></tr>
<tr><td style="border-style: solid; border-width: 1px; font-size: 14px; overflow: hidden; padding: 10px 5px; word-break: normal;"><span style="font-family: Courier New, Courier, monospace;">Contacto</span></td><td style="border-style: solid; border-width: 1px; font-size: 14px; overflow: hidden; padding: 10px 5px; text-align: center; word-break: normal;"><span style="font-family: Courier New, Courier, monospace;">-315px 0</span></td><td style="border-style: solid; border-width: 1px; font-size: 14px; overflow: hidden; padding: 10px 5px; word-break: normal;"><span style="font-family: Courier New, Courier, monospace;">-245px -35px</span></td></tr>
</tbody></table>
<br />
<br />
<div style="text-align: left;">
Donde dice: "<span style="font-weight: bold; text-align: center;"><span style="font-family: inherit;">Posición </span></span><span style="text-align: center;"><span style="font-family: inherit;"><b>Icono por defecto" </b>se enlista la </span>posición<span style="font-family: inherit;"> que ocupa en la imagen el icono que aparece por <b>defecto</b>. Por otro lado,</span><b><span style="font-family: inherit;"> <span style="font-family: inherit;">"</span></span></b></span><span style="font-size: 14px; font-weight: bold; text-align: center;"><span style="font-family: inherit;">Posición </span></span><span style="font-size: 14px; font-weight: bold; text-align: center;"><span style="font-family: inherit;"><span style="font-family: inherit;">Icono :hover" </span></span></span>corresponde a la posición del icono al poner el puntero del ratón encima de la imagen ( del evento :hover). </div>
<br />
<span style="color: #0b5394; font-size: medium;"><br />
</span> <span style="color: #0b5394; font-size: medium;">Pasos:</span><br />
<br />
<ol>
<li>Primero, hay que agregar el siguiente <a href="http://www.w3c.es/Divulgacion/GuiasBreves/HojasEstilo" title="Ver qué es CSS">CSS</a>
independientemente de de los iconos que vayas a agregar. Esto lo haces
yendo a Plantilla > Personalizar > Avanzado > Añadir CSS.<br />
<br />
<br />
<code class="code"><span style="color: #274e13;">.tabs li{<br />
background:url</span><span style="color: #38761d;">(</span><span style="color: #cc0000;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguq6RtOa6OFIR8YufjrzliL5jaE1y2-B8PwSVQp3MJD0ddN2wzW6J9U-5Nq5hiQg0JlosjmsThpyRnTQjIPEAa0I5OQG6dLna5nVVVDPe01qc4LIffZ0jCWRNiv9spA1-dHzLZXxZu2ok/s1600/iconos-compartidisimo-vista.png</span><span style="color: #38761d;">) no-repeat 0 0;</span><br />
<span style="color: #274e13;"> margin:0 !important;</span><br />
<span style="color: #274e13;"> padding:0; </span><br />
<span style="color: #274e13;"> width: 35px;</span><br />
<span style="color: #274e13;">float:left;<br />
cursor:pointer;</span><br />
<span style="color: #274e13;"> border-right: 1px solid </span><span style="color: #660000;">#585858</span><span style="color: #274e13;">; </span><span style="color: purple;">/*color de borde debe ser igual*/</span><br />
<span style="color: #274e13;"> -webkit-transition: all 0.25s
ease-in-out;-moz-transition: all 0.25s ease-in-out;-o-transition: all
0.25s ease-in-out;transition: all 0.25s ease-in-out;</span><br />
<span style="color: #274e13;"> }</span><br />
.tabs li:first-child{<br />
border-left:1px solid <span style="color: #660000;">#585858</span>; <span style="color: purple;">/*color de borde debe ser igual*/</span><br />
}<br />
<br />
<span style="color: #0b5394;">.tabs ul li a{ <br />
display:block; <br />
line-height:80;<br />
}</span><br />
</code><br />
<br />
He agregado la URL de la imagen y la he resaltado de<span style="color: #660000;"> </span><span style="color: red;">rojo.</span> Para evitar sorpresas, te recomiendo alojarla por ti mismo<b> desde Blogger</b>. Si no sabes hacerlo, échale un vistazo <a href="http://www.compartidisimo.com/2012/03/como-obtener-la-url-de-una-imagen-facil.html">a este tutorial</a>.<br />
<br />
<b> Para que pueda entenderse mejor cómo mostrar el icono respectivamente en cada enlace,</b> vamos a suponer que vas a mostrar los siguientes <b>4 enlaces</b> que a continuación se citan, siguiendo el orden de izquierda a derecha:<br />
<br />
<b>Inicio Twitter Facebook Instagram</b><br />
<br />
Una vez que agregues el CSS anterior, los enlaces se verán así:<br />
<br />
<img alt="Cómo luce icono de inicio sustituido" class="noborde" height="61" src="http://1.bp.blogspot.com/-ZHDToioyDmM/U1mxCHNNgNI/AAAAAAAAQKk/wfh9DUxNipM/s1600/paso1-iconos.png" title="" width="252" /><br />
<br />
Como puedes observar, los cuatro enlaces han sido reemplazados por el <b>icono de inicio</b>.
Esto sucede porque en el primer bloque de CSS, definimos la imagen que
se mostrará en cada elemento de la lista de enlaces y que es la imagen
que te facilito. </li>
<li><b>Ahora viene lo bueno: especificar la posición de la imagen a mostrar para cada icono según corresponda al enlace</b>.<br />
<br />
Lo que necesitamos entonces es<b> especificar la posición de la imagen para mostrar los iconos de Twitter, Facebook, e Instagram. </b> La clave está en definir el CSS que corresponde a cada enlace, <b>de izquierda a derecha</b>, por ello empezamos por el icono de <b>Twitter</b>,<b> </b>ya que el de inicio, quedará tal y como se muestra en la imagen, es decir, con el icono de la casita. <br />
<br />
Vamos a tomar nota de la posición que te puse en la <b>tabla anterior para mostrar el icono por defecto</b> de Twitter, y la colocamos en la propiedad "<span style="font-family: Courier New, Courier, monospace;">background-position</span>", como se aprecia a continuación:<br />
<br />
<code class="code">.tabs li<span style="color: blue;">+li</span>{<br />
background-position: <span style="color: #38761d;">35px 0</span>;<br />
}</code><br />
<br />
<br />
Si observamos el CSS anterior, a: <span style="font-family: monospace;">#pages li </span>que definimos al principio, hemos agregado el caracter "<b><span style="color: blue;">+</span></b>" y enseguida hemos agregado "<span style="font-family: Courier New, Courier, monospace;">li</span>". Eso hará que apuntemos al "<b>segundo enlace"</b>, al cual le definiremos la posición de la imagen que facilito, usando: "<span style="font-family: Courier New, Courier, monospace;">background-position</span>" de ese modo, se mostrará el icono de Twitter en sustitución al de inicio que anteriormente se mostraba (el de casita).<br />
<br />
Para nuestro "<b>tercer enlace</b>" y que sería el de <b>Facebook</b>, agregaríamos de nuevo "<span style="font-family: Courier New, Courier, monospace;">+li</span>"
enseguida del anterior que pusimos, y definimos la posición que
corresponde al icono de Facebook, y que puedes ver en la tabla de
arriba. Entonces nos quedaría así:<br />
<br />
<code class="code"><br />
.tabs li+li<span style="color: blue;">+li</span>{<br />
background-position:<span style="color: #274e13;">-70px 0</span>;<br />
}<br />
</code><br />
<br />
Por último, tenemos que reemplazar el icono de <b>Instagram</b>, y que sería nuestro "<b>cuarto enlace</b>" de izquierda a derecha y para ello declaramos otra regla de CSS, agregando otro "<span style="font-family: Courier New, Courier, monospace;">+li</span>", y declaramos la posición del icono tomando en cuenta la tabla. Nos quedaría entonces así:<br />
<br />
<br />
<code class="code"><br />
.tabs li+li+li<span style="color: blue;">+li</span>{<br />
background-position:<span style="color: #274e13;">-140px 0</span>;<br />
}<br />
</code><br />
<br />
...<b>y así lo harás sucesivamente para cada icono que necesites poner</b>.<br />
<br />
<br />
</li>
<li>¡Muy bien! Hasta ahora hemos reemplazado todos los iconos respectivamente. Lo que nos falta entonces, es <b>definir la posición de cada icono al poner el puntero del ratón encima de cada uno</b>, es decir, para que se lleve a cabo lo que se conoce como evento <span style="font-family: Courier New, Courier, monospace;">:hover</span>. <br />
<br />
<b> Será muy sencillo porque lo único que vas a tener que hacer</b>, es copiar cada bloque de CSS que definimos para cada botón, y agregarle <span style="color: blue; font-family: Courier New, Courier, monospace;">:hover</span>
al selector, luego copia la posición del botón de la tabla que facilito
donde dice: "Posición icono :hover", y ponla según el icono que
corresponda, incluyendo el del primero icono que es el de <b>inicio</b> y que agregaste en el paso 1.<br />
<br />
Para no enredarte mucho, mejor veamos cómo sería el CSS que haría que el
botón cambie como en la demostración al poner el puntero encima del
botón de <b>inicio</b>:<br />
<br />
<code class="code"><br />
.tabs li<span style="color: blue;">:hover</span>{<br />
background-position:0 -35px;<br />
}<br />
</code><br />
<br />
Luego para el de <b>Twitter</b>:<br />
<br />
<code class="code"><br />
.tabs li+li<span style="color: blue;">:hover</span>{<br />
background-position:-35px -35px;<br />
}<br />
</code><br />
<br />
Para el de <b>Facebook</b>:<br />
<br />
<code class="code"><br />
.tabs li+li+li<span style="color: blue;">:hover</span>{<br />
background-position:-70px -35px;<br />
}<br />
</code><br />
<br />
Por último para el de <b>Instagram</b>:<br />
<br />
<code class="code"><br />
.tabs li+li+li+li<span style="color: blue;">:hover</span>{<br />
background-position:-140px -35px;<br />
}<br />
</code><br />
<br />
Una vez que agregues todo este CSS, ya tendrás funcionando los botones
de Inicio, Twitter, Facebook, Instagram. Si quieres poner más hay que
definir el CSS tal y como lo he explicado, para que se vea cada uno. </li>
<li><b>OPCIONAL</b>: Mover a la derecha los iconos como se muestran en
la demostración, recorrer los iconos del administrador si decides
ponerlos a la derecha y eliminar el divisor que aparece antes del primer
enlace.<br />
<br />
Para lograr todo lo anterior, agregamos el CSS que se indica, también desde el diseñador de plantillas en añadir CSS:<br />
<br />
<b>Para que los iconos aparezcan a la derecha como en la demostración necesitas esto:</b><br />
<br />
<code class="code"><br />
#header #pages {<br />
float:right;<br />
}<br />
</code><br />
<br />
<b>Para anular el caracter pipe</b> "|" que se usa como divisor y que
aparece antes de cada enlace (si no lo quitas va a quedar encima del
borde del primer icono y se va a ver feo), necesitarás este CSS:<br />
<br />
<code class="code"><br />
#pages:before {<br />
content:normal!important;<br />
}<br />
</code><br />
<br />
Para <b>desplazar los iconos de administrado</b>r que aparecen a la
derecha en la barra y que solo son visibles para ti (solo si es que
desplazas los iconos a la derecha) necesitarás este CSS:<br />
<br />
<code class="code"><br />
#header .admin-controls {<br />
right:380px !important;<span style="color: #274e13;"> /*Valor que puedes editar según necesites*/</span><br />
}<br />
</code><br />
<br />
<br />
</li>
</ol>
¡Y listo!, ya tienes<b> iconos de redes sociales, visible en las vistas dinámicas.</b><br />
<br />
Parece difícil porque se ve largo, pues lo estoy explicando paso a paso,
aunque no lo es tanto. Solo lee con atención y ya verás que con
paciencia lo logras. Si crees que algo expliqué mal u omití algún punto
importante, no duces en comentarlo.<br />
<br />
<br />
<br />
<b>Notas sobre el tutorial, y otros puntos importantes</b><br />
<ul>
<li>Hubiera sido más sencillo y eficiente para el navegador utilizar las llamadas <a href="http://www.w3.org/community/webed/wiki/Es/Selectores_avanzados_de_CSS#Pseudoclases_estucturales" target="_blank">Pseudoclases estructurales</a> (<span style="background-color: #f9f9f9; font-family: monospace, Courier; font-size: 13px; line-height: 1.3em;">li:nth-child(n)</span>) <b>pero</b>, no funcionan en Internet Explorer 8, así que, esta vez nos vamos a tener que quedar con las ganas :)</li>
<li>El efecto suave del cambio de icono y que puedes apreciar en el
navegador, claro, si usas uno de los buenos, bonitos y modernos,
funciona en los principales navegadores "modernos" incluyendo Internet
Explorer 10. </li>
<li>Los iconos serán reemplazados correctamente en todos los navegadores
incluyendo Internet Explorer 8. Es decir, se va a ver todo "decente"...
en su lugar pues ;) </li>
<li>Los bordes del icono se definieron en el CSS que facilito en el
primer paso. Deben ser iguales; he puesto ahí el comentario y puedes
editarlo según el color de fondo de la barra.</li>
</ul>
<br />
<div>
</div>
Espero sea útil ;)<br />
-<br />
Información tomada de: <a href="http://www.compartidisimo.com/2014/04/como-agregar-iconos-de-redes-sociales.html" target="_blank">http://www.compartidisimo.com/2014/04/como-agregar-iconos-de-redes-sociales.html</a><br />
<br />
Alfonso Canterohttp://www.blogger.com/profile/04957211769182442859noreply@blogger.com0tag:blogger.com,1999:blog-8990771625177905142.post-24228051228040458702014-05-04T13:24:00.000+02:002014-05-04T13:27:53.343+02:00¿Cómo poner iconos sociales del tipo sígueme en el Blog? <div style="text-align: justify;">
Los iconos sociales del tipo "Sígueme" permite a los lectores de tu blog enlazar con los diferentes perfiles sociales <b>Twitter</b>, <b>Facebook</b>, <b>RSS</b>, <b>Google+</b>,<b>Pinterest</b>, <b>Youtube </b>en los que tienes presencia.</div>
<h4>
<a href="https://www.blogger.com/null" name="more"></a></h4>
<h4>
</h4>
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC18pLF4PlsHvvKh7h5WhNAwabrZS7iSuqfpPx9uDIpEXqTFqDpVmyvT9TV_dQxjZ40RcvLag7nhBIW8pNNVsF73Jyx149jDxuwT_CIqfk7hykqzm5kGOyqWC8ZVCYrA26Xs1qP9kYsuvw/s1600/Social+media+marketing.jpg" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img alt="iconos sociales twitter, facebook, pinterest, linkedin, youtube en Blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC18pLF4PlsHvvKh7h5WhNAwabrZS7iSuqfpPx9uDIpEXqTFqDpVmyvT9TV_dQxjZ40RcvLag7nhBIW8pNNVsF73Jyx149jDxuwT_CIqfk7hykqzm5kGOyqWC8ZVCYrA26Xs1qP9kYsuvw/s640/Social+media+marketing.jpg" height="285" title="iconos sociales twitter, facebook, pinterest, linkedin, youtube en Blogger" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Tutorial que te ayudara a incluir icono sociales a tu blog.</td></tr>
</tbody></table>
<h3>
¿Qué necesitas?</h3>
<div style="text-align: justify;">
Lo más importante es buscar un icono que te guste, que vaya con el
estilo de tu blog, elegir el tamaño más apropiado y por supuesto tener
claro la URL hasta tu medio social.</div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
Te propongo <b>dos maneras</b> de afrontar este reto, la primera es mediante las siguientes colecciones seleccionadas previamente por <b>iniciaBlog</b>, la segunda es buscando otro estilo de iconos.<br />
<br />
En las colecciones seleccionadas por <b>iniciaBlog</b> tienes dos
tamaños y podrás ver que lo único que tienes que hacer es copiar el
fragmento de código que tienes, pegarlo en un gadget del tipo
HTML/JavaScript de <b>Blogger</b>....bueno...vamos por parte, esto te lo explico luego. Mira primero estas colecciones y seguimos un poco más abajo.<br />
<a name='more'></a></div>
<h3>
Método 1. Colecciones de iconos de iniciaBlog (método fácil)</h3>
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center" bgcolor="#FF9900" style="width: 200px;"><h3>
<b>Colección Estandar</b></h3>
</td>
<td bgcolor="#FF9900" colspan="2" style="text-align: center;"><h3>
<b>Tamaños/Codigo HTML</b></h3>
</td>
</tr>
<tr>
<td align="center" bgcolor="#CCCCCC"><h4>
CANAL</h4>
</td>
<td bgcolor="#CCCCCC" style="text-align: center; width: 200px;"><h4>
<b>M (32px)</b></h4>
</td>
<td align="center" bgcolor="#CCCCCC" style="text-align: center; width: 200px;"><h4>
<b>XL (48px)</b></h4>
</td>
</tr>
<tr>
<td align="center" bgcolor="#E6E6E6" rowspan="2"><h4>
<b>Twitter</b></h4>
</td>
<td align="center" bgcolor="#F1F1F1" valign="bottom"><img border="0" src="https://lh6.googleusercontent.com/--aIk2uBwEKM/T3nN1x09jBI/AAAAAAAAAs8/qzDsbw3kEm8/s32/twitter32.png" />
</td><td align="center" bgcolor="#F1F1F1" valign="bottom"><img border="0" src="https://lh6.googleusercontent.com/-vao9pzZoGtk/T6VYC4d1YMI/AAAAAAAAA0U/4rdP2chJido/s48/twitter48.png" /><br />
<div class="pinit-wrapper" style="cursor: pointer; left: 518.5px; opacity: 0; position: absolute; top: 1014.32px; visibility: hidden; z-index: 9999;">
<a href="http://pinterest.com/pin/create/button/?url=http://www.iniciablog.com/2011/03/iconos-sociales-twitter-facebook-blog.html&media=https://lh6.googleusercontent.com/-vao9pzZoGtk/T6VYC4d1YMI/AAAAAAAAA0U/4rdP2chJido/s48/twitter48.png&description=%C2%BFC%C3%B3mo%20poner%20iconos%20sociales%20del%20tipo%20s%C3%ADgueme%20en%20el%20Blog?" style="display: block; outline: none;" target="_blank"><img class="pinimg" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcT1goI9UGc5V6RYcLHSYUEqWZJe9ExH_0JMG9NGUVd54H0AhnvYts4ekzSLO5xuTmSKUK2e0-BGuBNCmet62HZ-nhpxIznGF_0LZ20o4tYCpOBUJHMObQaXR09sPCgfvG6aENwhIOfq5E/s1600/pinterestx1_72.png" style="-moz-box-shadow: none; -o-box-shadow: none; -webkit-box-shadow: none; background: transparent; border: 0; box-shadow: none; margin: 0; padding: 0;" title="Pin on Pinterest" /></a></div>
</td>
</tr>
<tr>
<td align="center" bgcolor="#F1F1F1"><textarea cols="24" rows="3" style="color: #666666;"><a
href="http://twitter.com/AQUI_TU_USUARIO" target="_blank"><img
src="https://lh6.googleusercontent.com/--aIk2uBwEKM/T3nN1x09jBI/AAAAAAAAAs8/qzDsbw3kEm8/s32/twitter32.png"
width=32 height=32 alt="Síguenos en Twitter" /></a>
</textarea> </td>
<td align="center" bgcolor="#F1F1F1"><textarea cols="24" rows="3" style="color: #666666;"><a
href="http://twitter.com/AQUI_TU_USUARIO" target="_blank"><img
src="https://lh6.googleusercontent.com/-vao9pzZoGtk/T6VYC4d1YMI/AAAAAAAAA0U/4rdP2chJido/s48/twitter48.png"
width=48 height=48 alt="Síguenos en Twitter" /></a>
</textarea> </td>
</tr>
<tr>
<td align="center" bgcolor="#E6E6E6" rowspan="2"><h4>
<b>Facebook</b>
</h4>
</td>
<td align="center" bgcolor="#F1F1F1" valign="bottom"><img border="0" src="https://lh6.googleusercontent.com/-CYt37hfDnQ8/T3nNydojf_I/AAAAAAAAAr0/P5OtlZxV4rk/s32/facebook32.png" />
</td>
<td align="center" bgcolor="#F1F1F1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqrkZKgDQcEY_ziNHhMIP_k9uoOIaXQXqCfFqBQ5W0qH-LnWZDFyupQ5-PGBiPJYZcnqq-gfz1mm4bPnPxKU6TtkXrTJ1KlqQfpJfkdEU-uFroC9kHeai6R3yIXYs5fn_PfDT6cpl8qZM/s48/facebook48.png" />
</td></tr>
<tr><td align="center"><textarea cols="24" rows="3" style="color: #666666;"><a
href="http://www.facebook.com/AQUI_TU_PAGINA"
target="_blank"><img alt="Siguenos en Facebook"
src="https://lh6.googleusercontent.com/-CYt37hfDnQ8/T3nNydojf_I/AAAAAAAAAr0/P5OtlZxV4rk/s32/facebook32.png"
width=32 height=32 /></a>
</textarea>
</td>
<td align="center"><textarea cols="24" rows="3" style="color: #666666;"><a
href="http://www.facebook.com/AQUI_TU_PAGINA"
target="_blank"><img alt="Siguenos en Facebook"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqrkZKgDQcEY_ziNHhMIP_k9uoOIaXQXqCfFqBQ5W0qH-LnWZDFyupQ5-PGBiPJYZcnqq-gfz1mm4bPnPxKU6TtkXrTJ1KlqQfpJfkdEU-uFroC9kHeai6R3yIXYs5fn_PfDT6cpl8qZM/s48/facebook48.png"
width=48 height=48 /></a>
</textarea>
</td>
</tr>
<tr>
<td align="center" bgcolor="#E6E6E6" rowspan="2"><h4>
<b>Google+</b>
</h4>
</td>
<td align="center" bgcolor="#F1F1F1" valign="bottom"><img border="0" src="https://lh5.googleusercontent.com/-F_FBKktZWZk/T3nN0v4FeAI/AAAAAAAAAsc/7dHTxkxn4cI/s32/google32.png" />
</td>
<td align="center" bgcolor="#F1F1F1" valign="bottom"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkeWSOeIPNDFy4maYwFlfqN3RuvQ9VZxkrmdtNpupPlK5Tf7U8UuZE6ZG9CYw5eQEhkElXTQBHQJXR5EMPPC2sAtOzdixImLtLKJhWhSvE7pXeFDNoohKs-au9UUnVOqPpZJymWxOvsbo/s48/google48.png" /></td>
</tr>
<tr>
<td align="center"><textarea cols="24" rows="3" style="color: #666666;"><a
rel="author" href="https://plus.google.com/TU_ID_GOOGLE?rel=author"
target="_blank"><img alt="Siguenos en Google+"
src="https://lh5.googleusercontent.com/-F_FBKktZWZk/T3nN0v4FeAI/AAAAAAAAAsc/7dHTxkxn4cI/s32/google32.png"
width=32 height=32 /></a>
</textarea>
</td>
<td align="center"><textarea cols="24" rows="3" style="color: #666666;"><a
rel="author" href="https://plus.google.com/TU_ID_GOOGLE?rel=author"
target="_blank"><img alt="Siguenos en Google+"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkeWSOeIPNDFy4maYwFlfqN3RuvQ9VZxkrmdtNpupPlK5Tf7U8UuZE6ZG9CYw5eQEhkElXTQBHQJXR5EMPPC2sAtOzdixImLtLKJhWhSvE7pXeFDNoohKs-au9UUnVOqPpZJymWxOvsbo/s48/google48.png"
width=48 height=48 /></a>
</textarea> </td>
</tr>
<tr>
<td align="center" bgcolor="#E6E6E6" rowspan="2"><h4>
<b>RSS:</b>
</h4>
</td>
<td align="center" bgcolor="#F1F1F1" valign="bottom"><img border="0" src="https://lh3.googleusercontent.com/-YH1AmjXyfVo/T3nN1ApZLnI/AAAAAAAAAsk/XhB4UGXRYm8/s32/rss32.png" />
</td><td align="center" bgcolor="#F1F1F1" valign="bottom"><img border="0" src="https://lh6.googleusercontent.com/-IaSCUxATz8U/T6mV-NTsc_I/AAAAAAAAA0k/gUMcx3eNT2U/h120/rss48.png" />
</td></tr>
<tr><td align="center"><textarea cols="24" rows="3" style="color: #666666;"><a
href="URL_DE_TU_RSS_AQUI" target="_blank"><img alt="Siguenos en
por RSS"
src="https://lh3.googleusercontent.com/-YH1AmjXyfVo/T3nN1ApZLnI/AAAAAAAAAsk/XhB4UGXRYm8/s32/rss32.png"
width=32 height=32 /></a>
</textarea>
</td>
<td align="center"><textarea cols="24" rows="3" style="color: #666666;"><a
href="URL_DE_TU_RSS_AQUI" target="_blank"><img alt="Siguenos por
RSS"
src="https://lh6.googleusercontent.com/-IaSCUxATz8U/T6mV-NTsc_I/AAAAAAAAA0k/gUMcx3eNT2U/h120/rss48.png"
width=48 height=48 /></a>
</textarea>
</td>
</tr>
<tr>
<td align="center" bgcolor="#E6E6E6" rowspan="2"><h4>
<b>Flickr</b></h4>
</td>
<td align="center" bgcolor="#F1F1F1" valign="bottom"><img border="0" src="https://lh5.googleusercontent.com/-Pvu1pn6_OeQ/T3nNygodQfI/AAAAAAAAAr4/VucCqUE4WvI/s32/flick32.png" /></td>
<td align="center" bgcolor="#F1F1F1" valign="bottom"><img border="0" src="https://lh3.googleusercontent.com/-JYorZKk70NA/T6VX0kaThlI/AAAAAAAAA0A/N4J7BhQlZJI/s48/flickr48.png" /></td>
</tr>
<tr>
<td align="center"><textarea cols="24" rows="3" style="color: #666666;"><a
href="URL_DE_TU_CANAL_FLICKER" target="_blank"><img alt="Siguenos
en Flickr"
src="https://lh5.googleusercontent.com/-Pvu1pn6_OeQ/T3nNygodQfI/AAAAAAAAAr4/VucCqUE4WvI/s32/flick32.png"
width=32 height=32 /></a>
</textarea>
</td>
<td align="center"><textarea cols="24" rows="3" style="color: #666666;"><a
href="URL_DE_TU_CANAL_FLICKER" target="_blank"><img alt="Siguenos
en Flickr"
src="https://lh3.googleusercontent.com/-JYorZKk70NA/T6VX0kaThlI/AAAAAAAAA0A/N4J7BhQlZJI/s48/flickr48.png"
width=48 height=48 /></a>
</textarea> </td>
</tr>
<tr>
<td align="center" bgcolor="#E6E6E6" rowspan="2"><h4>
<b>Picasa</b></h4>
</td>
<td align="center" bgcolor="#F1F1F1" valign="bottom"><img border="0" src="https://lh3.googleusercontent.com/-_VAgXkDZ95o/T6mZmQ2UI4I/AAAAAAAAA1k/a3NC-msc1nE/s32/picasa32.png" /></td>
<td align="center" bgcolor="#F1F1F1" valign="bottom"><img border="0" src="https://lh5.googleusercontent.com/-BVPEEBx6Ku8/T6mZmSkKrzI/AAAAAAAAA1g/452IOH_pW9E/s48/picasa48.png" /></td>
</tr>
<tr>
<td align="center"><textarea cols="24" rows="3" style="color: #666666;"><a
href="URL_DE_TU_CANAL_PICASA" target="_blank"><img alt="Siguenos
en Picasa"
src="https://lh3.googleusercontent.com/-_VAgXkDZ95o/T6mZmQ2UI4I/AAAAAAAAA1k/a3NC-msc1nE/s32/picasa32.png"
width=32 height=32 /></a>
</textarea> </td>
<td align="center"><textarea cols="24" rows="3" style="color: #666666;"><a
href="URL_DE_TU_CANAL_PICASA" target="_blank"><img alt="Siguenos
en Picasa"
src="https://lh5.googleusercontent.com/-BVPEEBx6Ku8/T6mZmSkKrzI/AAAAAAAAA1g/452IOH_pW9E/s48/picasa48.png"
width=48 height=48 /></a>
</textarea> </td>
</tr>
<tr>
<td align="center" bgcolor="#E6E6E6" rowspan="2"><h4>
<b>Youtube</b></h4>
</td>
<td align="center" bgcolor="#F1F1F1" valign="bottom"><img border="0" src="https://lh5.googleusercontent.com/-TXzlKCbKzWs/T6mYkDhTXyI/AAAAAAAAA1U/vm95Q2KwrYg/s32/youtube32.png" /></td>
<td align="center" bgcolor="#F1F1F1" valign="bottom"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFGxR-OGP9EQpFXWleOcFakNqsmdloGbVTldeIe3vAvHqvsjsbQHP9Ft7cERUK40qYZG-oiGIUu2OJgdOBiuWEXIX-UpLhWh4AygKTwHoIJT_3UHpozj2Fbbs90HRAk2-VrQp1l7DgqGE/s48/youtube48.png" /></td>
</tr>
<tr>
<td align="center"><textarea cols="24" rows="3" style="color: #666666;"><a
href="URL_DE_TU_CANAL_YOUTUBE" target="_blank"><img alt="Siguenos
en YouTube"
src="https://lh5.googleusercontent.com/-TXzlKCbKzWs/T6mYkDhTXyI/AAAAAAAAA1U/vm95Q2KwrYg/s32/youtube32.png"
width=32 height=32 /></a>
</textarea> </td><td align="center"><textarea cols="24" rows="3" style="color: #666666;"><a
href="URL_DE_TU_CANAL_YOUTUBE" target="_blank"><img alt="Siguenos
en YouTube"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFGxR-OGP9EQpFXWleOcFakNqsmdloGbVTldeIe3vAvHqvsjsbQHP9Ft7cERUK40qYZG-oiGIUu2OJgdOBiuWEXIX-UpLhWh4AygKTwHoIJT_3UHpozj2Fbbs90HRAk2-VrQp1l7DgqGE/s48/youtube48.png"
width=48 height=48 /></a>
</textarea></td></tr>
<tr>
<td align="center" bgcolor="#E6E6E6" rowspan="2"><h4>
<b>Tumblr</b></h4>
</td>
<td align="center" bgcolor="#F1F1F1" valign="bottom"><img border="0" src="https://lh3.googleusercontent.com/-rLA4XAhk6OM/T7YDzA-IqcI/AAAAAAAAA4I/b5-1aH8CnOg/s32/tumblr32.png" /></td>
<td align="center" bgcolor="#F1F1F1" valign="bottom"><img border="0" src="https://lh4.googleusercontent.com/-H9KleSQeKcw/T7YDzaGg2jI/AAAAAAAAA4M/KxLt5fPSHi4/s48/tumblr48.png" /></td>
</tr>
<tr>
<td align="center"><textarea cols="24" rows="3" style="color: #666666;"><a
href="URL_DE_TU_BLOG_TUMBLR" target="_blank"><img alt="Siguenos
en Tumblr"
src="https://lh3.googleusercontent.com/-rLA4XAhk6OM/T7YDzA-IqcI/AAAAAAAAA4I/b5-1aH8CnOg/s32/tumblr32.png"
width=32 height=32 /></a>
</textarea> </td><td align="center"><textarea cols="24" rows="3" style="color: #666666;"><a
href="URL_DE_TU_BLOG_TUMBLR" target="_blank"><img alt="Siguenos
en Tumblr"
src="https://lh4.googleusercontent.com/-H9KleSQeKcw/T7YDzaGg2jI/AAAAAAAAA4M/KxLt5fPSHi4/s48/tumblr48.png"
width=48 height=48 /></a>
</textarea></td></tr>
<tr>
<td align="center" bgcolor="#E6E6E6" rowspan="2"><h4>
<b>Pinterest</b></h4>
</td>
<td align="center" bgcolor="#F1F1F1" valign="bottom"><img border="0" src="https://lh6.googleusercontent.com/-zlT-cpS5aIE/T73l-U2HzHI/AAAAAAAAA5k/Y6plORusOXM/s128/pinterest32.png" /></td>
<td align="center" bgcolor="#F1F1F1" valign="bottom"><img border="0" src="https://lh3.googleusercontent.com/-VL5WSnUKa9k/T73l-VAgt8I/AAAAAAAAA5k/EUxxhbV2P7s/s48/pinterest48.png" /></td>
</tr>
<tr>
<td align="center"><textarea cols="24" rows="3" style="color: #666666;"><a
href="http://pinterest.com/TU_USUARIO_AQUI" target="_blank"><img
alt="Siguenos en Pinterest"
src="https://lh6.googleusercontent.com/-zlT-cpS5aIE/T73l-U2HzHI/AAAAAAAAA5k/Y6plORusOXM/s128/pinterest32.png"
width=32 height=32 /></a>
</textarea> </td><td align="center"><textarea cols="24" rows="3" style="color: #666666;"><a
href="http://pinterest.com/TU_USUARIO_AQUI" target="_blank"><img
alt="Siguenos en Pinterest"
src="https://lh3.googleusercontent.com/-VL5WSnUKa9k/T73l-VAgt8I/AAAAAAAAA5k/EUxxhbV2P7s/s48/pinterest48.png"
width=48 height=48 /></a>
</textarea></td></tr>
<tr>
<td align="center" bgcolor="#E6E6E6" rowspan="2"><h4>
<b>Linkedin</b></h4>
</td>
<td align="center" bgcolor="#F1F1F1" valign="bottom"><img border="0" src="https://lh5.googleusercontent.com/-8C0OdSp_7ZA/T3nN0G_313I/AAAAAAAAAsU/6_Hbu6Of3qU/s32/linkedin32.png" /></td>
<td align="center" bgcolor="#F1F1F1" valign="bottom"><img border="0" src="https://lh3.googleusercontent.com/-p3CU-8ilvxY/T6VX0-t2qKI/AAAAAAAAA0A/AECDo1xT6EA/s48/linkedin48.png" /></td>
</tr>
<tr>
<td align="center"><textarea cols="24" rows="3" style="color: #666666;"><a
href="http://www.linkedin.com/TU_PERFIL_PUBLICO"
target="_blank"><img alt="Siguenos en Linkedin"
src="https://lh5.googleusercontent.com/-8C0OdSp_7ZA/T3nN0G_313I/AAAAAAAAAsU/6_Hbu6Of3qU/s32/linkedin32.png"
width=32 height=32 /></a>
</textarea> </td><td align="center"><textarea cols="24" rows="3" style="color: #666666;"><a
href="http://www.linkedin.com/TU_PERFIL_PUBLICO"
target="_blank"><img alt="Siguenos en Linkedin"
src="https://lh3.googleusercontent.com/-p3CU-8ilvxY/T6VX0-t2qKI/AAAAAAAAA0A/AECDo1xT6EA/s48/linkedin48.png"
width=48 height=48 /></a>
</textarea></td></tr>
<tr>
<td align="center" bgcolor="#E6E6E6" rowspan="2"><h4>
<b>Blogger</b></h4>
</td>
<td align="center" bgcolor="#F1F1F1" valign="bottom"><img border="0" src="https://lh5.googleusercontent.com/-DXeOni57Mhw/UAZnvWC5o-I/AAAAAAAABBs/MSxKzkxY1Kc/s32/blogger32.png" /></td>
<td align="center" bgcolor="#F1F1F1" valign="bottom"><img border="0" src="https://lh4.googleusercontent.com/-xZe9TOOvWOg/UAZnvRrsW0I/AAAAAAAABBs/e04pnurQRwA/s48/blogger48.png" /></td>
</tr>
<tr>
<td align="center"><textarea cols="24" rows="3" style="color: #666666;"><a
href="URL_DE_TU_BLOG" target="_blank"><img alt="Siguenos en
Blogger"
src="https://lh5.googleusercontent.com/-DXeOni57Mhw/UAZnvWC5o-I/AAAAAAAABBs/MSxKzkxY1Kc/s32/blogger32.png"
width=32 height=32 /></a>
</textarea> </td><td align="center"><textarea cols="24" rows="3" style="color: #666666;"><a
href="URL_DE_TU_BLOG" target="_blank"><img alt="Siguenos en
Blogger"
src="https://lh4.googleusercontent.com/-xZe9TOOvWOg/UAZnvRrsW0I/AAAAAAAABBs/e04pnurQRwA/s48/blogger48.png"
width=48 height=48 /></a>
</textarea></td></tr>
<tr>
<td align="center" bgcolor="#E6E6E6" rowspan="2"><h4>
<b>Instagram</b></h4>
</td>
<td align="center" bgcolor="#F1F1F1" valign="bottom"><img border="0" src="https://lh5.googleusercontent.com/-vBqtz2iv2BE/UIqE3LQyFMI/AAAAAAAABgA/TJ4W-vIBjsc/s32/instagram32.png" /></td>
<td align="center" bgcolor="#F1F1F1" valign="bottom"><img border="0" src="https://lh3.googleusercontent.com/-D-erW-8vZFo/UIqE3H6oUuI/AAAAAAAABgE/4kh346Lwaxk/s48/instagram48.png" /></td>
</tr>
<tr>
<td align="center"><textarea cols="24" rows="3" style="color: #666666;"><a
href="URL_DE_TU_PERFIL_INSTAGRAM" target="_blank"><img
alt="Siguenos en Blogger"
src="https://lh5.googleusercontent.com/-vBqtz2iv2BE/UIqE3LQyFMI/AAAAAAAABgA/TJ4W-vIBjsc/s32/instagram32.png"
width=32 height=32 /></a>
</textarea> </td><td align="center"><textarea cols="24" rows="3" style="color: #666666;"><a
href="URL_DE_TU_PERFIL_INSTAGRAM" target="_blank"><img
alt="Siguenos en Blogger"
src="https://lh3.googleusercontent.com/-D-erW-8vZFo/UIqE3H6oUuI/AAAAAAAABgE/4kh346Lwaxk/s48/instagram48.png"
width=48 height=48 /></a>
</textarea></td></tr>
</tbody></table>
<h3>
</h3>
<div>
</div>
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center" bgcolor="#FF9900" style="width: 200px;"><h3>
<b>Colección Ballons</b></h3>
</td>
<td bgcolor="#FF9900" colspan="2" style="text-align: center;"><h3>
<b>Tamaños/Codigo HTML</b></h3>
</td>
</tr>
<tr>
<td align="center" bgcolor="#CCCCCC"><h4>
CANAL</h4>
</td>
<td bgcolor="#CCCCCC" style="text-align: center; width: 200px;"><h4>
<b>M (32px)</b></h4>
</td>
<td align="center" bgcolor="#CCCCCC" style="text-align: center; width: 200px;"><h4>
<b>XL (48px)</b></h4>
</td>
</tr>
<tr>
<td align="center" bgcolor="#E6E6E6" rowspan="2"><h4>
<b>Twitter</b></h4>
</td>
<td align="center" bgcolor="#F1F1F1" valign="bottom"><img border="0" src="http://2.bp.blogspot.com/-x-K74Nqb3_8/T3ld3Uti0KI/AAAAAAAAAq0/hr-30_WBTzc/s32/twitter32.png" />
</td><td align="center" bgcolor="#F1F1F1" valign="bottom"><img border="0" src="https://lh6.googleusercontent.com/-IvssUOIxeho/T6Px1qpUA0I/AAAAAAAAAww/IN5WdKCFWcQ/s48/twitter48.png" /></td>
</tr>
<tr>
<td align="center" bgcolor="#F1F1F1"><textarea cols="24" rows="3" style="color: #666666;"><a
href="http://twitter.com/AQUI_TU_USUARIO" target="_blank"><img
src="https://lh5.googleusercontent.com/-x-K74Nqb3_8/T3ld3Uti0KI/AAAAAAAAAq0/hr-30_WBTzc/s32/twitter32.png"
width=32 height=32 alt="Síguenos en Twitter" /></a>
</textarea> </td>
<td align="center" bgcolor="#F1F1F1"><textarea cols="24" rows="3" style="color: #666666;"><a
href="http://twitter.com/AQUI_TU_USUARIO" target="_blank"><img
src="https://lh6.googleusercontent.com/-IvssUOIxeho/T6Px1qpUA0I/AAAAAAAAAww/IN5WdKCFWcQ/s48/twitter48.png"
width=48 height=48 alt="Síguenos en Twitter" /></a>
</textarea> </td>
</tr>
<tr>
<td align="center" bgcolor="#E6E6E6" rowspan="2"><h4>
<b>Facebook</b>
</h4>
</td>
<td align="center" bgcolor="#F1F1F1" valign="bottom"><img border="0" src="http://4.bp.blogspot.com/-4A-Wbh0NZ_Q/T3ld0epmoXI/AAAAAAAAApk/9sdoq81hjVg/s32/facebook32.png" />
</td>
<td align="center" bgcolor="#F1F1F1"><div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-p36RQiaNpZU/T6P5QFjPz_I/AAAAAAAAAxI/QLR60pfni-s/s48/facebook48.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-p36RQiaNpZU/T6P5QFjPz_I/AAAAAAAAAxI/QLR60pfni-s/s48/facebook48.png" /></a></div>
</td></tr>
<tr><td align="center"><textarea cols="24" rows="3" style="color: #666666;"><a
href="http://www.facebook.com/AQUI_TU_PAGINA"
target="_blank"><img alt="Siguenos en Facebook"
src="https://lh5.googleusercontent.com/-4A-Wbh0NZ_Q/T3ld0epmoXI/AAAAAAAAApk/9sdoq81hjVg/s32/facebook32.png"
width=32 height=32 /></a>
</textarea>
</td>
<td align="center"><textarea cols="24" rows="3" style="color: #666666;"><a
href="http://www.facebook.com/AQUI_TU_PAGINA"
target="_blank"><img alt="Siguenos en Facebook"
src="https://lh3.googleusercontent.com/-p36RQiaNpZU/T6P5QFjPz_I/AAAAAAAAAxI/QLR60pfni-s/s48/facebook48.png"
width=48 height=48 /></a>
</textarea>
</td>
</tr>
<tr>
<td align="center" bgcolor="#E6E6E6" rowspan="2"><h4>
<b>Google+</b>
</h4>
</td>
<td align="center" bgcolor="#F1F1F1" valign="bottom"><img border="0" src="http://1.bp.blogspot.com/-YtRp8Sisjzk/T3ld1T3XHHI/AAAAAAAAAqE/ZFUE-GvTuEg/s32/google32.png" />
</td>
<td align="center" bgcolor="#F1F1F1" valign="bottom"><img border="0" src="http://1.bp.blogspot.com/-witPc5RcDa4/T6P7CsbZtbI/AAAAAAAAAxg/CiPRAYWn1Uk/s48/google48.png" /></td>
</tr>
<tr>
<td align="center"><textarea cols="24" rows="3" style="color: #666666;"><a
rel="author" href="https://plus.google.com/TU_ID_GOOGLE?rel=author"
target="_blank"><img alt="Siguenos en Google+"
src="https://lh6.googleusercontent.com/-YtRp8Sisjzk/T3ld1T3XHHI/AAAAAAAAAqE/ZFUE-GvTuEg/s32/google32.png"
width=32 height=32 /></a>
</textarea>
</td>
<td align="center"><textarea cols="24" rows="3" style="color: #666666;"><a
rel="author" href="https://plus.google.com/TU_ID_GOOGLE?rel=author"
target="_blank"><img alt="Siguenos en Google+"
src="https://lh3.googleusercontent.com/-witPc5RcDa4/T6P7CsbZtbI/AAAAAAAAAxg/CiPRAYWn1Uk/s48/google48.png"
width=48 height=48 /></a>
</textarea> </td>
</tr>
<tr>
<td align="center" bgcolor="#E6E6E6" rowspan="2"><h4>
<b>RSS:</b>
</h4>
</td>
<td align="center" bgcolor="#F1F1F1" valign="bottom"><img border="0" src="http://4.bp.blogspot.com/-JO-lNXTkv48/T3ld2oJETMI/AAAAAAAAAqg/WDWpbwTBGr8/s32/rss32.png" />
</td><td align="center" bgcolor="#F1F1F1" valign="bottom"><img border="0" src="http://3.bp.blogspot.com/-v7ht01AFOMs/T6P72HK5daI/AAAAAAAAAx4/TiNSsoF27_s/s48/rss48.png" />
</td></tr>
<tr><td align="center"><textarea cols="24" rows="3" style="color: #666666;"><a
href="URL_DE_TU_RSS_AQUI" target="_blank"><img alt="Siguenos por
RSS"
src="https://lh4.googleusercontent.com/-JO-lNXTkv48/T3ld2oJETMI/AAAAAAAAAqg/WDWpbwTBGr8/s32/rss32.png"
width=32 height=32 /></a>
</textarea>
</td>
<td align="center"><textarea cols="24" rows="3" style="color: #666666;"><a
href="URL_DE_TU_RSS_AQUI" target="_blank"><img alt="Siguenos por
RSS"
src="https://lh5.googleusercontent.com/-v7ht01AFOMs/T6P72HK5daI/AAAAAAAAAx4/TiNSsoF27_s/s48/rss48.png"
width=48 height=48 /></a>
</textarea>
</td>
</tr>
<tr>
<td align="center" bgcolor="#E6E6E6" rowspan="2"><h4>
<b>Flickr</b></h4>
</td>
<td align="center" bgcolor="#F1F1F1" valign="bottom"><img border="0" src="http://3.bp.blogspot.com/-s3n9tWBM910/T3ld03VxqNI/AAAAAAAAAp0/QTbvFcfUj_s/s32/flickr32.png" /></td>
<td align="center" bgcolor="#F1F1F1" valign="bottom"><img border="0" src="http://3.bp.blogspot.com/-AmvRPW9ySIw/T6P80UYv2DI/AAAAAAAAAyQ/os6hLB9mm5w/s48/flickr48.png" /></td>
</tr>
<tr>
<td align="center"><textarea cols="24" rows="3" style="color: #666666;"><a
href="URL_DE_TU_CANAL_FLICKER" target="_blank"><img alt="Siguenos
en Flickr"
src="https://lh6.googleusercontent.com/-s3n9tWBM910/T3ld03VxqNI/AAAAAAAAAp0/QTbvFcfUj_s/s32/flickr32.png"
width=32 height=32 /></a>
</textarea>
</td>
<td align="center"><textarea cols="24" rows="3" style="color: #666666;"><a
href="URL_DE_TU_CANAL_FLICKER" target="_blank"><img alt="Siguenos
en Flickr"
src="https://lh4.googleusercontent.com/-AmvRPW9ySIw/T6P80UYv2DI/AAAAAAAAAyQ/os6hLB9mm5w/s48/flickr48.png"
width=48 height=48 /></a>
</textarea> </td>
</tr>
<tr>
<td align="center" bgcolor="#E6E6E6" rowspan="2"><h4>
<b>Picasa</b></h4>
</td>
<td align="center" bgcolor="#F1F1F1" valign="bottom"><img border="0" src="https://lh6.googleusercontent.com/-EC-fX4s2VMc/T3ld2PigyFI/AAAAAAAAAqQ/nyCVd2ZnjvE/s32/picasa32.png" /></td>
<td align="center" bgcolor="#F1F1F1" valign="bottom"><img border="0" src="https://lh6.googleusercontent.com/-ZHB1Z6vPpKc/T6VMYoEqgiI/AAAAAAAAAy0/Q-H1BeHKziI/s48/picasa48.png" /></td>
</tr>
<tr>
<td align="center"><textarea cols="24" rows="3" style="color: #666666;"><a
href="URL_DE_TU_CANAL_PICASA" target="_blank"><img alt="Siguenos
en Picasa"
src="https://lh6.googleusercontent.com/-EC-fX4s2VMc/T3ld2PigyFI/AAAAAAAAAqQ/nyCVd2ZnjvE/s32/picasa32.png"
width=32 height=32 /></a>
</textarea> </td>
<td align="center"><textarea cols="24" rows="3" style="color: #666666;"><a
href="URL_DE_TU_CANAL_PICASA" target="_blank"><img alt="Siguenos
en Picasa"
src="https://lh6.googleusercontent.com/-ZHB1Z6vPpKc/T6VMYoEqgiI/AAAAAAAAAy0/Q-H1BeHKziI/s48/picasa48.png"
width=48 height=48 /></a>
</textarea> </td>
</tr>
<tr>
<td align="center" bgcolor="#E6E6E6" rowspan="2"><h4>
<b>Youtube</b></h4>
</td>
<td align="center" bgcolor="#F1F1F1" valign="bottom"><img border="0" src="https://lh6.googleusercontent.com/-rVomfUIWxBw/T3ld3h7qGnI/AAAAAAAAAqs/Mvp1kyj9bzo/s32/youtube32.png" /></td>
<td align="center" bgcolor="#F1F1F1" valign="bottom"><img border="0" src="https://lh6.googleusercontent.com/-oXE9dKm36w0/T6VMYqB2pBI/AAAAAAAAAy0/ROjPLna4s_w/s48/youtube48.png" /></td>
</tr>
<tr>
<td align="center"><textarea cols="24" rows="3" style="color: #666666;"><a
href="URL_DE_TU_CANAL_YOUTUBE" target="_blank"><img alt="Siguenos
en YouTube"
src="https://lh6.googleusercontent.com/-rVomfUIWxBw/T3ld3h7qGnI/AAAAAAAAAqs/Mvp1kyj9bzo/s32/youtube32.png"
width=32 height=32 /></a>
</textarea> </td>
<td align="center"><textarea cols="24" rows="3" style="color: #666666;"><a
href="URL_DE_TU_CANAL_YOUTUBE" target="_blank"><img alt="Siguenos
en YouTube"
src="https://lh6.googleusercontent.com/-oXE9dKm36w0/T6VMYqB2pBI/AAAAAAAAAy0/ROjPLna4s_w/s48/youtube48.png"
width=48 height=48 /></a>
</textarea></td></tr>
<tr>
<td align="center" bgcolor="#E6E6E6" rowspan="2"><h4>
<b>Blogger</b></h4>
</td>
<td align="center" bgcolor="#F1F1F1" valign="bottom"><img border="0" src="https://lh5.googleusercontent.com/-Ez7a1J55YCo/UAZlRTrlp1I/AAAAAAAABBQ/4QwV0M9XY6w/s32/blogger32.png" /></td>
<td align="center" bgcolor="#F1F1F1" valign="bottom"><img border="0" src="https://lh5.googleusercontent.com/-JdVqsq8WNkU/UAZlRUvdllI/AAAAAAAABBI/Zdnikt_KaJw/s48/blogger48.png" /></td>
</tr>
<tr>
<td align="center"><textarea cols="24" rows="3" style="color: #666666;"><a
href="URL_DE_TU_CANAL_BLOG" target="_blank"><img alt="Siguenos en
Blogger"
src="https://lh5.googleusercontent.com/-Ez7a1J55YCo/UAZlRTrlp1I/AAAAAAAABBQ/4QwV0M9XY6w/s32/blogger32.png"
width=32 height=32 /></a>
</textarea> </td>
<td align="center"><textarea cols="24" rows="3" style="color: #666666;"><a
href="URL_DE_TU_BLOG" target="_blank"><img alt="Siguenos en
Blogger"
src="https://lh5.googleusercontent.com/-JdVqsq8WNkU/UAZlRUvdllI/AAAAAAAABBI/Zdnikt_KaJw/s48/blogger48.png"
width=48 height=48 /></a>
</textarea></td></tr>
<tr>
<td align="center" bgcolor="#E6E6E6" rowspan="2"><h4>
<b>Instragram</b></h4>
</td>
<td align="center" bgcolor="#F1F1F1" valign="bottom"><img border="0" src="https://lh5.googleusercontent.com/-2cd4qn_7yDs/UIqEfqncDaI/AAAAAAAABfw/qhUaWfiH7DU/s32/instagram32.png" /></td>
<td align="center" bgcolor="#F1F1F1" valign="bottom"><img border="0" src="https://lh3.googleusercontent.com/-ZNdcR7k-G-Y/UIqEfiRWw5I/AAAAAAAABf0/Xntq3EpZRqY/s48/instagram48.png" /></td>
</tr>
<tr>
<td align="center"><textarea cols="24" rows="3" style="color: #666666;"><a
href="URL_DE_TU_PERFIL_INSTRAGRAM" target="_blank"><img
alt="Siguenos en Blogger"
src="https://lh5.googleusercontent.com/-2cd4qn_7yDs/UIqEfqncDaI/AAAAAAAABfw/qhUaWfiH7DU/s32/instagram32.png"
width=32 height=32 /></a>
</textarea> </td>
<td align="center"><textarea cols="24" rows="3" style="color: #666666;"><a
href="URL_DE_TU_PERFIL_INSTRAGRAM" target="_blank"><img
alt="Siguenos en Blogger"
src="https://lh3.googleusercontent.com/-ZNdcR7k-G-Y/UIqEfiRWw5I/AAAAAAAABf0/Xntq3EpZRqY/s48/instagram48.png"
width=48 height=48 /></a>
</textarea></td></tr>
</tbody></table>
<br />
<h4>
<b>Paso 1. Copia el código de cada icono en un bloc de notas:</b></h4>
<ul>
<li>Una vez seleccionado el icono que te gusta, copia el fragmento de código que se encuentra justo debajo de cada imagen.</li>
<li>Abre el Bloc de notas y pega el fragmento de código</li>
<li>Solo tienes que indicar la URL hasta tu canal social correspondiente
al icono, es decir si el icono es de Twitter deberás indicar la url
hasta tu canal en Twitter, lo mismo para el resto.</li>
<li>Te he puesto en MAYUSCULAS allí donde deberás indicar la URL correpondiente</li>
<li>Repite estos mismos pasos si vas a incorporar a tu blog varios de
estos iconos. De manera que el mismo bloc de notas vas pegando los
diferentes fragmentos de código correspondiente a cada uno de tus
canales sociales.</li>
</ul>
<br />
<h4>
<b>Paso 2. Pegar el código HTML en el blog</b></h4>
<ul>
<li>Una vez que hayas indicado la URL de tus canales sociales a cada pequeño fragmento</li>
<li>Selecciona todo el código personalizado del bloc de notas y cópialo</li>
<li><b>Pega</b> el código en el Blog, para ello</li>
<ul>
<li>Abre la pestaña "<i style="font-weight: bold;">Diseño"</i></li>
<li>En la barra lateral elige "<b><i>Añadir nuevo Gadget"</i></b></li>
<li>Se muestra una lista, elige el que pone "HTML/Javascript"</li>
<li>En <b style="font-style: italic;">título </b>pon por ejemplo <b>Sígueme</b></li>
<li>En <b><i>contenido</i></b>, pega el código obtenido anteriormente</li>
<li><b>Guarda</b> la plantilla y visualiza el blog.</li>
<li>Recuerda que puedes mover el Gadget para situarlo en el sitio deseado</li>
</ul>
</ul>
Prueba que cada icono te lleva a tu canal social, si esto no fuera así
es que hay algo que no va en la dirección que has puesto, edita el
propio Gadget y seguro que encontrarás dónde te has equivocado.<br />
<br />
Seguimos publicando nuevas colecciones y completando las existentes, por
lo que si necesitas un icono que no está en cualquiera de las
colecciones anteriores solo tienes que solicitarlo mediante un
comentario en esta misma entrada.<br />
<br />
Hasta aquí el tutorial si te has decidido algunas de las colecciones de
iniciaBlog. Espero que te haya resultado fácil, te invito a dejar un
comentario y a compartir esta entrada con tus amigos y seguidores.<br />
-<br />
Información tomada de: <a href="http://www.iniciablog.com/2011/03/iconos-sociales-twitter-facebook-blog.html" target="_blank">http://www.iniciablog.com/2011/03/iconos-sociales-twitter-facebook-blog.html</a>Alfonso Canterohttp://www.blogger.com/profile/04957211769182442859noreply@blogger.com0tag:blogger.com,1999:blog-8990771625177905142.post-50013726895265274882014-05-04T10:27:00.002+02:002014-05-04T10:27:35.300+02:00Cómo redireccionar un blog a otro blog <div align="justify">
Tal vez hayas creado otro blog y no deseas perder a
tus lectores antiguos pero no puedes avisarle a todos tus lectores que
has cambiado de blog. Lo que puedes hacer es <b>redireccionar el blog antiguo a uno nuevo</b>, esto lo haremos con lo siguiente:<br />
En el blog antiguo que ya no usaras, entra en <b>Plantilla | Edición de HTML</b>, busca al inicio la etiqueta <b><head></b> y justo arriba de esa etiqueta pega el siguiente código:</div>
<br />
<blockquote>
<head><br />
<meta content='3; URL=http://<span style="color: red;">nombre-de-mi-blog</span>.blogspot.com/' HTTP-EQUIV='Refresh'/><br />
</head><br />
<body onLoad='redireccionar()'><br />
<script language='JavaScript'><br />
var pagina="http://<span style="color: red;">nombre-de-mi-blog</span>.blogspot.com/"<br />
function redireccionar()<br />
{<br />
location.href=pagina<br />
}<br />
setTimeout ("redireccionar()", 500);<br />
</script><br />
</body></blockquote>
<br />
<br />
Ahora sólo debes cambiar <b style="color: red; font-weight: normal;">nombre-de-mi-blog</b> por el blog a donde quieres que tus lectores sean redireccionados.<br />
-<br />
Información tomada de: <a href="http://ciudadblogger.com/2009/01/cmo-redireccionar-un-blog-otro-blog.html" target="_blank">http://ciudadblogger.com/2009/01/cmo-redireccionar-un-blog-otro-blog.html</a>Alfonso Canterohttp://www.blogger.com/profile/04957211769182442859noreply@blogger.com0tag:blogger.com,1999:blog-8990771625177905142.post-14400360571727436702014-05-04T09:51:00.002+02:002014-05-04T09:55:42.425+02:00Menú Vertical hecho con CSS -2 Este es otro menú vertical hecho con CSS y HTML, muy fácil y no hay que tocar la plantilla para nada.<br />
Para agregar este menú solo debes ir a <b>Diseño, Añadir Gadget, HTML/JavaScript</b> y pega allí lo siguiente:<br />
------------------------------------------------------------------------ <br />
<center><div id="naranzul"><ul><br />
<br />
<li><a href="URL">TEXTO</a></li><br />
<li><a href="URL">TEXTO</a></li><br />
<li><a href="URL">TEXTO</a></li><br />
<li><a href="URL">TEXTO</a></li><br />
<li><a href="URL">TEXTO</a></li><br />
<li><a href="URL">TEXTO</a></li><br />
<br />
</ul></div></center><br />
<br />
<style>#naranzul ul { list-style: none; margin: 0; padding: 0; } #naranzul img { border: none; } #naranzul { width: 200px; margin: 10px; } #naranzul li a { height: 32px; font-family:Helvetica; margin: 0; font-size: 15px; font-weight: bold; background: transparent; height: 24px; text-decoration: none; } #naranzul li a:link, #naranzul li a:visited { color: #FFF !important; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9Nk5rwEucjUCJFNdfNCHlbTv3CbuivqtMDSDSBbg6Sa_QbDdOsWDwveOTWCS9ajGVLW3dkyifENCkAWoy1imC-FNk88XQRvZuk1K6Oz7tAH3ER3T5jTnkmXb6ZyGmUTGnPuOpx7yP7tg/s1600/menu5.gif); padding: 8px 0 0 35px; } #naranzul li a:hover { color: #FFF !important; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9Nk5rwEucjUCJFNdfNCHlbTv3CbuivqtMDSDSBbg6Sa_QbDdOsWDwveOTWCS9ajGVLW3dkyifENCkAWoy1imC-FNk88XQRvZuk1K6Oz7tAH3ER3T5jTnkmXb6ZyGmUTGnPuOpx7yP7tg/s1600/menu5.gif) 0 -32px; padding: 8px 0 0 35px; } </style> <br />
---------------------------------------------------------------------<br />
El menú se ve de la siguiente manera.<br />
Ahora solo tienes que agregar el enlace y el texto del enlace.<br />
<center>
<div id="naranzul">
<ul>
<li><a href="URL">TEXTO</a></li>
<li><a href="URL">TEXTO</a></li>
<li><a href="URL">TEXTO</a></li>
<li><a href="URL">TEXTO</a></li>
<li><a href="URL">TEXTO</a></li>
<li><a href="URL">TEXTO</a></li>
</ul>
</div>
</center>
<style>#naranzul ul { list-style: none; margin: 0; padding: 0; } #naranzul img { border: none; } #naranzul { width: 200px; margin: 10px; } #naranzul li a { height: 32px; font-family:Helvetica; margin: 0; font-size: 15px; font-weight: bold; background: transparent; height: 24px; text-decoration: none; } #naranzul li a:link, #naranzul li a:visited { color: #FFF !important; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9Nk5rwEucjUCJFNdfNCHlbTv3CbuivqtMDSDSBbg6Sa_QbDdOsWDwveOTWCS9ajGVLW3dkyifENCkAWoy1imC-FNk88XQRvZuk1K6Oz7tAH3ER3T5jTnkmXb6ZyGmUTGnPuOpx7yP7tg/s1600/menu5.gif); padding: 8px 0 0 35px; } #naranzul li a:hover { color: #FFF !important; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9Nk5rwEucjUCJFNdfNCHlbTv3CbuivqtMDSDSBbg6Sa_QbDdOsWDwveOTWCS9ajGVLW3dkyifENCkAWoy1imC-FNk88XQRvZuk1K6Oz7tAH3ER3T5jTnkmXb6ZyGmUTGnPuOpx7yP7tg/s1600/menu5.gif) 0 -32px; padding: 8px 0 0 35px; } </style>Alfonso Canterohttp://www.blogger.com/profile/04957211769182442859noreply@blogger.com0tag:blogger.com,1999:blog-8990771625177905142.post-30228659348420272282014-05-01T09:34:00.002+02:002014-05-01T11:44:33.741+02:00Menú Vertical hecho con CSS <div class="tr_bq">
En el día de hoy vamos a ver como agregar a un sitio web un genial menú
(ya que este truco no solo sirve para los blogs de Blogger sino también
para otras plataformas y paginas puesto que solo es CSS y HTML básico lo
que compone este menú).</div>
<div class="tr_bq">
</div>
<b>Menú Vertical hecho con CSS </b><br />
<b></b><br />
Como ya dije el menú esta hecho solamente de CSS y HTML, por lo cual es
muy ligero y no añadirá un gran peso extra a la carga de tu blog.<br />
<br />
El menú se ve de la siguiente manera:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTDi63gGwnQuHnWLPJdbg4u8PCwcUbvh_5KrNS-1wQl7TGtahLkhCyttL5BFqDndfqgqmc_orprt0an4pURxPAhb5EV-IzDFsDz16DBiga-g6LsUKyjx4qobAe4amsx6oNmH8zdyumFQw/s1600/Menu+Vertical+hecho+con+CSS.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTDi63gGwnQuHnWLPJdbg4u8PCwcUbvh_5KrNS-1wQl7TGtahLkhCyttL5BFqDndfqgqmc_orprt0an4pURxPAhb5EV-IzDFsDz16DBiga-g6LsUKyjx4qobAe4amsx6oNmH8zdyumFQw/s1600/Menu+Vertical+hecho+con+CSS.png" /></a></div>
<br />
<a name='more'></a><br /><br />
<a href="https://www.blogger.com/null" name="more"></a>Para agregar este menú solo debes ir a <b>Diseño, Añadir Gadget, HTML/JavaScript</b> y pega allí lo siguiente:<br />
<blockquote>
<style><br />
#button {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>width: 12em;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>border-right: 1px solid #000;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>padding: 0 0 1em 0;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>margin-bottom: 1em;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, sans-serif;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>background-color: #90bade;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>color: #333;<br />
}<br />
#button ul {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>list-style: none;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>margin: 0;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>padding: 0;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>border: none;<br />
}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>#button li {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>border-bottom: 1px solid #90bade;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>margin: 0;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>list-style: none;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>list-style-image: none;<br />
}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>#button li a {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>display: block;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>padding: 5px 5px 5px 0.5em;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>border-left: 10px solid #1958b7;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>border-right: 10px solid #508fc4;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>background-color: #2175bc;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>color: #fff;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>text-decoration: none;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>width: 100%;<br />
}<br />
html>body #button li a {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>width: auto;<br />
}<br />
#button li a:hover {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>border-left: 10px solid #1c64d1;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>border-right: 10px solid #5ba3e0;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>background-color: #2586d7;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>color: #fff;<br />
}<br />
</style><br />
<div id="button"><br />
<ul><br />
<li><a href="<b><span style="color: #0b5394;">#</span></b>"><b><span style="color: #b45f06;">Inicio</span></b></a></li><br />
<li><a href="<b><span style="color: #0b5394;">#</span></b>"><b><span style="color: #b45f06;">Contacto</span></b></a></li><br />
<li><a href="<b><span style="color: #0b5394;">#</span></b>"><b><span style="color: #b45f06;">Indice</span></b></a></li><br />
<li><a href="<span style="color: #0b5394;"><b>#</b></span>"><b><span style="color: #b45f06;">Foro</span></b></a></li><br />
<li><a href="<b><span style="color: #0b5394;">#</span></b>"><b><span style="color: #b45f06;">Enlace</span></b></a></li><br />
<li><a href="<span style="color: #0b5394;"><b>#</b></span>"><b><span style="color: #b45f06;">F.A.Q</span></b></a></li><br />
<li><a href="<b><span style="color: #0b5394;">#</span></b>"><b><span style="color: #b45f06;">Acerca De</span></b></a></li><br />
<li><a href="<b><span style="color: #0b5394;">#</span></b>"><b><span style="color: #b45f06;">Blog</span></b></a></li><br />
</ul><br />
</div></blockquote>
Ahora solo debes reemplazar el signo # por la URL de la pagina que
quieras y para finalizar debes de sustituir lo que esta resaltado en
color naranja por el nombre que quieras que aparezca allí.<br />
<br />
El resultado final del truco es el siguiente:<br />
..............................................................................................................<br />
<style>
#button {
width: 12em;
border-right: 1px solid #000;
padding: 0 0 1em 0;
margin-bottom: 1em;
font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, sans-serif;
background-color: #90bade;
color: #333;
}
#button ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}
#button li {
border-bottom: 1px solid #90bade;
margin: 0;
list-style: none;
list-style-image: none;
}
#button li a {
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 10px solid #1958b7;
border-right: 10px solid #508fc4;
background-color: #2175bc;
color: #fff;
text-decoration: none;
width: 100%;
}
html>body #button li a {
width: auto;
}
#button li a:hover {
border-left: 10px solid #1c64d1;
border-right: 10px solid #5ba3e0;
background-color: #2586d7;
color: #fff;
}
</style>
<br />
<div id="button">
<ul>
<li><a href="https://www.blogger.com/blogger.g?blogID=8990771625177905142#">Inicio</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=8990771625177905142#">Contacto</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=8990771625177905142#">Indice</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=8990771625177905142#">Foro</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=8990771625177905142#">Enlace</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=8990771625177905142#">F.A.Q</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=8990771625177905142#">Acerca De</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=8990771625177905142#">Blog</a></li>
</ul>
</div>
.................................................................................................................<br />
Esperamos que te haya gustado este genial menú, el cual puede ser muy
útil para reemplazar el gadget de etiquetas, añadir enlaces y muchas
cosas mas, solo depende de tu imaginación.<br />
<br />
Si quieres recibir los mejores truco para tu blog, no olvides volver a
visitarnos y recomendarnos con tus amigos en las redes sociales.<br />
-<br />
Información tomada de: <a href="http://www.miltrucosblogger.info/2014/04/menu-vertical-hecho-con-css.html" target="_blank">http://www.miltrucosblogger.info/2014/04/menu-vertical-hecho-con-css.html</a>Alfonso Canterohttp://www.blogger.com/profile/04957211769182442859noreply@blogger.com0tag:blogger.com,1999:blog-8990771625177905142.post-54717876008313539382014-04-11T16:53:00.000+02:002014-04-11T16:56:05.709+02:00Cómo bloquear las invitaciones a juegos en Facebook<h2>
<span style="color: black; font-family: Cambria; font-size: medium;">Sí
amigos, no hace falta que pongas en tu muro un absurdo cartel pidiendo a
tus amigos que no te envíen más solicitudes para jugar con ellos.
Directamente, date el gustazo de bloquearlos.</span></h2>
<img alt="Bloquear juegos en facebook" class="aligncenter size-full wp-image-2190 imageSeven" src="http://elcodigogutenberg.com/wp-content/uploads/2013/05/juegos-3.jpg" height="425" width="425" /><br />
<span style="font-family: Calibri;"><span style="color: black; font-size: medium;">Todos
tenemos algún amigo que se pasa el día jugando en Facebook. Tienes
juegos de todos los tipos y sí, lo confieso, hasta yo he tenido mi
pecera y mi colección de gatitos y perritos que me esperaban todos los
días ansiosos para que les diera de comer y les limpiara las caquitas.
Empecé a aburrirme cuando mis amigos dejan sus peceras sin limpiar y
allí que iba yo a dejárselas como los chorros del oro. Lo peor de todo
es cuando veías algún animalito exótico de esos que decías, ¡Qué cuqui!,
y que nunca podías conseguir porque valía una pasta y nunca te llegaba
el crédito. Total, que acabé cogiéndoles manía y me pasa seguramente
como a ti, que te pones de los nervios cuando recibes alguna solicitud
para participar en un juego.</span></span><br />
<a name='more'></a><span style="font-family: Calibri;"><span style="color: black; font-size: medium;"><span id="more-2189"></span></span></span><br />
<h2>
<b><span style="color: black; font-family: Calibri; font-size: medium;">Bloquear solicitudes a juegos o aplicaciones</span></b></h2>
<span style="color: black; font-family: Calibri; font-size: medium;">Accede a <b>configuración de cuenta</b>, lo encuentras en la rueda dentada (configuración) en la parte superior derecha.</span><br />
<span style="color: black; font-family: Calibri; font-size: medium;">Sitúate en <b>bloqueos</b>. Verás la siguiente pantalla:</span><br />
<div style="text-align: center;">
<img alt="bloquear juegos y aplicaciones en facebook" class="aligncenter wp-image-2191 imageSeven" src="http://elcodigogutenberg.com/wp-content/uploads/2013/05/juegos-1.jpg" height="240" width="640" /></div>
<span style="color: black; font-family: Calibri; font-size: medium;">Fíjate en el cuadro <b>bloquear las invitaciones de aplicaciones</b>. Escribe aquí el nombre del “pesao” de tu amigo que te ametralla a invitaciones. </span><br />
<span style="color: black; font-family: Calibri; font-size: medium;">Si lo que quieres es bloquear una determinada aplicación. Dirígete a <b>bloquear aplicaciones</b>
y escribe el nombre de cualquier aplicación que no pare de enviarte
solicitudes para que la uses. Puedes bloquear galletitas de la suerte,
tarot siempre acierto, qué horror de horroróscopo, calendario quiero
acordarme de tu cumpleaños aunque te vea por la calle y no te salude,
etc. (lo nombres que aquí aparecen me los he inventado).</span><br />
<span style="color: black; font-family: Calibri; font-size: medium;">Por otro lado. Cuando un amigo te mande una solicitud. Pulsa sobre el aspa (x). Facebook te mostrará el siguiente cartel:</span><br />
<img alt="Bloquear juegos y aplicaciones en facebook" class="aligncenter size-full wp-image-2192 imageSeven" src="http://elcodigogutenberg.com/wp-content/uploads/2013/05/juegos-2.jpg" height="262" width="640" /><br />
<span style="color: black; font-family: Calibri; font-size: medium;">En el primer enlace puedes <b>bloquear el juego desde el que tu amigo te ha mandado la solicitud</b> y desde el segundo, puedes <b>bloquear todas las solicitudes que te manda el gracioso de tu amigo</b> que no para en todo el día de jugar.</span><br />
<span style="font-family: Calibri;"><span style="color: black; font-size: medium;">Fíjate en la parte superior derecha de tu pantalla cuando estés en tu timeline de <b>Facebook</b>.
Donde aparecen las invitaciones a eventos y los cumpleaños, también
encontrarás las solicitudes a juegos, pulsa sobre el aspa (x) para
bloquearlos o ves seleccionando los que desees bloquear. </span></span><br />
<span style="font-family: Calibri;"><span style="color: black; font-size: medium;">Por cierto, <b>si</b> te pasa lo que a mí, y <b>has abandonado el apasionante mundo de los juegos en Facebook</b>,
no estaría nada mal que te dieras un paseo por la pestaña aplicaciones,
la enuentras también en configuración de la cuenta, y revocaras los
permisos que tienes concedidos a los juegos que tanta diversión te
aportaron en el pasado.</span></span><br />
<span style="font-size: medium;"><span style="color: black;"><span style="font-family: Calibri;">Así de fácil. No pongas más carteles en tu muro, pasa a la acción y bloquea las aplicaciones que te molestan. </span></span></span><br />
<span style="font-size: medium;"><span style="color: black;"><span style="font-family: Calibri;">-</span></span></span><br />
<span style="font-size: medium;"><span style="color: black;"><span style="font-family: Calibri;">Información tomada de: <a href="http://elcodigogutenberg.com/como-bloquear-las-invitaciones-a-juegos-en-facebook" target="_blank">http://elcodigogutenberg.com/como-bloquear-las-invitaciones-a-juegos-en-facebook</a> </span></span></span>Alfonso Canterohttp://www.blogger.com/profile/04957211769182442859noreply@blogger.com0tag:blogger.com,1999:blog-8990771625177905142.post-56789986145227799612014-04-11T12:40:00.003+02:002014-04-11T12:44:30.829+02:00Cómo añadir un formulario de contacto a tu página de Facebook<span style="color: black; font-family: Calibri; font-size: medium;">Esta es otra de las aplicaciones que podemos añadir a nuestra <b>página de Facebook</b>.
Además, es muy útil si eres una empresa y quieres tener un formulario
para que tus clientes se comuniquen contigo sin tener que abandonar tu
página de Facebook.</span><br />
<img alt="Formulario de contacto en página de Facebook" class="aligncenter size-full wp-image-2645 imageSeven" src="http://elcodigogutenberg.com/wp-content/uploads/2013/07/contact-me-6.jpg" height="232" width="400" /><br />
<span style="color: black; font-family: Calibri; font-size: medium;">Ya te explicábamos como<a href="http://elcodigogutenberg.com/como-insertar-twitter-en-tu-pagina-de-facebook" target="_blank"> insertar tu Twitter en Facebook</a>. Para añadir un formulario vamos a seguir unos pasos muy similares y también quedará integrado en los <b>cuadros de favoritos</b>.</span><br />
<a name='more'></a><span style="color: black; font-family: Calibri; font-size: medium;"><span id="more-2643"></span></span><br />
<span style="color: black; font-family: Calibri; font-size: medium;">Lo primero que debemos hacer es buscar la aplicación. Para ello vamos a usar el buscador de Facebook. Escribe <b>ContactMe</b>, que es la aplicación que vamos a instalar.</span><br />
<img alt="Interfaz de ContactMe" class="aligncenter size-full wp-image-2646 imageSeven" src="http://elcodigogutenberg.com/wp-content/uploads/2013/07/contact-me-1.jpg" height="113" width="400" /><br />
<ul>
<li><span style="color: black; font-family: Calibri; font-size: medium;">Pulsa sobre el botón <b>Get started</b>.</span></li>
<li><span style="color: black; font-family: Calibri; font-size: medium;">La
aplicación te pedirá que escojas la página en la que quieres insertar
el formulario. Selecciona tu página y pulsa sobre el botón <b>Agregar ContactMe</b>.</span></li>
<li><span style="color: black; font-family: Calibri; font-size: medium;">La aplicación nos dirigirá a nuestra página. Busca ContactMe en los cuadros de favoritos y pulsa sobre él.</span></li>
<li><span style="color: black; font-family: Calibri; font-size: medium;">Ahora tienes que escoger la <b>dirección a la que quieres que te lleguen los correos</b> <b>electrónicos</b>. Introdúcela y pulsa <b>Setup account</b>. Y ya tienes creado tu formulario.</span></li>
</ul>
<img alt="Añade tu correo electrónico a contactMe" class="aligncenter size-full wp-image-2647 imageSeven" src="http://elcodigogutenberg.com/wp-content/uploads/2013/07/contact-me-3.jpg" height="148" width="400" /><br />
<span style="color: black; font-family: Calibri; font-size: medium;">Al introducir la cuenta de correo electrónico a lo mejor os aparece el siguiente mensaje:</span><br />
<img alt="Mensaje de conformidad ContactMe" class="aligncenter size-full wp-image-2653 imageSeven" src="http://elcodigogutenberg.com/wp-content/uploads/2013/07/contact-me-7.jpg" height="168" width="400" /><br />
<span style="color: black; font-family: Calibri; font-size: medium;">Pulsa
en continuar y automáticamente se abrirá el formulario. Asegúrate de
que el navegador no te está mostrando algún elemento emergente bloqueado
y de que has introducido correctamente tu dirección de correo.Si tienes
problemas prueba a cambiar de navegador, de esta manera, algunos amigos
que tenían problemas han conseguido instalarlo.<br />
</span><br />
<span style="color: black; font-family: Calibri; font-size: medium;">Ahora bien, si no te gusta como ha quedado, puedes tunearlo. Pulsa sobre <b>Customize my form</b>.
En la página que se abre puedes añadir el logotipo y el nombre de tu
empresa, cambiar los campos del formulario, añadir el captcha para
evitar el Spam entre otras cosas. Para confirmar los cambios pulsa sobre
el botón <b>Save form</b>.</span><br />
<img alt="Formulario customizado" class="aligncenter size-full wp-image-2648 imageSeven" src="http://elcodigogutenberg.com/wp-content/uploads/2013/07/contact-me-5.jpg" height="400" width="390" /><br />
<span style="color: black; font-family: Calibri; font-size: medium;">Recuerda que para <b>cambiar la posición de las distintas aplicaciones</b>
que tienes en tu cuadro de favoritos, solo tienes que pulsar sobre el
icono en forma de lápiz que aparece en la parte superior derecha de la
aplicación y selecciona <b>intercambiar posición con:</b> la aplicación por la que quieras sustituir su posición en el cuadro de favoritos.</span><br />
<span style="color: black; font-family: Calibri; font-size: medium;">Y ya está, ya tienes tu formulario listo y preparado para recibir las consultas de tus clientes.</span><br />
<span style="color: black; font-family: Calibri; font-size: medium;">-</span><br />
<span style="color: black; font-family: Calibri; font-size: medium;">Información tomada de: <a href="http://elcodigogutenberg.com/como-anadir-un-formulario-de-contacto-a-tu-pagina-de-facebook" target="_blank">http://elcodigogutenberg.com/como-anadir-un-formulario-de-contacto-a-tu-pagina-de-facebook</a></span>Alfonso Canterohttp://www.blogger.com/profile/04957211769182442859noreply@blogger.com0tag:blogger.com,1999:blog-8990771625177905142.post-23484029474899191522014-04-10T18:58:00.001+02:002014-04-10T19:05:43.044+02:00Colocar aviso de uso de cookies en el blog<br />
<div class="tr_bq">
Tengo un blog ¿Me afecta a mi la ley de cookies?, pues bien en esta entrada nos enseñan <b>como añadir un aviso en el cual le avisaran a sus lectores que sus blog usaba cookies</b>
y así evitar cualquier sancion, aunque esta ley aplica solo para blogs
españoles es mejor evitar cualquier incidente a futuro, así que manos a
la obra.</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMFaQaT2SBJeRPBP5_H6A62YZmMKa9rpgDvM_NBff18ywyt7yH4GMkniasYHwSqYekDkgcOQfFxohQoIaDsoUrEv7LcaVsGxL57KOFk_GLyGv4whLnAxG27QH5fFCLyHKFL_olUgBrdKE/s1600/Aviso+de+cookies.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Colocar aviso de uso de cookies en el blog" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMFaQaT2SBJeRPBP5_H6A62YZmMKa9rpgDvM_NBff18ywyt7yH4GMkniasYHwSqYekDkgcOQfFxohQoIaDsoUrEv7LcaVsGxL57KOFk_GLyGv4whLnAxG27QH5fFCLyHKFL_olUgBrdKE/s400/Aviso+de+cookies.jpg" height="293" title="Colocar aviso de uso de cookies en el blog" width="400" /></a></div>
<a href="https://www.blogger.com/null" name="more"></a><br />
Este truco funciona tanto para Blogger como para Wordpress, y lo que
hace es añadir una barra con un aviso sobre el uso de cookies al final
de tu blog.<br />
<br />
<a name='more'></a><br /><br />
Para usar este truco en Blogger agrega el código siguiente como un gadget en <b>Diseño, Añadir Gadget, HTML/JavaScript</b> , para usarlo en Wordpress añadelo en el <b>archivo footer.php</b><br />
----------------------------------------------------------------------------------------- <br />
<script src="http://j.maxmind.com/app/geoip.js"></script><br />
<div
id="barritaloca"
style="display:none;position:fixed;left:0px;right:0px;bottom:0px;width:100%;min-height:40px;background:
#333333;color:#dddddd;z-index: 99999;"><br />
<div style="width:100%;position:absolute;padding-left:5px;font-family:verdana;font-size:12px;top:30%;"><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>Usamos
cookies propias y de terceros para mostrar publicidad personalizada
seg&uacute;n su navegaci&oacute;n. Si continua navegando
consideramos que acepta el uso de cookies.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><a
href="javascript:void(0);"
style="padding:4px;background:#4682B4;text-decoration:none;color:#fff;"
onclick="PonerCookie();"><b>OK</b></a><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><a
href="http://www.google.com.ar/intl/es-419/policies/technologies/types/"
target="_blank"
style="padding-left:5px;text-decoration:none;color:#ffffff;">M&aacute;s
informaci&oacute;n</a><br />
</div><br />
</div><br />
<script><br />
function getCookie(c_name){<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var c_value = document.cookie;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var c_start = c_value.indexOf(" " + c_name + "=");<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if (c_start == -1){<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>c_start = c_value.indexOf(c_name + "=");<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if (c_start == -1){<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>c_value = null;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}else{<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>c_start = c_value.indexOf("=", c_start) + 1;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var c_end = c_value.indexOf(";", c_start);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if (c_end == -1){<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>c_end = c_value.length;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>c_value = unescape(c_value.substring(c_start,c_end));<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>return c_value;<br />
}<br />
function setCookie(c_name,value,exdays){<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var exdate=new Date();<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>exdate.setDate(exdate.getDate() + exdays);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>document.cookie=c_name + "=" + c_value;<br />
}<br />
if(geoip_country_code()=="ES" && getCookie('aviso')!="1"){<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>document.getElementById("barritaloca").style.display="block";<br />
}<br />
function PonerCookie(){<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>setCookie('aviso','1',365);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>document.getElementById("barritaloca").style.display="none";<br />
}<br />
</script><br />
----------------------------------------------------------------------------------------------------------<br />
Información tomada de:<a href="http://www.miltrucosblogger.info/2013/09/colocar-aviso-de-uso-de-cookies-en-el-blog.html" target="_blank"> http://www.miltrucosblogger.info/2013/09/colocar-aviso-de-uso-de-cookies-en-el-blog.html</a>Alfonso Canterohttp://www.blogger.com/profile/04957211769182442859noreply@blogger.com0tag:blogger.com,1999:blog-8990771625177905142.post-66907803228848128362014-03-16T19:30:00.000+01:002014-03-16T19:44:22.016+01:0010 sitios para descargar plantillas para blogger gratis¿Te gustaría <b>cambiar el diseño de tu blog</b>, pero no
tienes ni dea de cómo hacerlo, ni presupuesto para pagarlo? Pues por si
no lo sabías, en la red hay un montón de sitios que ofrecen <b>plantillas gratuítas para blogger </b> que te permiten cambiar el aspecto a tu blog.<br />
Evidentemente el resultado no es el mismo que si te hacen un diseño
de plantilla personalizada, pero sin duda es una muy buen alternativa
cuando el presupuesto disponible para el blog es de cero euros.<br />
Lo único que tienes que hacer es encontrar una plantilla que te guste, descargarla, y luego subirla a tu blog. ¡Nada más! <b>¿Fácil verdad?</b> Lo difícil será elegir plantilla, ya lo verás ya.<br />
Además algunas ofrecen recursos relacionados, como iconos sociales, fondos, recursos para twitter y facebook…<br />
<span id="more-4105"></span><br />
<a name='more'></a><br /><br />
Estos son los sitios de plantillas gratis para blogger que a mí más me gustan:<br />
<br />
<h3>
<a href="http://www.compartidisimo.com/p/plantillas.html" rel="nofollow" target="_blank" title="Compartidísimo">Compartidisimo</a></h3>
<div style="text-align: center;">
<a href="http://www.compartidisimo.com/p/plantillas.html" rel="nofollow" target="_blank"><img alt="plantillas blogger compartidisimo" class="aligncenter size-full wp-image-4648" src="http://www.laorquideadichosa.com/wp-content/uploads/2013/05/plantillas-blogger-compartidisimo.jpg" height="258" width="500" /></a></div>
Un buen número de plantillas, de diferentes estilos, con tutorial
para instalarlos, además de toda clase de recursos relacionados con tu
blog… ¡y en español! Creo que no se puede pedir más <img alt=";)" class="wp-smiley" src="http://www.laorquideadichosa.com/wp-includes/images/smilies/icon_wink.gif" /> Muy buen recurso, os lo recomiendo.<br />
<br />
<a href="http://leelou-blogs.com/type/blog-templates?style&color" rel="nofollow" target="_blank" title="Leelou Blogs"><b> Leelou Blogs</b></a><br />
<div style="text-align: center;">
<a href="http://leelou-blogs.com/type/blog-templates?style&color" rel="nofollow" target="_blank"><img alt="plantillas blogger leeloublogs" class="aligncenter size-full wp-image-4651" src="http://www.laorquideadichosa.com/wp-content/uploads/2013/05/plantillas-blogger-leeloublogs.jpg" height="258" width="500" /></a></div>
<div style="text-align: left;">
Además de plantillas blogs gratis, podéis descargar fondos, iconos sociales, imprimibles…</div>
<h3>
<a href="http://thecutestblogontheblock.com/category/backgrounds/blogger-templates" rel="nofollow" target="_blank" title="The cutest blog in the block">The Cutest Blog on the block</a></h3>
<img alt="plantillas blogger cutestblog" class="aligncenter size-full wp-image-4649" src="http://www.laorquideadichosa.com/wp-content/uploads/2013/05/plantillas-blogger-cutestblog.jpg" height="258" width="500" /><br />
Plantillas y banners gratis, fondos para twitter, facebook covers…<br />
<br />
<h3>
<a href="http://lenatoewsdesigns.blogspot.com.es/search/label/2%20column%20blogger%20layouts" rel="nofollow" target="_blank" title="Simply fabulous"> Simply Fabulous</a></h3>
<div style="text-align: center;">
<a href="http://lenatoewsdesigns.blogspot.com.es/search/label/2%20column%20blogger%20layouts" rel="nofollow" target="_blank"><img alt="plantillas blogger simplyfabulous" class="aligncenter size-full wp-image-4647" src="http://www.laorquideadichosa.com/wp-content/uploads/2013/05/plantillas-blogger-simplyfabulous.jpg" height="258" width="500" /></a></div>
Ofrece un buen número de plantillas gratuítas de diferentes estilos<br />
<br />
<h3>
<a href="http://www.ipietoon.com/search/label/Template" rel="nofollow" target="_blank" title="Ipietoon">Ipietoon</a></h3>
<div style="text-align: center;">
<b><a href="http://www.ipietoon.com/search/label/Template" rel="nofollow" target="_blank"><img alt="plantillas blogger ipetoon" class="aligncenter size-full wp-image-4650" src="http://www.laorquideadichosa.com/wp-content/uploads/2013/05/plantillas-blogger-ipetoon.jpg" height="258" width="500" /></a></b></div>
<br />
Tiene una buena cantidad de diseños, aunque tendrás que acceder a
cada uno de ellos para saber si es gratis o no. Pero si te gusta su
estilo, merecerá la pena <img alt=";)" class="wp-smiley" src="http://www.laorquideadichosa.com/wp-includes/images/smilies/icon_wink.gif" /> <br />
<br />
Además hay <b>directorios con plantillas para blogger gratis</b>,
donde encontraréis un gran volumen de plantillas disponibles y diseños
muy variados, para todos los gustos. Lo malo es que te puedes volver
loca entre tanta plantilla <img alt=";)" class="wp-smiley" src="http://www.laorquideadichosa.com/wp-includes/images/smilies/icon_wink.gif" /> a veces si no tienes muy claro lo que quieres estos directorios pueden resultar agotadores.<br />
Aquí te dejo los que yo suelo visitar:<br />
<br />
<a href="http://blogtemplate4u.com/" rel="nofollow" target="_blank" title="http://blogtemplate4u.com/">http://blogtemplate4u.com/</a><br />
<a href="http://btemplates.com/" rel="nofollow" target="_blank" title="http://btemplates.com/">http://btemplates.com/</a><br />
<a href="http://www.templates-blogger.com/" rel="nofollow" target="_blank" title="http://www.templates-blogger.com/">http://www.templates-blogger.com/</a><br />
<a href="http://www.deluxetemplates.net/" rel="nofollow" target="_blank" title="http://www.deluxetemplates.net/">http://www.deluxetemplates.net/</a><br />
<a href="http://www.bietemplates.com/" rel="nofollow" target="_blank" title="http://www.bietemplates.com/">http://www.bietemplates.com/</a><br />
<br />
<h3>
¿Conocías estos recursos? ¿Te atreves a intentar cambiar el diseño de tu blog?</h3>
-<br />
Información tomada de: <a href="http://www.laorquideadichosa.com/2013/05/plantillas-para-blogger-gratis.html" target="_blank">http://www.laorquideadichosa.com/2013/05/plantillas-para-blogger-gratis.html</a><br />
<h3>
</h3>
Alfonso Canterohttp://www.blogger.com/profile/04957211769182442859noreply@blogger.com0