MAPA DEL SITIO

GRACIAS A TU DONACION ESTA PAGINA PODRA SEGUIR FUNCIONANDO
Comentarios de Puntadas católicas
COMPARTE ESTA ENTRADA





SIGUENOS
Síguenos en TwitterSiguenos en FacebookSiguenos en Google+Siguenos en PicasaSiguenos en YouTubeSiguenos en BloggerSiguenos en Blogger


Entradas papulares en carrousel horizontal


En este tutorial de Super trucos blogger comparte un slider o Carousel  que hara que tu blog de blogger luzca al dia,este es un fantastico slider horizontal y hara que tu webside sea facil de navegar e aumentara las vistas a las paginas del mismo Este widget muestra los 10 articulos mas populares de tu blog en la parte superior del mismo. Puedes ver la Demostracion  AQUI



Pasos para Añadir Carrousel a Blogger
Antes de añadir este widget sepa que no es compatible con todas las plantillas,asi que haga una copia de seguridad o backup antes de hacerle cambio a tu plantilla de blogger . Luego siga estos pasos:

1. Si estas usando la antigua interface de Blogger :

Ve al Blogger- Diseño - Editar HTML - (haga una copia de seguridad backup) Expandir el Widget de plantilla
Si en cambio estas utilizando la nueva interface de Blogger :
Ve a Blogger - Plantilla - Editar HTML - Proceda - (haga copia de seguridad o backup)
2. Busca (CTRL + F) este codigo:

]]></b:skin>

3. Luego arriba o antes de este ]]></b:skin> añade el siguiente codigo:
#gallery{position:relative;margin:0 35px 20px;width:590px;height:126px;background:#ffffff}
#gallery .belt{position:absolute;top:0;left:0;list-style-type:none}
#gallery .panel{float:left;margin:20px;width:84px;height:86px;background:url(http://2.bp.blogspot.com/-_Srvna_zg0M/T393_LXqDLI/AAAAAAAABrQ/_t2GmPexCHo/s1600/bg-slider.png) bottom center no-repeat;overflow:hidden}
#gallery .panel img{float:left;border:1px solid #DDD;margin:5px;width:72px;height:72px;background:#FFF;padding:0px}
#gallery .panel img:hover{filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity:0.5;opacity:0.5}

Nota Importante: puedes ajustar el tamaño de la galeria, cambiando los valores en rojo (590 y 126 ).

4. Ahora busca el siguiente codigo:
</head>

5. Inmediatamente arriba o antes de este añade el siguiente codigo:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://helplogger.googlecode.com/svn/trunk/auto-slider.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
stepcarousel.setup({
galleryid: "gallery",
beltclass: "belt",
panelclass: "panel",
autostep: {enable:true, moveby:1, pause:6000},
panelbehavior: {speed:500, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 2, leftnav: ["http://2.bp.blogspot.com/-0Iss3Wjr36Q/T393U65TcKI/AAAAAAAABq4/K_uzwyuNzrE/s1600/prev.png", -40, 36], rightnav: ["http://1.bp.blogspot.com/-DtspeRHclnQ/T393WdyB8EI/AAAAAAAABrA/TKHickb2iI8/s1600/next.png", 2, 36]},
contenttype: ["external"]
})
//]]>
</script>

Lo proximo que haremos es colocar el widget antes de las entradas de blogger .

6. Busca el: siguiente codigo
<b:section class='main' id='main' showaddelement='yes'>
si no lo puedes encontrar, busca el siguiente:
<b:section class='main' id='main' showaddelement='no'>

7. Justo despues del codigo anterior, añade el siguiente codigo:

<b:widget id='PopularPosts2' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div style='margin-top:20px;margin-bottom:70px;margin-left:-20px;'>
<div id='gallery'>
<ul class='belt'>
<b:loop values='data:posts' var='post'>
<li class='panel'>
<b:if cond='data:showThumbnails == &quot;false&quot;'>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
<b:else/>
<div class='item-title'>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
</div>
<div class='item-snippet'>
<data:post.snippet/>
</div>
</b:if>
<b:else/>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'>
<b:if cond='data:post.thumbnail'>
<img expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
<b:else/>
<img alt='no image' src='http://2.bp.blogspot.com/-mRxY2oEkLJc/T393wpt0z_I/AAAAAAAABrI/4blMjDaSOUY/s1600/no-image.PNG'/>
</b:if>
</a>
</b:if>
</li>
</b:loop>
</ul>
</div></div></b:if>
 </b:includable>
</b:widget>
Nota Importante: Borra la parte del codigo en azul si deseas que este widget se muestre en las paginas de entradas tambien y no solo en pagina principal.

8. Chequea ahora si todo esta funcionando adecuadamente, por ultimo Guarda la Plantilla.Que lo disfrutes!

Tal vez te interese

Related Posts Plugin for WordPress, Blogger...
TRANSLATE


EnglishcvFrenchGermanSpainItalianDutchRussianPortugueseJapaneseKoreanArabicChinese Simplified

Archivo del blog

Entradas populares

Seguidores

 
Gadget de animacion Social - Widgets para Blogger

[PR] 求む!タイピング初心者