<script language="JavaScript">
TargetDate = "03/31/2016 5:00 PM";
BackColor = "white";
ForeColor = "black";
CountActive = true;
CountStepper = -1;
LeadingZero = true;
DisplayFormat = "%%D%% Días, %%H%% Horas, %%M%% Minutos, %%S%% Segundos.";
FinishMessage = "Finalizado";
</script>
<script language="JavaScript" src="http://ciudad-blogger.googlecode.com/files/countdown.js"></script>

Con está barra insertada en tu web o blog, podrás darle un toque de sofisticación, diseño, y elegancia, sin igual. Está barra de desplazamiento me llamó la atención.

Tus usuarios podrán desplazarse con más suavidad y sutileza, y mejorarás enormemente la imagen de tu site. Por ejemplo, si tienes un blog muy profesional y bien diseñado, y la barra de desplazamiento es de la vieja escuela, romperá los esquemas profesionales que tiene el lugar y no serán tan homogéneos.

La única pega que tiene este efecto, es que no se visualiza en todos los navegadores, sólo en los navegadores siguientes: Google Chrome, Opera, y Safari.

Ahora sin más preámbulos, vayamos a la tarea que nos concierne para colocar e insertar este fenomenal efecto en Blogger, sigue las pautas a continuación: 

• Ves a Blogger después debes de ir a Plantilla y luego a Editar Html
• Ahora debes de buscar presionando (Ctrl+F) la etiqueta ]]></b:skin>
• Justo antes de dicha etiqueta pega el siguiente código que ves abajo

/* --- Barra de desplazamiento:www.aizumblog.com--- */
::-webkit-scrollbar {
background:#fff;
width:10px;
}
::-webkit-scrollbar-thumb {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
background-image: -webkit-linear-gradient(top, #cc4411 10%,#cc4411 51%);
}
::-webkit-scrollbar-track {
}

Por último deberás de cambiar el color hexadecimal que más se adecue a tu estilo o diseño de tu web o blog, espero que os haya gustado y que comentéis. 

Los bloques entrecomillados se usan para hacer una cita textual, es decir, repetir un fragmento dicho con anterioridad.
La forma de usarlo es encerrando el texto entre <blockquote> y </blockquote> o usando el ícono de entrecomillado que se encuentra en el editor de entradas 
Para personalizar estos bloques entrecomillados entra en Diseño > Edición de HTML y busca esto:

blockquote {
..............
..............
..............
}

Y sustitúyelo por esto:

blockquote {
background: #A9F5D0 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhve6O7VR4mPEKVe8TMo1lczOHLoEySnx_5Tgc7sa-k6XHRcHjQDaRftEK4Kwj0I6QRMwAOIY7UG_3wEJqDm5nKA4vTE7QWk6XzH4kYYJ0Je4joxrpuSwZu6oBtUrMEVhGgRr0iPl9Qa78/s200/blockquote.png) top left no-repeat;
margin: 10px 15px 3px 3px;
padding: 5px 15px 10px 32px;
border-top: 1px solid #DDD;
border-right: 1px solid #666;
border-left: 1px solid #DDD;
border-bottom: 1px solid #666;
font-style: italic;
}

El resultado será este:

Las propiedades CSS de las listas de viñetas son pocas pero podemos apoyarnos con imágenes para hacerlas más vistosas.
Una lista de viñetas puede formarse manualmente de este modo:

<ul>
<li>Artículo 1</li>
<li>Artículo 2</li>
<li>Artículo 3</li>
</ul>

O si lo prefieres puedes usar el botón del editor de entradas 
La lista de viñetas clásica se ve de este modo:

• Artículo 1
• Artículo 2
• Artículo 3

Pero eso no significa que tenga que verse siempre así. Podemos usar otras propiedes para darle otro aspecto.
Por defecto las viñetas usan la propiedad disc y se ven como en el ejemplo anterior. Otras dos propiedades que podemos usar son:

Para cambiar la forma tradicional de tus viñetas por cualquiera de estas dos entra en Diseño > Edición de HTML y agrega esto antes de ]]></b:skin>:

.post ul {
list-style: none;
margin: 10px 0 0 20px;
padding: 0;
}

.post ul li {
margin: 0;
padding: 0 0 0 10px;
}

Ahora donde dice none cámbialo por circle o square, el que más te guste.
O si lo prefieres puedes usar una imagen para hacerlo más vistoso.

En ese caso usarías este código:

.post ul {
list-style: none;
margin: 10px 0 0 20px;
padding: 0;
}

.post ul li {
background:url(URL de la imagen) center left no-repeat;
margin:0;
padding:3px 3px 3px 20px;
}

Cambia lo que está en rojo por la dirección de tu ícono. Puedes ajustar las medidas de margin y padding hasta que quede bien ya que dependiendo de cada plantilla podrá verse más separado o más apretado.

Estas mismas propiedades puedes aplicarlas para las viñetas de la sidebar sólo cambia

.post ul {
.post ul li {

Por:

.sidebar ul {
.sidebar ul li {

Generalmente la barra lateral tiene otras medidas de espacio así que nuevamente tendrás que ajustar el margin y padding hasta que quede bien.

Estas listas se forman así mediante HTML:

<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>

O también podemos usar el ícono del editor de entradas 

Por defecto una lista numerada usa la propiedad decimal y se ve de este modo:

1. Item 1
2. Item 2
3. Item 3
4. Item 4

Pero hay otras propiedades que podemos aplicar para cambiar la forma que se muestran los números. Existen varios estilos para las listas ordenadas pero nos enfocaremos en 5 distintas: upper-roman, lower-roman, upper-latin, lower-latin, decimal-leading-zero.

upper-roman	lower-roman	upper-latin	lower-latin	decimal-leading-zero
Item 1 Item 2 Item 3 Item 4	Item 1 Item 2 Item 3 Item 4	Item 1 Item 2 Item 3 Item 4	Item 1 Item 2 Item 3 Item 4	Item 1 Item 2 Item 3 Item 4

Para cambiar tus listas numeradas del blog por uno de estos estilos entra en Diseño > Edición de HTML y agrega esto antes de ]]></b:skin>:

.post ol li {
list-style: decimal;
margin: 5px 0 0 20px;
padding: 0;
}

Cambia lo que está en color rojo por el estilo que quieras para tus listas.
Estos estilos se aplicarán a las listas numeradas dentro de las entradas. Si quieres aplicarlas sólo a la sidebar cambia la primera línea:

.post ol li {

Por:

.sidebar ol li {

Generalmente casi nadie usa las listas numeradas, así que vale la pena personalizarlas para que las pocas veces que se usen tengan un aspecto distinto.

<!-- Ventanas Pop up -->
<script>
function popUp(URL) {
day = new Date();
id = day.getTime();
eval(&quot;page&quot; + id + &quot; = window.open(URL, &#39;&quot; + id + &quot;&#39;, &#39;toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=600,height=400,left=212,top=184&#39;);&quot;);
}
</script>

<a href="javascript:popUp('URL del documento')">Abrir ventana PopUp</a>

Abrir ventana PopUp

<form>
<input type=button value="Abrir ventana PopUp" onClick="javascript:popUp('URL del documento')">
</form>

Para usarlo en tu blog sólo basta con poner este código en una entrada cada vez que lo quieras usar:

<div class="divspoiler">
<input type="button" value="Mostrar" onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; this.value = 'Ocultar'; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none'; this.value = 'Mostrar'; }" />
</div><div><div class="spoiler" style="display: none;">
Aquí el contenido que queremos ocultar
</div></div>

Ahí sólo tienes que agregar donde se indica el contenido que quieres ocultar. Si el botón no te gusta mucho puedes leer esta entrada para saber cómo personalizar los botones.
O bien, puedes usar un enlace de texto en lugar de un botón

En ese caso el código a usar es este:

<div class="divspoiler">
<a href="javascript:void(0);" onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none';}" >Mostrar / Ocultar &#9660;&#9650;</a>
</div><div><div class="spoiler" style="display: none;">
Aquí el contenido que queremos ocultar
</div></div>

Enlazar estos elementos es muy sencillo, por ejemplo, supongamos que el índice es este:

Tema Uno
Tema Dos
Tema Tres

 Lo que haremos primero es crear el link, quedando así:

<a href="#tema1">Tema Uno</a>
<a href="#tema2">Tema Dos</a>
<a href="#tema3">Tema Tres</a>

Y ya sólo agregas el atributo a name a donde va a apuntar el enlace, por ejemplo:

<a name="tema1">Tema Uno</a>

Lorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem...

Entra a Plantilla | Edición de HTML, y busca esto:

<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl + &quot;?max-results&quot; ' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>

La parte que está en color rojo es la que muestra el texto Entradas más recientes, puedes eliminarlo y poner cualquier otro texto, o bien, cambiarlo por una imagen, sólo tendrías que sustituir lo que está en rojo por esto:

<img src='URL de la imagen'/>

Ahora buscamos un poco más abajo y encontramos este código:

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>

Este es el que muestra el link de Entradas antiguas. Haremos lo mismo que en el anterior cambiando lo que está en color rojo.

Y por último encontramos abajo este código:

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>

Este es el que muestra el texto Página principal, igual se cambia lo que está en rojo por otro texto o imagen.

Aquí les dejo unos íconos que encontré que pueden usar.
  
           
   Fuente: CiudadBlogger