Нижняя панель для блога

В одном из писем читатель спрашивает про код нижней панели в этом блоге.
Выкладываю оба кода.

При вставке в html шаблон можете отцентрировать тегом <center></center>.
Фон background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibjhs2PzHCDHFY3CSAGORWiB67r4DF0GNmip7Lz46xvYHLyLbVXd-AW-u7bVxyoR8hCNsXKkuKeq7IsUwHpgg6C-LdzH0FU7w77jCI8QBIYqOsIvi-Zn-U4hmkfUWY_VyTEhruNBv4p0Y/s1600/nav-back.png") закомментрирован. Если нужен - раскомментируйте.

Css:

<style>
.nav { 
float: left;
height: 270px;
margin-right: 15px;
width: 230px;
 }

.navhead { 
#background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibjhs2PzHCDHFY3CSAGORWiB67r4DF0GNmip7Lz46xvYHLyLbVXd-AW-u7bVxyoR8hCNsXKkuKeq7IsUwHpgg6C-LdzH0FU7w77jCI8QBIYqOsIvi-Zn-U4hmkfUWY_VyTEhruNBv4p0Y/s1600/nav-back.png");
background-repeat: no-repeat;
#background-position: 10% 110%;
 }

p { 
margin-bottom: 1em;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
font-family: "Verdana";
font-size: 13px;
display: block;
 }
</style>

Html:

<div class="nav">
<div class="navhead">
<a href="http://blogger.omg-linux.ru/p/blog-page_7785.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNXzn7YcfIWNrBgyTLW2OrNaD3VgblmkP5qkUYljzcymKMgOeOygLWcBICxCOGnPgQRq5TFMN5Ah-2igI-qUDoDzpeLfz3Pot9oDNyNaRtSJ7wDrKrftXGXDzgmd86jneZt8PGXFn_CmA/s1600/Blank-Key1.png" border="0" alt="/" /><br /><br /></a>
<a href="http://blogger.omg-linux.ru/p/blog-page_7785.html">Новости блога</a>
</div>
<br />
<p>
Подписки на самые последние новости блога с помощью RSS лент, виджетов и почтовой доставки.</p>
</div>
<div class="nav">
<div class="navhead">
<a href="http://blogger.omg-linux.ru/2011/09/obratnaya-svyaz.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_2v1lYre5BRYeCGEXdrZ3bFwuHt1yZQIq92a_8cvC6dt8mRhsd2QJbbPF8cT1c36HT5oHcdzAsqXM66ar0f8b0So_W3BPLsvQKbJzb1vLHw1wt9r6QB8JeyJHe6OEqQfYDLhP5CyQ0nQ/s1600/Blank-Key2.png" border="0" alt="/" /><br /><br /></a>
<a href="http://blogger.omg-linux.ru/2011/09/obratnaya-svyaz.html">Обратная связь</a>
</div>
<br />
<p>
Хотите спросить автора, обменяться постовым или сказать что-то хорошее?</p>
</div>
<div class="nav">
<div class="navhead">
<a href="http://blogger.omg-linux.ru/p/blog-page_27.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM3HX_80oNXGTWaqMx_mVc4_GZ8A02fFELHT5GPuEQSYAl27dbg9zG6r-SvbE_10tb_MDA_jsdy3emJTaCHOKcjKPrfj-jd-NF8gR69b8EnkpUUmeA-jtci2typ3vaSKz12fU_qMx_nWI/s1600/Blank-Key3.png" border="0" alt="/" /><br /><br /></a>
<a href="http://blogger.omg-linux.ru/p/blog-page_27.html">Карта блога</a>
</div>
<br />
<p>
Оглавление блога - все анонсы статей на одной странице с разбиением на рубрики</p>
</div>
<div class="nav">
<div class="navhead">
<a href="http://blogger.omg-linux.ru/view/sidebar"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY-1ji7MfQI_dqUFrIE6HIF9I6kjci_Y1iQ3I5li58GEcIBcG6ouoK7brfZ8K6JnqdYw2_txYmrwCUknsqce99SUM2WYvnoTQMggLVEk87T4Rrhi7khDBh4LyZuq3m9O4U8DCLXA3kRqc/s1600/Blank-Key4.png" border="0" alt="/" /><br /><br /></a>
<a href="http://blogger.omg-linux.ru/view/sidebar">Режимы блога</a>
</div>
<br />
<p>
Попробуйте новые режимы просмотра блога, которые предлагает Google.</p>
</div>

Демо (скриншот):

Используемые кнопки:

Иконки можете поискать на замечательном сервисе www.softicons.com