(Последнее обновление: 23.12.2018)

gorizontal'noe-vypadajushhee-menjuПривет, добрые люди! Сегодня я хочу представить вам отличный набор меню для вашего блога. В связи с различными предпочтениями пользователей, меню подобрал различные. Кто то предпочитает панель навигации для своего сайта многоуровневое фиксированное или простое горизонтальное выпадающее меню, а может кому то надо меню Ajax с различными стилями. Постараюсь чтобы вы нашли здесь то, что вам нужно.

Первое в списке пойдет:

Плавающее (фиксированное) выпадающее многоуровневое меню 3D

Меню для блога

Меню Blogger

Для просмотра этой великолепной менюшки, специально создал ещё один демонстрационный блог, куда вы можете сходить прямо сейчас. Для установки этого меню в блог Blogger нам потребуются пару шагов. Найти в шаблоне такую строчку ]]></b:skin> и чуть выше добавить код стиля CSS для нашего меню 3D flip:

#menufixed {position:fixed;top:0;left:0;width:100%;height:40px;z-index:999;}
.menu3Dflip {margin:0 auto; text-align:center; position:relative; height:40px; z-index:999; background:#0091d6; -moz-perspective: 100px; -webkit-perspective: 100px; -o-perspective: 100px; perspective: 100px; }
.menu3Dflip ul.nav li {display:inline-block; display:inline;}
.menu3Dflip ul.nav {padding:0; margin:0; list-style:none; display:inline-block; -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; }
.menu3Dflip ul.nav li {float:left; display:block; padding:0 4px;}
.menu3Dflip ul.nav > li {-moz-transform-style: preserve-3d;-webkit-transform-style: preserve-3d;}
.menu3Dflip ul.nav li a.top-a {display:block; text-decoration:none; margin-top:4px; float:left; height:36px;}
.menu3Dflip ul.nav li a.top-a b {display:block; padding:0 20px; font:bold 14px/30px arial, sans-serif; color:#fff;}
.menu3Dflip ul.nav li:hover a.top-a {background:#09c; border-radius:8px 8px 0 0; -moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); -webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); -o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); }
.menu3Dflip ul.nav div {position:absolute; top:40px; left:4px; background:#09c; padding:5px 0 10px 0; border-radius:0 0 15px 15px; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; -moz-transform-origin: 0px 0px; -moz-transform: rotateX(-90deg); -webkit-transform-origin: 0px 0px; -webkit-transform: rotateX(-90deg); -o-transform-origin: 0px 0px; -o-transform: rotateX(-90deg); transform-origin: 0px 0px; transform: rotateX(-90deg); -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; }
.menu3Dflip ul.nav div.left {left:auto; right:4px;} .menu3Dflip ul.nav div ul {padding:10px 0; list-style:none; width:140px; margin:10px 5px 0 5px; float:left; display:inline; text-align:left; background:#fff; border-radius:6px; -moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); -webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); -o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); }
.menu3Dflip ul.nav div ul.colLeft {margin-left:10px;}
.menu3Dflip ul.nav div ul.colRight {margin-right:10px;}
.menu3Dflip ul.nav div ul.colSingle {margin-left:10px; margin-right:10px;}
.menu3Dflip ul.nav div ul li {float:left; border-bottom:1px dotted #09c; margin:0 5px 0 5px; display:inline;}
.menu3Dflip ul.nav div ul li:last-child {border:0;}
.menu3Dflip ul.nav div ul li a {display:block; width:105px; text-decoration:none; font:13px/16px arial, sans-serif; color:#069; margin:0; padding:4px 0 4px 15px; background:transparent url(https://lh3.googleusercontent.com/-obvJZHCanbY/UkxkGd717_I/AAAAAAAAGQA/bjih8_q74Ws/h120/arrow.gif) no-repeat left center;}
.menu3Dflip ul.nav div ul li a:hover {color:#09c; background:transparent url(https://lh3.googleusercontent.com/-obvJZHCanbY/UkxkGd717_I/AAAAAAAAGQA/bjih8_q74Ws/h120/arrow.gif) no-repeat 1px center;}
.menu3Dflip ul.nav div.col1 {width:160px;}
.menu3Dflip ul.nav div.col2 {width:310px;}
.menu3Dflip ul.nav div.col3 {width:460px;}
.menu3Dflip ul.nav li:hover div { -moz-transform: rotateX(0deg); -webkit-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); }

Сохраните шаблон. Далее, нам нужно найти тег </head> или <body> и ниже его добавляем код HTML:

<div id='menufixed'>
<div class='menu3Dflip'>
<ul class='nav'>
<li><a class='top-a' href='#'><b>Home</b></a></li>
<li><a class='top-a' href='#'><b>Menu 1</b></a>
<div class='col3'>
<ul class='colLeft'>
<li><a href='#'>Sub Menu 1</a></li>
<li><a href='#'>Sub Menu 2</a></li>
<li><a href='#'>Sub Menu 3</a></li>
<li><a href='#'>Sub Menu 4</a></li>
<li><a href='#'>Sub Menu 5</a></li>
</ul>
<ul class='col'>
<li><a href='#'>Sub Menu 6</a></li>
<li><a href='#'>Sub Menu 7</a></li>
<li><a href='#'>Sub Menu 8</a></li>
<li><a href='#'>Sub Menu 9</a></li>
</ul>
<ul class='colRight'>
<li><a href='#'>Sub Menu 10</a></li>
<li><a href='#'>Sub Menu 11</a></li>
<li><a href='#'>Sub Menu 12</a></li>
<li><a href='#'>Sub Menu 13</a></li>
</ul>
</div>
</li>
<li><a class='top-a' href='#'><b>Menu 2</b></a>
<div class='col2'>
<ul class='colLeft'>
<li><a href='#'>Sub Menu 1</a></li>
<li><a href='#'>Sub Menu 2</a></li>
<li><a href='#'>Sub Menu 3</a></li>
<li><a href='#'>Sub Menu 4</a></li>
<li><a href='#'>Sub Menu 5</a></li>
</ul>
<ul class='colRight'>
<li><a href='#'>Sub Menu 6</a></li>
<li><a href='#'>Sub Menu 7</a></li>
<li><a href='#'>Sub Menu 8</a></li>
<li><a href='#'>Sub Menu 9</a></li>
</ul>
</div>
</li>
<li><a class='top-a' href='#'><b>Menu 3</b></a>
<div class='col1'>
<ul class='colSingle'>
<li><a href='#'>Sub Menu 1</a></li>
<li><a href='#'>Sub Menu 2</a></li>
<li><a href='#'>Sub Menu 3</a></li>
<li><a href='#'>Sub Menu 4</a></li>
<li><a href='#'>Sub Menu 5</a></li>
</ul>
</div>
</li>
<li><a class='top-a' href='#'><b>Menu 4</b></a>
<div class='col2 left'>
<ul class='colLeft'>
<li><a href='#'>Sub Menu 1</a></li>
<li><a href='#'>Sub Menu 2</a></li>
<li><a href='#'>Sub Menu 3</a></li>
<li><a href='#'>Sub Menu 4</a></li>
</ul>
<ul class='colRight'>
<li><a href='#'>Sub Menu 5</a></li>
<li><a href='#'>Sub Menu 6</a></li>
<li><a href='#'>Sub Menu 7</a></li>
<li><a href='#'>Sub Menu 8</a></li>
<li><a href='#'>Sub Menu 9</a></li>
</ul>
</div>
</li>
<li><a class='top-a' href='#'><b>Menu 5</b></a></li>
</ul>
</div>
</div>

Как видите, ссылок в меню можно напихать много. Пользуйтесь. Важно! Исправил код, теперь будет работать у всех. В конце поста видео установки данного меню в блог.

Идем далее.

Простое горизонтальное меню для Blogger

gorizontal'noe-menju

Простое горизонтальное меню красное

Такое простое меню красного цвета можно установить с помощью гаджета HTML/Javascript:

HTML-Javascript

гаджета HTML/Javascript

Код идет вместе со стилем, для того, чтобы вам не лазить в шаблон блога. не мучиться:

<style>
div.redmenu{ background:#9A0000 url(https://lh3.googleusercontent.com/-zkvIc1a5Oqc/Uiv9v_LY_LI/AAAAAAAAGG0/_pQzW04tfXM/h120/bg1.gif); border:1px solid #000; font-size:0; }
div.redmenu a{ display: inline-block; padding: 0 20px; background-image: url(https://lh3.googleusercontent.com/-V421OopKYKk/Uiv9wFXb3QI/AAAAAAAAGG8/elEEpjz9NRg/h108/bg.gif); color:#fff; text-decoration:none; font: bold 12px Arial; line-height: 32px; }
div.redmenu a:hover, div.redmenu a.current{ background-position:0 -60px; }
div.redmenu a.end{ width:2px; padding-left:0;padding-right:0; }
</style>
<div class='redmenu'>
<a expr:href='data:blog.homepageUrl' class='current'>Home</a>
<a href='#'>Menu 1</a>
<a href='#'>Menu 2</a>
<a href='#'>Menu 3</a>
<a href='#'>Menu 4</a>
<a href='#'>Menu 5</a>
<a class="end">&nbsp;</a>
</div>

Если вам нужен другой цвет меню,тогда есть другие. Голубой:

gorizontal'noe-menju-blue

Голубое горизонтальное меню

Для этого меню стиль CSS такой:

#bluemenu { border: solid 1px #39F; background:#64DAFC url(https://lh6.googleusercontent.com/-7AqqOE7ofpk/Ui2rcZ8HbVI/AAAAAAAAGHg/JKehF4xo7iM/h120/bluebg.gif) repeat-x; }
#menublues{ font-size:0; }
#menublues ul, #menublues li{ display: inline; list-style-type: none;padding: 0;margin: 0;border:0;background-image:none; }
#menublues a{ text-align: center; display: inline-block; font: normal 12px Arial; background: url('https://lh5.googleusercontent.com/-wr04E0lX-Iw/Ui2rcMUXtAI/AAAAAAAAGHs/4pmDipZWAgw/h108/blue.gif') no-repeat left top; padding: 10px 20px; color: #fff; text-decoration: none; }
#menublues a:hover, #menublues a.current{ background-position: 0% -60px; color: #fff; }
#menublues a.end{ width:2px; padding-left:0;padding-right:0; }

Поменяйте вверху в коде на этот стиль, а в HTML коде заменить <div class='redmenu'> на две строчки <div id='bluemenu'> <div id='menublues'>

Зеленый стиль меню:

gorizontal'noe-menju-green

Зеленый стиль меню

Код стиля:

#greenmenu { border: solid 1px #52e052; background:#64DAFC url(https://lh4.googleusercontent.com/-84N8in2YMCc/UjS0YrTZQ7I/AAAAAAAAGJc/fWb8wN23bAg/h120/greenbg.gif) repeat-x; }
#menugreen{ font-size:0; }
#menugreen ul, #menugreen li{ display: inline; list-style-type: none;padding: 0;margin: 0;border:0;background-image:none; }
#menugreen a{ text-align: center; display: inline-block; font: normal 12px Arial; background: url('https://lh5.googleusercontent.com/-OZYpaCR_6Ho/UjS0YsW2NhI/AAAAAAAAGJY/F0zOGRUg2nA/h108/green.gif') no-repeat left top; padding: 10px 20px; color: #fff; text-decoration: none; }
#menugreen a:hover, #menugreen a.current{ background-position: 0% -60px; color: #fff; }
#menugreen a.end{ width:2px; padding-left:0;padding-right:0; }

Так же  в HTML коде замените на эти строчки <div id='greenmenu'> <div id='menugreen'>.

Далее, ещё меню:

Анимированное выпадающее меню для Blogger

Animirovannoe-menju

Анимированное выпадающее меню

Напоминаю вам что с меню можно ознакомится в демоблоге, ссылка находится вверху поста.

Стиль CSS для этого меню:

#nav_menu { font:bold 13px verdana; height: 35px; list-style: none; padding: 0px; margin: 0px auto; background:#0091d6; }
#nav_menu ul { left: -9999px; position: absolute; top: -9999px; z-index: 1; }
#nav_menu li { border-right: 1px solid #111; display: block; float: left; height: 35px; position: relative; width: 105px; }
#nav_menu li a { color: #fff; display: block; line-height: 35px; text-align: center; text-decoration: none; background-color:#0091d6; }
#nav_menu li a:hover{ background-color:#222; }
@-webkit-keyframes animation1 { 0% { -webkit-transform: scale(1); } 30% { -webkit-transform: scale(1.3); } 100% { -webkit-transform: scale(1); } }
@-moz-keyframes animation1 { 0% { -moz-transform: scale(1); } 30% { -moz-transform: scale(1.3); } 100% { -moz-transform: scale(1); } }
#nav_menu li > a:hover { -moz-animation-name: animation1; -moz-animation-duration: 0.0s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite; -moz-animation-direction: normal; -moz-animation-delay: 0; -moz-animation-play-state: running; -moz-animation-fill-mode: forwards; -webkit-animation-name: animation1; -webkit-animation-duration: 0.0s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: normal; -webkit-animation-delay: 0; -webkit-animation-play-state: running; -webkit-animation-fill-mode: forwards; }
#nav_menu li:hover > a { z-index: 4; }
#nav_menu li:hover ul.sub { padding: 0; left: 0; top: 35px; width: 200px; }
#nav_menu ul li { background: none repeat scroll 0 0 #838383; opacity: 0; width: 100%; }
#nav_menu ul li a{ text-align: left; padding-left: 10px; border-top: 1px solid #333; background:#222; }
#nav_menu ul li a:hover{ background:#111; }
@-webkit-keyframes animation2 { 0% { margin-left:185px; } 100% { margin-left:0px; opacity:1; } }
@-moz-keyframes animation2 { 0% { margin-left:185px; } 100% { margin-left:0px; opacity:1; } }
#nav_menu li:hover ul li { -moz-animation-name: animation2; -moz-animation-duration: 0.3s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: 1; -moz-animation-direction: normal; -moz-animation-delay: 0; -moz-animation-play-state: running; -moz-animation-fill-mode: forwards; -webkit-animation-name: animation2; -webkit-animation-duration: 0.3s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: 1; -webkit-animation-direction: normal; -webkit-animation-delay: 0; -webkit-animation-play-state: running; -webkit-animation-fill-mode: forwards; }
#nav_menu li:hover ul li:nth-child(1) { -moz-animation-delay: 0; -webkit-animation-delay: 0; }
#nav_menu li:hover ul li:nth-child(2) { -moz-animation-delay: 0.05s; -webkit-animation-delay: 0.05s; }
#nav_menu li:hover ul li:nth-child(3) { -moz-animation-delay: 0.1s; -webkit-animation-delay: 0.1s; }
#nav_menu li:hover ul li:nth-child(4) { -moz-animation-delay: 0.15s; -webkit-animation-delay: 0.15s; }
#nav_menu li:hover ul li:nth-child(5) { -moz-animation-delay: 0.2s; -webkit-animation-delay: 0.2s; }
#nav_menu li:hover ul li:nth-child(6) { -moz-animation-delay: 0.25s; -webkit-animation-delay: 0.25s; }
#nav_menu li:hover ul li:nth-child(7) { -moz-animation-delay: 0.3s; -webkit-animation-delay: 0.3s; }
#nav_menu li:hover ul li:nth-child(8) { -moz-animation-delay: 0.35s; -webkit-animation-delay: 0.35s; }

Код HTML:

<ul id='nav_menu'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='#'>Menu 1</a>
<ul class='sub'>
<li><a href='#'>Sub Menu 1</a></li>
<li><a href='#'>Sub Menu 2</a></li>
<li><a href='#'>Sub Menu 3</a></li>
<li><a href='#'>Sub Menu 4</a></li>
<li><a href='#'>Sub Menu 5</a></li>
<li><a href='#'>Sub Menu 6</a></li>
</ul>
</li>
<li><a href='#'>Menu 2</a>
<ul class='sub'>
<li><a href='#'>Sub Menu 1</a></li>
<li><a href='#'>Sub Menu 2</a></li>
<li><a href='#'>Sub Menu 3</a></li>
<li><a href='#'>Sub Menu 4</a></li>
<li><a href='#'>Sub Menu 5</a></li>
</ul>
</li>
<li><a href='#'>Menu 3</a>
<ul class='sub'>
<li><a href='#'>Sub Menu 1</a></li>
<li><a href='#'>Sub Menu 2</a></li>
<li><a href='#'>Sub Menu 3</a></li>
<li><a href='#'>Sub Menu 4</a></li>
</ul>
</li>
<li><a href='#'>Menu 4</a>
</li>
</ul>

Можете совместить стиль и код для вставки в гаджет HTML/Javascript, заключив код CSS в <style> и закрыв его </style>. Конструкция должна иметь такой вид:

<style>

Здесь, код стиля меню

</style>

Код меню HTML

Еще предлагаю вам меню Ajax для вашего блога, с различными цветовыми стилями:

Ajax-Menu

Меню Ajax для блога Blogger

Стиль для голубого цвета меню Ajax, который надо вставить чуть выше строчки ]]></b:skin> в вашем шаблоне:

.menunavblue *{margin: 0;padding: 0;}
ul.menunavblue {padding: 0;list-style: none;line-height: 1;overflow: visible !important;}
ul.menunavblue:after{margin: 0;padding: 0;content: ' ';display: block;height: 0px;clear: both;}
ul.menunavblue li{list-style: none;position:relative;float: left;margin: 0 !important;padding: 0 !important;}
ul.menunavblue li a{background:#0098CA url(https://lh5.googleusercontent.com/-wr04E0lX-Iw/Ui2rcMUXtAI/AAAAAAAAGHs/4pmDipZWAgw/h108/blue.gif);text-decoration:none;margin: 0;padding: 11px 16px !important;font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif !important;color: #000 !important;font-weight: 700 !important;text-transform: uppercase !important;font-size: 12px !important;display: block !important;}
ul.menunavblue li a:hover,ul.menunavblue li a.hoverover{ background-position: 0% -60px;}
ul.menunavblue ul{position: absolute;display: none;top: 100%;border:1px solid #ccc;}
ul.menunavblue li:hover > ul{display: block;}
ul.menunavblue ul li{float: none;min-width: 160px;background:#3BBAE5;text-shadow: none;}
ul.menunavblue ul li a{padding: 12px 14px;text-transform: none;font-weight: normal;}
ul.menunavblue ul li a:hover,ul.menunavblue ul li a.hoverover{ background-position: 0% -60px;}
ul.menunavblue ul ul{display: none;left: 100%;top: 0;}
ul.menunavblue li div.submenu {box-shadow: 1px 1px 5px #3BBAE5;display: none;position: absolute;width: 600px;left: -1px;top: 100%;overflow: hidden;min-height: 150px;background: #ffffff;border-top: none;}
ul.menunavblue li:hover div.submenu {display: block;}
ul.menunavblue ul ,ul.menunavblue ul li{display: block !important;border: 0 none !important;margin: 0 !important;padding:0 !important;}
ul.menunavblue ul li{background: none !important;float: none !important;}
ul.menunavblue ul.verticlemenu{position: absolute;width: 33%;left:0;top:0;bottom: 0;background: #3BBAE5;}
ul.menunavblue ul.postslist {position: relative;display: block;width:65%;float: right;margin: 8px 0 !important;background: none;}
ul.menunavblue ul.postslist li{display: block;overflow: hidden;border-bottom: 1px #eee solid;position: relative;min-height: 60px;padding: 8px 8px 8px 110px !important;}
ul.menunavblue ul.postslist li:last-child{border-bottom: none 0;}
ul.menunavblue ul.postslist li .imgCont{position: absolute;left: 0;top:8px;width: 100px;height: 60px;overflow: hidden;border:1px solid #3BBAE5;font-size: 0;line-height: 0;}
ul.menunavblue ul.postslist li .imgCont img{position: relative;top:-20px;padding: 0;width: 100px;height: 100px;display: block;}
ul.menunavblue ul.postslist li a{background: none;display: block;line-height: 1.4;padding: 0 !important;}
ul.menunavblue .loader{background:url('https://lh3.googleusercontent.com/-tvsFPhYWC6w/Ui4Qkjn2eoI/AAAAAAAAGH8/dyHH8KQIQ60/h120/loading.gif') no-repeat scroll 0 0 transparent;width:22px;height:22px;position: absolute;top:50%;margin-top: -11px;right:5px;}
ul.menunavblue .menuArrow {border-bottom: 4px solid transparent;border-top: 4px solid transparent;border-left: 4px solid #000;display: block;height: 0;margin-top: -4px;position: absolute;right: 11px;top: 50%;width: 0;}
#menunavblue {background:#0098CA url(https://lh6.googleusercontent.com/-7AqqOE7ofpk/Ui2rcZ8HbVI/AAAAAAAAGHg/JKehF4xo7iM/h120/bluebg.gif);background-position: 0% -1px;border: 1px solid #3BBAE5;}
.end{ width:2px;}

Затем, вам надо найти такой тег </head> и вставить чуть ниже такой Javascript скрипт:

<script  src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script  src="http://faceblog-evolutions.googlecode.com/files/ajaxbloggermenu.js"></script>
<script >
jQuery(document).ready(function($) {
$('#menunavblue').ajaxBloggerMenu({
numPosts : 4, // Maksimal tampilan jumlah posting
defaultImg : 'https://lh3.googleusercontent.com/-bX9QkKivPsU/UhmMCRTYNjI/AAAAAAAAGCA/UhxTPXYjElQ/w140-h140-p/no-image.png' // Default thumbnail Image
});
});
</script>

Дальше, в гаджет HTML/Javascript надо вставить код:

<ul id='menunavblue' class='menunavblue'>
<li><a expr:href='data:blog.homepageUrl' title='Школа Bloggera'>Главная</a></li>
<li><a href='ВАШ URL БЛОГА/search/label/Komputer' target='_blank' title='Komputer'>Komputer</a>
<ul class='submenu'>
<li><a href='ВАШ URL БЛОГА/search/label/Software' target='_blank' title='Software'>Software</a></li>
<li><a href='ВАШ URL БЛОГА/search/label/Networking' target='_blank' title='Networking'>Networking</a></li>
<li><a href='ВАШ URL БЛОГА/search/label/Pemrograman' target='_blank' title='Programming'>Programming</a></li>
</ul>
</li>
<li><a href='ВАШ URL БЛОГА/search/label/CSS' target='_blank' title='CSS'>CSS</a>
<ul class='submenu'>
<li><a href='ВАШ URL БЛОГА/search/label/Slider' target='_blank' title='Slider'>Slider</a></li>
<li><a href='ВАШ URL БЛОГА/search/label/Navigasi' target='_blank' title='Navigasi'>Navigasi</a></li>
<li><a href='ВАШ URL БЛОГА/search/label/Image%20Effect' target='_blank' title='Image Effect'>Image Effect</a></li>
</ul>
</li>
<li><a href='ВАШ URL БЛОГА/search/label/Tips%20Trik%20Blogger' target='_blank' title='Blogging'>Blogging</a>
<ul class='submenu'>
<li><a href='ВАШ URL БЛОГА/search/label/HTML' target='_blank' title='HTML'>HTML</a></li>
<li><a href='ВАШ URL БЛОГА/search/label/Jquery' target='_blank' title='jQuery'>jQuery</a></li>
<li><a href='http://mas-andes.blogspot.com/search/label/Widget' target='_blank' title='Widget Blog'>Widget Blog</a></li>
</ul>
</li>
<li><a href='ВАШ URL БЛОГА/search/label/SEO' target='_blank' title='SEO'>SEO</a></li>
<li><a href='ЗДЕСЬ ССЫЛКА НА СТРАНИЦУ КАРТА САЙТА' target='_blank' title='Sitemap'>Sitemap</a></li>
<li><a class="end">&nbsp;</a></li>
</ul>

Подставляете вместо ВАШ URL БЛОГА свой адрес, меняете название ярлыков и меню на свои. Если чего не получится, спрашивайте, помогу. Для красного стиля меню код стиля такой:

.menunavred *{margin: 0;padding: 0;}
ul.menunavred {padding: 0;list-style: none;line-height: 1;overflow: visible !important;}
ul.menunavred:after{margin: 0;padding: 0;content: ' ';display: block;height: 0px;clear: both;}
ul.menunavred li{list-style: none;position:relative;float: left;margin: 0 !important;padding: 0 !important;}
ul.menunavred li a{background:#9A0000 url(https://lh3.googleusercontent.com/-V421OopKYKk/Uiv9wFXb3QI/AAAAAAAAGG8/elEEpjz9NRg/h108/bg.gif);text-decoration:none;margin: 0;padding: 11px 16px !important;font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif !important;color: #000 !important;font-weight: 700 !important;text-transform: uppercase !important;font-size: 12px !important;display: block !important;border: none !important;}
ul.menunavred li a:hover,ul.menunavred li a.hoverover{background: #e75921 url(https://lh5.googleusercontent.com/-40_aCZhuUlg/Uf8EdzACNTI/AAAAAAAAF7s/SH3wNWFxxxk/h120/bg_red.png);}
ul.menunavred ul{position: absolute;display: none;top: 100%;border:1px solid #ccc;}
ul.menunavred li:hover > ul{display: block;}
ul.menunavred ul li{float: none;min-width: 160px;background:#e75921;text-shadow: none;}
ul.menunavred ul li a{padding: 12px 14px;text-transform: none;font-weight: normal;}
ul.menunavred ul li a:hover,ul.navmenured ul li a.hoverover{background: #fff url(https://lh5.googleusercontent.com/-40_aCZhuUlg/Uf8EdzACNTI/AAAAAAAAF7s/SH3wNWFxxxk/h120/bg_red.png);}
ul.menunavred ul ul{display: none;left: 100%;top: 0;}
ul.navmenured li div.submenu {box-shadow: 1px 1px 5px #e75921;display: none;position: absolute;width: 600px;left: -1px;top: 100%;overflow: hidden;min-height: 150px;background: #ffffff;border-top: none;}
ul.navmenured li:hover div.submenu {display: block;}
ul.navmenured ul ,ul.navmenured ul li{display: block !important;border: 0 none !important;margin: 0 !important;padding:0 !important;}
ul.navmenured ul li{background: none !important;float: none !important;}
ul.navmenured ul.verticlemenu{position: absolute;width: 33%;left:0;top:0;bottom: 0;background: #9A0000;}
ul.navmenured ul.postslist {position: relative;display: block;width:65%;float: right;margin: 8px 0 !important;background: none;}
ul.navmenured ul.postslist li{display: block;overflow: hidden;border-bottom: 1px #eee solid;position: relative;min-height: 60px;padding: 8px 8px 8px 110px !important;}
ul.navmenured ul.postslist li:last-child{border-bottom: none 0;}
ul.navmenured ul.postslist li .imgCont{position: absolute;left: 0;top:8px;width: 100px;height: 60px;overflow: hidden;border:1px solid #9A0000;font-size: 0;line-height: 0;}
ul.navmenured ul.postslist li .imgCont img{position: relative;top:-20px;padding: 0;width: 100px;height: 100px;display: block;}
ul.navmenured ul.postslist li a{background: none;display: block;line-height: 1.4;padding: 0 !important;}
ul.navmenured .loader{background:url('https://lh3.googleusercontent.com/-tvsFPhYWC6w/Ui4Qkjn2eoI/AAAAAAAAGH8/dyHH8KQIQ60/h120/loading.gif') no-repeat scroll 0 0 transparent;width:22px;height:22px;position: absolute;top:50%;margin-top: -11px;right:5px;}
ul.navmenured .menuArrow {border-bottom: 4px solid transparent;border-top: 4px solid transparent;border-left: 4px solid #000;display: block;height: 0;margin-top: -4px;position: absolute;right: 11px;top: 50%;width: 0;}
#navmenured {background:#9A0000 url(https://lh3.googleusercontent.com/-zkvIc1a5Oqc/Uiv9v_LY_LI/AAAAAAAAGG0/_pQzW04tfXM/h120/bg1.gif);border: 1px solid #e75921;}
.end{ width:2px;}

Код Javascript для меню такой:

<script  src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script  src="http://faceblog-evolutions.googlecode.com/files/ajaxbloggermenu.min.js"></script>
<script >
jQuery(document).ready(function($) {
$('#navmenured').ajaxBloggerMenu({
numPosts : 4, // Maksimal tampilan jumlah posting
defaultImg : 'https://lh3.googleusercontent.com/-bX9QkKivPsU/UhmMCRTYNjI/AAAAAAAAGCA/UhxTPXYjElQ/w140-h140-p/no-image.png' // Default thumbnail Image
});
});
</script>

Код меню HTML такой же как выше, только надо поменять <ul id='menunavblue' class='menunavblue'> на соответственно <ul id='navmenured' class='menunavred'>.

Зелёный цвет стиля меню:

.menunavgreen *{margin: 0;padding: 0;}
ul.menunavgreen {padding: 0;list-style: none;line-height: 1;overflow: visible !important;}
ul.menunavgreen:after{margin: 0;padding: 0;content: ' ';display: block;height: 0px;clear: both;}
ul.menunavgreen li{list-style: none;position:relative;float: left;margin: 0 !important;padding: 0 !important;}
ul.menunavgreen li a{background:#52e052 url(https://lh5.googleusercontent.com/-OZYpaCR_6Ho/UjS0YsW2NhI/AAAAAAAAGJY/F0zOGRUg2nA/h108/green.gif);text-decoration:none;margin: 0;padding: 11px 16px !important;font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif !important;color: #000 !important;font-weight: 700 !important;text-transform: uppercase !important;font-size: 12px !important;display: block !important;}
ul.menunavgreen li a:hover,ul.menunavgreen li a.hoverover{ background-position: 0% -60px;}
ul.menunavgreen ul{position: absolute;display: none;top: 100%;border:1px solid #ccc;}
ul.menunavgreen li:hover > ul{display: block;}
ul.menunavgreen ul li{float: none;min-width: 160px;background:#52e052;text-shadow: none;}
ul.menunavgreen ul li a{padding: 12px 14px;text-transform: none;font-weight: normal;}
ul.menunavgreen ul li a:hover,ul.menunavgreen ul li a.hoverover{ background-position: 0% -60px;}
ul.menunavgreen ul ul{display: none;left: 100%;top: 0;}
ul.menunavgreen li div.submenu {box-shadow: 1px 1px 5px #52e052;display: none;position: absolute;width: 600px;left: -1px;top: 100%;overflow: hidden;min-height: 150px;background: #ffffff;border-top: none;}
ul.menunavgreen li:hover div.submenu {display: block;}
ul.menunavgreen ul ,ul.menunavgreen ul li{display: block !important;border: 0 none !important;margin: 0 !important;padding:0 !important;}
ul.menunavgreen ul li{background: none !important;float: none !important;}
ul.menunavgreen ul.verticlemenu{position: absolute;width: 33%;left:0;top:0;bottom: 0;background: #2BAA2B;}
ul.menunavgreen ul.postslist {position: relative;display: block;width:65%;float: right;margin: 8px 0 !important;background: none;}
ul.menunavgreen ul.postslist li{display: block;overflow: hidden;border-bottom: 1px #eee solid;position: relative;min-height: 60px;padding: 8px 8px 8px 110px !important;}
ul.menunavgreen ul.postslist li:last-child{border-bottom: none 0;}
ul.menunavgreen ul.postslist li .imgCont{position: absolute;left: 0;top:8px;width: 100px;height: 60px;overflow: hidden;border:1px solid #52e052;font-size: 0;line-height: 0;}
ul.menunavgreen ul.postslist li .imgCont img{position: relative;top:-20px;padding: 0;width: 100px;height: 100px;display: block;}
ul.menunavgreen ul.postslist li a{background: none;display: block;line-height: 1.4;padding: 0 !important;}
ul.menunavgreen .loader{background:url('https://lh3.googleusercontent.com/-tvsFPhYWC6w/Ui4Qkjn2eoI/AAAAAAAAGH8/dyHH8KQIQ60/h120/loading.gif') no-repeat scroll 0 0 transparent;width:22px;height:22px;position: absolute;top:50%;margin-top: -11px;right:5px;}
ul.menunavgreen .menuArrow {border-bottom: 4px solid transparent;border-top: 4px solid transparent;border-left: 4px solid #000;display: block;height: 0;margin-top: -4px;position: absolute;right: 11px;top: 50%;width: 0;}
#menunavgreen {background:#52e052 url(https://lh4.googleusercontent.com/-84N8in2YMCc/UjS0YrTZQ7I/AAAAAAAAGJc/fWb8wN23bAg/h120/greenbg.gif);background-position: 0% -1px;border: 1px solid #52e052;}
.end{ width:2px;}

Код Javascript:

<script  src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script  src="http://faceblog-evolutions.googlecode.com/files/ajaxmenublogger.js"></script>
<script >
jQuery(document).ready(function($) {
$('#menunavgreen').ajaxBloggerMenu({
numPosts : 4, // Maksimal tampilan jumlah posting
defaultImg : 'https://lh3.googleusercontent.com/-bX9QkKivPsU/UhmMCRTYNjI/AAAAAAAAGCA/UhxTPXYjElQ/w140-h140-p/no-image.png' // Default thumbnail Image
});
});
</script>

Для этого цвета в HTML коде первую строчку меняем на такую <ul id='menunavgreen' class='menunavgreen'>.

На этом позвольте с вами попрощаться. Меню ещё есть, но для одного поста уже слишком много кода. Поэтому продолжение следует. До встречи.

Установка фиксированного меню Blogger - Видео

Всего доброго, Сергей