Que tal colocar em seu blog um menu com estilo bem diferente dos convencionais visto por ai. Ultilizando cores que podem ser alteradas de acordo com as cores do seu blog ou site.
Siga o tutorial abaixo:



1 - Copie o codigo CSS abaixo:

/* = Menu Multe cor 
=============================== */
.c1, #blog h2 a {color:#71b50a;} /* verde */
.c2, #zine h2 a {color:#d81630;} /* marron */
.c3, #proj h2 a {color:#e18329;} /* Laranja */
.c4, #comm h2 a {color:#004883;} /* azul claro */
.c5, #shop h2 a {color:#099;}    /* azul */
.c6 {color:#fc0;} /* yellow */
.c7  #podc h2 a {color:#578092;}
/* backgrounds */
.b1 {background-color:#71b50a;}
.b2 {background-color:#d81630;}
.b3 {background-color:#e18329;}
.b4 {background-color:#004883;}
.b5 {background-color:#099;}
.b6 {background-color:#fc0;}
.b7 {background-color:#578092;}
/*-----------------------------------------------
BlogsEdit - Dicas, Ferramentas para blogs
     URL:   http://blogsedit.blogspot.com/
    Nome:   Menu horizotal Colorido
    Designer:   P.Victor
----------------------------------------------- */
/* ======== definições de cor ======== */
.mcblog {color:#71b50a;} /* verde */
.mczine {color:#d81630;} /* vermelho */
.mcproj {color:#e18329;} /* Laranja */
.mccomm  {color:#004883;} /* azul claro */
.mcshop  {color:#099;}    /* Azul */
.mcpodc  {color:#578092;} /* azul acinzentado */
    /* ======== CRAFT ======== */
.ccblog {color:#00adbf;} /* Azul */
.cczine {color:#d54a5c;} /* rosa */
.ccproj {color:#f9a976;} /* pêssego */
.cccomm {color:#9cc83e;} /* verde */
.ccshop {color:#543b27;} /* marrom */
.ccpodc {color:#828425;} /* verde escuro */

/* top nav colors */
ul#topnav {margin:0;}
ul#topnav li a:hover, ul#topnav li em a {background-color:#fff;font-style:normal;}
ul#topnav li.b1 a:hover, ul#topnav li.b1 em a {color:#71b50a;}
ul#topnav li.b2 a:hover, ul#topnav li.b2 em a {color:#d81630;}
ul#topnav li.b3 a:hover, ul#topnav li.b3 em a {color:#e18329;}
ul#topnav li.b4 a:hover, ul#topnav li.b4 em a {color:#004883;}
ul#topnav li.b5 a:hover, ul#topnav li.b5 em a {color:#099;}
ul#topnav li.b6 a:hover, ul#topnav li.b6 em a {color:#fc0;}
ul#topnav li.b7 a:hover, ul#topnav li.b7 em a {color:#578092;}

/* navigation */
ul#topnav {clear:both;height:2em;padding:0;}
ul#topnav li {width:152px;float:left;/* display:inline-block; */list-style:none inside;margin-right:6px;padding:2px;}
ul#topnav li.b5 {margin:0;}/*___ http://blogsedit.blogspot.com/ ___*/
ul#topnav li a {display:block;width:152px;float:left;text-align:center;font-size: 14px;font-weight:bold;color:#fff;text-decoration:none;line-height:1.7em;white-space:nowrap;}

2 - Cole antes de:

]]></b:skin>

3 - Copie o codigo HTML abaixo:

HOME
BlogsEdit
Vtop-videos
Projects
Forum/Community
Abolt

4 - Escolha onde quer que o menu apareça e cole. (Obs: Entre < body>

ZXvczxdc
Z
Xc

Z
Xc

ZXc
ZXc

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3lm7zhUkJZdT8dpdeJmZHE-leJxqgfY_srBwejpLm8vi4Ve9nH9BEvsOtwfiXmlOdC5nRQxBC0o38cTB6yq9xY70BMAXGAPmE_va-x36-oZ35sp25k2T9PqZu_RqV1KfLbZWg8uzmeRc/s1600/sdasd+copy.jpg" imageanchor="1"><img border="0" height="71" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3lm7zhUkJZdT8dpdeJmZHE-leJxqgfY_srBwejpLm8vi4Ve9nH9BEvsOtwfiXmlOdC5nRQxBC0o38cTB6yq9xY70BMAXGAPmE_va-x36-oZ35sp25k2T9PqZu_RqV1KfLbZWg8uzmeRc/s400/sdasd+copy.jpg" width="391" /></a></div>


Adicione em seu blog uma ferramenta que ajudará bastante seus usuários
"A navegação das paginas com numeros"

1 - Não é necessário <b>Expandir modelos de widgets</b>.

2 - Copie o codigo abaixo.
<pre><code><csscode>.blog-pager,#blog-pager{
font-family:"Times New Roman", Times, serif;
font-weight:normal;
font-size:12px;
width:500px;
}
.showpageNum a,.showpage a {
background:transparent url('http://i1133.photobucket.com/albums/m596/abu-farhan/gbtn-bg.png') repeat-x;
border:1px solid #97a7af;
margin:0px 1px 0 1px;padding:3px 8px;
text-decoration:none;
color:#333;line-height:14px;cursor:pointer;white-space:nowrap;
-webkit-border-radius:3px;-moz-border-radius:3px;
}
.showpageNum a:hover,.showpage a:hover {
background-image:url('http://i1133.photobucket.com/albums/m596/abu-farhan/gbtn-bg-sel.png');
border:1px solid #e4905a;color:#e4905a;text-decoration:none;
}
.showpageOf{
margin:0 8px 0 0;
}
.showpagePoint {
background:transparent url('http://i1133.photobucket.com/albums/m596/abu-farhan/gbtn-bg-sel.png') repeat-x;
margin:0 3px 0 3px;padding:3px 8px;
line-height:14px;cursor:pointer;white-space:nowrap;
-webkit-border-radius:3px;-moz-border-radius:3px;
border:1px solid #e4905a;color:#333;text-decoration:none;font-weight:bold;
}
</csscode></code></pre>

2 - Cole acima da tag:
<pre><span style="color: blue;">]]&gt;&lt;/b:skin&gt;</span></pre>

3 - Copie  o java a baixo.
<pre><code><javacode>&lt;script type='text/javascript'&gt;;
var home_page='/';
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=4;
var upPageWord ='Prev';
var downPageWord ='Next';
&lt;/script&gt;;
&lt;script src='http://scriptabufarhan.googlecode.com/svn/trunk/pagenaviv202-min.js' type='text/javascript'&gt;&lt;/script&gt;</javacode></code></pre>

4 - Cole acima do codigo
<pre><code>  </code></pre>


<blockquote>
obs:Recomendo que use o ( Ctrl + F ) para pesquisar os codigos</blockquote>
</div>