1/28/2013

DESIGN YOUR BLOG | "READ MORE" + BONUS

    
Один добрый аноним, видимо читатель моего блога, на сайте ask.fm попросил меня показать, как сделать надпись/кнопку/ссылку "Читать дальше". Я не могла отказать этому человеку и решила написать пост. Да и рубрика у меня подходящая есть.
Но простым уроком все не ограничится. Для более продвинутых пользователей я подготовила небольшой сюрприз. Какой? Читай дальше и увидишь! ;)

   
На самом деле все проще простого! Достаточно просто разобраться.
   
1. В настройках блога находим вкладку "Дизайн". Именно там мы будем все делать.

2. В появившемся окошечке мы видим вот такую конструкцию блога.

3. Нас интересует блок "Сообщения блога". Нажимаем кнопку "Изменить".
У нас появляется новое окно.
  
4. Как раз тут и находится сердце кнопки "Читать дальше", если это так можно назвать. :D
Находим строчку "Текст ссылки на Страницу сообщения". Рядом видим окошечко, в котором будет слово/фраза, которая и будет перенаправлять вас на страницу сообщения. 
Лично у меня там написано "Read more »", что будет написано у вас - вам и решать.
   
5. Но что же делать дальше? Как разделить сообщение? Тут все еще проще. 
Открываем страницу написания нового сообщения.

6. На панели инструментов находим значок с разорванной страничкой (выделена желтым).

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




Но если вас не устраивает обычная ссылка "Читать дальше", я предлагаю вам сделать вместо нее кнопку! В этом и заключается бонус.
Внимание! Если вы еще не работали с html-кодами, то я не советую вам читать дальше. Хотя просто ознакомиться не помешает. Но если вы любите экспериментировать с блогом, с дизайном в частности, то можете попробовать. Только сохраните куда-нибудь код дизайна, застраховаться никогда не лишнее. :)
 
Я выбрала самый простой вариант.

1. Переходим во вкладку "Дизайн", нажимаем на кнопку "Изменить HTML".
2. Ставим галочку на "Расширить шаблоны виджета".
3. С помощью поиска (Ctrl + F) находим в шаблоне <data:post.jumpText/>
Вместо этой строчки вставляем код:

<b:if cond="data:post.hasJumpLink">
</b:if>
<div class="jump-link">
<a expr:href="data:post.url + &quot;#more&quot;" expr:title="data:post.title" href=""><img border="0" src="http://1.bp.blogspot.com/-MxJQ78A0Ndo/UFxoKM-JNKI/AAAAAAAAC5c/Gb6b6f3C-pI/s1600/knopka30.jpg" />
   
Вот и все! Красным цветом выделена ссылка на картинку, которую вы хотите поставить.
   
   
Как я и сказала в начале поста, что все легко, нужно только разобраться.
Я надеюсь, что вы все поняли. Если же нет - пишите в комментарии - я постараюсь помочь!
Но помните, что я такой же чайник, как многие из вас. ;)

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

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

    ОтветитьУдалить
    Ответы
    1. Странно, у меня все есть.
      Картинка должна быть с надписью Read more. Точно нет?

      Удалить
    2. Вот она, у тебя такой нет?
      http://imgdepo.ru/id/i2670768 (ссылка на изображение, не бойся переходить :) )

      Удалить
    3. Анонимный30/1/13 14:12

      у меня есть это картинка...

      -А.

      Удалить
    4. ну хорошо тогда :)

      Удалить
  2. А еще можешь сделать пост, с уроком как делать этот "разрыв", где у тебя полоска с сердечком. Как я понимаю, ты его просто нарисовала, но оно вставлено не как картинка...Было бы очень полезно)

    ОтветитьУдалить
    Ответы
    1. Это картинка, вставлена тоже как картина. :) Просто я вставляла не через иконку "Вставить картинку" (на панели инструментов), а просто скопировала изображение из другого поста и вставила в свой пост. Надеюсь, я понятно объяснила. :) Если же нет, то попробую сделать пост. :))

      Удалить
    2. Спасибо, все понятно)

      Удалить
  3. Анонимный25/3/13 21:23

    А как потом поменять картинку? Как искать нужную строчку?

    ОтветитьУдалить
    Ответы
    1. красным выделено же

      Удалить
    2. Анонимный25/3/13 23:17

      Я имею ввиду потом на другую. Просто никак не найти

      Удалить