Джава менюшечка : гостевой пост от Владимира Трофимлюка


 гостевой пост На моём блоге сегодня первый гостевой пост. То, о чём Владимир пишет, рекомендую прочитать не только тем, кто решил освоить все тонкости копирайта и рерайта.
Это подробнейшие рекомендации, как нужно правильно писать, оформлять, проверять свои статьи. Даже если вы их пишите для себя. Лично я очень много для себя открыла, читая его блог. И от себя хочу добавить, что он, к тому же замечательный блоггер.  Итак, сегодня с нами Владимир Трофимлюк


* * * * *

Джава менюшечка – выпадающие кнопки, ссылки.


Создавая свой блог, я сталкивался с самыми разными проблемами, появлялись идеи, которые было бы невозможно реализовать без помощи таких зубров богостроительства, как Вика и ее коллеги. За неоценимую помощь, краткость изложения и доходчивость хочу сказать огромное спасибо!

Теперь к сути поста.

Джава скрипты и их реализация на блогспоте помогают превратить простенькую платформу в приятный и функциональный ресурс, с удобным интерфейсом.

Задался целью сделать выпадающее меню из картинок на основе джава скрипт, где должны отображаться мои «веб-паспорта» (профили из соц. сетей, сайтов фриланса…).
Перерыл страницы в поиске и того что подошло бы именно мне не нашел!

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

<style>#Foll {
 /*фон всего гаджета*/
  overflow: hidden; /*скрываем все что за элементом*/
   border-radius: 5px;
  box-shadow: none;
/*правила анимации*/
  -webkit-transition: box-shadow 0.9s ease, border 0.5s ease, height 0.5s ease-in;
  -moz-transition: box-shadow 0.9s ease, border 0.5s ease, height 0.5s ease-in;
  -o-transition: box-shadow 0.9s ease, border 0.5s ease, height 0.5s ease-in;
  transition: box-shadow 0.9s ease, border 0.5s ease, height 0.5s ease-in;
  height: 60px; /*высота открытой части в режиме спокойствия*/
  width: auto; /*ширина задана автоматически и займет всю область панели где размещен гаджет*/
}
/**/
#Foll:hover {
   height: 800px; /*высота выпадания*/
}
 }</style><div id="Foll"><center><span style="color: #3d85c6; font-family: Georgia, Times New Roman, serif; font-size: x-large;"><b><img src="http://4.bp.blogspot.com/-uJu1EB8UdjU/U2ATYtM9xFI/AAAAAAAABzM/bNVnlQae0vQ/s1600/07.png" style="border: none;" width="65" height="65" /></b></span></center><br /><div class="separator" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em; text-align: center;">
<a href="http://freelancehunt.com/freelancer/Makstxt.html" rel="nofollow" target="_blank"><img src="http://4.bp.blogspot.com/-UqmaLEJ3NAw/U1kYeNDcP7I/AAAAAAAABqo/xvmJC7fUEfU/s1600/freelancehunt.png" style="border: none;" width="50" height="50" /></a><a href="https://vk.com/v.trofimlyuk" rel="nofollow" target="_blank"><img src="http://3.bp.blogspot.com/-p4hVSuXHpOs/U2Ad5vKejhI/AAAAAAAAB0k/U98u-D-vK5o/s1600/vkontakte.png" style="border: none;" width="50" height="50" /></a>
</div></div>


Желтый – ссылка на картинку
Красный – ссылка на страницу
Зеленый – настройка размеров изображений


Монтируется просто: вкладка “Дизайн”-”Добавить гаджет”-”HTML/JavaScript” вставить код.
До использования вам придется побаловаться с размерами изображений, отступами и параметрами спрятанной части виджета. Советую сделать подгонку в онлайн HTML редакторе на моём блоге вкладка “инструменты копирайтера”-”Онлайн HTML” .


Также нашел еще одно применение данной конструкции!

Несколько раз слышал совет спрятать счетчики блога (чтоб не мозолили глаза нулевыми показателями). Как это сделать? Можно уменьшить их размер до одинокой незаметной точки через те же скрипты, но лично я не могу удержаться, чтоб посмотреть, сколько человек заходило на сайт и делаю это каждые полчасика. С помощью того же кода вместил все счетчики в контейнер и подобрал неброское изображение для картинки. Теперь они не мозолят глазки посетителя, но я могу просто ознакомиться с показателями. Пример такой фишки.

<style>#Foll {
  /*фон всего гаджета*/
  overflow: hidden; /*скрываем все что за элементом*/
  border-radius: 5px;
  box-shadow: none;
/*правила анимации*/
  -webkit-transition: box-shadow 0.9s ease, border 0.5s ease, height 0.5s ease-in;
  -moz-transition: box-shadow 0.9s ease, border 0.5s ease, height 0.5s ease-in;
  -o-transition: box-shadow 0.9s ease, border 0.5s ease, height 0.5s ease-in;
  transition: box-shadow 0.9s ease, border 0.5s ease, height 0.5s ease-in;
  height: 60px; /*высота в состоянии покоя - вычислена опытным путем*/
  width: auto; /*ширина*/
}
/*Стили при наведении курсора*/
#Foll:hover {
   height: 430px; /*полная высота при наведении- вычислять путем проб и ошибок*/
}
}</style><div id="Foll"><center><span style="color: #3d85c6; font-family: Georgia, Times New Roman, serif; font-size: x-large;"><b><img src="http://2.bp.blogspot.com/-JjlR8K9d15o/U1V_DdeGEAI/AAAAAAAAA8E/qJJk6517I_E/s1600/Chart+Area+Up.png" style="border: none;" width="33" height="33" /></b></span></center><br /><div class="separator" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em; text-align: center;">А сюда тычем все коды счетчиков которые должны быть на странице
</div></div>

Такой способ можно применить и для других гаджетов: способы подписки, поделиться в социальных сетях… Он поможет не захламлять место на блоге, оживить его динамичным эффектом и вместить больше функций.

Владимир Трофимлюк.



Ой, а что это там ниже? Ну надо же! Нажимаем!


оформите подписку на новые шпаргалки

введите пожалуйста свой адрес электронной почты :

18 комментариев:

  1. Вика, поздравляю с гостевым постом :)
    У меня вопрос. Правильно ли я поняла, что описываются менюшки в стиле "Разделы блога" у Владимира? Я хочу себе такую фишку :)))
    Кстати, мне не хватает скриншотов для наглядности.

    ОтветитьУдалить
  2. Привет Таня. Спасибо Владимиру и тебе. Ты совершенно правильно поняла. А насчёт скриншотов. думаю попросим самого автора. Следи пожалуйста.

    ОтветитьУдалить
  3. Таня к сожалению нет((( Меню в шапке моего блога тема отдельная. Его довольно сложно настроить (придется ковыряться в коде) и оно не стабильно минимальная ошибка и некорректное отображение списками на весь блог.
    Если решитесь попробовать то могу сбросить скрипт.
    Но советую подождать! Я зацепился с одним ресурсом предоставляющим свою облачную платформу для создания в визуальном режиме разнообразных гаджетов для наших блогов. Технология очень проста и освоить ее пара пустяков, но на данный момент в их ассортименте нет виджетов меню однако я очень настойчиво рекомендовал им создать сервис визуальной настройки встраиваемых выпадающих меню. Если программисты отзовутся и воплотят то обязательно размещу у Вики сообщение о столь полезной новинке!
    Теперь по этой менюшке:
    Пример реализации левая панель моего блога картинка с паспортом или правая панель изображение счетчика. Суть в том что при наведении на изображение выпадает скрытая часть гаджета (счетчики посещаемости).

    ОтветитьУдалить
  4. Этот комментарий был удален автором.

    ОтветитьУдалить
  5. Отписался и вот скриншот: https://lh4.googleusercontent.com/-dlJdTBScFA0/VCVH0Q_HLKI/AAAAAAAAEoQ/GQUZKJPUq8s/w752-h553-no/2014-09-26.jpg

    ОтветитьУдалить
  6. спасибо, Владимир, за подробное описание и за скриншот ;)
    Пожалуй подожду с выпадающим меню. Ещё кучу всего нужно проделать с блогом))

    ОтветитьУдалить
  7. В свою очередь хочу Владимир тебя поблагодарить за скрипт выпадающих счёичикоа. Давно на него запала. Сейчас вот уже думаю, куда бы его применить ещё.

    ОтветитьУдалить
  8. Обращайтесь! А выпадающие меню вообще больная тема для блогспота, изучил огромное количество вариантов и пока меня ни один не устроил (даже тот что применил сейчас)

    ОтветитьУдалить
  9. Таня, работы с блогом всегда полно. Мне иногда кажется, что и не переделаешь. И то хочется и другое. Мало того хочется, есть просто необходимые моменты. Но не надо опускать руки.

    ОтветитьУдалить
  10. "Сейчас вот уже думаю, куда бы его применить ещё
    "Вика есть идея. Можно туда втолкнуть код архива блога в применив стиль "иерархия" и режим "показывать заголовки постов". В открытом режиме такая штука занимает много места а спрятав ее в скрытую область гаджета можно сэкономить место и дать читателю прекрасную навигацию по блогу. Правда я сейчас на быструю руку не смог сделать, гаджет внутри не хочет корректно работать но возможно ты сможешь воплотить.

    ОтветитьУдалить
  11. Возможно,ты прав. Надо подумать будет. Я счётчики подготовила уже по твоему варианту, а вот вставить всё руки не доходят.

    ОтветитьУдалить
  12. Во-первых,Вика, поздравляю с первым гостевым, к слову скажу, полезным постом. Спасибо Владимиру за тему с выпадающим меню из картинок и подробную и доходчивую инструкцию к ней. Еще импонирует то, что меню монтируется в блог через вкладку "Дизайн". Немного разгребусь с текучкой, займусь этим вопросом.

    ОтветитьУдалить
  13. Привет Сергей. Ту Владимир пообещал в недалёком будущем ещё информацию выложить. Так что время есть. Кстати, как дела у тебя.

    ОтветитьУдалить
  14. Привет,Вика. Яша индексирует посты с новым адресом, но очень медленно, терпеливо жду.

    ОтветитьУдалить
  15. Сергей сейчас на почту тебе напишу.

    ОтветитьУдалить
  16. Всем привет :-) придумал новый вариант применения! Спрятал аналогичным образом часть виджета постоянные читатели на своем блоге.

    Пошли смотреть!!!!! ;-))

    ОтветитьУдалить
  17. Зайду посмотрю. Посмотри и мой гаджет ПЧ.. Об это я писала в этой статье.
    http://www.shpargalochki.ru/2014/09/kak-izmenit-gadzhet-postojannye.html#more

    ОтветитьУдалить
  18. Володя, посмотрела. Здорово получилось! Аккуратно вписывается в дизайн.

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

Пользовательский поиск
Foto Saya
My Photo