(Tùy chỉnh các liên kết chuyển trang trong Blogger) Khi người dùng xem chi tiết một bài viết hay xem danh sách các bài viết của một chuyên mục nào đó thì sẽ để ý và click vào các liên kết đến trang trước/sau của bài viết. Khi người dùng click chuột vào các liên kết, Blog sẽ chuyển tới danh sách các bài viết trước đây hoặc bài viết tiếp theo của bạn hoặc trang chủ. Nhưng thông thường, mặc định các liên kết này là các liên kết thường đơn điệu. Vậy làm thế nào để thay thế những liên kết này bằng những hình ảnh sinh động?
Trước khi chỉnh sửa
Sau khi chỉnh sửa
Blog tin học sẽ hướng dẫn bạn tùy chỉnh các liên kết chuyển trang một cách nhanh nhất:
- B1: Đăng nhập vào Blogger.
- B2: Trong Menu Template (Mẫu) chọn Edit HTML (Chỉnh sửa HTML).
- B3: Sử dụng tổ hợp phím tắt Ctrl + F tìm thẻ <b:includable id=’nextprev’>.
<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>
</div>
<div class=’clear’/>
</b:includable>
1. Thêm hình ảnh bên cạnh văn bản liên kết
<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’>
<img src=”Đường dẫn Ảnh” /><br />
Trang trước
</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’>
<img src=”Đường dẫn Ảnh” /><br />
Trang sau
</a>
</span>
</b:if>
<a class=’home-link’ expr:href=’data:blog.homepageUrl’>
<img src=”Đường dẫn Ảnh” /><br />
Trang chủ
</a>
</div>
<div class=’clear’/>
</b:includable>
2. Thay thế các liên kết bằng hình ảnh
Nếu bạn muốn sử dụng hình ảnh thay cho các liên kết văn bản thì bạn thay thế các thẻ <data:olderPageTitle/> , <data:newerPageTitle/> và <data:homeMsg/> bằng các thẻ <img src=”Đường dẫn Ảnh”/>
<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’>
<img src=”Đường dẫn Ảnh”/>
</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’>
<img src=”Đường dẫn Ảnh”/>
</a>
</span>
</b:if>
<a class=’home-link’ expr:href=’data:blog.homepageUrl’>
<img src=”Đường dẫn Ảnh”/>
</a>
</div>
<div class=’clear’/>
</b:includable>
