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


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

При вставке в html шаблон можете отцентрировать тегом <center></center>.
Фон background-image: url("http://3.bp.blogspot.com/-eTS2KYsm5Zo/ToW55DqH-BI/AAAAAAAAGAw/zarpSNKq5CE/s1600/nav-back.png") закомментрирован. Если нужен - раскомментируйте.

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

.navhead { 
#background-image: url("http://3.bp.blogspot.com/-eTS2KYsm5Zo/ToW55DqH-BI/AAAAAAAAGAw/zarpSNKq5CE/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="http://1.bp.blogspot.com/-KWJuYwtm7Kc/ToW1sSHABUI/AAAAAAAAGAQ/mJE_LtbcAkU/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="http://2.bp.blogspot.com/-fFrak2LQFx0/ToW1sRgNmqI/AAAAAAAAGAY/Y9zXUhm60g8/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="http://4.bp.blogspot.com/-crQSZ63J5ZE/ToW1sutaEEI/AAAAAAAAGAg/PFFBnQRDO_A/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

Комментариев нет:

Отправить комментарий