))) ZayineT (((: marzo 2013

Gadget de Entradas Populares con Efecto Slider / Deslizante

Las entradas populares es quizas uno de los gadgets mas usados por los usuarios de Blogger asi que personalizarlo un poco y darle un poco de estilo a este gadget no viene nada mal.

Con el truco de hoy el gadget se convertira en una especie de pequeño slider, ya que las entradas tendran un efecto de deslizamiento en el area del gadget,mejor pongo una imagen para que entiendan mejor el truco.

Para agregar este truco a tu blog primero debes tener el gadget de entradas populares, si ya lo tienes solo debes pegar en un gadget HTML/JavaScript lo siguiente:

<style type="text/css" media="screen">
#PopularPosts1 { 
overflow:hidden; 
margin-top:5px; 
width:100%; 
padding:0px 0px; 
height:310px;

}
#PopularPosts1 ul { 
width:310px; 
overflow:hidden; 
list-style-type: none; 
padding: 0px 0px; 
margin:10px 0px 0px 10px; 
}
#PopularPosts1 li { 
 width:290px; 
padding: 5px 5px; 
margin:0px 0px 5px 0px; 
list-style-type:none; 
float:none; 
height:80px; 
overflow: hidden; 
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWPqTX4Isa0LO_PVHnGdN_EX0-XfaW-7YWld66Ecs3G9lr2OA8SuOEyVZV6D-X3eq7FcdImtN-a94xQUxYQ6P2FWpmaYJ5AJjgfeIVzsZK4D1dtf4WtAcTz0CQ5uRbhD9dv5-vTx0raE4/s400/popular+posts.jpg) repeat-x; 
border:1px solid #ddd; 
}
#PopularPosts1 li .item-title { 
    
    font-size:1em; 
    margin-bottom:0.5em; 
}
#PopularPosts1 li .item-title a { 
text-decoration:none; 
color:#7CA2C4; 
font:bold 12px verdana; 
height:18px; 
overflow:hidden; 
margin:0px 0px; 
padding:0px 0px 2px 0px; 
}
#PopularPosts1 li img { 
float:left; 
margin-right:5px; 
background:#EFEFEF; 
border:2px solid #7CA2C4; 
}
#PopularPosts1 li .item-snippet { 
  overflow:hidden; 
font-family:Tahoma,Arial,verdana, sans-serif; 
font-size:10px; 
color:#289728; 
padding:0px 0px; 
margin:0px 0px; 
}
#PopularPosts1 .item-snippet a, 
#PopularPosts1 .item-snippet a:visited { 
    color:#3E4548; 
    text-decoration: none; 
}
#PopularPosts1 .spyWrapper { 
    height: 100%; 
    overflow: hidden; 
    position: relative; 
}
#PopularPosts1 { 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
}
.tags span, 
.tags a { 
    -webkit-border-radius: 8px; 
    -moz-border-radius: 8px; 
}
a img { 
    border: 0; 
}
--> 
</style> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript" charset="utf-8"> 
$(function () { 
    $('.popular-posts ul').simpleSpy(); 
}); 
</script> 
<script src="http://accordion-for-blogger.googlecode.com/svn/trunk/simplespy.js" type="text/javascript"></script>

Consideraciones
- Para que el gadget se vea como yo lo tengo debes activar las imagenes en miniatura y el fragmento.

Puedes ver el gadget funcionando en mi blog. AtodaZmusic

Agregar la caja de comentarios de Facebook en Blogger

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

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

<body>

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

<body expr:class='"loading" + data:blog.mobileClass'>

Debajo de cualquiera de ellas agrega esto:

<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 esta línea:

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

Debajo de ella agrega este código:

</div>

Elimina caja de Comentarios de Blogger

1. Ruta
Escritorio -> Diseño -> Edicion Html -> clic en Expandir plantilla de artilugios

2. Busqueda
Apretamos Control + F para abrir la caja de busqueda y asi encontrar más rápido el comando que necesitamos

3. Suprimir
Ubicamos el siguiente comando: <b:includable id='comment-form' var='post'>
(solo copia y pega en la caja de busqueda)

Debajo de el encontraremos una serie de codigos, pero el que nos interesa borrar es el grupo que eh señalado, suprimanlo y listo.

<div class='comment-form'>
<a name='comment-form'/>
<h2><data:postCommentMsg/></h2>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='240' id='comment-editor' name='comment-editor' src='' width='100%'/>
<data:post.friendConnectJs/>
<data:post.cmtfpIframe/>
<script type='text/javascript'>
BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>', '<data:post.communityId/>');
</script>
</div>

4. Clic en Guardar Plantilla y su caja de comentarios habrá sido borrada del blog.