Профессиональное обучение
блоггингу от А до Я

Как сделать красивый спойлер на сайте или wordpress блоге?

Как сделать спойлер для блога

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

Спойлер красивый, удобный, плавно открывающийся и закрывающийся и самое главное то, что его внешний вид можно хорошо настроить под свой сайт или wordpress блог. Из всех скриптов спойлеров, которые я перепробовал, тот, о котором пойдет речь в этой статье, мне понравился больше всех.

Вот посмотрите на пример работы спойлера:

Здесь ваш заголовок спойлера (любой текст)
А вот здесь будет текст под спойлером. Можно сюда вставлять и видео, и аудио и картинки. Все что угодно!

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

Собственно вопрос: А зачем вообще нужен спойлер? Лично у меня необходимость в нем появилась после того, как я начал часто выкладывать живое видео и делать текстовые версии этих видео. Вот простой пример.

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

Так же спойлеры пригодятся для других моментов ведения сайта или блога, в общем я думаю вы найдете ему применение, штука хорошая и полезная, для кого-то просто необходимая.

Итак! Давайте расскажу о том, как вы сможете сделать вот такой же спойлер на своем сайте или блоге. Те, кто ведет не блог, а сайт, я думаю разберутся куда какой код вставлять, я же сейчас разберу создание спойлера для движка wordpress, так как основная аудитория моего блога — это блоггеры. Гут! Поехали!

Как создать спойлер на wordpress?

Схема создания спойлера:

1. Подключить библиотеку jQuery к блогу в файле footer.php
2. Подключить скрипт спойлера в файле footer.php
3. Добавить css стили для спойлера в файл style.css
4. Добавить сам код спойлера в статью или страницу блога

Ну что же, первым делом подключаем библиотеку jQuery. Добавьте вот этот код в файл footer.php темы вашего блога перед закрывающимся тегом /body (wp-content/themes/ваша тема/footer.php):

1
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

Можете добавить в header.php без разницы, я просто все скрипты и коды сую в подвал блога, чтобы они последними загружались. И вам советую. Кстати перед тем как добавлять этот код, посмотрите вообще может быть у вас эта библиотека уже подключена. У меня например уже была подключена:

Библиотека jQuery

Проверьте файлы header.php, footer.php, function.php, index.php вашего блога, если jquery.min.js нигде не подключена, то добавляйте код, если подключена, то не стоит! Дальше!

Добавьте вот этот код в файл footer.php темы вашего блога для того, чтобы спойлер нормально работал (опять же после закрывающегося тега /body):

1
2
3
4
5
6
7
8
9
10
<script>// <![CDATA[
$(".closed").toggleClass("show");
 
$(".title").click(function(){
 $(this).parent().toggleClass("show").children("div.contents").slideToggle("medium");
 if ($(this).parent().hasClass("show"))
     $(this).children(".title_h3").css("background","#bbbbbb");
 else $(this).children(".title_h3").css("background","#dddddd");
});
// ]]></script>

Ок! Теперь добавьте в файл style.css темы вашего блога вот этот код:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.spoiler {
    overflow: hidden;
    margin-bottom: 20px;
    margin-top: 20px;
    border: 1px solid #dfdfdf;
    border-left: 2px solid #3965a8;
    box-shadow: 0 0 9px #dddddd inset;
}
 
.title_h3 {
    cursor:pointer;
    font-size: 14px;
    background: #dddddd;
    margin: 0 -10px 0 -10px;
    padding: 10px;
    padding-left: 30px;
    -moz-box-shadow: 0 0 9px #dddddd inset;
    box-shadow: 0 0 9px #dddddd inset;
}
 
.closed .contents { display:none; }
.closed h3 { background: #bbbbbb; }
.contents { padding: 10px; }

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

Так, ну и последнее, собственно добавляем сам спойлер в статью или страницу нашего блога. Для этого нужно в нужном месте на странице вставить вот этот код:

1
2
3
4
5
6
<div class="spoiler closed">
<div class="title">
<div class="title_h3"><strong>Здесь ваш заголовок спойлера</strong> (любой текст)</div>
</div>
<div class="contents">А вот здесь будет текст под спойлером</div>
</div>

Если вы хотите, чтобы на странице отображалось 2, 3, 5, а то и 10 спойлеров, то просто опять же в нужном месте снова вставляете этот самый код. Все просто!

В заключении немного про визуал спойлера для тех, кто не хочет обращаться к фрилансерам, чтобы они им настроили внешний вид. Вот смотрите. В файл style.css мы добавили стили для спойлера. Например строчка border: 1px solid #dfdfdf; в стиле .spoiler: заключает весь контент в спойлере в тоненькую рамку серого цвета.

Строчка border-left: 2px solid #3965a8; говорит, что слева должна быть вертикальная полоска синего цвета, а строчка font-size: 14px; в стиле .title_h3 делает текст в заголовке спойлера размером в 14 px. Короче настроить можно как вашей душе угодно, можно сменить цвет фона, можно закруглить края спойлера, шрифт увеличить и т.д.

В общем пользуйтесь! Штука хорошая и полезная.

P.S. Кстати мне ребята многие задавали такой вопрос: Александр, а как ты делаешь транскрибацию своих видеороликов, то есть как делаешь текстовые версии видео. Это программа какая-то или сидишь слушаешь и текст печатаешь?

Хочу ответить на вопрос. Есть конечно же программы различные, но они переводят криво. Мне делает транскрибацию фрилансер Алексей Медведев. 1 минута видео — 15 рублей. Итого если мое видео идет 10 минут, то получается 150 рублей. Вот такие дела.

Если кому-то нужна транскрибация видео, то обращайтесь к Алексею. Вот его профиль на weblancer.

Ну а на этом у меня все на сегодня! Всем пока! Надеюсь вам понравилась статья.

С уважением, Александр Борисов


Как заработать продавая баннеры

5 000 000 за 2 года в интернете...

150 000 рублей в месяц с БЛОГа
Этот блог читают уже более 6000 человек
- читай и ТЫ!
комментариев 165
  1. Виталий

    Абалдеть, СПАСИБО ОГРОМНОЕ!!! а я даже не знал как оно называется. сейчас же начну делать!!!!

    в 12:03 | Ответить
    • Александр Борисов

      Я тоже раньше не знал. Ну и придумали. Спойлер...

      в 19:42 | Ответить
      • Василий Цубера

        Такие как Борисов... Штука просто супер

        в 21:24 | Ответить
      • Александр Быкадоров

        Так это же элементарно. Спойлер — это что на машину тулят наши умельцы )))

        в 22:27 | Ответить
        • Василий Цубера

          Точно, они ж от туда сперли идею :)

          в 23:20 | Ответить
      • Артём Черкасов

        Полезная штука, буду юзать! И я не знал =)

        в 00:32 | Ответить
      • Виктор

        Спасибо! [good] Солидная эта штука СПОЙЛЕР))Долго её искал.

        в 03:20 | Ответить
  2. Дима

    Как вовремя! Я как раз хотел тебя спросить об этом! Увидел этот спройлер в прошлой статье про раздел «Чем я занимаюсь».

    в 12:39 | Ответить
  3. Мария

    Что то у меня все отбражается просто текстом...

    в 12:43 | Ответить
    • Александр Борисов

      Значит что-то не так сделали! Проверьте!

      в 19:42 | Ответить
      • Юрий

        Александр, это не у Марии не отображается, а что-то недоработано... Например в Яндекс браузере даже на вашем сайте этот эффект не отображается — показывается обычный текст. Вот смотрите скриншот awesomescreenshot.com/0ac2i1qc50 (он будет доступен всего 3 дня по этой ссылке)

        Последняя версия браузера 14.2.1700.12508 (a8b3e2c)

        Возможно, что и в других браузерах аналогичный косяк

        в 07:59 | Ответить
        • Александр Борисов

          Странно! Ну ка а сейчас посмотрите. Почистите кеш сначала.

          в 09:15 | Ответить
          • Александр Борисов

            Замените библиотеку с 1.10.2 на 1.7.2 в коде.

            в 09:31 | Ответить
          • Юрий

            Теперь работает 😉

            в 15:59 | Ответить
  4. Василий

    Долго искал такого. Спасибо за Алексей Медведев. Реально времени нету, а такие люди выручают...

    в 12:43 | Ответить
  5. Сергей

    Если кому-то нужна помощь в изменении вида спойлера — обращайтесь, сделаю бесплатно!

    в 12:48 | Ответить
    • Василий Цубера

      Если все обратятся, то у тебя времени не хватит

      в 15:30 | Ответить
      • Сергей

        Так никто не хочет обращаться :) Видимо не надо.

        в 07:21 | Ответить
        • Галина Нагорная

          Я к Вам обратилась... Сергей!

          в 16:44 | Ответить
    • Галина Нагорная

      Сергей, а если не только в изменении вида спойлера, а и его установки? И немножечко платно. :-|

      В моей теме стили ка-то хитро спрятаны...

      в 23:32 | Ответить
      • Сергей

        Кончено обращайтесь) Мои контакты можете посмотреть на моем блоге.

        в 07:23 | Ответить
        • Галина Нагорная

          Огромное спасибо, Сергей! На форуме — спойлер. На блоге — тоже.

          Сергей мне очень помог — благодарю! [present]

          в 01:45 | Ответить
  6. Василий Цубера

    Да и спойлер крутой, такое видел в часто задаваемых вопросах, на одностраничных сайтах, с продажей продуктов. Вот смотрел и думал как это сделать. А сейчас уже знаю, если будет надо то сделаю себе без проблем. Спасибо!

    в 12:49 | Ответить
  7. Евгений

    Ух ты, как раз что надо, спойлер классная штука!

    в 13:49 | Ответить
  8. Анатолий

    Отличный урок, спасибо :)

    в 14:19 | Ответить
  9. Василий Цубера

    Спасибо за Алексей Медведев Времени нет, а такие люди выручают...

    в 15:27 | Ответить
  10. Василий Цубера

    Я заметил, что у многих пользователей, есть фото к его комментарию, а у меня нет. Я тоже хочу. Подскажите как загрузить фото, или что для этого нужно сделать?

    в 15:32 | Ответить
  11. Николай

    Нужная штука [good]

    в 15:41 | Ответить
  12. Виталий Калинин

    Технические фишки всегда востребованы. Особенно, не требующие каких-то специальных знаний в коде. Спасибо, Александр! Перехожу к себе в админку и начинаю воплощать.

    в 15:41 | Ответить
  13. 4elovek_futbolist

    Классная штука [good] надо будет попробовать сделать такую :)

    в 16:34 | Ответить
  14. Alexander Meier

    Круто, Александр! Очень полезная штука, спасибо. Побольше бы подобного рода статей =)

    в 16:49 | Ответить
  15. Евгений Федь

    Александр, потрясающая вещь! Спасибо большое за техническую фишку. [good]

    в 17:29 | Ответить
    • Василий Цубера

      Ух потрясло :) :) :)

      в 23:20 | Ответить
  16. Александр x3m

    Актуальная штука! Встроенный в тему споллер не очень красивый, да и не заметный... а тут и внешне симпотичный, и заметный... в общем, все как доктор прописал)

    в 17:51 | Ответить
  17. Илья

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

    Когда искал в интернете вышеперечисленные приёмы, ничего толкового не нашёл, а Ваши способы сработали на ура. [good]

    в 18:10 | Ответить
    • Александр Борисов

      У меня все самое лучшее для читателей :)

      в 19:44 | Ответить
      • Василий Цубера

        Саня толковый парень [good]

        в 23:42 | Ответить
  18. Дмитрий

    Мне единственному, кому Уведомление о новой статье не пришло на почту?(я подписан)

    в 20:14 | Ответить
    • Александр Борисов

      Оно вот вот только что пришло!

      в 21:42 | Ответить
    • Василий Цубера

      А мне пришло не то что на электронную почту, даже на УКР почту :) :) :) Да Саш?

      в 23:23 | Ответить
      • Александр Борисов

        Скоро будете получать не пропуская ни одной статьи! Сюрприз! :)

        в 00:46 | Ответить
        • Василий Цубера

          Интересно что это будет!

          в 16:56 | Ответить
  19. Андрей

    Александр, мне очень понравился спойлер! Вы как веб-мастер, можете более подробнее описать, как работает скрипт JQUERY, хотя бы в двух словах??? Мне просто нужно сделать, чтобы он не сверху вниз выезжал, а слева на право.

    в 20:23 | Ответить
    • Александр Борисов

      Этого не знаю. Это к программерам и верстальщикам.

      в 21:42 | Ответить
  20. Нина

    Спасибо Александр за столь полезную статью!

    Давно хотела задать такой вопрос: а как вы делаете такой фон на видео? (может тоже как-нибудь статейку напишите?)

    в 21:16 | Ответить
    • Василий Цубера

      Нина. Знаю что не меня спрашиваете. Но я думаю что это фото баннер в офисе, и таком фоне записывает видео. Это мое мнение, а кто знает, Борисов способен на многое :)

      в 21:27 | Ответить
      • Нина

        Я бы не спросила, но как мне кажется это техническая деталь при создании видео. Так как не только у Александра я это уже видела. Многие блогеры используют эту фишку в оформлении видео.

        в 21:36 | Ответить
    • Александр Борисов

      Нина — это press wall баннер. Я его заказывал в Питере для офиса специально для видео. Скоро напишу про это статью!

      в 21:43 | Ответить
      • Василий Цубера

        Я угадал ха-ха-ха Александр!!! не даш Два куска за то, что угадал... ? :)

        в 23:16 | Ответить
  21. Алексей

    Спасибо Александр! Возьму на заметку. :-D

    в 21:35 | Ответить
  22. Александр Быкадоров

    Пол дня думал, что такое спойлер и пытался найти ему применение... Так и не придумал )))

    в 22:30 | Ответить
  23. Людмила

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

    Много полезных вещей нахожу, Александр, у тебя за последнее время. :)

    в 22:37 | Ответить
  24. Сергей

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

    У себя на блоге сделал под спойлер шорткод и вывел его в редакторе. И скажу намного удобнее стало использовать. Советую.

    P.S. Ссылки не втыкаю, всё равно не прокатят :) Но если интересует кого либо, есть некоторые дополнения по теме спойлера на моём блоге

    в 22:51 | Ответить
    • Александр Борисов

      Сергей вы читали статью? Там для вставки спойлера вставляется малюсенький код, а те большие коды вставляются единоразово!

      в 00:48 | Ответить
      • Сергей

        Конечно читал, не особо он малюсенький. Но думаю [spoiler]...[/spoiler] будет при вставке короче. Или просто выделить например текст, который надо спрятать под спойлер, и нажать одну кнопку. Прописать заголовок и готово.

        Ваш вариант Александр по своему тоже хорош [good]

        в 07:40 | Ответить
    • Галина Нагорная

      Да, у Вас тоже много отличных советов — пользуюсь тоже...

      Спасибо и Вам, и Александру за знания, которыми делитесь... [flower]

      в 02:20 | Ответить
  25. Denis

    Спасибо Александр за полезную информацию... [good]

    в 23:06 | Ответить
  26. Руслан Ахтамьянов

    Саш, прекрасно понял тебя из тысячника 2.0: пишите посты как по своей теме, таки о своих увлечениях... Последние твои статьи — яркий пример! Все понял что нужно делать. Спасибо!

    в 23:07 | Ответить
    • Василий Цубера

      Осталось делать. Сейчас с этого нужно и начать, главное понять...

      в 23:18 | Ответить
      • Руслан Ахтамьянов

        Все уже делается, Василий!

        в 00:15 | Ответить
        • Василий Цубера

          Круто. Уже заходил туда. Мне понравился ваш блог, только не хватает странички об авторе.

          в 00:28 | Ответить
          • Василий Цубера

            А есть о сайте. Я просто подумал что, там только о сайте, как о проекте. Посмотрел и увидел инфо об авторе. Признаюсь у меня тоже нет такой странички...

            в 00:31 | Ответить
          • Руслан Ахтамьянов

            Благодарю, Василий. Вы обнаружили мою самую большую ошибку в том, что эту страницу нужно назвать «о блоге и обо мне». Потому как не каждому понятно что такое «о сайте» а тем более в моей тематике...

            в 00:37 | Ответить
  27. Андрей

    Цитата : «Этого не знаю. Это к программерам и верстальщикам.»

    Так вы же веб-мастер! Вы же себя так называете практически во всех своих видео!

    И вы не разбираетесь в технической стороне создания сайтов или блогов?

    Мне всегда казалось, что веб-мастера должны знать языки веб-программирования или нет?

    в 23:24 | Ответить
    • Александр Быкадоров

      Блоггер — не вебмастер, вебмастер — не блоггер... Точнее, не всегда так бывает.

      в 23:35 | Ответить
      • Андрей

        Это понятно. Только зачем кричать о том, что ты веб-мастер, коим ты не являешься и писать про технические скрипты в которых не разбираешься и не можешь объяснить как они работают?

        в 23:54 | Ответить
        • Руслан Ахтамьянов

          Все-таки я думаю что сегодня понятие «вебмастер» уже устарело. Раньше это работало, теперь думаю нет. Ведь вебмастеров может нарисовать дизайн, но сверстать его не может или напротив один может сверстать но нарисовать не может... Совсем другой продвинуть умеет в топ, а четвёртый вообще сидит на директе, адвордсе и арбитраже... А пятый чужие проекты двигает в гогетлинкс и миралинкс... И все эти люди вебмастера, безусловно. Поправьте меня если я не прав.

          в 00:22 | Ответить
          • Андрей

            Возможно вы правы. Только давайте не будем забывать такие понятия, как дизайнер, программист, верстальщик и сеошник и грести всех под одну гребенку. Да, для многих они являются вебмастерами. Однако это не совсем так. Для меня вебмастер — это человек, который разбирается в технической стороне сайтов (программисты и верстальщики), создает их. Не рисует, не продвигает, а именно создает!

            Если я умею продвигать сайты, то я сеошник. Если я умею рисовать, то я дизайнер. Если я умею программировать и верстать сайты, то я вебмастер. Вот это я считаю наиболее правильные определения.

            в 00:56 | Ответить
          • Александр Борисов

            А вы что умеете Андрей?

            в 01:09 | Ответить
    • Александр Борисов

      Не знаю Андрей. Но я не разбираюсь в программировании и скриптах. Это не мое.

      в 00:50 | Ответить
    • Василий Цубера

      Не переживай Руслан. Придет время и руки до тянутся и до этого :) :) :)

      в 11:18 | Ответить
  28. Галина Нагорная

    Мечтала и мечтаю о такой красивой и функционально-полезной штучке... Благодарю за подробное описание. Даже есть надежда сделать! [good]

    в 23:35 | Ответить
    • Василий Цубера

      Галина — Это круто, А еще круче то, что надежда умирает последней :) :) :)

      в 23:40 | Ответить
    • Александр Борисов

      Галина я думаю вы сами можете сделать все самостоятельно!

      в 00:51 | Ответить
  29. Василий Цубера

    А как установить на свой сайт топ комментаторов? Подскажите пожалуйста.за ранее спасибо.

    в 23:44 | Ответить
    • Александр Борисов

      Можно попросить верстака чтобы сделал, а можно поставить плагин top commentators widget

      в 00:51 | Ответить
      • Василий Цубера

        Спасибо! То что надо...

        в 11:16 | Ответить
        • Денис

          А можно поставить этот виджет и переопределить его стили — своими css-стилями. Так вы получите уникальный внешний вид топа ,но при этом вам не придется писать логику, тем самым изобретая велосипед.

          в 20:26 | Ответить
  30. Геннадий Ольховский

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

    в 23:47 | Ответить
  31. Александр Борисов

    Всем спасибо за комментарии ребята!

    в 00:52 | Ответить
  32. Максим Войтик

    Привет Саша, а скажи как ты переводить свои видео в текстовую версию? Программой или сам переписываешь. Спасибо.

    в 01:28 | Ответить
    • Александр Борисов

      Макс ты шутишь?

      в 01:43 | Ответить
      • Василий Цубера

        Макс такое дело стоит 15 руб. за минуту... Читай все статьи Борисова и узнаешь

        в 16:59 | Ответить
        • Максим Войтик

          Дайте ссылку, где Александр об этом рассказывал? Вроде все статьи его читаю ((

          в 23:17 | Ответить
      • Максим Войтик

        Изначально в конце статьи не было этого ответа неужели я не заметил???

        в 23:21 | Ответить
        • Александр Борисов

          Был изначально!

          в 23:51 | Ответить
  33. Маргарита

    Я думаю что этот урок нужен не всем блоггерам. Да и ставить этот код не обязательно,некоторые посетители и не смогут понять как открыть этот текст.

    в 04:05 | Ответить
  34. Сергей

    Александр, а в честь чего это вы снизили стоимость рекламы от Nolix в 3 раза?

    в 07:28 | Ответить
    • Александр Борисов

      Когда количество купленной рекламы уменьшается, я снижаю цену, чтобы ее накупили больше, потом снова поднимаю. Фишка такая.

      в 09:12 | Ответить
      • Илья

        Вот оно что, запишем.

        в 09:45 | Ответить
  35. Тим

    Интересное изобретение. Решил, что мне спойлер пока без надобности, но вообще реализация его очень аккуратная и удобная для любого блога.

    Александр, правильно ли я понимаю, что пока этот текст под спойлером, он не индексируется поисковиком? Например, можно ли безбоязненно прятать туда неуникальный контент?

    И, кстати, меня радует твоя активность в последнее время, не сбавляй темп!

    в 12:40 | Ответить
    • Александр Борисов

      Нет, контент весь индексируется как обычно!

      в 13:01 | Ответить
      • Тим

        Жаль. мне бы пригодилась возможность прятать неуник.

        в 13:11 | Ответить
        • Александр Борисов

          Это можно как-то тоже через скрипт делать.

          в 13:16 | Ответить
          • Тим

            Да, наверняка. Но это уже не для моего гуманитарного ума. Пусть уж тогда над этим ломают голову профильные специалисты.

            в 13:35 | Ответить
        • Денис

          Эта фича просто скрывает содержимое от глаз человека, но в коде страницы, текст внутри спойлера — присутствует. Поэтому поисковики будут индексировать этот текст как и любой другой.

          в 20:23 | Ответить
  36. Евгений

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

    Если эта информация где-то была, а я не нашел, то заранее прошу прощение!

    в 14:21 | Ответить
    • Александр Борисов

      Дизайн с версткой мне обошелся в 28 тысяч рублей. Но сейчас тот дизайнер, который мне рисовал дизайн не рисует уже. На фрилансе такой дизайн будет стоить от 50к только за сам дизайн, да и то я мало находил людей, которые так рисуют. :) Такие дела.

      в 14:27 | Ответить
      • Евгений

        Спаибо)

        в 14:27 | Ответить
      • Илья

        Тоже интересовал этот вопрос. Удивило. Я думал Вы только за один дизайн тысяч 30 отдали. Посмотрел по фирмам и на фрилансе, действительно цены ломят, а в портфолио у них не вижу дизайна такого размаха, как у Вас.

        в 14:41 | Ответить
        • Александр Борисов

          Мне дизайнер поставил цену в 13 тысяч. Потом он планку поднял от 30.

          в 15:10 | Ответить
          • Сергей

            А я помню где-то летом 2013-го спрашивал его сколько диз стоит как у вас, отвечал больше месяца :) Сказал что за 25К сделает.

            в 15:26 | Ответить
      • Василий Цубера

        Александр. Я думал над этим уже много времени, и хочу себе уникальный красивый дизайн. Но не нахожу людей толковых. Я готов заплотить такие деньги. Подскажи парня который тебе рисовал. Можеш по партнерской ссылке, я не против, даже еще и рад буду. За ранее спасибо.

        в 17:03 | Ответить
        • Сергей

          volumepaint (gav) gmail. ком Если он и согласится делать, то стоить это будет недешево)

          в 08:53 | Ответить
  37. Рашида

    Возьму на заметку, спасибо Александр за инструкцию как сделать красивый спойлер — осталось только найти прменение [good]

    в 18:17 | Ответить
  38. Алексей

    Кстати, ещё в прошлой статье под видео увидел эту фишку и очень заинтересовался, как это делается, пробовал даже поискать, но... названия-то не знал. Значит, спойлер... Испробую эту функцию.

    Александр, 2 вопроса: ты не анонсировал эту статью через подписную базу? и второй вопрос: как ты перевёл видео-аудио-обращение в текстовый формат — с помощью какой-то программы?

    в 21:48 | Ответить
    • Александр Борисов

      Ребята, вы издеваетесь? Ответ в статье этой же внизу [:-))]

      Надо думать фишку, чтобы заставлять читать статью целиком.

      в 22:02 | Ответить
      • Сергей

        Нужно комментарии спрятать в спойлер, а где-то в статье вставить незаметную кнопку, которая его открывает [:-))] Придется хоть что-то почитать, чтобы написать коммент))

        в 13:03 | Ответить
    • Максим

      Большой спасибо за фрилансера, очень пригодится! А спойлет уже сделал [good]

      в 10:21 | Ответить
  39. Алексей

    [:))] [:))] [:))] , спасибо, почёл... Дороговато, в общем-то, если в планах частые и продолжительные ролики... А спойлер испробовал на своём блоге, всё получилось; спасибо за статью! ;-)

    в 22:33 | Ответить
  40. Артём Черкасов

    Статейку закинул в закладочки, применю потом =)

    в 00:35 | Ответить
  41. Владислав

    Спасибо, будем реализовывать.

    в 01:23 | Ответить
  42. Волков Игорь

    Интересная, а самое главное понятная информация. Спасибо!

    в 12:15 | Ответить
  43. Алексей

    Александр, вопрос, который хочу задать, возможно, тоже уже не раз задавался: вот у тебя в статье есть выделенные места — «схема подключения споллера», P.S., где ты рассказываешь, как делаешь транскрибацию, — как ты выделяешь эти отрезки текста?.. Может есть ссылочка на твою статью с решением этого вопроса...

    в 13:07 | Ответить
    • Александр Борисов

      Алексей — это обычная цитата. То есть я текст заключаю просто в специальные теги, а стили для цитаты у меня прописаны в style.css

      в 13:16 | Ответить
      • Алексей

        Кое-как отыскал строчки, отвечающие за цитату в style.css... Настроил под свой блог и эту область и сполер. Почти как у тебя, только сбоку полоска цветом «старое золото»

        в 23:01 | Ответить
  44. Альберт

    Круто [good] Спасибо за очередную полезность, Александр!

    в 15:31 | Ответить
  45. Алексей

    Неплохое дополнение!

    Вот пока не знал — оно было не нужно.

    А сейчас прочел статью — загорелся. Хотя сам же понимаю — стоит притормозить [:-))]

    Только с версткой разобрался недавно и опять в дебри полезу.

    Спасибо за статью Александр.

    в 00:03 | Ответить
  46. Денис

    ...думал, разберусь сам, но не вышло... не открывается у меня спойлер с текстом...

    сам спойлер отображается, а вот спрятанный текст — не открывается...

    не подскажите, в чем причина? [:-|]

    в 19:01 | Ответить
  47. Данил

    У вас ошибка в подключении jquery

    Вот так правильно:

    в 20:54 | Ответить
    • ЮныйГрафоман

      ... и, как? А то у меня тоже не открывается...

      в 09:16 | Ответить
    • ЮныйГрафоман

      Спасибо за помощь! Помогло. Заработало.

      в 15:42 | Ответить
  48. Дмитрий

    Да уж, назвали тоже, спойлер)) и не догадаешься так.

    в 06:23 | Ответить
  49. Алексей

    Спойлер, действительно, интересное решение. Применяю, очень эффективная штука.

    в 18:36 | Ответить
  50. Андрей

    Спасибо за спойлер. Автору респект. Здорово! :) [good]

    в 04:16 | Ответить
  51. Александр

    Александр подскажите, цвет спойлера можно сменить на любой какой мне захочется? А так же вставить картинку в заголовок спойлера возможно?

    в 14:54 | Ответить
  52. Павел

    jQuery- по- моему идёт как стандартный скрипт WordPress? Смысл его добавлять?

    в 19:52 | Ответить
  53. Павел

    Спасибо за дельные советы!!

    в 23:41 | Ответить
  54. Дмитрий Баль

    У меня чего-то спойлер сам есть,но не выдвигается его содержимое. Всё подключено, может дело в шаблоне. Там даже нельзя постраничную навигацию сделать.

    в 09:40 | Ответить
    • Андрей

      У меня тоже не выдвигалось содержимое, я поменял скрипт на последнюю версию и всё заработало.

      Этой строкой подключается последняя версия библиотеки с Google.

      в 17:11 | Ответить
      • Андрей

        Скрипт не удаётся показать в комментариях.

        Этой строкой подключается последняя версия библиотеки с Google (я рекомендую использовать именно этот способ в рабочих проектах).

        в 17:13 | Ответить
  55. Александр

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

    в 22:30 | Ответить
  56. ЮныйГрафоман

    Цитата1:

    «... библиотеку jQuery. Добавьте ... перед закрывающимся тегом /body»

    Цитата2:

    «... чтобы спойлер нормально работал (опять же после закрывающегося тега /body):»

    Опять же после? или до? Просто у меня спойлер не выезжает... Правда я поставил до «закрывающего». Где проблема? Кто-нить знает?

    в 09:04 | Ответить
    • ЮныйГрафоман

      Вопрос закрыт. Заработало.

      в 15:42 | Ответить
  57. Павел

    Надо будет сделать!

    в 08:16 | Ответить
  58. Александр

    Давно собираюсь сделать такую вещь у себя на блоге. Но что то времени не хватает. Сегодня попробую сделать. Возможно появиться как всегда масса вопросов. Думаю что на блоге Александра я всегда смогу найти дельный совет. И вот первый вопрос. Если я ранее подключал библиотеку, для увеличения картинок без плагина и прописывал коды в файле footer.php, для того чтобы сделать спойлер больше ничего не нужно делать кроме вставки кода в файл style.css или мне нужно проделывать все приведенные выше действия? Заранее всем огромное спасибо за ответ!

    в 08:08 | Ответить
  59. Сергей

    Определенно удобная вещь, надо будет внедрить на своем блоге!

    в 17:29 | Ответить
  60. Александр

    Очень доступно и понятно изложено, спасибо. [good]

    в 23:56 | Ответить
  61. Лилия

    Спасибо Александр!

    Все сделала несколько раз, но у меня не выходит.

    Сам спойлер появляется, но не раскрывается [:-|]

    Смущают тоже цитаты:

    "Цитата1:

    «... библиотеку jQuery. Добавьте ... перед закрывающимся тегом /body»

    Цитата2:

    «... чтобы спойлер нормально работал (опять же после закрывающегося тега /body):» "

    У меня WordPress 3.8.2

    Ничего не понимаю в скриптах.

    Подскажите, где может быть ошибка?

    в 08:26 | Ответить
  62. Денис Зотов

    За статью спасибо, информацию очень полезна. [good]

    Хочу поделиться своим опытом, полученным из вашей статьи.

    Дело в том, что скрипт спойлера использует библиотеку jQuery, и из-за этого могут быть проблемы. А именно могут перестать работать скрипты меню, основанного на MenuMatic, часто используемого во многих блогах WordPress. Наш блог не стал исключением, после добавления спойлера перестало раскрываться меню.

    Как именно мы решили эту проблему, приглашаю узнать в одной из наших последних статей "Почему не раскрывается меню".

    в 23:35 | Ответить
  63. Инна

    Александр, вы пишете:

    Добавьте вот этот код в файл footer.php темы вашего блога для того, чтобы спойлер нормально работал (опять же после закрывающегося тега /body)

    А перед этим нужно было вставлять перед тегом /body.

    Куда надо вставлять второй код — до или после? Я вставила после, у меня не работает, выводится просто текст.

    в 19:46 | Ответить
  64. Серега

    Саня, спасибо за полезный материал! Без проблем разобрался и поставил на свой блог. Немного пошаманил над цветами, дабы спойлер вписался в дизайн моего блога.

    в 07:52 | Ответить
  65. Елена Исхакова

    У меня у одной ничерта не работает? Спойлер работает только когда я нахожусь в админке блога.

    в 13:09 | Ответить
  66. Миша

    Привет Санёк, недавно вернулся с моря, а тут в Кст на лыжи вставать уже можно =)

    На моей Landing Page накопилось комментариев ~ на 40 000 символов, и судя по вебвизору, в яндекс метрике — пользователей пугал размер документа (продающего текста всего 7-8 тысяч символов), но создавалось ощущение, что его ~ 50k за счёт мизерного ползунка. И многие листали резко ползунок вниз, конверсия страдала. Убил комментарии, конверсия возросла, но спустя две недели трафик с поисковиков на целевую LP упал с 200 до 90 и профит упал чуть ли не в три раза, видимо куча НЧ-запросов было вкусных, в ноябре теперь печально по профиту выйдет 😀

    Решил вернуть комменты, спрятав их под спойлер. Поискал в Y и в топ-1 твой бложик вылез по спойлеру. Изи за 5 минут всё сделал, всё классно вписалась, стили под себя немного подбил. Thanks. Пара замечаний: jquery на мой взгляд лучше подключать прямо со своего сайта, если можно избежать внешних скриптов, это всегда плюс. Кроме того, ты указал статистическую ссылку на jquery, а она периодически обновляется. Эта уже не самая актуальная — актуальную версию можно всегда забрать на сайте разработчика — jquery.com — в разделе Download. Лучше брать compressed / production версию, т.к. она весит в разы меньше (93 КБ вместо 200+), т.к. не содержит комментариев и удобных для чтения переносов строк, быстрее будет грузиться, по функциональности не отличается ничем. И ещё — ты в статье предлагаешь вставлять скрипт ПОСЛЕ закрывающегося тега <body>, но это неправильно с точки зрения валидности — нужно вставлять сразу ПЕРЕД ним :-| спс ещё раз за элементарный мануал по созданию спойлера [good]

    в 03:30 | Ответить
  67. Миша

    И ещё — как думаешь, текст под спойлером также нормально будет индексироваться и ранжироваться по НЧ-вхождениям, как и без него? На сёрчендженс форуме ребята говорят, что всё ок должно быть. Но что-то у меня подозрения, раньше никогда не пробовал пихать контент под спойлеры. Зря я конечно резко урезал контент LP ~ с 43к символов до 7-8к. Надеюсь, что ближе к НГ, траф на неё вернётся [:-|]

    в 03:35 | Ответить
    • Жандос Мукатаев

      Весь контент в спойлере будет индексироваться как обычно!

      в 08:05 | Ответить
      • Миша

        Yandex — проиндексировал. Google — нет.

        На сёрче тоже часто пишут, что Google не индексирует контент под спойлерами. На форуме гугла тоже это упоминали.

        Такие дела.

        Хз даже, как быть тогда.

        в 05:47 | Ответить
  68. Миша

    Аа, вижу тут уже обсудили выше загрузку jquery с google сервера, и пришли к тому, что нагрузка будет ниже. Но имхо, загрузка лишних 90 КБ практически не повлияет на загруженность сервера, даже простой баннер — существенно сильнее тормознёт проект :) А вот внешнего скрипта не будет, что только в плюс, и соответствует наставлениям Google Page Speed и других официальных мануалов от ПС. Вообще, рекомендуют следить за актуальной версией Jquery на сайте разработчика и загружать её прямо к себе, не подключая внешне. И да, там 1 и 2 линейки jquery, если решите юзать вторую, обратите внимание, что во второй могут быть косяки на стареньких версиях IE.

    в 03:44 | Ответить
  69. Василий Цубера

    Саша, или кто знает подскажите с чем это может быть связано? Я установил спойлер все как написано никаких ошибок не выдает, все странницы грузятся нормально, но информация которая в спойлере всегда открыта, а когда на него нажимаю то он закрывается и сразу же открывается, нажимаю только один раз! Может кто встречал подобные проблемы, что вы делали в таком случае?

    Спасибо за ранее!

    в 19:39 | Ответить
  70. Григорий

    Очень хорошая статья! Благодарю! Прямо то, что я хотел!

    в 14:15 | Ответить
  71. Наталья Гегер

    Красивенько получилось. Спасибо Александр

    в 22:15 | Ответить
  72. Сергей

    Спасибо! Очень интересный инструмент, установил, использую, работает. [good]

    в 13:40 | Ответить
  73. Сергей

    Почему то он изначально показывает открытый вид, а хотелось бы на оборот.

    в 14:03 | Ответить
  74. Василий

    А возможно ли сделать учёт кликов по спойлерам?

    Чтобы клик по каждому спойлеру на каждой странице сайта учитывался?

    в 12:44 | Ответить
  75. Александр

    Здравствуйте у меня пару вопросов ...

    1. спойлер ставлю все ок но перестает работать слайд — мешает код библиотеки что делать не знаю ... другие библиотеки пробовал но не помогло ...

    2. скажите как сделать как у вас спойлер или блок, не знаю как правильно это называется,в общем блок где у вас написано:

    1. Подключить библиотеку jQuery к блогу в файле footer.php

    2. Подключить скрипт спойлера в файле footer.php

    3. Добавить css стили для спойлера в файл style.css

    4. Добавить сам код спойлера в статью или страницу блога

    ----------- мой блог тоже вордпресс

    в 11:23 | Ответить
  76. Akira Tsukizawa

    Спасибо! подправил css под дизайн сайт, всё работает отлично

    в 15:02 | Ответить
  77. Анна Апрельская

    Эх, я надеялась сделать это каким-нибудь плагином( Не люблю лазить в код, потому что могу одним неверным движением сломать весь сайт) Буду лучше со стремными спойлерами сидеть — так безопасней)

    в 04:53 | Ответить
  78. Павел Семенов

    Александр !

    Подскажите как сделать, чтобы спойлер был по умолчанию открыт, а при нажатии на него закрывался скрывая содержимое ?

    в 17:47 | Ответить
  79. Сергей

    Извиняюсь, если повторюсь, подскажите, как сделать так, чтобы спойлер был закрыт, на моё сайте он автоматически открыт. открытие закрытие работает, но когда он сразу открыт это не так красиво выглядит!

    Заранее спасибо!

    в 21:50 | Ответить
Оставить комментарий: (ПРОЧТИ ЭТО!!!)
:) :-D ;-) :-| [star] [good] [present] [flower] [:-))] [:))] [:--_)] [:-|]