(Последнее обновление: 14.02.2017)

Приветствую вас, дамы и господа! Как поменять стиль виджета 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). Код такой:

/*****************************************
Name : Widget LinkWithin Style
******************************************/
.linkwithin_div {
background: #EEEEEE; /* Background color for the related posts container */
padding: 0 10px;
border-top: 1px solid #DBDBDB; /* Top border for the related posts container */
border-bottom: 1px solid #DBDBDB; /* Bottom border for the related posts container */
}
.linkwithin_text {
font-family: Cambria,Georgia,sans-serif;
font-size:18px; /* Size for the related posts title */
color:#898989; /* Color for the related posts title */
}
a#linkwithin_logolink_0, a#linkwithin_logolink_1, a#linkwithin_logolink_2, a#linkwithin_logolink_3, a#linkwithin_logolink_4, a#linkwithin_logolink_5, a#linkwithin_logolink_6, a#linkwithin_logolink_7, a#linkwithin_logolink_8, a#linkwithin_logolink_9, a#linkwithin_logolink_10, a#linkwithin_logolink_11, a#linkwithin_logolink_12, a#linkwithin_logolink_13, a#linkwithin_logolink_14, a#linkwithin_logolink_15, a#linkwithin_logolink_16, a#linkwithin_logolink_17, a#linkwithin_logolink_18, a#linkwithin_logolink_19, a#linkwithin_logolink_20 {
display:none;
}
.linkwithin_posts {
width: 500px !important; /* Width for the related posts container */
}
.linkwithin_posts a {
border: 0 !important;
padding-right: 10px !important;
}
.linkwithin_posts a:hover {
background: #F5F5F5 !important; /* Background color on mouseover */
}
.linkwithin_img_0 {
background: #F5F5F5;
border: 1px solid #C1C1C1;
padding: 2px !important;
transition:all .2s linear;
-o-transition:all .5s linear;
-moz-transition:all .2s linear;
-webkit-transition:all .2s linear;
}
.linkwithin_img_0:hover {
background: #ffffff;
padding: 2px !important;
opacity:.6;
filter:alpha(opacity=60)
}
.linkwithin_img_0 div, div.linkwithin_img_0,
.linkwithin_img_1 div, div.linkwithin_img_1,
.linkwithin_img_2 div, div.linkwithin_img_2,
.linkwithin_img_3 div, div.linkwithin_img_3,
.linkwithin_img_4 div, div.linkwithin_img_4,
.linkwithin_img_5 div, div.linkwithin_img_5,
.linkwithin_img_6 div, div.linkwithin_img_6,
.linkwithin_img_7 div, div.linkwithin_img_7,
.linkwithin_img_8 div, div.linkwithin_img_8,
.linkwithin_img_9 div, div.linkwithin_img_9,
.linkwithin_img_10 div, div.linkwithin_img_10,
.linkwithin_img_11 div, div.linkwithin_img_11,
.linkwithin_img_12 div, div.linkwithin_img_12,
.linkwithin_img_13 div, div.linkwithin_img_13,
.linkwithin_img_14 div, div.linkwithin_img_14,
.linkwithin_img_15 div, div.linkwithin_img_15,
.linkwithin_img_16 div, div.linkwithin_img_16,
.linkwithin_img_17 div, div.linkwithin_img_17,
.linkwithin_img_18 div, div.linkwithin_img_18,
.linkwithin_img_19 div, div.linkwithin_img_19,
.linkwithin_img_20 div, div.linkwithin_img_20 {
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
}
.linkwithin_title {
color: #242424 !important; /* Color for titles */
font-family: Cambria,Georgia,sans-serif;
font-size: 12px !important; /* Font size of posts titles */
line-height: 24px !important;
text-align:center;
text-decoration: none;
}
.linkwithin_title:hover {
color: #000 !important; /* Color of posts titles on mouseover */
}
/* Widget Style CSS End */

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

Новый стиль LinkWithin

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

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