Tutoriales2010 - El que busca encuentra.: gadget

Mostrando las entradas con la etiqueta gadget. Mostrar todas las entradas

jueves, 14 de noviembre de 2013

10:00:00 p.m.
0 Comentarios

Oculta ó elimina el mensaje: "Mostrando entradas con la etiqueta..."

BLOGGER, gadget, personlisacion, tutoriales

Cuando se está buscando una entrada dentro del blog y usamos las etiquetas para localizarla, aparece un recuadro con el mensaje:

mensaje mostrar todas las entradas

O bien, al hacer una búsqueda dentro del blog aparece el mensaje:
Ninguna entrada coincide con la consulta. Mostrar todas las entradas.

Para ocultar este mensaje hacemos lo siguiente:

Entra a Plantilla > Edición de HTML y antes de ]]></b:skin> pega esto:

.status-msg-wrap {visibility:hidden;display:none;}

Guarda los cambios y listo.

Para eliminar el mensaje:

Entra a Plantilla | Edición de HTML, marca la casilla Expandir plantillas de artilugios y busca este código:

<b:include data='top' name='status-message'/>

Elimínelo y guarda los cambios.

Con cualquiera de estos dos métodos, ese recuadro dejará de aparecer en nuestras búsquedas.

Leer Completo

viernes, 20 de septiembre de 2013

7:51:00 p.m.
0 Comentarios

Caja de comentarios de facebook en las entradas de tu blog de blogger.

BLOGGER, Facebook, gadget, tutoriales

Hoy les voy a enseñar a poner la caja de comentarios de facebook, ya había hecho una entrada que habla de los mismo ( puedes verlo aquí) pero surgieron comentarios que la caja sale fuera de las entradas publicadas en el blog, entonces hoy les traigo otro método aún mas fácil que el anterior y que nos permitirá poner la caja de comentarios donde nosotros así lo deseemos. Entonces manos a la obra amigos.

Comments Box - Facebook Developers, ¿Que es?

Este pluggin nos permitirá agregar dicha caja, para entrar a la pagina oficial de Facebook Developers has clic AQUI, Nos mostrara la pagina en el lenguaje ingles pero no te preocupes no es difícil manejar la pagina solo tenemos que agregar unos cuantos parámetros para realizar el diseño de nuestra caja de comentarios. Sigue los siguientes pasos:

Busca el cuadro de texto que te indica que debes introducir tu URL del sitio al cual quieres agregarle la caja de comentarios (
URL to comment on
) y escribe una URL DE EJEMPLO cualquier cosa que identifiques fácilmente por ejemplo en este caso yo le pondré: http://EJEMPLO.COM (mas adelante veras el porque de ese url)
En ese mismo formulario nos pide llenar el Width que en español es el equivalente al ancho de la caja de comentarios entonces ahí obviamente varia el valor dependiendo de nuestra plantilla yo en este ejemplo usare un ancho de 500px
El siguiente campo nos muestra (Number of post) cuantas entradas o comentarios deseamos mostrar por defecto nos pone una cantidad 10 de comentarios y les recomiendo que lo dejen asi para que no tarde en cargar o se haga muy extensa nuestra caja.
En el ultimo campo (Color Scheme) nos muestra dos opciones y ahí elegiremos el diseño de nuestra preferencia, podemos elegir entre el diseño Dark ó Light.

NOTA: Para un mejor diseño (creo que ya los has de ver notado) guíate en la vista previa que te muestra abajo del formulario antes llenado. Así quedo llenado nuestro formulario:

caja de comentarios de facebook, blogger facebook, comments facebook

Ahora solo debemos dar clic sobre el botón Get Code para generar nuestro código correspondiente. Se abrirá en una ventana emergente como la imagen siguiente:

Si notas en la parte superior nos muestra varias opciones de código como html5, xfbml y otros mas...

Tenemos que elegir la pestaña de HTML5 y seguimos los pasos que viene dentro de esa misma ventana.

El primer paso es copiar la primera parte del código y pegarla justo después de la apertura de la etiqueta: <boby>. Así que nos vamos a Plantilla > Editar Html y damos clic dentro del código y presionamos la combinación de teclas "ctrl+f" y en el cuadro de búsqueda agregamos la etiqueta a buscar que en este caso es la de <body>.
La segunda parte del código es la importante, ¿recuerdas que al asignar los parámetros de nuestra caja al inicio de la entrada pusimos una url como ejemplo? ( http://EJEMPLO.com ) si analizamos el código te darás cuenta que ese url se genero en esa parte del código (observa la imagen anterior) lo que debemos hacer es guardar muy bien ese pedazo de código en bloc de notas o un documento de word ya que lo utilizaras cada vez que quieras agregar una caja de comentarios en algún post.(TODO EL CODIGO)

Hasta ahora tenemos el pluggin instalado en nuestra plantilla pero nos falta mostrarla en las entradas de nuestro blog y aquí es donde necesitaras un poco de paciencia si es que en tu blog llevas muchas entradas ya que deberemos agregar la caja entrada por entrada. SI LO SÉ, ES ALGO TEDIOSO pero sin embargo no eh visto otra forma de hacerlo (si alguien sabe favor de compartirlo).

¿ Y como agrego la caja de comentarios en mi entrada?

Es muy fácil solo debemos publicar nuestra entrada (si es nueva), si ya la tienes publicada solo debes contar con la url, por eso la importancia de ya tenerla publicada.
Recuerdas que guardamos un código en el bloc de notas, ¿Adivina que? llego el momento de usarlo, abres tu bloc de notas y copias el código, después nos vamos a nuestra pagina de blogger en la sección de Entradas y editamos la entrada a la cual deseamos agregar la caja de comentarios.

Teniendo abierta nuestra entrada nos iremos a la opción de editar en HTML

Nos vamos al final de nuestro código y antes de pegar el código (copiando anteriormente) les daré un "tip" para separar la caja de comentarios con el resto del post. Si sabes código HTML sabrás que la etiqueta <br/> sirve para dar un espacio de linea ( un enter ) así que te recomiendo que agregues al menos dos de esas etiquetas para poder darle una separación a nuestra caja.
Ahora si pegamos el código, pero nos falta agregar la url de la misma entrada, si observas detenidamente tu código aún tiene la url de ejemplo esa es la que debemos cambiar (sin quitar las comillas) el código terminado debió quedarte así:

<br/>
<br/>
<div class="fb-comments" data-href="urlpost" data-width="610"></div>

Lo resaltado en color rojo ahi debes poner la url de tu entrada en la que quieras visualizar tu caja de comentarios.
Lo resaltado en Azul es el ancho para que puedas modificarla a tu gusto.

Ahora solo nos queda guardar de nueva cuenta nuestra entrada y LISTO! si hiciste todos los pasos bien se te mostrara una caja de comentarios como la que se muestra en esta misma entrada. justamente abajo. Si tienes alguna duda déjame un comentario.

NOTA: Recuerda que debes realizar el mismo procedimiento para cada una de las entradas en las cuales quieres colocar la caja de comentarios.

Leer Completo

jueves, 12 de septiembre de 2013

7:27:00 p.m.
0 Comentarios

Redes sociales (gadget) en botones.

BLOGGER, gadget, tutoriales

Hoy les voy a compartir un gadget llamado Social media tabs en lo personal me gusta mucho, es muy versátil ya que lo puedes acomodar casi en cualquier lugar de tu pagina web. Es un Gadget compacto y de sencilla instalación.

Por ahora viene con las siguientes redes sociales y sitios de compartimientos:

Facebook
Twitter
Google+
RSS
Pinterest
Youtube
Vimeo
Deliciuos
Instagram
Dribbble
Digg
StumbleUpon
Deviantart
Tumbrl

Y continuara...

Como yo se que tu quieres instalarlo en tu blog, te diré como lo harás, a continuación...

Ve a Blogger > Plantilla > Editar HTML, das un clic dentro de la plantilla, presionas CTRL + F, buscas </head> y pegas justo antes este código:

El que esta resaltado en verde es Jquery. Debes omitirlo si ya lo tienes en tu blog.

Después de haber guardado los cambios anteriores, ve a Diseño > Añadir un gadget > HTML/Javascript y pegas allí este código:

</div>

jQuery(document).ready(function(jQuery)

{

jQuery('#social-tabs').dcSocialTabs(

{

method: 'slide', location: 'left', align: 'top', position: 'fixed', offset: 70, height: 400, width: 320, start: 0, rotate: { delay: 8000,direction :'down' }, loadOpen:false, autoClose:true, imagePath: 'https://sites.google.com/site/terrenoblogger/imagenes/',

widgets: 'facebook,fblike,google,twitter,rss,pinterest',

facebookId: 'ID-PAGINA-FACEBOOK',

fblikeId: 'PAGINA-FACEBOOK',

googleId: 'GOOGLE-ID',

twitterId: 'USUARIO',

rssId: 'http://feeds.feedburner.com/USUARIO',

pinterestId: 'USUARIO',

youtubeId: 'USUARIO',

vimeoId: 'USUARIO',

deliciousId: 'USUARIO',

instagramId: '#USUARIO',

dribbbleId: 'USUARIO',

stumbleuponId: 'USUARIO',

tumblrId: 'USUARIO',

deviantartId: 'USUARIO',

twitter: {title:'Tweets Recientes',follow:'Sígueme en Twitter',thumb:true,retweets:false,replies:false,limit:10},

fbrec: {header:true},

fblike:{stream:false,header:true,limit:36},

facebook:{title:'Facebook',follow:'Síguenos en Facebook',text:'content',limit:10},

google: {title:'Google+',follow:'Agréganos a tu Círculos',limit:10,api_key: 'AIzaSyAVx2W-gR7eqIpATEgp2IMOWtxzDDDOqt0'},

pinterest: {title:'Pinterest',follow:'Encuentrame en Pinterest',limit:10},

rss: {title:'Suscribete a nuestro Feed',follow:'Subscribe',limit:10},

youtube: {title:'Suscribete',subscribe:true,limit:10},

instagram: {clientId:'',redirectUrl:'',accessToken:'',limit:10,title:'Instagram'},

vimeo: {title:'Vimeo',follow:'Subscribe',limit:10}, flickr: {title:'Flickr',limit:20},

stumbleupon: {title:'Stumbleupon',follow:'Follow',limit:10},

tumblr: {title:'Tumblr',follow:'Follow',limit:10},

delicious: {title:'Delicious',follow:'Follow on Delicious',limit:10},

digg: {title:'Latest Diggs',limit:10}, lastfm: {title:'Last.fm',limit:20},

dribbble: {title:'Dribbble',follow:'Follow on Dribbble',limit:10},

deviantart: {title:'deviantART',follow:'Follow',limit:10}

});

</script>

Ahora, esto que harás sera importante.

En la linea resaltada en azul están escritas solo las redes sociales que se van a mostrar; si deseas mostrar mas redes sociales, solo debes escribir después de pinterest, una coma y luego el nombre de la otra red social y luego en el código resaltado en azul agregaras el nombre de usuario de dicha red social.

Solo puedes agregar las redes sociales que están resaltadas en azul.

Las redes sociales que por defecto estan activas, son las de color amarillo. Asi que debes reemplazar el usuario respectivo en cada una de ellas.

Para conocer el ID de tu Pagina en facebook, ve a: http://graph.facebook.com/NOMBRE-DE-PAGINA y alli se te mostrara el ID de tu pagina.

Para saber el usuario de feedburner, te diriges a http://feedburner.google.com/. Elige tu feed y das un clic en "Edit Feed Details…" (Esta bajo el titulo de tu feed). Ahora en "Feed Address:" dentro un recuadro esta el Usuario de tu Feedburner

La linea resaltada en rojo al inicio del código indica en que lugar del blog se mostrara el Widget. Utiliza estos parametros para ajustar la posicion del los botones a tu gusto:

left = iziquerda
right = derecha
top = arriba
bottom = abajo

Este Gadget tiene otras opciones de personalización, pero no quiero enredarte. Yo se que con esto lo tendrás funcionando correctamente.

Si necesitas ayuda deja el comentario, Hasta pronto.

TAMBIÉN TE PODRÍA INTERESAR ESTO:

Leer Completo

jueves, 5 de septiembre de 2013

7:56:00 p.m.
0 Comentarios

Como ocultar un gadget en blogger.

BLOGGER, gadget, tutoriales

¿Quieres hacer que gadget solo se muestre en la página principal de tu blog de blogger y cuando un usuario valla a un post no se muestre el widget? Yo te voy a enseñar a hacerlo. Muchos bloggeros quieren mostrar un widget de slideshow, fotos, temas destacados o widgets en su sidebar, etc. Pero solo quieren que les parezca en su página principal y no lo quieren mostrar cuando el usuario habrá cualquier post de su blog. Es un truco para blogger muy simple ademas que nos Ahorra espacio y hace un desempeño de su blog como un diseño web profesional.

EMPEZAMOS:

Inicia sesión en blogger y da un clic en “Diseño”

¿Como ocultar un widget en blogger? Busca el widget que quieras implementar este truco, por ejemplo, yo quiero que aparezca en mi página principal solo un widget que contiene un anuncio y no quiero mostrarlo al momento de abrir cualquier post. Ustedes podrán hacer este truco para blogger con cualquier widget que ustedes quieran.

Ahora lo que are es buscar el Id de mi widget, lo voy hacer dando un clic derecho donde dice “Editar”, al dar un clic derecho les mostrara una ventana en su navegador y van a dar un clic donde dice “Copiar dirección del enlace”. Una vez hecho esto, abre una página en Word o un blog de notas y pégalo, el código que pegaras en Word o en tu blog de notas se verá así:

http://www.blogger.com/rearrange?blogID=23034056867142304504&widgetType=HTML&widgetId=HTML30&action=editWidget&sectionId=col1

Bueno, una vez hecho esto el ID de mi widget es HTML30 y está ubicado antes del código &action, así mismo encontrar su ID único de su widget, les recuerdo que cada widget tiene un ID único.

Ahora da un clic en “Plantilla” y después clic en “Editar HTML” y se te abrirá el editor HTML de tu plantilla, se mostrara igual como la imagen que esta a continuación:

En este punto deberás presionar la combinacion de teclas “Ctrl+f” para que aparezca el buscador integrado en la parte superior derecha de tu editor, debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor. Vamos a buscar el ID de nuestro widget, ponemos el ID que encontramos en el diseño de nuestro blog y que les dije que lo copien y lo peguen en su página de Word o su blog de notas. Copiamos nuestro ID, por ejemplo mi ID es HTML30 y lo voy a buscar en mi Editor HTML de blogger, mire la imagen a continuación:

Una vez que hayas encontrado el código en el Editor HTML de tu plantilla se mostrara como la siguiente imagen

Tienes que desplegar todo el código, tal como lo muestro en la siguiente imagen dando clic en la flecha que aparece a tu lado izquierdo.

Una vez hecho esto, les mostrar un código parecido al siguiente:

<b:widget id='HTML30' locked='false' title='' type='HTML'>

<b:includable id='main'>

<b:if cond='data:title != ""'>

<h2 class='title'><data:title/></h2>

</b:if>

<div class='widget-content'>

<data:content/>

</div>

<b:include name='quickedit'/>

</b:includable>

</b:widget>

</b:section>

</div>

En este punto, es muy importante, insertar dos líneas de código para realizar el truco de que se muestre su widget solo en la página principal de su blog de blogger y no cuando se habrá cualquier post. Vamos a insertar dos códigos dentro del código que encontraste, de los cuales serían los dos siguientes códigos

<b:if cond='data:blog.url == data:blog.homepageUrl'>

</b:if>

Y para hacerles más fácil en donde poner esos dos códigos, les dejo mi ejemplo y miren el código que está marcado de color rojo, los cuales son los dos códigos que van hacer ubicados en diferentes secciones a continuación:

<b:widget id='HTML30' locked='false' title='' type='HTML'>

<b:includable id='main'>

<b:if cond='data:blog.homepageUrl == data:blog.url'>

<b:if cond='data:title != ""'>

<h2 class='title'><data:title/></h2>

</b:if>

<div class='widget-content'>

<data:content/>

</div>

<b:include name='quickedit'/>

</b:if>

</b:includable>

</b:widget>

</b:section>

</div>

Eso es todo, ahora dale un clic en “Guardar plantilla” y abre tu página principal de blogger y luego cualquier post de blog y ya no se mostrara el widget que quisiste ocultarlo. Recuerda hacer este truco para cada widget que quieras ocultar.

Si Necesitas ayuda pregunta! no duden en hacérmelo saber y de inmediato les responderé.

Leer Completo

domingo, 25 de agosto de 2013

7:40:00 p.m.
0 Comentarios

Bóton que muestra una entrada al azar.

BLOGGER, gadget, tutoriales

En esta ocasión les traigo un gadget que nos ayudara a mostrar entradas de nuestro blog al azar, es muy fácil de instalar o añadir en nuestro blog basta con agregar un nuevo gadget en la plantilla.

Aquí puedes ver un ejemplo:

Clic en la imagen para ver el ejemplo.

¿Como añadir el botón?

Nos iremos a Diseño > Añadir gadget > Html/Javascript, ahora solo copiamos y pegamos el siguiente código:

<div id='myLuckyPost'></div> <script type='text/javascript'> function showLucky(root){ var feed = root.feed; var entries = feed.entry || []; var entry = feed.entry[0]; for (var j = 0; j < entry.link.length; ++j){if (entry.link[j].rel == 'alternate'){window.location = entry.link[j].href;}}} function fetchLuck(luck){ script = document.createElement('script'); script.src = '/feeds/posts/summary?start-index='+luck+'&max-results=1&alt=json-in-script&callback=showLucky'; script.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(script); } function feelingLucky(root){ var feed = root.feed; var total = parseInt(feed.openSearch$totalResults.$t,10); var luckyNumber = Math.floor(Math.random()*total);luckyNumber++; a = document.createElement('a'); a.href = '#random'; a.rel = luckyNumber; a.onclick = function(){fetchLuck(this.rel);}; a.innerHTML = 'entrada al azar'; document.getElementById('myLuckyPost').appendChild(a); } </script> <script src='/feeds/posts/summary?max-results=0&alt=json-in-script&callback=feelingLucky'></script> <style type='text/css'> @import url( 'http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:700' ); #myLuckyPost a { position: relative; color: rgba(255,255,255,1); text-decoration: none; background-color: rgba(219,87,5,1); font-family: 'Yanone Kaffeesatz'; font-weight: 700; font-size: 30px; display: block; padding: 4px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7); -moz-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7); box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7); margin: 10px auto; width: 200px; text-align: center; -webkit-transition: all .1s ease; -moz-transition: all .1s ease; -ms-transition: all .1s ease; -o-transition: all .1s ease; transition: all .1s ease; } #myLuckyPost a:active { -webkit-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9); -moz-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9); box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9); position: relative; top: 6px; } </style>

Ahora antes de guardas podemos cambiar el texto en color rojo para que se muestre en nuestro botón creado en css, si sabes de css lo puedes modificar a tus colores preferidos o que mejor se acomoden a tu blog.

Si tienes alguna duda no dudes en dejarme un comentario. Te contestare a la brevedad.

Leer Completo

viernes, 9 de agosto de 2013

8:23:00 p.m.
0 Comentarios

Caja de redes sociales con un estilo profesional

BLOGGER, gadget, tutoriales

Para todos aquellos que quieran unificar todos los enlaces de sus redes sociales del blog aquí te dejo otro diseño mas. Este Gadget para Blogger que además de ser bastante útil, es muy facil de combinar con la plantilla y muy agradable a la vista por su estética parecida a Windows 8.

Su instalación es muy fácil solo tenemos que agregar un nuevo gadget para eso iremos a nuestra parte de configuración Diseño y ahí agregamos un nuevo gadget de tipo Html/JavaScript.

Copia y pega el siguiente codigo:

<div class="sidebar-subscription"> <ul id="subscription"> <li><a href="URL TWITTER" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC2PUZE4hvJB2e0TirOLIDLvix7bopSmOkqFGdUgGynhWdP46OPOqgu3vgt5j9AtZIFGNW5fCkTG8JoggC7FvdeB7u03LtYgPRoms_-INS48CIr_d3Vwnb9ejk4nadWpycB9sFItnGSHya/s1600/twittersocial.png" /></a> <h4> <a href="URL TWITTER" target="_blank">Twitter</a></h4> No te pierdas nada estés donde estés</li> <li><a href="URL RSS" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGVWkRLZ83b5n2eH_DzxA0QzctC8Dh3zNZ-gONdcpd1t-tz9jtevvpVzv3lLObWT8HuWQUtALBgMdW7-koNa4JzxGsPoj1HAHn6lYVnSaeWA5XoW8f-uxGMIPprsE286SXyl8yni0FsE0g/s1600/rsssocial.png" /></a> <h4> <a href="URL FEED" target="_blank">Posts RSS</a></h4> Lee todos los artículos en tu lector de Feeds</li> <li> <a href="URL FACEBOOK" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihu8nLvf-vlkoeA0hS8N2Qs-Y3KKR5tzKNTB6ydItGAqCRwaAUSQ1C0Qwm5XqnuC1KBCkx2dKAbpCgmZt2wWlqC3Qy1hcjwtZbheAOb2mcuP81ygUuT7VLi0I2UiHXHXadgrbS8FlAL0ka/s1600/facebooksocial.png" /></a> <h4> <a href="URL FACEBOOK" target="_blank">Facebook</a></h4> Hazte Garrapatero Empresario!</li> <li> <a href="http://feedburner.google.com/fb/a/mailverify?uri=ID FEEDBURNER&loc=es_ES" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBWh7w0NLzU2LxUwISuGAJJWBVBM5yohMA_J_g6RUjRfIoxNdjkrBKy2W5EvW-Sph-u7GguZ6UYUHKBnXpoJgXogr6i7vFUI04B_qHmD4REkoq3BQRJpJL-KSmC4ksAZe-6Ese86U0ld_B/s1600/correosocial.png" /></a> <h4> <a href="http://feedburner.google.com/fb/a/mailverify?uri=ID FEEDBURNER&loc=es_ES" target="_blank">Correo</a></h4> Recibe todas las actualizaciones, noticias, etc.</li> </ul> </div> <style> .sidebar-subscription { background: url("http://lh6.ggpht.com/_7Y9pl24WpQY/S_f7UbjdNxI/AAAAAAAAD7k/MRxXLntEnfo/post_head_thumb%5B4%5D.gif") no-repeat scroll 0 0 #FFFFFF; border: 1px outset #FFFFFF; color: #000000; padding: 15px; width: 100%; } #subscription { list-style: none outside none; margin-left: 10px; margin-top: 0; width: 100%; } #subscription li { height: 58px; line-height: 1.0em; padding: 5px 5px; padding-bottom: 0px; } #subscription li a { color: #000000; } #subscription li a:hover { color: #A8000C; text-decoration: none; } #subscription li h4 { border: medium none; color: #333333; font-size: 18px; margin: 0 0 0 45px; } #subscription li p { font-size: 13px; margin: 0 0 0 0px; } #subscription li img { float: left; margin: 0 10px 0 0; padding: 0; } #subscription li:hover { opacity: 0.7; } </style>

Ahora solo antes de guardar debes poner tus links correspondientes a cada red social (letras rojas), lo que esta en color azul es la descripción de cada red social... si decides cambiar el texto trata de ser breve en tus comentarios para no perder estética del gadget.

GUARDAMOS Y LISTO!!

Quizás te interese estas otras opciones:

Leer Completo

lunes, 5 de agosto de 2013

3:38:00 p.m.
4 Comentarios

Redes sociales para blogger ( estilo de windows 8 ).

BLOGGER, gadget, tutoriales

Hoy les traigo un nuevo gadget para que puedan mostrar redes sociales en su blog de blogger, en esta ocasion es un estilo parecido al metro de windows 8 y cuenta con las redes sociales de Facebook, Twitter, Google+, y Fedd Rss.

El estilo es igual al de la imagen pero tambien puedes ver un ejemplo y verlo funcionar en este blog de prueba:

Para agrega este gadget solo debes ir a Diseño > agregamos un nuevo gadget de tipo HTML/JAVASCRIPT y pegamos el siguiente codigo:

Ahora solo basta con modificar las partes en color ROJO por cada uno de los links de nuestras redes sociales y listo! guardamos nuestro trabajo.

Si tienes alguna duda no dudes en dejarme un comentario. También puedes visitar los siguientes enlaces que también contienen gadgets de redes sociales...

ICONOS DE REDES FLOTANTES

ESTILO PROFESIONAL DE REDES SOCIALES

MUESTRA TUS TUITS EN FORMA DE MARQUESINA

Leer Completo

viernes, 2 de agosto de 2013

8:50:00 p.m.
0 Comentarios

Iconos flotantes de tus redes sociales para blogger

BLOGGER, gadget, tutoriales

Hoy te voy a mostrar la forma de agregar unos simpáticos iconos de redes sociales flotantes en Blogger como los que puedes observar a tu izquierda. Con ellos les permitirá a tus lectores del blog que se conecten o suscriban a tu blog a través de los diferentes medios sociales. Se encuentran flotando a la derecha o la izquierda de su blog.

En este tutorial, los sitios sociales que he incluido son Facebook, Twitter, Google+ y RSS. Así que veamos como instalarlos.

Antes que nada les dejo una vista previa de como se miran los iconos.

Para añadir estos iconos a tu blog debes ir a tu pagina de Diseño y añadimos un nuevo Gadget de tipo HTML/JavaScript ahy copeas y pegas este codigo:

Antes de guardar debes introducir tus respectivos links marcados en color rojo para cada red social.

NOTA: Si quieres cambiar de lado debes cambiar el right:5px por left:5px.
La altura la aplicamos cambiando el top:40%;.

Leer Completo

miércoles, 31 de julio de 2013

6:16:00 p.m.
0 Comentarios

Formulario de contacto para blogger (widget)

BLOGGER, gadget, tutoriales

Hoy les voy a mostrar una buena opción para poner una caja de contacto en su blog de blogger con un simple gadget. Es muy útil ya que nos permite poner en nuestro blog ese espacio para nuestros lectores y puedan ponerse en contacto con nosotros sin tanto rodeo.

Así que vamos a instalar nuestro gidget para debemos iniciar sesión en Blogger (si no has iniciado) y después nos iremos al apartado de Diseño. La apariencia del formulario seria igual a esta:

Ahora agregaremos un nuevo gidget > Mas gadgets > Formulario de contacto

Y agregaremos el titulo de nuestro de gadget y guardamos.

Y listo! tendremos agregado nuestro formulario, pero lo podemos modificar aun mas si la combinación de colores no te gusta para hacer eso iremos al apartado Plantilla

Y damos clic en Editar Html... Ahora se te abrirá el editor HTML de tu plantilla, en este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor, debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor.

Buscamos la parte del codigo :

]]></b:skin>

Inserta las siguientes líneas de código arriba del código que encontrastes...

/* Formulario de contacto stard by tutoriales2010.blogspot.com Container */
.contact-form-widget {
width: 500px;
max-width: 100%;
margin: 0 auto;
padding: 10px;
background: #F8F8F8;
color: #000;
border: 1px solid #C1C1C1;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
border-radius: 10px; }

/* Archivos y envios de butones */
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
}

/* Estilo de botones */
.contact-form-button-submit {
border-color: #C1C1C1;
background: #E3E3E3;
color: #585858;
width: 20%;
max-width: 20%;
margin-bottom: 10px;
}

/* Envio de boton mouseover */
.contact-form-button-submit:hover {
background: #4C8EF9;
color: #ffffff;
border: 1px solid #FAFAFA;
}

Ahora solo queda guardar y listo! tendremos nuestro formulario de contacto modificada.

Cuando las personas quieran contactarse contigo, solo pondrán un nombre, la dirección de su correo electrónico y un mensaje personal de ellos y automáticamente te llegara a tu dirección de correo electrónico el mensaje enviado por tu lector.

Cualquier duda no dudes en comentar...

Leer Completo

sábado, 20 de julio de 2013

7:57:00 a.m.
0 Comentarios

Como crear un widget para que agreguen un enlace a tu blog

BLOGGER, gadget, tutoriales

Hoy te mostraremos como crear un widget para que tus visitantes sólo tengan que pulsar un botón para agregar un enlace de tu blog en el suyo.

Entra a la pestaña “Plantilla” o también llamada “Diseño” desde el escritorio.

Da click en “Añadir gatget” en la sección donde deseas tener el botón y selecciona “HTML/Javascript” como tipo de elemento.

Coloca en el título “Agreganos” o el mensaje que desees este sobre el botón o bien, deja en blanco (el botón ya traerá texto).

En el campo de “Contenido” pega el siguiente código:

</textarea>

</form>

Donde tendras que hacer las siguientes sustituciones:

http://TUBLOG.blogspot.com – Por la dirección de tu blog.
TU BLOG – Por el nombre de tu blog o el código de una imagen. Esto será lo que aparezca en el blog de quien te agregue.
Agrega a NOMBRETUBLOG a tu Blogroll – Por el mensaje que quieras aparezca en el botón.

Este código funciona también para otros sistemas de blog y cualquier web, pero sólo podran agregarte los usuarios de Blogger.

Guarda y listo.

Leer Completo

miércoles, 17 de julio de 2013

7:56:00 p.m.
0 Comentarios

Widget profesional con redes sociales para Blogger

BLOGGER, gadget, tutoriales

En este tutorial veremos como implementar un excelente y bello widget con redes sociales como Facebook, Twitter, Google+ y linkedin para nuestro blog de Blogger.

Ademas de tener un aspecto bonito es muy útil para promover nuestro sitio web en las redes sociales ya que al implementarlo le daremos un empujón a nuestros usuarios para que nos sigan en las diversas redes sociales.Ya que como lo he dicho anteriormente cada vez son mas importante las redes sociales y son mejor vistas por los motores de búsqueda, por lo que al tener un mayor impacto social tendrás un mejor SEO social.

Como añadir este widget a Blogger

Para instalarlo de manera correcta hay que seguir los siguientes pasos (Es muy sencillo):

Vamos a nuestra cuenta de Blogger e iniciamos sesión (Si no estamos logeados)

Luego seleccionamos nuestro blog y nos dirigimos a: Diseño >> Añadir Widget >> HTML y Javascript

A continuación en el widget que acabamos de crear pegamos el siguiente código:

<div class="btnt-chronicl-social"><ul><li><a class="rss" href="http://feeds.feedburner.com/TuUsuario">Suscribete a nuestro Feed</a></li> <li><a class="twitter" href="https://twitter.com/UsuarioTwitter">Siguenos en Twitter</a></li> <li><a class="facebook" href="https://www.facebook.com/TuPagina">Encuentranos en Facebook</a></li> <li><a class="google" href="https://plus.google.com/100090854666031755159" rel="author">Síguenos en Google+</a></li> <li><a class="linkedin" href="http://in.linkedin.com/UsuarioLinkedin">Conectate con nosotros en LinkedIn</a></li> <li><a class="youtube" href="http://www.youtube.com/user/Usuario">Miranos en Youtube</a></li> </ul></div><style type="text/css">.btnt-chronicl-social { width: 100%; } .btnt-chronicl-social ul { border: 1px solid #CCCCCC; margin: 0; padding: 0; } .btnt-chronicl-social ul li { list-style:none; padding: 0; text-transform: none; border-bottom: 1px solid #CCCCCC; border-top: 1px solid #FFFFFF; } .btnt-chronicl-social ul li:first-child { border-top: 0 none; } .btnt-chronicl-social ul li:last-child { border-bottom: 0 none; } .btnt-chronicl-social ul li a { background-color: #F2F2F2 !important; color: #404040; display:block; } .btnt-chronicl-social ul li a:hover { background-color: #fafafa !important; } .btnt-chronicl-social ul li .rss { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/RSS-1.png") no-repeat scroll 10px center #F87E12; padding: 17.5px 60px; } .btnt-chronicl-social ul li .twitter { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Twitter.png") no-repeat scroll 10px center #4CACEE; padding: 17.5px 60px;} .btnt-chronicl-social ul li .facebook { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Facebook-1.png") no-repeat scroll 10px center #3B5998; padding: 17.5px 60px; } .btnt-chronicl-social ul li .google { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/google.png") no-repeat scroll 10px center #D44937; padding: 17.5px 60px; } .btnt-chronicl-social ul li .linkedin { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/LinkedIn-1.png") no-repeat scroll 10px center #3692C3; padding: 17.5px 60px; } .btnt-chronicl-social ul li .youtube { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Youtube-1.png") no-repeat scroll 10px center #C6312B; padding: 17.5px 60px; } .social-about { display: none; }</style>

Una vez pegado el código anterior, debemos personalizarlo, es decir cambiar las urls por las de tus redes sociales que están en color rojo, las partes en color azul también las podemos modificar por el texto que deseemos mostrar ya en la vista de nuestro widget. ya que si quieres un poco mas personalizado tu widget podrías cambiar el link de la imagen de cada red social cambiado las partes de color morado.

Recomendaciones a la hora de cambiar el icono

Que la imagen sea en formato .PNG.
La dimension de la imagen debe ser de 40x40.
Subirlas a un hosting.

Leer Completo

10:03:00 a.m.
0 Comentarios

Cómo poner un reproductor de música en tu blog de Blogger

BLOGGER, gadget, tutoriales

Incluir un reproductor de audio en un blog hoy en día es realmente sencillo gracias a la etiqueta HTML5 <audio>.

La etiqueta <audio>, que define el sonido (música o streams de audio) es nueva en HTML5 y es soportada por los siguientes navegadores: Internet Explorer 9, Firefox, Opera, Chrome, y Safari. El reproductor de música que permite incluir se verá así:

¿Quieres un reproductor de música en tu blog de Blogger?

El uso básico de dicha etiqueta audio es el siguiente:

<audio controls controls> 
<source src="URL_CANCION" /> 
Tu navegador no soporta la etiqueta audio. 
</audio>

Por lo tanto, deberás copiar ese código en la edición de HTML de la entrada donde quieras reproducir música o audio. Lo único que tienes que hacer es reemplazar en el código es URL_CANCION, que corresponde al enlace directo de tu archivo de audio.

Evidentemente, también necesitarás un hosting para almacenar tus archivos de audio, anteriomente hablamos de dropbox.

Usando Dropbox para almacenar tu música

Dropbox es uno de los servicios de alojamiento más populares que te permite guardar todo tipo de archivos en la nube para acceder a ellos desde cualquier lugar. Puedes crear una cuenta gratuita con 2GB de almacenamiento, pudiendo enlazar directamente tus archivos almacenados ahí.

Una vez que has creado una cuenta en Dropbox y has ingresado a ella, deberás subir el archivo de audio que quieras poner en tu blog (mp3) en la carpeta “Public“. Recientemente DropBox no añade por de full esta carpeta, asi que si quieres activarla en tu cuenta has clic AQUI. Cuando se haya cargado, tienes que hacer clic sobre él con el botón derecho del mouse, seleccionando la opción “Copiar enlace público“.

Así obtendremos el enlace directo que necesitamos reemplazar en el código de más arriba.

Atributos de la etiqueta audio

El control “controls” hará que el audio se reproduzca sólo cuando el usuario haga click en el botón “play” del reproductor. Sin embargo, en W3SChools podemos ver otras opciones:

Autoplay: Reproduce automáticamente el audio una vez que está listo.

<audio controls autoplay> 
<source src="cancion.mp3" /> 
Tu navegador no soporta la etiqueta audio. 
</audio>

Loop: Reproduce el audio continuamente.

<audio controls loop> 
<source src="cancion.mp3" /> 
Tu navegador no soporta la etiqueta audio. 
</audio>

Leer Completo

domingo, 28 de abril de 2013

8:11:00 p.m.
8 Comentarios

Agregar la caja de comentarios de facebook en blogger.

BLOGGER, gadget, tutoriales

Ahora aprenderemos a agregar el Plugin de comentarios de Facebook de manera que cada entrada tenga su propia caja de comentarios y sea independiente a las demás.

Antes de empezar asegúrate de tener los comentarios debajo de las entradas, pues el plugin lo pondremos en esa área así que es necesario tener los comentarios incrustados debajo de los posts.

Ahora sí, como primer paso entra en la Edición HTML del blog y marca la casilla Expandir plantillas de artilugios, luego busca la etiqueta:

<body>

Si usas una plantilla del Diseñador entonces la encontrarás como:

Debajo de cualquiera de ellas agrega esto:

var js, fjs = d.getElementsByTagName(s)[0];

if (d.getElementById(id)) return;

js = d.createElement(s); js.id = id;

js.src = "//connect.facebook.net/es_LA/all.js#xfbml=1";

fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));</script>

Después busca esta parte:

</b:includable>

<b:includable id='status-message'>

Y justo arriba de ella pega esto:

<b:if cond='data:blog.url != data:blog.homepageUrl'>

</b:if>

Con eso ya tendrás la caja de comentarios de Facebook en tus entradas (recuerda que debes ingresar a un post para poder verla).

La caja estará arriba de los comentarios de Blogger. Si quieres que esté debajo del formulario de comentarios entonces el código del plugin ponlo justo arriba de este código:

</div>

<b:if cond='data:post.includeAd'>

Dentro del código que añadimos veremos estos parámetros:

data-num-posts='5'

data-width='500'

data-colorscheme='light'

El primero es el número de comentarios que se mostrarán; el segundo el ancho del formulario; y el tercero el color del formulario, puedes cambiar light por dark.

Hasta ahí ya tenemos el CommentBox de Facebook; si deseas personalizarlo un poco puedes colocar antes de ]]></b:skin> algunos estilos, por ejemplo:

#comentariosFacebook {

background:#F2F2F2; /* Color de fondo del contenedor */

width:520px; /* Ancho del contenedor */

padding:10px;

margin-top:0px; /* Cámbialo por -180px si lo has puesto debajo de los comentarios de Blogger */

}

Si quieres que cada vez que alguien haga un comentario te llegue una notificación de Facebook, y puedas moderar los comentarios, será necesario que crees una aplicación. Pero para ello es necesario tener verificada la cuenta de Facebook.

Si es así, entra a Facebook Developers y haz clic en el botón Crear nueva aplicación.

Ahí escribe el nombre de la aplicación, acepta los términos y clic en Continuar.

En la siguiente pantalla haz click en Sitio web, ahí escribe la URL de tu blog donde lo pondrás; también copia el número que está en App ID.

Ahora entra de nuevo en la Edición HTML de tu blog y pega antes de </head> esto:

En la ID de aplicación agrega la serie de números que copiaste. Y en ID de usuario agrega tu ID de Facebook, sino lo conoces ingresa a este enlace:

http://graph.facebook.com/usuario

Cambia donde se indica tu nombre de usuario y da click, ahí verás cuál es la ID de tu usuario de Facebook.

Una vez hecho eso ingresa a una entrada para ver tu caja de comentarios y dale clic en Configuración. Ahí verás varias opciones del plugin; en donde dice Moderadores, agrega tu nombre y guarda los cambios.

Una vez habiendo hecho todo lo anterior podrás moderar los comentarios y recibirás las notificaciones en tu cuenta de Facebook cada vez que alguien haga un comentario. Sino lo haces podrás seguir teniendo tu caja de comentarios de Facebook pero sin estas opciones.

Leer Completo

domingo, 10 de marzo de 2013

12:12:00 a.m.
0 Comentarios

twitcker para mostrar los tuits en forma de marquesina.

BLOGGER, gadget, RECOMENDADO, twitter

Twitcker es un servicio gratuito que nos permite mostrar en el blog los últimos tuits en forma de marquesina, como si de un anuncio de noticias se tratara. Lo que hace es mostrar en una barra todos los últimos tuits que hemos publicado, pudiendo configurar la velocidad con la que pasan, la forma como se muestran, los colores, enlaces, etc.

Para conseguir este gadget de últimos tuits entra a Twitcker y da click en el botón Sign in with Twitter.

Autoriza a la aplicación para que se cree un script único para ti. Una vez que lo hagas verás el nombre de tu usuario, y debajo un link para configurar las opciones de la barra de tuits.

Ahí verás una serie de opciones para tu barra de tuits, como por ejemplo controlar la velocidad con la que pasan los tuits, el color de la barra, si se muestran como marquesina o máquina de escribir, etc.

Una vez que termines de personalizarla da click en Create y tendrás el código, cópialo y luego entra en Diseño | Añadir un gadget | HTML/Javascript y ahí pega el código que has copiado.

La posición puedes elegirla para que se muestre arriba de la página, al final, o en un lugar concreto; si deseas esta última opción (por ejemplo para ponerlo en la sidebar) elige Own container dentro deTwitcker position. Ahí escribe TwitterTicker. Después en un gadget HTML/Javascript agrega esto: (lee el primer comentario para ver el codigo)

<div id="TwitterTicker">
...Aquí el script...
</div>

Ahí deberás colocar donde se indica el script que te da Twitcker. De esta forma podrás mostrar tu barra de tuits en cualquier parte del blog.

Como puedes ver es un gadget bastante simpático que puede ayudarnos a conseguir más seguidores ya que nuestros lectores podrán leer en el blog un poco de lo que tuiteamos. Además que, el gadget está lindo ¿no creen?

Leer Completo

Desarrollo Web - Responsive Design

Easy to Customize

Customizable fonts.

jueves, 14 de noviembre de 2013

viernes, 20 de septiembre de 2013

Comments Box - Facebook Developers, ¿Que es?

jueves, 12 de septiembre de 2013

jueves, 5 de septiembre de 2013

domingo, 25 de agosto de 2013

viernes, 9 de agosto de 2013

Quizás te interese estas otras opciones:

lunes, 5 de agosto de 2013

viernes, 2 de agosto de 2013

miércoles, 31 de julio de 2013

]]></b:skin>

sábado, 20 de julio de 2013

En el campo de “Contenido” pega el siguiente código:

miércoles, 17 de julio de 2013

Recomendaciones a la hora de cambiar el icono

¿Quieres un reproductor de música en tu blog de Blogger?

Usando Dropbox para almacenar tu música

Atributos de la etiqueta audio

domingo, 28 de abril de 2013

domingo, 10 de marzo de 2013

Publicidad

Etiquetas