В этом посте я расскажу как прятать информацию под ссылку (псевдоссылку), нажимая на которую можно увидеть скрытый автором текст. В простонародье "под кат". Таким образом, читатель не переходит на новую страничку, а остается на все той же самой. Спрячем текст так, чтобы при щелчке по ссылке (псевдоссылке) он разворачивался и сворачивался.
Для достижения такого эффекта нужно три шага, сразу предупрежу метод не для слабонервных, честно мне было сложно...
1) Первый шаг делается всего один раз. Идем на вкладку Дизайн - дальше Изменить Html, ищем стандартный код
и перед ним вставляем скрипт:
Чтобы облегчить поиск стандартного кода в шаблоне можно нажать сочетание клавиш Ctrl + F и в открывавшиеся окошко вставить искомую фразу.
После сохраняем шаблон и выходим.
2) Второй и трети раз нужно делать в каждом посте, к котором мы хотим сделать псевдоссылку. Сначала, создаем псевдоссылку она очень похожа на обычную с единственной разницей вместо указания адреса, куда мы хотим отправить нашего читателя, указываем имя функции в нашем случае displ и параметр имя элемента.
Такая псевдоссылка может выглядеть так:
Т.е. смотрите в href мы говорим, что будет выполняться javascript функция с именем displ, а параметр у этой функции будет переменная с именем renatik07081101
Именем переменной может быть любым сочетанием цифр и латинских букв, начинающееся с буквы и оно должно быть уникально в вашем блоге. Я даю название переменным очень простым образом сначала пишу renatik а потом к ним приписываю дату статьи и номер скрываемого элемента в статье: 1 для первого элемента статьи, который я хочу спрятать, 2 для следующего элемента, который будет спрятан и т.д.
3) Теперь выделяем кусок нашего поста, который для начала мы хотим скрыть, а потом показать при щелчке по ссылке. В начале фрагмента вставляем следующий код:
А этот код мы ставим в конце спрятанного фрагмента:
Ну, вот этот код вы уже можете использовать, только не забывайте менять переменные. Имя переменной в псевдоссылке должно быть уникально и совпадать с именем id в span, которым она управляет.
Работа псевдоссылки на примере:
Нажмите на эту ссылку - вылетит птичка!
Что, это не птичка... это толстая мышка?... - Ну, извините, а я так старалась... :(
А может вы тогда попробуете нажать эту ссылку
Вот и птичка! Как и обещалось!
Надеюсь теперь понятно. Вот таким образом можно прятать все что угодно, видео ролики, длинные списки, описание чего либо и т.д. В рубрике "Полезности" таким способом я спрятала очень много разных мастер-классов по рукоделию.
Нажмите на эту ссылку - вылетит птичка!
Что, это не птичка... это толстая мышка?... - Ну, извините, а я так старалась... :(
А может вы тогда попробуете нажать эту ссылку
Вот и птичка! Как и обещалось!
Надеюсь теперь понятно. Вот таким образом можно прятать все что угодно, видео ролики, длинные списки, описание чего либо и т.д. В рубрике "Полезности" таким способом я спрятала очень много разных мастер-классов по рукоделию.
Для достижения такого эффекта нужно три шага, сразу предупрежу метод не для слабонервных, честно мне было сложно...
1) Первый шаг делается всего один раз. Идем на вкладку Дизайн - дальше Изменить Html, ищем стандартный код
и перед ним вставляем скрипт:
Чтобы облегчить поиск стандартного кода в шаблоне можно нажать сочетание клавиш Ctrl + F и в открывавшиеся окошко вставить искомую фразу.
После сохраняем шаблон и выходим.
2) Второй и трети раз нужно делать в каждом посте, к котором мы хотим сделать псевдоссылку. Сначала, создаем псевдоссылку она очень похожа на обычную с единственной разницей вместо указания адреса, куда мы хотим отправить нашего читателя, указываем имя функции в нашем случае displ и параметр имя элемента.
Такая псевдоссылка может выглядеть так:
Т.е. смотрите в href мы говорим, что будет выполняться javascript функция с именем displ, а параметр у этой функции будет переменная с именем renatik07081101
Именем переменной может быть любым сочетанием цифр и латинских букв, начинающееся с буквы и оно должно быть уникально в вашем блоге. Я даю название переменным очень простым образом сначала пишу renatik а потом к ним приписываю дату статьи и номер скрываемого элемента в статье: 1 для первого элемента статьи, который я хочу спрятать, 2 для следующего элемента, который будет спрятан и т.д.
3) Теперь выделяем кусок нашего поста, который для начала мы хотим скрыть, а потом показать при щелчке по ссылке. В начале фрагмента вставляем следующий код:
А этот код мы ставим в конце спрятанного фрагмента:
Ну, вот этот код вы уже можете использовать, только не забывайте менять переменные. Имя переменной в псевдоссылке должно быть уникально и совпадать с именем id в span, которым она управляет.
