Botón ir hacia arriba con JQuery

Botón ir arriba con JQuery para blogger
Algunas veces andamos por algunas de esas webs “Guapetonas” de gran diseño y esteticidad y de pronto vemos uno de esos botones que indican una flecha hacia arriba, vamos y le damos clip y se corre todo suavemente.
Bueno vamos a implementar eso a nuestro sitio, primero vamos a ubicar el enlace que indica el botón, se puede ubicar donde quieran yo en lo personal lo ubicaría arriba del footer, buscamos esta línea:
<div class='post-footer'>
y justo arriba pegamos lo siguiente:
<a href="#" class="scrollup">Scroll</a>
Ahora agregamos los estilos del botón:
.scrollup{
width:40px;
height:40px;
opacity:0.5;
position:fixed;
bottom:50px;
right:120px;
display:none;
text-indent:-9999px;
background: url('URL del boton') no-repeat;
}

Con esto lo que hacemos es establecer el tamaño, la ubicación, la opacidad y lo fijamos, donde esta resaltado es la URL de imagen del botón, algunos ejemplos para utilizar.

Ahora por ultimo agregaremos el script que hará la función con el efecto, donde fadeIn y fadeOut con el evento JQuery lo que hará es hacer aparecer el botón cuando se navegue hacia abajo y al subir desaparecerá el mismo, buscamos esta linea </head> y lo pegamos justo arriba
<script type="text/javascript">
$(document).ready(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > 200) {
$('.scrollup').fadeIn();
} else {
$('.scrollup').fadeOut();
}
});
$('.scrollup').click(function(){
$("html, body").animate({ scrollTop: 0 }, 700);
return false;
});
});
</script>

Guardamos los cambios y listo, el misterioso botón está en nuestro sitio.

Buscador para blogger personalizado

Buscador de blogger
Buscando e indagando algunas variantes para la estructura inicial del buscador de blogger he visto muchas opciones con algunos buscadores de gran diseño y estilo, pero al parecer no todos cumplen la principal labor.
Esta es la estructura básica del buscador, que en realidad es un simple formulario donde action=/search seguido del botón de submit es la parte que hace el trabajo de encontrar la palabra clave dentro del índice del sitio.

<form id="searchbox" method="get" action="/search">
<input name="q" type="text" size="15" placeholder="Busqueda" />
<input id="button-submit" type="submit" value="Buscar" />
</form>

Es el buscador básico y su aspecto visual queda de esta manera solo agregándolo tal cual.
 Buscador de blogger

Teniendo eso en cuenta podemos hacer infinidad de variantes dependiendo de la imaginación y el gusto de cada quien.
Opción 1:
 Buscador de blogger

<style>
#searchbox {
background: #2f6aba;
border: 2px solid #8a9cb3;
padding: 10px 10px;
width: 240px;
}
input:focus::-webkit-input-placeholder {
color: transparent;
}
input:focus:-moz-placeholder {
color: transparent;
}
input:focus::-moz-placeholder {
color: transparent;
}
#searchbox input {
outline: none;
}
#searchbox input[type="text"] {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW21VhBgErqaT0qF74sR6YeL7XxdSHVoKMoDii_ghof1lWQn85guI3mxPGAjtb_HYl5FT3ITzCyLk7Vt7BvkQw7FYACKwW2bvcJV-O-05JtzCvz2NtvG6BdhAyhDX8PJQ-6U0d9FN6Lj1-/h120/Lapizycafe-buscador.png) no-repeat 10px 6px #fff;
border-width: 1px;
border-style: solid;
border-color: #fff;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #777;
width: 55%;
padding: 8px 15px 8px 30px;
}
#button-submit {
background: #1f5174;
border-width: 0px;
padding: 9px 0px;
width: 23%;
cursor: pointer;
font: bold 12px Arial, Helvetica;
color: #fff;
text-shadow: 0 1px 0 #000;
}
#button-submit:hover {
background: #73a2e2;
}
#button-submit:active {
background: #5b5d60;
outline: none;
}
#button-submit::-moz-focus-inner {
border: 0;
}
</style>
<form id="searchbox" method="get" action="/search">
<input name="q" type="text" size="15" placeholder="Busqueda" />
<input id="button-submit" type="submit" value="Buscar" />
</form>

Opción 2:
 Buscador de blogger

<style>
#searchbox {
background: #e053ca;
border: 1px solid #d596cb;
padding: 10px 10px;
width: 240px;
border-radius: 15px;
}
input:focus::-webkit-input-placeholder {
color: transparent;
}
input:focus:-moz-placeholder {
color: transparent;
}
input:focus::-moz-placeholder {
color: transparent;}
#searchbox input {
outline: none;
}
#searchbox input[type="text"] {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW21VhBgErqaT0qF74sR6YeL7XxdSHVoKMoDii_ghof1lWQn85guI3mxPGAjtb_HYl5FT3ITzCyLk7Vt7BvkQw7FYACKwW2bvcJV-O-05JtzCvz2NtvG6BdhAyhDX8PJQ-6U0d9FN6Lj1-/h120/Lapizycafe-buscador.png) no-repeat 10px 6px #fff;
border-width: 1px;
border-style: solid;
border-color: #fff;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #e053ca;
width: 55%;
padding: 5px 15px 5px 30px;
border-bottom-left-radius: 12px;
border-top-left-radius: 12px;
}
#button-submit {
background: #a0158b;
border-width: 0px;
padding: 6px 0px;
width: 23%;
cursor: pointer;
font: bold 12px Arial, Helvetica;
color: #fff;
text-shadow: 0 1px 0 #000;
border-bottom-right-radius: 15px;
border-top-right-radius: 15px;
}
#button-submit:hover {
background: #ce4bb7;
}
#button-submit:active {
background: #5b5d60;
outline: none;
}
#button-submit::-moz-focus-inner {
border: 0;
}
</style>
<form id="searchbox" method="get" action="/search"> <input name="q" type="text" size="15" placeholder="Busqueda" />
<input id="button-submit" type="submit" value="Buscar" />
</form>

Opción 3:
 Buscador de blogger

<style>
#searchbox {
border: 3px solid #a3aeb2;
padding: 10px 10px;
width: 240px;
background-image: -moz-linear-gradient(#494d4f, #000);
background-image: -webkit-gradient(linear, center top, center bottom, from(#494d4f), to(#000));filter:
progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#494d4f,endColorStr=#000);"
}
input:focus::-webkit-input-placeholder {
color: transparent;
}
input:focus:-moz-placeholder {
color: transparent;
}
input:focus::-moz-placeholder {
color: transparent;
}
#searchbox input {
outline: none;
}
#searchbox input[type="text"] {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW21VhBgErqaT0qF74sR6YeL7XxdSHVoKMoDii_ghof1lWQn85guI3mxPGAjtb_HYl5FT3ITzCyLk7Vt7BvkQw7FYACKwW2bvcJV-O-05JtzCvz2NtvG6BdhAyhDX8PJQ-6U0d9FN6Lj1-/h120/Lapizycafe-buscador.png) no-repeat 10px 6px #fff;
border-width: 1px;
border-style: solid;
border-color: #fff;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #777;
width: 55%;
padding: 5px 15px 5px 30px;
border-bottom-left-radius: 12px;
border-top-left-radius: 12px;
}
#button-submit {
background: #252a2c;
border-width: 0px;
padding: 6px 0px;
width: 23%;
cursor: pointer;
font: bold 12px Arial, Helvetica;
color: #fff;
text-shadow: 0 1px 0 #000;
border-bottom-right-radius: 15px;
border-top-right-radius: 15px;
background-image: -moz-linear-gradient(#494d4f, #000);
background-image: -webkit-gradient(linear, center top, center bottom, from(#494d4f), to(#000));filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#494d4f,endColorStr=#000);"
}
#button-submit:hover {
background: #252a2c;
}
#button-submit:active {
background: #3d5157;
outline: none;
}
#button-submit::-moz-focus-inner {
border: 0;
}
</style>
<form id="searchbox" method="get" action="/search">
<input name="q" type="text" size="15" placeholder="Busqueda" />
<input id="button-submit" type="submit" value="Buscar" />
</form>

Simple slider manual con JQuery

Slider con JQuery para blogger
Un slider tipo carrusel con imágenes y botones de ir adelante y hacía atrás, fácil de implementar funciona con JQuery y es totalmente personalizable tanto en tamaño como ajustes básicos como colores de fondo y tiempo de transición, se puede establecer cualquier cantidad de imágenes posibles.
La ubicación ideal sería arriba de las entradas, si lo desean solo en la portada solo tendrían que condicionarlo, y el resultado se vería de esta manera:


Lo que haremos es ir a diseño y agregar un HTML-JavaScript justo arriba de las entradas pero si gustan lo pueden ubicar donde quieran ya que es totalmente ajustable.
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
var speed = 5000;
var run = setInterval('rotate()', speed);
var item_width = $('#slides li').outerWidth();
var left_value = item_width * (-1);
$('#slides li:first').before($('#slides li:last'));
$('#slides ul').css({'left' : left_value});
$('#prev').click(function() {
var left_indent = parseInt($('#slides ul').css('left')) + item_width;
$('#slides ul').animate({'left' : left_indent}, 100,function(){
$('#slides li:first').before($('#slides li:last'));
$('#slides ul').css({'left' : left_value});
});
return false;
});
$('#next').click(function() {
var left_indent = parseInt($('#slides ul').css('left')) - item_width;
$('#slides ul').animate({'left' : left_indent}, 100, function () {
$('#slides li:last').after($('#slides li:first'));
$('#slides ul').css({'left' : left_value});
});
return false;
}); $('#slides').hover(
function() {
clearInterval(run);
},
function() {
run = setInterval('rotate()', speed);
}
);
});
function rotate() {
$('#next').click();
}
//]]>
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<div id="contenedor">
<div id="carousel">
<div class="clear"></div>
<div id="slides">
<ul>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKbPoGE0-wJs72dvOFUmj9gq8gButPp_tsClP7sTvTPM4dP_P1RXqh5xLrz4LsxyBDAX0OK0QKZDUtlfT4laWDESgwhJBmXHGkDEyWuOiWQtSRtiRZxktZ0q-JaI5ZTeVsPaz_0atfnMFZ/s1600/concerse3.jpg" width="580" height="300" alt="Slide 1"/></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhL89DTxvsUIOZv8jujg0XLV-rtOQlAEMTWkMle3q2J-KMwmXzO2Xa_0-c9it0oGO_tCufWIv-buJFD1uhZ2fNzPlWw50Bqb-sgqID563Ko8KPSggr4DCCu_X9FyqsCeuccHAc5dvJC0bSw/s1600/converse2.jpg" width="580" height="300" alt="Slide 2"/></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL824zvvVpTrr6TlhYFA6XokSrAxfi-ZApv64ShnjJzTS-5nPrV4Rx2ra3FA2Qa2dgmP8cRvTbaMzI_ZC2w7CCLITjKedo-ULTSB6OoU5J7aMKZDQoSc-0XvKYnbtsDWfFZd3PszqDAG7o/s1600/cinverse1.jpg" width="580" height="300" alt="Slide 3"/></li>
</ul>
<div class="clear"></div>
</div>
<div id="buttons">
<a href="#" id="prev">prev</a>
<a href="#" id="next">next</a>
</div>
</div>
</div>
<style type="text/css">
#contenedor {
padding: 5px;
width: 593px;
height: 340px;
background: #fff;
border-radius: 10px;
border:2px solid #ccc;
}
#carousel {
height:340px;
margin:0 auto;
}
#slides {
overflow:hidden;
position:relative;
width:590px;
height:310px;
border:1px solid #ccc;
}
#slides ul {
position:relative;
left:0;
top:0;
list-style:none;
margin:0;
padding:0;
width:1740px;
}
#slides li {
width:590px;
height:310px;
float:left;
}
#slides li img {
padding:5px;
}
#buttons {
padding:0 0 5px 0;
margin-left: 265px;
float:left;
}
#buttons a {
display:block;
width:31px;
height:32px;
text-indent:-999em;
float:left;
outline:0;
}
a#prev {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifte90qgLA1EJNil3VrVGC1dLp4kwjUv8XPiopTLrrZLDYb-HUfjToUwMD0DZGReBezlFtfDUJOvPnhL6CkJTvc1OXOZ87HHYEGlkTOF_NAFl3fxPPxMbnxrAxHYK8nJi8GCEojVF6Xo-P/s1600/ADS.gif) 0 -31px no-repeat;
}
a#prev:hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifte90qgLA1EJNil3VrVGC1dLp4kwjUv8XPiopTLrrZLDYb-HUfjToUwMD0DZGReBezlFtfDUJOvPnhL6CkJTvc1OXOZ87HHYEGlkTOF_NAFl3fxPPxMbnxrAxHYK8nJi8GCEojVF6Xo-P/s1600/ADS.gif) 0 0 no-repeat;
}
a#next {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifte90qgLA1EJNil3VrVGC1dLp4kwjUv8XPiopTLrrZLDYb-HUfjToUwMD0DZGReBezlFtfDUJOvPnhL6CkJTvc1OXOZ87HHYEGlkTOF_NAFl3fxPPxMbnxrAxHYK8nJi8GCEojVF6Xo-P/s1600/ADS.gif) -32px -31px no-repeat;
}
a#next:hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifte90qgLA1EJNil3VrVGC1dLp4kwjUv8XPiopTLrrZLDYb-HUfjToUwMD0DZGReBezlFtfDUJOvPnhL6CkJTvc1OXOZ87HHYEGlkTOF_NAFl3fxPPxMbnxrAxHYK8nJi8GCEojVF6Xo-P/s1600/ADS.gif) -32px 0 no-repeat;
}
.clear {clear:both}
</style>

Algunos ajustes básicos:
var speed = 5000; es el tiempo de transición entre imagen e imagen.

animate({'left' : left_indent}, 100,function() es la velocidad de traslado de las imagenes

<li><img src="URL de su imagen" width="580" height="300" alt="Descripción de la imagen"/></li>

Width y height son el ancho y alto de las mismas.

Para establecer enlaces para las imágenes la estructura sería de esta forma:

<li><a href="URL del enlace"><img alt=" Descripción de la imagen " src="URL de la imagen" height="alto de la imagen" title="Titulo de la imagen" width="ancho de la imagen" /></a></li>

El resto de los valores como colores de fondo, bordes tamaños son personalizables.
Como se ve es muy sencillo y le da un toque diferente al sitio.

2 sitios para descargar el audio MP3 de YouTube

YouTube MP3
Un par de sitios sumamente útiles para descargar en línea el audio en formato MP3 de los videos de YouTube sin necesitad de ningún programa, pues algunas veces cuesta encontrar el audio de nuestra banda favorita y si todos somos iguales siempre rodamos el video una y otra ves para escuchar el tema, si queremos alguna variante para el audio cualquiera de estos sitios permite descargar el audio con una calidad de 128kbps la cual no es tan mala.

Opción 1 :


 YouTube MP3

Opción 2 :


 YouTube MP3

En ambos casos solo hay que copiar la URL del video, pegarlo y convertirlo, luego de un momento nos dará la opción de descargar así de fácil.

Personalizar enlaces de blogger

Los enlaces en las plantillas tradicionales y plantillas con diseñador suelen venir por defecto con tres características, una el color del enlace en sí, dos el color o el efecto hover del enlace que en la mayoría de los casos es un efecto subrayado, y la tercera es el color de un enlace visitado.
Bien vamos a tratar de cambiar esas cosas, el subrayado en los enlaces pienso que no debe usarse más, cada quien lo puede ver a su gusto claro está.
Para modificarlo vamos a hacer unos simples pasos.
Vamos a plantilla, presiona control F, y ubicamos estas 3 líneas que abarcan las tres características que nombramos.
a:link {
 Enlaces de blogger

Sustituimos esas tres líneas por lo siguiente:
a:link {
font-weight:bold;
text-decoration:none;
color: #2f84dc;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
a:visited {
text-decoration:none;
color: #2f84dc;
font-weight:bold;
}
a:hover {
font-weight:bold;
color: #043f55;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}

Esto lo que hace es primero eliminamos el subrayado, los enlaces quedan con un grosor diferente al reto de los textos, eliminamos el color del enlace visitado ya que no tiene mucho sentido que un enlace tenga tres colores, y por ultimo un efecto lento de cambio de colores.
Donde dice color:#aquí va el color de su preferencia; si lo modificamos debemos colocar el mismo valor en la primera y segunda etiqueta ya que son el enlace en sí, y el enlace visitado, la tercera es el enlace al pasar el cursor, es donde va el valor diferente.
Estas cosas son muy básicas, pero hacen la diferencia.

Menú simple con CSS, bordes redondeados

 Menú con CSS
Un menú simple con CSS con bordes redondeados, la estructura HTML la pegaremos junto a los estilos en un HTML/JavaScript, para aplicarlo donde aparece el símbolo numeral # indica la url de cada enlace que agreguemos, no tiene mayor complicación y es algo diferente a los menús planos que trae blogger por defecto.
Para implementarlo, copiamos y pegamos el siguiente código, hay que tener en cuenta que la mejor parte para situarlo es debajo de la cabecera del sitio, de esta manera lo cambiamos por el menú que trae blogger.

El resultado se vería de esta forma:

Totalmente personalizable ya que es solo con CSS.
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Enlaceo</a></li>
<li><a href="#">Enlacea</a></li>
<li><a href="#">Enlace</a></li>
<li><a href="#">Enlace</a></li>
</ul>
</nav>
<style type="text/css">
nav {
display: block;
width: 100%;
overflow: hidden;
}
nav ul {
margin: 80px 0 20px 0;
padding: .7em;
float: left;
list-style: none;
background: #444;
background: rgba(0,0,0,.2);
border-radius: .5em;
box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.8) inset;
}
nav li {
float:left;
color:#1667e1;
}
nav a {
float:left;
padding: .8em 1.5em;
text-decoration: none;
color: #555;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
font: bold 1.1em/1 'trebuchet MS', Arial, Helvetica;
letter-spacing: 1px;
text-transform: uppercase;
border-width: 1px;
border-style: solid;
border-color: #fff #ccc #999 #eee;
background: #c1c1c1;
background: linear-gradient(#ffffff, #aaaeb5);
}
nav a:hover, nav a:focus {
outline: 0;
color: #fff;
text-shadow: 0 1px 0 rgba(0,0,0,.2);
background: #fac754;
background: linear-gradient(#4e8ff1, #87afec);
}
nav a:active {
box-shadow: 0 0 2px 2px rgba(0,0,0,.3) inset;
}
nav li:first-child a {
border-left: 0;
border-radius: 8px 0 0 8px;
}
nav li:last-child a {
border-right: 0;
border-radius: 0 8px 8px 0;
}
</style>

Widgets de imágenes de últimas entradas con efecto

 gadget entradas recientes
Vamos a implementar un widgets simple solo de imágenes de las últimas publicaciones con un efecto hover de bordes redondeados, la función es bastante simple, usando un script de JSON que leerá los feeds de nuestro sitio y hará el resumen del mismo, lo que haremos es modificar un poco los estilos para hacer una pequeña galería de solo la imágenes sin resumen de texto, para eso vamos a hacer los siguiente:

Vamos a diseño y agregamos un JavaScript HTML y pegamos el siguiente código:
<style>
#bp_recent {
width:300px;
padding: 5px;
color: #999;
font-size: 14px;
text-align:justify;
}
#bp_recent img {
width: 70px;
height: auto;
border: 3px solid #5b6569;
border-bottom-left-radius: 20px;
border-top-right-radius: 20px;
opacity: 1.0;
-webkit-box-shadow: 0px 0px 9px -1px rgba(3,142,222,1);
-moz-box-shadow: 0px 0px 9px -1px rgba(3,142,222,1);
box-shadow: 0px 0px 9px -1px rgba(3,142,222,1);
-moz-transition: all 2s;
-webkit-transition: all 2s;
-o-transition: all 2s;
}
#bp_recent img:hover{
opacity: 0.5;
border-bottom-left-radius: 3px;
border-top-right-radius: 3px;
-moz-transition: all 2s;
-webkit-transition: all 2s;
-o-transition: all 2s
}
#bp_recent a{
color: #fff;
font-size: 15px;
text-transformation: uppercase;
margin-bottom: 5px!important;
}
#bp_recent a:hover {
text-decoration: underline;
}
</style> <div id='bp_recent'></div>
<script type="text/javascript" src="https://sites.google.com/site/escribiendotrazos/JsEntradasEscribiendoT.txt"></script>
<script style='text/javascript'>
var numberOfPosts = 9;
var showPostDate = false;
var showSummary = false;
var summaryLength = 0;
var titleLength = 0;
var showCommentCount = false;
var showThumbs = true;
var showNoImage = true;
var imgDim = 55;
var imgFloat = 'left';
var myMargin = 5;
var mediaThumbsOnly = true;
var showReadMore = false;
var readMore = 'Leer más';
</script>
<script src=' http://lapizycafe.blogspot.com/feeds/posts/summary?max-results=10&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails'></script>

Modificaciones: reemplazar el nombre por el de su sitio, el numero 9 marcado en rojo es la cantidad de imágenes de post, todos los estilos se pueden modificar, el resultado sería algo como esto.

Gadget de entradas recientes simple

 Últimas entradas para blogger

Gadget de entradas recientes simple para blogger usando JSON, la función es sencilla lo que hace el Script es leer los últimos artículos del sitio haciendo este pequeño resumen, para implementarlo lo que hay que hacer es ir a diseño agregar un JavaScript HTML y pegar todo este código:
<div id="recientes">
<script src="https://sites.google.com/site/escribiendotrazos/JSescribiendoT.txt">
</script>
<script>
var numposts = 5;var showpostdate = false;var showpostsummary = true;var numchars = 100;var standardstyling = true;
</script>
<script src="http://lapizycafe.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts">
</script>
</div>
<style type="text/css">
#recientes a {
color: #3c9df5;
font-size: 15px;
font-family: "Josefin Sans",sans-serif;
}
#recientes {
color: #777;
font-size: 11px;
padding: 5px;
border: 2px solid #47657f;
border-radius: 5px;
background: #293036;
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw2CU92QndK3VFpzu-n_t0SjRlFusrfQJ6Pd5SVG49d4UNy2TQbnfQ-usUDSALBenMY2RFkqwsW30oBA741FG0gK2z6HU1lKHoFux1McaHqA0cjyhL1FEnQKKtOuVo0hPk5swPyt6hjy0X/s1600/fonox.jpg");
}
</style>

Hay que tener en cuenta el nombre de su sitio, sustituir lo resaltado y agregar su nombre todos los estilos se puede modificar al gusto, el resultado sería algo como esto:

Menú vertical desplegable con CSS y JQuery


Un menú vertical para la sidebar del blog, bastante práctico con sub pestañas integradas tipo acordeon, es algo estético con un toque minimalista.
La estructura se basa en el script, los estilos y la estructura HTML, estas 3 partes yo en lo personal las coloco en la plantilla por separados, claro está si lo usaré a posteriori, lo primero que debemos tener en cuenta es implementar JQuery en nuestra plantilla, algunas ya lo traen por defecto, pero en caso de no tenerlo ubicamos la línea del <head> y justo arriba pegamos la siguiente línea

<script src='http://code.jquery.com/jquery-latest.js'/>
Si ya lo tienen omitan dicho paso.
A continuación buscamos la línea del ]]></b:skin> y justo arriba pegamos primero los estilos.
/* MenuSidebar Escribiendo Trazos */
#elmenu,#elmenu ul,#elmenu li,#elmenu a {
margin: 0;
 padding: 0;
 border: 0;
list-style: none;
font-weight: normal;
text-decoration: none;
 line-height: 1;
font-family: 'Josefin Sans', sans-serif;
 font-size: 14px;
 position: relative;
}
#elmenu a {
 line-height: 1.3;
}
#elmenu {
 width: 250px;
background: #fff;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
padding: 3px;
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
 box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
}
#elmenu > ul > li {
margin: 0 0 2px 0;
}
#elmenu > ul > li:last-child {
margin: 0;
}
#elmenu > ul > li > a {
 font-size: 15px;
display: block;
color: #ffffff;
text-shadow: 0 1px 1px #000;
background: #565656;
background: -moz-linear-gradient(#565656 0%, #323232 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #565656), color-stop(100%, #323232));
background: -webkit-linear-gradient(#565656 0%, #323232 100%); background: linear-gradient(#565656 0%, #323232 100%);
border: 1px solid #000;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
#elmenu > ul > li > a > span {
display: block;
border: 1px solid #666666;
padding: 6px 10px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px; font-weight: bold;
}
#elmenu > ul > li > a:hover {
text-decoration: none;
}
#elmenu > ul > li.active {
border-bottom: none;
}
#elmenu > ul > li.active > a {
background: #97be10;
background: -moz-linear-gradient(#0f88c0 0%, #0779c8 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #0f88c0), color-stop(100%, #0779c8));
background: -webkit-linear-gradient(#97be10 0%, #79980d 100%); background: linear-gradient(#0f88c0 0%, #0779c8 100%);
color: #fff;
text-shadow: 0 1px 1px #000; border: 1px solid #79980d;
}
#elmenu > ul > li.active > a span {
border: 1px solid #97be10;
}
#elmenu > ul > li.has-sub > a span {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfqAV772wSc63Pf4oDvA8MW-cCm8OU92KoYcjuUkA0Nwg-EE7N3592cSl1OGarKJAPlaxlMxgm9F8lJyC2RxMCO2DHkmc2XlQppuXKW9glJZMCKqEtT8JRX52aoDvTfnifcS15nHhCx33D/s1600/icon_plus.png) 98% center no-repeat;
}
#elmenu > ul > li.has-sub.active > a span {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi14-H3QNJC9aPnjw_FOjod6FGWhkhHB9q3NyZdx9QEZv-_q-ED1vDHKvSjqlG38a05m-ot5adV3PKjF0ySJoqLxEP315itjDpzBoiPD3ZNLjQV6mImI8oB2XFZGowXLQbmj5YnRT3Bz30B/s1600/icon_minus.png) 98% center no-repeat;
}
/* Sub menu */
#elmenu ul ul {
padding: 5px 12px; display: none;
}
#elmenu ul ul li {
padding: 3px 0;
}
#elmenu ul ul a {
display: block;
color: #595959;
font-size: 13px;
font-weight: bold;
}
#elmenu ul ul a:hover {
color: #79980d;
}
Luego buscamos esta línea </head> y pegamos ahora el Script que hará la función de despliegue.
<script type='text/javascript'>
//<![CDATA[
( function( $ ) {
$( document ).ready(function() {
$('#elmenu > ul > li > a').click(function() {
$('#elmenu li').removeClass('active'); $(this).closest('li').addClass('active');
 var checkElement = $(this).next();
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
 $(this).closest('li').removeClass('active');
checkElement.slideUp('normal');
}
 if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
 $('#elmenu ul ul:visible').slideUp('normal');
checkElement.slideDown('normal');
}
 if($(this).closest('li').find('ul').children().length == 0) {
return true;
 } else {
 return false; }
});
});
} )( jQuery );
//]]> </script>

Damos guardar plantilla y por último nos vamos a diseño y agregamos un JavaScript HTML y pegamos la estructura del menú.
<div id='elmenu'>
<ul>
<li class='active'><a href='URL-Inicio'><span>Inicio</span></a></li>
<li class='has-sub'><a href='#'><span>ENLACE1</span></a>
<ul>
<li><a href='URL-SUB'><span>PESTAÑA1</span></a></li>
<li><a href='hURL-SUB'><span>PESTAÑA2</span></a></li>
<li class='last'><a href='URL-SUB'><span>PESTAÑA3</span></a></li>
</ul> </li>
<li class='has-sub'><a href='#'><span>ENLACE3</span></a>
<ul> <li>
<a href='URL-SUB'><span>PESTAÑA1</span></a></li>
<li class='last'><a href='URL-SUB'><span>PESTAÑA2</span></a></li>
</ul> </li>
<li class='last'><a href='URL-ENLACE4'><span>ENLACE4</span></a></li>
</ul>
</div>
La estructura se puede personalizar, agregando o eliminando sub pestañas, tal como se muestra en el código, el ejemplo en ejecución lo vemos en este demo.

Fecha tipo calendario para blogger personalizado

 Fecha calendario blogger
Personalizar un poco la fecha del blog tiene sus truquitos, quedará tipo calendario en forma de un pequeño listón pegado al lateral junto al título de la entrada, el ejemplo se puede ver en este blog, para hacerlo hay que seguir tres pasos muy simples.
Primero que nada hay que establecer el formato de fecha del blog de la siguiente forma: 20 Diciembre 2014. Luego de hacer eso vamos a la plantilla y ubicamos esta línea, </head> y justo arriba pegamos el siguiente código; este no es más que un Script que hará la función de reemplazar el formato por defecto.
<script>
function calendario(d){ var da = d.split(' ');
dia = "<strong class='fecha_dia'>"+da[0]+"</strong>";
mes = "<strong class='fecha_mes'>"+da[1].slice(0,3)+"</strong>";
anio = "<strong class='fecha_anio'>"+da[2]+"</strong>";
document.write(dia+mes+anio);
}
</script>

Lo siguiente será ubicar esta línea en la plantilla: <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
Normalmente esa línea debería aparecer dos veces en ambos casos la sustituimos por esta:
<div id='fecha'>
 <script>calendario('<data:post.dateHeader/>');</script>
</div>

Ahora localizamos la etiqueta ]]></b:skin> y justo arriba pegamos los estilos del calendario.
#fecha {
font-family: Arial, Verdana;
display: block;
float:left;
margin: 0px 10px 0 -30px;
padding: 0 5px 5px 5px;
width:30px;
height:54px;
background: transparent url(http://i.imgur.com/ztc1Ib0.png?1) no-repeat ;
height: 54px;
text-transform: uppercase;
}
.fecha_mes {
display: block;
margin-top:-10px;
font-size: 11px;
color:#ffffff;
text-align:center;
}
.fecha_anio {
display: block;
font-size: 11px;
color:#ffffff;
margin-top:-6px;
text-align:center;
}
.fecha_dia {
font-family: 'Times New Roman';
margin-top:-3px;
display: block;
font-size:20px;
text-align:center;
color:#1073D0;
}

Damos guardar y listo.
Todos los estilos se pueden personalizar al gusto, donde está marcado en rojo pueden sustituir esa imagen por la suya, lo importante es que tenga las medidas que establezcan en los estilos.

Fondos de colore en distinto elementos


La estructura de las plantillas de Blogger y de cualquier página web está formada por contenedores, dentro de estos se ubican los diferentes elementos de la estructura, como son la cabecera, el cuerpo, el pie de página, y muchos más, todos estos son identificados con un atributo Div.
Si contiene algo, ese algo se puede editar de infinitas formas, incluyendo el fondo, a cada uno de estos contenedores podemos aplicarle un determinado fondo, de esta manera se puede empezar lo que sería un diseño agradable y salir un poco de las cosas planas que traen por defecto cada plantilla.
Ejemplo:
<div class='algo'>
 </div>
Esto es la estructura HTML, para aplicar los estilos deben ubicar la hoja de los mismos dentro de su platilla, en este caso es dentro de la línea del <b:skin> que es donde van todos los estilos.
Para aplicarlo seria de esta forma:
.algo {
...Aquí van todos los estilos que le queramos agregar…
}
Hay que recordar siempre que debemos aplicar la etiqueta de estilo con corchetes tanto para abrir como para cerrar, si no se aplica uno de estos la plantilla puede quedar mal formada.

Para agregar un determinado fondo el atributo seria denominado background, esto no es más que el fondo de cada cosa de la estructura, para aplicarlo hay que agregar el color y se aplica con una paleta de colores RGB como la que vemos en Photoshop, por ejemplo un color rojo sería de esta manera: dd1919
Y para aplicarlo basta agregar el simbolo numeral # junto a la etiqueta de cierre que es el punto y coma
El ejemplo completo sería de esta manera:
Dentro del HTML ...
<div class='algo'>
 </div>
Dentro de la hoja de estilo.
.algo {
background: #dd1919;
}
En funcionamiento quedaría algo así:
Un div rojo
Un div azul
Un div de ese color

Estos contenedores no tienen nada, es decir solo estan vacíos, entonces a lo que vamos es que cada cosa que se ve en la estructura del blog está dentro de un contenedor, podemos aplicar los cambios que queramos ya que todo está ahí.
Para aplicar un color de fondo al cuerpo del post ubicamos esta etiqueta:
.post-body {
...Aquí aplicamos el fondo como lo hicimos en ese ejemplo...
}
Aplicar fondo a la cabecera o header, buscamos esta etiqueta:
.header-outer {
...Aquí va el color...
}
De esa manera se pueden ubicar todos los elementos y cambiarle los colores, cabe destacar que estas cosas se hacen muy fácil mediante el diseñador de las plantillas, pero yo en lo personal prefiero hacerlo manualmente ya que cuando aplicas cambios con el diseñador todo queda desordenado, y además así aprendemos algo de diseño web, aunque sea amateur.

Pre cargador con JQuery

Un preloader o pre cargador es un elemento que normalmente se utiliza en los intros de algunas páginas webs o bien para cargar algún archivo especifico, en este caso trataremos de experimentar en un blog, aunque son muy estéticos y llamativos cabe destacar que no es muy recomendable para sitios de abundante tráfico y sobre todo muy cargados de archivos, ya que como lo dice el nombre; el preloader al funcionar de manera automática estará presente hasta que la página cargue todos los archivos, de esta manera algún sitio que sea muy sobrecargado y sea lento no se verá muy bien ya que el lector solo vera el preloader por un largo lapso y se ira del sitio.
Bien teniendo en cuenta eso vamos a la práctica;

Lo que haremos es introducir un DIV en el cual estará presente nuestro preloader, y dentro de este estará la imagen en movimiento que indicara el load del sitio.

<div id="preloader">
<div id="loader">
</div>
</div>

Indicaremos los estilos que se aplicaran para el DIV que contiene la imagen del preloader.

body {
overflow: hidden;
}
/* preloader */
#preloader {
 position: fixed; top:0; left:0; right:0; bottom:0;
 background: #000;
 z-index: 100;
}
 /* El gif */
#loader {
 width: 100px;
height: 100px;
position: absolute;
 left:50%;
top:50%;
background: url(URLimagen) no-repeat center 0;
margin:-50px 0 0 -50px;
 }
</style>

El Scripts que emplearemos será el encargado de ejecutar el preloader, la función será que nuestro elemento aparezca cuando el blog empiece a cargar, una vez que cargue todos los archivos, el elemento desaparecerá.

$(window).load(function() {
    $('#preloader').fadeOut('slow');
    $('body').css({'overflow':'visible'}); })

Bien una vez teniendo esos 3 elementos charlaremos un poco y tomaremos café, ese preloader si lo llegásemos a aplicar en nuestro sitio hará la función cada vez que carguemos cualquier página dentro del blog o web, entonces vamos a hacer algunas variantes para que funcione solo en la home, de esta manera cuando el visitante cargue el resto de las paginas exceptuando el home no se mostrara el loader.

El código será el siguiente:
Vamos a buscar el aplantilla esta línea: <body> 
En caso de no aparecer esa línea en su plantilla buscaremos esta:
<body expr:class='"loading" + data:blog.mobileClass'> 
Justo arriba de ese condigo pegaremos nuestro DIV:

<div id='preloader'>
<div id='loader'/>
</div>

Ahora introducimos nuestro Sripts, buscamos esta línea: </body>
Y justo arriba vamos a pegar nuestro Scripts con una condicional, para que solo se cargue en el home.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'> </script>
 <script type='text/javascript'> $(window).load(function() {
  $('#preloader').fadeOut('slow');
  $('body').css({'overflow':'visible'}); })
</script>
 </b:if>

Bien por ultimo buscamos esta línea: <head>
Y justo debajo pegamos los estilos para nuestro DIV de igual manera lo condicionaremos.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
body {
overflow: hidden;
}
/* preloader */
#preloader {
 position: fixed; top:0; left:0; right:0; bottom:0;
 background: #000;
 z-index: 100;
}
 /* El gif */
#loader {
 width: 100px;
height: 100px;
position: absolute;
 left:50%;
top:50%;
background: url(URLimagen) no-repeat center 0;
margin:-50px 0 0 -50px;
 }
</style>
</b:if>

Algunas variantes: 
Donde dice URLimagen podemos usar el gif del load que gustemos, solo hay que alojarlo y emplearlo.
Donde dice width: 100px; height: 100px; debe ser el ancho y alto del gif
El Scripts está predispuesto a hacer el efecto con 'Slow' pero esto podemos variarlo entre 3000 o 1000 o como queramos, esto altera el tiempo que tardará el loader en desvanecer.

Como lo hicimos con condicionales solo se cargara en el home, hay una entrada de prueba para constatar que solo aplica en el inicio.
Demo online

Conclusiones: es un elemento muy llamativo y estético para nuestro sitio, muy fácil de emplear aunque algo no muy eficiente como dijimos para sitios muy cargados.


Implementa google font en tu blog

Una de las primeras cosas que debemos tener en cuenta sin duda es la tipografía principal de nuestro blog, sobre todo si queremos hacer un buen proyecto con nuestro sitio.
Implementar Google Font es muy sencillo, primero vamos a tener en cuenta ciertas cosas:
Lo ideal sería usar un par de fuentes o quizás tres como mucho, ya que no es recomendable usar tantas debido a que la carga de nuestro espacio se hará muy lento, con 2 o 3 la carga será excelente.
La primera y la más importante es sin duda la fuente que usaremos en el post-body que es en si el cuerpo de cada post.
La segunda fuente será la que identificará los encabezados de los títulos <h1> <h2> <h3> etc.
Se puede usar una tercera fuente para algunas otras cosas como: enlaces, archivos del blog, etiquetas etc. Pero esto es opcional.
Bien ya que tenemos en cuenta esas tres cosas vamos a implementar Google Font, lo primero que haremos es ir hasta el sitio oficial Google Font

Ahora solo hay que elegir la fuente de nuestro gusto, una vez elegida pichamos el botón a la derecha que dice “add to collection” esto si queremos guardar la fuente, hecho esto pinchamos el botón pequeño que dice “Quick-use”.
A continuación nos mostrará 4 pasos el primero es la elección del grosor de de la fuente, esto es opcional así que si quieren lo omiten.
La segunda muestra el tipo de carácter que vendrá en la fuente, como el nuestro es latín lo dejamos tal cual como está.
Ahora el primer cogido será el que cargue la fuente en el blog, copiamos el código que es algo como esto:
<link href='http://fonts.googleapis.com/css?family=Play:400,700' rel='stylesheet' type='text/css'>
Ahora lo que haremos es ir hasta la plantilla, y buscar esta línea <head>
Ahora vamos a agregarle una llave de cierre al final del código, ya que de esta manera el blog podrá leerlo. El ejemplo es el marcado en rojo
Queda de esta manera:
<link href='http://fonts.googleapis.com/css?family=Play:400,700' rel='stylesheet' type='text/css'/>
Y lo pegamos justo debajo de esta línea <head>
Bien con eso ya tenemos la fuente en el blog, ahora el último paso es buscar esta línea: .post-body {
Y justo debajo pegamos el estilo que nos provee Google Font.
Como dijimos ese es el cuerpo del post, ahí ponemos modificar el color del texto, el alto y el porcentaje, en esa parte pegamos el estilo, quedaría algo como esto:

.post-body {
font-size: 110%;
line-height: 1.4;
position: relative;
color: #fff;
font-family: 'Play', sans-serif;
}
Guardamos la plantilla y listo con eso ya tenemos la fuente; para otras fuentes se hace el mismo procedimiento, si es para los títulos deben buscar las líneas correspondientes ejemplo: h1.post-title, .comments h4 etc, y justo debajo pegar el estilo que provee Google Font, con eso ya tenemos fuentes estéticas, livianas y atractivas.

¿Fácil? Yo creo que sí.

El primer trazo, la bienvenida

Llegue hasta acá de casualidad, de rebote o por curiosidad; un día le comentaba a un amigo bloggero que por cierto son bastante escasos de encontrar, que me gustaban las cosas que podíamos hacer mediante el blog, las interacciones, los diseños, los elementos que se podían manejar y le platicaba lo mucho que me entretenía, leía tutoriales de distintos tipos, en diferentes sitios de ayuda, de las cosas que he vendido aprendiendo, así que él me dijo ¿Por qué te haces tu propio blog de diseño? aparte de mi clásico blog de arte, al principio no le preste atención a la idea, pero bueno pasaron algunos días y me rondaba esa inquietud, ¿Por qué no hacerlo? Sería muy entretenido.
Y aquí estoy con esta idea de compartir una serie de cosas que aprendí de los blog, quizás nadie lea esto pero una de las cosas que he aprendido de ser bloggero es que podemos escribir todo lo que queramos y nadie pensara que estamos locos.