Как создать виджет с помощью редактора записей

Многие вебмастера используют всевозможные сервисы для популяризации своих ресурсов, среди которых всевозможные группы всем известного сайта Subscribe.ru.  Однако для добавления анонсов в группы, которым присоединяешься, требуется на главной странице разместить код виджета группы. Разместить не проблема, но, как правила, внешний вид картинок этих виджетов, оставляет желать лучшего.

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

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

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

Далее поступаем так: откройте редактор для добавления новой записи и создайте черновик(потом его можно будет удалить), загрузив созданную картинку.

При этом загружая картинку в редакционном окне  обязательно выберите для картинки функцию «Ссылка на страницу вложения»!

Теперь в режиме HTML вашего редактора картинка будет выглядеть примерно так: 

<a href=»http://prt56.ru/?attachment_id=968″ rel=»attachment wp-att-968«><img src=»http://prt56.ru/wp-content/uploads/2012/03/25.jpg» alt=»» title=»2″ width=»189″ height=»124″ /></a>

А вот как она выглядит визуально:
Собственно, код этой картинки может служить виджетом для вашей страницы, если вы его вставите в сайдбаре, как виджет. Но нам нужен вижет, переводящий читателя на страницу группы! Вот как выглядит код виджета группы «Создать свой сайт» :

<noindex> <a href=»http://subscribe.ru/group/sozdat-svoj-sajt-mechta-kazhdogo-chelovekakotoryij-hotya-byi-2-3-raza-zahodil-v-internet/» target=»_blank«><img src=»http://image.subscribe.ru/group/uploads/so/sozdat-svoj-sajt-mechta-kazhdogo-chelovekakotoryij-hotya-byi-2-3-raza-zahodil-v-internet/image/lmLTlkYTI_jpg_150x150_q85.jpg» width=»150″ height=»58″ alt=»1″></a></noindex>

Из этого кода  вам понадобится только его часть выделенная мною красным цветом — адрес страницы данной группы на Subscribe. Вот этот адрес и нужно вставить в код созданной картинки вместо адреса сайта(тоже выделено красным)!

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

<noindex><a href=»http://subscribe.ru/group/sozdat-svoj-sajt-mechta-kazhdogo-chelovekakotoryij-hotya-byi-2-3-raza-zahodil-v-internet/» target=»_blank«><img src=»http://prt56.ru/wp-content/uploads/2012/03/24.jpg» ></a> </noindex>
. Тег noindex   я добавил позже, чтобы вставить уже полностью готовый код в сайдбар. Хотя, для того, что бы ссылка с виджета не индексировалась, достаточно поставить атрибута arel=»nofollow». Это как вы пожелаете.  Можно вообще не ставить — все равно внешняя ссылка при любых атрибутах уменьшает удельный вес страницы. Только не индексируется.

А вот как ТЕПЕРЬ выглядит картинка-виджет для группы  визуально(без noindex):

Картинку для виджета  можно переделать:  например изменить размеры,  так, что бы она гармонично вписывалась в колонку, где добавлен виджет. Можно картинку сделать  анимационной( баннер), но это уже тема для другой статьи…

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *