Оживить гаджет "Ярлыки"

Привлеките внимание своих читателей к Ярлыкам или Категориям постов размещенных в Блоге. Эти коды я позаимствовала опять у NetOopsBlog. 
Для начала, разместите гаджет Ярлыки в Вашем Блоге.

• ДИЗАЙН - Добавить гаджет - Популярные сообщения. Настройте этот гаджет на Ваше усмотрение. 
• ШАБЛОН - Изменить HTML 

 Находим через  (Ctrl + F) строчку 

]]></b:skin> 

и вставляем перед ней следующий код:

Если Вы хотите вид гаджета как у меня на боковой панели, то:

.Label a:hover
{
text-shadow:5px 5px 5px #dcdcdc;
background:orange;
border:1px solid orange;
border-bottom-right-radius: 0px;
border-top-left-radius: 0px;
border-bottom-left-radius: 30px;
border-top-right-radius: 30px;
}
.Label li {
    border: 1px solid;
    border-radius: 6px 6px 6px 6px;
    color: #000000 !important;
    float: left;
    font-size: 116%;
    list-style: none outside none;
    margin: 2px;
    padding: 4px;
    transition: all 0.3s ease 0s;
}
.Label a {
    color: #000;
    text-decoration: none;
}
.Label li:hover {
    transform: rotate(5deg);

}

Если Вы хотите видеть этот гаджет в виде липестков как в моем блоге My Gardening то возьмите следующий код к применению:

.Label a {
     -moz-border-bottom-colors: none;
     -moz-border-left-colors: none;
     -moz-border-right-colors: none;
     -moz-border-top-colors: none;
     background-color: #7FBF4D;
     background-image: -moz-linear-gradient(center top , #7FBF4D, #63A62F);
     border-bottom-right-radius: 30px;
     border-color: #63A62F #63A62F #5B992B;
     border-image: none;
     border-style: solid;
     border-top-left-radius: 30px;
     border-width: 1px;
     box-shadow: 0px 1px 0px 0px #96CA6D inset;
     color: #FFFFFF;
     float: left;
     font: 14px verdana;
     height: 18px;
     margin-bottom: 9px;
     margin-left: 10px;
     padding: 10px;
     position: relative;
     text-decoration: none;
     transition: all 0.5s ease-in-out 0s;
}

.Label a:hover {
     background: none repeat scroll 0% 0% orange;
     border-radius: 0px 30px 0px 30px;
     border: 1px solid orange;
     text-shadow: 5px 5px 5px #DCDCDC;
}

.Label {
     margin: 0px;
     padding: 0px;
     position: relative;
}
.Label li:hover {
    transform: rotate(5deg);
}
.Label li {
    float: left;
    font-size: 116%;
    list-style: none outside none;
    transition: all 0.3s ease 0s;

}

Теперь Ваши Ярлыки или Категории привлекут внимане каждого читателя.


Спасибо, что воспользовались блоком кнопок "Поделиться" и +1.

Комментарии всегда приветствуются :-)