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.
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
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.
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/
|
Ahora dale un clic en “Guardar plantilla”
6 Tendras que dar un clic en “Diseño”
7 Abre un gadget “Añadir un gadget”
8 Busca el widget “HTML/Javascript” e
inserta el siguiente código
<!--
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
Gracias por Tus aportaciones, son estupendas
ResponderEliminarUn saludo