cibernautas

jueves, 24 de octubre de 2013

<div class='social-icons' id='social-iconos'>
<ul>
<li class='social_icon'><a href='http://facebook.com/Nombre_Usuario'><img border='0' src='http://www.characterscounter.com/img/iconos-sociales/facebook-32x32.png'/></a></li>
<li class='social_icon'><a href='https://twitter.com/Nombre_Usuario'><img border='0' src='http://www.characterscounter.com/img/iconos-sociales/twitter-32x32.png'/></a></li>
<li class='social_icon'><a href='https://plus.google.com/ID_Usuario/about'><img  border='0'  src='http://www.characterscounter.com/img/iconos-sociales/google-32x32.png'/></a></li>
<li class='social_icon'><a href='http://Nombre_de_tu_blog.com/feeds/posts/default'><img  border='0'  src='http://www.characterscounter.com/img/iconos-sociales/rss-32x32.png'/></a></li>
</ul>
</div>

Iconos de redes sociales arriba del blog que giran al pasar el cursor

Cómo añadir iconos redes sociales que giran en blogger

En este artículo voy a explicar cómo añadir iconos de redes sociales que giran en nuestro blog en dos posiciones diferentes de nuestro blog.

A continuación les muestro los pasos a seguir para añadir iconos redes sociales que giran en blogger:
Añadir los estilos a la plantilla: Debes dirigirte a la sección "Plantilla" de tu blog y pulsar el botón "Editar HTML".

Busca el siguiente texto ]]></b:skin> y justo andes de él añade el siguiente código:

/* ICONOS REDES SOCIALES DE TUTORIALES Y OPINIONES*/
#social-iconos {
width:100%;
height:50px;
margin-bottom:10px; display:block;
clear:both;
}
.social-icons{display:table}
.social-icons ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
text-align:right;
padding:5px 5px 0 0
}
.social-icons ul {
padding:0;
float:right;
margin-bottom:0;
}
.social-icons li.social_icon {
background:none !important;
padding-left:0 !important;
display:inline;
float:left;
margin-left:6px;
}
.social-icons li:hover {
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(-360deg);
}

Añadir los iconos de redes sociales en la CABECERA del Blog: Debes dirigirte a la sección "Plantilla" de tu blog y pulsar el botón "Editar HTML".

Busca SIN expandir artilugios el siguiente texto:
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'> y pega antes de él el siguiente código:

<div class='social-icons' id='social-iconos'>
<ul>
<li class='social_icon'><a href='http://facebook.com/Nombre_Usuario'><img border='0' src='http://www.characterscounter.com/img/iconos-sociales/facebook-32x32.png'/></a></li>
<li class='social_icon'><a href='https://twitter.com/Nombre_Usuario'><img border='0' src='http://www.characterscounter.com/img/iconos-sociales/twitter-32x32.png'/></a></li>
<li class='social_icon'><a href='https://plus.google.com/ID_Usuario/about'><img border='0' src='http://www.characterscounter.com/img/iconos-sociales/google-32x32.png'/></a></li>
<li class='social_icon'><a href='http://Nombre_de_tu_blog.com/feeds/posts/default'><img border='0' src='http://www.characterscounter.com/img/iconos-sociales/rss-32x32.png'/></a></li>
</ul>
</div>

IMPORTANTE: Debes cambiar el texto que aparece en rojo por tus datos.

Si quieres añadir los iconos de redes sociales COMO GADGET del Blog: Deberás dirigirte a la sección "Diseño" y pulsar la opción "Añadir un gadget".

De la lista de gadgets disponibles, deberás seleccionar el "HTML/Javascript" y pegar en su interior el código del punto anterior.

Por supuesto que puedes añadir más iconos si lo deseas, sólo deberás agrega antes de </ul></div> una línea como esta por cada icono extra que quieras:

<li class='social_icon'><a href='URL del enlace'><img border='0' src='URL de la imagen'/></a></li>

Cómo poner una imagen de fondo en Blogger

Cómo hacer que ocupe toda la pantalla la imagen de fondo de Blogger

En el artículo de hoy vamos a ver cómo hacer que la imagen de fondo de nuestro blogger ocupe toda la pantalla sin importar la resolución del monitor. Y como en todos nuestros artículos lo haremos a través de un ejemplo muy sencillo.

CÓMO MOSTRAR IMAGEN DE FONDO DE BLOGGER EN TODA LA PANTALLA

Esta solución requiere modificar el CSS de nuestra plantilla añadiendo la propiedad background-size lo que nos permitirá especificar el tamaño de la imagen de fondo.

PASOS PARA MOSTRAR IMAGEN DE FONDO DE BLOGGER EN TODA LA PANTALLAA continuación mostramos los pasos necesarios para conseguir que la imagen de fondo de nuestro blogger ocupe toda la pantalla en cualquier resolución:

Abrir la sección Plantilla de nuestro blogger
Pulsar el botón Editar HTML
Localizar el texto background situado dentro de body{
Sustituir background por el siguiente código

background: URL(URL de la imagen) no-repeat center center fixed;
background-size: cover;

Después de la modificación el body quedaría de la siguiente manera:

body {
background: url(URL de la imagen) no-repeat center center fixed;
background-size: cover;
margin:0;
color:#000;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Recuarda que en el punto 4 debes indicar la URL de tu imagen de fondo

Siguiendo estos sencillos pasos harás que la imagen de fondo de tu blogger ocupe toda la pantalla y se vea correctamente en cualquier resolución.

Como incluir un código html en un post ,blogger,

En ocasiones queremos incluir código fuente en los artículos de nuestro blogger para mostrar a nuestros lectores un ejemplo práctico con el que resolver sus dudas.

Algunos bloggers utilizan el tag blockquote para escribir el código, recordemos que blockquote marca una sección de nuestra página o artículo como si fuera una referencia de otra fuente, estéticamente aplica una sangría y poco más.

La opción que yo suelo utilizar para añadir código a mis post de blogger es la siguiente:

Edito el html de la plantilla que utilizo en mi blog.
Desde el menú principal de blogger seleccionar la opción Plantilla y a continuación pinchar sobre Edición de HTML
Esto abrirá un cuadro de diálogo donde deberemos seleccionar la opción Continuar.
En este momento veremos el código HTML de la plantilla que estemos utilizando en nuestro blog.
Ahora buscaremos el siguiente texto: ]]></b:skin>
Recordad que para buscar rápidamente podemos utilizar la combinación de teclas Ctrl + F
Justo antes del texto del punto número 5 pegaremos el siguiente código:

code {background:#EEEEEE; font-family: Trebuchet MS; display:block; border:1px solid #999999; padding:10px;}

Explicación: Con el código anterior estamos creando la code y asignándole unas determinadas características como por ejemplo:

background: Color del fondo en hexadecimal.
fonf-family: Tipo de letra
display: Especifica cómo se mostrará el html resultante.
border: ancho, tipo y color del borde que rodeará al texto.
padding: espacio entre el texto y su contenedor.

¿Cómo se utiliza?: Muy sencillo, para incluir código en un post de blogger deberás seguir los siguientes pasos:

Pulsar el botón HTML del editor.
Escribir en código que quieres mostrar en tu post entre las siguientes tags <code></code>

miércoles, 23 de octubre de 2013

Agregar dos gadget arriba o debajo de las entradas

Para agregar un gadget arriba o debajo de las entradas basta con arrastrar el gadget hasta esa posición y tendremos colocado el gadget en ese lugar. Pero qué tal si quieres agregar dos gadgets y que ambos estén en columnas, pues en ese caso habremos de añadir una sección de gadgets en esa área de modo que se creen dos columnas de gadgets arriba o debajo de las entradas.

Puedes tener sólo las columnas de arriba, o sólo las de abajo, o ambas, eso dependerá del gusto y necesidades de cada uno.

Para agregar estas columnas de gadgets entra en la Edición HTML de la plantilla, y SIN los artilugios expandidos busca esta parte:

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='false' title='Entradas del blog' type='Blog'/>
</b:section>

Si quieres las columnas de gadgets arriba de las entradas, entonces agrega arriba de lo anterior esto:

<div id='BlogGadget1' style='width: 48%; float: left; margin:0; padding: 5px;'>
<b:section class='sidebar' id='gadget-1' preferred='yes' style='float:left;'/>
</div>
<div id='BlogGadget2' style='width: 48%; float: right; margin:0; padding: 5px;'>
<b:section class='sidebar' id='gadget-2' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>

Si también quieres dos columnas de gadgets debajo de las entradas, entonces agrega debajo del primer código esto:

<div id='BlogGadget3' style='width: 48%; float: left; margin:0; padding: 5px;'>
<b:section class='sidebar' id='gadget-3' preferred='yes' style='float:left;'/>
</div>
<div id='BlogGadget4' style='width: 48%; float: right; margin:0; padding: 5px;'>
<b:section class='sidebar' id='gadget-4' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>

Los valores en color azul es el ancho de cada uno de los contenedores, si por alguna razón los gadgets de la segunda columna se bajaran entonces reduce esos valores hasta que los gadgets se acomoden en su lugar.

Así tendrás dos columnas de gadgets en esa área del blog.

lunes, 21 de octubre de 2013

Agregar la caja de comentarios de facebook en blogger

Colocar o Agregar la caja de comentarios de facebook en blogger, en este tutorial vamos a ver como insertar o añadir caja de comentarios de facebook en nuestro blog de blogger esto lo debemos de colocar debajo de las entradas del blog, porque cada dia son más los usuarios que utilizan facebook y se les hace más facil comentar en la caja de comentarios de facebook que en la caja de comentarios de blogger.

Veamos entonces como agregar la caja de comentarios de facebook en blogger sigue los pasos a continuación.

como primer paso entra Diseño subpestaña Edición HTML del blog y marca la casilla Expandir plantillas de artilugios, luego busca lo siguiente.

<body>

Justo debajo Agregamos el siguiente código

   <div id='fb-root'/>

<script>(function(d, s, id) {

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 lo siguiente

<b:includable id='comment-form' var='post'>

Justo debajo pegamos este otro código

  <div id='comentariosFacebook'>

<div class='fb-comments' data-num-posts='5' data-width='500' data-colorscheme='light' expr:href='data:post.url'/>

</div>

Otros detalles caja de comentarios facebook

donde dice width 500 pudes modificarlo por otro número mayor para aumentar el ancho del contenedor y ajustarlo conforme a tu planilla, sino puedes dejarlo así como esta no pasa nada.

Y por ultimo Guarda tu planilla

para ver la caja de comentario de facebook debes de ingresar en alguno de tus post, ya con esta opción tus visitantes se les harán más facil comentar tus artículos. Además facebook ofrece un aplicación para informarnos acerca de quién comenta en nuestros post pero lo explicaré en otro tutorial más detalla pero ya tenemos lo básico.

Mostrar codigos html blogger en los post

Bueno hoy vamos a ver como mostrar códigos HTML en los post o entradas blogger primero vamos a incluir el estilo CSS en la planilla y luego la caja para Mostar el código en las entradas. Esto es muy útil si queremos hacer un Tutorial y necesitamos incluir códigos HTML en nuestra entrada, sigue los pasos A Continuación.

Cómo mostrar los códigos de HTML dentro de los post blogger
Insertar código HTML en un post

puedes recurrir a un sitio como simplebits en el cual sólo debes pegar el código que deseas mostrar, presionas procesar y te arrojará el código que debes pegar en el post. De este modo el post no reconocerá el código como un comando que debe traducir y lo mostrará tal cual sin interpretación.
1.Ingresar a Blogger> Diseño> Edición de HTML

2: Buscar el siguiente código

]]></b:skin>

3. Justo antes pega el siguiente codigo CSS

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'><img src="URL DE LA IMAGEN" /></a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>

4. Guardamos planilla

6.copia y pega el siguiente código dentro de tu entrada en la pestaña Edición de HTML

<div class="pre">

AQUI TU CODIGO HTML

</div>

Nota: Sustituye AQUI TU CODIGO HTML por el tuyo.como lo ves es tan facil hacer esto auque aveces necesitamoas de algo de ayuda para hacerlo y claro este blog es exactamente para eso ayudarte a contruir tu blog en blogger.