Widget para blogger Acordeón Portafolio


Es indispensable para cada bloggero obtener nuevos y novedosos trucos para blogger, sobre todo que funcionen correctamente en su blog de blogger y que no causen errores en el diseño de su blog. El widget que les voy a presentar el día de hoy se llama widget acordeón portafolio, el cual es un widget que sirve para mostrar 20 fotos de su blog de forma manual, y le servirá para mostrar sus imágenes con una pequeña descripción de su post y un link que dirige hacia su post, con esto podrá dar a conocer sus artículos y ubicarlos con mas vistas, algunos usuarios que visitan su blog a veces pasan por alto algunos temas muy interesantes de su blog, esto se debe a que se les dificulta por no tener mucho tiempo de buscarlo, pero con este nuevo widget usted podrá ayudarles a sus usuarios a que encuentren un articulo destacado. Funciona en todos los navegadores como Firefox, Google Chrome, Internet Explorer etc. La incrustación del código es muy fácil de realizarlo, solo deben seguir las instrucciones de configuración y lo podrán utilizar en su blog de blogger en la cabecera principal o al final de su blog.

Widget para blogger Acordeón Portafolio

No te olvides de visitar algunos widgets fabulosos


A continuación mire su demostración en mi blog de demos


Te gusto!

Vamos a trabajar

1 Ir a blogger

2 Da un clic en “Plantilla

3 Un clic en “Editar HTML

Ahora se te abrirá el editor HTML de tu plantilla, se mostrara igual como la imagen que esta a continuación

Widget para blogger Acordeón Portafolio

En este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor, debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor, a continuación mire la imagen la cual te mostrara tal y cual deberá aparecerte el buscador en tu editor HTML de tu plantilla y así puedas colocar el código en el buscador al momento que yo diga busca este código.

Widget para blogger Acordeón Portafolio

4 Busca este código

]]></b:skin>

Inserta los siguientes estilos justo arriba del código que encontraste

/*---Ayudadeblogger.com widget acordeon ---*/ .mblaccordion { position:relative; overflow:hidden; } .mblaccordion .panel { background-color:#000; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbwPpmLi-3kGmPfmLNFJyEYGVcUTWiMEfcSpo-gUmh9O2EuH6blFcOXP7ssyxb02RSaZa5vHGHRBdwxnjjY_2Z10FIr-i1tYM2WwU-nXLgwRE2bY0z8tcIg3okxhra3D_QJKCCsRWynMkS/s1600/preloader.gif); background-repeat:no-repeat; background-position:center center; position:absolute; overflow:hidden; } .mblaccordion .shadow { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCUm2A_yxjwMrH6SBI-YvV159UVbFMP4bxDlPor1ipnOvGE4nq-Z8HH1d481PM5NwIhfH59Tn4xzE_ZmLEQEnHsVd4M__Qw9omiz5abkNlxgtTlF3i_ZDpOx-OdNYDosgz9GGGLiERM3vT/s1600/shadow.png) repeat-Y; position:absolute; right:0px; width:25px; height:100%; } .mblaccordion .preloader { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5MaKLkddbEwTx_w0a_kiUr8m5FV_9LXyNZOcGSForlO3C2BHeXTq3nA4rrI5FfZRQCIZ0tbJw0jxljof1jMAXD6icTN3pYFRwnfs8sDzhcPS1hXS6EyrUSsv-mp7Lbsgoqi0r78093w_z/s1600/preloader2.gif) no-repeat; width:62px; height:14px; position:absolute; z-index:15; } .mblaccordion .caption { overflow:hidden; position:absolute; z-index:20; } .mblaccordion .caption-background { background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGkpt9YxyJcijys5C8xTcZn6eUeWf0z1D4aQmC8RxaRsr9PsGy7y1UcA-mWvYorMUKtTJ-umJtS_YQgYcYzGCM6OrEqlxQApYXyXRXey8vo-ZryEisHTuL78ESq2yhj04PZP5y8yvoOhyphenhyphenx/s1600/captionBg.png); background:rgba(0,0,0,0.5); position:absolute; width:100%; height:100%; } .mblaccordion .caption p { color:#FFF; margin:0px; padding:10px; } .mblaccordion .caption p a { color:#FFF; } .mblaccordion { background-color:#FFF; border:4px solid #FFF; } .mblaccordion .panel { background-color:#EEE; } .mblaccordion { width:1200px; margin:0px auto; list-style:none; padding:0px; } .mblaccordion img, .mblaccordion .caption { position:absolute; left:-9999px; } #navigation { width:200px; height:25px; margin:60px auto 0px; } #navigation a { background-color:#F1F1F1; text-decoration:none; color:#999; padding:5px 10px; margin:0px 4px; border:#FFF solid 2px; }

5 Busca este otro código

</head>

Inserta las siguientes líneas de código arriba del código que encontraste

<script src='http://yourjavascript.com/1031522175/jquery-1-7-1-min.js' type='text/javascript'/> <script src='http://yourjavascript.com/6013712234/jquery-gridaccordion-min.js' type='text/javascript'/> <script type='text/javascript'> jQuery(document).ready(function($){ $(&#39;.mblaccordion&#39;).gridAccordion({width:940, height:680, columns:5, distance:2, closedPanelWidth:10, closedPanelHeight:10, alignType:&#39;centerCenter&#39;, slideshow:true, panelProperties:{ 0:{captionWidth:200, captionHeight:35, captionTop:30, captionLeft:30}, 4:{captionWidth:150, captionHeight:100, captionTop:30, captionLeft:650}, 7:{captionWidth:310, captionHeight:35, captionTop:350, captionLeft:40}, 8:{captionWidth:300, captionHeight:40, captionTop:150, captionLeft:35}, 11:{captionWidth:150, captionHeight:120, captionTop:300, captionLeft:30}, 14:{captionWidth:300, captionHeight:40, captionTop:30, captionLeft:50}, 16:{captionWidth:150, captionHeight:120, captionTop:150, captionLeft:10}, 18:{captionWidth:300, captionHeight:40, captionTop:130, captionLeft:50} }}); }); </script>

Ahora dale un clic en “Guardar plantilla

6 Tendras que dar un clic en “Diseño

7 Abre un gadget “Añadir un gadget

Widget para blogger Acordeón Portafolio

8 Busca el widget “HTML/Javascript” e inserta el siguiente código

Widget para blogger Acordeón Portafolio

<!-- Ayudadeblogger.com stard Acordeon --> <ul class="mblaccordion"> <li> <a href="http://www.ayudadeblogger.com/" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKTupRxoFH8L8vCzlM2eok9ZMjY7g0RjHL9Gn4Qrwp4u6Gw-rTkhyphenhyphens0p0oTG9FEQYhLzSmqRbETWAwUct8CqjJenoRYOXAl9uq6Ukelg2kubF-IHiAJ_4AcnGodvE0sDQxxYOd_aOd5gph/s1600/laptops+1.JPG" alt="ALT"/> <div class="caption"><a href="http://www.ayudadeblogger.com/" target="_blank">Aquí su texto</a></div> </a></li> <li><a href="http://www.ayudadeblogger.com/" target="_blank"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKkLW0w9B3YA2pd4m0DdZVaaIcfehAmIzdxCPPJujXTx3nMdN5zzML2tzv2V4XtT-iHlttYnZDVomgnbkmOp7c4z1KDS9uuh3lWTx-pgEJw8gO388Z5LhDkT59NdRCVHN0SpLl-m7JLCbH/s1600/laptops+2.JPG" alt="ALT"/> <div class="caption"><a href="http://www.ayudadeblogger.com/" target="_blank">La muestra del poder de blogger gracias a Ayudadeblogger.com</a></div> </a></li> <li><a href="http://www.ayudadeblogger.com/" target="_blank"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjm-nHDYT9ab2ZEu_2EbiMG5qKsduSAkKd3T7I7wVWyBrBYoafRFtZEizG56zd2fRIWNWoKHJNXbjpE8lGULLpacnUZSjUYWN5hwGPVANr4LQZVMVL9pLoGo2dq_Vhz4eN74ngxc01rFuA/s1600/laptops+3.JPG" alt="ALT"/> <div class="caption"><a href="#aqui la direccion url de su articulo" target="_blank">Aqui su Texto</a></div> </a></li> <li><a href="http://www.ayudadeblogger.com/" target="_blank"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk4ctFCtlqaLLmMC0a8Vib8PeSKXoMrhdXN9wpBndNZe2ZRT9_Gvo0aLnEbYFqWCPqQSfXVs__jyZH0t93d5UPCiLx1YAMBnRYVwunW1yB_UZJZ967daIMICBy6I4WZnSpZBsHEFq-R28U/s1600/laptops+4.JPG" alt="ALT"/> <div class="caption"><a href="#aqui la direccion url de su articulo" target="_blank">Aqui su Texto</a></div> </a></li> <li> <a href="http://www.ayudadeblogger.com/" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAmwn3vozRasPlQUik0YtquKTwHBCq_mWyq0jUpU-LPFE94Z0bCXBztDxG-puPOXcPQCyBb00sunDJGv3_sgYIsj_wFzen94Y4I9EY0oWtTIn2UzM0hTack8ucucvJakZ1lU6DtjcGpHDI/s1600/laptops+5.JPG" alt="ALT"/> <div class="caption"> <a href="#aqui la direccion url de su articulo" target="_blank">Aqui su Texto</a></div> </a></li> <li><a href="http://www.ayudadeblogger.com/" target="_blank"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfzytMgX1R8vqec-IAw06fz7hhSKZ369ibS-8Rxn8k8bw7miujSPLEyCW8B3mPSoryhVeX5q0kvCZDHD6xd5PNtuXmSf-Kecm2pPdycAarNI5rX_Mboj7qgfYZy1aJCSN4rFRkDeSbGJtk/s1600/iphone+1.JPG" alt="ALT"/> <div class="caption"><a href="#aqui la direccion url de su articulo" target="_blank">Aqui su Texto</a></div> </a></li> <li><a href="http://www.ayudadeblogger.com/" target="_blank"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg4p-85UYLjnAwLbK8El0z2yhqg875JdyRpgwdQeWZoUzCmCNJlKt_glmLE6aASVKMm7wgiIlxPEAkWcAGhB7d67bTbqcK-4fyA4seWeBf8dsxMZkPzGgOmV9k0BtCkdqqp2zLZYlPjq0W/s1600/iphone+2.JPG" alt="ALT"/> <div class="caption"><a href="#aqui la direccion url de su articulo" target="_blank">Aqui su Texto</a></div> </a></li> <li><a href="http://www.ayudadeblogger.com/" target="_blank"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGmmtdXyzdJ3s-WUFQIuOM12b4V58YNnxMTY7WrSlJbfmjwlqakBNQhCA22zN4KSWOor1QaOQZVAHbRVGCYsacnJ0qocdnk_TSNrq2TvQOQ0hWLB9xmtLmPEx-47N_hCdy4jlojDQAa7g8/s1600/iphone+3.JPG" alt="ALT"/> <div class="caption"><a href="#aqui la direccion url de su articulo" target="_blank">Aqui su Texto</a></div> </a></li> <li><a href="http://www.ayudadeblogger.com/" target="_blank"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7_9QZR-LEy7F9TN0vWGlxiXKOCYRxp6GhbRukT208LPEdR6tbxycjGB8BMJcMJqnKwL46VNj70DgqDCeYsLm3x0T6UbpP1tDCsRLinFfVoDg7vUIyes2NXCefce_bvLlObY7ax57Hw4UF/s1600/iphone+4.JPG" alt="ALT"/> <div class="caption"><a href="#aqui la direccion url de su articulo" target="_blank">Aqui su Texto</a></div> </a></li> <li><a href="http://www.ayudadeblogger.com/" target="_blank"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjtQNnFoK9ehKvoDArctZXsm3hvEPeFywljpBOG_PGupzdx1XcRz7ieu3yt938lqM_n45bEg_jHvP84-seakoG9JKBt4Z5cHnnT6Doj7MSMv-20uZzgzlfdofVEpoUlGIqLCWr3h0mQAV8/s1600/iphone+5.JPG" alt="ALT"/> <div class="caption"><a href="#aqui la direccion url de su articulo" target="_blank">Aqui su Texto</a></div> </a></li> <li> <a href="http://www.ayudadeblogger.com/" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAmwn3vozRasPlQUik0YtquKTwHBCq_mWyq0jUpU-LPFE94Z0bCXBztDxG-puPOXcPQCyBb00sunDJGv3_sgYIsj_wFzen94Y4I9EY0oWtTIn2UzM0hTack8ucucvJakZ1lU6DtjcGpHDI/s1600/laptops+5.JPG" alt="ALT"/> <div class="caption"> <a href="#aqui la direccion url de su articulo" target="_blank">Aqui su Texto</a></div> </a></li> <li><a href="http://www.ayudadeblogger.com/" target="_blank"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk4ctFCtlqaLLmMC0a8Vib8PeSKXoMrhdXN9wpBndNZe2ZRT9_Gvo0aLnEbYFqWCPqQSfXVs__jyZH0t93d5UPCiLx1YAMBnRYVwunW1yB_UZJZ967daIMICBy6I4WZnSpZBsHEFq-R28U/s1600/laptops+4.JPG" alt="ALT"/> <div class="caption"> <a href="#aqui la direccion url de su articulo" target="_blank">Aqui su Texto</a></div> </a></li> <li><a href="http://www.ayudadeblogger.com/" target="_blank"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjm-nHDYT9ab2ZEu_2EbiMG5qKsduSAkKd3T7I7wVWyBrBYoafRFtZEizG56zd2fRIWNWoKHJNXbjpE8lGULLpacnUZSjUYWN5hwGPVANr4LQZVMVL9pLoGo2dq_Vhz4eN74ngxc01rFuA/s1600/laptops+3.JPG" alt="ALT"/> <div class="caption"><a href="#aqui la direccion url de su articulo" target="_blank">Aqui su Texto</a></div> </a></li> <li><a href="http://www.ayudadeblogger.com/" target="_blank"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKkLW0w9B3YA2pd4m0DdZVaaIcfehAmIzdxCPPJujXTx3nMdN5zzML2tzv2V4XtT-iHlttYnZDVomgnbkmOp7c4z1KDS9uuh3lWTx-pgEJw8gO388Z5LhDkT59NdRCVHN0SpLl-m7JLCbH/s1600/laptops+2.JPG" alt="ALT"/> <div class="caption"><a href="#aqui la direccion url de su articulo" target="_blank">Aqui su Texto</a></div> </a></li> <li><a href="http://www.ayudadeblogger.com/" target="_blank"> <img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKTupRxoFH8L8vCzlM2eok9ZMjY7g0RjHL9Gn4Qrwp4u6Gw-rTkhyphenhyphens0p0oTG9FEQYhLzSmqRbETWAwUct8CqjJenoRYOXAl9uq6Ukelg2kubF-IHiAJ_4AcnGodvE0sDQxxYOd_aOd5gph/s1600/laptops+1.JPG" alt="ALT"/> <div class="caption"><a href="#aqui la direccion url de su articulo" target="_blank">Aqui su Texto</a></div> </a></li> <li> <a href="http://www.ayudadeblogger.com/" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjtQNnFoK9ehKvoDArctZXsm3hvEPeFywljpBOG_PGupzdx1XcRz7ieu3yt938lqM_n45bEg_jHvP84-seakoG9JKBt4Z5cHnnT6Doj7MSMv-20uZzgzlfdofVEpoUlGIqLCWr3h0mQAV8/s1600/iphone+5.JPG" alt="ALT"/> <div class="caption"><a href="#aqui la direccion url de su articulo" target="_blank">Aqui su Texto</a></div> </a></li> <li><a href="http://www.ayudadeblogger.com/" target="_blank"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7_9QZR-LEy7F9TN0vWGlxiXKOCYRxp6GhbRukT208LPEdR6tbxycjGB8BMJcMJqnKwL46VNj70DgqDCeYsLm3x0T6UbpP1tDCsRLinFfVoDg7vUIyes2NXCefce_bvLlObY7ax57Hw4UF/s1600/iphone+4.JPG" alt="ALT"/> <div class="caption"><a href="#aqui la direccion url de su articulo" target="_blank">Aqui su Texto</a></div> </a></li> <li> <a href="http://www.ayudadeblogger.com/" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGmmtdXyzdJ3s-WUFQIuOM12b4V58YNnxMTY7WrSlJbfmjwlqakBNQhCA22zN4KSWOor1QaOQZVAHbRVGCYsacnJ0qocdnk_TSNrq2TvQOQ0hWLB9xmtLmPEx-47N_hCdy4jlojDQAa7g8/s1600/iphone+3.JPG" alt="ALT"/> <div class="caption"><a href="#aqui la direccion url de su articulo" target="_blank">Aqui su Texto</a></div> </a></li> <li> <a href="http://www.ayudadeblogger.com/" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg4p-85UYLjnAwLbK8El0z2yhqg875JdyRpgwdQeWZoUzCmCNJlKt_glmLE6aASVKMm7wgiIlxPEAkWcAGhB7d67bTbqcK-4fyA4seWeBf8dsxMZkPzGgOmV9k0BtCkdqqp2zLZYlPjq0W/s1600/iphone+2.JPG" alt="ALT"/> <div class="caption"><a href="#aqui la direccion url de su articulo" target="_blank">Aqui su Texto</a></div> </a></li> <li> <a href="http://www.ayudadeblogger.com/" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfzytMgX1R8vqec-IAw06fz7hhSKZ369ibS-8Rxn8k8bw7miujSPLEyCW8B3mPSoryhVeX5q0kvCZDHD6xd5PNtuXmSf-Kecm2pPdycAarNI5rX_Mboj7qgfYZy1aJCSN4rFRkDeSbGJtk/s1600/iphone+1.JPG" alt="ALT"/> <div class="caption"><a href="#aqui la direccion url de su articulo" target="_blank">Aqui su Texto</a></div> </a></li> </ul>

Realiza estos cambios:

Cambia los links que están marcados de color azul, por el link del post que quieras dar a conocer

http://www.ayudadeblogger.com/

Borra los links de están marcados de color verde y remplázalos por el link de tus imágenes, recuerda hacer esto en todos.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg4p-85UYLjnAwLbK8El0z2yhqg875JdyRpgwdQeWZoUzCmCNJlKt_glmLE6aASVKMm7wgiIlxPEAkWcAGhB7d67bTbqcK-4fyA4seWeBf8dsxMZkPzGgOmV9k0BtCkdqqp2zLZYlPjq0W/s1600/iphone+2.JPG

El texto que esta marcado de color rojo tendrás que borrarlos y poner ahí los links de los artículos que quieras dar a conocer.

#aqui la direccion url de su articulo

Y por ultimo borra el texto que esta marcado de color purpura y pon ahí una pequeña descripción de tu artículo destacado.

Aqui su Texto

Eso es todo ahora dale un clic en “Guardar” y ubica tu nuevo widget en la cabecera principal de tu blog o al final de tu blog.

Fácil verdad!

¿Necesitas ayuda?

Cualquier pregunta no duden en hacérmelo saber y de inmediato les responderé

Saludos


Recuerda suscribirte:

Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
¿Te ha resultado útil este artículo, recomiendanos?
Si



Share:

Luis Chávez

Soy el fundador del sitio web Ayudadeblogger.com - Considerado un Pro Blogger profesional, Consultor SEO y desarrollador Web adicto, ejecuto una serie de sitios web desde mi Oficina Quito-Ecuador.

Related post

Comentarios

1 comentario: