miércoles, 23 de febrero de 2022

miércoles, 16 de febrero de 2022

menú desplegable

Busqué un blog que me ayudó

¿Cómo crear un menú desplegable?

Un menú desplegable adicional, es cuando se tiene demasiado contenido en su blog o web o te gusta mantener las cosas bien organizadas. Para agregar un menú desplegable para blogs de Blogger haga lo siguiente:

Un clic en Diseño

ngrese las siguientes lineas de código en su interior

<style>
#adbnavbar {
    background: #060505;
    width: 960px;
    color: #FFF;
        margin: 0px;
        padding: 0;
        position: relative;
        border-top:0px solid #960100;
        height:35px;
}
#adbnav {
    margin: 0;
    padding: 0;
}
#adbnav ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}
#adbnav li {
    list-style: none;
    margin: 0;
    padding: 0;
        border-left:1px solid #333;
        border-right:1px solid #333;
        height:35px;
}
#adbnav li a, #adbnav li a:link, #adbnav li a:visited {
    color: #FFF;
    display: block;
   font:normal 12px Helvetica, sans-serif;    margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
}
#adbnav li a:hover, #adbnav li a:active {
    background: #BF0100;
    color: #FFF;
    display: block;
    text-decoration: none;
        margin: 0;
    padding: 9px 12px 10px 12px;
}
#adbnav li {
    float: left;
    padding: 0;
}
#adbnav li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 160px;
    margin: 0;
    padding: 0;
}
#adbnav li ul a {
    width: 140px;
}
#adbnav li ul ul {
    margin: -25px 0 0 161px;
}
#adbnav li:hover ul ul, #adbnav li:hover ul ul ul, #adbnav li.sfhover ul ul, #adbnav li.sfhover ul ul ul {
    left: -999em;
}
/*--www.ayudadeblogger.com
  www.abogadosasociados.com www.volantedeportivo.com Drop Down Menu ----*/
#adbnav li:hover ul, #adbnav li li:hover ul, #adbnav li li li:hover ul, #adbnav li.sfhover ul, #adbnav li li.sfhover ul, #adbnav li li li.sfhover ul {
    left: auto;
}
#adbnav li:hover, #adbnav li.sfhover {
    position: static;
}
#adbnav li li a, #adbnav li li a:link, #adbnav li li a:visited {
    background: #BF0100;
    width: 120px;
    color: #FFF;
    display: block;
    font:normal 12px Helvetica, sans-serif;
    margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
z-index:9999;
border-bottom:1px dotted #333;
}
#adbnav li li a:hover, #adbnavli li a:active {
    background: #060505;
    color: #FFF;
    display: block;     margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
}
</style>

<div id='adbnavbar'>
<ul id='adbnav'>
   <li>
    <a href='/'>Inicio</a>
        </li>
        <li>
    <a href='#'>Temas</a>
       </li>
        <li>
   <a href='#'>Contactos</a>
      </li>
 <li>

  <a href='#'>Noticias</a>
         <ul>
         <li><a href='#'>Nombre 1</a></li>
         <li><a href='#'>Nombre 2</a></li>
         <li><a href='#'>Nombre 3</a></li>
         </ul>
    </li>
  </ul>
 </div>

Reemplace # con las URLs de sus entradas y el texto en negrita Nombre 1 con el nombre de las páginas pertinentes.

Para añadir otra pestaña simplemente pega este código antes del cierre </ul>

<li>   <a href='#'>Nombre 4</a>  </li>

Listo ahora ya tienes este menú horizontal con submenús en tu blog de Blogger

Si deseas puedes realizar algunos cambios:

Para cambiar el color de fondo del menú principal, cambia #060505
Para cambiar el fondo de una ficha con el ratón estacionario, cambia #BF0100
Para cambiar el color de fondo del menú desplegable, cambia #BF0100
Para cambiar el color de fondo del menú desplegable al pasar el ratón estacionario, cambia #060505

lunes, 26 de abril de 2021

ASIGNATURA-DOCENTE	LINK DE DESCARGA
QUÍMICA-MANUEL RODRIGUEZ	TALLER Nº 5
CIENCIAS POLÍTICAS Y ECONÓMICAS-YAKELINE TALERO	TALLER Nº 5
EDUCACIÓN FÍSICA-GEOVANNY	TALLER Nº 5
RELIGIÓN Y ÉTICA. LUIS VALDERRAMA	TALLER Nº 5
CÁLCULO-JESUS ANTONIO ROJAS	TALLER Nº 5
LENGUA CASTELLANA-TATIANA ROMERO	TALLER Nº 5
FÍSICA MANUEL HERRERA	TALLER Nº 5
DANZA-CELIA MEDELLIN	TALLER Nº 5
FILOSOFÍA RAUL MENDIVELSO	TALLER Nº 5
ENGLISH TODOS LOS NIVELES	TALLER Nº 5
TECNOLOGÍA E INFORMÁTICA - RAUL PATIÑO	TALLER Nº 5

ACTIVIDAD 4 FUNCIONES EN EXCEL

Para ver el archivo haga clic en siguiente enlace

mi trabajo de excel 4

miércoles, 17 de marzo de 2021

HERRAMIENTAS DIGITALES

HAGA CLIC EN EL PERIODO Y SELECCIONE EL TEMA

miércoles, 10 de marzo de 2021

TECHNOLOGY TOOLS

TECHNOLGY

lunes, 1 de marzo de 2021

rotador

26 Junio 2011

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--*/
.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/AVvXsEjnV194RraJLOBb-ju1Yzp7DpbBWkeClbFGhqciM1k0Cw6mEdrUBtIO4WxszcOUtcEpNhVkzsvvN-WQpE3ViXwqGwO2QCaYug6VG8voW6GSIwlXiCylxSohTb6IpIoF43tQ14MGid4S8G4/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;}

Una vez hecho los pasos anteriores, GUARDAMOS PLATILLA.

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>

Guardamos y vemos nuestro blog, si seguiste bien todos los pasos el resultado sera como el que puse en el blog de

JESUS

MENU

ROTADOR