Tìm hiểu cách thêm nút Readmore trong mẫu Blogger

Đặt tự động đọc thêm hoặc tiếp tục nút đọc trong bài đăng Blogger sẽ giúp trang trí trang chủ của bạn với tóm tắt bài đăng Blogger cho mỗi bài đăng với hình thu nhỏ và khán giả của bạn sẽ cảm thấy tốt hơn khi ở lại với blog của bạn.

THÊM NÚT TỰ ĐỘNG ĐỌC THÊM:
Để thêm nút nhảy hoặc tự động đọc thêm nút trong bài viết Blogger, hãy làm theo các bước dưới đây.
Bước 1: Chuyển đến Bảng điều khiển Blogger → Chủ đề → Chỉnh sửa HTML
Bước 2: Nhấp vào mã HTML và nhấn Ctrl+ Ftừ bàn phím và tìm kiếm <data:post.body/>

Bạn có thể tìm thấy điều này nhiều hơn một lần. Điểm dừng đầu tiên trong lần thứ hai. Nếu nó không hoạt động trong lần thứ hai sau khi hoàn thành các bước sau, thì hãy thử vào lần thứ ba.

Bước 3: Bây giờ thay thế đoạn mã trên bằng đoạn mã sau.
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>","<data:post.url/>","<data:post.title/>");</script>
 <span class='readmore' style='float:right;'><a expr:href='data:post.url'>Read More »</a></span></b:if></b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>

Bước 4: Bây giờ tìm kiếm </head>thẻ
Và thêm mã JavaScript sau ngay trước nó.
<script type='text/javascript'>posts_no_thumb_sum=400,posts_thumb_sum=300,img_thumb_height=120,img_thumb_width=160;</script>
<script type='text/javascript'>
function removeHtmlTag(t,e){if(-1!=t.indexOf("<")){for(var n=t.split("<"),i=0;i<n.length;i++)-1!=n

.length));t=n.join("")}for(e=e<t.length-1?e:t.length-2;" "!=t.charAt(e-1)&&-1!=t.indexOf(" ",e);)e++;return t=t.substring(0,e-1),t+"..."}
function createSummaryAndThumb(t,e,n){var i=document.getElementById(t),m="",r=i.getElementsByTagName("img"),s=posts_no_thumb_sum;r.length>=1&&(m='<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+e+'" title="'+n+'"><img src="'+r

.src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" /></a></span>',s=posts_thumb_sum);var g=m+"<div>"+removeHtmlTag(i.innerHTML,s)+"</div>";i.innerHTML=g}
</script>
Bước 5: Lưu mẫu của bạn.

TÙY CHỈNH NÚT ĐỌC THÊM: 
Để tùy chỉnh đọc thêm nút dán, sau đây đọc thêm nút CSS mã trước đó </head>và chỉnh sửa CSS của bạn như bạn muốn.

  <b:if cond='data:blog.pageType == "index"'>
    <style type='text/css'>
      .post-footer {display: none;}
      .post {margin-bottom: 10px; border-bottom: 1px dotted #E6E6E6; padding-bottom: 20px;}
      .readmore a {text-decoration: none; }
      .readmore a:hover{}
    </style>
</b:if>

Related Post:

• Tìm hiểu cách thêm nút Readmore trong mẫu Blogger