El widget que os 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 te servirá para mostrar tus 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 podreis ayudarles a vuestros 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 teneis seguir las instrucciones de configuración
y lo podrás utilizar en tu blog de blogger en la cabecera principal o al final de su blog.
Bloc Demo:
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 mira 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/AVvXsEjNqLVM2R_kZogByGUtwoAoRuFc679rrkhB5iO0Wo-6Qkr9m-_fHdc1tAZX2UHOYZESA0e2sZAGA-HXHNHWuVmL6ou344txXNICQSrX6CYfIUdAUpAySzE7EO22d_wiLkBZle0OJ6LiayBD/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/AVvXsEiLlGQ6yNe-ee9N8XrU-6DUaBWP8TTyb5E-TZiKwlXNdVRbwM_A-QcZQqiHut8tz85PTSLfSBaxZaqI-9FyN1RprjbTUAFDndCjDl2yiaUnP-DLd5Di9NNu6_x5eJ-hvLOokbw6iYSnr9pA/s1600/shadow.png) repeat-Y; position:absolute; right:0px; width:25px; height:100%; } .mblaccordion .preloader { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg26tNGHImIHPHMq0cnWtBkdxLbn9DaqlppNftP-KIzgOAw6a6yBL3Mpw7OCqVBelqS_egt5OACEEf6mlIHm7tLyYlTqedo7MWxkChB1zWeGW2OsGoZ7FJ9p27ns_MpfhYlLFBj19tBqUaW/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/AVvXsEjcjQG8CDUw7GX434KYisEIDKyQ7rB8k8fw6JmrkjgZ_2-442TLt5_9tLqL8y5-ahw2O9Ek-E9DfeWnvOikQ6i3zEbFCF9Hb2u_I8L4rd0JL0k-uSyk2j_MWzVNeS0AEusjdQC1JLRkfd93/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($){ $('.mblaccordion').gridAccordion({width:940, height:680, columns:5, distance:2, closedPanelWidth:10, closedPanelHeight:10, alignType:'centerCenter', 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”
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/AVvXsEhQqgMPG-Fz_jL-RDWmSrqmOwt-LzvusNL6EUHihKYokepQatWbJHsigN00nsGK-nx0Cvigbu5NJhU1bjqV086rcURd08JGB_wx6ATpC2JxAeJJpWpPcQfVsuRf9PKmudKP3m-LdXRYZ-WO/s1600/laptops+1.JPG" alt="ALT"/> <div class="caption"><a href="#aqui la direccion url de su articulo/" 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/AVvXsEikMOVO-nY-SVABR_TWPOFXojrWS94vsRCcLtBxVoI5xA1phyphenhyphenoWVy40vwuDxZRIMqrpRLfPfn7jGMHyTqbeMBcjpd7ha9TOx0eQYAcef5TCvLgA9kr8pt217duhPbGiY7LOmvevmG1fKEaw/s1600/laptops+2.JPG" alt="ALT"/> <div class="caption"><a href="#aqui la direccion url de su articulo/" 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/AVvXsEiagtY-WOQaBQuZP0cUnO7GBHlrOKn69QHbVEvaFL_0aR6WzgBe5EF64JUP21wwKn5xX7DD1EZALHolL_Y2LCnMoJRsILCx82fPo5JOw3EFiBldYB16Hu3q_Q10PyoHsOtbC62KZsTd7yQA/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/AVvXsEhEAYEY5oCEqzSS_Usspr5-GSN1hwDR88TODSGhaiK50-KczmtRAf23bMcxgv2dluEJEZkmEo7ybfUl4gnhU81b65_K7HpVjc0Dcb_WLHib_rj7xLyq9JyUZIYMFASiI1xgeDaDSBit42Ha/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/AVvXsEgg52u_MvNAdI-c62QqRP-9rpLYWXXHPg5TdN-xK9K6qKUxfoiKORjtlrHJ_CXl5ZDT-7-aLka0CgIRPs2_P66ltBKTQ_vYEbyZgALjwrey6hEIDAVNQQ-Cn2d1tNmSdNk4nATr73G8Wolb/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/AVvXsEi9jyCzzNSWovfmYM_UusR6dgFGbznaDVCJvLGyGA-fLi-hHlpKBgQftCT4XHFqXa81SAWtSn-uY_8alpUZ92lLSt1_Mfa7ZOs7EbjYj5cQj69NB0tFohwIJ4PbDBK1w3KyCSs1q8WPbqYI/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/AVvXsEgxcmXmAt0BwB7BsSNlxMjgtk8q9t6XyPZAm9Uz1IyFDmOKiMRXMzErLILYqQ0KL4QPk_haR2QSfu2lsb3gBlRr_114f16UxIK32cUysqQ8DQMkaJ5CFUIqlgBXtW8XRmk5UiitHmlmG3C8/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/AVvXsEhqkWTVGQWiRTQCMLbw3guN20ujDYoHyFd5uQGC9czprbiKaEgt2nzU3nox4Jof324oF3v55ZtEE1fXG-7vpLf3GOGZhcSx4s8TfmLGT3IvhzZJV5bkFlfHrq8ycaPz5NhnjIz-6eQ7sKHL/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/AVvXsEgfyYxAE87d3kMsIDnGuR8m2rcRUYQa7shTDNB0oWQH-xmAJMo6NvbuEmkYtPHfifiHeVAzUWFNq9WmGv5XI1XPjnm4lrFapk15fUd8gyhs5FeGGLwkRTxwqG92iRhrbNVY7QA1mSRusTb8/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/AVvXsEhfE_XZsF90iyqrrC0OkALEOn2H8PKfLffEwJuLz8qYhHo-wx6jQ5FTPeza0Kkvhb7cEfAaexQOG2HPdMHNhHGqq6STIpElI4D6ys45V8wY98MFvGO9MRfAzglWAK6pkExtnklPxS_cOzBG/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/AVvXsEgg52u_MvNAdI-c62QqRP-9rpLYWXXHPg5TdN-xK9K6qKUxfoiKORjtlrHJ_CXl5ZDT-7-aLka0CgIRPs2_P66ltBKTQ_vYEbyZgALjwrey6hEIDAVNQQ-Cn2d1tNmSdNk4nATr73G8Wolb/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/AVvXsEhEAYEY5oCEqzSS_Usspr5-GSN1hwDR88TODSGhaiK50-KczmtRAf23bMcxgv2dluEJEZkmEo7ybfUl4gnhU81b65_K7HpVjc0Dcb_WLHib_rj7xLyq9JyUZIYMFASiI1xgeDaDSBit42Ha/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/AVvXsEiagtY-WOQaBQuZP0cUnO7GBHlrOKn69QHbVEvaFL_0aR6WzgBe5EF64JUP21wwKn5xX7DD1EZALHolL_Y2LCnMoJRsILCx82fPo5JOw3EFiBldYB16Hu3q_Q10PyoHsOtbC62KZsTd7yQA/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/AVvXsEikMOVO-nY-SVABR_TWPOFXojrWS94vsRCcLtBxVoI5xA1phyphenhyphenoWVy40vwuDxZRIMqrpRLfPfn7jGMHyTqbeMBcjpd7ha9TOx0eQYAcef5TCvLgA9kr8pt217duhPbGiY7LOmvevmG1fKEaw/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/AVvXsEhQqgMPG-Fz_jL-RDWmSrqmOwt-LzvusNL6EUHihKYokepQatWbJHsigN00nsGK-nx0Cvigbu5NJhU1bjqV086rcURd08JGB_wx6ATpC2JxAeJJpWpPcQfVsuRf9PKmudKP3m-LdXRYZ-WO/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/AVvXsEhfE_XZsF90iyqrrC0OkALEOn2H8PKfLffEwJuLz8qYhHo-wx6jQ5FTPeza0Kkvhb7cEfAaexQOG2HPdMHNhHGqq6STIpElI4D6ys45V8wY98MFvGO9MRfAzglWAK6pkExtnklPxS_cOzBG/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/AVvXsEgfyYxAE87d3kMsIDnGuR8m2rcRUYQa7shTDNB0oWQH-xmAJMo6NvbuEmkYtPHfifiHeVAzUWFNq9WmGv5XI1XPjnm4lrFapk15fUd8gyhs5FeGGLwkRTxwqG92iRhrbNVY7QA1mSRusTb8/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/AVvXsEhqkWTVGQWiRTQCMLbw3guN20ujDYoHyFd5uQGC9czprbiKaEgt2nzU3nox4Jof324oF3v55ZtEE1fXG-7vpLf3GOGZhcSx4s8TfmLGT3IvhzZJV5bkFlfHrq8ycaPz5NhnjIz-6eQ7sKHL/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/AVvXsEgxcmXmAt0BwB7BsSNlxMjgtk8q9t6XyPZAm9Uz1IyFDmOKiMRXMzErLILYqQ0KL4QPk_haR2QSfu2lsb3gBlRr_114f16UxIK32cUysqQ8DQMkaJ5CFUIqlgBXtW8XRmk5UiitHmlmG3C8/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/AVvXsEi9jyCzzNSWovfmYM_UusR6dgFGbznaDVCJvLGyGA-fLi-hHlpKBgQftCT4XHFqXa81SAWtSn-uY_8alpUZ92lLSt1_Mfa7ZOs7EbjYj5cQj69NB0tFohwIJ4PbDBK1w3KyCSs1q8WPbqYI/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/AVvXsEgxcmXmAt0BwB7BsSNlxMjgtk8q9t6XyPZAm9Uz1IyFDmOKiMRXMzErLILYqQ0KL4QPk_haR2QSfu2lsb3gBlRr_114f16UxIK32cUysqQ8DQMkaJ5CFUIqlgBXtW8XRmk5UiitHmlmG3C8/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.
Fuente; ayudadeblogger
Publicado por;
0 comentarios: