Loading post navigation ...
 
 

Pro page

53
Nhận xét

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

| by Phan Dũng | views

Hãy nhấn thanks để ủng hộ tác giả

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

<!--Code CSS-->
<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>

<!-- code chính -->

<!-- Do chèn code chính vào bài viết nó có tác động, nên gây ra 1 chút rắc rối, vì thế mình đính kèm bằng file text, các bạn download file này về và chèn nó vào ngay sau vị trí này -->

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.


Enter your mail address:

53

duy782006

Hay qúa mình là người rất ngán dùng các thủ thuật có chỉnh sửa trong tem nên rất thích cái phân trang mà lâu nay không dùng nay có cái này dùng HTML/javascript thì quá đúng ý lại còn cò thể sửa mấy cái ảnh cho phù hợp với trang của mình nửa. Cám ơn bạn.
À sẳn mình hòi ngoìa lề tí: bạn chỉ mình cách lấy danh sácg các nhản của blog của mình bằng HTML/javascript với!

Phan Dũng

Lấy các nhãn của blog bằng javascript hả bạn??? mà sao bạn ko dùng cái của blogger cung cấp, dùng nó nhẹ hơn nhiều

min HMN

cha...em gap tu lau roi nhung chua co code....cam on anh da chia se...
nhung em chen roi` no' van chua hien len.
co phai xoa cai dem trang cu cua bac anhvo khong nhi?

Phan Dũng

@min HMN : có chứ

duy782006

Do blog mình trang trí bằng các đoạn html không hà. Dùng cái của cung cấp sẳn thì nó đi theo cái tem hiện hnàh mình không thích!

EragonPump

fandung oi sao chen hoai ko duoc ky qua

LAMBANVOI-PC

BLOG CỦA DŨNG RẤT HỮU ÍCH VỚI NHỮNG NGƯỜI MỚI LÀM BLOG NHƯ TÔI ,CẢM ƠN ĐÃ CHIA SẼ

fandung

cám ơn bạn LAMBANVOI-PC đã ủng hộ

anh3ngơ

Rất hợp với Fandung.

Fan dung = màu cam

Màu cam = hợp với phan dung

superman_alone

chào anh fan dũng.chúc anh mạnh khỏe !
anh ở em lập blog cho lớp nhưng bây giờ bọn em post bài mới cũng bị ẩn đi và không hiện chỗ cho chúng em comment nữa!
anh giúp em nhé!
http://02it.blogspot.com/
ký tên:lê nguyễn nhật long

fandung

@superman_alone : trước tiên về phần comment. Mình comment được mà, có hơi phức tạp 1 chút là vừa có xác minh từ rồi lại còn kiểm duyệt nữa. Nếu đã xài kiểm duyệt comment thì không cần dùng từ xác minh.

Còn về phần bài viết bị ẩn : bạn hãy gửi code nguyên mẫu của template đang xài cho mình, như thế mình mới trả lời chính xác được.

Khách (ẩn danh)
Khách (ẩn danh)
Khách (ẩn danh)
anh3ngơ

Trời!!! :)]

Dũng em đâu rồi, xoá ngay mấy cái comment trên đi, mấy cái comment này vô VH quá.

Đéo nặc danh

Điz mẹ cái thằng nặc danh kia nó bị thiểu năng trí tuệ con mẹ nó rồi.

Mấy trăm con người, ai cũng hiểu, mỗi mình mày đéo hiểu, còn há mồm kêu ca gì.

Nhưng cũng khá khen cho mày có tinh thần ko giấu dốt.

sexy darling asia

anh Dũng nên bật chức năng kiểm duyệt cmt hok chí ít cũng nên để mã xác nhận... chứ như thế nầy bọn lợn nó vào cmt vớ vẩn

fandung

có 1 ngày ko vô mà lại có mấy người "vô học" vào quậy phá.

Thôi thì cũng tập làm quen thôi.

Khách (ẩn danh)
Khánh Trắng

Mấy người này kì quá! Ở đây là góc dành cho những người yên CNTT, là nơi trao đổi chia sẽ những thủ thuật blog mà chứ đâu phải là nơi dành cho giang hồ hay khủng bố vào đây đấm đá đâu?!
Nếu bạn muốn phê bình thì cũng phải bíết phê bình một cách chân chính, như thế mới cùng nhau xây dựng và phát triển chứ!
Ghen ăn tức ở như thế thì làm sao mà khá nổi?
Mà thôi, cuộc sống nhiều khi cũng cần có những con người như vậy! FD đừng buồn làm gì.
Hãy thay vào nỗi bực tức đó bằng những thủ thuật hay cho mọi người nhé FD!

Khánh Trắng

Nào Khánh Trắng và các bạn, chúng ta hãy nắm chặt tay nhau và cùng nhau ủng hộ FD hết mình nhé!

Ongchoichiu

Rất tán thành còm của bạn Khánh Trắng.
"Ai chưa qua chưa phải là người!". Ai chửi bậy người đó dơ miệng, dù sao cũng thật khó chịu phải không FD. Hãy biến "Đau thương thành hành động cách mạng!" là lá la...

fandung

đúng là xã hội!!!...
Phải có người này , người kia chứ :D, không có cái xã hội nào mà chỉ toàn người tốt, người có hiểu biết.

Cám ơn Khánh Trắng & Ongchoichiu đã ủng hộ mình. Mình cũng đã gần quen với việc này rồi, nếu họ cứ comment phá mình thì mình cứ làm ngơ và del thôi :D.

Thiệt tình mình cũng ko hiểu sao nữa, mình làm mấy cái này đâu phải để thu lợi nhuận hay gì đâu, nếu phục vụ cho người khác vì tiền mà có sai sót thì sẵn sàng lắng nghe bức xúc của họ. Còn ở đây đâu phải vậy!!!
Mình cũng đâu phải ở không để ngồi chỉ 1 cách tỉ mỉ từng thủ thuật là phải làm cái này, làm cái kia đâu. Mà lại có người than phiền là khó hiểu, không hiểu. Không hiểu rõ thì phải tự tìm hiểu thêm đi chứ, có đâu mà lại có thái độ như thế nhỉ. Với lại mình thấy các thủ thuật mình hướng dẫn cũng khá rõ rành, đa số đều có hình minh họa và demo.

Khánh Trắng

Bởi vậy mà cố nhân đã từng răn chúng ta rằng "Không cần phải độc ác, vì lương thiện thôi cũng có người ghét ta rồi". Thôi hơi đâu mà buồn phiền với những người đó làm gì! "Forget it!"

duy782006

Theo mình khi gặp những cm như này các bạn khác không cần ý kiến gì. Khi chủ nhà đọc thấy sẽ tự xóa chúng đi và không còn dấu vết gì nửa. Khi chúng ta chưởi người khác bằng từ ngữ không đẹp thì cũng làm xấy cái topic của chủ nhà vậy!

Đây không phải mình có thái độ bàng quang hay ba phải mà theo mình đó là cách ứng xử hay nhất trên thế giới ảo.

Viet's Beauties

Hi Mr. Dung,

Blog cua anh thiet la huu ich cho nhung ai chua biet nhieu ve thiet ke Blog. Nho nhung bai viet tren fandung.com ma minh cung thiet ke duoc 1 trang blog rieng. Neu ranh anh vao xem qua va cho y kien nghen. Dia chi blog: www.vietbeauties.info

www.duyanhBlog.com

Bài viết hay quá, Mình dùng WG cho dễ :D

World sex Photos

tớ chèn vào widget rồi mà sao ko thấy hiển thị vậy bạn?

Phan Dũng

@World sex Photos : nếu bạn đang dùng cái phân trang khác thì gỡ nó trước rồi cài cái này vào.

Thứ 2, nếu blog bạn trước kia có dùng thủ thuật ẩn link liên kết bài viết cũ hơn, bài viết mới hơn thì khôi phục lại như cũ.

Có 2 lý do đó thôi, còn ngoài ra thì mình ko rõ lắm.

CHoiBlog.TK

Em muốn làm như hướng dẫn của anh cho trang danh sách trang cho blog của em, em cũng làm như vậy nhưng không hiệu lực ! anh giúp em 1 tay với ! nick chat em: history_love7 !

Mr.Dung

kết nhất cái layout của Anh DŨng, không biết anh có share cho anh em được không vậy. Chân thành cảm ơn FD Blog

tmtvietnam

Dũng à,
Mình thử làm thủ thuật này của Dũng nhưng nó không hiện lên được. Chẳng hiểu tại sao nhỉ???
http://ketoantaichinhvietnam.blogspot.com

Fang-Bua

ko hien thi dc FD oi !

Lại Thế Dũng

ko hien dc D oi

hoàng anh vũ

ko hiện được dũng ơi. xin chỉ giáo với

Khách (ẩn danh)

e chèn vào nhưng ko hiển thị đc a FD ơi! check lại giùm e cái !

chilli

hay quá, cảm ơn anh!

huynhtanngoc

chao a em muon tao cai khumg trong bloger cua em gion nhu cai binh luan nay em binh luan cho anh vay em lma sao chi giup nha


http://zinglove.blogspot.com/

soft4tb

;;)

ShareVn

ơ sao mình không chèn witged vào đc :(
hướng dẫn mình cách chèn với mình mới dùng
chưa thạo lắm

Pham Anh

http://phamanhbp.blogspot.com/
mình đã làm cái phân trang như bạn chỉ, nhưng sao ko thấy nó hiện ra vậy! xin giải thích giúp. Cảm ơn

HN Movies

Vẫn không hiển thị.Thử NGhiệm trên Template khác vẫn không được.
FD Kiểm tra lại code hộ mình cái.

Hồ Vũ Tuấn Anh

Quá tệ!!! Vô tác dụng thì đăng lên làm gì cho mất thời gian người đọc

Christy

code này làm hoài mà ko hiển thị, huhu, a Dũng ơi, check lại code dùm mọi ng với :((

Độc chiêu Blog

Bác ơi, trong temp của em nó có sẵn tiện ích phân trang rồi, giờ muốn bỏ nó để thêm cái của bác thì làm thế nào nhỉ

Khách (ẩn danh)

=))

ninano

Cám ơn anh Dũng! Nhờ a mà e thỏa được cái blog mà em mong ước bấy lâu nay! A ghé thăm và cho e mấy nhận xét nhé! Hoan nghênh a đến thăm nhà!
http://vanminhthegioi.blogspot.com/

Admin

sao mãi mà FD không chỉnh lại cái này nhỉ đợi lâu lắm rồi cũng có cơ số ý kiến hồi đáp rồi ,thấy cái này rất hay nhưng làm hoài không được

ĐỖ ĐÌNH DŨNG

em thấy thủ thuật này rất hay nhưng em áp dụng mà nó không lên,rất mong anh giúp đỡ

Hoàng Nguyên Luật 1x1

Tải cái đó về k đk
Chắc tại máy bị sao đó
Sao anh k chèn luôn vô cho dễ

Võ Văn Tùng

anh Dũng ơi,em tạo phân trang cho trang chủ mà tạo ko được ko biết tại giao diện hay bị gì nữa, anh có thể vào xem Blog của em: vovantung.tk và hướng dẫn cho em được ko anh, cám ơn anh nhiều

anh ơi em làm ko được
em dán nó vô javacrip rồi mà trên blog có thấy gì đâu

howtoeasiest.com

Demo : Howtoeasiest.com



☺ Các bạn có thể viết lời bình của mình cho bài viết, và tuân thủ một số quy tắc sau:
» Các bài comment phải nghiêm túc, không dung tục, không spam.
» Nội dung phải liên quan tới chủ đề bài viết.
» Có thể sử dụng thẻ trích dẫn [quote], cấu trúc thẻ như bên dưới :

[quote=AUTHOR name=fdquote]NỘI DUNG[/quote]

» Có thể sử dụng các thẻ <b>,<i>,<a>.


BlOg FD chính thức đóng comment của khách ẩn danh.

BlOg FD.

[▼/▲] More Emoticons
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Newer Posts Older Posts Home