Я уже рассказывал как сделать меню в блог, в котором оно не предусматривалось, сегодня хочу рассказать как создать вертикальное меню в блог, с большим количеством пунктов, и настраиваемой гаммой цветов. Создать его довольно-таки просто.
Итак заходим в настройки нашего блога, а именно вДизайн/Элементы страницы и выбираем место где мы хотим чтобы располагалось наше меню.
Затем в гаджетах выбираем HTML/JavaScript и вставляем в него следующий скрипт:
1. Названия пунктов меню (выделенные красным) вы как догадались можете менять самостоятельно под вам необходимые.
2.Ссылки перед названиями меню вы менять на свои, так как в исходном коде стоят ссылки на наш блог.
3. Меняем цвета меню под ваш блог.
-Зеленым цветом в скрипте выделены элементы меню, перед которыми идет шестизначный код цвета. Любой из них вы можете изменить на свой, для этого рекомендую использовать программу ColorPic о которой я рассказывал в статье “Изменяем цвет шапки шаблона вручную”, и которую можно скачать здесь.
-Элементы меню:
Menu Background Color Hover – цвет подсветки меню при наведении курсора.
Вот так просто можно сделать свое меню в блоггер, что существенно облегчит восприятие структуры блога вашим читателем. Если возникнут какие либо проблемы, то не стесняйтесь писать в комментариях.
Итак заходим в настройки нашего блога, а именно вДизайн/Элементы страницы и выбираем место где мы хотим чтобы располагалось наше меню.
Затем в гаджетах выбираем HTML/JavaScript и вставляем в него следующий скрипт:
<style type="text/css">После чего у вас появится меню. Далее опишу как его настроить:
/* Edit by lagunof.blogspot.com*/
#ddblueblockmenu{
border: 1px solid #000000; /*Main Border Color */
border-bottom-width: 0;
width: 100%;
}
#ddblueblockmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
font: normal 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
}
#ddblueblockmenu a{
display: block;
padding: 3px 0;
padding-left: 9px;
width: 94%; /*94% minus all left/right paddings and margins*/
text-decoration: none;
color: #000000; /* Menu Font Color */
background-color: #ffffff; /*Menu background Color */
border-bottom: 1px solid #90bade; /*Bottom border color */
border-left: 7px solid #000000; /*Left border color */
list-style-type:none;
}
* html #ddblueblockmenu a{ /*IE only */
width: 94%; /*IE 5*/
width: 94%; /*94% minus all left/right paddings and margins*/
}
#ddblueblockmenu a:hover {
background-color: #2586d7; /*Menu background Color On Hover*/
border-left-color: #1c64d1; /*Left border color On Hover*/
}
#ddblueblockmenu div.menutitle{
color: #ffffff; /* Title Font Color */
border-bottom: 1px solid black;
padding: 1px 0;
padding-left: 5px;
background-color: #000000; /*Menu Tite Background Color*/
font: bold 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
}
/* Made By AllBlogTools.com */
</style>
<div id="ddblueblockmenu">
<div class="menutitle">МЕНЮ</div>
<ul>
<a href=" http://bloggfast.blogspot.com ">Главная</a>
<a href=" http://bloggfast.blogspot.com/2011/05/blog-post_1917.html?showComment=1328520254953#c6827128175976998741 ">Статьи списком</a>
<a href=" http://bloggfast.blogspot.com/search/label/%D1%88%D0%B0%D0%B1%D0%BB%D0%BE%D0%BD%D1%8B ">Шаблоны блоггер</a>
<a href=" http://bloggfast.blogspot.com/search/label/%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%B0%20%D1%81%20blogger ">Блоггер с нуля</a>
<a href="http://ВАША ССЫЛКА">Продвижение сайтов</a>
<a href="#">Редактировать</a>
</ul></div><font size="1">Переработанно<a
href=" http://bloggfast.blogspot.com "> Bloggfast </a
href="http:></font>
1. Названия пунктов меню (выделенные красным) вы как догадались можете менять самостоятельно под вам необходимые.
2.Ссылки перед названиями меню вы менять на свои, так как в исходном коде стоят ссылки на наш блог.
3. Меняем цвета меню под ваш блог.
-Зеленым цветом в скрипте выделены элементы меню, перед которыми идет шестизначный код цвета. Любой из них вы можете изменить на свой, для этого рекомендую использовать программу ColorPic о которой я рассказывал в статье “Изменяем цвет шапки шаблона вручную”, и которую можно скачать здесь.
-Элементы меню:
Menu Background Color Hover – цвет подсветки меню при наведении курсора.
Вот так просто можно сделать свое меню в блоггер, что существенно облегчит восприятие структуры блога вашим читателем. Если возникнут какие либо проблемы, то не стесняйтесь писать в комментариях.
Спасибо Вам большое за труд!
ОтветитьУдалитьМне очень понравилась Ваша статья!
Будем пробовать.
web: http://www.baibablife1.blogspot.com/
Скажите пожалуйста вот что, я установил данное меню у себя на сайте. Главное теперь как мне привязать адрес страниц? Объясните пожалуйста. Если Я создал в блоггере сообщение как я могу привязять или прикрутить это сообщение к одному из слов в меню? Или эот делается как-то по другому не через сообщение? Если это не блог а сайт то там легко но вот как быть с этим в блогспоте? Где мне создать новое сообщение и привязать это сообщение к одному из кнопок этого меню? Я в этом деле новичек всего несколько дней только начал осваивать. Заранее Спасибо за ответ!
ОтветитьУдалитьОчень просто.
ОтветитьУдалитьК примеру слово в меню : Главная
слева идет ссылка вида http://адрес ВАшего блога/,
Копируете адрес страницы, статьи, и вставляете в коде на против подхдящего пункта меню.
Если не ясно то пишите попробую объяснить!
Приветствую! Скажем есть в блоггере меню сообщения если Я создал сообщение и не опубликовал это сообщение то естественно
ОтветитьУдалитьэтого сообщения не будет видно в блоге до тех пор пока я не задействую галочку опубликовать. А Я не хочу публиковать это сообщение например, а хочу прикрутить это сообщение к тому меню которое взял с Вашего сайта скажем к меню Главная, чтобы при наатии на слово Главная открывалось то сообщение которое Я создал но прикрутить не получается.
Подскажите пожалуйста может Я делаю что-то не так? Или это можно сделать как-то по-другому?
Заранее спасибо!
Скорее всего Вы просто не точно вставили ссылку:
ОтветитьУдалитьвставьте впритык к кавычкам. к в данной статье например есть зазор, уберите эти пробелы