CodigoBlogger | Ayuda y tutoriales para tu blog!: 2013

7 pasos importantes para crear un blog exitoso

NearVillalobos
Crear un blog exitoso no es fácil. Pero tampoco es imposible. Muy a menudo ves bloggers tratando de hacer algo con sus blogs, pero hay muchos de ellos que no encuentran el éxito con sus blogs.Aquí hay algunos de los pasos más importantes que debes efectuar de forma que puedas crear un blog exitoso:
1. Escoge una temática para tu blog:
Es la primera decisión que debes tomar. Escoge una temática que ames -no quiero decir AMOR!- Solo que no te debe ser difícil escribir contenido de calidad en tu blog.
2. Escoge un buen nombre para tu blog:
Supón que quieres escribir acerca del “Basketball”. Y entonces escoges un nombre que esta muy relacionado con este tema. Por ejemplo, “SuperBasket” podría ser un buen nombre para este blog. Por supuesto, debes mirar si este nombre ya lo tiene otro blog, si no es así, regístralo lo más pronto posible.
3. Escoge una plataforma para tu blog:
Es muy importante que te instruyas sobre las plataformas para blogs. Hay varias plataformas que puedes escoger, solo observa: Consejos para bloggers novatos Parte 2: ¿Como comienzo?.
Míralas todas y escoge la que más te guste.
4. Escoge una plantilla para el blog:
Cuando hayas escogido la plataforma para el blog, debes escoger una plantilla para el blog. Hay una gran cantidad de plantillas disponibles en toda la Internet que hacen de esta parte, la más divertida de todas -a mi parecer ;) .
5. Escoge tu frecuencia de publicación:
Este es uno de los factores más importantes a decidir. Cuando tu empiezas a publicar, debes hacerlo de forma regular así tus lectores sabrán que esperar de ti. Si empiezas a publicar como un loco por un tiempo y después no publicas nada por algún tiempo, te encontrarás con la dificultad de hacer que tus lectores sigan regresando.
6. Sé siempre activos en la blogósfera:
Visita otros sitios, si tienes que decir algo en otros blogs, dilo, no solo lo piensas y te vas, únete a comunidades sociales en internet (recomiendo para comenzar: MyBlogLog y Technorati) interactúa con otros bloggers alrededor de la web.
7. Escribe artículos interesantes y de calidad en tu blog:
Si puedes hacer esto, tienes un futuro en la blogósfera. Un artículo que te explica más este paso y el quinto paso es: Cantidad vs Calidad: ¿qué es más importante?.
Si piensas que existen otros pasos que pueden ayudar a que un blog sea exitoso, solo ponlos aquí mediante un comentario.

Fuente: Trazos-web

7 pasos importantes para crear un blog exitoso

Leer +

Pasos de Como crear un blog de blogger?

NearVillalobos
Hace ya algunos dias, me preguntaron, Cuales son los primeros pasos de como crear tu propio blog ( WEB)
Bueno, este tutorial es propio, donde yo mismo, subire las imagenes demo para mostrarles a ustedes..
Los pasos que se deben de seguir para crear un blog, o al menos lo basico!
Para empezar, deben de saber que un blog de blogger es de el proovedor www.blogger.com
Asi que primero que nada entrar a la pagina web www.blogger.com
Debes tomar en cuenta, que debes estar registrado en Google para poder acceder...
Si no tienes cuenta Gmail o google, registrate una, Es muy facil...
una vez iniciada la sesión , simplemente, debes dar clic en el botón NUEVO BLOG que esta a la izquierda de la pagina principal de blogger!:
ejemplo de boton!
Luego de dar clic en Nuevo blog, se abrira esta ventanita:

Una vez clic en crear blog , debes ingresar el titulo de tu blog...
luego la url que desearias..
En mi caso es " Codigoblogger"
luego selecciono la plantilla deseada ( sencillo como recomendado )
una vez echo esto, clic en crear blog, y saldra algo como este ejemplo:

Algo asi es como aparece para darse cuenta que el blog esta creado, en mi caso, use un ejemplo real..
Aqui esta la url ejemplo: http://democds.blogspot.com/

Listo, para crear una entrada nueva, simplemente clic en donde esta el lapiz en color naranja...
Tal vez te interese:
en construccion!

Pasos de Como crear un blog de blogger?

Leer +

Plantilla para imagenes de Facebook!

NearVillalobos
Hola amigos, hoy vengo a compartir con ustedes una plantilla que encontré en la red y como realmente me encantó quiero compartir con ustedes, la plantilla en cuestión se llama "donface" y pueden ver un demo del mismo
Si les pide contraseña para descomprimir es ésta
(ajmrdesign)Qh3^L8h=-)12m*|4f(C1Oiyx$}fYLg
Para los íconos sociales hay que entrar en diseño y añadir estos enlaces de abajo, los enlaces a la redes sociales.

<a class='iconos icono1' href='javascript:void(0);'>Twitter</a>
<a class='iconos icono2' href='javascript:void(0);'>Pinterest</a>
<a class='iconos icono3' href='javascript:void(0);'>Google plus</a>
<a class='iconos icono4' href='javascript:void(0);'>Facebook</a>
Eso es todo, por favor respeten los el CopyRight que puso el creador de la plantilla, repito, no son míos sino del creador del tema,


Plantilla para imagenes de Facebook!

Leer +

PLANTILLA BLOGGER ANIMEID ( panchisweb )

NearVillalobos
Bueno, esta vez e actualizado mi primera plantilla que desarrolle, a long time! .. le puse el bloque de generos con esa flechita para colocar mas generos .. ! las entradas ya tienen un estilo definido, se le agrego los idtabs + commentbox de facebook y botones sociales, para compartir las entradas, descarguenla!!! esta rebuena! ( Panchisweb ) 
Click en la Imagen para Descargar

PLANTILLA BLOGGER ANIMEID ( panchisweb )

Leer +

IDtabs Animeid.TV | Editado por Danikallpa para blogger

NearVillalobos
Una modificacion mas de IdTabs, ahora con el estilo de AnimeID.Tv... veamos como agregarlo:

1. Buscamos la etiqueta </head> y antes de ella agregamos las siguientes librerias:
<script src='http://dl.dropbox.com/u/23616660/ihojosestudios/FUTUdownloads/js/tipsy/jquery.tipsy.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>

$(document).ready(function() {

 //Default Action
 $(".tab_content").hide(); //Hide all content
 $("ul.tabs li:first").addClass("active").show(); //Activate first tab
 $(".tab_content:first").show(); //Show first tab content
 
 //On Click Event
 $("ul.tabs li").click(function() {
  $("ul.tabs li").removeClass("active"); //Remove any "active" class
  $(this).addClass("active"); //Add "active" class to selected tab
  $(".tab_content").hide(); //Hide all tab content
  var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
  $(activeTab).fadeIn(); //Fade in the active content
  return false;
 });

});
</script>


2. Agregamos las siguientes lineas antes de la etiqueta ]]></b:skin>
/* CSS Tabs AnimeID.Tv jQuery */
.tab_container {
display:table;
width:100%;
padding:10px 5px 05px;
margin:0;
table-layout:fixed;
margin-top:-23px;
}
.tab_content {
width:568px;
height:340px;
background:black url('http://dl.dropbox.com/u/6188287/files/template/load-cap.gif') no-repeat 50% 325px;
box-shadow:0 1px 1px #BBB;
overflow:hidden;
margin:0 auto;
position:relative;
text-align:center;
}
ul.tabs {
margin-left:-35px;
margin-right:-1px;
}
ul.tabs li:first-child:last-child{border-radius:4px 4px 0 0}
ul.tabs li:first-child{border-radius:4px 0 0 0}
ul.tabs li:last-child{
border-left:1px solid #4b6170;
border-right:1px solid #4b6170;
border-radius:0 4px 0 0;
}
ul.tabs li {
list-style:none;
padding:10px;
margin:0;
display:table-cell;
text-align:center;
box-shadow:inset 0 1px 0 0 #8da4b3,0 1px 2px rgba(0,0,0,0.2);
background:-webkit-gradient(linear,left top,left bottom,color-stop(0.05,#6c899c),color-stop(1,#4b6170));
background:-moz-linear-gradient(center top,#6c899c 5%,#4b6170 100%);
background-color:#6c899c;
border-top:1px solid #4b6170;
border-bottom:1px solid #4b6170;
border-left:1px solid #4b6170;
border-right:0;
color:white;
font-family:arial;
font-size:9px;
text-transform:uppercase;
text-decoration:none;
text-shadow:0 1px 0 #354752;
opacity:.9;
line-height:8px;
cursor:pointer;
position:relative;
-webkit-transition:opacity 300ms ease-in-out;
-moz-transition:opacity 300ms ease-in-out;
width:128px;
}
ul.tabs li a {
text-shadow:0 -1px 0 #233641;
color:white;
}
ul.tabs li:hover {
color:white;
}
html ul.tabs li.active, html ul.tabs li.active  {
background:-webkit-linear-gradient(#3e5664,#a7a7a7);
background:-moz-linear-gradient(#3e5664,#a7a7a7);
box-shadow:none;
opacity:1;
text-shadow:0 -1px 0 #233641;
border:0color:white;
}


3. Agregamos lo siguiente en la entrada donde se mostrara la caja de videos modificando lo resaltado en verde:
<ul class="tabs">
<li><a class='tip' title="Servidor 1" href="#tab1">Opcion 1</a></li>
<li><a class='tip' title="Servidor 2" href="#tab2">Opcion 2</a></li>
<li><a class='tip' title="Servidor 3" href="#tab3">Opcion 3</a></li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
<div align="center">
AQUI CODIGO REPRODUCTOR 1
</div>
</div>
<div id="tab2" class="tab_content">
<div align="center">
AQUI CODIGO REPRODUCTOR 2
</div>
</div>
<div id="tab3" class="tab_content">
<div align="center">
AQUI CODIGO REPRODUCTOR 3
</div>
</div>
</div>

IDtabs Animeid.TV | Editado por Danikallpa para blogger

Leer +

Agregar Buscador a tu pagina de blogger

NearVillalobos

Algunos se preguntarán -¿para qué poner un buscador en mi blog? Bueno, piensa que si tienes muchos post publicados y aunque tengas todo bien etiquetado talvez se les dificulte a tus lectores encontrar alguna información que hayas publicado en el pasado.
Así que acá van tres formas de poner un buscador en el blog. El primero es muy simple, está basado en Javascript y el aspecto es muy sencillo.

Para agregarlo entra en Dieño | Elementos de la página | Añadir un gadget | HTML/Javascript. Y pega este código:
<center><form id="searchthis" action="/search" style="display:inline;" method="get"><input id="search-box" name="q" type="text"/> <input id="search-btn" value="Buscar" type="submit"/></form></center>

El resultado será este:
======Ejemplo======
 
======Ejemplo======
Para el segundo buscador entra en Diseño | Elementos de la página | Añadir un gadget y eligeCuadro de búsqueda. Ahí selecciona las opciones, por si quieres que las búsquedas sean sólo en el blog o en la web. Cabe señalar que los resultados los mostrará en el área de los post, al igual como las opciones de búsqueda en el blog o en la web.


Buscador Blogger In Draft

Agregar Buscador a tu pagina de blogger

Leer +

Multi fade album CSS3

NearVillalobos


Bueno después de un largo tiempo de ocupaciones vuelvo a publicar algo, se trata de otro álbum para los que usan muchas imagenes en una sola entrada pero la peculiaridad de este es que muestra por cada sección 3 imagenes, puede ser útil para muchas cosas como por ejemplo si tienen un blog de imagenes pueden hacer una sección con este álbum y por cada elemento colocar tres imagenes correspondiente a esa categoría, si es naturaleza entonces de plantas, si es de fauna entonces animales, de esa forma al darle click llevara a sus usuario a una entrada con todas las imagenes correspondiente a esa categoría, pero en fin, el uso que le den corre por cuenta de cada webmaster, yo solo les comparto mis creaciones n_n


Si lo vas a incluir dentro de una misma pagina en html recuerda incluirlo dentro de las etiquetas corresponientes, ejemplo:
<style type="text/css">
...aqui el codigo...
</style>
  Si usas blogger no incluiremos estas etiquetas, nos vamos a dirigir a Plantilla > Edición html y buscaremos ]]></b:skin>ensima de eso ponen esto:
#multi-img {
    clearboth;
    margin0 auto;
    overflowhidden;
    padding20px;
    width910px;
}

.corte-img {
    background#222;
    floatleft;
    height184px;
    margin2px;
    overflowhidden;
    positionrelative;
    width222px;
}

.corte-img img {
    left0;
    margin-left: -25px;
    margin-top-25px;
    positionabsolute;
    top0;
    opacity:1;
    z-index:10;
}

/******* Todas las propiedades que usan transition para regresar *******/
.corte-img img, .corte-img:hover img.zc, .corte-img > a, .corte-img span {
    transitionall 500ms ease-in-out 0s;
    -moz-transitionall 500ms ease-in-out 0s;
    -o-transitionall 500ms ease-in-out 0s;
    -webkit-transitionall 500ms ease-in-out 0s;
}
/**********************************************************/


.corte-img:hover img.zc, .corte-img:hover img.zb, .corte-img:hover img.za {
    opacity:0;
}

.corte-img:hover img.zb {
    transitionall 500ms ease-in-out 1s;
    -moz-transitionall 500ms ease-in-out 1s;
    -webkit-transitionall 500ms ease-in-out 1s;
    -o-transitionall 500ms ease-in-out 1s;
}

.corte-img:hover img.za {
    transitionall 500ms ease-out 2s;
    -moz-transitionall 500ms ease-out 2s;
    -webkit-transitionall 500ms ease-out 2s;
    -o-transitionall 500ms ease-out 2s;
    margin-left-100px;
    margin-top-70px;
}

.corte-img > a {
    displayblock;
    height184px;
    line-height184px;
    positionrelative;
    text-aligncenter;
    text-decorationnone;
    z-index:50;
}

.corte-img span {
    color#AFAFAF;
    font-familyArial,Helvetica;
    font-size18px;
    font-weightbold;
    opacity0;
    positionrelative;
    top-60px;
}

.corte-img:hover span {
    opacity:1;
    top:0;
    transitionall 500ms ease-in-out 2.3s;
    -webkit-transitionall 500ms ease-in-out 2.3s;
    -o-transitionall 500ms ease-in-out 2.3s;
    -moz-transitionall 500ms ease-in-out 2.3s;
}
por ultimo la estructura html, ubiquenla en donde deseen el efecto:
 <div id="multi-img">


<div class="corte-img">
<a target="_blank" href="#">
<span>Click para ver mas</span>
    <img class="za" src="url de la imagen 1" />
    <img class="zb" src="
url de la imagen 2" />
    <img class="zc" src="
url de la imagen 3" />
</a>
</div>

<div class="corte-img">
<a target="_blank" href="#">
<span>Click para ver mas</span>
    <img class="za" src="url de la imagen 1" />
    <img class="zb" src="
url de la imagen 2" />
    <img class="zc" src="
url de la imagen 3" />

</a>
</div>

<div class="corte-img">
<a target="_blank" href="#">
<span>Click para ver mas</span>
    <img class="za" src="url de la imagen 1" />
    <img class="zb" src="
url de la imagen 2" />
    <img class="zc" src="
url de la imagen 3" />

</a>
</div>


</div>


Eso seria Todo! 

Multi fade album CSS3

Leer +

Botones GZero CSS3

NearVillalobos
Pues paso rapido a dejarles estos botones que diseñe hace un rato, estan disponibles en 5 colores, tienen efectos hover y active, los desarrolle usando solo CSS3 y es compatible con todos los navegadores exceptuando versiones viejas, bueno es muy sencillo, solo tienen que hacer esto:

Si lo vas a incluir dentro de una misma pagina en html recuerda incluirlo dentro de las etiquetas corresponientes, ejemplo:
<style type="text/css">
...aqui el codigo...
</style>
  Si usas blogger no incluiremos estas etiquetas, nos vamos a dirigir a Plantilla > Edición html y buscaremos ]]></b:skin>ensima de eso ponen esto:
 
/*botones GZero*/

.nw-btn {
    border-imagenone;
    border-radius4px;
    box-shadow0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
    displayinline-block;
    font-size13px;
    font-familyArial;
    line-height20px;
    margin0;
    padding: 4px 12px;
    text-aligncenter;
    vertical-alignmiddle;
    cursor:pointer;
    text-shadow0 -1px 0 rgba(0, 0, 0, 0.25);
    border-colorrgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    border-stylesolid;
    border-width1px;
    color#FFF !important;
    text-decoration: none !important;
    transitionborder 0.2s linear 0s, box-shadow 0.2s linear 0s;
    -moz-transitionborder 0.2s linear 0s, box-shadow 0.2s linear 0s;
    -webkit-transitionborder 0.2s linear 0s, box-shadow 0.2s linear 0s;
    -o-transitionborder 0.2s linear 0s, box-shadow 0.2s linear 0s;
}
.nw-btn:hover {
    text-decorationnone !important;
}
.nw-btn:active {
    box-shadow0 2px 4px rgba(0, 0, 0, 0.15) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
}
/*Blanco*/
.nw-btn.white {
    background#F5F5F5;
    background-imagelinear-gradient(bottom, #E6E6E6 0%, #FFFFFF 100%);
    background-image: -o-linear-gradient(bottom, #E6E6E6 0%, #FFFFFF 100%);
    background-image: -moz-linear-gradient(bottom, #E6E6E6 0%, #FFFFFF 100%);
    background-image: -webkit-linear-gradient(bottom, #E6E6E6 0%, #FFFFFF 100%);
    background-image: -ms-linear-gradient(bottom, #E6E6E6 0%, #FFFFFF 100%);
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #E6E6E6),color-stop(1, #FFFFFF));

    border-colorrgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) #B3B3B3 !important;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75) !important;
    color: #333 !important;
}
.nw-btn.white:hover {background:#E6E6E6;}

/*Azul*/
.nw-btn.blue {
    background#49AFCD;
    background-imagelinear-gradient(bottom, #2F95B4 0%, #5BC0DE 100%);
    background-image-o-linear-gradient(bottom, #2F95B4 0%, #5BC0DE 100%);
    background-image-moz-linear-gradient(bottom, #2F95B4 0%, #5BC0DE 100%);
    background-image-webkit-linear-gradient(bottom, #2F95B4 0%, #5BC0DE 100%);
    background-image-ms-linear-gradient(bottom, #2F95B4 0%, #5BC0DE 100%);
    background-image-webkit-gradient(linear,left bottom,left top,color-stop(0, #2F95B4),color-stop(1, #5BC0DE));
}
.nw-btn.blue:hover {background:#2F96B4;}

/*Verde*/
.nw-btn.green {
    background#5BB75B;
    background-imagelinear-gradient(bottom, #51A351 0%, #62C462 100%);
    background-image-o-linear-gradient(bottom, #51A351 0%, #62C462 100%);
    background-image-moz-linear-gradient(bottom, #51A351 0%, #62C462 100%);
    background-image-webkit-linear-gradient(bottom, #51A351 0%, #62C462 100%);
    background-image-ms-linear-gradient(bottom, #51A351 0%, #62C462 100%);
    background-image-webkit-gradient(linear,left bottom,left top,color-stop(0, #51A351),color-stop(1, #62C462));
}
.nw-btn.green:hover {background:#51A351;}

/*Naranja*/
.nw-btn.orange {
    background: #FAA732;
    background-image: linear-gradient(bottom, #F89306 0%, #FBB450 100%);
    background-image: -o-linear-gradient(bottom, #F89306 0%, #FBB450 100%);
    background-image: -moz-linear-gradient(bottom, #F89306 0%, #FBB450 100%);
    background-image: -webkit-linear-gradient(bottom, #F89306 0%, #FBB450 100%);
    background-image: -ms-linear-gradient(bottom, #F89306 0%, #FBB450 100%);
    background-image-webkit-gradient(linear,left bottom,left top,color-stop(0, #F89306),color-stop(1, #FBB450));
}
.nw-btn.orange:hover {background:#F89406;}

/*Rojo*/
.nw-btn.red {
    background#DA4F49;
    background-imagelinear-gradient(bottom, #BD362F 0%, #EE5F5B 100%);
    background-image-o-linear-gradient(bottom, #BD362F 0%, #EE5F5B 100%);
    background-image-moz-linear-gradient(bottom, #BD362F 0%, #EE5F5B 100%);
    background-image-webkit-linear-gradient(bottom, #BD362F 0%, #EE5F5B 100%);
    background-image-ms-linear-gradient(bottom, #BD362F 0%, #EE5F5B 100%);
    background-image-webkit-gradient(linear,left bottom,left top,color-stop(0, #BD362F),color-stop(1, #EE5F5B));
}
.nw-btn.red:hover {background:#BD362F;}


/*Fin botones GZero*/
y listo, ya tienen los botones en su web, ahora para hacer uso de ellos simplemente a una etiqueta "a" le agregan el atributo "class" de la siguiente manera:
 
<a class="nw-btn white" href="#">Boton Blanco</a> 
 "white" lo cambian por el color que quieran entre uno de estos:

white
blue
green
orange
red
 
 por ultimo les dejo una vista previa de los botones:

Botones GZero CSS3

Leer +

Cambiar o eliminar "Suscribirse a: Entradas (Atom)"

NearVillalobos

Suscribirse a: Entradas (Atom) es un link para que tus lectores puedan suscribirse a tus post y estén actualizados con el contenido de tu blog a través del feed del sitio. En el pasado sólo desde ahí podían realizarse dichas suscripciones, pero con el tiempo y la creación de nuevas plantillas esta suscripción se hizo más dinámica con íconos, imágenes, links, botones y formularios. Así que elSuscribirse a: Entradas (Atom) se volvió un tanto obsoleto en cuanto a diseño se refiere, es por eso veremos hoy cómo eliminarlo, cambiarlo o decorarlo.

Primero que nada que hay que localizar el código que contiene este link de suscripción; entra aPlantilla | Edición de HTML y marcando la casilla Expandir plantillas de artilugios busca esto:
<b:includable id='feedLinksBody' var='links'>
<div class='feed-links'>
<data:feedLinksMsg/>
<b:loop values='data:links' var='f'>
<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
</b:loop>
</div>
</b:includable>

  • Si quieres ocultar toda la frase entonces elimina todo lo que está en negrita.
  • Si quieres cambiar el texto de "Suscribirse a:" sustituye <data:feedLinksMsg/> por el texto que desees.
  • Si quieres cambiar la palabra "Entradas" remplaza <data:f.name/> por otro texto.
  • Si quieres cambiar el "(Atom)" cambia (<data:f.feedType/>) por otro texto o elimínalo.
  • Si quieres anteponer un ícono de feed pon esto: <img src='URL del icono'/> antes de<data:feedLinksMsg/>

Con estos sencillos cambios tendrás un enlace de suscripción más personalizado.

Cambiar o eliminar "Suscribirse a: Entradas (Atom)"

Leer +

Fanbox para Facebook, Twitter, y Google Plus, flotantes y con efecto deslizante Al estilo CT

NearVillalobos
Tal vez lo que buscas es: Personalizar el fanbox de facebook
En esta ocasión lo haremos sólo con CSS, de manera que no utilizaremos ni un solo sript y podremos mostrar no sólo una sino tres pestañas, el fanbox de Facebokel fanbox de Google+, y el fanbox de Twitter.
Puedes ver un ejemplo en esta misma entrada, lo verás del lado derecho de la ventana.

Bien, para poner estos fanbox flotantes en el blog sólo tenemos que ir a Diseño | Añadir un gadget | HTML/Javascript y ahí pegar el siguiente código:
<style>
#flotante1 {
position:fixed;
top:100px;
right:-250px;
float:right;
width:288px;
display:block;
padding:0;
z-index:1002;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#flotante2 {
position:fixed;
top:240px;
right:-250px;
float:right;
width:288px;
display:block;
padding:0;
z-index:1003;
border-radius:10px;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#flotante3 {
position:fixed;
top:380px;
right:-250px;
float:right;
width:288px;
display:block;
padding:0;
z-index:1004;
border-radius:10px;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#flotante1:hover, #flotante2:hover, #flotante3:hover {
right:0px;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
div.likeboxwrap {
margin-top:-5px;
margin-left:-45px;
width:238px;
height:325px;
background-color:#fff;
overflow:hidden;
border-radius:10px;
}
</style>

<!-- Primera pestaña -->
<div id='flotante1'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQRnfFDeL6eGQMCGKzyeS1lazW4kflOrUvjnS-2yEld0FmbamVbBANadrHSQZoPyo6FOtlTe-dW4rj8QcfxCu6q_MtB1JbQC9wp2OGLMYo5H-TaGwDvOzVbkvFhvzFLuxQLPXFgr3gQE0/' style='float:left;'/>
<div style='background: #3c5a98; height:325px; margin-left:38px;padding: 8px 5px 0pt 50px;border-radius: 0px 0px 0px 10px;'><span><div class='likeboxwrap'><iframe allowtransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fnombre-de-la-página-de-facebook&width=240&colorscheme=light&connections=15&stream=false&header=false&height=350' style='border:none; overflow:hidden; width:240px; height:325px;'/></iframe>
</div></span></div></div>

<!-- Segunda pestaña -->
<div id='flotante2'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg43q2-fcV06GKCDl8lqpSxHJYC66hOw7rOmCIzJJt7e8UssVokVNX2lrxv4ZpQkD93A7mYr1vcyBEXwB33b19H_P49lfUBrrxBzyjhVoH7TWc0RLHpBUZTn0rDmZc6ZIeoaMcKiQVa3NM/s159/goo_tab.png' style='float:left;'/>
<div style='background: #9A9FA8; height:325px; margin-left:38px;padding: 8px 5px 0pt 50px;border-radius: 0px 0px 0px 10px;'><span><div class='likeboxwrap' style="padding-left:20px; padding-top:15px; height:310px !important;">

<div class="g-plus" data-action="followers" data-height="300" data-href="https://plus.google.com/XXXXXXXXXXXXXX" data-source="blogger:blog:followers" data-width="240">
</div>
<script type="text/javascript">
(function() {
window.___gcfg = {'lang': 'es'};
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
</script>

</div></span></div></div>

<!-- Tercera pestaña -->
<div id='flotante3'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWxRK8NwfsZGEgZ6G-p18nMiT99i3grJRtls2qZG182gAjM_sI2IaojDYhyphenhyphenVRjWzbCmu0OWZ4sRWiMByDE5ALhG-zhiV5uhUJk73P2bvUqByrPGjyLt-6NipVT4VaBRFEIIMZX4WSL4oU/' style='float:left;'/>
<div style='background: #00a0e8; height:325px; margin-left:38px;padding: 8px 5px 0pt 50px;border-radius: 0px 0px 0px 10px;'><span><div class='likeboxwrap'>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
<style>
.follow_box_widget{overflow: hidden; padding-left: 5px; padding-right: 5px; padding-top: 5px; background-color: #fff transparent; position: relative; margin: auto;}
.follow_box{font-size: 11px; font-family: "lucida grande",tahoma,verdana,arial,sans-serif; color: #333; line-height: 1.28; text-align: left; direction: ltr;}
.follow_box .follow_top{padding: 5px 10px 0px 5px; margin-bottom: 8px; min-width: 230px; overflow: hidden;}
.follow_box .profileimage{float: left; width: 40px; height: 40px; padding: 0px; margin: 0 10px 4px 0;}
.follow_box img{border: 0;}
.follow_box a{cursor: pointer; color: #3B5998; text-decoration: none;}
.follow_box a:hover{text-decoration: underline;}
.follow_action{padding: 0 0 0 8px;}
.follow_box .follow_action .name{line-height: 15px; font-size: 14px; font-weight: bold;}
.follow_box .follow_button{margin: 5px 0 0;}
.follow_box .total{min-width: 230px; overflow: hidden; display: block;}
.follow_box .connections{padding: 5px 0 4px 0px; border-top: solid 1px #D8DFEA; border-bottom: 1px solid #CCC; min-height: 150px;}
.follow_box .connections .connections_grid{padding-top: 5px; overflow: hidden;}
.follow_box .clearfix{zoom: 1;}
.follow_box .connections .connections_grid .grid_item{float: left; margin:0px; margin-right: 5px; margin-bottom: 8px; overflow: hidden; width: 50px;}
.follow_box .connections .connections_grid .grid_item .name{font-size: 9px; color: gray; overflow: hidden; padding-top: 2px; text-align: center; white-space: nowrap;}
.follow_box .connections .connections_grid .grid_item img{width: 48px; height: 48px;}
.follow_box .follow_widget_footer{ cursor: default; width: 100%; min-width: 230px; overflow: hidden;}
.follow_box .footer_border{ margin-top: 5px;}
.follow_box .uiImageBlock{line-height: 14px;}
.follow_box .follow_widget_footer .footer_logo{float: left; margin-right: 5px;}
.follow_box .follow_widget_footer .footer_text{cursor: default; color: #808080; font-size: 9px; float: left;}
.follow_box .follow_widget_footer .footer_text a.footer_text_link{color: #808080;}
.follow_box .titlecase{text-transform:capitalize;}
</style>
<script>
/*
* Twitter Follow Box jQuery Plugin
* http://jobyj.in/twitter-follow-box-widget/
* Copyright 2012, Joby Joseph
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*/
(function(a){a.fn.followbox=function(b){function f(a,b){if(a>100)a=100;var c=new Array;for(var d=0;d<a;d++){c.push(b[d])}var e=c.join();return e}var c=a(this);var d="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhok1SBiEUcEbfTYd10FND1dUgPAWgnYGfuQvOzXda1OovFZMoG75ARgd1oBb14wKmXxlSf6lx3wJE0Ry1vCWyo880nr6ezjyTke5h39QUV7AY4rCZZxCrqyRUJ1vRwrI92bvLrn7_e6mE/";var e=a.extend({user:"jobysblog",width:292,height:252,theme:"light",border_color:"#AAA",bg_color:"#fff",bg_image:"",title_color:"#3B5998",total_count_color:"#333",follower_name_color:"#BBB"},b);a.ajax({url:"http://api.twitter.com/1/users/lookup.json?screen_name="+e.user+"&include_entities=true",dataType:"jsonp",success:function(b){var g=e.width-2;var h=e.height-2;var i=e.height-115;var j=parseInt(e.width/55);var k=parseInt(i/69)+1;var l=j*k;c.html('<div class="follow_box_main" style="border: 1px solid #bbb; width: '+g+"px; height: "+h+'px;"><div class="follow_box_widget"><div class="follow_box"><div><div class="follow_top clearfix"><a href="http://www.twitter.com/'+e.user+'" target="_blank"><img class="profileimage img" src="'+b[0].profile_image_url_https+'" alt="'+b[0].name+'"></a><div class="follow_action"><div class="name_block"><a href="http://www.twitter.com/'+e.user+'" target="_blank"><span class="name titlecase">'+b[0].name.toLowerCase()+"</span> @"+b[0].screen_name+'</a></div><div class="follow_button"><iframe allowtransparency="true" frameborder="0" scrolling="no" src="//platform.twitter.com/widgets/follow_button.html?screen_name='+e.user+'&show_count=false&show_screen_name=false&lang=es" style="width:100px; height:20px;"></iframe></div></div></div><div class="connections"><span class="total"><span class="follow_box_follower_count">'+b[0].followers_count+'</span> personas siguen a <b class="titlecase">'+b[0].name.toLowerCase()+'</b></span><div class="connections_grid clearfix" style="height:'+i+'px;"></div></div></div><div style="height: 23px"><div class="follow_widget_footer"><div class="footer_border"><div class="clearfix uiImageBlock"><a class="footer_logo" target="_blank" href="http://jobyj.in/twitter-follow-box-widget"><img src="'+d+'"/></a><div class="footer_text"><a class="footer_text_link" target="_blank" href="http://jobyj.in/twitter-follow-box-widget">Twitter Social Plugin</a></div></div></div></div></div></div></div></div>');if(e.theme=="dark"){c.find(".follow_box_main").addClass("dark")}c.find(".follow_box_follower_count").text(c.find(".follow_box_follower_count").text().replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1,"));if(a.browser.msie&&!a.support.boxModel)a(".follow_box .connections").css("padding-bottom","14px");if(e.theme=="custom"){c.find(".follow_box_main").css({"border-color":e.border_color,"background-color":e.bg_color,"background-image":'url("'+e.bg_image+'")'});c.find(".follow_box a").css({color:e.title_color});c.find(".follow_box .total").css({color:e.total_count_color})}a.ajax({url:"https://api.twitter.com/1/followers/ids.json?cursor=-1&screen_name="+e.user,dataType:"jsonp",success:function(b){var d=f(l,b.ids);a.ajax({url:"https://api.twitter.com/1/users/lookup.json?user_id="+d+"&include_entities=true",dataType:"jsonp",success:function(b){for(var d=0;d<b.length;d++){var f=a.trim(b[d].name);var g=f.split(" ");var h='<div class="grid_item"><a href="http://twitter.com/'+b[d].screen_name+'" target="_blank"><img class="img" src="'+b[d].profile_image_url+'" alt=""><div class="name titlecase">'+g[0].toLowerCase()+"</div></a></div>";c.find(".connections_grid").append(h)}if(e.theme=="custom"){c.find(".connections .connections_grid .grid_item .name").css({color:e.follower_name_color})}}})}})}})}})(jQuery)
</script>
<script>
$(document).ready(function(){
$('#twitterfollowbox').followbox({
'user':'usuarioTwitter',
'height':'300',
'width':'260',
'theme':'custom',
'border_color':'#ffffff',
'bg_color':'#ffffff',
'bg_image':'',
'title_color':'#3B5998',
'total_count_color':'#333333',
'follower_name_color':'#BDBDBB'
});
});
</script>
<div id="twitterfollowbox" class="follow-box-container"> </div>

</div></span></div></div>
Agrega donde se indica el nombre de tu página de Facebook, también pon la ID de tu página de Google Plus en donde están las equis en rojo, y el nombre de tu usuario de Twitter también donde se indica en color rojo.

El ID de tu página de Google Plus lo puedes ver ingresando a tu página, y al final de la URL aparecerán una serie de letras y números, ese es tu ID.

En el caso del fanbox de Twitter hemos usado el fanbox para Twitter que vimos recientemente, pero puedes usar otro, o bien, quitar la pestaña, o sustituirla por otro contenido, pues al menos ese fanbox sí usa jQuery y puede causar incompatibilidad con otros scripts.

En caso de que quieras cambiar alguna pestaña por otro tipo de contenido tendrás que localizar la URL de la imagen de la pestaña (color azul) y sustituirla por la que diseñes, luego quitar el contenido de la pestaña (según sea el caso) y en su lugar poner el código que desees.

La ventaja de este método es que no usamos scripts para las pestañas, ni para esconderlas, ni para mostrarlas, ni para el efecto deslizante. La contra es que el efecto deslizante son transiciones con CSS por lo que los navegadores que no son modernos no podrán ver el efecto de deslizamiento. Fuera de esto último es un método que además de ser fácil de aplicar también es una buena opción para tener tus distintos fanbox agrupados y mostrándolos de una forma elegante y original.





ACTUALIZACIÓN 1:
Si el fanbox de Facebook te marca error puede ser porque aún no tienes una URL personalizada en tu página de Facebook, en esos casos deberás cambiar esta parte:
http%3A%2F%2Fwww.facebook.com%2Fnombre-de-la-página-de-facebook
Por esta:
http%3A%2F%2Fwww.facebook.com%2Fpages%2Fnombre-de-la-página-de-facebook%2FXXXXXXXXXXXXXXX
Ahí además de poner el nombre de tu página donde se indica deberás poner en las equis una serie de números que aparecen al final de la URL de tu página de Facebook.

Fanbox para Facebook, Twitter, y Google Plus, flotantes y con efecto deslizante Al estilo CT

Leer +

Personalizar el FanBox de Facebook

NearVillalobos
Esto es simplemente una imagen demo...
Como puedes ver se ha eliminado la cabecera del Fanbox, se han quitado los bordes, el botón 'Me gusta' se ha puesto debajo, y el número de fans está en otro color.

Para conseguir personalizar el FanBox de esta forma necesitaremos saber la ID de nuestra página de Facebook.
Para saberla entra a tu página de Facebook y haz click en el botón Editar la página que se encuentra en el lado superior derecho.

En la barra de direcciones de tu navegador verás al final una serie de números, esa es la ID.
https://www.facebook.com/pages/edit/?id=XXXXXXXXXXXXXXX

Ahora descarga este archivo, descomprímelo y sube el archivo a un hosting.
Luego entra en Diseño | Elementos de la página | Añadir gadget | HTML/Javascript y ahí pega este código:
<script src="http://connect.facebook.net/es_ES/all.js#xfbml=1"></script>
<fb:fan profile_id="XXXXXXXXXXXXXXX" stream="0" connections="8" logobar="0"width="240" css="URL del archivo CSS"></fb:fan>

Cambia las equis que están en rojo por la ID de tu página de Facebook que conseguiste anteriormente. Y agrega la URL de tu archivo CSS que subiste al hosting. Con eso será suficiente para tener el FanBox con este estilo minimalista.
¿Se puede personalizar más? Claro, si abres el archivo facebook.css te encontrarás con este código:
.fan_box a:hover{
text-decoration: none;
}
.fan_box .full_widget{
height: 200px; /* Altura del FanBox */
border: 0 !important; /* Eliminamos el borde */
background: #fff !important; /* Color de fondo del FanBox */
position: relative;
}
.fan_box .connect_top{
background: none !important;
padding: 0 !important;
}
.fan_box .profileimage, .fan_box .name_block{
display: none; /* Con eso eliminamos la cabecera */
}
.fan_box .connect_action{
padding: 0 !important;
}
.fan_box .connections{
padding: 0 !important;
border: 0 !important;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #666;
}
span.total{
color: #FF6600; /* Color de la fuente para el número de fans */
font-weight: bold;
}
.fan_box .connections .connections_grid {
padding-top: 10px !important;
}
.fan_box .connections_grid .grid_item{
padding: 0 10px 10px 0 !important;
}
.fan_box .connections_grid .grid_item .name{
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
font-weight: normal;
color: #666 !important; /* Color del nombre de los fans */
padding-top: 1px !important;
}
.fan_box .connect_widget{
position: absolute;
bottom: 0; /* Con eso colocamos abajo el botón 'Me gusta' */
right: 5px;
margin: 0 !important;
}
.fan_box .connect_widget .connect_widget_interactive_area {
margin: 0 !important;
}
.fan_box .connect_widget td.connect_widget_vertical_center {
padding: 0 !important;
}
En esas anotaciones color verde se indica cuáles son las áreas que podemos modificar, como el color de fondo, el color del nombre de los fans, el color del número de fans, etc.
Se recomienda no cambiar el tipo de letra para evitar desajustes con los espacios. Y si cambias la altura del gadget deberás hacerlo tanto en el código que va en el HTML/Javascript como en el archivo CSS, tomando en cuenta que la altura en negrita deberá tener aproximadamente 40px más que la altura establecida en el CSS.
Seguro podrán hacerse modificaciones interesantes, pero así como está a mí me parece bastante lindo el diseño :)
By Ciudadblogger!

Personalizar el FanBox de Facebook

Leer +