«Կարդալ ավելին» կոճակ Blogger-ի համար

Եթե հիշում եք մի քանի օր առաջ բլոգում տեղադրեցի նմանատիպ վերնագրով ևս մեկ նյութ: Այս նյութում խոսվում է այն մասին, թե ինչպես կարելի է «Read more» կամ նույն ինքը՝ «Կարդալ ավելին» կոճակ տեղադրել Blogger-ում նկարի միջոցով:

Ի տարբերություն անցած նյութի, այս նյութում խոսելու ենք այն մասին, թե ինչպես կարելի է փոխել «Read more» գրվածը առանց նկարի օգնությամբ:

Քայլ 1-Ավելացնում ենք Css կոդը: Մուտք են գործում Blogger-ի կառավարման էջ և կատարում ենք այս քայլերը՝ Design > Edit Html կամ (Шаблон › Изменить HTML>Расширить шаблоны виджета): Որից հետո գտնում ենք ներքևում նշավծ կոդը 

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

Քայլ 2- այս կոդը գտնելուց հետո, այն ամբողջությամբ փոխարինում ենք ներքևում տեղադրված կոդով:

<b:if cond='data:post.hasJumpLink'><a class='jump-link' expr:href='data:post.url + &quot;#more&quot;'>Կարդալ ավելին </a><b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<a class='jump-link' expr:href='data:post.url' rel='nofollow'>Կարդալ ավելին </a>
</b:if></b:if><div class='clear'/>

Քայլ 3- այս քայլում տեղադրում ենք CSS կոդը, այն տեղադրելու համար փնտրում ենք</b:skin> կոդը և նրա վերևում տեղադրում ենք ներքևում գրված կոդը:

a.jump-link {color:#fff;text-decoration:none}
.jump-link {
float:right;
padding:6px 12px;
margin:20px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
text-align: center;
display:inline-block; 
background: #f48423;
background: -moz-linear-gradient(top, #ffdf9e, #f5b026 5%, #f48423);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffd683), color-stop(.03, #f5b026), to(#f48423)); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f5b026', EndColorStr='#f48423'); /* IE6,IE7 only */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#f5b026', EndColorStr='#f48423')"; /* IE8 only */
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px; 
border:1px solid #e6791c;
border-bottom:1px solid #d86f15;
color:#FFF;
text-shadow: 0 1px 1px #6f3a02; }


.jump-link:hover {
background: #eb7d1d;
background: -moz-linear-gradient(top, #ffdf9e, #f1a91a 5%, #f07810);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffdf9e), color-stop(.03, #f1a91a), to(#f07810)); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f1a91a', EndColorStr='#f07810'); /* IE6,IE7 only */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#f1a91a', EndColorStr='#f07810')"; /* IE8 only */
border-bottom:1px solid #d86f15; }


.jump-link:focus {
padding:7px 13px;
color:#FFF;
text-shadow: 0 -1px 1px #894906;
border:none;
background: #e47412;
background: -moz-linear-gradient(top, #f07810, #f1a91a 95%, #f07810);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f07810), color-stop(.9, #f1a91a), to(#f07810)); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f07810', EndColorStr='#f1a91a'); /* IE6,IE7 only */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#f07810', EndColorStr='#f1a91a')"; /* IE8 only */
box-shadow: inset 0px 2px 5px #9b5901, 0 1px 0px #e0d5c7;
-webkit-box-shadow: inset 0px 2px 5px #9b5901, 0 1px 0px #e0d5c7;
-moz-box-shadow: inset 0px 2px 5px #9b5901, 0 1px 0px #e0d5c7; }

Ավելացնելուց հետո պահպանում ենք փոփոխությունները և տեսնում ենք արդյունքը:
*Կոճակի գույնը և չափսերը կարող եք փոփոխության ենթարկել: