К основному контенту

Вертикальное меню в блог

меню в блогЯ уже рассказывал как сделать меню в блог, в котором оно не предусматривалось, сегодня хочу рассказать как создать вертикальное меню в блог, с большим количеством пунктов, и настраиваемой гаммой цветов. Создать его довольно-таки просто.
Итак заходим в настройки нашего блога, а именно вДизайн/Элементы страницы  и выбираем место где мы хотим чтобы располагалось наше меню.


добавляем меню в блог
Затем в гаджетах выбираем 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 – цвет подсветки меню при наведении курсора.
Вот так просто можно сделать свое меню в блоггер, что существенно облегчит восприятие структуры блога вашим читателем. Если возникнут какие либо проблемы, то не стесняйтесь писать в комментариях.

Комментарии

  1. Спасибо Вам большое за труд!
    Мне очень понравилась Ваша статья!
    Будем пробовать.

    web: http://www.baibablife1.blogspot.com/

    ОтветитьУдалить
  2. Скажите пожалуйста вот что, я установил данное меню у себя на сайте. Главное теперь как мне привязать адрес страниц? Объясните пожалуйста. Если Я создал в блоггере сообщение как я могу привязять или прикрутить это сообщение к одному из слов в меню? Или эот делается как-то по другому не через сообщение? Если это не блог а сайт то там легко но вот как быть с этим в блогспоте? Где мне создать новое сообщение и привязать это сообщение к одному из кнопок этого меню? Я в этом деле новичек всего несколько дней только начал осваивать. Заранее Спасибо за ответ!

    ОтветитьУдалить
  3. Очень просто.

    К примеру слово в меню : Главная

    слева идет ссылка вида http://адрес ВАшего блога/,
    Копируете адрес страницы, статьи, и вставляете в коде на против подхдящего пункта меню.
    Если не ясно то пишите попробую объяснить!

    ОтветитьУдалить
  4. Приветствую! Скажем есть в блоггере меню сообщения если Я создал сообщение и не опубликовал это сообщение то естественно
    этого сообщения не будет видно в блоге до тех пор пока я не задействую галочку опубликовать. А Я не хочу публиковать это сообщение например, а хочу прикрутить это сообщение к тому меню которое взял с Вашего сайта скажем к меню Главная, чтобы при наатии на слово Главная открывалось то сообщение которое Я создал но прикрутить не получается.
    Подскажите пожалуйста может Я делаю что-то не так? Или это можно сделать как-то по-другому?
    Заранее спасибо!

    ОтветитьУдалить
  5. Скорее всего Вы просто не точно вставили ссылку:
    вставьте впритык к кавычкам. к в данной статье например есть зазор, уберите эти пробелы

    ОтветитьУдалить

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

Популярные сообщения из этого блога

Добавляем красивый гаджет Поделиться

Если Вы регулярно совершенствуете свой блог, то Вам пригодится данная не сложная публикация, о том как добавить красивую кнопку "Поделиться". Ее особенность в том, что при наведение курсора она раскрывается и предлагает несколько сервисов в которых можно разместить ссылку на Ваш блог. Демо можно посмотреть тут!

Как сделать ссылку на определенную часть той же страницы.

Все блоггеры пользуются ссылками практически в каждой статье, помимо удобства это еще и очень полезно для индексации блога. Сегодня хотел бы описать как сделать ссылку на туже страницу на которой находится Ваш читатель, только ниже, либо Выше, допустим Ваша статья состоит из нескольких частей и читатель, хочет пропустить первую и перейти сразу ко второй. Сделать это достаточно просто! 1.Для начала нам необходимо присвоить определенной части текста “Якорь”, допустим Вы хотите ссылать на каую-либо часть статьи, перед началом необходимого участка текста вставьте в HTML коде статьи следующий тег : <a id=" yakor "></a> Начало текста или заголовка В качестве слова якорь выделенного красным вы можете использовать любое другое, подходящее по смыслу. 2. Теперь необходимо сделать ссылку на данный якорь. А именно в HTML коде страницы перед словом которое должно быть ссылкой ставим тэг вида: <a href="# yakor ">Слово</a> Покажу как это долж

Открыть несколько ссылок одним кликом мыши

Многие из Вас наверняка встречали сайты, на которых нажав на одну ссылку открывается сразу несколько сайтов. Так делают те кто хочет прорекламировать независимый интернет ресурс, в таком случае открывается ссылка по которой вы должны перейти и еще одна, так-же это делают для увеличения просмотров определенных страниц на сайте, либо если действительно необходимо открыть сразу две ссылки. Для обычного блоггера это может быть полезным так как заинтересовав человека одной ссылкой Вы как бы повышаете популярность Вашего ресурса, так как он посетит вместо одной страницы в Вашем блоге сразу несколько. Чтобы вставить такую ссылку необходимо к тексту добавить следующий код: <a href="http://www.ссылка1.com/" target="_blank" onmouseover="window.open(&quot;&quot;http://www.ссылка2.com&quot;&quot;);window.open(&quot;&quot;http://www.ссылка3.com&quot;&quot;);">Click Here Link Bucket</a>   Вставьте свои ссылки, увеличьт