Ultimas entradas
Para que veais un ejemplo, os he puesto estos 4 maravillosos iconos sociales de diseño propio con su codigo correspondiente por si os gustan y quereis añadirlos a vuestro blog.
Solamente teneis que copiarlo y pegarlo alli donde querais mostrarlo, sustituyendo lo que esta en color azul por las direcciones URLs de vuestras cuentas en las redes sociales y la de vuestro feed RSS.
Esta tecnica la podeis utilizar con cualquier imagen, cambiando la direccion (en gris) por la que estimeis oportuno. Si quereis, tambien podeis descargaros los iconos y los codigos.
<div align="center"><div class="blancoynegro">
<a href="TU DIRECCION DE TWITTER" target="_blank" ><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjznmY02UVcCjKU0viPfe3NBHfPZW51qNJcu5hxsnB4Z97qs7WM8Lnsru2ikDt9h_X0CvCMT-mB8Qec1rAlHCItrYgM7zkAvEYvzmQ7THjMKVM-VzJAMmWAAYbFjOfKAIWCzY8BQajVPuY/s1600/twitter.png" /></a>
<a href="TU DIRECCION DE GOOGLE+" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4y_nlDQM2QnVXC5HCg0XGhlWmb3awbxA-3bNjjDU3Xo0UP4n5oba0mO8CdZluLCeBTV26fAcEKrpoVrAhHyRj4L5IlVABd3tH6k5OPU2lsGeWIkD3dU6hkNqvY5An2rDaqldPcMi-LSA/s1600/googleplus.png" /></a>
<a href="TU DIRECCION DE FACEBOOK" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZmZwOLBWt-Ce6MaRJDkKDci8MzdhGFSBMBezsX5y2VaK7z-sc90bN6ifsz8jm-8oOy5vQtUIFseRZSqNdr1BKm5Z9Tih2Uq3_6TidoC3zOaVu5wdWxHqFjFtRcRTZHAXAFmKrLP98Rmo/s1600/facebook.png" /></a>
<a href="TU DIRECCION DE FEED" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVmd6Rp_m3TwhbwItGR61lrezfbzCxLSVn-qmdmv7QJK0dmRyfclFSJL6qN7DtIrvuHok-_jhn6aUku7L76SesoM1oh1gcsnBW9MxnOTBE-NEGr2Se5k7bQBEYloYdVIqJU51hVYhL6vw/s1600/feedrss.png" /></a></div></div>
<style>
.blancoynegro img {
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-ms-filter: grayscale(0%);
-o-filter: grayscale(0%);
filter: none;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.blancoynegro img:hover {
filter: url('#grayscale');
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: Gray();
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
</style>
<div style="width:0;height:0;"><svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg"><filter id="grayscale"><fecolormatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/></filter></svg></div>
<a href="TU DIRECCION DE TWITTER" target="_blank" ><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjznmY02UVcCjKU0viPfe3NBHfPZW51qNJcu5hxsnB4Z97qs7WM8Lnsru2ikDt9h_X0CvCMT-mB8Qec1rAlHCItrYgM7zkAvEYvzmQ7THjMKVM-VzJAMmWAAYbFjOfKAIWCzY8BQajVPuY/s1600/twitter.png" /></a>
<a href="TU DIRECCION DE GOOGLE+" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4y_nlDQM2QnVXC5HCg0XGhlWmb3awbxA-3bNjjDU3Xo0UP4n5oba0mO8CdZluLCeBTV26fAcEKrpoVrAhHyRj4L5IlVABd3tH6k5OPU2lsGeWIkD3dU6hkNqvY5An2rDaqldPcMi-LSA/s1600/googleplus.png" /></a>
<a href="TU DIRECCION DE FACEBOOK" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZmZwOLBWt-Ce6MaRJDkKDci8MzdhGFSBMBezsX5y2VaK7z-sc90bN6ifsz8jm-8oOy5vQtUIFseRZSqNdr1BKm5Z9Tih2Uq3_6TidoC3zOaVu5wdWxHqFjFtRcRTZHAXAFmKrLP98Rmo/s1600/facebook.png" /></a>
<a href="TU DIRECCION DE FEED" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVmd6Rp_m3TwhbwItGR61lrezfbzCxLSVn-qmdmv7QJK0dmRyfclFSJL6qN7DtIrvuHok-_jhn6aUku7L76SesoM1oh1gcsnBW9MxnOTBE-NEGr2Se5k7bQBEYloYdVIqJU51hVYhL6vw/s1600/feedrss.png" /></a></div></div>
<style>
.blancoynegro img {
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-ms-filter: grayscale(0%);
-o-filter: grayscale(0%);
filter: none;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.blancoynegro img:hover {
filter: url('#grayscale');
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: Gray();
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
</style>
<div style="width:0;height:0;"><svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg"><filter id="grayscale"><fecolormatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/></filter></svg></div>
<div align="center"><div class="blancoynegro">
<a href="TU DIRECCION DE TWITTER" target="_blank" ><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjznmY02UVcCjKU0viPfe3NBHfPZW51qNJcu5hxsnB4Z97qs7WM8Lnsru2ikDt9h_X0CvCMT-mB8Qec1rAlHCItrYgM7zkAvEYvzmQ7THjMKVM-VzJAMmWAAYbFjOfKAIWCzY8BQajVPuY/s1600/twitter.png" /></a>
<a href="TU DIRECCION DE GOOGLE+" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4y_nlDQM2QnVXC5HCg0XGhlWmb3awbxA-3bNjjDU3Xo0UP4n5oba0mO8CdZluLCeBTV26fAcEKrpoVrAhHyRj4L5IlVABd3tH6k5OPU2lsGeWIkD3dU6hkNqvY5An2rDaqldPcMi-LSA/s1600/googleplus.png" /></a>
<a href="TU DIRECCION DE FACEBOOK" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZmZwOLBWt-Ce6MaRJDkKDci8MzdhGFSBMBezsX5y2VaK7z-sc90bN6ifsz8jm-8oOy5vQtUIFseRZSqNdr1BKm5Z9Tih2Uq3_6TidoC3zOaVu5wdWxHqFjFtRcRTZHAXAFmKrLP98Rmo/s1600/facebook.png" /></a>
<a href="TU DIRECCION DE FEED" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVmd6Rp_m3TwhbwItGR61lrezfbzCxLSVn-qmdmv7QJK0dmRyfclFSJL6qN7DtIrvuHok-_jhn6aUku7L76SesoM1oh1gcsnBW9MxnOTBE-NEGr2Se5k7bQBEYloYdVIqJU51hVYhL6vw/s1600/feedrss.png" /></a></div></div>
<style>
.blancoynegro img {
filter: url('#grayscale');
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: Gray();
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.blancoynegro img:hover {
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-ms-filter: grayscale(0%);
-o-filter: grayscale(0%);
filter: none;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
</style>
<div style="width:0;height:0;"><svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg"><filter id="grayscale"><fecolormatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/></filter></svg></div>
<a href="TU DIRECCION DE TWITTER" target="_blank" ><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjznmY02UVcCjKU0viPfe3NBHfPZW51qNJcu5hxsnB4Z97qs7WM8Lnsru2ikDt9h_X0CvCMT-mB8Qec1rAlHCItrYgM7zkAvEYvzmQ7THjMKVM-VzJAMmWAAYbFjOfKAIWCzY8BQajVPuY/s1600/twitter.png" /></a>
<a href="TU DIRECCION DE GOOGLE+" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4y_nlDQM2QnVXC5HCg0XGhlWmb3awbxA-3bNjjDU3Xo0UP4n5oba0mO8CdZluLCeBTV26fAcEKrpoVrAhHyRj4L5IlVABd3tH6k5OPU2lsGeWIkD3dU6hkNqvY5An2rDaqldPcMi-LSA/s1600/googleplus.png" /></a>
<a href="TU DIRECCION DE FACEBOOK" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZmZwOLBWt-Ce6MaRJDkKDci8MzdhGFSBMBezsX5y2VaK7z-sc90bN6ifsz8jm-8oOy5vQtUIFseRZSqNdr1BKm5Z9Tih2Uq3_6TidoC3zOaVu5wdWxHqFjFtRcRTZHAXAFmKrLP98Rmo/s1600/facebook.png" /></a>
<a href="TU DIRECCION DE FEED" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVmd6Rp_m3TwhbwItGR61lrezfbzCxLSVn-qmdmv7QJK0dmRyfclFSJL6qN7DtIrvuHok-_jhn6aUku7L76SesoM1oh1gcsnBW9MxnOTBE-NEGr2Se5k7bQBEYloYdVIqJU51hVYhL6vw/s1600/feedrss.png" /></a></div></div>
<style>
.blancoynegro img {
filter: url('#grayscale');
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: Gray();
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.blancoynegro img:hover {
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-ms-filter: grayscale(0%);
-o-filter: grayscale(0%);
filter: none;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
</style>
<div style="width:0;height:0;"><svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg"><filter id="grayscale"><fecolormatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/></filter></svg></div>
Data de la Publicación; 02-09-2019
Fuente; redeando
Publicado por;
Basta con unas poquitas lineas de codigo y ya esta. Aqui tienes unas variantes de estos botoncillos con sus codigos correspondientes para que utilices los que mas se adapten a tus necesidades.
<a href="aqui la url"><button>
aqui el texto
</button>
</a>
aqui el texto
</button>
</a>
<a href="aqui la url"><input type="submit" value="aqui el texto" /></a>
<a href="aqui la url"><span style="font-size: 12pt;"><button id="button_display_embed" style="font-size: 15pt;">aqui el texto</button></a>
<a href="aqui la url"><button><span style="color: #cc0000;"><b>aqui el texto</b></span></button></a>
Fuente; redeando
Publicado por;
Cuando queremos mostrar una galería de imagenes en nuestro blog, pienso que la manera estética de hacerla es fundamental.
Si es original y encima tiene animaciones como esta, no te digo 'na'. Utilizando el CSS3 y el Javascript se consigue esta presentación con las imagenes apiladas-desordenadas que al hacer click sobre ellas,
estas van pasando como si lo hiciéramos con la mano.
Si quieres ponerla en tu blog o web, primero copia este código y pegalo en tu plantilla antes de </head>.
Un clic en “Plantilla”
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,
Busca el siguiente código
</head>
Ahora justo encima (ó antes) de esa etiqueta, pegamos lo siguiente:
<script>
(function() {
var queue = false,
touch = 'ontouchstart' in document.documentElement ? true : false,
images = document.querySelector('.images'),
imageWidth = images.firstElementChild.offsetWidth,
imageOffset = images.firstElementChild.offsetLeft,
cssTransition = function () {
var body = document.body || document.documentElement,
style = body.style,
property = 'Transition',
vendors = ['Moz', 'Webkit', 'O', 'ms'],
vendorCount = vendors.length;
if (typeof style[property.toLowerCase()] === 'string') {
return true;
}
do {
if (typeof style[vendors[vendorCount] + property] === 'string') {
return true;
}
} while (vendorCount--);
return false;
},
timeout = cssTransition() ? [300, 400] : [0, 0];
images.addEventListener(touch ? 'touchend' : 'click', function (event) {
if (!queue) {
queue = true;
var direction = ((touch ? event.changedTouches[0].pageX : event.pageX) - imageOffset) > imageWidth / 2 ? 'slide-right' : 'slide-left',
last = images.lastElementChild.classList;
last.add(direction);
setTimeout(function () {
last.remove(direction);
last.add('back');
setTimeout(function () {
images.insertBefore(images.lastElementChild, images.firstElementChild);
last.remove('back');
queue = false;
}, timeout[0]);
}, timeout[1]);
}
}, false);
})();
</script>
<style>
.images {
cursor: pointer;position:relative;
}
.images:hover .image:nth-child(4) {
-webkit-transform: rotate(10deg) translateX(50px);
-moz-transform: rotate(10deg) translateX(50px);
-ms-transform: rotate(10deg) translateX(50px);
-o-transform: rotate(10deg) translateX(50px);
transform: rotate(10deg) translateX(50px);
}
.images:hover .image:nth-child(3) {
-webkit-transform: rotate(3deg) translateX(75px);
-moz-transform: rotate(3deg) translateX(75px);
-ms-transform: rotate(3deg) translateX(75px);
-o-transform: rotate(3deg) translateX(75px);
transform: rotate(3deg) translateX(75px);
}
.images:hover .image:nth-child(2) {
-webkit-transform: rotate(-2deg) translateX(-50px);
-moz-transform: rotate(-2deg) translateX(-50px);
-ms-transform: rotate(-2deg) translateX(-50px);
-o-transform: rotate(-2deg) translateX(-50px);
transform: rotate(-2deg) translateX(-50px);
}
.images:hover .image:first-child {
-webkit-transform: rotate(-8deg) translateX(-75px) translateY(-10px);
-moz-transform: rotate(-8deg) translateX(-75px) translateY(-10px);
-ms-transform: rotate(-8deg) translateX(-75px) translateY(-10px);
-o-transform: rotate(-8deg) translateX(-75px) translateY(-10px);
transform: rotate(-8deg) translateX(-75px) translateY(-10px);
}
.image {
position: absolute;
top: 50%;
left: 50%;
height: 250px;
width: 300px;
margin-top: -110px;
margin-left: -105px;
border: 5px solid #fff;
border-bottom-width: 15px;
-webkit-box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75);
box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75);
z-index: 2;
-webkit-transition: -webkit-transform 0.3s ease-in-out;
-moz-transition: -moz-transform 0.3s ease-in-out;
-o-transition: -o-transform 0.3s ease-in-out;
transition: transform 0.3s ease-in-out;
}
.image:first-child {
-webkit-transform: rotate(8deg);
-moz-transform: rotate(8deg);
-ms-transform: rotate(8deg);
-o-transform: rotate(8deg);
transform: rotate(8deg);
}
.image:nth-child(2) {
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
-ms-transform: rotate(2deg);
-o-transform: rotate(2deg);
transform: rotate(2deg);
}
.image:nth-child(3) {
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.image:nth-child(4) {
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
transform: rotate(-10deg);
}
.image:last-child {
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
transform: rotate(-5deg);
}
.image.slide-right {
-webkit-transform: rotate(290deg) translateX(250px);
-moz-transform: rotate(290deg) translateX(250px);
-ms-transform: rotate(290deg) translateX(250px);
-o-transform: rotate(290deg) translateX(250px);
transform: rotate(290deg) translateX(250px);
}
.image.slide-left {
-webkit-transform: rotate(-290deg) translateX(-250px);
-moz-transform: rotate(-290deg) translateX(-250px);
-ms-transform: rotate(-290deg) translateX(-250px);
-o-transform: rotate(-290deg) translateX(-250px);
transform: rotate(-290deg) translateX(-250px);
}
.image.back {
z-index: 1;
}
</style>
(function() {
var queue = false,
touch = 'ontouchstart' in document.documentElement ? true : false,
images = document.querySelector('.images'),
imageWidth = images.firstElementChild.offsetWidth,
imageOffset = images.firstElementChild.offsetLeft,
cssTransition = function () {
var body = document.body || document.documentElement,
style = body.style,
property = 'Transition',
vendors = ['Moz', 'Webkit', 'O', 'ms'],
vendorCount = vendors.length;
if (typeof style[property.toLowerCase()] === 'string') {
return true;
}
do {
if (typeof style[vendors[vendorCount] + property] === 'string') {
return true;
}
} while (vendorCount--);
return false;
},
timeout = cssTransition() ? [300, 400] : [0, 0];
images.addEventListener(touch ? 'touchend' : 'click', function (event) {
if (!queue) {
queue = true;
var direction = ((touch ? event.changedTouches[0].pageX : event.pageX) - imageOffset) > imageWidth / 2 ? 'slide-right' : 'slide-left',
last = images.lastElementChild.classList;
last.add(direction);
setTimeout(function () {
last.remove(direction);
last.add('back');
setTimeout(function () {
images.insertBefore(images.lastElementChild, images.firstElementChild);
last.remove('back');
queue = false;
}, timeout[0]);
}, timeout[1]);
}
}, false);
})();
</script>
<style>
.images {
cursor: pointer;position:relative;
}
.images:hover .image:nth-child(4) {
-webkit-transform: rotate(10deg) translateX(50px);
-moz-transform: rotate(10deg) translateX(50px);
-ms-transform: rotate(10deg) translateX(50px);
-o-transform: rotate(10deg) translateX(50px);
transform: rotate(10deg) translateX(50px);
}
.images:hover .image:nth-child(3) {
-webkit-transform: rotate(3deg) translateX(75px);
-moz-transform: rotate(3deg) translateX(75px);
-ms-transform: rotate(3deg) translateX(75px);
-o-transform: rotate(3deg) translateX(75px);
transform: rotate(3deg) translateX(75px);
}
.images:hover .image:nth-child(2) {
-webkit-transform: rotate(-2deg) translateX(-50px);
-moz-transform: rotate(-2deg) translateX(-50px);
-ms-transform: rotate(-2deg) translateX(-50px);
-o-transform: rotate(-2deg) translateX(-50px);
transform: rotate(-2deg) translateX(-50px);
}
.images:hover .image:first-child {
-webkit-transform: rotate(-8deg) translateX(-75px) translateY(-10px);
-moz-transform: rotate(-8deg) translateX(-75px) translateY(-10px);
-ms-transform: rotate(-8deg) translateX(-75px) translateY(-10px);
-o-transform: rotate(-8deg) translateX(-75px) translateY(-10px);
transform: rotate(-8deg) translateX(-75px) translateY(-10px);
}
.image {
position: absolute;
top: 50%;
left: 50%;
height: 250px;
width: 300px;
margin-top: -110px;
margin-left: -105px;
border: 5px solid #fff;
border-bottom-width: 15px;
-webkit-box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75);
box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75);
z-index: 2;
-webkit-transition: -webkit-transform 0.3s ease-in-out;
-moz-transition: -moz-transform 0.3s ease-in-out;
-o-transition: -o-transform 0.3s ease-in-out;
transition: transform 0.3s ease-in-out;
}
.image:first-child {
-webkit-transform: rotate(8deg);
-moz-transform: rotate(8deg);
-ms-transform: rotate(8deg);
-o-transform: rotate(8deg);
transform: rotate(8deg);
}
.image:nth-child(2) {
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
-ms-transform: rotate(2deg);
-o-transform: rotate(2deg);
transform: rotate(2deg);
}
.image:nth-child(3) {
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.image:nth-child(4) {
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
transform: rotate(-10deg);
}
.image:last-child {
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
transform: rotate(-5deg);
}
.image.slide-right {
-webkit-transform: rotate(290deg) translateX(250px);
-moz-transform: rotate(290deg) translateX(250px);
-ms-transform: rotate(290deg) translateX(250px);
-o-transform: rotate(290deg) translateX(250px);
transform: rotate(290deg) translateX(250px);
}
.image.slide-left {
-webkit-transform: rotate(-290deg) translateX(-250px);
-moz-transform: rotate(-290deg) translateX(-250px);
-ms-transform: rotate(-290deg) translateX(-250px);
-o-transform: rotate(-290deg) translateX(-250px);
transform: rotate(-290deg) translateX(-250px);
}
.image.back {
z-index: 1;
}
</style>
Ahora, cada vez que queramos mostrar esta presentación, agregamos el siguiente código,en un gadget “HTML-Javascript” añadiendo las urls de las imagenes.
Para instalarlo en vuestro Bloc en un gadget solo tenéis que seguir estos pasos:
Un clic en “Diseño”
Clic en “Añadir un gadget”
Busca el widget que dice “HTML-Javascript” y ábrelo
Coloca el siguiente código en el interior
<div class="images">
<img class="image" src="URL DE LA IMAGEN" style="border:8px solid #ffffff;"/>
<img class="image" src="URL DE LA IMAGEN" style="border:8px solid #ffffff;"/>
<img class="image" src="URL DE LA IMAGEN" style="border:8px solid #ffffff;"/>
<img class="image" src="URL DE LA IMAGEN" style="border:8px solid #ffffff;"/>
<img class="image" src="URL DE LA IMAGEN" style="border:8px solid #ffffff;"/>
<img class="image" src="URL DE LA IMAGEN" style="border:8px solid #ffffff;"/>
<img class="image" src="URL DE LA IMAGEN" style="border:8px solid #ffffff;"/>
<img class="image" src="URL DE LA IMAGEN" style="border:8px solid #ffffff;"/>
</div>
<img class="image" src="URL DE LA IMAGEN" style="border:8px solid #ffffff;"/>
<img class="image" src="URL DE LA IMAGEN" style="border:8px solid #ffffff;"/>
<img class="image" src="URL DE LA IMAGEN" style="border:8px solid #ffffff;"/>
<img class="image" src="URL DE LA IMAGEN" style="border:8px solid #ffffff;"/>
<img class="image" src="URL DE LA IMAGEN" style="border:8px solid #ffffff;"/>
<img class="image" src="URL DE LA IMAGEN" style="border:8px solid #ffffff;"/>
<img class="image" src="URL DE LA IMAGEN" style="border:8px solid #ffffff;"/>
<img class="image" src="URL DE LA IMAGEN" style="border:8px solid #ffffff;"/>
</div>
Despues de haber insertado el código, un clic en "Guardar"
Data de la Publicación; 02-09-2019
Fuente; redeando
Publicado por;
Este truco para blogger es muy fácil de realizarlo solo tienen que seguir mis instrucciones y podrán tener este espectacular menú desplegable para blogger con imágenes.
Las características de este menú son muy simples, el menú desplegable le va ha mostrar imágenes al momento que desplieguen cualquier categoría.
Este menú desplegable para blogger con imágenes solo lo podrán utilizar con tres tipos de URLs, las cuales son, etiquetas, consultas de búsqueda y búsqueda de etiquetas.
Les gusto verdad, ahora nos dirigimos a trabajar
Para implementarlo en vuestro Bloc solo tenéis que seguir estos pasos:
Un clic en “Plantilla”
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,
Busca el siguiente código
]]></b:skin>
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
/* Menu Stylings by www.ayudadeblogger.com star www.grupodelecluse.com */
.w2bmenu *{margin: 0;padding: 0;}
ul.w2bmenu {list-style: none;line-height: 1;overflow: visible !important;}
ul.w2bmenu:after{margin: 0;padding: 0;content: ' ';display: block;height: 0px;clear: both;}
ul.w2bmenu li{list-style: none;position:relative;float: left;margin: 0 !important;padding: 0 !important;}
ul.w2bmenu li a{margin: 0;padding: 12px 16px !important;font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif !important;color: #6b6b6b !important;text-shadow: 0 1px 0 #fff;font-weight: 700 !important;text-transform: uppercase !important;font-size: 12px !important;display: block !important;border: 0 none !important;}
ul.w2bmenu li a:hover,ul.w2bmenu li a.hoverover{background: #f5f5f5 !important;}
ul.w2bmenu ul{position: absolute;display: none;top: 100%;border:1px solid #ccc;}
ul.w2bmenu li:hover > ul{display: block;}
ul.w2bmenu ul li{float: none;min-width: 160px;background:#f5f5f5;text-shadow: none;}
ul.w2bmenu ul li a{padding: 12px 14px;text-transform: none;font-weight: normal;}
ul.w2bmenu ul li a:hover,ul.w2bajaxmenu ul li a.hoverover{background: #fff !important;}
ul.w2bmenu ul ul{display: none;left: 100%;top: 0;}
/* AJAX Menu Stylings */
ul.w2bajaxmenu li div.submenu {display: none;position: absolute;width: 600px;z-index: 90;left: -1px;top: 100%;overflow: hidden;min-height: 150px;background: #fff;border:1px solid #cccccc;border-top: 0 none;}
ul.w2bajaxmenu li:hover div.submenu {display: block;}
ul.w2bajaxmenu ul ,ul.w2bajaxmenu ul li{display: block !important;border: 0 none !important;margin: 0 !important;padding:0 !important;}
ul.w2bajaxmenu ul li{background: none !important;float: none !important;}
ul.w2bajaxmenu ul.verticlemenu{position: absolute;width: 33%;left:0;top:0;bottom: 0;background: #f5f5f5;}
ul.w2bajaxmenu ul.postslist {position: relative;display: block;width:65%;float: right;margin: 8px 0 !important;background: none;}
ul.w2bajaxmenu ul.postslist li{display: block;overflow: hidden;border-bottom: 1px #eee solid;position: relative;min-height: 60px;padding: 8px 8px 8px 110px !important;}
ul.w2bajaxmenu ul.postslist li:last-child{border-bottom: none 0;}
ul.w2bajaxmenu ul.postslist li .imgCont{position: absolute;left: 0;top:8px;width: 100px;height: 60px;overflow: hidden;border:1px solid #dcdcdc;font-size: 0;line-height: 0;}
ul.w2bajaxmenu ul.postslist li .imgCont img{position: relative;top:-20px;padding: 0;width: 100px;height: 100px;display: block;}
ul.w2bajaxmenu ul.postslist li a{display: block;line-height: 1.4;padding: 0 !important;}
ul.w2bajaxmenu .loader{background:url('http://i.imgur.com/SeivG.gif') no-repeat scroll 0 0 transparent;width:22px;height:22px;position: absolute;top:50%;margin-top: -11px;right:5px;}
ul.w2bajaxmenu .menuArrow {border-bottom: 4px solid transparent;border-top: 4px solid transparent;border-left: 4px solid #999999;display: block;height: 0;margin-top: -4px;position: absolute;right: 11px;top: 50%;width: 0;}
#w2bajaxmenu {background: #ededed;background: -moz-linear-gradient(top, #ededed 0%, #e0e0e0 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ededed), color-stop(100%,#e0e0e0));background: -webkit-linear-gradient(top, #ededed 0%,#e0e0e0 100%);background: -o-linear-gradient(top, #ededed 0%,#e0e0e0 100%);background: -ms-linear-gradient(top, #ededed 0%,#e0e0e0 100%);background: linear-gradient(to bottom, #ededed 0%,#e0e0e0 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#e0e0e0',GradientType=0 );border: 1px solid #cccccc;
.w2bmenu *{margin: 0;padding: 0;}
ul.w2bmenu {list-style: none;line-height: 1;overflow: visible !important;}
ul.w2bmenu:after{margin: 0;padding: 0;content: ' ';display: block;height: 0px;clear: both;}
ul.w2bmenu li{list-style: none;position:relative;float: left;margin: 0 !important;padding: 0 !important;}
ul.w2bmenu li a{margin: 0;padding: 12px 16px !important;font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif !important;color: #6b6b6b !important;text-shadow: 0 1px 0 #fff;font-weight: 700 !important;text-transform: uppercase !important;font-size: 12px !important;display: block !important;border: 0 none !important;}
ul.w2bmenu li a:hover,ul.w2bmenu li a.hoverover{background: #f5f5f5 !important;}
ul.w2bmenu ul{position: absolute;display: none;top: 100%;border:1px solid #ccc;}
ul.w2bmenu li:hover > ul{display: block;}
ul.w2bmenu ul li{float: none;min-width: 160px;background:#f5f5f5;text-shadow: none;}
ul.w2bmenu ul li a{padding: 12px 14px;text-transform: none;font-weight: normal;}
ul.w2bmenu ul li a:hover,ul.w2bajaxmenu ul li a.hoverover{background: #fff !important;}
ul.w2bmenu ul ul{display: none;left: 100%;top: 0;}
/* AJAX Menu Stylings */
ul.w2bajaxmenu li div.submenu {display: none;position: absolute;width: 600px;z-index: 90;left: -1px;top: 100%;overflow: hidden;min-height: 150px;background: #fff;border:1px solid #cccccc;border-top: 0 none;}
ul.w2bajaxmenu li:hover div.submenu {display: block;}
ul.w2bajaxmenu ul ,ul.w2bajaxmenu ul li{display: block !important;border: 0 none !important;margin: 0 !important;padding:0 !important;}
ul.w2bajaxmenu ul li{background: none !important;float: none !important;}
ul.w2bajaxmenu ul.verticlemenu{position: absolute;width: 33%;left:0;top:0;bottom: 0;background: #f5f5f5;}
ul.w2bajaxmenu ul.postslist {position: relative;display: block;width:65%;float: right;margin: 8px 0 !important;background: none;}
ul.w2bajaxmenu ul.postslist li{display: block;overflow: hidden;border-bottom: 1px #eee solid;position: relative;min-height: 60px;padding: 8px 8px 8px 110px !important;}
ul.w2bajaxmenu ul.postslist li:last-child{border-bottom: none 0;}
ul.w2bajaxmenu ul.postslist li .imgCont{position: absolute;left: 0;top:8px;width: 100px;height: 60px;overflow: hidden;border:1px solid #dcdcdc;font-size: 0;line-height: 0;}
ul.w2bajaxmenu ul.postslist li .imgCont img{position: relative;top:-20px;padding: 0;width: 100px;height: 100px;display: block;}
ul.w2bajaxmenu ul.postslist li a{display: block;line-height: 1.4;padding: 0 !important;}
ul.w2bajaxmenu .loader{background:url('http://i.imgur.com/SeivG.gif') no-repeat scroll 0 0 transparent;width:22px;height:22px;position: absolute;top:50%;margin-top: -11px;right:5px;}
ul.w2bajaxmenu .menuArrow {border-bottom: 4px solid transparent;border-top: 4px solid transparent;border-left: 4px solid #999999;display: block;height: 0;margin-top: -4px;position: absolute;right: 11px;top: 50%;width: 0;}
#w2bajaxmenu {background: #ededed;background: -moz-linear-gradient(top, #ededed 0%, #e0e0e0 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ededed), color-stop(100%,#e0e0e0));background: -webkit-linear-gradient(top, #ededed 0%,#e0e0e0 100%);background: -o-linear-gradient(top, #ededed 0%,#e0e0e0 100%);background: -ms-linear-gradient(top, #ededed 0%,#e0e0e0 100%);background: linear-gradient(to bottom, #ededed 0%,#e0e0e0 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#e0e0e0',GradientType=0 );border: 1px solid #cccccc;
Luego deberás encontrar este otro código </head>, recuerda que el código que vas a insertar es un código javascript y si ya lo tienes en tu blog, ya no es necesario ponerlo, ya que crearía conflictos, y si no lo tienes instalado tendrás que insertarlo arriba del </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
También deberás colocar las siguientes líneas de código antes de </head>
Para implementarlo en vuestro Bloc solo tenéis que seguir estos pasos:
Un clic en “Plantilla”
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,
Coloca este código en el buscador y dale un "Enter"
</head>
Inserta las siguientes líneas de código justo arriba (ó antes) del código que encontraste
<script src='https://dl.dropboxusercontent.com/s/ysjbhuo6a0lup4z/bloggermenu.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function($) {
$('#w2bajaxmenu').ajaxBloggerMenu({
numPosts : 4, // Number of Posts to show
defaultImg : 'http://url-to-image.com/default-image.jpeg' // Default thumbnail Image
});
});
</script>
<script type='text/javascript'>
jQuery(document).ready(function($) {
$('#w2bajaxmenu').ajaxBloggerMenu({
numPosts : 4, // Number of Posts to show
defaultImg : 'http://url-to-image.com/default-image.jpeg' // Default thumbnail Image
});
});
</script>
Ahora dale un clic en “Guardar plantilla”.
Da un clic en “Diseño” y abre un nuevo widget “HTML/Javascript” e inserta en su interior el siguiente código.
El código que vas a insertar en tu nuevo widget tendrás que insertarlo con mucho cuidado y realizar algunos cambios, y si no es así, no te funcionara correctamente.
Para implementarlo en vuestro Bloc en un gadget solo tenéis que seguir estos pasos:
Un clic en “Diseño”
Clic en “Añadir un gadget”
Busca el widget que dice “HTML-Javascript” y ábrelo
Coloca el siguiente código en el interior
<ul id="w2bajaxmenu" class="w2bmenu">
<li>
<a href="#">Inicio</a>
</li>
<li>
<a href="#">Ejemplo 1</a>
<ul>
<li><a href="http://www.ayudadeblogger.com/search/label/Plantillas">Plantillas</a></li>
<li><a href="http://www.ayudadeblogger.com/search/label/Slideshow">Slideshow Blogger</a></li>
<li><a href="http://www.ayudadeblogger.com/search/label/Trucos%20Blogger">Trucos Blogger</a></li>
<li><a href="http://www.ayudadeblogger.com/search/label/Trucos%20CSS%20y%20HTML">Trucos CSS</a>
</li></ul>
</li>
<li>
<a href="#">Ejemplo 2</a>
<ul>
<li><a href="http://tublogdireccion.blogspot.com/search/label/Design">Nombre 1</a></li>
<li><a href="http://tublogdireccion.blogspot.com/search/label/Facebook?q=Like+Button">Nombre 2</a></li>
<li><a href="http://tublogdireccion.blogspot.com/search/label/Templates">Nombre 3</a></li>
<li><a href="http://tublogdireccion.blogspot.com/search?q=Guest+Posts">Nombre 4</a></li>
</ul>
</li>
<li><a href="http://tublogdireccion.blogspot.com">Link Normal</a></li>
</ul>
<li>
<a href="#">Inicio</a>
</li>
<li>
<a href="#">Ejemplo 1</a>
<ul>
<li><a href="http://www.ayudadeblogger.com/search/label/Plantillas">Plantillas</a></li>
<li><a href="http://www.ayudadeblogger.com/search/label/Slideshow">Slideshow Blogger</a></li>
<li><a href="http://www.ayudadeblogger.com/search/label/Trucos%20Blogger">Trucos Blogger</a></li>
<li><a href="http://www.ayudadeblogger.com/search/label/Trucos%20CSS%20y%20HTML">Trucos CSS</a>
</li></ul>
</li>
<li>
<a href="#">Ejemplo 2</a>
<ul>
<li><a href="http://tublogdireccion.blogspot.com/search/label/Design">Nombre 1</a></li>
<li><a href="http://tublogdireccion.blogspot.com/search/label/Facebook?q=Like+Button">Nombre 2</a></li>
<li><a href="http://tublogdireccion.blogspot.com/search/label/Templates">Nombre 3</a></li>
<li><a href="http://tublogdireccion.blogspot.com/search?q=Guest+Posts">Nombre 4</a></li>
</ul>
</li>
<li><a href="http://tublogdireccion.blogspot.com">Link Normal</a></li>
</ul>
Después de haber insertado el código, un clic en "Guardar"
Realiza estos cambios:
Los links que esta marcados de color azul, deberás sustituirlos por el link de cualquiera de tus etiquetas.
Que es una Etiqueta, más información en este enlace
Las letras que están marcadas de color rojo, deberás cambiarlas por los nombres que tu quieras, eso es todo.
Dale un clic en “Guardar” y mira tu nuevo menú desplegable para blogger con imágenes incluidas.
Data de la Publicación; 01-09-2019
Fuente; ayudadeblogger
Publicado por;
