viernes, 27 de diciembre de 2013

Añadir Galeria de Entradas Populares Antes de Entradas de Blogger

By andante77 10:41 a.m. , , , , , , , , 2 comments
En este tutorial de Super trucos blogger te traigo 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 del mismo en mi web aqui.

 Pasos para Añadir Carousel a Blogger

Antes de añadir este widget sepa que no es compatible con todas las plantillas,asi que haga una coipa 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjrxTXITpR6HA18eSe_5C4r9dHcIKpD88-lkDciJ4H4ZM7kRNboANkpLTHgNXfwojG6TUM8XXYI44Cjg5t3OzIAky_ATeOEVyOHB8ETRNeFVGJOag1jHwYKBJPkS81BJhYo5DTff8GHKLY/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 </head> 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: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxkukG-Xu6Tv_TkCD3NVACI_VWm6A0VzOL_qNKnUBF8_flcgA4x40KT05LbLY8BJycXycjw9nQvHNas1mL052YFRl7h-y3c2TJtciLFy9LDJop5UzUAgzrnVajTB-piIMpNsmxG-3oPl8x/s1600/prev.png", -40, 36], rightnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo067BKQIMQHV3CcMe0rQ3E2s7wI0MDLtmfUO3bTaEhlms76FcFv8XbSpD20HMS14EF4ruY1LoYXi8le_N9VBuyWE97LVEDRdugtMMuXIGCwzrQnwNjLiTMY3B3MjeAvxB3S5o-uB8H32m/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'>

...o sino 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIXlHbP2BxkYLhIrY1lHhUaU1LEUhEbREAG5QLqNnSzEi2TtH6hiYq7zHcaIQqvka-U256W9gnY_t0K3xRb8N3bIkJHNuSx_TFLik4gC-YUZG06Km7JpXidCsTbOwCcW_MSNKDHlfIlprq/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!
If You Enjoyed This, Take 5 Seconds To Share It

2 comentarios:

  1. supertacañonas9 de marzo de 2015, 10:45 a.m.

    hola, a mi no me sale. Uso el blogger de 2014. ¿cómo se hace en esa version de blogger? Gracias espero con ilusión una respuesta!!

    ResponderBorrar
  2. andante779 de abril de 2015, 8:44 a.m.

    Puedes buscar el siguiente codigo() y despues del mismo puedes proceder a colocar el widget

    ResponderBorrar