JUEGOS EXCEL
lunes, 25 de abril de 2022
jueves, 7 de abril de 2022
Crear un menú desplegable en Blogger
Para ello, creó un blog de pruebas, seleccionó una plantilla de Blogger que viene predefinida, con un menú en la parte superior, o con un espacio para situar el menú.
Para comenzar vaya a la opción Diseño del menú que se encuentra a la izquierda de nuestra área de trabajo.
Localice la sección donde va a situar el menú, haga clic en la opción Añadir un gadget .
Le mostrará el siguiente cuadro de diálogo, en este, seleccione la opción HTML/JavaScript .
Una vez nos muestra el cuadro de diálogo, introduzca el título, copie y pegue el siguiente código escrito en lenguaje HTML :
<div id="navmenu">
<div id="navmenu">
<div id="navmenuleft">
<ul id="nav">
<li><a href="urldestino">opcion1</a></li>
<li>
<li><a href="urldestino">opcion2</a></li>
<li>
<a href="#">opcion3</a>
<ul>
<li><a href="urldestino">opcion31</a></li>
<li><a href="urldestino">opcion32</a></li>
</ul>
</li>
<li>
<a href="#">opcion4</a>
<ul>
<li><a href="urldestino">opcion41</a></li>
<li><a href="urldestino">opcion42</a></li>
</ul>
</li>
<li><a href="urldestino">opcion5</a></li>
</li>
<li><a href="urldestino">opcion6</a></li>
</ul>
</div>
</div>
Instrucción href, ver página .
Instrucción ul y li, ver página .
Haga clic en el botón Guardar .
Bonito Rotador de imágenes automático
Este es un bonito rotador de imagenes automático, hecho a base de css y JavaScript, y lo puedes ver en acción en el siguiente blog de pruevas.
Si te gusto este rotador lo puedes hacer de la siguiente manera:
1.- Nos vamos a Diseño/Edición de HTML tecleamos Ctrl+F y buscamos la etiqueta </head> y sobre ella pegamos lo siguiente:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
//Set Default State of each portfolio piece
$(".paging").show();
$(".paging a:first").addClass("active");
//Get size of images, how many there are, then determin the size of the image reel.
var imageWidth = $(".window").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;
//Adjust the image reel to its new size
$(".image_reel").css({'width' : imageReelWidth});
//Paging + Slider Function
rotate = function(){
var triggerID = $active.attr("rel") - 1; //Get number of times to slide
var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
$(".paging a").removeClass('active'); //Remove all active class
$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
//Slider Animation
$(".image_reel").animate({
left: -image_reelPosition
}, 500 );
};
//Rotation + Timing Event
rotateSwitch = function(){
play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
$active = $('.paging a.active').next();
if ( $active.length === 0) { //If paging reaches the end...
$active = $('.paging a:first'); //go back to first
}
rotate(); //Trigger the paging and slider function
}, 6000); //Duracion de tiempo en rotar (6 segundos)
};
rotateSwitch(); //Run function on launch
//On Hover
$(".image_reel a").hover(function() {
clearInterval(play); //Stop the rotation
}, function() {
rotateSwitch(); //Resume rotation
});
//On Click
$(".paging a").click(function() {
$active = $(this); //Activate the clicked paging
//Reset Timer
clearInterval(play); //Stop the rotation
rotate(); //Trigger rotation immediately
rotateSwitch(); // Resume rotation
return false; //Prevent browser jump to link anchor
});
});
</script>
2.- Ha hora toca el CSS, para eso buscamos ]]></b:skin> y encima pegamos estos codigos:
/*--Main Container--*/Una vez hecho los pasos anteriores, GUARDAMOS PLATILLA.
.main_view {
float: left;
position: relative;
}
/*--Window/Masking Styles--*/
.window {
height:260px; width: 490px;/*--TAMAÑO DEL ROTADOR DE IMAGENES--*/
overflow: hidden; /*--Hides anything outside of the set width/height--*/
position: relative;
}
.image_reel {
position: absolute;
top: 0; left: 0;
}
.image_reel img {
height:260px; width: 490px;/*--TAMAÑO DE LAS IMAGENES--*/
float: left;
}
/*--Paging Styles--*/
.paging {
position: absolute;
bottom: 10px; right: -2px;
width: 178px; height:47px;
z-index: 100; /*--Assures the paging stays on the top layer--*/
text-align: center;
line-height: 40px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSXut0MJbhjrZe_duKYomdWjtPh9nHyiD_N_os5k6vb1kCjN_g6vy48QidX4FOR47JamczmERZIezfr7bAsgQaNTVdncEXszc0iESrb6bdMOcUfDv9x1j77BivSgyrIwxscEQpyb9iOjY/s1600/paging_bg2.png) no-repeat;
display: none; /*--Hidden by default, will be later shown with jQuery--*/
}
.paging a {
padding: 5px;
text-decoration: none;
color: #fff;
}
.paging a.active {
font-weight: bold;
background: #920000;
border: 1px solid #610000;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
}
.paging a:hover {font-weight: bold;}
3.- Para verlo en acción en nuestro blog, vamos a Diseño/Añadir un gadget/HTML/Javascript y pegamos lo siguiente:
<div class='main_view'>
<div class='window'>
<div class='image_reel'>
<a href='URL DE TU ENLACE1'><img alt='' src='URL DE TU IMAGEN1'/></a>
<a href='URL DE TU ENLACE2'><img alt='' src='URL DE TU IMAGEN2'/></a>
<a href='URL DE TU ENLACE3'><img alt='' src='URL DE TU IMAGEN3'/></a>
<a href='URL DE TU ENLACE4'><img alt='' src='URL DE TU IMAGEN4'/></a>
</div>
</div>
<div class='paging'>
<a href='URL DE TU ENLACE1' rel='1'>1</a>
<a href='URL DE TU ENLACE2' rel='2'>2</a>
<a href='URL DE TU ENLACE3' rel='3'>3</a>
<a href='URL DE TU ENLACE4' rel='4'>4</a>
</div>
</div>
Suscribirse a:
Entradas (Atom)