Как поменять стиль виджета LinkWithin

Приветствую вас, дамы и господа! Как поменять стиль виджета LinkWithin. LinkWithin продолжает оставаться самым популярным виджетом похожих сообщений с миниатюрами среди пользователей Blogger, WordPress и других CMS, но у него есть небольшой недостаток, это отсутствие настроек дизайна. Сегодня мы постараемся решить эту проблему с помощью CSS поменяем миниатюры на круглые и скроем ссылку на сайт LinkWithin:

CSS
Менять стиль виджета LinkWithin с помощью CSS

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

Как поменять стиль виджета и скрыть ссылку LinkWithin

С помощью стиля CSS мы можем поменять цвет фона при наведение курсора мыши, стиль миниатюр, размер шрифта заголовков статей, скрыть надпись-ссылку LinkWithin и так далее. Не буду друзья вас утомлять писаниной, перейдём сразу к делу. И так, находим в шаблоне своего блога на Blogger строчку ]]></b:skin>. У новичков в этом деле иногда возникают большие затруднения, ну ни как не могут найти её, ищут даже с лупой, результатов - ноль. Здесь, есть подробная инструкция для Blogspot вставки стилей в блог, а тут показываю в картинках. Почти в начале шаблона мы можем увидеть такую картину:

код шаблона Blogger
Раскрываем стили в шаблоне Blogger

Нажимаем на чёрную стрелку, чтобы раскрыть стили шаблона Blogger. Затем, прокручиваем немного вниз и вот наш искомый тег ]]></b:skin>:

Стили БЛОГА
Стили Blogger

Теперь, чуть выше тега вставляем код стилей CSS для нашего виджета LinkWithin. А в WordPress в файл Таблица стилей (style.css). Код такой:

Сохраняем шаблон и вот полученный результат:

Новый стиль LinkWithin
Новый стиль виджета LinkWithin с круглыми миниатюрами

Нравится? Круглые миниатюры и исчезла ссылка на сайт LinkWithin. Естественно, вы можете в коде выше, поэкспериментировать над своим дизайном похожих сообщений. Создайте, что то своё, чтобы было не как у всех. А мне позвольте с вами попрощаться не надолго. Надеюсь, сегодняшний пост был вам полезен. Жду комментариев. Всего доброго и удачи.

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

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

Решите задачку: *