Как изменить оформление виджета Linkwithin с использованием CSS стилей



Красивое оформление виджета Linkwithin-похожих сообщений блога


Здравствуйте гости и читатели моего блога. Сегодня мы снова займемся оформлением дизайна. У многих владельцев блогов установлен виджет Linkwithin перелинковки постов, но смотрится на страницах блога у многих одинаково. Давайте попробуем исправить оформление виджета с использованием CSS стилей. 

Как установить виджет перелинковки сообщений, читайте в моем посте по этой ссылке. Пример смотрите на скриншоте, а кто желает посмотреть вживую, сходите в тестовый блог.

Настройка виджета Linkwithin, вставка кода в шаблон блога

Теперь, кто желает заняться оформлением виджета, копируем код CSS, в админке blogger нажимаем шаблон-делаем резервную копию, далее изменить шаблон, нажимаем на первую стрелку, рядом строка <b:skin>...</b:skin>, прокручиваем тихонько вниз, и выше строки ]]></b:skin> вставьте скопированный код.

.linkwithin_text {
font-family: Cambria,Georgia,sans-serif;
font-size:16px;
color:#0e5198;
}
.linkwithin_posts {
width: 500px !important;
}
.linkwithin_posts a {
border: 0 !important;
padding-right: 10px !important;
}
.linkwithin_posts a { 
background:#f9e8ff !important;   
border-right:2px dotted #029d74!important;
.linkwithin_posts a:hover {
background: #B561FF !important;
}
.linkwithin_img_0 {
background: #029D74;
border: 10px dotted #F00;
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: #F00;
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: 50px; 
-moz-border-radius: 50px; 
border-radius: 50px; 
}
.linkwithin_title {
color: #0e5198 !important;
font-family: Cambria,Georgia,sans-serif;
font-size: 12px !important;
line-height: 10px !important;
text-align:center;
text-decoration: none;
}

В строку

 .linkwithin_posts a {
border: 0 !important;
padding-right: 10px !important;


Можно добавить радиус закругления, размер, форму и цвет рамки для всего контейнера.


border:3px double #029d74!important;
border-radius:14px;
}

Но нужно будет удалить настройку разделительной линии

border-right:2px dotted #029d74!important;


Основные настройки: выделенное красным-цвет и размер заголовка (можно посмотреть; похожие сообщения; вам может быть интересно и.т.д.); лиловым-цвет фона при наведении; зеленым-цвет окантовки круга; синим-размер и форма окантовки круга при наведении; оранжевым-фон круга при наведении; желтым-цвет и размер заголовков сообщений и расстояние между строками;

Выделенное фиолетовым-фон контейнера и цвет разделительной линии между ними; padding-right: 10px-увеличить контейнер вправо;

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

Чтобы скрыть ссылку linkwithin справа, в шаблон вставить

#linkwithin_logolink_0{display:none;}

Код можно вставить дизайн добавить гаджет, заключив в <style>CSS</style>

У меня все, оформляйте, задавайте вопросы, не забывайте делиться с друзьями в социальных сетях. Всего Доброго!.

Ранее я писала  как вставить видео на страницы блога Blogspot; оформление изображений в блоге с использованием CSS стилей;




Автор статьи ✎ Olga Protasova Выпуск ✹ 8/10/2014 Ярлыки ►


Открыть комментарии →

3 коммент. :

  1. Здравствуйте! А если я хочу просто изменить цвет виджета при наведении на него мышки (по умолчанию цвет серый), то какой код нужно вставить?

    ОтветитьУдалить
  2. Organic Fan, здравствуйте. Вставить в шаблон в стили, описание в статье. Цвет изменится только при наведении.

    .linkwithin_posts a:hover {
    background: #03b4cc !important;
    }

    ОтветитьУдалить

Ув. читатели! Для вставки HTML кода в комментарии, воспользуйтесь в меню Генератором преобразования HTML кода.

 
Технологии Blogger.

Форма для связи

Имя

Электронная почта *

Сообщение *