Создаём кнопку вместо ссылки "Читать далее.."

Создаём кнопку вместо ссылки "Читать далее..

Как можно сделать кнопку - "Читать далее.." Данная функция очень полезна для блога с большими статьями.


1. Зайдите в Дизайн ---> Изменить HTML

2. Поставьте галочку на "Расширить шаблоны виджета"

3. Далее с помощью поиска (Ctrl+F) вам надо будет найти эту строку в вашем шаблоне:

<data:post.jumpText/>


* Вот весь код:

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


4. Теперь, вы должны заменить найденные строки на эти:

<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>


5. Далее с помощью поиска (Ctrl+F) вам надо будет найти эту строку в вашем шаблоне:

]]></b:skin>


6. Перед ней поставьте этот код:

.a_demo_four a{color:#fff; text-decoration:none;}
.a_demo_four a:hover{color:#fff; text-decoration:none;}
.a_demo_four {
float:right;
background-color:#3bb3e0;
font-family: 'Open Sans', sans-serif;
font-size:12px;
font-family:candara;
text-decoration:none;
color:#fff;
position:relative;
padding:5px 10px;
padding-right:40px;
background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
background-image: -o-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
background-image: -moz-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
background-image: -ms-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(44,160,202)),
color-stop(1, rgb(62,184,229))
);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
-moz-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
-o-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
}

.a_demo_four:active {
top:3px;
background-image: linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
background-image: -o-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
background-image: -moz-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
background-image: -ms-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(62,184,229)),
color-stop(1, rgb(44,160,202))
);
-webkit-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
-moz-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
-o-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
}

.a_demo_four::before {
background-color:#2591b4;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3GuH3JK7idcLn8htSpvaF3r_qIlC2p3Aff-LjF98Dj9-MFfWXMY_0bbNEH7UhTuqJFcTmnf4DrYLvN2HFse91MqvhFX15U33YN9pXglpXASgEzS9pJ-VfNmzVOVgdjSfPStJAwOiVKjAU/s1600/right_arrow.png);
background-repeat:no-repeat;
background-position:center center;
content:"";
width:20px;
height:20px;
position:absolute;
right:15px;
top:50%;
margin-top:-9px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
-webkit-box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;
-moz-box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;
-o-box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;
box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;
}

.a_demo_four:active::before {
top:50%;
margin-top:-12px;
-webkit-box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px #1a80a6;
-moz-box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px #1a80a6;
-o-box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px #1a80a6;
box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px #1a80a6;
}7. Всё!