Новое в блоге
Loading...
30 дек. 2011 г.

Боковое плавающее меню для Blogger

Привет! Небольшой подарок Вам от "Школа Blogger(а)" на Новый 2012 год. Это нужный для блога виджет: боковая раздвижная плавающая панель меню. Оригинальное название виджета меню звучит так: Dynamic-FX Slide-In Menu. Принцип действия простой, на подобие плавающей панели Facebook.

Плавающая панель  следует за посетителем при прокрутке страницы. При наведении курсора мыши на меню, панель выдвигается. И взору ваших гостей блога предстанет список меню, указанный Вами при настройках. Выдвижное меню для Blogger удовлетворит даже самых требовательных веб-мастеров. Вот его достоинство:

 Возможность статическое положение меню на странице, обе    оси х и у (как в демо);
 Поддержка нескольких столбцов в каждой строке;
 Полностью настраиваемые цвета, размеры, шрифт и т.д.
Я думаю, лучше будет взглянуть и проверить работоспособность виджета.

Теперь если Вы решили установить виджет: боковая выдвижная плавающая  панель меню, следуйте инструкции: Во-первых, нужно скачать файл ZIP,в котором находятся два JS файла, необходимые для меню.

Распаковываем архив. В нём находятся файлы "ssm.js" и "ssmItems.js" Все конфигурации в меню делаются внутри "ssmItems.js". Откройте файл с помощью любого текстового редактора для редактирования стилей меню и отображения ссылок. Сейчас я покажу для примера своё меню для большей наглядности:
<!--

/*
Configure menu styles below
NOTE: To edit the link colors, go to the STYLE tags and edit the ssm2Items colors
*/
YOffset=150; // no quotes!!
XOffset=0;
staticYOffset=30; // no quotes!!
slideSpeed=20 // no quotes!!
waitTime=100; // no quotes!! this sets the time the menu stays out for after the mouse goes off it.
menuBGColor="black";
menuIsStatic="yes"; //this sets whether menu should stay static on the screen
menuWidth=150; // Must be a multiple of 10! no quotes!!
menuCols=2;
hdrFontFamily="verdana";
hdrFontSize="2";
hdrFontColor="white";
hdrBGColor="#170088";
hdrAlign="left";
hdrVAlign="center";
hdrHeight="15";
linkFontFamily="Verdana";
linkFontSize="2";
linkBGColor="white";
linkOverBGColor="#FFFF99";
linkTarget="_top";
linkAlign="Left";
barBGColor="#444444";
barFontFamily="Verdana";
barFontSize="2";
barFontColor="white";
barVAlign="center";
barWidth=20; // no quotes!!
barText="Школа Blogger(а)"; // <IMG> tag supported. Put exact html for an image to show.

///////////////////////////

// ssmItems[...]=[name, link, target, colspan, endrow?] - leave 'link' and 'target' blank to make a header
ssmItems[0]=["Меню блога"] //create header
ssmItems[1]=["Хлебные крошки", "http://new-school-blogger.blogspot.com/2011/12/dobavljaem-hlebnye-kroshki-v-blogger.html", ""]
ssmItems[2]=["Правильная ссылка", "http://new-school-blogger.blogspot.com/2011/12/delaem-pravilnuju-ssylkuadres-stranicy.html",""]
ssmItems[3]=["Движение ярлыков", "http://new-school-blogger.blogspot.com/2011/12/krasivyj-jeffekt-dvizhenija-jarlykov.html", ""]
ssmItems[4]=["Навигация по страницам", "http://new-school-blogger.blogspot.com/2011/11/navigacija-po-stranicampage.html", "_new"]
ssmItems[5]=["Кнопка вверх", "http://new-school-blogger.blogspot.com/2011/12/knopka-vverhjquery-plagin-scroll-to-top.html", ""]
ssmItems[6]=["Горизонтальное меню", "http://new-school-blogger.blogspot.com/2011/12/mnogourovnevoe-gorizontalnoe-menju.html", ""]

ssmItems[7]=["Панель  Facebook", "http://new-school-blogger.blogspot.com/2011/12/plavajuschaja-panel-facebook-dlja.html", "", 1, "no"] //create two column row
ssmItems[8]=["Тулбар от Wibiya", "http://new-school-blogger.blogspot.com/2011/12/ustanavlivaem-panel-toolbar-wibiya-dlja.html", "",1]

ssmItems[9]=["Обратите внимание", "", ""] //create header
ssmItems[10]=["Share42", "http://new-school-blogger.blogspot.com/2011/12/skript-knopok-socialnyh-setej-share42.html", ""]
ssmItems[11]=["ShareThis", "http://new-school-blogger.blogspot.com/2011/12/knopki-socialnyh-setej-ot-servisa.html", ""]
ssmItems[12]=["AddThis", "http://new-school-blogger.blogspot.com/2011/12/ustanovka-socialnyh-knopok-s-servisom.html", ""]

buildMenu();

//-->

Как Вы уже заметили, в верхней части можно редактировать цвета, размеры и так далее. Цвета можно подобрать в "генераторе кодов цвета". В нижней части создаёте своё меню, в  соответствии с вашими требованиями. Теперь, после редактирования, сохраните файл. Следующий шаг: надо оба файла загрузить на свой хостинг. Кто ещё не завёл хостинг для хранения скриптов, файлов, могу посоветовать (я пользуюсь им)  бесплатный и главное надёжный  Dropbox. Затем скопируйте прямые ссылки на эти файлы. Далее:
<style type="text/css">
<!--
A.ssmItems:link  {color:black;text-decoration:none;}
A.ssmItems:hover {color:black;text-decoration:none;}
A.ssmItems:active {color:black;text-decoration:none;}
A.ssmItems:visited {color:black;text-decoration:none;}
//-->
</style>

<SCRIPT SRC="http://dl.dropbox.com/u/48089857/ssm.js" language="JavaScript1.2">

//Dynamic-FX slide in menu v6.5 (By maXimus,http://new-school-blogger.blogspot.com/)
//Updated July 8th, 03' for doctype bug
//For full source, and 100's more DHTML scripts, visit http://new-school-blogger.blogspot.com/

</SCRIPT>

<SCRIPT SRC="http://dl.dropbox.com/u/48089857/ssmItems.js" language="JavaScript1.2"></SCRIPT>

В этом коде меняем мои ссылки на ваши новые, полученные с хостинга. Первая ссылка вверху это файл "ssm.js" вторая в самом низу это файл "ssmItems.js" Последний шаг. Нужно зайти в Blogger -- Шаблон -- Изменить HTML, найти (CTRL + F) этот код: </head> и над ним вставить верхний код с новыми ссылками. Всё сохраните шаблон. Если Вы точно следовали инструкции, установка не такая уж и сложная. У кого возникли сложности или кому что то не понятно, не стесняйтесь задавать вопросы.Чем смогу, помогу.

 Желаю удачи. До новых встреч.

Ух ты кнопочки! Понравилась статья? Поделитесь с друзьями:

0 коммент. :

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

 
Footer