FOTOMILKS

Slideshow para blogger blogspot con etiquetas

2014-11-01T06:36:00.004-07:00

Slideshow para blogger blogspot con etiquetas

http://www.ayudadeblogger.com/2013/02/slideshow-para-blogger-blogspot-con-etiquetas.html

Es el momento de publicar un nuevo y espectacular slideshow para uso exclusive de blogger. Este slideshow mostrara solo la etiqueta que quiera mostrar en su blog de blogger. La instalación de este Slideshow para blogger es muy fácil de realizarlo solo tienen que seguir las instrucciones que les dejo en este post.

También publique algunos slideshow, de los cuales te puedo gustar, a continuación les dejo los enlaces de mis anteriores publicaciones:

Bueno ahora pueden ver el slideshow en mi pagina de demos

Luego deber su demostración nos dirigimos a trabajar.

1 Ir a Blogger

2 Da un clic en “Plantilla”, luego en “Editar HTML”

3 Marca la casilla que se encuentra en la parte superior izquierda “Expandir plantilla de artilugios”

4 Presiona “F3” y busca este código ]]></b:skin> y encima de el inserta las siguientes líneas

/* Slide Content by www.ayudadeblogger.com

----------------------------------------------- */

.slide-wrapper {padding:0 auto;margin:0 auto;width:auto;float: left;

word-wrap: break-word; overflow: hidden;}

.slide {color: #666666;line-height: 1.3em;}

.slide ul {list-style:none;margin:0 0 0;padding:0 0 0;}

.slide li {margin:0;padding-top:0;

padding-right:0;padding-bottom:.25em;

padding-left:0px;text-indent:0px;line-height:1.3em;}

.slide .widget {margin:0px 0px 6px 0px;}

5 Busca este código </header> y debajo de el inserta el siguiente código

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<b:section class='slide' id='slide' preferred='yes'/>

</div>

</b:if>

Ahora dale un clic en “Guardar plantilla” y dirígete a diseño, en el cual vas a encontrar un nuevo gadget, mira la imagen que te dejo a continuación para que lo puedas identificar.

1 Luego de que hayas visto que si te aparece un nuevo gadget, dirígete otra vez a “Plantilla”, luego a “Editar HTML” y no te olvides de dar un clic en la parte superior izquierda donde dice “Expandir casilla de artilugios”, y presiona “F3” para que localices este código ]]></b:skin>, arriba de el inserta el siguiente código.

/* Slide Content by www.ayudadeblogger.com

----------------------------------------------- */

.shadow{width:950px; height:39px; background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQCyqkCj7TEGCg_AON-3vHCBZud_0MKPxo8ZLqPt8kjDTdmpEWO_e_CXFt6ngMae9GtwdA9cfoxl5bfiZSPj-Xb0UXMLD6A5TjOh_uxyqnZ6cYSAlgrn9q-BZjMV5xjJ7km41yQJD_luHv/s1600/shadow1.png) no-repeat center;margin:0 auto}

#featured-slider{position:relative;overflow:hidden;width:950px;height:325px;background:#fcfcfc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbddF01O3Y0-Lrv5h4UCJtYOsUYkLMJuW3s2HS8xCowph7H5lFCtcZ725ukSckTedbWNkE3Wr9txmKin_EAzNf8VNCo6Yu8UPuXBECXz1cTzKOHm_SfOtLpRhSVeGMTnx_bITARxlKIyE_/s1600/slider-bg.png) repeat-x top;margin:0 auto;padding:0 auto}

#featured-slider .contentdiv{visibility:hidden;position:absolute;left:20px;top:10px;z-index:1;width:305px}

#featured-slider .contentdiv img{background:#fff;padding:2px;border:1px solid #ccc;width:297px;height:297px;overflow:hidden}

#featured-slider .sliderPostPhoto{position:relative;height:305px;width:305px;overflow:hidden}

#featured-slider .sliderPostInfo{position:absolute;top:0;left:345px;color:#a1a1a1;background:url();height:190px;width:540px;padding:5px 0 0}

#featured-slider .sliderPostInfo p{color:#0a0a0a;line-height:1.6em;font-size:14px;padding-top:1px}

#featured-slider .featuredPostMeta a{color:#a1a1a1}

#featured-slider .order a {display:block; width:98px; height:40px; bottom:14px; left:0px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm1jhYIuu63b6YTNIr7W-3B-OTHZKBNeS8u3O8xbxjs9uJIKYydDfYyFVSqvmcgR30MwAYkGkBWswHCHloBYKnVWV9YPGGBzdzKO5sAQ1XKi93Ozmq4fxRUsEsV-B8laF3kIojh9Vimxoh/s1600/ayuda+de+blogger.JPG) no-repeat 0 0; position:absolute; font-size:15px; line-height:13px; text-transform:uppercase; text-decoration:none; font-family: 'Open Sans', sans-serif; color:#fff; font-weight:700; padding:11px 0 0 6px;}

#featured-slider .order a:hover{ color:#515151;}

.featuredTitle{font:bold 24px Tahoma;color:#719429;line-height:1cm}

.featuredTitle a{color:#719429}

.featuredTitle a:hover{color:#0a0a0a}

#paginate-featured-slider{position:absolute;right:0;top:250px;z-index:1;width:595px;height:80px;overflow:hidden}

#paginate-featured-slider ul{width:595px;list-style:none}

#paginate-featured-slider .featured_thumb{float:left;margin-right:15px;width:65px;height:65px;padding:0}

#paginate-featured-slider .featured_thumb:hover{opacity:0.7}

Te recuerdo que podrás cambiar los números que están marcados de color rojo por el número que tú quieras, este sirve para que tu slideshow aumente o se reduzca en su anchura.

width:950px

Al igual en el número que esta marcado de color azul, lo podrás cambiar por el número que tú quieras, este sirve para aumentar o disminuir la altura del slideshow

height:325px

2 Ahora busca este código </head> y arriba de el inserta las siguientes líneas de código.

//<![CDATA[

imgr = new Array();

imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaWe-uE_bQyjz5xV7HJpkAEWwgMDoPo6DskQuvZK9cX6QFLkghGr9TmFLEQen2qpxD56Et_j9Ns0RCAUgThvLHUmWCYigFdQCWVUXjqFBWHCSXb29kshk5x_xEs-3yvBXmc3bZZ9A42Ys/s1600/no+image.jpg";

showRandomImg = true;

aBold = true;

summaryPost = 400;

summaryTitle = 25;

numposts2 = 7;

function removeHtmlTag(strx,chop){

var s = strx.split("<");

for(var i=0;i<s.length;i++){

if(s[i].indexOf(">")!=-1){

s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);

}

s = s.join("");

s = s.substring(0,chop-1);

return s;

}

function showrecentposts1(json) {

j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;

img = new Array();

for (var i = 0; i < numposts2 ; i++) {

var entry = json.feed.entry[i];

var posttitle = entry.title.$t;

var pcm;

var posturl;

if (i == json.feed.entry.length) break;

for (var k = 0; k < entry.link.length; k++) {

if (entry.link[k].rel == 'alternate') {

posturl = entry.link[k].href;

break;

}

for (var k = 0; k < entry.link.length; k++) {

if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {

pcm = entry.link[k].title.split(" ")[0];

break;

}

if ("content" in entry) {

var postcontent = entry.content.$t;}

else

if ("summary" in entry) {

var postcontent = entry.summary.$t;}

else var postcontent = "";

postdate = entry.published.$t;

if(j>imgr.length-1) j=0;

img[i] = imgr[j];

s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);

if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';

var month = [1,2,3,4,5,6,7,8,9,10,11,12];

var month2 = ["Ene","Feb","Mar","Abr","May","Jun","Jul","Ago","Sep","Oct","Nov","Dic"];

var day = postdate.split("-")[2].substring(0,2);

var m = postdate.split("-")[1];

var y = postdate.split("-")[0];

for(var u2=0;u2<month.length;u2++){

if(parseInt(m)==month[u2]) {

m = month2[u2] ; break;

}

var daystr = day+ ' ' + m + ' ' + y ;

var trtd = '<div class="contentdiv"><div class="sliderPostPhoto"><a class="crop-foto" href="'+posturl+'"><img width="200" height="150" class="alignright" src="'+img[i]+'"/></a></div><div class="sliderPostInfo"><div class="featuredTitle"><a href="'+posturl+'">'+posttitle+'</a></div><span class="featuredPostMeta">'+daystr+' | <a href="'+posturl+'">'+pcm+' Comments</a></span><p>'+removeHtmlTag(postcontent,summaryPost)+'... <a href="'+posturl+'" class="meta-more">Ver detalles </a></p></div><p class="order"><a href="'+posturl+'">Ver!</a></p></div>';

document.write(trtd);

j++;

}

function showrecentposts2(json) {

j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;

img = new Array();

for (var i = 0; i < numposts2 ; i++) {

var entry = json.feed.entry[i];

var posttitle = entry.title.$t;

var pcm;

var posturl;

if (i == json.feed.entry.length) break;

for (var k = 0; k < entry.link.length; k++) {

if (entry.link[k].rel == 'alternate') {

posturl = entry.link[k].href;

break;

}

for (var k = 0; k < entry.link.length; k++) {

if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {

pcm = entry.link[k].title.split(" ")[0];

break;

}

if ("content" in entry) {

var postcontent = entry.content.$t;}

else

if ("summary" in entry) {

var postcontent = entry.summary.$t;}

else var postcontent = "";

postdate = entry.published.$t;

if(j>imgr.length-1) j=0;

img[i] = imgr[j];

s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);

if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';

var month = [1,2,3,4,5,6,7,8,9,10,11,12];

var month2 = ["Ene","Feb","Mar","Abr","May","Jun","Jul","Ago","Sep","Oct","Nov","Dic"];

var day = postdate.split("-")[2].substring(0,2);

var m = postdate.split("-")[1];

var y = postdate.split("-")[0];

for(var u2=0;u2<month.length;u2++){

if(parseInt(m)==month[u2]) {

m = month2[u2] ; break;

}

var daystr = day+ ' ' + m + ' ' + y ;

var trtd = '<ul class="featured_thumb"><a rel="'+i+'" class="toc" href="#"><img width="65" height="65" title="our product" alt="our product" class="featured_thumb" src="'+img[i]+'"/></a></ul>';

document.write(trtd);

j++;

}

//]]>

</script>

Si ya utilizas un script en tu blog, ya no deberás colocar el código que esta marcado de color rojohttp://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js, ya que se produciría conflictos y no se mostrar bien tu slideshow, y si no utilizas ningún script puedes colocar todo el código.

3 En este punto vas a buscar este código </header> y debajo de el encontraras todas estas líneas

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<b:section class='slide' id='slide' preferred='yes'/>

</div>

</b:if>

Tendrás que borrar esas líneas de código y remplazarlo por estas nuevas

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='slide-wrapper'>
<b:section class='slide' id='slide' preferred='yes'>
<b:widget id='HTML82' locked='false' title=' contenedor slider' type='HTML'>
<b:includable id='main'>
<div id='featured-slider'>
<script>
document.write("<script src=\"/feeds/posts/default/-/<data:content/>?max-results="+numposts2+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
</script>
<div id='paginate-featured-slider'>
<ul>
<script>
document.write("<script src=\"/feeds/posts/default/-/<data:content/>?max-results="+numposts2+"&orderby=published&alt=json-in-script&callback=showrecentposts2\"><\/script>");
</script>
</ul>
</div>
</div>
<script type='text/javascript'>
featuredcontentslider.init({
id: "featured-slider", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "markup", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["", ""], //labels for "prev" and "next" links. Set to "" to hide.
revealtype: "click", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
enablefade: [true, 0.4], //[true/false, fadedegree]
autorotate: [true, 5000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})
</script>
</b:includable>
</b:widget>
</b:section>
</div>
</b:if>
<div class='shadow'/>

Eso es todo ahora dale un clic en “Guardar plantilla”.

Y por ultimo nos dirigimos otra vez a “Diseño” y damos un clic en el widget que dice “contenedor slider” y solo ponemos el nombre de cualquier etiqueta que queramos mostrar en nuestro blog de blogger, y luego le das un clic en “Guardar”.

Ahora si disfruta de tu nuevo y espectacular slideshow

NOTA: Los cambios que se pueden hacer:
color de fondo blanco por otro: .slide {color: #666666;line-height: 1.3em;}
donde dice 666666 y pon el numero de color que quieras.

En el "Diseño" de tu blog te debe aparecer Contenedor slider, ahi deberas colocar solo el nombre de una etiqueta que quieras mostrar.

Slideshow Carrusel basado en etiquetas para blogger

2014-11-01T06:35:00.000-07:00

Como hacer un Slideshow Carrusel basado en etiquetas para blogger

http://www.ayudadeblogger.com/2012/11/como-hacer-un-slideshow-carrusel-basado-en-etiquetas-para-blogger.html

En este tutorial voy a mostrar un truco tan sencillo de cómo crear un slider carrusel automático basado en sus etiquetas para uso exclusivo en blogger. Todo lo que necesitaran hacer es solo sustituir un nombre con su propia etiqueta y el regulador del slider carrusel funcionará sobre la base de la etiqueta que se agrega en la Edición de HTML. El uso de este slider carrusel es muy sencillo y sólo utilizaran un guión de jCarousellite sin la adición de efectos de aceleración o rueda del ratón. Los efectos son automáticos y para realizar este truco es muy simple. En mis publicaciones anteriores publique algunos tipos de Slideshow automáticos que sirven para mostrar sus ultimas entradas de blogger, les dejo algunos de los enlaces para que los vean.

Slidesow con entradas populares
Mostrar un Slideshow con mis entradas populares
Slideshow con control deslizante para blogger
Slideshow con popular post
Slideshow con un diseño renovado
Slideshow automatico
Slideshow Manual

A continuación mira la demostración del Slider Carrusel en mi blog de demos

Bueno ya han visto la demostración del Slider Carrusel en mi blog de demos, ahora nos dirigimos a insertar los códigos, he tratado de ser lo mas explicativo posible para que ustedes no tengan ningún inconveniente al momento de seguir las instrucciones.

1 Ir a blogger

2 Da un clic en el icono de “Plantilla”, luego otro 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.

3Busca este código ]]></b:skin>

4 Insertar enzima de ]]></b:skin> el siguiente código

/* Slideshow carrusel create by www.ayudadeblogger.com

---www.grupodelecluse.com-------------------------------------------- */

#carousel{width:950px;height:185px;margin-bottom:0px;position:relative;display:block}
#carousel .container{position:absolute;left:49px;width:895px;height:185px;overflow:hidden;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn1dH7hnupuaST0eAnPT9zW-DNa1lXnm8DdiYlffzeWf3sgVcLDVDnDzGZTTPHZq2p43v_uhYKSPszaJvkeyYa2Q6r9oRm_Js8MXWbvf-pBNwAbX0cZEVttayiNLXSwhbNM1To2QDolpI/s1600/scroller-bg.png) repeat center}
#carousel #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm68vErRNfBtCmgyH4ph04fZVfutPub3hV60tt_5Ntk1YHt3fNvk09IhXTqMtO7aAWu_lcfVougisEO04tUynfU-7MPuPyOI49N7YLBtp6zBttKoHedfT8VcVzo3Er67AfBBBiH73F2rE/s1600/prev.png) center;z-index:100;cursor:pointer;border-right:1px solid #ccc}
#carousel #previous_button:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRzX9-x4l2XDt_t4qQhtMxgl9skdJdbSOGO7-J4bNNbYdi8loCZgnhPaibyC7ty9wbprGcz2aeNF379VSuFGiLgSFbwNKLuKpFCSBSIs_esswlMdQAdLt9GWA1u5Ey2Hx36yXEgF_BSXo/s1600/prev.png) center}
#carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkEYAzy_oKwluWRMlwRMA1xp0wjj46zL8btJiXHgtNaK3Y7DwXrlGjSLW9MjyQngGStkjf2HJMAar6qaVEdDp1FK7c5ZC4WNsQjQeygTN07zVdYiIYTgAo6b8wJ9CHPALM8apPCGMI578/s1600/next.png) center;z-index:100;cursor:pointer;border-left:1px solid #ccc}
#carousel #next_button:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRELVJbCC5XchInOBJqI_JlWl26VqTF6d4KR8uz45xdjNfBZADL7Yc1Z9GLHNStp3m69q6m5Hk5U8IAAilEEsX6DhpjLiR2kV2w8SnX6S-Yoh0YmgdEegqM0_pBdvjUR9EV5kwogKZznA/s1600/next.png) center}
#carousel ul{width:100000px;position:relative;margin-top:10px}
#carousel ul li{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDi7p4QOMROxX4ChjV-Lg6Q0bc1uz0ykVMbzR5JI2aXra6bz1eIsLN2C2lqbYQvxy3Ta_isDsK5J9eI4ePot6nMUr_-2H7UgenS9NNYlQOHjNF1bFRtFMwDWPLxGUnMmKgdqD6H79DsqE/s1600/main.png) repeat-x top;display:inline;float:left;text-align:center;font-weight:700;font-size:.9em;line-height:1.2em;border:1px solid #ccc;width:145px;height:150px;margin:0 4px 20px 7px;padding:6px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
#carousel ul li:hover{filter:alpha(opacity=75);opacity:.75;}
#carousel ul li a.slider_title{color:#222;display:block;margin-top:5px}
#carousel ul li a.slider_title:hover{color:#cd1713}
#carousel a img{display:block;background:#fff;margin-top:0}

Los números que están marcados de color azul width:950px;height:185px, usted podrá cambiar por la anchura y la altura que quiera mostrar en su blog. Esto sirve para hacerle más grande o más pequeño a nuestro Slider Carrusel.

5 Ahora vamos a buscar este código </head> y enzima de el insertamos el siguiente código

document.write(trtd);
j++;
}
document.write('</ul>');
}
//]]>
</script>

Realice estos cambios:

Como podrán observar el código que se encuentra marcado de un color rojo, es la última serie del código de script jQuery.min.js que utilizo para hacer este control. Y si usted ha encontrado en su blog el código jQuery.min.js, estos son diferentes series de la plantilla, en el cual ya no tendrá que insertar el código que esta marcado de color rojo, pero en si, en muchas plantillas de blogger no vienen con este código, así que realice todos los pasos que les estoy indicando. Recuerde que solo debe haber un solo jQuery.min.js en su plantilla, ya que este corresponde al número de serie.

Usted también podrá cambiar el numero de imágenes que quiera que se muestre en su Slider Carrusel, solo deberá cambiar en la parte que dice numposts1 = 15 y cámbielo por el numero de imágenes que quiera que se muestre.

En el código que dice label1 = "Widgets"; cambia el nombre que se encuentra de color azul por el nombre de la etiqueta que quiera mostrar. Por ejemplo, yo elegí Widgets porque quiero mostrar las etiquetas que se encuentran bajo esa categoría.

Que es una Etiqueta, más informacion en este enlace

6 Luego busca este código <div id='main-wrapper'> y enzima de el inserta el siguiente código

(si no existe ese código en tu plantilla, podrás buscar este otro código type='Header'/> y inserta las siguientes líneas de código al final de </div> </div>. (Esto se coloca en el lugar que se quiere que aparezca, cabecera, )

<b:if cond='data:blog.pageType != "item"'>
<div id='carousel'>
<div id='previous_button'/>
<div class='container'>
<script>

document.write("<script src=\"/feeds/posts/default/-/"+label1+"?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");

</script>
<div class='clear'/>
</div>
<div id='next_button'/>
</div>
<script type='text/javascript'>
(function($) {     $(document).ready(function(){
$("#carousel .container").jCarouselLite({
    auto:4000,
    scroll: 1,
    speed: 800,
    visible: 5,
    start: 0,
    circular: true,
    btnPrev: "#previous_button",
    btnNext: "#next_button"
    });
    })})(jQuery)
</script>
</b:if>

Recuerda que también puedes poner este código en la parte inferior de la barra de navegación o también se puede colocar en el costado pie de página, ya todo dependen de sus necesidades.

7 Dale un clic en “Guardar plantilla” y listo mira tu nuevo y renovado Slider Carrusel en tu blog de blogger.

Tutorial como insertar un slider carrusel en blogger

2014-11-01T06:25:00.000-07:00

Tutorial como insertar un slider carrusel en blogger

http://www.ayudadeblogger.com/2013/10/tutorial-como-insertar-un-slider-carrusel-en-blogger.html

Tutorial para blogger, como insertar un slider carrusel en blogger simples pasos? Es la pregunta que todo mundo hace en google, bueno para concretar esta respuesta, voy a explicar con un simple código como realizar este grandioso truco para blogger y así poderlo implementar en nuestro blog de blogger. Los slider carrusel sirven para mostrar nuestras categorías que queremos dar a conocer a nuestros usuarios que visitan nuestro blog de blogger y así promocionar nuestros post. Lo que vamos hacer es insertar un simple código en un widget y realizar algunos cambios, en las imágenes en las URLs que se dirigirán hacia los post que quieran mostrar. Las imágenes que vayan a insertar en el slider carrusel tienen que tener la misma dimensión, por ejemplo, todas las imágenes tienen que tener el mismo tamaño como 400x300 o 300x200 etc. Si los tamaños de las imágenes no son iguales no se mostrara correctamente el slider carrusel, así que primero deberán asegurarse de que sus imágenes tengan la misma dimensión.

Anteriormente publique algunos Slider Carrusel para blogger, de los cuales les dejo los enlaces

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

Les gusto verdad!

Vamos a trabajar

1 Ir a blogger

2 Un clic en “Diseño”

3 Abre un gadget “Añadir un gadget”

4 Busca el widget que dice “HTML/Javascript” ábrelo

5 Ingresa las siguientes líneas de código en su interior

.flex-container a:active,

.flexslider a:active,

.flex-container a:focus,

.flexslider a:focus{

outline:none;

}

.slides,

.flex-control-nav,

.flex-direction-nav{

margin:0;

padding:0;

list-style:none;

}

/* FlexSlider Stilos****/

.flexslider{

margin:0;

padding:0;

}

.flexslider .slides > li{

display:none;

-webkit-backface-visibility:hidden;

-moz-backface-visibility:hidden;

-ms-backface-visibility:hidden;

-o-backface-visibility:hidden;

backface-visibility:hidden;

}

/* Hide the slides before the JS is loaded. Avoids image jumping */

.flexslider .slides img{

width:100%;

display:block;

}

.flex-pauseplay span{

text-transform:capitalize;

}

/* Clearfix for the .slides element */

.flexslider a.intro {

bottom:0;

color:rgba(0, 0, 0, 0.1);

font-size:14px;

position:absolute;

right:0;

text-decoration:none;

z-index:99999;

}

.slides:after{

content:".";

display:block;

clear:both;

visibility:hidden;

line-height:0;

height:0;

}

html[xmlns] .slides{

display:block;

}

* html .slides{

height:1%;

}

/* No JavaScript Fallback */

/* If you are not using another script, such as Modernizr, make sure you

* include js that eliminates this class on page load */

.no-js .slides > li:first-child{

display:block;

}

/* FlexSlider Default Theme ******/

.flexslider{

margin:0 0 60px;

background:#fff;

border:4px solid #fff;

position:relative;

-webkit-border-radius:4px;

-moz-border-radius:4px;

border-radius:4px;

-webkit-box-shadow:0 1px 4px rgba(0,0,0,.2);

-moz-box-shadow:0 1px 4px rgba(0,0,0,.2);

box-shadow:0 1px 4px rgba(0,0,0,.2);

zoom:1;

}

.flex-viewport{

max-height:2000px;

-webkit-transition:all 1s ease;

-moz-transition:all 1s ease;

-o-transition:all 1s ease;

transition:all 1s ease;

}

.loading .flex-viewport{

max-height:300px;

}

.flexslider .slides{

zoom:1;

}

.carousel li{

margin-right:5px;

}

/* Direction Nav */

.flexslider li {

border: 0 none !important;

padding: 0 !important;

text-indent: 0 !important;

}

.flex-direction-nav a{

width:30px;

height:30px;

margin:-20px 0 0;

display:block;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxb890U-3a2WKAXeyIhRYl2IMxPq0Cy3fketnptVWqwqG9BMc91ib683KggMmJdIvKCypXDKD94qpLlndmb9U7EmSumfZCZZWAfqH4Pa516M1D309d7IQ9cush__abNmlcN8be9rY1s7M/s1600/ayudadeblogger.PNG) no-repeat 0 0;

position:absolute;

top:50%;

cursor:pointer;

text-indent:-9999px;

opacity:0;

-webkit-transition:all .3s ease;

-moz-transition:all .3s ease;

-o-transition:all .3s ease;

transition:all .3s ease;

}

.flex-direction-nav .flex-next{

background-position:100% 0;

right:-36px;

}

.flex-direction-nav .flex-prev{

left:-36px;

}

.flexslider:hover .flex-next{

opacity:0.8;

right:5px;

}

.flexslider:hover .flex-prev{

opacity:0.8;

left:5px;

}

.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover{

opacity:1;

}

.flex-direction-nav .disabled{

opacity:.3!important;

filter:alpha(opacity=30);

cursor:default;

}

/* Control Nav */

.flex-control-nav{

width:100%;

position:absolute;

bottom:-40px;

text-align:center;

}

.flex-control-nav li{

margin:0 6px;

display:inline-block;

zoom:1;

*display:inline;

}

.flex-control-paging li a{

width:11px;

height:11px;

display:block;

background:#666;

background:rgba(0,0,0,0.5);

cursor:pointer;

text-indent:-9999px;

-webkit-border-radius:20px;

-moz-border-radius:20px;

border-radius:20px;

-webkit-box-shadow:inset 0 0 3px rgba(0,0,0,0.3);

-moz-box-shadow:inset 0 0 3px rgba(0,0,0,0.3);

box-shadow:inset 0 0 3px rgba(0,0,0,0.3);

}

.flex-control-paging li a:hover{

background:#333;

background:rgba(0,0,0,0.7);

}

.flex-control-paging li a.flex-active{

background:#000;

background:rgba(0,0,0,0.9);

cursor:default;

}

.flex-control-thumbs{

margin:5px 0 0;

position:static;

overflow:hidden;

}

.flex-control-thumbs li{

width:25%;

float:left;

margin:0;

}

.flex-control-thumbs img{

width:100%;

display:block;

opacity:.7;

cursor:pointer;

}

.flex-control-thumbs img:hover{

opacity:1;

}

.flex-control-thumbs .active{

opacity:1;

cursor:default;

}

</style>

$(document).ready(function(){

$(window).load(function() {

$('.flexslider').flexslider({

animation: "slide",

animationLoop: false,

itemWidth: 210,

itemMargin: 0,

minItems: 1,

maxItems: 4

});

</script>

<li>

<a href="AQUÍ LA DIRECCION URL"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7aYUPk6WSVXZ7adNuN7yYJx7gf-Ws1KNeD-ZJVrQyNnhdExavDTsurcckeI-lvvnHT1D-6GgpoktQioMytb9BfX1-7A0SdbIQFV3dvE9Wl-pe67utPNYsgsAAX0dR6NUzN7wgCUEL_m8Q/s1600/ayudadeblogger+1.JPG" /><br />La descripción del texto aqui</a>

</li>

<li>

<a href="AQUÍ LA DIRECCION URL"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEwiR6KSt5xo3VecvVjx7zH3F8C1ZMOp0nJ4cBAlJl2eoUDysSe8LdPpB6NQKm8JvtyYFVNFZQlK_525-yTTzKK6wXUnFaI3x8MALPdAIThxNaLt7OklVh9zVY7SZeeg_RCAmLl1crMtxk/s1600/ayudadeblogger+2.JPG" /><br />La descripción del texto aqui</a>

</li>

<li>

<a href="AQUÍ LA DIRECCION URL"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDeE5sbbb_PM6rqZ5cs-7Jdo6K_CJL_o8WlMmfR-SVOU9SS6_EiRbnoB3nKuMQNSbrePxsyUjsZqydUJSAp5kEEyOKLIm0UHEre8O2Ca-UqK_ADMXJDtykdm2-a5wqkEkmcyTN2eU1TRMC/s1600/ayudadeblogger+3.JPG" /><br />La descripción del texto aqui</a>

</li>

<li>

<a href="AQUÍ LA DIRECCION URL"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQPgV9Nlr0YR4B8yncnUS-O4w9giFyiWkj0gs6XKMJahHv77XfWw_G0EfvYexwSEf_jckVR4ZsQMae6qR8e-Vq0f0-R5RK4LAalCjKO4jvTX1CkoTvMzn1i5dNL59KmQ6tDsVMPgHnX97i/s1600/ayudadeblogger+7.JPG" /><br />La descripción del texto aqui</a>

</li>

<li>

<a href="AQUÍ LA DIRECCION URL"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGL34PfHv_brSLhBWkAhQibFRm3ISoLvxciMadHEQm5nbIYZ3tk69jARIlc9WL0goUhbbcepfTItXMmCHEG08S30xlwS1OqPqSt2wdP_7pQfaE164ymHPY8H-kyXSG9V0lxkJF-YHM3x3k/s1600/ayudadeblogger+4.JPG" /><br />La descripción del texto aqui</a>

</li>

<li>

<a href="AQUÍ LA DIRECCION URL"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV3DcBqk3ZQaQOO23npHCT6Wdu8ZzNsLqpqrB_YxrGgMoVF4OvpFJhGRMTurHsHL6G4CbXv2CIrRpfodQqa0O8JBLlCurKcphbCn7X_fD6RMShV1z7ymlYBRbnBpqrpxpUE2cXcP7z_FET/s1600/ayudadeblogger+5.JPG" /><br />La descripción del texto aqui</a>

</li>

<li>

<a href="AQUÍ LA DIRECCION URL"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYjtZjjvRx46JVtDn0jVGuqgqnoU4jNhBhdiaR_cT4-wccQ28CTwkW5oXf4Di3al1tcL1WDotW6gtN1yr8FgH8hNp6h78A3CdOI8A5yZo4rXtHyUOIwQ9BzuhJaONpRV5N_u2az5rDdsqm/s1600/ayudadeblogger+6.JPG" /><br />La descripción del texto aqui</a>

</li>

<li>

</li>

<li>

</li>

<li>

<a href=" AQUÍ LA DIRECCION URL"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEwiR6KSt5xo3VecvVjx7zH3F8C1ZMOp0nJ4cBAlJl2eoUDysSe8LdPpB6NQKm8JvtyYFVNFZQlK_525-yTTzKK6wXUnFaI3x8MALPdAIThxNaLt7OklVh9zVY7SZeeg_RCAmLl1crMtxk/s1600/ayudadeblogger+2.JPG" /><br />La descripción del texto aqui</a>

</li>

<li>

<a href=" AQUÍ LA DIRECCION URL "><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7aYUPk6WSVXZ7adNuN7yYJx7gf-Ws1KNeD-ZJVrQyNnhdExavDTsurcckeI-lvvnHT1D-6GgpoktQioMytb9BfX1-7A0SdbIQFV3dvE9Wl-pe67utPNYsgsAAX0dR6NUzN7wgCUEL_m8Q/s1600/ayudadeblogger+1.JPG" /><br />La descripción del texto aqui</a>

</li>

<li>

</li>

</ul>

</div>

Realiza estos cambios:

He marcado de tres diferentes colores en los lugares que ustedes deberán realizar sus diferentes cambios

Cambia donde dice AQUÍ LA DIRECCION URL e inserta la dirección URL del post que quieras dar a conocer

Borra todas las URLs que están marcadas de color rojo, esas direcciones son las responsables de mostrar las imágenes en el slider carrusel, recuerda insertar la URL de la imagen y que tengan todas las mismas dimensiones.

Borra donde dice La descripción del texto aqui e ingresa el título del post que quieras dar a conocer en el slider carrusel

Eso es todo, ahora dale un clic en “Guardar” y ubica tu nuevo Slider Carrusel debajo de la cabecera principal de tu blog de blogger.

VERSION 2:

Quieres insertar un Slider Carrusel en tu blog de blogger y no sabes cómo hacerlo o tal vez ya lo hiciste y te produce un error en el código o no sabes muy bien cómo funciona este truco para blogger!Ayudadeblogger.com te presenta un espectacular Slider Carrusel para que lo utilices en tu blog de blogger de una forma rápida y sencilla, la cual no le causara ningún error en la estructura de tu plantilla. Este nuevo Slider Carrusel para blogger funciona perfectamente en todos los navegadores web como, Google Chrome, Internet Explorer, Firefox etc. Lo que va a mostrar nuestro Slider Carrusel será las 12 últimas publicaciones que hayamos publicado en nuestro blog de blogger, con esto aumentara las vistas de los usuarios que visitan su blog. Una forma muy útil para los blogs. Bueno no voy hacer muy larga esta explicación.

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

Les gusto verdad!

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

4 Busca este código

]]></b:skin>

Una vez que hayas encontrado el código, tendrás que insertar las siguientes líneas de código arriba del código que encontraste

#carousel {background:url();width: 970px; position: relative; float: left; margin:0 0 10px 0;height:230px;overflow:hidden;}

#carousel .judul{margin-left:10px;font:18px Oswald;padding:5px;color:#422929}

#carousel .container {position: absolute;left: 0px;width: 970px;overflow:hidden;}

#carousel ul{width:10000px;position: relative;overflow:hidden;margin-top:0px;}

#carousel ul li {display: inline; float: left; margin:1px 0px 2px 10px; padding:1px; width: 180px; overflow: hidden;height:178px}

#carousel .thumb{height:128px;width: 170px;background:#fff;padding:4px;border:1px solid #ccc;box-shadow:0 0 4px #bbb;-moz-box-shadow:0 0 4px #bbb;-webkit-box-shadow:0 0 4px #bbb;}

#carousel #previous_button { position: absolute; top:8px;right: 39px; width: 25px; height: 22px; cursor: pointer; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9GXrS9DZfxHCYuMMbbrsNqoV7-4pYNVioCyaROdvvHhNLcFjajGANhkyuRWTBmI3m2pSv13ygEzJIVulNUmqnOePrLMRYa3NYVOI46f-vc26D52vMRLAX29dj1zkisOZK6QF0aAnkmEmV/s1600/paginate.png) no-repeat; background-position: 0 0; }

#carousel #next_button { position: absolute; top:8px; right:10px; width: 25px; height: 22px; cursor: pointer; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9GXrS9DZfxHCYuMMbbrsNqoV7-4pYNVioCyaROdvvHhNLcFjajGANhkyuRWTBmI3m2pSv13ygEzJIVulNUmqnOePrLMRYa3NYVOI46f-vc26D52vMRLAX29dj1zkisOZK6QF0aAnkmEmV/s1600/paginate.png) no-repeat; background-position: -27px 0; }

#carousel #next_button:hover, #previous_button:hover { -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter: alpha(opacity=80); opacity: 0.8; transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out; }

#carousel ul li a.slider_title{color:#422929;display:block;text-align:center;font:bold 12px Arial;margin-top:8px}

#carousel ul li a.slider_title:hover{color:#111}

/* Slide Content

----------------------------------------------- */

.slide1-wrapper {padding:0 auto;margin:0 auto;width:auto;float: left;

word-wrap: break-word; overflow: hidden;}

.slide1 ul {list-style:none;margin:0;padding:0;}

.slide1 .widget {margin:0}

#bot-wrapper {padding-top:10px;width:970px;float:left;word-wrap:break-word;overflow:hidden}

#bot1-wrapper{width:620px;float:left;word-wrap:break-word;overflow:hidden}

#bot2-wrapper{padding-left:10px;width:340px;float:right;word-wrap:break-word;overflow:hidden}

.bot .widget,.bot1 .widget,.bot2 .widget{margin:0;padding:0 0 8px}

.bot ul,.bot1 ul,.bot2 ul {list-style:none;margin:0 0 0;padding:0 0 0;}

5 Busca este otro código

</head>

Inserta el siguiente código justo arriba del código que encontraste

//<![CDATA[

imgr=new Array();imgr[0]=" ";showRandomImg=true;aBold=true;summaryPost = 100;summaryPost1 = 200;numposts=6;numposts1=10;numposts2=6;numposts6=3;Title1="Adventure";Title2="Action";Title3="Bike Game";Title4="Dress-Up";Title5="Strategy";Title6="Sport Game";function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");s=s.substring(0,chop-1);return s}

//]]>

</script>

Nota: Si ya utilizas un script jQuery ya no tendras que poner solo el código que esta marcado de color amarillo, y si no utilizas ningun jQuery inserta todo el código tal como esta

6 Ahora con mucho cuidado vamos a dar un clic en la pestaña que dice “Ir al widget”, mire la imagen

Y vamos a dar un clic en el “Header1” para que nos muestre el código directamente en donde tendremos que insertar nuestra última línea de código

Al dar un clic en “Header1” nos mostrara un código como el siguiente, mira la imagen

En este punto con calma vamos a buscar la última línea del cierre que dice </div> en el cual abajo de ella vamos a insertar el siguiente código

<div class='judul'>Slider Carrusel</div>

<ul>

document.write(" <script src=\"/feeds/posts/default?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts2\"><\/script>");

</script>

</ul><div class='clear'/>

</div>

</div>

(function($) { $(document).ready(function(){

$("#carousel .container").jCarouselLite({

auto:0,

scroll: 1,

speed: 400,

visible: 5,

start: 0,

circular: false,

btnPrev: "#previous_button",

btnNext: "#next_button"

});

})})(jQuery)

</script>

</div>

Eso es todo ahora dale un clic en “Guardar plantilla”

Mira tu nuevo Slider Carrusel para blogger insertado debajo de la cabecera principal de tu blog de blogger

Tutorial de Slideshow para Blogger

2014-11-01T06:21:00.001-07:00

Tutorial de Slideshow para Blogger

http://www.ayudadeblogger.com/2013/11/tutorial-de-slideshow-para-blogger.html

En este nuevo tutorial de Slideshow para Blogger aprenderán a instalar un código en un solo widget, con el cual les mostrara un fantástico Slideshow en su blog de Blogger. Los Slideshow se los utiliza para mostrar lo mejor de nuestras categorías que estemos promocionando y así los nuevos usuarios que visitan su blog lleguen a conocer sus novedades. Lo que van a realizar es copiar un código he insertarlo en un widget, realizar algunos cambios en las imágenes, luego guardarlo y ubicarlo debajo de la cabecera principal de su blog, y si solo quieren que se muestre este Slideshow en su página principal y no en las entradas de su blog, pueden seguir el siguiente enlace en el cual se explica cómo realizar este truco. Como ocultar widgets página principal y en las entradas. Este nuevo Slideshow funciona perfectamente en todos los navegadores web como Firefox, Google Chrome, Internet Explorer etc. La facilidad con la que van a instalar este Slideshow en su blog de Blogger es tan simple y lo vamos a realizar en este tutorial para Blogger.

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

1 Ir a Blogger

2 Un clic en “Diseño”

3 Abre un gadget “Añadir un gadget”

4 Busca el widget que dice “HTML/Javascript” ábrelo

5 Ingresa las siguientes líneas de código en su interior

#sliderFrame {position:relative;width:930px;margin: 0 auto 40px;}

#slider {

width:930px;height:360px;/* Si se modifica el tamaño del slider, también tendrán que modificar el tamaño de las imágenes */

background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYiRQaKs50z5g7doJLeumUWLyQ2oyLgZBux3cxkPA9MI-COnI6BOlWlcyR7NJAqRpBESYZctyCU9MOQjrgYQkzqurptP_6ChKjRT9qWfpc70wClGTKIdnXWksz6-q1ztfWfkulRyKrwi5l/s1600/loading.gif) no-repeat 50% 50%;

position:relative;

margin:0 auto;/*centrado de la imagen slider center-aligned */

box-shadow: 0px 1px 5px #999999;

}

#slider img {

position:absolute;

border:none;

display:none;

}

/* the link style (if an image is wrapped in a link) */

#slider a.imgLink {

z-index:2;

display:none;position:absolute;

top:0px;left:0px;border:0;padding:0;margin:0;

width:100%;height:100%;

}

/* Estilos Caption */

div.mc-caption-bg, div.mc-caption-bg2 {

position:absolute;

width:100%;

height:auto;

padding:0;

left:0px;

bottom:15px;

z-index:3;

overflow:hidden;

font-size: 0;

}

div.mc-caption-bg {

background-color:black;

}

div.mc-caption {

font: bold 14px/20px Arial;

color:#EEE;

z-index:4;

padding:10px 0;

text-align:center;

}

div.mc-caption a {

color:#FB0;

}

div.mc-caption a:hover {

color:#DA0;

}

/* ------Centrado ubicación de puestos------*/

div.navBulletsWrapper {

top:360px; left:400px; /* Este punto es la posición relativa del #slider */

width:150px;

background:none;

padding-left:20px;

position:relative;

z-index:5;

cursor:pointer;

}

/* Realizador bullet */

div.navBulletsWrapper div

{

width:11px; height:11px;

background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_Wnd6KEk20eEPOOfUM7zXa1UQgj-8QzKbQBPmEbTmh8h4Ti9QmGbhgS3IR-Bd4PMwZlDxZnIOHarEvLD2yVRz3Wp1Uhe_vNXMYav4YhVN2Qe2pVtFqcvSYfu-vwWebvfQ3QGaD3WieOSL/s1600/bullet.png) no-repeat 0 0;

float:left;overflow:hidden;vertical-align:middle;cursor:pointer;

margin-right:11px;/* distance between each bullet*/

_position:relative;/*IE6 hack*/

}

div.navBulletsWrapper div.active {background-position:0 -11px;}

.intro {

bottom: 0;

color: rgba(0, 0, 0, 0.2);

font-size: 16px;

position: absolute;

right: 0;

text-decoration: none;

z-index: 99999;

}

/* --------- Start jQuery y Agregar URLs imágenes, URLs de páginas, descripción------- */

#slider

{

transform: translate3d(0,0,0);

-ms-transform:translate3d(0,0,0);

-moz-transform:translate3d(0,0,0);

-o-transform:translate3d(0,0,0);

}

</style>

</div>

El poder de Blogger <a href="http://ayudadeblogger.com/" target="_blank">Ayudadeblogger.com</a>

</div>

<a href="http://www.ayudadeblogger.com/" target="_blank">Widgets</a> <a href="http://www.ayudadeblogger.com/" target="_blank">Plantillas</a> Gratis.

</div>

Realiza estos cambios:

He marcado de tres diferentes colores en los lugares que ustedes tendrán que realizar sus diferentes cambios

Cambia las URls que están marcadas de color rojo, estas son las responsables de mostrar las imágenes en el Slideshow. Les recuerdo que las imágenes que vayan a mostrar en el Slideshow deben tener una dimensión de 940x360 pixeles, así que deberán colocar de ese tamaño.

Para poner las direcciones URLs de sus artículos es donde dice “AQUÍ LA URL DEL ARTICULO” como también debes borrar las URLs que están marcadas de color azul http://ayudadeblogger.com/.

Y por último, la pequeña descripción que se mostrara en su Slideshow son las palabras que están marcadas de color verde, bórralas y pon ahí la descripción que tú quieras.

Eso es todo, es momento de dar un clic en “Guardar” y ubícalo debajo de la cabecera principal de tu blog

Nota: Si quieres reducir el tamaño del Slideshow, solo tienes que cambiar en los números que están marcados de color amarillo, además al reducir el tamaño, también tendrán que reducir el tamaño de las imágenes.

Menú desplegable y un Slideshow

2014-10-31T13:09:00.002-07:00

Como insertar un Menú desplegable y un Slideshow para blogger

Estaban buscando un tutorial de blogger de como insertar un Menú desplegable y un slideshow al mismo tiempo con unos pasos simples y sin complicaciones! Has llegado al sitio adecuado, el día de hoy aprenderías a como insertar una caja completa de menú desplegable y un slideshow debajo de la cabecera principal de tu blog de blogger. La inserción del código es muy fácil, solo tendrán que seguir mis instrucciones y no confundir ninguna de ellas. Esta nueva caja de Menú desplegable y Slideshow se mostrará debajo de la cabecera principal de su blog, el slideshow mostrara sus últimas publicaciones de su blog. La caja de menú desplegable y el slideshow funciona perfectamente en todos los navegadores web.
Menú desplegable y un Slideshow

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

4 Busca este código

]]></b:skin>

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

/* menu - slideshow start by ayudadeblogger.com */

#kenthir-wrapper{background:#B40404}

#main-wrapper{padding-top:10px;width:630px;float:left;word-wrap:break-word;overflow:hidden}

#sidebar-wrapper,#sidebar1-wrapper{width:300px;float:right;word-wrap:break-word;overflow:hidden;padding-top:10px}

h2{line-height:1.4em;text-transform:none;color:#333;margin:.5em 0 .25em}

h3.date-header{text-transform:none;font:normal 12px Arial;color:#999;line-height:1.2em;margin:.1em 0}

.post{margin:0 0 15px;padding:5px 10px 10px}

.post h1,.post h2{font:24px Oswald;line-height:1.2em;color:#222;margin:.0em 0 0;padding:4px 0;text-shadow:1px 1px #fff, 1px 1px #ccc, 2px 2px #ddd, 3px 3px #eee}

.post h1 a,.post h1 a:visited,.post h1 strong,.post h2 a,.post h2 a:visited,.post h2 strong{display:block;text-decoration:none;color:#222;font-weight:400}

.post h1 strong,.post h1 a:hover,.post h2 strong,.post h2 a:hover{color:#0a2e56}

.post-body{border-top:2px solid #ddd;padding-top:10px;font:normal 14px 'Arial', serif;margin:1.0em 0 .75em;line-height:1.3em;}

.post-body blockquote{line-height:1.3em}

.post-footer{color:#666;text-transform:none;letter-spacing:.01em;font:12px Arial;line-height:1.4em;margin:.75em 0}

.comment-link{margin-left:.1em}

.post blockquote{margin: 10px 10px 10px 20px;padding: 10px 15px 10px 15px;line-height: 1.6em;color: #333;background: #eee;border-left: 20px solid #ccc}

.post blockquote p{margin:.75em 0}

.clear{clear:both}

.menu,.menu ul,.menu li,.menu a{border:none;outline:none;margin:0;padding:0;z-index:999}

.menu{height:40px;width:auto; background-color: #222;background-image: -webkit-gradient(linear, left top, left bottom, from(#555), to(#222));background-image: -webkit-linear-gradient(top, #555, #222);background-image: -moz-linear-gradient(top, #555, #222);background-image: -ms-linear-gradient(top, #555, #222);background-image: -o-linear-gradient(top, #555, #222);background-image: linear-gradient(top, #555, #222); -moz-box-shadow: 0 5px 5px #000;-webkit-box-shadow: 0 5px 5px #000;box-shadow: 0 5px 5px #000; }

.menu li{position:relative;list-style:none;float:left;display:block;height:40px}

.menu li a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1yKnYV6eLv5mrtJkvGWVk8t89Ivsh7_qaN2955Y89-Q-KW2mNWozFnuxLq21vD6whTYhLiWWld3NF_4yDhpPB2XYARjSnOAjf6jRjc-tJrwcK4YHD7MUc5cmDNTtwOioNs-NSbU2_-Gs/s1600/bagi.gif) no-repeat top right;display:block;text-decoration:none;font-family:Arial;font-weight:700;font-size:14px;color:#ddd;text-shadow:1px 1px 1px #000;-webkit-transition:color .2s ease-in-out;-moz-transition:color .2s ease-in-out;-o-transition:color .2s ease-in-out;-ms-transition:color .2s ease-in-out;transition:color .2s ease-in-out;margin:0;padding:12px 14px 12px}

.menu li:first-child a{padding:10px 10px 7px}

.menu li:hover > a{color:#48d}

.menu ul{position:absolute;top:41px;left:0;opacity:0;background:#fdfdfd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8CF2FAeM_PLxIRzGt90p4cKkXYys16u7kq-gp55RJjV7K6fukSh8NSRkcq3hHqqEes8EfuCcm6_Cgy-gVwwZY6ju2bjQ2ZQejZSFAKDXvoPC8AECCymtxkVUSbFzgMHIHY3r9PqjX93M/s1600/menuhover.png) repeat-x top;-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px;border:1px solid #666;border-top:none;-webkit-transition:opacity .25s ease .1s;-moz-transition:opacity .25s ease .1s;-o-transition:opacity .25s ease .1s;-ms-transition:opacity .25s ease .1s;transition:opacity .25s ease .1s}

.menu li:hover > ul{opacity:1}

.menu ul li{height:0;overflow:hidden;-webkit-transition:height .25s ease .1s;-moz-transition:height .25s ease .1s;-o-transition:height .25s ease .1s;-ms-transition:height .25s ease .1s;transition:height .25s ease .1s;padding:0}

.menu li:hover > ul li{height:36px;overflow:visible;padding:0}

.menu ul li a{color:#111;font-weight:400;width:100px;margin:0;padding:10px 0 10px 30px;text-shadow:none}

.menu ul li:first-child a{padding:10px 14px 10px 30px}

.menu ul li:last-child a{border:none}

.menu a.trigger{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh12cncrFRVKnLHbHkKsPNxgMNOoH-9qAJIprAfVLR13_ItexMUsvQzXd2pE2yAOjd9kJWZTPmTLKRX4a_sOgI-irEZOApiAsYGx_n4i-8XEJyp_CSYFdvLpsl2Ms_YqmszcgKRfNy_zAE/s1600/arrow.png) no-repeat 6px center}

/* Slide Content

----------------------------------------------- */

.slide-wrapper {padding:0 auto;margin:0 auto;width:auto;float: left;

word-wrap: break-word; overflow: hidden;}

.slide {color: #666666;line-height: 1.3em;}

.slide ul {list-style:none;margin:0;padding:0;}

.slide .widget {margin:0}

#slider{padding:13px 10px 0;margin:0;position:relative;overflow:hidden;width:920px;height:340px}

.slider-main-outer{position:relative;height:100%;width:610px;z-index:3;overflow:hidden}

ul.slider-main-wapper li h3{z-index:10;position:absolute;top:4px;width:180px;height:312px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh42LQ9zlD6Z_0VZIwAktYoQZf4NFmpX0drmzsvg5yH5uTdlj1B34AJb_-tu6JLFpsgDDdnMLMsTXJcPunpzxehQckBNOviYVQNPXQGuISZwPlFDn7OMjPEUvZbQI9CmZV-ZirHMRo32Rof/s1600/transparant.png);padding:10px;margin:0 4px}

ul.slider-main-wapper li h3 p{color:#FFF;font-size:12px;padding:5px 10px;margin:5px 0;background:#0178d3;width:150px}

ul.slider-main-wapper li h3 a{color:#ddd;font-size:20px;line-height:26px;margin:0}

ul.slider-main-wapper li h3 .title{color:#eee;font:12px Arial;margin:0;padding-top:5px}

ul.slider-main-wapper li .imgauto{width:602px;height:332px;overflow:hidden;margin:0;padding:0;border:4px double #555}

ul.slider-main-wapper{height:340px;width:610px;position:absolute;overflow:hidden;margin:0;padding:0}

ul.slider-main-wapper li{overflow:hidden;list-style:none;height:100%;width:610px;float:left;margin:0;padding:0}

.slider-opacity li{position:absolute;top:0;left:0;float:inherit}

ul.slider-main-wapper li img{list-style:none;width:610px;height:auto;padding:0}

ul.slider-navigator{top:0;position:absolute;width:100%;margin:0;padding:0}

ul.slider-navigator li{cursor:pointer;list-style:none;width:100%;overflow:hidden;margin:0;padding:0}

.slider-navigator-outer{position:absolute;right:10px;top:13px;z-index:10;height:340px;width:310px;overflow:hidden;color:#333}

.slider-navigator li h5{color:#999;font:bold 12px Arial;margin:0;padding:5px 10px 0}

.slider-navigator li .title{color:#eee;font:11px Tahoma;margin:0;padding-top:5px}

.slider-navigator li div{text-shadow:1px 1px 1px #000;height:84px;position:relative;margin:0px 0px 0px 5px;padding:0 5px;border-bottom:1px dotted #444}

.slider-navigator li.active div,.slider-navigator li:hover div{color:#4ea5f9;}

.slider-navigator li img{border:#444 solid 2px;height:70px;width:90px;float:left;margin:5px 10px 5px 0}

.slider-navigator li.active img{border:#ccc solid 2px}

.slider-navigator li.active h5,.slider-navigator li h5:hover{color:#fff}

5 Busca este otro código

</head>

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

jQuery(document).ready(function(){

$('#slider').lofJSidernews({

interval:6000,

duration:800,

mainWidth: 610,

navigatorWidth: 310,

maxItemDisplay:4,

easing:'easeOutBounce',

auto:true,

isPreloaded: false

});

</script>

//<![CDATA[

(function($) {

var types = ['DOMMouseScroll', 'mousewheel'];

$.event.special.mousewheel = {

setup: function() {

if ( this.addEventListener )

for ( var i=types.length; i; )

this.addEventListener( types[--i], handler, false );

else

this.onmousewheel = handler;

teardown: function() {

if ( this.removeEventListener )

for ( var i=types.length; i; )

this.removeEventListener( types[--i], handler, false );

else

this.onmousewheel = null;

}

};

$.fn.extend({

mousewheel: function(fn) {

return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");

unmousewheel: function(fn) {

return this.unbind("mousewheel", fn);

}

});

function handler(event) {

var args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true;

event = $.event.fix(event || window.event);

event.type = "mousewheel";

if ( event.wheelDelta ) delta = event.wheelDelta/120;

if ( event.detail ) delta = -event.detail/3;

// Add events and delta to the front of the arguments

args.unshift(event, delta);

return $.event.handle.apply(this, args);

}

})(jQuery);

/**

* @version $Id: $Revision

* @package jquery

* @subpackage lofslidernews

* @website http://landofcoder.com

* @license This plugin is dual-licensed under the GNU General Public License and the MIT License

// JavaScript Document

(function($) {

$.fn.lofJSidernews = function( settings ) {

return this.each(function() {

// get instance of the lofSiderNew.

new $.lofSidernews( this, settings );

});

}

$.lofSidernews = function( obj, settings ){

this.settings = {

direction : '',

mainItemSelector : 'li',

navInnerSelector : 'ul',

navSelector : 'li' ,

navigatorEvent : 'click',

wapperSelector: '.slider-main-wapper',

interval : 4000,

auto : true, // whether to automatic play the slideshow

maxItemDisplay : 4,

startItem : 0,

navPosition : 'vertical',

navigatorHeight : 85,

navigatorWidth : 310,

duration : 600,

navItemsSelector : '.slider-navigator li',

navOuterSelector : '.slider-navigator-outer' ,

isPreloaded : true,

easing : 'easeOutBounce'

}

$.extend( this.settings, settings ||{} );

this.nextNo = null;

this.previousNo = null;

this.maxWidth = this.settings.mainWidth || 600;

this.wrapper = $( obj ).find( this.settings.wapperSelector );

this.slides = this.wrapper.find( this.settings.mainItemSelector );

if( !this.wrapper.length || !this.slides.length ) return ;

// set width of wapper

if( this.settings.maxItemDisplay > this.slides.length ){

this.settings.maxItemDisplay = this.slides.length;

}

this.currentNo = isNaN(this.settings.startItem)||this.settings.startItem > this.slides.length?0:this.settings.startItem;

this.navigatorOuter = $( obj ).find( this.settings.navOuterSelector );

this.navigatorItems = $( obj ).find( this.settings.navItemsSelector ) ;

this.navigatorInner = this.navigatorOuter.find( this.settings.navInnerSelector );

if( this.settings.navPosition == 'horizontal' ){

this.navigatorInner.width( this.slides.length * this.settings.navigatorWidth );

this.navigatorOuter.width( this.settings.maxItemDisplay * this.settings.navigatorWidth );

this.navigatorOuter.height( this.settings.navigatorHeight );

} else {

this.navigatorInner.height( this.slides.length * this.settings.navigatorHeight );

this.navigatorOuter.height( this.settings.maxItemDisplay * this.settings.navigatorHeight );

this.navigatorOuter.width( this.settings.navigatorWidth );

}

this.navigratorStep = this.__getPositionMode( this.settings.navPosition );

this.directionMode = this.__getDirectionMode();

if( this.settings.direction == 'opacity') {

this.wrapper.addClass( 'slider-opacity' );

$(this.slides).css('opacity',0).eq(this.currentNo).css('opacity',1);

} else {

this.wrapper.css({'left':'-'+this.currentNo*this.maxSize+'px', 'width':( this.maxWidth ) * this.slides.length } );

}

if( this.settings.isPreloaded ) {

this.preLoadImage( this.onComplete );

} else {

this.onComplete();

}

$.lofSidernews.fn = $.lofSidernews.prototype;

$.lofSidernews.fn.extend = $.lofSidernews.extend = $.extend;

$.lofSidernews.fn.extend({

startUp:function( obj, wrapper ) {

seft = this;

this.navigatorItems.each( function(index, item ){

$(item).click( function(){

seft.jumping( index, true );

seft.setNavActive( index, item );

} );

$(item).css( {'height': seft.settings.navigatorHeight, 'width': seft.settings.navigatorWidth} );

})

this.registerWheelHandler( this.navigatorOuter, this );

this.setNavActive(this.currentNo );

if( this.settings.buttons && typeof (this.settings.buttons) == "object" ){

this.registerButtonsControl( 'click', this.settings.buttons, this );

}

if( this.settings.auto )

this.play( this.settings.interval,'next', true );

return this;

onComplete:function(){

setTimeout( function(){ $('.preload').fadeOut( 900 ); }, 400 ); this.startUp( );

preLoadImage:function( callback ){

var self = this;

var images = this.wrapper.find( 'img' );

var count = 0;

images.each( function(index,image){

if( !image.complete ){

image.onload =function(){

count++;

if( count >= images.length ){

self.onComplete();

}

image.onerror =function(){

count++;

if( count >= images.length ){

self.onComplete();

}

}else {

count++;

if( count >= images.length ){

self.onComplete();

}

} );

navivationAnimate:function( currentIndex ) {

if (currentIndex <= this.settings.startItem

|| currentIndex - this.settings.startItem >= this.settings.maxItemDisplay-1) {

this.settings.startItem = currentIndex - this.settings.maxItemDisplay+2;

if (this.settings.startItem < 0) this.settings.startItem = 0;

if (this.settings.startItem >this.slides.length-this.settings.maxItemDisplay) {

this.settings.startItem = this.slides.length-this.settings.maxItemDisplay;

}

this.navigatorInner.stop().animate( eval('({'+this.navigratorStep[0]+':-'+this.settings.startItem*this.navigratorStep[1]+'})'),

{duration:500, easing:'easeInOutQuad'} );

setNavActive:function( index, item ){

if( (this.navigatorItems) ){

this.navigatorItems.removeClass( 'active' );

$(this.navigatorItems.get(index)).addClass( 'active' );

this.navivationAnimate( this.currentNo );

}

__getPositionMode:function( position ){

if( position == 'horizontal' ){

return ['left', this.settings.navigatorWidth];

}

return ['top', this.settings.navigatorHeight];

__getDirectionMode:function(){

switch( this.settings.direction ){

case 'opacity': this.maxSize=0; return ['opacity','opacity'];

default: this.maxSize=this.maxWidth; return ['left','width'];

}

registerWheelHandler:function( element, obj ){

element.bind('mousewheel', function(event, delta ) {

var dir = delta > 0 ? 'Up' : 'Down',

vel = Math.abs(delta);

if( delta > 0 ){

obj.previous( true );

} else {

obj.next( true );

}

return false;

});

registerButtonsControl:function( eventHandler, objects, self ){

for( var action in objects ){

switch (action.toString() ){

case 'next':

objects[action].click( function() { self.next( true) } );

break;

case 'previous':

objects[action].click( function() { self.previous( true) } );

break;

}

return this;

onProcessing:function( manual, start, end ){

this.previousNo = this.currentNo + (this.currentNo>0 ? -1 : this.slides.length-1);

this.nextNo = this.currentNo + (this.currentNo < this.slides.length-1 ? 1 : 1- this.slides.length);

return this;

finishFx:function( manual ){

if( manual ) this.stop();

if( manual && this.settings.auto ){

this.play( this.settings.interval,'next', true );

}

this.setNavActive( this.currentNo );

getObjectDirection:function( start, end ){

return eval("({'"+this.directionMode[0]+"':-"+(this.currentNo*start)+"})");

fxStart:function( index, obj, currentObj ){

if( this.settings.direction == 'opacity' ) {

$(this.slides).stop().animate({opacity:0}, {duration: this.settings.duration, easing:this.settings.easing} );

$(this.slides).eq(index).stop().animate( {opacity:1}, {duration: this.settings.duration, easing:this.settings.easing} );

}else {

this.wrapper.stop().animate( obj, {duration: this.settings.duration, easing:this.settings.easing} );

}

return this;

jumping:function( no, manual ){

this.stop();

if( this.currentNo == no ) return;

var obj = eval("({'"+this.directionMode[0]+"':-"+(this.maxSize*no)+"})");

this.onProcessing( null, manual, 0, this.maxSize )

.fxStart( no, obj, this )

.finishFx( manual );

this.currentNo = no;

next:function( manual , item){

this.currentNo += (this.currentNo < this.slides.length-1) ? 1 : (1 - this.slides.length);

this.onProcessing( item, manual, 0, this.maxSize )

.fxStart( this.currentNo, this.getObjectDirection(this.maxSize ), this )

.finishFx( manual );

previous:function( manual, item ){

this.currentNo += this.currentNo > 0 ? -1 : this.slides.length - 1;

this.onProcessing( item, manual )

.fxStart( this.currentNo, this.getObjectDirection(this.maxSize ), this )

.finishFx( manual );

play:function( delay, direction, wait ){

this.stop();

if(!wait){ this[direction](false); }

var self = this;

this.isRun = setTimeout(function() { self[direction](true); }, delay);

stop:function(){

if (this.isRun == null) return;

clearTimeout(this.isRun);

this.isRun = null;

}

})

})(jQuery)

//]]>

</script>

//<![CDATA[

imgr = new Array();

showRandomImg = true;

aBold = true;

summaryPost = 60;

summaryPost1 = 200;

summaryTitle = 20;

numposts = 10;

//]]>

</script>

Nota: Si ya utilizas un script jQuery, ya no tendrás que poner solo el código que está marcado de color amarillo, y si no utilizas ningún jQuery inserta todo el código tal como está.

6 Ahora con mucho cuidado vamos a dar un clic en la pestaña que dice “Ir al widget”, mire la imagen

Y vamos a dar un clic en el “Header1” para que nos muestre el código directamente en donde tendremos que insertar nuestra última línea de código

Al dar un clic en “Header1” nos mostrara un código similar al siguiente, mira la imagen

En este punto con calma vamos a buscar la última línea del cierre que dice </div> en el cual abajo de ella vamos a insertar el siguiente código:

<li><a href='#'>Noticias</a>

<ul>

<li><a class='trigger' href='#'>Noticias 1</a></li>

<li><a class='trigger' href='#'>Noticias 2</a></li>

<li><a class='trigger' href='#'>Noticias 3</a></li>

</ul>

</li>

<li><a href='#'>Deportes</a>

<ul>

<li><a class='trigger' href='#'>Deportes 1</a></li>

<li><a class='trigger' href='#'>Deportes 2</a></li>

<li><a class='trigger' href='#'>Deportes 3</a></li>

</ul>

</li>

<li><a href='#'>Entretenimiento</a>

<ul>

<li><a class='trigger' href='#'>Entretenimiento 1</a></li>

<li><a class='trigger' href='#'>Entretenimiento 2</a></li>

<li><a class='trigger' href='#'>Entretenimiento 3</a></li>

</ul>

</li>

<ul>

</ul>

</li>

<li><a href='#'>Economía</a>

<ul>

<li><a class='trigger' href='#'>Economía 1</a></li>

<li><a class='trigger' href='#'>Economía 2</a></li>

<li><a class='trigger' href='#'>Economía 3</a></li>

</ul>

</li>

<li><a href='#'>Tiempo</a>

<ul>

<li><a class='trigger' href='#'>Tiempo 1</a></li>

<li><a class='trigger' href='#'>Tiempo 2</a></li>

<li><a class='trigger' href='#'>Tiempo 3</a></li>

</ul>

</li>

<li><a href='#'>Descargas</a>

<ul>

<li><a class='trigger' href='#'>Descargas 1</a></li>

<li><a class='trigger' href='#'>Descargas 2</a></li>

<li><a class='trigger' href='#'>Descargas 3</a></li>

</ul>

</li>

<li><a href='#'>Música</a>

<ul>

<li><a class='trigger' href='#'>Música 1</a></li>

<li><a class='trigger' href='#'>Música 2</a></li>

<li><a class='trigger' href='#'>Música 3</a></li>

</ul>

</li>

<li><a href='#'>Contactos</a></li>

</ul>

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<b:section class='slide' id='slide' preferred='yes'>

<b:widget id='HTML100' locked='false' title='Slider' type='HTML'>

<b:includable id='main'>

<b:if cond='data:title != ""'>

</b:if>

<data:content/>

</div>

</b:includable>

</b:widget>

</b:section>

</div>

</b:if>

</div>

Realiza estos cambios:

He marcado de tres diferentes colores en el menú, de los cuales ustedes tendrán que realizar sus respectivos cambios

Cambia los símbolos numerales # por la URL del post que quieras mostrar

Las palabras que están marcadas de color rojo son los títulos de las pestañas principales del menú, cámbialas por los nombres que tú quieras

Las palabras que están marcadas de color verde son los submenús, bórralos y pon los nombres que se ajusten a tu blog.

Ahora si es momento de dar un clic en “Guardar plantilla”

7 Nos dirigimos a “Diseño” y encontraremos un widget que tiene como nombre “Slider” vamos abrirlo y a insertar las siguientes líneas de codigo en su interior

document.write("<script src=\"/feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");

</script>

</ul>

</div>

document.write("<script src=\"/feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");

</script>

</ul>

</div>

Una vez insertado el código vamos a dar un clic en “Guardar” y dejarlo en la ubicación que estaba y no moverlo de ahí.

NOTAS:
Para cambiar el color del fondo: busca este código en el paso 4 background:#B40404 cambia el código de color B40404 por el numero de color que tu quieras.

MODOS FUSION

2014-10-31T05:14:00.000-07:00

Descripciones de los modos de fusión

Seleccione la opción deseada en el menú emergente Modo de la barra de opciones.

Nota: para las imágenes de 32 bits, solo se encuentran disponibles los modos de fusión Normal, Disolver, Oscurecer, Multiplicar, Aclarar, Sobreexposición lineal (Añadir), Diferencia, Tono, Saturación, Color, Luminosidad, Color más claro y Color más oscuro.

Normal

Edita o pinta cada píxel para darle el color resultante. Es el modo por defecto. (El modo Normal se llama Umbralcuando se trabaja con imágenes de mapa de bits o de color indexado).

Disolver

Edita o pinta cada píxel para darle el color resultante. Sin embargo, el color resultante es una sustitución aleatoria de los píxeles por el color base o el color de fusión, dependiendo de la opacidad de cada posición del píxel.

Detrás

Edita o pinta solo la parte transparente de una capa. Este modo solo funciona en capas con la opción Bloquear transparencia sin seleccionar y es similar a pintar en la parte posterior de las áreas transparentes de una hoja de acetato.

Borrar

Edita o pinta cada píxel y lo hace transparente. Este modo está disponible para las herramientas de forma (cuando se selecciona una región de relleno ), la herramienta Bote de pintura , la herramienta Pincel , la herramienta Lápiz , el comando Rellenar y el comando Trazo. Para poder utilizar este modo debe estar en una capa con la opción Bloquear transparencia sin seleccionar.

Oscurecer

Busca la información de color de cada canal y selecciona el color base o el de fusión, el que sea más oscuro, como color resultante. Los píxeles más claros que el color de fusión se reemplazarán y los más oscuros no cambiarán.

Multiplicar

Busca la información de color de cada canal y multiplica el color base por el color de fusión. El color resultante siempre es un color más oscuro. Multiplicar cualquier color por negro produce negro. Multiplicar cualquier color por blanco no cambia el color. Si está pintando con un color distinto del blanco o el negro, los sucesivos trazos con una herramienta de pintura producen colores cada vez más oscuros. El efecto es similar a dibujar en la imagen con diferentes marcadores mágicos.

Subexponer color

Busca la información de color de cada canal y oscurece el color base para reflejar el color de fusión mediante el aumento del contraste entre ambos. Fusionar con blanco no produce cambios.

Subexposición lineal

Busca la información de color de cada canal y oscurece el color base para reflejar el color de fusión disminuyendo el brillo. Fusionar con blanco no produce cambios.

Aclarar

Busca la información de color de cada canal y selecciona el color base o el de fusión, el que sea más claro, como color resultante. Los píxeles más oscuros que el color de fusión se reemplazarán y los más claros no cambiarán.

Trama

Busca la información de color de cada canal y multiplica los colores contrarios al color base y al de fusión. El color resultante siempre es un color más claro. Tramar con negro no cambia el color. Tramar con blanco genera blanco. El efecto es similar al que se obtiene al proyectar varias diapositivas una encima de otra.

Sobreexponer color

Busca la información de color de cada canal e ilumina el color base para reflejar el color de fusión mediante la disminución del contraste entre ambos. Fusionar con negro no produce cambios.

Sobreexposición lineal (Añadir)

Busca la información de color de cada canal e ilumina el color base para reflejar el color de fusión aumentando el brillo. Fusionar con negro no produce cambios.

Superponer

Multiplica o trama los colores, dependiendo del color base. Los motivos o los colores se superponen sobre los píxeles existentes al mismo tiempo que se mantienen las iluminaciones y las sombras del color base. El color de fusión no sustituye al color base, pero sí se mezcla con él para reflejar la luminosidad u oscuridad del color original.

Luz suave

Oscurece o aclara los colores, dependiendo del color de fusión. El efecto es similar al que se obtiene al iluminar la imagen con un foco difuso. Si el color de fusión (origen de la luz) es más claro que un 50% de gris, la imagen se aclarará como si estuviera sobreexpuesta. Si el color de fusión es más oscuro que un 50% de gris, la imagen se oscurecerá como si se quemara. Pintar con colores blancos o negros puros produce un área mucho más oscura o clara, pero no da como resultado blancos o negros puros.

Luz fuerte

Multiplica o trama los colores, dependiendo del color de fusión. El efecto es similar al que se obtiene al iluminar la imagen con un foco intenso. Si el color de fusión (origen de la luz) es más claro que un 50% de gris, la imagen se aclarará como si se tramara. Esto resulta útil para añadir iluminaciones a una imagen. Si el color de fusión es más oscuro que un 50% de gris, la imagen se oscurecerá como si se multiplicara. Esto resulta útil para añadir sombras a una imagen. Pintar con negros o blancos puros genera negros o blancos puros.

Luz intensa

Subexpone o sobreexpone los colores aumentando o disminuyendo el contraste, dependiendo del color de fusión. Si el color de fusión (origen de la luz) es más claro que un 50% de gris, la imagen se aclarará disminuyendo el contraste. Si el color de fusión es más oscuro que un 50% de gris, la imagen se oscurecerá aumentando el contraste.

Luz lineal

Subexpone o sobreexpone los colores aumentando o disminuyendo el brillo, dependiendo del color de fusión. Si el color de fusión (origen de la luz) es más claro que un 50% de gris, la imagen se aclarará aumentando el brillo. Si el color de fusión es más oscuro que un 50% de gris, la imagen se oscurecerá disminuyendo el brillo.

Luz focal

Reemplaza el color, dependiendo del color de fusión. Si el color de fusión (origen de la luz) es más claro que un 50% de gris, los píxeles más oscuros que el color de fusión se reemplazarán y los más claros no cambiarán. Si el color de fusión es más oscuro que un 50% de gris, los píxeles más claros que el color de fusión se reemplazarán y los más oscuros no cambiarán. Esto resulta útil para añadir efectos especiales a una imagen.

Mezcla definida

Añade los valores de los canales rojo, verde y azul del color de fusión a los valores RGB del color base. Si la suma resultante en algún canal es igual o superior a 255, recibe el valor 255; en cambio, si es inferior a 255, el valor recibido es 0. Por lo tanto, todos los píxeles fusionados cuentan con 0 ó 255 como valores de los canales rojo, verde y azul. Así, todos los píxeles se cambian a los colores aditivos primarios (rojo, verde o azul), blanco o negro.

Nota: en las imágenes CMYK, Mezcla definida cambia todos los píxeles a los colores sustractivos primarios (cian, amarillo o magenta), blanco o negro. El valor de color máximo es 100.

Diferencia

Busca la información de color de cada canal y resta el color de fusión del color base, o al contrario, dependiendo de cuál tenga mayor valor de brillo. Fusionar con blanco invierte los valores del color base; fusionar con negro no produce cambios.

Exclusión

Crea un efecto similar pero más bajo de contraste que el modo Diferencia. Fusionar con blanco invierte los valores del color base. Fusionar con negro no produce cambios.

Restar

Busca la información de color de cada canal y resta color de fusión al color base. En imágenes de 8 y 16 bits, los valores negativos resultantes se recortan en cero.

Dividir

Busca la información de color de cada canal y divide el color de fusión del color base.

Tono

Crea un color resultante con la luminancia y la saturación del color base y el tono del color de fusión.

Saturación

Crea un color resultante con la luminancia y el tono del color base y la saturación del color de fusión. Pintar con este modo en un área sin saturación (0) (gris) no provoca cambios.

Color

Crea un color resultante con la luminancia del color base y el tono y la saturación del color de fusión. Los niveles de gris de la imagen se mantienen y resulta útil para colorear imágenes monocromas y matizar imágenes de color.

Luminosidad

Crea un color resultante con el tono y la saturación del color base y la luminancia del color de fusión. Este modo crea el efecto contrario al modo Color.

Color más claro

Compara el total de los valores de todos los canales tanto para el color fusionado como para el color base y muestra el color cuyo valor sea más elevado. El modo Color más claro no produce ningún otro color distinto que pueda ser el resultado de la fusión Aclarar ya que selecciona los valores de canal más altos tanto del color fusionado como del color base para crear el color resultante.

Color más oscuro

Compara el total de los valores de todos los canales tanto para el color fusionado como para el color base y muestra el color cuyo valor sea más bajo. El modo Color más oscuro no produce ningún otro color distinto que pueda ser el resultado de la fusión Oscurecer ya que selecciona los valores de canal más bajos tanto del color fusionado como del color base para crear el color resultante.

Ejemplos de modos de fusión

Estos ejemplos muestran el resultado de pintar parte de la cara de la imagen utilizando cada modo de fusión.

Para ver un vídeo sobre los modos de fusión, visite www.adobe.com/go/vid0012.

Imagen original	Normal, 100% de opacidad	Normal, 50% de opacidad	Disolver, 50% de opacidad
Detrás	Borrar	Oscurecer	Multiplicar
Subexponer color	Subexposición lineal	Aclarar	Trama
Sobreexponer color	Sobreexposición lineal (Añadir)	Superponer	Luz suave
Luz fuerte	Luz intensa	Luz lineal	Luz focal
Mezcla definida	Diferencia	Exclusión	Restar
Dividir	Tono	Saturación	Color
Luminosidad, 80% de opacidad	Color más claro	Color más oscuro

Efecto LLuvia

2014-10-31T05:08:00.004-07:00

Paso 1

Empieza con una imagen con mucha luz y de alta resolución.

Paso 2

A continuación crea una nueva capa, rellena la nueva capa con blanco o negro y añad ruido a la iamgen. Puedes usar gausiano o uniforme, no importa, pero marca la casilla monocromático. Asegúrate de que el nivel es bastante alto.

Paso 3

Una vez que el ruido ha sido añadido aplica Filtro > Desenfocar > Desenfoque de Movimiento y configura el ángulo en la dirección que quieres que caiga la lluvia. Además aumenta la distancia hasta que quede similar a la imagen que viene a continuación:

Paso 4

Ahora vamos a poner el modo de fusión de la capa a Oscurecer, esto eliminará la parte negra.

Paso 5

Configura los niveles de la capa a tu gusto, mientras más cerca estén los punteros menos lluvia tendrás. (Imagen > Ajustes > Niveles)

Paso 6

Crea una nueva capa y ponla entre la imagen de fondo y la capa de lluvia. Crea un degradado de blanco a negro en esta nueva capa y arrastra el degradado solamente desde la mitad hacia arriba, de forma que la parte negra quede arriba. Seguidamente aplica el modo de fusión Mutliplicar en esta capa y reduce la opacidad si lo deseas.

Paso 7

A continuación vuelve a la imagen de fondo, la que tiene el coche, y rebaja el brillo hasta que coincida con el degradado oscuro que acabas de añadir. Esto debe oscurecer toda la imagen dándole un aspecto sombrío.

EFECTO POP ART

2014-10-31T05:08:00.000-07:00

EFECTO ANDY WARHOL

Este cuadro se ha convertido en un icono de la modernidad y su particular estética se ha extendido hasta llegar, cómo no, a los aficionados a Photoshop.

No se trata de imitar con exactitud al artista estadounidense, si no más bien dar un toque gracioso a una foto o crear algo propio aprovechando el ingenio de Warhol.

En primer lugar debemos conseguir una imagen que tenga gran contraste entre el rostro y el color que rodea al modelo ya que tendremos que quitar el fondo y conviene que exista . (Una foto de carné en estudio sería perfecta).

Paso 1

Abrimos la foto y duplicamos la capa.

Paso 2

Ahora separamos la imagen del fondo. Para ello usamos el selector mágico (W). Con él escogemos las partes del fondo y las borramos pulsando Suprimir.

Paso 3

Desaturamos la capa duplicada en Imagen >> Ajustes >> Desaturar

Paso 4

Ajustamos los niveles en Imagen >> Ajustes >> Niveles. Debemos procurar conseguir un aspecto similar al que aparece en la foto, pero los valores dependen de las características de la imagen. En este caso hemos utilizado: 150 1,00 164

Paso 5

Aplicamos un filtro de cuarteado. Filtro >> Artístico >> Cuarteado (cutout). En esta ocasión hemos aplicado los siguientes valores: Número de niveles 5, Simplicidad del borde 2 y Fidelidad del borde 1

Paso 6

Dejamos la capa en modo oscurecer.

7. Creamos una segunda capa (Shift+Ctrl+N) y la situamos entre la imagen de fondo y la segunda capa arrastrándola.

Paso 8

Seleccionamos un color y lo volcamos sobre la segunda capa con el cubo de pintura G. Para no salirnos del cuerpo utilizaremos la herramienta seleccionar (M). De esta forma, trazaremos cuadrados y volcaremos el cubo dentro.

Paso 9

Seleccionamos otro color y volcamos el cubo en el fondo.

Paso 10

Ya tenemos una de las imágenes que forman parte de la composición. Creamos un nuevo documento (Ctrl+N) de un tamaño que pueda albergar las cuatro fotos y copiamos en él la primera imagen. Para hacerlo correctamente deberemos seleccionar todo y pulsar Edit >> Copy Merged. De esta manera copiaremos todas las capas. Después las pegamos en el nuevo documento.

Paso 11

Por último, sólo hay que volver a la imagen de trabajo y deshacer los últimos pasos en el historial, regresando al punto 8 y repetir el proceso con otros colores.

FOTOMONTAJE

2014-10-31T05:06:00.002-07:00

Se le debe dar clic derecho en la imagen en donde se aplico la herramienta Lazo Poligonal y se le da clic en la opción Perfeccionar Bordes, a la hora de dar clic en perfeccionar bordes no se debe expandir ni contraer en un 100%, Luego se suaviza, se cala y se balancea la imagen dependiendo del gusto del usuario.

Se selecciona la herramienta Mover y se mueve la foto de la persona, después se suelta la foto hasta donde se encuentra la siguiente imagen, luego se le da zoom a la imagen, se selecciona la imagen dándole clic en la tecla control y la tecla T al mismo tiempo donde solo se encuentra la foto. Luego se irá modificando el tamaño de la imagen y se le dará a aceptar para que se quite la herramienta usada y así termine el fotomontaje.

FUSION

2014-10-31T05:05:00.003-07:00

Deberás montar las fotos de partida sobre un mismo lienzo. En mi caso, como una foto es apaisada y la otra vertical, he copiado la vertical sobre la apaisada (selecciono la imagen vertical, Crtl+A, Crtl+C, selecciono la imagen apaisada, Crtl+V). Para ello, en el paso anterior ajusté los tamaños con el propósito de que la dimensión altura coincidiera en ambas fotos. Es necesario que en el montaje,cada una de las imágenes se encuentre en una capa distinta para poder trabajar la fusión. La posición relativa de cada una de las imagenes debe ser la adecuada para conseguir la composición que estás buscando. Si de momento no la tienes clara, no te preocupes: simpre podrás mover las capas posteriormente.