X
    Categories: Создание сайта

Виджет «Интересные статьи на блоге»

Приветствую, друзья!

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

В данном посте я продолжаю работу над тем, как привлечь аудиторию на блог (советую почитать). На данный момент я многие пункты реализовал на своем блоге и подробно об этом писал. Блок “интересные статьи” я сделал просто, не использовал при этом плагины или мудреные коды. Любой из Вас с минимальным знанием редактирования текста и изображений сможет при желании  создать на своем блоге раздел популярных статей с красивыми изображениями. Сам блок вы можете наблюдать у меня в правом сайдбаре.

Если вы хотите красиво вывести html-код в заметках и при этом не использовать плагин, рекомендую вам ознакомится со статьей:

Как вставить html код в статью вордпресс

По традиции, в начале познакомлю вас с некоторыми новостями:

[note]

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

Спасибо всем, кто анонсировал конкурс на своем блоге!

Новость 2. Скоро на блоге читайте интервью с Александром Борисовым, будет интересно. Александр вернулся из свадебного путешествия и опять начинает писать новые и интересные посты на своем блоге. Не забудьте  подписаться на обновления !

[/note]

Вот такие новости, теперь давайте плавно перейдем к теме поста.

Для чего нужно выделять самые интересные статьи?

  1. Возможность задержать читателя дольше на своем блоге. Предположим, что читатель зашел к вам по одному запросу, затем его внимание привлекла красиво оформленная сноска, картинка или заголовок на блоге. Он перешел по ссылке, прочел эту статью, затем прочитал еще одну и стал постоянным вашим читателем.
  2. Ссылка на популярную статью будет на главной странице вашего блога. Данный факт повысит вес статьи и значимость в глазах поисковиков и это, в свою очередь, продвинуться выше в выдаче.
  3. Читатель в первую очередь увидит самые популярные ваши посты и оценит ваш блог в целом по этим публикациям, выводите в него только лучшие посты.

Как вывести  самые популярные статьи на блоге?

Для вывода блока нам нужно найти интересные, цепляющие картинки к каждой статье, форматировать их в нужный размер, отредактиовать, привязать к каждой картинке соответствующую ссылку на пост  и в редакторе wordpress сгенерировать html-код. Затем код вставим в сайдбар в виджет “Текст” и все готово. Теперь подробней.

Находим картинку и форматируем ее для виджета

Для начала вы заходите в поисковик  Яндекс или Google и ищите картинку для будущего блока популярных статей. У меня это получилось сделать минут за 10. Попробуйте вводить различные варианты фраз и выберите одну самую цепляющую картинку.

После этого определитесь где вы будете выводить данный виджет: в шапке блога, сайдбаре или после статей. Вам нужно определить размер будущих картинок, у меня это 180х120 пикс.

Когда вы выбрали картинки для каждой статьи, откройте первую картинку в программе для редактирования изображений. Я покажу все на примере Adobe Photoshop 5.1

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

После этого жмем “Enter” и затем кнопку “T” слева, и пишем текст на картинке ( в моем случае: работа без вложений, моя правда). Я добавил следующие эффекты  “Тень” и немного искривил текст, затем жмем “Enter”.

После этого жмем сверху “Файл”  и в выпадащем меню выбираем “Сохранить для Web и устройств”.

Перед Вами будет 4 варианта, как на рисунке выше. Выбирайте самый оптимальный вариант, но помните, что размер более 50 кbit не желателен. Сохраняете, даете картинке имя по теме поста (пример к моей статье “аудитория блога”: называем auditorija-bloga). Проделываете по очереди со всеми картинками такие действия.

Создаем html-код для виджета “интересные статьи”

Заходим в админку блога, загружаем полученные каринки на блог:  “Добавить”=>”Медиафайл”.

Затем открываем  “Записи”=>“Новая запись” и добавляем медиафайлы, располагаем их по центру один под одним. К каждой картинке добавляем ссылку на соответствующую статью или под картинкой прописывайте заголовок и к нему привяжите ссылку.

После этого нажимаем в редакторе справа кнопку “Текст” или “html” —  у кого как. Все, ваш html-код готов. Я поставил между картинками такое сочетание

 

 для того, чтобы они были отделены между собой и не выглядели монолитом.

Вставляем полученный html-код в нужное место на блоге

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

Для этого в админке блога открываем “Внешний вид”=>”Виджет”=>”Текст”.

В тело виджета вставляем полученный код,  и сохраняем. На этом установка закончена, можно посмотреть на результат. Если нужно, подкорректируйте расположение картинок, расстояние между ними и т. д.

Рекомендую Вам проверить ссылку с каждой картинки, поочередно на них нажав самому. Надеюсь у Вас все вышло и я понятно пояснил в статье что и зачем нужно делать.

Интересные статьи теперь отображаются у Вас в самом удобном, видном месте для читателей и самые популярные посты будут читать еще больше.

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

В следующей статье ждите новый кроссворд.

До встречи!

Интересные статьи по данной теме:

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

Как ускорить индексацию страниц сайта – 12 советов?

Вебвизор от Яндекс Метрика – установка, инструкции, возможности

Какой хостинг выбрать — акция!

С уважением, Вилков Николай

Все статьи блога

Хотите в числе первых узнавать о новых статьях и курсах?

Подпишитесь на обновления моего блога и мой канал на YouTube
Если статья вам понравилась, поделитесь с друзьями в социальных сетях. Спасибо!

Николай Вилков :