Los comentarios son una parte importante de cualquier blog, sin embargo hay veces en que atacan nuestros sitios con spam (comentarios sin sentido con enlaces hacia otras web), estos comentarios spam pueden llegar a ser muy molestos, pues si eres lector de un blog no querrás leer comentarios que no estén relacionados a la temática de la entrada, y si eres el administrador de un blog no querrás que tu blog esté inundado de enlaces y publicidad hacia otros sitios web.

Para los que somos diseñadores de plantillas para Blogger somos siempre atormentados por la idea de que al publicar nuestras plantillas terceras personas robes nuestros créditos y lo use o comercien como si fuera de ellos.

Luego de pasar un tiempo sin publicar trucos para Blogger, vengo a reivindicarme con todos ustedes, en el día de hoy les voy a compartir este espectacular índice por etiquetas , espero que les agrade este aporte.



Para usar este índice en sus blogs, solo deben ir a la edición HTML de una pagina y pegar allí el siguiente código:

<style type="text/css">
#tabbed-toc {
margin:0 auto;
background-color:#58ACFA; /*color fondo etiquetas*/
-webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);
-moz-box-shadow:0 1px 3px rgba(0,0,0,.4);
box-shadow:0 1px 3px rgba(0,0,0,.4);
overflow:hidden;
position:relative;}
#tabbed-toc .loading {
display:block;
padding:5px 10px;
font:normal bold 10px Arial,Sans-Serif;
color:white;}
#tabbed-toc ul,
#tabbed-toc ol,
#tabbed-toc li {
margin:0 0;
padding:0 0;
list-style:none;}
#tabbed-toc .toc-tabs {
width:15%;
float:left;}
#tabbed-toc .toc-tabs li a {
display:block;
font:normal bold 10px/13px Arial,Sans-Serif;
height:32px;
overflow:hidden;
text-overflow:ellipsis;
color:#F2F2F2; /* color enlace etiqueta */
text-transform:uppercase;
text-decoration:none;
padding:0 12px;
cursor:pointer;}
#tabbed-toc .toc-tabs li a:hover {
background-color:#6E6E6E; /* background de etiquetas */
color:white;} /* color enlace etiqueta con background */
#tabbed-toc .toc-tabs li a.active-tab {
background-color:#0174DF/* background de la primera etiqueta */
color:white; /* color enlace primera etiqueta con background */
-webkit-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
-moz-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
box-shadow:-2px 2px 2px rgba(0,0,0,.5);
position:relative;
z-index:5;
margin:0 -1px 0 0;}
#tabbed-toc .toc-content,
#tabbed-toc .divider-layer {
width:85%;
float:right;
background-color:#CEE3F6; /* color separación entre entradas */
border-left:5px solid #81BEF7; /* borde separación entre etiquetas y entradas */
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;}
#tabbed-toc .divider-layer {
float:none;
display:block;
position:absolute;
top:0;
right:0;
bottom:0;
-webkit-box-shadow:0 0 7px rgba(0,0,0,.7);
-moz-box-shadow:0 0 7px rgba(0,0,0,.7);
box-shadow:0 0 7px rgba(0,0,0,.7);}
#tabbed-toc .panel {
position:relative;
z-index:5;
font:normal normal 10px Arial,Sans-Serif;}
#tabbed-toc .panel li a {
display:block;
position:relative;
font-weight:bold;
font-size:11px;
color:#6E6E6E;/* color enlace de entradas */
line-height:20px;
height:20px;
padding:0 12px;
text-decoration:none;
outline:none;
overflow:hidden;}
#tabbed-toc .panel li:nth-child(even) {
background-color:#A9D0F5;} /* primer color separación entre entradas */
#tabbed-toc .panel li:nth-child(even) {
}
#tabbed-toc .panel li a:hover,
#tabbed-toc .panel li a:focus,
#tabbed-toc .panel li.bold a {
background-color:#333; /* color background de las entradas */
color:white; /* color del enlace con el background de las entradas */
outline:none;}
@media (max-width:700px) {
#tabbed-toc .toc-tabs,
#tabbed-toc .toc-content {
overflow:hidden;
width:auto;
float:none;
display:block;}
#tabbed-toc .toc-tabs li {
display:inline;
float:left;}
#tabbed-toc .toc-content {
border:none;}
#tabbed-toc .divider-layer,
#tabbed-toc .panel li time {
display:none;}}
</style>
<div id="tabbed-toc">
<span class="loading">Loading...</span></div>
<a href="http://www.mundoblogger.tk/" style="display: block; font: normal bold 8px Arial,Sans-Serif; margin: 10px; text-align: right; text-decoration: none;" title="indice">Mundoblogger</a>
<script type="text/javascript">
var tabbedTOC = {
blogUrl: "http://www.mundoblogger.tk/", /* url de tu blog */
containerId: "tabbed-toc",
activeTab: 1,//()
showDates:false,
numChars: 200,
newTabLink: true,
maxResults: 99999,
preload: 0,
sortAlphabetically: true,
showNew: 5,
newText: " - <em style='color:red;'>Nuevo!</em>"
};
</script>
<script src="https://googledrive.com/host/0BwZ7Sm1QQc1lTnlVZG1DS3V0N3c/indice.js
" type="text/javascript"></script>



Ahora deben eliminar lo resaltado en color azul y reemplazarlo por la URL de tu pagina y listo con esto hemos terminado el tutorial de hoy.

Espero que a todos les haya gustado este tutorial, si tienen alguna duda sobre esta entrada no duden en comentarla.

Pueden ver el indice funcionando a continuación:
Mundoblogger

De vez en cuando la gente nos envía correos electrónicos solicitando una pregunta muy común, no hay alguna manera de cambiar el tamaño de todas las imágenes de su blog de Blogger? A veces las imágenes de gran caudal magnitud de los contenidos no sólo defraudó a sus lectores, sino que también afectan a sus reputaciones en línea. Blogger ofrece opciones básicas para cambiar el tamaño de las imágenes, pero esta no es un enfoque práctico y no se ajusta bien a los diseños de los blogs. Afortunadamente, un pellizco CSS directo permite modificar automáticamente cada imagen en su sitio. En este artículo, le mostraremos cómo cambiar el tamaño de todas las imágenes en Blogger?

Buenoa amigos de Mundo blogger En esta ocasión les traigo un espectacular truco para tu blog, con el cual agregaras un pack de iconos de suscripción con efecto Zoom al pasar el cursor sobre ellos, el efecto zoom en los iconos es logrado gracias a CSS, mas exactamente por la propiedad hovergallery.

Bueno queridos fans en esta ocasion les traigo este Elegante Widget  Estilo Metro  para Blogger
el cual es un plugin para Wordpress pero este ha sido adoptado para Blogger,

Bueno amigos de mundo blogger en esta ocasion les enseñare como poner la Fecha tipo calendario en las entradas del blog


Lo primero que haremos es ir a Configuración | Formato | Formato de cabecera de fecha, y cambia la fecha de manera que quede primero el día, luego el mes y por último el año



Si usas la nueva interfaz entonces entra en Configuración | Idioma y formato | Formato de cabecera de fecha, y cámbiala de igual forma.


Ahora entra en la Edición HTML de la plantilla, marca la casilla Expandir plantillas de artilugios y busca esta línea:
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>



Es posible que la encuentres dos veces, la segunda es la que nos interesa.
Ya que la hayas localizado elimínala y en su lugar pon esto:
<div id='Fecha'>
<script>cambiarFecha(&#39;<data:post.dateHeader/>&#39;);</script>
</div>
<b:else/>
<div id='Fecha'>
<script>cambiarFecha(&#39;&#39;);</script>
</div>


Ahora agrega antes de </head> lo siguiente:


<script type='text/javascript'>
//<![CDATA[
var FechaCalendario; 
function cambiarFecha(d){
if (d == "") {
d = FechaCalendario;
}
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(mes+dia+anio);
FechaCalendario = d; 
}
//]]>
</script>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
/* Fecha tipo calendario
----------------------------------------------- */
#Fecha {
display:block;
  text-align:center;
  float:left;
  background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7iYbBSVmlSQ49RRhbRPgqPcLXyFS9dum2TTCDdVUSAjmeDYL3NRPdUKn3eIbdqZLxEUyqIeKc5ixGRck6zKnrGhCEX1Kjy0XnjIG-E8FQqki5F1PcwLUzn5bQmibImFzDQeBX6x6bt2OZ/s1600/dateicon.gif') no-repeat;
  width:40px;
  height:40px;
  margin: 0px 5px 5px 0px;
  text-align:center;
}

.fecha_mes {
display:block;
 font-size:10px;
 color:#FFFFFF;
 text-align:center;
 margin:0;
 padding:0;
}

.fecha_dia {
display:block;
  font-size:18px;
  color:#252525;
  text-align:center;
  margin:0;
  padding:3px 0px 0px 0px;
}

.fecha_anio {
display:block;
  font-size:10px;
  color:#252525;
  text-align:center;
  margin:0;
  padding:1px 0px 0px 0px;
  //padding:2px 0px 0px 0px;
}
</style>
</b:if>


Bueno me despido deseándoles un buen día y dejando les un demo del truco

DEMO