Tùy chỉnh các liên kết chuyển trang trong Blogger

(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’>.

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

Công việc tiếp theo của bạn là thay thế các dòng chữ đậm, in nghiêng và gạch chân trên bằng các nội dung hoặc hình ảnh bạn mong muốn.

1. Thêm hình ảnh bên cạnh văn bản liên kết

Để đặt hình ảnh bên cạnh các liên kết văn bản thì bạn thêm thẻ <img src=”Đường dẫn Ảnh”/> vào trước hoặc sau các thẻ <data:olderPageTitle/>, <data:newerPageTitle/>, <data:homeMsg/>

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

Sau khi chỉnh sửa, bạn được kết quả như hình sau:

Tuy chinh cac lien ket chuyen trang trong Blogger

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

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

Kết quả sau khi bạn chỉnh sửa như hình bên dưới:

Bạn có thể tham khảo thêm các bài viết về thủ thuật Blogger để hoàn thiện Blog của mình như tích hợp Google Translate, thêm thanh điều hướng hay chèn banner flash cho Blogger, …