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 +

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 +

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.

Agregar Buscador a tu pagina de blogger

Leer +

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-image: none;
    border-radius: 4px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
    display: inline-block;
    font-size: 13px;
    font-family: Arial;
    line-height: 20px;
    margin: 0;
    padding: 4px 12px;
    text-align: center;
    vertical-align: middle;
    cursor:pointer;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    border-style: solid;
    border-width: 1px;
    color: #FFF !important;
    text-decoration: none !important;
    transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
    -moz-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
    -webkit-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
    -o-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
}
.nw-btn:hover {
    text-decoration: none !important;
}
.nw-btn:active {
    box-shadow: 0 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-image: linear-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-color: rgba(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-image: linear-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-image: linear-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-image: linear-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 +

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 +

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 Facebok, el 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 +

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 +

NearVillalobos

Bien, después de un par de horas de pelearme con la computadora pude hacerle tres mejoras al script de modo que si una entrada no tiene una imagen podrá mostrar una imagen predeterminada para ilustrar el resumen.

Luego, las imágenes en miniatura ya no perderán su proporción, por lo que una imagen rectangular podrá verse más pequeña pero igualmente rectangular.

Y además, las imágenes en miniatura tendrán un enlace a la entrada, así que podrás acceder al post completo desde el link de Leer más, o desde el título de la entrada, o bien, haciendo click en la imagen en miniatura.

El procedimiento es el mismo, primero entramos en Diseño | Edición de HTML, marca la casillaExpandir plantillas de artilugios, y busca esta línea:

<data:post.body/>

Elimínala y en su lugar agrega esto:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id' style='font-size:13px; text-align:justify;'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.url/>&quot;);</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'>Leer más...</a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

Ahora antes de </head> pega lo siguiente:

<script type='text/javascript'>
summary_txt = 410;
img_thumb_width = 120;
</script>

<script type='text/javascript'>
//<![CDATA[
// Script original de Anhvo, modificado por ciudadblogger.com
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID, pURL){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
if(img.length<=0) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><a href="'+ pURL +'"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMccKdw0UZVlH2ZOBtblQomcIK6wpciHAvNt6e4FLy89Le98SHxs1hnhSKB8a8SOUH51k7wP_tuDybvictbV-NFjFMy_ngGP7Tuqr5bYLuwksW3zy7hkGzt028Rr7U5rgSiWtfar-FoqQ/" width="'+img_thumb_width+'px" /></a></span>';
summ = summary_txt;
}
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><a href="'+ pURL +'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px"/></a></span>';
summ = summary_txt;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Guarda los cambios y listo. Ahora veamos las modificaciones que se le puede hacer para personalizarlo.

En el primer código que hemos agregado, he puesto en negrita los estilos para el resumen, ahí se puede cambiar el tamaño de la letra, la alineación del texto, y se le pueden agregar más estilos como el color de la letra, color de fondo, etc.

En donde dice Leer más puedes cambiarlo por otro texto o bien, por una imagen, si ese es el caso entonces elimina ese texto y en su lugar agrega esto cambiando la URL de la imagen donde se indica:

<img src="URL de la imagen" border="0" />

En el segundo código que hemos agregado veremos al inicio dos variables:
summary_txt = 410; indica el número de caracteres que tendrá el resumen.
img_thumb_width = 120; es el ancho que tendrán las imágenes en miniatura.

Un poco más abajo está una URL en color azul, esa es la imagen que se mostrará en el resumen cuando la entrada no tenga una imagen, y será esta:

Esa imagen la puedes cambiar por cualquier otra que elijas, sólo cambia la URL en color azul por la de la imagen que quieres.

Como has podido notar los códigos son bastantes similares al método anterior sólo que con unas pequeñas modificaciones que aunque parecen insignificantes mejoran por mucho la funcionalidad del script.

Fuente Original: http://ciudadblogger.com/

Leer más con imágenes en miniatura mejorado para blogger

Leer +

NearVillalobos

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.
Puedes verlo funcionando aquí mismo, arriba de esta página.

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:

<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.

Twitcker, para mostrar los últimos tuits en forma de marquesina

Leer +

NearVillalobos

 

Quieres tener la Scroll-Bar te tu web al estilo de CT?

Muy facil sabes, es simplemente de pegar un codigo HTML..

Pero antes, debo dar a notar que no tiene las flechitas arriba o abajo, simplemente es la Scroll bar...

Esta scrollbar es muy facil de usar y muy notable, simplemente seguir los pasos indicados...

ahora entramos a la plantilla de tu blog, y Codigo HTML

Buscar con CRTL+F o bien F3

esta linea: ]]></b:skin>

Una vez encontrada antes de ]]></b:skin> debes copiar el siguiente codigo:

======================================================

.main3 {width:305px;

list-style-type: none;

padding-top: 10px;

float: right;}

::-webkit-scrollbar {

height:12px;

background: #111;}111 <!-- Color de fondo barra en este caso es negro -->

::-webkit-scrollbar-thumb {

background-color: #EB8A1D; <!-- Color de Barra -->

}

=====================================================

Este codigo html esta en su punto exacto, no puede ser modificado...

Una vez copiado, clic en Guardar cambios y listo, La scrollbar al estilo de CT!

Comentar no cuesta nada :)

La Scroll-Bar Personalizada - Al estilo de Ciudad Templates!

Leer +