Thay đổi nút read more cho blogger ~ Tin tức_Phần mềm_Hình ảnh_Thủ thuật

Như mặc định thì thẻ read more trong blogspot thật là nhàm chán . Để thay thế cho nó một diện mạo như mình thích thì giờ đây hoàn toàn dễ dàng

Để bắt đầu với thủ thuât

1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn Chỉnh sửa HTML
4. Chọn Mở rộng tiện ích .
5. Tìm dòng code có dạng sau:

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

- Thay thế toàn bộ đoạn ở trên bằng:

<b:if cond='data:post.hasJumpLink'>
<a class='jump-link' expr:href='data:post.url + &quot;#more&quot;'>Đọc tiếp</a><b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<a class='jump-link' expr:href='data:post.url' rel='nofollow'>Đọc tiếp</a>
</b:if></b:if><div class='clear'/>

- Thay chữ Đọc tiếp thành chữ mà bạn muốn như: Đọc thêm bài viết, xem thêm,...
6. Tiếp theo, chèn đoạn CSS sau phía trên thẻ ]]></b:skin>

a.jump-link {color:red;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; }