Tutoriales2010 - El que busca encuentra.: BLOGGER

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

lunes, 3 de febrero de 2014

2:18:00 p.m.
0 Comentarios

Bloquea el clic derecho en tu blogger.

No quieres que copien el contenido de tu blog?, ya sea lo que escribes o tus imágenes, deseas ponerle algunas piedritas en el camino a aquel que quiere copiarte? Bueno, si tu respuesta es sí, lo mejor que puedes hacer es des-habilitar el clic derecho del mouse en tus páginas.

Hacer esto es muy sencillo, sólo se trata de agregar un código JavaScrip en tu blog y listo, el código es el siguiente:

<script language="JavaScript">
var message="Function Disabled!";
function clickIE4(){
if (event.button==2){
alert(message);
return false;
}
}
function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
return false;
}
}
}
if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}
document.oncontextmenu=new Function("alert(message);return false")
</script>
<a href="http://tutoriales2010.blogspot.com" target="_blank"><img 
src="http://sites.google.com/site/pczeros/Home/1t.gif" border=0 alt="trucos blogger" title="trucos blogger"/></a>

Para agregar el codigo solo debes ir a:

Diseño
Añadir un gadget
Html/Javascript

y guardas el nuevo gadget.

Si lo que quieres es bloquear el boton derecho solo en algunas entradas deberas pegar el codigo al final de la entrada, ademas puedes poner el mensaje que quieres que salga al intentar copiar el contenido de tu blog. Busca en el codigo la parte que dice "Function Disabled" y eso lo puedes cambiar por algun mensaje a tu gusto. (recuerda no quitar las comillas.)

Bien, ahora solo hemos bloqueado el mouse, ahora falta bloquear el teclado aumentar la seguridad por asi decirlo y no hacer tan facil el copiado de nuestras publicaciones.

Nos vamos a Diseño > Edicion Html > buscan el inicio de la etiqueta <Body> y la reemplazan por el siguiente codigo:

<body oncontextmenu="return false" onkeydown="return false">

¡Listo! Ahora también hemos bloqueado el teclado y no podran copiar el contenido utilizando ctrl+C.

Leer Completo

1:35:00 p.m.
0 Comentarios

Numerar comentarios en tus entradas. (blogger)

BLOGGER, diseño blogger, tutoriales

numeracion de comentarios, blogger, tutoriales blogger, css

Hoy les voy a compartir un truco muy simple realizado con CSS, que servirá para numerar los comentarios y las respuestas. En la foto de arriba puedes ver que los comentarios se numeran con un número decimal, mientras que las respuestas se numeran con una letra. El diseño de la numeración es totalmente configurable, como explico más abajo.

Para aplicar este truco seguiremos los siguientes pasos:

Ir a Escritorio Blogger.
En el menú seleccionamos Plantilla.
Hacemos clic en Editar HTML.
En el código buscamos lo siguiente:

]] ></b:skin>

Encima de ello tenemos que pegar el siguiente código

 .comment-thread ol {
counter-reset: contarcomentarios;
}

/* Comentarios */ 
.comment-thread li:before {
content: counter(contarcomentarios,decimal);
counter-increment: contarcomentarios;
float: right;
z-index: 2;
position:relative;
font-size: 18px;
color: #2b2e31;
background:#f5f5f5;
border:3px solid #2b2e31;
padding:6px;
margin-top:10px; 
margin-right:15px;
}

.comment-thread ol ol {
counter-reset: contarbis;
}

/* Respuestas */ 
.comment-thread li li:before {
content: counter(contarcomentarios,decimal) "." counter(contarbis,lower-latin);
counter-increment: contarbis;
float: right;
font-size: 18px;
color: #2b2e31;
background:#f5f5f5;
border:3px solid #2b2e31;
padding:6px;
margin-top:0px; 
margin-right:0px;
}

Modificaciones en el Código

En el código anterior podemos modificar los colores y tamaño de fuente, entre otras cosas.

Color de fondo: Para ello tendremos que modificar las etiquetas background y poner un color en forma hexadecimal (Ejemplo: #000000;).

Color de fuente: Para modificarlo configuramos la etiqueta color.

Color de borde: Para ello modificamos en la etiqueta border, el código hexadecimal.

Tamaño de fuente: Modificamos la etiqueta font-size.

Leer Completo

viernes, 17 de enero de 2014

11:46:00 p.m.
0 Comentarios

Personaliza la barra de desplazamiento de tu blog. (Scroollbar)

BLOGGER, diseño blogger, tutoriales

En este tutorial vamos a modificar la barra de desplazamiento para personalizarla a nuestro gusto. La barra de desplazamiento, o scrollbar, es la que aparece a la derecha, o en la parte inferior de una página web y nos permite desplazarnos arriba y abajo, derecha e izquierda, para poder ver todo el contenido.

Una barra de desplazamiento personalizada le da a nuestro blog o página web un aspecto diferente, más moderno, y permite configurarla con el color que queramos, para que sea más integrada con los colores de nuestro blog.

Cabe mencionar que estos cambios solo serán visibles en los navegadores de Chrome, Safari y Opera.

Este tutorial es muy sencillo, los pasos a seguir son los siguientes:

Ir a Escritorio Blogger.
En el menú seleccionamos Plantilla.
Hacemos clic en Editar HTML.
En el código buscamos lo siguiente:

]] ></b:skin>

Encima de ello tenemos que pegar el siguiente código:

/* --- Scrollbar personalizada tutoriales2010.blogspot.mx --- */ ::-webkit-scrollbar { background:#fff; width:12px; } ::-webkit-scrollbar-thumb { -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3); background-image: -webkit-linear-gradient(top, #1dc2de 10%,#1dc2de 51%); } ::-webkit-scrollbar-track { }

Ahora cambiaremos unos valores a nuestro gusto:
El color azul es el fondo de nuestra barra, el rojo es el ancho de nuestra barra y el morado es el color de nuestro scroollbar.

Leer Completo

10:58:00 p.m.
3 Comentarios

Slider sencillo para tu blogger. (Con JavaScript)

BLOGGER, diseño blogger

Hoy les voy a compartir un slider de imágenes que funciona con JavaScript, el cual tiene unos efectos de transición geniales e incluye una banda lateral con el texto "Populares".Ademas cabe mencionar que este slider es muy facil de agregar a nuestra plantilla ya que vasta con agregar un nuevo gadget de tipo Html/JavaScript, así podemos mostrar a nuestros lectores las entradas mas populares de nuestro blog.

Si quieres ver como funciona este slider da clic AQUI.

Empezamos a instalar nuestro slider:

En el Escritorio Blogger hacemos clic en Diseño.
Hacemos clic en Añadir un Gadget donde queramos poner los anuncios.
En la lista seleccionamos HTML / JavaScript.

Ahora solo copiamos y pegamos este codigo:

Ahora solo nos falta modificar algunas cosas:

COLOR AZUL: Esas son las URL de las imagenes que vamos a poner en nuestro slider ( se recomienda usar la medida de 500px x 250px.
COLOR ROJO: Es el link al que se va dirigir la imagen al momento de dar clic sobre la misma.
COLOR AMARILLO: Es el texto que aparece en la descripción de cada una de las imágenes.

Leer Completo

10:30:00 p.m.
2 Comentarios

Boton "Ir Arriba" para tu blogger

BLOGGER, diseño blogger, tutoriales

La función del siguiente botón es volver al inicio de la página de manera rápida para facilitar la experiencia al usuario, en lugar de tener que mover la barra de desplazamiento (Scrollbar) o jugar con la rueda del ratón, sobre todo cuando la página es extensa o la entrada tiene muchos comentarios.

El siguiente botón tiene la característica de que no incluye ningún script, lo que lo hace muy simple y la velocidad de carga del blog no aumentará al incluir este botón.

Instalar el botón en tu blog:

Para instalar el botón de "Ir Arriba" en tu blog sigue los siguientes pasos:

Ir a Escritorio de tu Blogger.
En el menú seleccionamos Plantilla.
Hacemos clic en Editar HTML.
En el código buscamos lo siguiente:

<body>

Encima de ello tenemos que pegar el siguiente código:

Ahora podemos realizar unos pequeños cambios antes de guardar los cambios en nuestra plantilla, observa que tenemos el atributo "title" ahí puedes poner el texto que quieres que aparezca al momento de posicionar el cursor encima del botón y la segunda parte de color rojo es el link de la imagen ... la cual puedes cambiar a una mas de tu gusto.

Leer Completo

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

miércoles, 28 de agosto de 2013

11:00:00 p.m.
0 Comentarios

Menú horizontal para blogger (color azul con gradientes en css)

BLOGGER, menu blogger, tutoriales

Este menú es compatible con Google Chrome, Firefox 3,6+, Safari 2+ e Internet Explorer. En IE, el hover no sera visible puesto que este no soporta gradientes en CSS3.

Para agregar este menú a nuestro blog, realizaremos el siguiente procedimiento:

Agregar estilos del Menú Horizontal

Agregaremos los estilos de este menú, directamente en la plantilla del blog. Para esto ve a Plantilla - Editar HTML, das clic dentro de la plantilla, presionas Ctrl + F y buscas:

]]></b:skin>

Y justo antes pega el siguiente código:

/*tutoriales2010.blogspot.mx*/

div.bottombar{ /* La barra inferior */

height: 10px;

background: #1a1109; /* Color de la barra inferior */

}

ul.semiopaquemenu{ /* Menu principal UL */

font: bold 14px Georgia ;

width: 100%;

background: #2AA7FA; /* Color de fondo del Menu principal */

padding: 11px 0 8px 0; /* Relleno de los 4 lados del menú*/

margin: 0;

text-align: left; /* Escribe "left", "center", o "right" para alinear el menú*/

}

ul.semiopaquemenu li{

display: inline;

}

ul.semiopaquemenu li a{

color:black;

padding: 6px 8px 6px 8px; /* Relleno de los 4 lados de cada enlace del menú */

margin-right: 15px; /* Separación entre cada enlace del menú */

text-decoration: none;

}

ul.semiopaquemenu li a:hover, ul.semiopaquemenu li a.selected{

color: black;

background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjgyIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4xNiIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);

background: -moz-linear-gradient(top, rgba(255,255,255,0.82) 0%, rgba(255,255,255,0.16) 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.82)), color-stop(100%,rgba(255,255,255,0.16)));

background: -webkit-linear-gradient(top, rgba(255,255,255,0.82) 0%,rgba(255,255,255,0.16) 100%);

background: -o-linear-gradient(top, rgba(255,255,255,0.82) 0%,rgba(255,255,255,0.16) 100%);

background: -ms-linear-gradient(top, rgba(255,255,255,0.82) 0%,rgba(255,255,255,0.16) 100%);

background: linear-gradient(top, rgba(255,255,255,0.82) 0%,rgba(255,255,255,0.16) 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d1ffffff', endColorstr='#29ffffff',GradientType=0 );

-moz-box-shadow: 0 0 5px #595959; /* Sombras en CSS3 */

-webkit-box-shadow: 0 0 5px #595959;

box-shadow: 0 0 5px #595959;

padding-top: 12px; /* relleno sobresaliente hacia arriba */

padding-bottom: 20px; /* relleno sobresaliente hacia abajo */

}

Si el menú no se visualiza correctamente puedes ajustarlo cambiando los valores que el resaltado indica.

INSERTAR EL MENÚ.

Despues de haber guardado los estilos, alli mismo busca </header> (en plantillas del diseñador) o <div id='header-wrapper'> (en plantillas personalizadas) y pega el siguiente código justo después.

Recuerda que en las plantillas personalizadas, después que encuentres <div id='header-wrapper'>, busca hacia abajo el cierre </div> y después pega el código. No olvides que hay un cierre </div> por cada <div> que se abre, así que debes buscar exactamente el que cierra la apertura <div id='header-wrapper'>. (no necesariamente sera el primer cierre que encuentres... puede ser el segundo o tercero; según tu plantilla)

Este es el código:

<ul class='semiopaquemenu'>
<li><a class='selected' href='/'>Inicio</a></li>
<li><a href='#'>Item 1</a></li>
<li><a href='#'>Item 2</a></li>
<li><a href='#'>Item 3</a></li>
<li><a href='#'>Item 4</a></li>
<li><a href='#'>Item 5</a></li>
<li><a href='#'>Item 6</a></li>
<li><a href='#'>Item 7</a></li>
<li><a href='#'>Item 8</a></li>
</ul> <div class='bottombar'>
</div>

Ahora reemplaza cada Item por el nombre de tu categoría, y cambia el # por el enlace de cada una de ellas.

Para agregar mas categorias o eliminar alguna, quita o agregar alguna linea como esta:

<li><a href='/'>Item 8</a></li>

Con esto tendrás un menú horizontal en CSS3 para facilitar la navegación en tu blog.

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

sábado, 24 de agosto de 2013

1:04:00 p.m.
0 Comentarios

SEO: Atributos ALT y TITLE en las imágenes

BLOGGER, SEO, tutoriales

Blogger seo, atributos alt, atributos title

Los atributos 'alt' y 'title' son los que describen una imagen y su contenido. El atributo 'alt' se utiliza para describirle el contenido a los motores de búsqueda, y el atributo 'title' describe el contenido a los usuarios.

Para optimizar nuestros atributos aquí en blogger existen dos métodos :

METODO 1

El código base de una imagen debe ser este:

<img src="imagen.jpg" alt="descripcion" title="descripcion" />

En Internet Explorer el atributo 'alt' genera una descripción (tool tip) al pasar el puntero de mouse sobre una imagen, mientras que en Firefox y Google Chrome, esta descripción visible es generada por el atributo 'title'.

Al describir lo que sucede en una imagen le estas ayudando a los motores de búsqueda a encontrar dicha imagen mas rapidamente y esto generara un aumento de trafico hacia tu sitio web.

No debes exceder en el uso de palabras clave en los atributos 'title y 'alt' ya que Google penalizará eso, puesto que no estas describiendo lo que en realidad esta sucediendo en la imagen.

Para agregar estos atributos a las imagenes, Blogger ha implementado un herramientas desde el editor de entradas.

Simplemente, después de agregar un imagen y estando en el editor de entradas sigue estos pasos:

Das un clic sobre la imagen.
Te diriges a Propiedades.
Allí agregas el texto del titulo y el texto del alt.

METODO 2

Sin embargo, para reducir el trabajo y realizar este proceso automáticamente, te dejare un script que tomará el nombre de la imagen y lo usará para insertar los atributos title y alt. Pero recuerda que la mejor descripción es la realizada manualmente.

Este script utiliza Jquery; si ya lo tienes en tu blog entonces omite el código resaltado en azul.

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

Guardas lo cambios realizados y vas a una entrada donde exista una imagen. Pasando el mouse sobre ella observaras que se muestra una descripción de dicha imagen y efectivamente esto es lo que queremos lograr.

Con esto se optimizara el posicionamiento de tus imágenes y por lo tanto tu pagina web estará mejor ubicada en los resultados de búsqueda. Si tienes alguna duda escríbeme en comentarios.

Leer Completo

domingo, 18 de agosto de 2013

4:26:00 p.m.
0 Comentarios

Agrega "Meta tags" para una indexacion correcta en los motores de búsqueda.

BLOGGER, SEO, tutoriales

Las meta tags son etiquetas que proporcionan información del blog a los robots de búsqueda como Google, yahoo, big y otros buscadores. Estas etiquetas resultan importantes por que ayuda a los robots a indexar nuestro blog, existen muchas etiquetas por ahora solo veremos 3 ( las mas importantes) que son meta description, meta keywords y meta robots.

Meta Description: Es la que describe nuestro blog de que se trata o que ofrece. Se recomienda ser breve en la descripción y lo mas claro posible.

Meta Keywords: En esta etiqueta pondremos las frases o palabras claves lo que normalmente el usuario introduce en su navegador, por ejemplo para un blog de música: el usuario pone en google... "Música de banda el recodo" o "descargar música gratis" esas frases son las que podemos utilizar en esta etiqueta.
NOTA: se recomienda no usar mas de tres palabras por frase, agregar las frases mas importantes al inicio, las frases se separan por una coma (,)

Meta Robots: Esta etiqueta se encarga de permitir o denegar a los robots de los buscadores el acceso a nuestro blog.

¿COMO AGREGAR LAS ETIQUETAS?

Iremos a nuestra sección de Plantilla y Editar HTML y buscamos la apertura de nuestra etiqueta de cabecera...

<head>

Justo debajo de la etiqueta pegamos este codigo:

<b:include data='blog' name='all-head-content'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='Descripcion del blog' name='description'/>
<meta content='palabras claves' name='keywords'/>
<meta content='all, index, follow' name='robots'/>
</b:if>

Y antes de guardar agregamos nuestra descripción, palabras claves. y listo podemos guardar cambios.

Si quieres agregar mas etiquetas existen paginas que crean el código necesario para crearlas aquí te dejó algunas para que las visites y así agregues mas etiquetas el modo de implementación es el mismo.

Si tienes dudas déjame un comentario. Mas adelantes estaremos viendo mas etiquetas.

Leer Completo

viernes, 16 de agosto de 2013

12:46:00 a.m.
0 Comentarios

Paginación para tu blog de blogger

BLOGGER, diseño blogger, tutoriales

Hoy les traigo un nuevo tutorial para mejorar el diseño de su blog de blogger, antes de empezar recuerden que pueden hacer sus peticiones en comentarios o la sección de contacto.

Muy bien, lo que haremos en este tutorial como en el titulo lo dice... pondremos una paginación a nuestro blog para darle un diseño mas amigable al visitante del blog ya que la que tiene por defecto la mayoría de las plantillas "ver entradas mas antiguas" es poco atractiva.

Así se vera tu paginación

Como puedes observar en la imagen de arriba así se verá tu paginación entonces vamos a empezar primero que nada ps debemos iniciar sesión en blogger y luego nos iremos a Diseño y agregamos un gadget de tipo Html/JavaScript

Copiamos y pegamos el siguiente código:

Ahora solo guardamos y listo!

Ahí tienes tu paginacion en tu blog, con un sencillo gadget. Si tienes dudas no dudes en dejarme un comentario.

Leer Completo

Bienvenidos

Desarrollo Web - Responsive Design

Easy to Customize

Customizable fonts.

lunes, 3 de febrero de 2014

Bloquea el clic derecho en tu blogger.

Numerar comentarios en tus entradas. (blogger)

Para aplicar este truco seguiremos los siguientes pasos:

Modificaciones en el Código

viernes, 17 de enero de 2014

Personaliza la barra de desplazamiento de tu blog. (Scroollbar)

Slider sencillo para tu blogger. (Con JavaScript)

Boton "Ir Arriba" para tu blogger

Instalar el botón en tu blog:

jueves, 14 de noviembre de 2013

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

viernes, 20 de septiembre de 2013

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

Comments Box - Facebook Developers, ¿Que es?

jueves, 12 de septiembre de 2013

Redes sociales (gadget) en botones.

jueves, 5 de septiembre de 2013

Como ocultar un gadget en blogger.

miércoles, 28 de agosto de 2013

Menú horizontal para blogger (color azul con gradientes en css)

domingo, 25 de agosto de 2013

Bóton que muestra una entrada al azar.

sábado, 24 de agosto de 2013

SEO: Atributos ALT y TITLE en las imágenes

domingo, 18 de agosto de 2013

Agrega "Meta tags" para una indexacion correcta en los motores de búsqueda.

¿COMO AGREGAR LAS ETIQUETAS?

viernes, 16 de agosto de 2013

Paginación para tu blog de blogger

Publicidad

Etiquetas