Coloca una cajita de Publicidad y Anuncios en tu blog

Buenas tardes everybody!!! ＼(・｀(ｪ)・)/ KUMA'S HERE!!!!!!!!!!!!!!! ¿Cómo están? Yo estoy de maravillas (✪㉨✪) Estoy tan emocionada porque en 7 días ya será primero de Enero. Nuevo año, nuevas cosas, nuevas experiencias (*-*) NUEVO TODO!!! ...........OK! sin tanto barullo(?) iniciemos con esto. Y este tutorial llega gracias a pedido de la linda Kumy de clasic and Love.

No se si ya han notado la cajita de publicidad que coloque en la sección superior del blog. Bueno si no lo vieron (lo cual dudo jajaja) abajo dejo una captura animada que hice de el y, comencemos ya con este tutorial.

¿CHULÍSIMO VERDAD?

Recuerda siempre, antes de modificar algo en tu platilla (template), descargar una copia de ella.

Código del scrip (efecto)

1ro: Vas a 'Plantilla → Edición de HTML → Continuar'.
2do: Ahora dale al botón F3 y escribe </body>
3ro: Antes de este pega el sgte. código.

<script type='text/javascript'>//<![CDATA[ /* * jQuery Nivo Slider v2.3 * http://nivo.dev7studios.com * * Copyright 2010, Gilbert Pellegrom * Free to use and abuse under the MIT license. * http://www.opensource.org/licenses/mit-license.php */ (function(b){var a=function(j,q){var g=b.extend({},b.fn.nivoSlider.defaults,q);var m={currentSlide:0,currentImage:"",totalSlides:0,randAnim:"",running:false,paused:false,stop:false};var d=b(j);d.data("nivo:vars",m);d.css("position","relative");d.addClass("nivoSlider");var e=d.children();e.each(function(){var t=b(this);var s="";if(!t.is("img")){if(t.is("a")){t.addClass("nivo-imageLink");s=t}t=t.find("img:first")}var r=t.width();if(r==0){r=t.attr("width")}var i=t.height();if(i==0){i=t.attr("height")}if(r>d.width()){d.width(r)}if(i>d.height()){d.height(i)}if(s!=""){s.css("display","none")}t.css("display","none");m.totalSlides++});if(g.startSlide>0){if(g.startSlide>=m.totalSlides){g.startSlide=m.totalSlides-1}m.currentSlide=g.startSlide}if(b(e[m.currentSlide]).is("img")){m.currentImage=b(e[m.currentSlide])}else{m.currentImage=b(e[m.currentSlide]).find("img:first")}if(b(e[m.currentSlide]).is("a")){b(e[m.currentSlide]).css("display","block")}d.css("background","url("+m.currentImage.attr("src")+") no-repeat");for(var k=0;k<g.slices;k++){var o=Math.round(d.width()/g.slices);if(k==g.slices-1){d.append(b('<div class="nivo-slice"></div>').css({left:(o*k)+"px",width:(d.width()-(o*k))+"px"}))}else{d.append(b('<div class="nivo-slice"></div>').css({left:(o*k)+"px",width:o+"px"}))}}d.append(b('<div class="nivo-caption"></div>').css({display:"none",opacity:g.captionOpacity}));if(m.currentImage.attr("title")!=""){var n=m.currentImage.attr("title");if(n.substr(0,1)=="#"){n=b(n).html()}b(".nivo-caption p",d).html(n);b(".nivo-caption",d).fadeIn(g.animSpeed)}var c=0;if(!g.manualAdvance&&e.length>1){c=setInterval(function(){p(d,e,g,false)},g.pauseTime)}if(g.directionNav){d.append('<div class="nivo-directionNav"><a class="nivo-prevNav">Prev</a><a class="nivo-nextNav">Next</a></div>');if(g.directionNavHide){b(".nivo-directionNav",d).hide();d.hover(function(){b(".nivo-directionNav",d).show()},function(){b(".nivo-directionNav",d).hide()})}b("a.nivo-prevNav",d).live("click",function(){if(m.running){return false}clearInterval(c);c="";m.currentSlide-=2;p(d,e,g,"prev")});b("a.nivo-nextNav",d).live("click",function(){if(m.running){return false}clearInterval(c);c="";p(d,e,g,"next")})}if(g.controlNav){var l=b('<div class="nivo-controlNav"></div>');d.append(l);for(var k=0;k<e.length;k++){if(g.controlNavThumbs){var f=e.eq(k);if(!f.is("img")){f=f.find("img:first")}if(g.controlNavThumbsFromRel){l.append('<a class="nivo-control" rel="'+k+'"><img src="'+f.attr("rel")+'" alt="" /></a>')}else{l.append('<a class="nivo-control" rel="'+k+'"><img src="'+f.attr("src").replace(g.controlNavThumbsSearch,g.controlNavThumbsReplace)+'" alt="" /></a>')}}else{l.append('<a class="nivo-control" rel="'+k+'">'+(k+1)+"</a>")}}b(".nivo-controlNav a:eq("+m.currentSlide+")",d).addClass("active");b(".nivo-controlNav a",d).live("click",function(){if(m.running){return false}if(b(this).hasClass("active")){return false}clearInterval(c);c="";d.css("background","url("+m.currentImage.attr("src")+") no-repeat");m.currentSlide=b(this).attr("rel")-1;p(d,e,g,"control")})}if(g.keyboardNav){b(window).keypress(function(i){if(i.keyCode=="37"){if(m.running){return false}clearInterval(c);c="";m.currentSlide-=2;p(d,e,g,"prev")}if(i.keyCode=="39"){if(m.running){return false}clearInterval(c);c="";p(d,e,g,"next")}})}if(g.pauseOnHover){d.hover(function(){m.paused=true;clearInterval(c);c=""},function(){m.paused=false;if(c==""&&!g.manualAdvance){c=setInterval(function(){p(d,e,g,false)},g.pauseTime)}})}d.bind("nivo:animFinished",function(){m.running=false;b(e).each(function(){if(b(this).is("a")){b(this).css("display","none")}});if(b(e[m.currentSlide]).is("a")){b(e[m.currentSlide]).css("display","block")}if(c==""&&!m.paused&&!g.manualAdvance){c=setInterval(function(){p(d,e,g,false)},g.pauseTime)}g.afterChange.call(this)});var p=function(r,s,u,x){var y=r.data("nivo:vars");if(y&&(y.currentSlide==y.totalSlides-1)){u.lastSlide.call(this)}if((!y||y.stop)&&!x){return false}u.beforeChange.call(this);if(!x){r.css("background","url("+y.currentImage.attr("src")+") no-repeat")}else{if(x=="prev"){r.css("background","url("+y.currentImage.attr("src")+") no-repeat")}if(x=="next"){r.css("background","url("+y.currentImage.attr("src")+") no-repeat")}}y.currentSlide++;if(y.currentSlide==y.totalSlides){y.currentSlide=0;u.slideshowEnd.call(this)}if(y.currentSlide<0){y.currentSlide=(y.totalSlides-1)}if(b(s[y.currentSlide]).is("img")){y.currentImage=b(s[y.currentSlide])}else{y.currentImage=b(s[y.currentSlide]).find("img:first")}if(u.controlNav){b(".nivo-controlNav a",r).removeClass("active");b(".nivo-controlNav a:eq("+y.currentSlide+")",r).addClass("active")}if(y.currentImage.attr("title")!=""){var z=y.currentImage.attr("title");if(z.substr(0,1)=="#"){z=b(z).html()}if(b(".nivo-caption",r).css("display")=="block"){b(".nivo-caption p",r).fadeOut(u.animSpeed,function(){b(this).html(z);b(this).fadeIn(u.animSpeed)})}else{b(".nivo-caption p",r).html(z)}b(".nivo-caption",r).fadeIn(u.animSpeed)}else{b(".nivo-caption",r).fadeOut(u.animSpeed)}var w=0;b(".nivo-slice",r).each(function(){var i=Math.round(r.width()/u.slices);b(this).css({height:"0px",opacity:"0",background:"url("+y.currentImage.attr("src")+") no-repeat -"+((i+(w*i))-i)+"px 0%"});w++});if(u.effect=="random"){var A=new Array("sliceDownRight","sliceDownLeft","sliceUpRight","sliceUpLeft","sliceUpDown","sliceUpDownLeft","fold","fade");y.randAnim=A[Math.floor(Math.random()*(A.length+1))];if(y.randAnim==undefined){y.randAnim="fade"}}if(u.effect.indexOf(",")!=-1){var A=u.effect.split(",");y.randAnim=b.trim(A[Math.floor(Math.random()*A.length)])}y.running=true;if(u.effect=="sliceDown"||u.effect=="sliceDownRight"||y.randAnim=="sliceDownRight"||u.effect=="sliceDownLeft"||y.randAnim=="sliceDownLeft"){var t=0;var w=0;var C=b(".nivo-slice",r);if(u.effect=="sliceDownLeft"||y.randAnim=="sliceDownLeft"){C=b(".nivo-slice",r)._reverse()}C.each(function(){var i=b(this);i.css("top","0px");if(w==u.slices-1){setTimeout(function(){i.animate({height:"100%",opacity:"1.0"},u.animSpeed,"",function(){r.trigger("nivo:animFinished")})},(100+t))}else{setTimeout(function(){i.animate({height:"100%",opacity:"1.0"},u.animSpeed)},(100+t))}t+=50;w++})}else{if(u.effect=="sliceUp"||u.effect=="sliceUpRight"||y.randAnim=="sliceUpRight"||u.effect=="sliceUpLeft"||y.randAnim=="sliceUpLeft"){var t=0;var w=0;var C=b(".nivo-slice",r);if(u.effect=="sliceUpLeft"||y.randAnim=="sliceUpLeft"){C=b(".nivo-slice",r)._reverse()}C.each(function(){var i=b(this);i.css("bottom","0px");if(w==u.slices-1){setTimeout(function(){i.animate({height:"100%",opacity:"1.0"},u.animSpeed,"",function(){r.trigger("nivo:animFinished")})},(100+t))}else{setTimeout(function(){i.animate({height:"100%",opacity:"1.0"},u.animSpeed)},(100+t))}t+=50;w++})}else{if(u.effect=="sliceUpDown"||u.effect=="sliceUpDownRight"||y.randAnim=="sliceUpDown"||u.effect=="sliceUpDownLeft"||y.randAnim=="sliceUpDownLeft"){var t=0;var w=0;var B=0;var C=b(".nivo-slice",r);if(u.effect=="sliceUpDownLeft"||y.randAnim=="sliceUpDownLeft"){C=b(".nivo-slice",r)._reverse()}C.each(function(){var i=b(this);if(w==0){i.css("top","0px");w++}else{i.css("bottom","0px");w=0}if(B==u.slices-1){setTimeout(function(){i.animate({height:"100%",opacity:"1.0"},u.animSpeed,"",function(){r.trigger("nivo:animFinished")})},(100+t))}else{setTimeout(function(){i.animate({height:"100%",opacity:"1.0"},u.animSpeed)},(100+t))}t+=50;B++})}else{if(u.effect=="fold"||y.randAnim=="fold"){var t=0;var w=0;b(".nivo-slice",r).each(function(){var i=b(this);var v=i.width();i.css({top:"0px",height:"100%",width:"0px"});if(w==u.slices-1){setTimeout(function(){i.animate({width:v,opacity:"1.0"},u.animSpeed,"",function(){r.trigger("nivo:animFinished")})},(100+t))}else{setTimeout(function(){i.animate({width:v,opacity:"1.0"},u.animSpeed)},(100+t))}t+=50;w++})}else{if(u.effect=="fade"||y.randAnim=="fade"){var w=0;b(".nivo-slice",r).each(function(){b(this).css("height","100%");if(w==u.slices-1){b(this).animate({opacity:"1.0"},(u.animSpeed*2),"",function(){r.trigger("nivo:animFinished")})}else{b(this).animate({opacity:"1.0"},(u.animSpeed*2))}w++})}}}}}};var h=function(i){if(this.console&&typeof console.log!="undefined"){console.log(i)}};this.stop=function(){if(!b(j).data("nivo:vars").stop){b(j).data("nivo:vars").stop=true;h("Stop Slider")}};this.start=function(){if(b(j).data("nivo:vars").stop){b(j).data("nivo:vars").stop=false;h("Start Slider")}};g.afterLoad.call(this)};b.fn.nivoSlider=function(c){return this.each(function(){var d=b(this);if(d.data("nivoslider")){return}var e=new a(this,c);d.data("nivoslider",e)})};b.fn.nivoSlider.defaults={effect:"random",slices:15,animSpeed:500,pauseTime:3000,startSlide:0,directionNav:true,directionNavHide:true,controlNav:true,controlNavThumbs:false,controlNavThumbsFromRel:false,controlNavThumbsSearch:".jpg",controlNavThumbsReplace:"_thumb.jpg",keyboardNav:true,pauseOnHover:true,manualAdvance:false,captionOpacity:0.8,beforeChange:function(){},afterChange:function(){},slideshowEnd:function(){},lastSlide:function(){},afterLoad:function(){}};b.fn._reverse=[].reverse})(jQuery); //]]></script> <script type='text/javascript'>jQuery(window).load(function() { jQuery('#slider').nivoSlider(); }); </script>

Código para darle estilo a nuestra cajita

1ro: Otra vez usa F3 y escribe ]]></b:skin>
2do: Pega el sgte. código antes de este. Después de haberlo pegado procede a guardar la plantilla.

/* NIVO SLIDER STYLES */ #slider-container { width: 304px; height: 160px; background: #FFF; margin-bottom: 15px; } .nivoSlider { position:relative; } .nivoSlider img { position:absolute; top:0px; left:0px; } .nivoSlider a.nivo-imageLink { position:absolute; top:0px; left:0px; width:100%; height:100%; border:0; padding:0; margin:0; z-index:60; display:none; } .nivo-slice { display:block; position:absolute; z-index:50; height:100%; } .nivo-caption { position:absolute; right:0px; top:3px; background: #F37BB5; /*Fondo del texto*/ color:#fff; /*Color del texto*/ opacity:0.8; width: auto !important; max-width: 340px !important; z-index:89; display: inline !important; } .nivo-caption p { padding:5px; margin:0; font-size:20px; color: #FFF; text-align: center; font-family: 'Yanone Kaffeesatz Light', Helvetica, Arial; /*Estilos de letra*/ } .nivo-caption a { display:inline !important; color: #FFF; } .nivo-html-caption { display:none; } .nivo-directionNav a { display:none; position:absolute; top:45%; z-index:99; cursor:pointer; } .nivo-prevNav { left:0px; } .nivo-nextNav { right:0px; } .nivo-controlNav a { position: relative; z-index:99; cursor:pointer; } .nivo-controlNav a.active { font-weight:bold; } #slider { float: left; position:relative; width:340px; height:160px; background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF0905teRSMuVwvTd3o3eJNcwe9xx1qFmoUgXgsOg9tlqHiUSTeNLyZm9bT4IfcrX93UQ44LWIni9EXurt5_rrosXTaREHyEr7Y23O2DmmTAs12pTM2JFZS3t5PVM5AIuq839lH8Da8ORh/s0/loading.png) no-repeat 50% 50%; } #slider img { position:absolute; top:0px; left:0px; display:none; } #slider a { border:0; display:block; } .nivo-controlNav { position:absolute; left:230px; bottom:-40px; } .nivo-controlNav a { width:18px; height: 18px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit7pUWZAe9BVLm1QYEXA8YR7T52VOr2f2llEce-5HxnAR4skSKC-7O-dN8HH_MdiVRxoERobDtJ_KeuqVzAE3tLPJSpr6G1ZptJkENCKr74Qu3xqSULKQrwsJu0NCE2hQLwXenPHUqw9mu/s0/bullets.png) no-repeat; text-indent:-9999px; border:0; margin-right:7px; float:left; } .nivo-controlNav a.active { background-position:0 -22px; } .nivo-directionNav a { display:none; height:0px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcjWsIonwZgRJZ0YB73E0TxmjY1-vJWaHU76aBsnODVwXaX_NPTsk5eH1cQLpRWNGT814ALGBiWE3bY66GENciHnqRj5XR3LZRL8pdBM_-DRSbOe1z0ZOmdADGmjd83tnAcSr2cBWA7bz-/s0/arrows.png) no-repeat; text-indent:-9999px; border:0; } a.nivo-nextNav { background-position:-30px 0; right:15px; } a.nivo-prevNav { left:15px; } .nivo-caption { text-shadow:none; } .nivo-caption a { color:#efe9d1; text-decoration:underline; }

Como editar el estilo de nuestra cajita al final, en NOTA.

Código de nuestra cajita

1ro: Ahora ve a 'Diseño' y añade un nuevo Gadget, selecciona la opción de HTML/Javascript y pega el sgte. código.

<div id='slider-container'>
<div id='slider'>
  <a href='URL DE WEB' title='TITULO DE ANUNCIO'>
 <img alt='' src='URL DE LA IMG' title='TITULO DE ANUNCIO'/>
 </a>
  <a href='URL DE WEB' title='TITULO DE ANUNCIO'>
 <img alt='' src='URL DE LA IMG' title='TITULO DE ANUNCIO'/>
 </a>
  <a href='URL DE WEB' title='TITULO DE ANUNCIO'>
 <img alt='' src='URL DE LA IMG' title='TITULO DE ANUNCIO'/>
 </a>
   </div>
</div>
<img src="http://img22.imageshack.us/img22/1218/publico.gif" />

Guarda todo y mira tu blog. Ya tiene una sección de anuncios y publicidad en tu blog! YEY!!! (✪0✪)

NOTA:

• Lo que está pintado en morado es la URL de esta img (↓↓↓) Solo tienes que reemplazarla con una tuya en la que esté tu correo o colocar cualquier otro mensaje (el que gustes), o puedes eliminarla. Si deseas puedo editar una imagen para que se adapte a tu blog (se aceptan pedido ^^).

• Las imágenes deben ser de un ancho (width) y alto (height) de 304px y 160px, respectivamente. Para que se vean de tamaño completo y no salga cortadas por abajo y la derecha.
• Por último. Para darle tu propio estilo a la cajita puedes: Cambiar el color de texto y fondo del mismo, solo modifica donde dice  background: #F37BB5; /*Fondo del texto*/  y  color:#fff; /*Color del texto*/  ...Y finalmente ponle el tipo de letra que quieras en  font-family: 'Yanone Kaffeesatz Light', Helvetica, Arial; /*Estilos de letra*/  Cambia Yanone (es el que yo uso) por cualquiera de las otras a su derecha como Helvetica o Arial.
• Recuerda que el estilo de letra (fuente) que quieras usar siempre debe de estar entre comilla. Por ejemplo: 'nombre de fuente'. Ah! y existen muchos más fuentes solo ve a tu word y copia algún nombre de la fuente que más te guste (*-*)

OK Eso fue TODO!!! Me marcho ya, que en un rato es hora del almuerzo y hoy me toca cocinar (*O*). Hasta más tarde.  Les mando muchos besos chocolatosos (* 3*) chu~!