Tạo nút chuyển bài trước bài sau cho blogspot

TẠO NÚT CHUYỂN BÀI TRƯỚC BÀI SAU CHO BLOGSPOT

Trong hướng dẫn này mình sẽ hướng dẫn bạn cách tùy biến button chuyển bài viết mới nhất hoặc bài đăng cũ hơn. Mặc định trong blogger nó sẽ là hai button : bài đăng cũ hơn và bài đăng mới hơn.

Mặc đinh với blogger: Dạng text, luôn ở cuối trang.

Sau khi tùy chỉnh: Dạng ảnh button, đặt tại đầu trang.

Bước 1:

Tùy chỉnh CSS để tạo button.

Bạn thêm CSS sau vào trước </head>

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#blog-pager {
text-align: center !important;
overflow: hidden !important;
width: 221px !important;
height: 40px !important;
line-height: 40px !important;
float: right !important;
}
#blog-pager-newer-link {
float: right !important;
padding-right: 20px !important;
}
#blog-pager-older-link {
float: right !important;
padding-right: 10px !important;
}
.home-link
{
display:none;
}
a#Blog1_blog-pager-newer-link
{
color: transparent;
background: url(https://lh4.googleusercontent.com/-rtohpV5h1o0/UYOs5gw8mSI/AAAAAAAAFIY/xSEhB_X3UFk/w181-h30/anh-link-nextback1.png) 2px 0px;
position: absolute;
height: 28px;
width: 93px;
left: 422px;
}
a#Blog1_blog-pager-older-link
{
color: transparent;
background: url(https://lh4.googleusercontent.com/-rtohpV5h1o0/UYOs5gw8mSI/AAAAAAAAFIY/xSEhB_X3UFk/w181-h30/anh-link-nextback1.png) 89px 0px;
height: 20px;
width: 75px;
padding: 4px 10px;
position: absolute;
left: 515px;
}
</style>
</b:if>

Thay link ảnh cho 2 button màu đỏ nếu bạn muốn thay đổi.

Bước 2:

Như vậy là đã tạo xong nút chuyển bài mới bài cũ.

Bước tiếp theo là đưa những nút này lên trước mỗi bài viết (mặc định ở cuối)

Bạn search với khóa : <b:includable id='main' var='top'>

Đặt ngay sau đó đoạn code này :

<b:if cond='data:blog.pageType == "item"'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'>
<data:newerPageTitle/>
</a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'>
<data:olderPageTitle/>
</a>
</span>
</b:if>
<a class='home-link' expr:href='data:blog.homepageUrl'>
<data:homeMsg/>
</a>
<b:if cond='data:mobileLinkUrl'>
<div class='blog-mobile-link'>
<a expr:href='data:mobileLinkUrl'>
<data:mobileLinkMsg/>
</a>
</div>
</b:if>
</div>
<div class='clear'/>
</b:if>

Ok. Vậy là đã xong. Chúc bạn thực hiện thành công các thao tác trong hướng dẫn này.

(Vui lòng ghi rõ nguồn Erhay khi bạn phát hành thông tin từ trang này)

Nguồn : chúng tôi sưu tầm từ nhiều nguồn

Thiết kế web chuyên nghiệp giá rẻ

Chúng tôi tuyên thiết kế web chuyên nghiệp đẳng cấp giá rẻ với 5 năm kinh nghiệm trong lĩnh vực thiết kế website nếu các bạn có nhu cầu có thể liên hệ Hotline: 0962 66 57 57 || Email: cmay.tt@gmail.com || website: cmay.vn

Chuyên trang chia sẻ kiến thức thiết kế web chuyên nghiệp

Tạo nút chuyển bài trước bài sau cho blogspot