[ Yêu cầu ] : 1 style phân trang (Navigation page) khá đẹp mắt cho blogspot

Thứ Hai, 7 tháng 9, 2009

Theo yêu cầu của bạn Trần Tuấn (suckhoe24h.blogspot.com)

[FD's BlOg] - Trước kia mình có giới thiệu cho các bạn 1 thủ thuật tạo thanh phân trang cho blogspot, bài viết này cũng sử dụng cách tương tự để tạo thanh phân trang, nhưng chỉ khác ở giao diện hiển thị mà thôi.

Xem demo ở blog này : blogger-templates-designs.blogspot.com

Do bài viết này dùng thủ thuật tương tự như thủ thuật cũ mà mình đã đăng, vì thế các bạn có thể tham khảo thêm thủ thuật cũ ở đây nếu có gì không hiểu.

Hình ảnh minh họa :

☼ Để đơn giản các bạn hãy tạo 1 widget HTML/javascript (tốt nhất nên tạo widget nằm ở phía dưới phần main trong bố cục) và dán code bên dưới vào :
- Thực hiện với cách chèn tất cả code của thủ thuật vào 1 widget giúp ta dễ dàng tháo gỡ nó khi không còn dùng nữa. Ngoài ra nếu bạn không thích thực hiện theo cách này thì có thể chèn vào code template. Thực hiện với cách này bạn có thể tham khảo ở thủ thuật cũ.

<style type="text/css">
.showpageArea {padding: 10px; color:#003366;text-align:left;width:530px;
}
.showpageArea a {
float:left;
text-align:center;
display:block;
margin:0 5px;
color:#333;
}
.showpageArea a:hover {
color:#333;
margin:0 5px;
}
.showpageNum a { background: url('http://i410.photobucket.com/albums/pp181/JohnSmithamazon/Blogger-Templates-Free-Designs-XML-Tutorial/page_num.gif') no-repeat 0 0;
width:37px;
height:42px;
display:block;
text-align:center;
float:left;
margin:0 5px;
padding-top:6px;
text-decoration:none;
color:#333;
}
.showpageNum a:hover { background:url('http://i410.photobucket.com/albums/pp181/JohnSmithamazon/Blogger-Templates-Free-Designs-XML-Tutorial/page_num.gif') no-repeat 0 100%;
color:#FFF;
}
.showpagePoint {background:url('http://i410.photobucket.com/albums/pp181/JohnSmithamazon/Blogger-Templates-Free-Designs-XML-Tutorial/page_num.gif') no-repeat 0 100%;
width:37px;
height:42px;
display:block;
float:left;
text-align:center;
margin:0 5px;
padding-top:6px;
font-weight:bold;
color:#FFF;
}
.showpageNum a:link, .showpage a:link {
text-decoration:none;
color:#cc0000;
}
.showpageupPageWord a { float:left;
background:url('http://i410.photobucket.com/albums/pp181/JohnSmithamazon/Blogger-Templates-Free-Designs-XML-Tutorial/nextbutton.gif') no-repeat 0 0;
width:127px;
height:42px;
text-align:center;
font: bold 1.0em Arial,Helvetica,sans-serif;
display:block;
margin:0 5px;
padding-top:6px;
color:#333;
}
.showpageupPageWord a:hover { float:left;
background:url('http://i410.photobucket.com/albums/pp181/JohnSmithamazon/Blogger-Templates-Free-Designs-XML-Tutorial/provup.png') no-repeat 0 0;
width:127px;
height:42px;
text-align:center;
font: bold 1.0em Arial,Helvetica,sans-serif;
display:block;
margin:0 5px;
padding-top:6px;
color:#FFF;
}
.showpagedownPageWord a { float:left;
background:url('http://i410.photobucket.com/albums/pp181/JohnSmithamazon/Blogger-Templates-Free-Designs-XML-Tutorial/backbutton.gif') no-repeat 0 0;
width:127px;
height:42px;
text-align:center;
font: bold 1.0em Arial,Helvetica,sans-serif;
display:block;
margin:0 5px;
padding-top:6px;
color:#333;
}
.showpagedownPageWord a:hover { float:left;
background:url('http://i410.photobucket.com/albums/pp181/JohnSmithamazon/Blogger-Templates-Free-Designs-XML-Tutorial/nextup.png') no-repeat 0 0;
width:127px;
height:42px;
text-align:center;
font: bold 1.0em Arial,Helvetica,sans-serif;
display:block;
margin:0 5px;
padding-top:6px;
color:#FFF;
}

.pagenextprov {
text-align: center;
}
</style>





Link file : code-navigation.txt

- 1 chút chia sẻ : nên upload lại các ảnh có trong thủ thuật lên 1 host ảnh khác, để tránh trường hợp nhiều người dùng chung sẽ hết bandwidth. Dạo này photobucket hay gặp trường hợp hết bandwidth.

Chúc các bạn thành công.

Xem nhiều trong tuần

Giới thiệu về tôi

Tạp chí thời trang và làm đẹp

Lưu trữ Blog

[ Yêu cầu ] : 1 style phân trang (Navigation page) khá đẹp mắt cho blogspot

Comments[ 0 ]

Đăng nhận xét