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

(Thủ thuật Blogger)

- Khi người sử dụng xem chi tiết một bài viết hoặc vào xem danh sách các bài viết một chuyên mục nào đó, ở cuối Blog là các liên kết đến trang trước / sau của bài viết. Khi người truy cập kích chuột vào các liên kết, Blog sẽ tự động chuyển tới danh sách các bài viết trước đây của bạn hoặc bài tiếp theo hoặc trang chủ. Tuy nhiên mặc định các liên kết này chỉ là các liên kết thường, trông rất đơn điệu.Vậy có cách nào để thay thế những liên kết này bằng những hình ảnh trông đẹp và sinh động và chuyên nghiệp hơn không?

Trước khi chỉnh sửa

Sau khi chỉnh sửa

Hôm nay Kênh phần mềm việt sẽ hướng dẫn cách để thay đổi các liên kết đến trang trước, trang sau, trang chủ bằng những hình ảnh  tùy ý.

- B1: Đăng nhập vào Blogger
- B2: Chọn Menu Mẫu (Template)\Chỉnh sửa HTML (Edit HTML)
- B3: Ấn tổ hợp phím Ctrl + F và 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 + &quot;_blog-pager-newer-link&quot;' 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 + &quot;_blog-pager-older-link&quot;' 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>

Bây giờ chúng ta sẽ thay thế các dòng chữ màu đỏ bằng các nội dung hoặc hình ảnh 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êm thẻ <img src="Đường dẫn Ảnh"/> 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 + &quot;_blog-pager-newer-link&quot;' 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 + &quot;_blog-pager-older-link&quot;' 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 ta sẽ có kết quả như hình ảnh dưới

2. Thay thế các liên kết bằng hình ảnh
Nếu bạn không muốn liên kết văn bản xuất hiện mà chỉ muốn sử dụng hình ảnh, ta 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 + &quot;_blog-pager-newer-link&quot;' 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 + &quot;_blog-pager-older-link&quot;' 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>

Sau khi chỉnh sửa ta sẽ có kết quả như hình ảnh dưới

Tin học văn phòng