Kênh Tên Miền chuyên cung cấp tên miền đẹp, giá rẻ! Hãy liên hệ kỹ thuật: 0914205579 - Kinh doanh: 0912191357 để được tư vấn, hướng dẫn miễn phí, Cảm ơn quý khách đã ủng hộ trong thời gian qua!
kiem tien, kiem tien online, kiem tien truc tuyen, kiem tien tren mang
Sunday, April 24, 2016

Ở phần trang Hom Page của mình trước đây đã được rút gọn bài viết có ảnh Thumnal và vài hàng đầu của bài viết. Một số Blog trước đây, mình vẫn thường gặp tình trạng nầy. Để bổ túc một nút Read More (Đọc tiếp) đẹp như ý, mình tìm được một thủ thuật như sau: (Tất nhiên là Source Code phải chép lại toàn bộ, chẳng hề thay đổi).

Đăng nhập vào phần dashboard >> thiết kế >> chỉnh sửa HTML >> đánh dấu chọn mở rộng mẫu tiện ích. Tìm dòng sau:

Code:


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


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



Tiếp theo, chèn đoạn CSS sau phía trên thẻ </b:skin>
Code:


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: #3d85c6;

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




Save template lại và xem kết quả. Bạn dễ dàng nhận ra là thủ thuật này không dùng bất cứ image nào nhằm tăng tốc độ tải trang web, ngoài ra thì các blog đang sử dụng Auto-readmore script cũng hoàn toàn có thể  áp dụng code này.

Xem Demo:
click to begin
Show HomPage

Tin học, vừa học vừa làm, vừa vọc

0 comments:

Post a Comment

Popular Posts