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
Menú desplegable y un Slideshow
3 Un clic en “Editar HTML”
Ahora se te abrirá el editor HTML de tu plantilla, se mostrara igual como la imagen que esta a continuación
En este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el
buscador integrado en la parte superior derecha de tu editor, debes esperar
unos segundos hasta que se muestre, aquí es donde tendrás que insertar el
código para buscarlo e insertar los códigos correspondientes en el editor, a
continuación mire la imagen la cual te mostrara tal y cual deberá aparecerte el buscador en tu editor HTML de tu plantilla y así puedas colocar el código
en el buscadoral momento que yo diga busca este código.
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:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'
type='text/javascript'/>
<script
src='http://yourjavascript.com/24211643151/jquery.easing.js'
type='text/javascript'/>
<script
type='text/javascript'>
jQuery(document).ready(function(){
$('#slider').lofJSidernews({
interval:6000,
duration:800,
mainWidth: 610,
navigatorWidth: 310,
maxItemDisplay:4,
easing:'easeOutBounce',
auto:true,
isPreloaded: false
});
});
</script>
<script type='text/javascript'>
//<![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
*
@copyright Copyright (C) JAN 2010 LandOfCoder.com
<@emai:landofcoder@gmail.com>. All rights reserved.
*
@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>
<script
type='text/javascript'>
//<![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 = 60;
summaryPost1 = 200;
summaryTitle = 20;
numposts = 10;
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 showrecentposts(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new
Array();for(var i=0;i<numposts;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;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='<li
style="position:relative;"><div
class="imgauto"><a href="'+posturl+'"><img
src="'+img[i]+'"/></a></div><h3><a
href="'+posturl+'">'+posttitle+'</a><p>'+daystr+' /
'+pcm+' comments</p><div
class="title">'+removeHtmlTag(postcontent,summaryPost1)+'...
</div></h3></li>';document.write(trtd);j++}}function
showrecentposts1(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new
Array();for(var i=0;i<numposts;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;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='<li><div><img
class="alignnone"
src="'+img[i]+'"/><h5>'+posttitle+'</h5><div
class="title">'+removeHtmlTag(postcontent,summaryPost)+'... </div></div></li>';document.write(trtd);j++}}
//]]>
</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:
<div
id='kenthir-wrapper'>
<ul class='menu'>
<li><a
href='/'><img alt='Inicio' src='' style='padding:0px;'/></a></li>
<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>
<li><a href='#'>Chat</a>
<ul>
<li><a
class='trigger' href='#'>Chat 1</a></li>
<li><a
class='trigger' href='#'>Chat 2</a></li>
<li><a
class='trigger' href='#'>Chat 3</a></li>
</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> <!-- end
.menu -->
<b:if cond='data:blog.url
== data:blog.homepageUrl'>
<div id='slide-wrapper'>
<b:section class='slide'
id='slide' preferred='yes'>
<b:widget id='HTML100' locked='false' title='Slider'
type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<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
<div
class='lof-main-wapper' id='slider'>
<div
class='slider-main-outer'>
<ul
class='slider-main-wapper'>
<script>
document.write("<script
src=\"/feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script>
</ul>
</div>
<div
class='slider-navigator-outer'>
<ul
class='slider-navigator'>
<script>
document.write("<script
src=\"/feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
</script>
</ul>
</div>
</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.
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.