Widget Galería de Imágenes para blogger V2
La galería de
fotos le da un montón de colores a un sitio web. Sin embargo, Blogger no tiene ninguna galería de fotos en su currículum
que sea flexible y que pudiera divertir a los visitantes. Por lo tanto, tenemos que hacer uso de algunos scripts
externos para formular un widget galería de imágenes que nos de una forma brillante.
No estábamos 100 por ciento seguro de que íbamos a ser
capaces de formular un widget de Galería de imágenes para blogger, pero al ser
creativos y perseverantes se lo ha logrado, de forma muy sencilla En este caso, hemos
utilizado el poder de jQuery que ha dado algunos efectos de transición
extraordinarias al widget de galería. Los que
están en busca de un widget que puede contener sus imágenes juntas, entonces Ayudadeblogger.com
es el sitio perfecto para hacerlo con unos simples pasos, hoy compartiré con
ustedes un widget Galería de fotos para Blogger.
¿Por qué utilizar un widget galería de imágenes?
Los lectores se cansan después de leer
los artículos. Ellos necesitan un poco de distracción ¿por qué no integrar un
widget que ofreciera unas fotos espectaculares, para que sus usuarios vuelen su
imaginación, y sacarles una sonrisa. Por otra parte, los bloggers pueden
utilizar este widget galería de imágenes como mejor les parezca. Es como tener
una pequeña caja, donde una persona puede compartir sus instantáneas personales
o algo relacionado con su interés.
¿Dónde podré ubicar mi galería de imágenes?
Todo depende de ti, en el lugar que
desea ver este widget. Sin embargo, le recomendamos que se use en la barra
lateral, donde la gente pueda verla fácilmente. Por otro lado, una persona
también puede adjuntarla a su artículo para apoyar algunas imágenes extraordinarias.
A continuación mire su demostración en mi blog de demos, el widget de imágenes está
ubicado en el sidebar y tiene como nombre “Galería de Imágenes Blogger”.
Características de la Galería de Imágenes
para blogger
Hemos hecho nuestro mejor esfuerzo para
proporcionar este widget con algunas de las características más extraordinarias.
Puede añadir imágenes ilimitadas a la
galería sin restricción alguna
Rotación de imágenes de forma automática
con la ayuda de un gran alcance con JavaScript.
Se tiene imágenes pequeñas a través del
cual los usuarios pueden seleccionar las mejores fotos.
Dispone de algunas espléndidas transiciones
de imágenes integradas (más de 4 transiciones diferentes).
Cómo instalar la Galería de fotos en
nuestro blog de Blogger
He tratado de hacer este tutorial lo más
sencillo posible. El tutorial consta de 3 pasos, por lo que no se demoraran más
de 10 minutos en completarlo todo. Siga las siguientes instrucciones.
1 Ir a blogger
2 Da un clic en “Plantilla”
3 Luego 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 las siguientes líneas de código justo
arriba del código que encontraste
/*-- Widget galeria de imagenes
BLOGGER start ayudadeblogger.com---*/
/* the container */
.allinone_thumbnailsBanner {
position:relative;
}
.allinone_thumbnailsBanner img {
position:absolute;
top:0px;
left:0px;
max-width:none;
max-height:none;
}
.allinone_thumbnailsBanner_list {
margin:0;
padding:0;
list-style:none;
display:none;
}
.allinone_thumbnailsBanner .stripe {
position:absolute;
display:block;
height:100%;
z-index:1;
overflow:hidden;
}
.allinone_thumbnailsBanner .block {
position:absolute;
display:block;
z-index:1;
overflow:hidden;
}
.mycanvas {
position:absolute;
top:8px;
right:10px;
z-index:10;
}
/**SKIN***/
.allinone_thumbnailsBanner.cool
.bannerControls {
position:absolute;
left:0;
top:0;
z-index:2;
width:100%;
}
.allinone_thumbnailsBanner.cool
.leftNav {
position:absolute;
left:0px;
top:50%;
/*margin-top:-20px; height/2 */
width:22px;
height:75px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHmnI0BaqI5T0wOnNpYcyrbh4fuCGMYXupAebM8P2adRVd2Yk7u1RSMaIJncU1tdaFDw4PZBWGeUKytevrvMMsdswusKnsd4E-ikuxZwjb9pWXdfMxDaO4DeyvfhUQSEQdLkezbo2mLOo/s1600/leftNavOFF.png)
0 0 no-repeat;
cursor:
pointer;
}
.allinone_thumbnailsBanner.cool
.leftNav:hover {
background:url(http://www.responsivejqueryslider.com/skins/cool/leftNavON.png)
0 0 no-repeat;
}
.allinone_thumbnailsBanner.cool
.rightNav {
position:absolute;
right:0px;
top:50%;
/*margin-top:-20px; height/2 */
width:22px;
height:75px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7W-DHE7vJNR5JmhdOtDwlyjdH7hRFNFU4UDG6s0fXJhXny35h-ujWyB0ipoNtwmHfO1XDYJUtNxb0byR8FC93pAIrzqzDQ0dtRRsi7lFhmZrfIyEU8svRPEbC0Vcg2jFPKcaeRqWs6lw/s1600/rightNavOFF.png)
0 0 no-repeat;
cursor:
pointer;
}
.allinone_thumbnailsBanner.cool
.rightNav:hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih1RJk_Vajr5YIYerKyex1RIn8qa-nTl_-Qocopw5t8w3LBONbBx951Vg17M0hvyEnmvyHxE1zeu0aY4a1y3Y5qu7Gu4_Rhs9mUBEG2PmRkT7C6l-aKfXX3LRsJz7D5YL-G0BbJE6bIKE/s1600/rightNavON.png)
0 0 no-repeat;
}
.allinone_thumbnailsBanner.cool
.thumbsHolderWrapper {
position:absolute;
background:#000000;
border-top:1px
solid #e66b19;
height:121px;
width:100%;
overflow:hidden;
z-index:10;
}
.allinone_thumbnailsBanner.cool
.thumbsHolderVisibleWrapper {
position:absolute;
width:100%;
height:121px;
overflow:hidden;
}
.allinone_thumbnailsBanner.cool
.thumbsHolder {
position:absolute;
}
.allinone_thumbnailsBanner.cool
.thumbsHolder_ThumbOFF {
float:left;
display:block;
width:110px;
height:65px;
cursor:
pointer;
}
.allinone_thumbnailsBanner.cool
.thumbsHolder_ThumbOFF img {
position:relative;
}
.allinone_thumbnailsBanner.cool
.thumbsHolder_ThumbON {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVD3GS3LOTm4omJvS3-iC5xmygWJOtpDeHI43jaIxXraf_bVVPcUSnJ-Yt0qOYr8RBqTlm90u6-zndHiGHx8SmT10ZNBi6ySh0OtupoZRVShdz7IRrkxGYxoxlXz6bIr6SEaQigo5DgVA/s1600/carouselLeftNavOn.png)
center 0px no-repeat;
}
.allinone_thumbnailsBanner.cool
.carouselLeftNav {
position:absolute;
width:29px;
height:120px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVD3GS3LOTm4omJvS3-iC5xmygWJOtpDeHI43jaIxXraf_bVVPcUSnJ-Yt0qOYr8RBqTlm90u6-zndHiGHx8SmT10ZNBi6ySh0OtupoZRVShdz7IRrkxGYxoxlXz6bIr6SEaQigo5DgVA/s1600/carouselLeftNavOn.png)
0 0 no-repeat;
cursor:
pointer;
}
.allinone_thumbnailsBanner.cool
.carouselLeftNav:hover {
background:url(http://www.responsivejqueryslider.com/skins/cool/carouselLeftNavOn.png)
0 0 no-repeat;
}
.allinone_thumbnailsBanner.cool
.carouselLeftNavDisabled {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFB264hWl1lAZSL_SS-WXKu2p7Qlm2frQ9CXlwK6wod4IRbUJ-hwfL9CE7f59V9zyesd7D0pDChcK_DpKnqeyPI7zpnsoxbI44ODo1IpSdoKH50mgQZsnpMMURzS9c4kk6r6BA4Kpme8A/s1600/carouselLeftNavDisable.png)
0 0 no-repeat;
cursor:default;
}
.allinone_thumbnailsBanner.cool
.carouselLeftNavDisabled:hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFB264hWl1lAZSL_SS-WXKu2p7Qlm2frQ9CXlwK6wod4IRbUJ-hwfL9CE7f59V9zyesd7D0pDChcK_DpKnqeyPI7zpnsoxbI44ODo1IpSdoKH50mgQZsnpMMURzS9c4kk6r6BA4Kpme8A/s1600/carouselLeftNavDisable.png)
0 0 no-repeat;
}
.allinone_thumbnailsBanner.cool
.carouselRightNav {
position:absolute;
width:29px;
height:120px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjulH3STX_mzNfWUg2a231WvQoef53xXnS2NDr3ZQvPPF04JDtgSTXCn50q7hT1HJPJFi9OjyQO3CCGtk7gtBfUxlb1VSZdkcTlv09RJ2kWgkbueiDtJR0oLzKapxj4foqj_ndupQiG27A/s1600/carouselRightNavOn.png)
0 0 no-repeat;
cursor:
pointer;
}
.allinone_thumbnailsBanner.cool
.carouselRightNav:hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjulH3STX_mzNfWUg2a231WvQoef53xXnS2NDr3ZQvPPF04JDtgSTXCn50q7hT1HJPJFi9OjyQO3CCGtk7gtBfUxlb1VSZdkcTlv09RJ2kWgkbueiDtJR0oLzKapxj4foqj_ndupQiG27A/s1600/carouselRightNavOn.png)
0 0 no-repeat;
}
.allinone_thumbnailsBanner.cool
.carouselRightNavDisabled {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifPxUMMDRH6WHCBNowChA8yOGhlwtHI_CHZ0FT3RPk7MYTe9TUyzqqbzclDTK2jRCZRuEMxHNE_Dr5B3_DTjKohhHdVkKiVIaETUO7l1i0fao-E2epAQ25RLc73E7F7OUPs7IaD7XnA7w/s1600/carouselRightNavDisable.png)
0 0 no-repeat;
cursor:default;
}
.allinone_thumbnailsBanner.cool
.carouselRightNavDisabled:hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifPxUMMDRH6WHCBNowChA8yOGhlwtHI_CHZ0FT3RPk7MYTe9TUyzqqbzclDTK2jRCZRuEMxHNE_Dr5B3_DTjKohhHdVkKiVIaETUO7l1i0fao-E2epAQ25RLc73E7F7OUPs7IaD7XnA7w/s1600/carouselRightNavDisable.png)
0 0 no-repeat;
}
|
5 Busca este código
</head>
|
Inserta el siguiente código Javascript
arriba del código que encontraste
<script
src='http://yourjavascript.com/13041153828/jquery-min.js'
type='text/javascript'/>
<script
src='http://yourjavascript.com/11023215588/jquery-ui-1-8-16-custom-min.js'/>
<script charset='utf-8'
src='http://yourjavascript.com/18831323441/allinone-thumbnailsbanner.js'
type='text/javascript'/>
<script charset='utf-8'
src='http://yourjavascript.com/18318318521/reflection.js' type='text/javascript'/>
<script>
$(function()
{
$('#allinone_thumbnailsBanner_sidebar3').allinone_thumbnailsBanner({
skin:
'cool',
numberOfThumbsPerScreen:2,
numberOfStripes:4,
numberOfRows:5,
numberOfColumns:5,
showOnInitNavArrows:false,
width:
295,
height:
200
});
});
</script>
|
Nota: Recuerda si ya utilizas un código script
de slideshow para tu blog de blogger, ya no tendrás que insertar solo este código
http://yourjavascript.com/13041153828/jquery-min.js y si no utilizas ningún código
script de slideshow para tu blog de blogger inserta todo el código tal como está.
6 Ahora es momento de dar un clic en “Guardar
plantilla”
7 Da un clic en “Diseño”
8 Abre un gadget “Añadir un gadget”
9 Busca el widget que dice “HTML/Javascript”,
ábrelo e inserta el siguiente código en su interior
<div id="latest-newsz"
class="float-block">
<div
id="allinone_thumbnailsBanner_sidebar3">
<ul
class="allinone_thumbnailsBanner_list">
<!-- IMAGES start ayudadeblogger.com-->
<li data-bottom-thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOkaPRgV8K59U2jNP6eEKLEvfB3g2SvpWQwrvMRl_A9o6gtAQrscp_COGvQpeH-F8iC6a-r9GaMTY0C5Uk4u4RTufM1OdHY9pYgRBPOXe-98nf52_LMLD3KdaGbUaWAL5XUoXDrc9JDNRY/s1600/ayudadeblogger+1.1.JPG"><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibyd2ZLV9peLu6hE3urMCYvVOjLQIpClkRbSvxrp0Dqlq_leOrHcZ3FejF8bHSOGE5Rb6gQ9uOpQw0BF22dg4bOrhPlzCb8CvRp7e-8gu3dO3szXjkQ4_ZfOxUy4pobIw-H0Y4cfSsuLQr/s1600/ayudadeblogger+1.JPG"
alt="" /></li>
<li
data-bottom-thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmor2tk_r-g2nxKhWGcMxISvLPdvObmwPkwfgw7ukwW-I2AqkBtz05cOa1SnXcG3AMhz6C4_eTKECxA0dwDylWF5Crsxl6iykW4OvZvfInI0seKp2azfyiqie9c8RYR132_7w1ADrWNO77/s1600/ayudadeblogger+2.2.JPG"><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF4lUBVqbV0PhyDlJKWMVIdcKxrYmaqX45qToFZrql8RkTjJHX6ZRjcZvev_HKQM9UVrakx8WfKFg1w5d25XfRYHfZN1P-7avmJu5HEBhUbvanHT2rxB_FMHQbjIwDe98kaogYCWtcr1oE/s1600/ayudadeblogger+2.JPG"
alt="" /></li>
<li
data-bottom-thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4MIeT6AZy09Hv9Ic8PXMmZ8flYZDNUbxJpVxMd33MQUKeqc97ulCg6jHUQOTM9vtds9BHgQWr9XWM9py3iNGPHxUYPr_EqaCWDQ0HOzff3v_0hjN-aVLwgYKpd9okw_YGX0vi65x81xra/s1600/ayudadeblogger+3.3.JPG"><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP9RfecMP5KZnY7x902yUNSHYVjbe3KRtE6Y7t552BURSvYZ-hnCz1w-GVCrsUJsKsQYESAcqVGTzGJImVaWyuqT0V9XBJyalt8vXls9v-iqDJvSWsGftIEsWKEyeNJECQoLlGhvR9oqWp/s1600/ayudadeblogger+3.JPG"
alt="" /></li>
<li
data-bottom-thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU_5mzxWsAhLI9Fk_eV7fQ41rilEVVyGzHjsGS9hlYR2_r7p0M4UK5e5pfaFTA-n7tSvpjONb24wG9jVQvM_u6_shNX5b4OTn9oboNqXghOipu8JvH364mSvTdKu5lghh4PqP_OWnK0RCD/s1600/ayudadeblogger+7.7.JPG"><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_-9YAH36rYd6j98HjNFGBOFTdhaq8b7GQBDTrkAxItGlDIA8mHTfBGg7oVz9tTgPhpPyTXL_MobifLmuTGAuU9sOSixMhbpQ-0rw9D7SBofuJuJEKEM3XOXSUdm6L8k37bGXNOlK_zbW_/s1600/ayudadeblogger+7.JPG"
alt="" /></li>
<li
data-bottom-thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk_rqqcKcmjWuEOkV2v4dbsVvxMN4EvgtTJ3wjKooBNa1P2i8E-0KPdkVTcN3wttfXvjLNsTc0Qa7ejICkxu7hXktCnKtEEUF8pEZtmxkleeuULdhCnLoFzH-HvykkSWJLVEPcqPAHq9jp/s1600/ayudadeblogger+4.4.JPG"
><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw_yuvbUF_rBW-68AXf9UNUVl2_qF8La0R6A4ChOyvHVLNFzu1F2BnrvTbX_ZQeAgQvYD2MKdiE7R3VqyKvvW2Dn9aDNVhX1RhUQayKL2Zy6OR859duwi5OB1zFkENwe0o35kcqJ2H2n5B/s1600/ayudadeblogger+4.JPG"
alt="" /></li>
<li
data-bottom-thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAKnu81g4lAlUpDIi8RgHgUCzZniCeD9MMSZvW9ufSOT4tbnhWPP0xLFFInDhFNEn-NEElbDDbN_Osc1SUIRXYs8C1G1n2UmpxbAfSGksR5q2C82BMM_gHuGc1Wf_LgA8pZs2S1A-12Ryy/s1600/ayudadeblogger+5.5.JPG"><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXxe-Se0WaSZJ3P_yAB7y1YKSuqyl3-rrqQfTNk5e0SRcpKXgPjuKil4pDrNxWm9AKQAIrDMF6Tbig4CjXHmd-8tVgjRNDu-zfLCezT1wpdIik2gXHCSm73DjBtPcxdrgrWPIS6-snw8bn/s1600/ayudadeblogger+5.JPG"
alt="" /></li>
<li
data-bottom-thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidoIK0KcDWj-oe8tMcFYc4I0kNohYQ7l7-mqb0fOKctnQVJu80REOGwtWIuWOOPy3-PQshe3-bZBuUQZQSJSKDDr8PqJA1Znk6GZBxlQe5ybzU80ifsnBX5BNV_i-rKc2agtFz8ADo1QLY/s1600/ayudadeblogger+6.6.JPG"><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc9Agg48JEahyFP10W-7yo1OxtYHKplQogbepZ3Ll1YXdHjg0SrLnftF3d9OxqqChV0A8sVzVEUuNNQZC_LQOLPu7nQ_e_4WHFUIC5Ko3ikD0ibP_1OolElDbiTEwSXHh541nNTKpzi1vv/s1600/ayudadeblogger+6.JPG"
alt="" /></li>
<li data-bottom-thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU_5mzxWsAhLI9Fk_eV7fQ41rilEVVyGzHjsGS9hlYR2_r7p0M4UK5e5pfaFTA-n7tSvpjONb24wG9jVQvM_u6_shNX5b4OTn9oboNqXghOipu8JvH364mSvTdKu5lghh4PqP_OWnK0RCD/s1600/ayudadeblogger+7.7.JPG"><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_-9YAH36rYd6j98HjNFGBOFTdhaq8b7GQBDTrkAxItGlDIA8mHTfBGg7oVz9tTgPhpPyTXL_MobifLmuTGAuU9sOSixMhbpQ-0rw9D7SBofuJuJEKEM3XOXSUdm6L8k37bGXNOlK_zbW_/s1600/ayudadeblogger+7.JPG"
alt="" /></li>
<li data-bottom-thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOkaPRgV8K59U2jNP6eEKLEvfB3g2SvpWQwrvMRl_A9o6gtAQrscp_COGvQpeH-F8iC6a-r9GaMTY0C5Uk4u4RTufM1OdHY9pYgRBPOXe-98nf52_LMLD3KdaGbUaWAL5XUoXDrc9JDNRY/s1600/ayudadeblogger+1.1.JPG"><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibyd2ZLV9peLu6hE3urMCYvVOjLQIpClkRbSvxrp0Dqlq_leOrHcZ3FejF8bHSOGE5Rb6gQ9uOpQw0BF22dg4bOrhPlzCb8CvRp7e-8gu3dO3szXjkQ4_ZfOxUy4pobIw-H0Y4cfSsuLQr/s1600/ayudadeblogger+1.JPG"
alt="" /></li>
<li
data-bottom-thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmor2tk_r-g2nxKhWGcMxISvLPdvObmwPkwfgw7ukwW-I2AqkBtz05cOa1SnXcG3AMhz6C4_eTKECxA0dwDylWF5Crsxl6iykW4OvZvfInI0seKp2azfyiqie9c8RYR132_7w1ADrWNO77/s1600/ayudadeblogger+2.2.JPG"><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF4lUBVqbV0PhyDlJKWMVIdcKxrYmaqX45qToFZrql8RkTjJHX6ZRjcZvev_HKQM9UVrakx8WfKFg1w5d25XfRYHfZN1P-7avmJu5HEBhUbvanHT2rxB_FMHQbjIwDe98kaogYCWtcr1oE/s1600/ayudadeblogger+2.JPG"
alt="" /></li>
</ul>
</div>
</div>
<br /> <br /> <br /> <br /> <br /> <br /> <br />
|
Realiza estos cambios:
He marcado de dos diferentes colores, en
los cuales ustedes tendrán que hacer sus diferentes cambios e insertar las URLs
correspondientes de sus imágenes
Las URLs que están marcadas de color
azul, son las imágenes pequeñas, tienen que insertar imágenes que tengan un diámetro
de 110x65 pixeles.
Además, las URLs que están marcadas de
color rojo, son las imágenes grandes, tienen que insertar la URL de su imagen
correspondiente con una dimensión de 295x200 pixeles.
Eso es todo, una vez hecho esto, dale un
clic en “Guardar” y ubica tu nuevo widget galería de imágenes en tu sidebar, o
en un post.
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
6 comentarios: