Mostrando entradas con la etiqueta Truco. Mostrar todas las entradas
Mostrando entradas con la etiqueta Truco. Mostrar todas las entradas
La inserción del código es muy fácil de realizarlo, parte del código se ingresa en la plantilla y el ultimo código en el cual está el contenido y los títulos se lo ingresa de forma manual en nuestra entrada o en un widget, a este método se lo conoce como Tab Múltiple.
Al momento de ahorrar espacio en nuestro blog de Blogger es necesario realizar varios trucos utilizando varios códigos con los cuales nos creara una caja con tres títulos múltiples y dentro de cada uno de ellos se puede ingresar contenido, este truco de Blogger lo pueden insertar en un widget o en una entrada, dependiendo el uso que lo quieran dar. La inserción del código es muy fácil de realizarlo, parte del código se ingresa en la plantilla y el ultimo código en el cual está el contenido y los títulos se lo ingresa de forma manual en nuestra entrada o en un widget, a este método se lo conoce como Tab Múltiple.
Pueden ver su demostración en el siguiente blog de demos
Ver demostración en un widget de Blogger
Vamos a trabajar
Un clic en “Plantilla”
Un clic en “Editar HTML”
Ahora se le abrirá el Editor HTML de su plantilla
En este punto deberás presionar la tecla “Control” de su teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de su editor, 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 le muestra como debe aparecerle el buscador en el editor HTML de su plantilla y así pueda colocar el código en el buscador al momento que yo diga busca este código.
4 Busca este código
<head>
Ingresa las siguientes líneas de código justo abajo del código que encontraste
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"></link>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
Busca este código
</head>
Ingrese el siguiente código justo arriba del código que encontró
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
Un clic en “Guardar plantilla”
Ahora dirígete a “Diseño”
Un clic en “Agregar un gadget”
Busque el widget que dice “HTML/Javascript” ábrelo
Ingresa las siguientes líneas de código en su interior
<div id="tabs">
<ul>
<li><a href="#tabs-1">Adsense</a></li>
<li><a href="#tabs-2">Teléfonos</a></li>
<li><a href="#tabs-3">Móvil</a></li>
</ul>
<div id="tabs-1">
<p>AdSense para búsqueda móvil permite a los editores obtener ingresos de sus páginas web para móviles mediante anuncios Google orientados. En AdSense para búsqueda móvil, Google hace coincidir los anuncios con el contenido de su sitio web para móviles y usted obtiene ingresos cuando los usuarios de dicho sitio hacen clic en sus anuncios.</p>
</div>
<div id="tabs-2">
<p>Los dispositivos móviles antiguos con capacidad para Internet (conocidos como teléfonos de gama media) utilizan el protocolo de aplicaciones inalámbricas (WAP, Wireless Application Protocol) y solo pueden acceder parcialmente a Internet. Los sitios web que admiten dichos dispositivos suelen estar escritos en un lenguaje de marcas, como el lenguaje de marcas inalámbrico (WML, Wireless Markup Language) o HTML extensible estricto (XHTML estricto). En determinadas regiones del mundo, los dispositivos utilizan i-mode para acceder a los sitios web escritos en HTML compacto (CHTML).</p>
</div>
<div id="tabs-3">
<p>Con el desarrollo de teléfonos como iPhone y Android, un número cada vez mayor de navegadores para móviles puede interpretar ahora JavaScript y HTML. Los dispositivos con estos navegadores pueden acceder a prácticamente las mismas funcionalidades de Internet que ofrecen los ordenadores (con algunas limitaciones debidas a su tamaño, la disponibilidad del operador, etc.) y se llaman teléfonos de gama alta.</p>
</div>
</div>
<ul>
<li><a href="#tabs-1">Adsense</a></li>
<li><a href="#tabs-2">Teléfonos</a></li>
<li><a href="#tabs-3">Móvil</a></li>
</ul>
<div id="tabs-1">
<p>AdSense para búsqueda móvil permite a los editores obtener ingresos de sus páginas web para móviles mediante anuncios Google orientados. En AdSense para búsqueda móvil, Google hace coincidir los anuncios con el contenido de su sitio web para móviles y usted obtiene ingresos cuando los usuarios de dicho sitio hacen clic en sus anuncios.</p>
</div>
<div id="tabs-2">
<p>Los dispositivos móviles antiguos con capacidad para Internet (conocidos como teléfonos de gama media) utilizan el protocolo de aplicaciones inalámbricas (WAP, Wireless Application Protocol) y solo pueden acceder parcialmente a Internet. Los sitios web que admiten dichos dispositivos suelen estar escritos en un lenguaje de marcas, como el lenguaje de marcas inalámbrico (WML, Wireless Markup Language) o HTML extensible estricto (XHTML estricto). En determinadas regiones del mundo, los dispositivos utilizan i-mode para acceder a los sitios web escritos en HTML compacto (CHTML).</p>
</div>
<div id="tabs-3">
<p>Con el desarrollo de teléfonos como iPhone y Android, un número cada vez mayor de navegadores para móviles puede interpretar ahora JavaScript y HTML. Los dispositivos con estos navegadores pueden acceder a prácticamente las mismas funcionalidades de Internet que ofrecen los ordenadores (con algunas limitaciones debidas a su tamaño, la disponibilidad del operador, etc.) y se llaman teléfonos de gama alta.</p>
</div>
</div>
Realiza los cambios en los tres títulos que están marcados de color rojo por los nombres que desees.
Realiza los cambios en las tres descripciones que están marcados de color verde por el texto que quieras dar a conocer
Eso es todo un clic en “Guardar”
Ubica el Widget Tab Múltiple donde quieras
Para mostrar el Widget Tab Múltiple en una Entrada de st blog de Blogger, deberás abrir st entrada y habilitar la casilla en modo “HTML” y pegar todo el código del paso 10 de este tutorial.
Fecha de la Publicación; 07-08-2019
Fuente; ayudadeblogger
Publicado por;
By
Blogs Famag
<div class="containercarrusel3d">
<div id="carrusel3d">
<figure><img src="URL IMAGEN" height="116" width="186"></figure>
<figure><img src="URL IMAGEN" height="116" width="186"></figure>
<figure><img src="URL IMAGEN" height="116" width="186"></figure>
<figure><img src="URL IMAGEN" height="116" width="186"></figure>
<figure><img src="URL IMAGEN" height="116" width="186"></figure>
<figure><img src="URL IMAGEN" height="116" width="186"></figure>
<figure><img src="URL IMAGEN" height="116" width="186"></figure>
<figure><img src="URL IMAGEN" height="116" width="186"></figure>
<figure><img src="URL IMAGEN" height="116" width="186"></figure>
</div>
</div>
<style>
.containercarrusel3d{
margin: 4% auto;
width: 210px;
height: 140px;
position: relative;
perspective: 1000;
}
#carrusel3d{
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
animation: rotation 20s infinite linear;
}
#carrusel3d:hover{
animation-play-state: paused;
}
#carrusel3d figure{
display: block;
position: absolute;
width: 186px;
height: 116px;
left: 10px;
top: 10px;
background: black;
overflow: hidden;
border: solid 5px black;
}
#carrusel3d figure:nth-child(1) { transform: rotateY(0deg) translateZ(288px);}
#carrusel3d figure:nth-child(2) { transform: rotateY(40deg) translateZ(288px);}
#carrusel3d figure:nth-child(3) { transform: rotateY(80deg) translateZ(288px);}
#carrusel3d figure:nth-child(4) { transform: rotateY(120deg) translateZ(288px);}
#carrusel3d figure:nth-child(5) { transform: rotateY(160deg) translateZ(288px);}
#carrusel3d figure:nth-child(6) { transform: rotateY(200deg) translateZ(288px);}
#carrusel3d figure:nth-child(7) { transform: rotateY(240deg) translateZ(288px);}
#carrusel3d figure:nth-child(8) { transform: rotateY(280deg) translateZ(288px);}
#carrusel3d figure:nth-child(9) { transform: rotateY(320deg) translateZ(288px);}
#carrusel3d img{
-webkit-filter: grayscale(1);
cursor: pointer;
transition: all .5s ease;
}
#carrusel3d img:hover{
-webkit-filter: grayscale(0);
transform: scale(1.2,1.2);
}
@keyframes rotation{
from{
transform: rotateY(0deg);
}
to{
transform: rotateY(360deg);
}
}
</style>
<div id="carrusel3d">
<figure><img src="URL IMAGEN" height="116" width="186"></figure>
<figure><img src="URL IMAGEN" height="116" width="186"></figure>
<figure><img src="URL IMAGEN" height="116" width="186"></figure>
<figure><img src="URL IMAGEN" height="116" width="186"></figure>
<figure><img src="URL IMAGEN" height="116" width="186"></figure>
<figure><img src="URL IMAGEN" height="116" width="186"></figure>
<figure><img src="URL IMAGEN" height="116" width="186"></figure>
<figure><img src="URL IMAGEN" height="116" width="186"></figure>
<figure><img src="URL IMAGEN" height="116" width="186"></figure>
</div>
</div>
<style>
.containercarrusel3d{
margin: 4% auto;
width: 210px;
height: 140px;
position: relative;
perspective: 1000;
}
#carrusel3d{
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
animation: rotation 20s infinite linear;
}
#carrusel3d:hover{
animation-play-state: paused;
}
#carrusel3d figure{
display: block;
position: absolute;
width: 186px;
height: 116px;
left: 10px;
top: 10px;
background: black;
overflow: hidden;
border: solid 5px black;
}
#carrusel3d figure:nth-child(1) { transform: rotateY(0deg) translateZ(288px);}
#carrusel3d figure:nth-child(2) { transform: rotateY(40deg) translateZ(288px);}
#carrusel3d figure:nth-child(3) { transform: rotateY(80deg) translateZ(288px);}
#carrusel3d figure:nth-child(4) { transform: rotateY(120deg) translateZ(288px);}
#carrusel3d figure:nth-child(5) { transform: rotateY(160deg) translateZ(288px);}
#carrusel3d figure:nth-child(6) { transform: rotateY(200deg) translateZ(288px);}
#carrusel3d figure:nth-child(7) { transform: rotateY(240deg) translateZ(288px);}
#carrusel3d figure:nth-child(8) { transform: rotateY(280deg) translateZ(288px);}
#carrusel3d figure:nth-child(9) { transform: rotateY(320deg) translateZ(288px);}
#carrusel3d img{
-webkit-filter: grayscale(1);
cursor: pointer;
transition: all .5s ease;
}
#carrusel3d img:hover{
-webkit-filter: grayscale(0);
transform: scale(1.2,1.2);
}
@keyframes rotation{
from{
transform: rotateY(0deg);
}
to{
transform: rotateY(360deg);
}
}
</style>
Hay muchas maneras de presentar imagenes, de hecho, en este blog ya te he formulado unas cuantas.
Pues por si fuera poco, aqui te traigo otra alternativa muy interesante.
Como ya lo digo en el titulo, se trata de una especie de noria animada en 3D y con zoom al pasar el cursor sobre ellas.
¿Como se consigue este diseño, con Javascript? Pues no, simplemente aplicando bien estilos CSS (CSS3), por lo que el tiempo de carga del carrusel sera muy reducido.
Para añadirlo a vuestro blog o web, simplemente copia este codigo y lo pones alli donde quieras que se vea.
El texto en color rojo lo sustituyes por las direcciones URL de las imagenes que desees poner (hasta un total de 9).
Fuente; redeando
Publicado por;
By
Blogs Famag
No tiene mucha complicación y nos quedara muy 'cool'.
Primero, añadimos el gadget de entradas populares, claro, y donde pone "mostrar un máximo de" ponemos 4 entradas.
Para añadirlo:
Ir a Blogger
1-Un clic en “Diseño”
2-Clic en “Añadir un gadget”
3-Busca el widget que dice “HTML-Javascript” y ábrelo
4-Coloca el siguiente codigo en el interior
<style type="text/css" media="screen">
#PopularPosts1 {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:400px;
}
#PopularPosts1 ul {
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#PopularPosts1 li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:80px;
overflow: hidden;
background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;
border:1px solid #ddd;
}
#PopularPosts1 li .item-title {
color:#A5A9AB;
font-size:1em;
margin-bottom:0.5em;
}
#PopularPosts1 li .item-title a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#PopularPosts1 li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
#PopularPosts1 li .item-snippet {
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}
#PopularPosts1 .item-snippet a,
#PopularPosts1 .item-snippet a:visited {
color:#3E4548;
text-decoration: none;
}
#PopularPosts1 .spyWrapper {
height: 100%;
overflow: hidden;
position: relative;
}
#PopularPosts1 {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
.tags span,
.tags a {
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
}
a img {
border: 0;
}
-->
</style><br />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script><br />
<script type="text/javascript" charset="utf-8">
$(function () {
$('.popular-posts ul').simpleSpy();
});
</script><br />
<script src="http://accordion-for-blogger.googlecode.com/svn/trunk/simplespy.js" type="text/javascript"></script>
#PopularPosts1 {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:400px;
}
#PopularPosts1 ul {
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#PopularPosts1 li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:80px;
overflow: hidden;
background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;
border:1px solid #ddd;
}
#PopularPosts1 li .item-title {
color:#A5A9AB;
font-size:1em;
margin-bottom:0.5em;
}
#PopularPosts1 li .item-title a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#PopularPosts1 li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
#PopularPosts1 li .item-snippet {
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}
#PopularPosts1 .item-snippet a,
#PopularPosts1 .item-snippet a:visited {
color:#3E4548;
text-decoration: none;
}
#PopularPosts1 .spyWrapper {
height: 100%;
overflow: hidden;
position: relative;
}
#PopularPosts1 {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
.tags span,
.tags a {
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
}
a img {
border: 0;
}
-->
</style><br />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script><br />
<script type="text/javascript" charset="utf-8">
$(function () {
$('.popular-posts ul').simpleSpy();
});
</script><br />
<script src="http://accordion-for-blogger.googlecode.com/svn/trunk/simplespy.js" type="text/javascript"></script>
Despues de haber insertado el código, un clic en "Guardar"
Imagen de donde colocar el Gadget.
Fecha: 02/04/2019
Fuente: redeando
Publicado por:
By
Blogs Famag
El gadget en si esta bien, depende la plantilla puede variar el diseño, pero más o menos en casi todas son prácticamente iguales.
Para darle un poco de vidilla y un look más cool, vamos a re diseñarlo un poco con CSS.
El resultado será darle un tamaño especifico, redondear y darle un efecto Zoom a las imágenes (ahora mismo lo podéis ver en la sidebar de este blog).
Lo primero es incluir el gadget de entradas populares en nuestra sidebar, claro.
Os aconsejo poner solo "imagen en miniatura" para que quede bien el asunto.
Una vez hecho esto, nos vamos a Diseño, Edición de HTML y en la plantilla buscamos ]]></b:skin>. Y justo antes añadimos el siguiente códigos:
Para instalarlo en vuestro Bloc solo tenéis que seguir estos pasos:
1 Un clic en “Plantilla”
2 Un clic en “Editar HTML”
Ahora se te abrirá el Editor HTML de tu plantilla
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,
3 Busca el siguiente código
]></b:skin>
4 Busca este código ]]></b:skin> una vez que hayas encontrado el código deberás insertar las siguientes líneas de código justo arriba del código que encontraste
/* Entradas populares con Zoom
----------------------------------------------- */
.PopularPosts ul li {background: none repeat scroll 0 0 transparent;float: left;list-style: none outside none;padding: 0 !important;margin: 5px !important;}
.PopularPosts ul li img {padding:0;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s ease;border: 2px solid #CCC;height: 80px;width: 80px;}
.PopularPosts ul li img:hover {border:2px solid #BBB;-moz-transform: scale(1.2) rotate(-1090deg) ;-webkit-transform: scale(1.2) rotate(-1090deg) ;-o-transform: scale(1.2) rotate(-1090deg) ;-ms-transform: scale(1.2) rotate(-1090deg) ;transform: scale(1.2) rotate(-1090deg) ;}
.PopularPosts .item-title {line-height:1.8;text-align:top;display:inline;padding-top:20px;}
----------------------------------------------- */
.PopularPosts ul li {background: none repeat scroll 0 0 transparent;float: left;list-style: none outside none;padding: 0 !important;margin: 5px !important;}
.PopularPosts ul li img {padding:0;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s ease;border: 2px solid #CCC;height: 80px;width: 80px;}
.PopularPosts ul li img:hover {border:2px solid #BBB;-moz-transform: scale(1.2) rotate(-1090deg) ;-webkit-transform: scale(1.2) rotate(-1090deg) ;-o-transform: scale(1.2) rotate(-1090deg) ;-ms-transform: scale(1.2) rotate(-1090deg) ;transform: scale(1.2) rotate(-1090deg) ;}
.PopularPosts .item-title {line-height:1.8;text-align:top;display:inline;padding-top:20px;}
Fecha: 02/04/2019
Fuente: redeando
Publicado por:
By
Blogs Famag
