Кнопка читать далее при наведении курсора меняет цвет. Вариант №2

Ох и намучилась же я с этими кнопочками.  Я уже делилась одной. Но как показала практика, данная кнопка «Читать далее» идет в конфликт с виджетом linkwithin, который стоит у многих моих читателей. Поэтому  я собрала манатки  нашла время и пошла в путь для поиска кнопок которые не будут  так сильно влиять на такой виджет. Вы не поверите я их нашла.

Но для начала нужно покопаться в шаблоне и найти это:

<b:if cond='data:post.hasJumpLink'>

Под ним будет вот этот скрипт:

 <b:if cond='data:post.hasJumpLink'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><span class='a_demo_four'>Читать далее</span></a>
</b:if>

Меняем на этот:

<b:if cond='data:post.hasJumpLink'><div class='jump-link'><div class="MBT-readmore"><a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a></div></div></b:if>

Ищем  ]]></b:skin> и над ним вставляем этот код

Принажатии кнопка будет иметь зеленый цвет

/*------------ White + Green -----------*/.MBT-readmore{  background:#00000;  text-align:right;  cursor:pointer;  color:#008000; 
margin:5px 0; 
float:right; 
border:2px solid #111; 
padding:5px; 
-moz-border-radius:6px; 
-webkit-border-radius:6px; 
font:bold 11px sans-serif; 
} 
.MBT-readmore:hover{ 
background margin:5px 0;  float:right;  border:2px solid #111;  padding:5px;  -moz-border-radius:6px;  -webkit-border-radius:6px;  font:bold 11px sans-serif;  }  .MBT-readmore:hover{  background:#008000; 
font:bold 11px sans-serif; 
color:#111; 
border:2px solid #111; 
} 
.MBT-readmore a { 
color:#111; 
text-decoration:none; 
}
font:bold 11px sans-serif;  color:#111;  border:2px solid #111;  }  .MBT-readmore a {  color:#111;  text-decoration:none;  }.MBT-readmore a:hover {  color:#111;  text-decoration:none;  }

до наведения

после наведения курсора

#008000 можно заменить на цвет, который вам  подходить под  дизайн

Это код оранжевой кнопочки

/*----------Orange One 1 ----------------*/.MBT-readmore{  background:#EB7F17;  text-align:right;  cursor:pointer;  color:#fff;  margin:5px 0;  float:right;  border:none;  padding:5px;  -moz-border-radius:6px;  -webkit-border-radius:6px;  font:bold 11px sans-serif;  }  .MBT-readmore:hover{  background:#FFB93C;  }  .MBT-readmore a {  color:#fff;  text-decoration:none;  }.MBT-readmore a:hover {  color:#fff;  text-decoration:none;  }

Розовая при наведении становиться красной

/*------------- Red + Dark Red------------*/.MBT-readmore{
background:#FE8080;
text-align:right;
cursor:pointer;
color:#FE8080;
margin:5px 0;
float:right;
border:2px solid #FE8080;
padding:5px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
font:bold 11px sans-serif;
}
.MBT-readmore:hover{
background:#FF0000;
font:bold 12px sans-serif;
color:#FF0000;border:2px solid #FF0000;
}
.MBT-readmore a {
color:#FFF;
text-decoration:none;
}.MBT-readmore a:hover {
color:#FFf;
text-decoration:none;
}

до наведения

после наведения

#FE8080 –светло красный и #FF0000 - красный – можете заменить на любой другой цвет который подходит вам по дизайну

Вот такое путешествие я проделала. Теперь даже у моих читателей, которые остаются верными виджету  linkwithin, смогут сделать на блоге Кнопку далее, которая при наведении курсора поменяет цвет.

Идея взята от сюда http://www.mybloggertricks.com/

Всем па-па

Пожалуйста не забывайте нажать