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

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

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

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

Теперь, кто желает заняться оформлением виджета, копируем код 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>

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