Hot!

Cách Tùy Biến Liên Kết Newer Post - Home - Older Post

Wednesday, 2 June 2010

Các mẫu Template Blogger mặc định xuất hiện 3 liên kết Newer Post – Home – Older Post xuất hiện dưới mỗi trang, nếu bạn sử dụng cài đặt tài  khoản Blogger bằng tiếng Việt thì tương ứng là 3 liên kết Bài đăng mới hơn – Trang chủ – Bài đăng cũ hơn.  Bạn có thể thay đổi 3 liên kết này bằng đoạn Text khác hoặc bằng hình ảnh để Blog trong khác biệt so với các mẫu Blogger khác mà bạn biết.

link (hình minh họa – nguồn Kang Rohman)

Cách thực hiện như sau:

1Truy cập vào Blogger:

- Truy cập vào Blogger Bảng điều khiển (Dashboard)  >> Bố cục (Layout)   >>  Chỉnh sửa HTML (Edit HTML)  >> Check vào ô chọn Mở Rộng Tiện Ích (Expand template widget)

2Tìm kiếm đoạn code để chỉnh sửa:

- Tìm (Ctrl – F) đoạn code sau:

<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>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>

3 Chỉnh sửa và tùy biến liên kết:

- Giờ đây bạn có thể tù liên kết trên bằng đoạn text khác hoặc bằng hình ảnh tùy ý bằng cách thay những đọan code màu đỏ trong đoạn code trên như sau:

1. Thay <data:newerPageTitle/>

bằng các từ bạn muốn như: Bài mới, Trang trước hoặc bằng hình ảnh thì hãy thay thế đoạn mã trên thành

<img alt='Next' border='0' src='link hình 1' title='Next'/>

2. Thay <data:olderPageTitle/>

bằng các từ bạn muốn như: Bài cũ, Trang sau  hoặc bằng hình ảnh thì hãy thay thế đoạn mã trên thành

<img alt='previous' border='0' src='link hình 2' title='previous'/>

3. Thay <data:homeMsg/>

bằng các từ bạn muốn hoặc bằng hình ảnh thì hãy thay thế đoạn mã trên thành

<img alt='home' border='0' src='link hình 3' title='home'/>

[Lưu ý link của hình ảnh phải gồm cả http://]

- Link hình ảnh bạn có thể search trên mạng,giống như hình minh họa trên.

- Lưu lại mẫu (Save template)

4Thay đổi lại vị trí của link liên kết:

- Thay đổi lại vị trí của Bài mới hơn , Bài cũ hơn (mặc định thì Bài cũ nằm bên phải còn Bài mới nằm bên trái . Nó có vẻ hơi ngược ngạo) theo hướng dẫn sau

Tìm đoạn code sau

#blog-pager-newer-link {
float: left;
}
#blog-pager-older-link {
float: right;
}

Rõ ràng ta thấy  phần Bài mới nằm bên trái (left), còn Bài cũ nằm bên phải (right). Ta chỉ cần đổi lại 2 vị trí đó như sau

#blog-pager-newer-link {
float: right;
}
#blog-pager-older-link {
float: left;
}

Vậy là xong rồi đó . Hãy kéo xuống bên dưới blog của mình để xem thử kết quả . 

HitCHÚC CÁC BẠN THÀNH CÔNG !!!

Tags: , ,

Ý kiến bạn đọc [ 6 ]


---Xzip--- 2 June 2010 06:57

Thủ thuật ,hình ảnh đẹp nhưng dù sao em vẫn thích cái phân trang của anh Võ hơn

Pavel 2 June 2010 08:06

Trước đây mình cũng dùng cái này nhưng bây giờ có cái pagination đẹp rồi nên bỏ qua.

chinhnd 2 June 2010 09:35

Đúng vậy, nhưng có nhiều người thích... cái cũ.

Cám ơn bạn nhiều lắm, mình làm được rồi !

GiaRo 25 November 2011 19:35

Các bài viết đều rất hay ! Tôi xin cảm ơn bạn nhiều lắm , vì đả học được rất nhiều ở trang của bạn. Cho tôi được hỏi có cách nào làm cho dòng Post - Home - Older Post , xích lại gần phần đáy của khung Comment nầy không ? tôi thấy giửa 2 phần nầy có cách khoảng xa quá nó không đẹp (theo ý cá nhân)nếu được bạn chỉ giúp cho tôi cách làm nha ! Xin cảm ơn bạn một lần nửa. GR

Tran Duy Thinh 10 April 2012 20:31

thank

Ý kiến của bạn