Trang chủ \ 02:55

Thanh điều khiển cuộn trang cho blog

scrollingTrong quá trình duyệt web hẳn mọi người thường dùng chuột giữa để cuộn trang, hoặc có ai như mình cài Synaptics Touchpad để cuộn trang theo kiểu xoắn ốc rất tiện dụng? Tuy nhiên 4 phím chức năng: Home, Page Up, Page DownEnd sẽ giúp ngón tay bớt thao tác hơn, nhất là khi đọc những đoạn văn dài. Mình sẽ hướng dẫn các bạn mang 4 chức năng này vào blog và được điều khiển bằng bấm chuột, ngoài ra còn có thêm chức năng cuộn trang tự động rất tiện dụng cho khách đọc ở blog chuyên về truyện.

Demo ở góc dưới bên phải và chỉ ở bài viết này.

Thêm đoạn mã dưới đây vào trước thẻ </body> trong template của bạn.
<style>
#dp-scroll{position:fixed;z-index:9999;bottom:0;right:0}
#dp-scroll a{display:block;float:left;background-color:#5cd4f5;background-image:url(http://lh5.ggpht.com/-wREw7V6WEsg/UYQq0-d5cWI/AAAAAAAABsI/vnH-wGlJp6s/s216/scroll.png);width:36px;height:36px;text-indent:-999em}
#dp-scroll a.dp-up{background-position:0 -36px}
#dp-scroll a.dp-down{background-position:0 -72px}
#dp-scroll a.dp-bottom{background-position:0 -108px}
#dp-scroll a.dp-scroll{background-position:0 -144px}
#dp-scroll a.dp-stop{background-position:0 -180px}
#dp-scroll a:hover{background-color:#5cbbf5}
</style>
<script>
function autoScroll(){window.scrollBy(0,1);scrolldelay=setTimeout('autoScroll()',50)}
function stopScroll(){clearTimeout(scrolldelay)}
</script>  
<div id='dp-scroll'>
<a class='dp-top' href='javascript:window.scrollTo(0,0);' rel='nofollow' title='To Top'>To Top</a>
<a class='dp-up' href='javascript:window.scrollBy(0,-window.innerHeight);' rel='nofollow' title='Page Up'>Page Up</a>
<a class='dp-down' href='javascript:window.scrollBy(0,window.innerHeight);' rel='nofollow' title='Page Down'>Page Down</a>
<a class='dp-bottom' href='javascript:window.scrollTo(0,999999);' rel='nofollow' title='To Bottom'>To Bottom</a>
<a class='dp-scroll' href='javascript:autoScroll();' rel='nofollow' title='Auto Scroll'>Auto Scroll</a>
<a class='dp-stop' href='javascript:stopScroll();' rel='nofollow' title='Stop Scroll'>Stop Scroll</a>
</div>

Tăng hoặc giảm giá trị 50 để giảm hoặc tăng tốc độ tự động cuộn trang.
Chia sẻ Phần mềm và Tài liệu cho người dùng Windows, Ubuntu. Hướng dẫn Thủ thuật cho người dùng Blogger, Blogspot.

Chia sẻ

64

Nhận xét
1

This is...AWESOME, Bro!

Reply
4

yeah Good

Reply
2

Tem ^^ để test =))

Reply
3

Lại bài mới, hoan hô bác :D

Reply
5

Được đó bác. có điều hình ko được đẹp và nét

Reply
6

nice........

Reply
7

1 bài hay nhưng Cái này chắc ít ai dùng và ko cần thiết cho blog lắm

Reply
8

đẹp quá. cái này rất hữ ích.
cho mình hỏi cái. tại sao cái template của mỉnh #main, # sidebar, # footer nó lại nằm thẳng hàng thế nhỉ?
thanks
http://1.bp.blogspot.com/-bu52cjHh0ow/UYipucYrGFI/AAAAAAAAJgw/a14ubHEwveY/s1600/blogger.jpg

Reply
9

Blog bạn là bloggersviet.blogspot.com phải không. Ở giao diện chỉnh sửa widget sử dụng css từ thẻ b:skin, bạn không đặt css trong thẻ này nên giao diện chỉnh sửa không có css nó mới như vậy.

p/s: thiết kế responsive cần thẻ <meta content='width=device-width' name='viewport'/> để hiển thị đúng kích thước trên thiết bị di động.

Reply
10

thanks Duy
chúc một ngày tốt lành

Reply
11

anh oi cho em hoi van ko liên quan tí nha, những ngày gần đây blogspot sữ dụng tên miền riêng thì rất khó vào, lúc dc lúc không, khi chuyen sang tên miền mặc dịnh của blospot thì vào thoải mái. làm sao để khắc phục vấn đề này đây anh? Em thấy blog anh vào lúc nào cũng ok cả.

Reply
12

Bạn xem bài này http://blog.nguoiaolam.net/2013/01/huong-dan-cach-tro-ten-mien-blogger.html

Reply
13

Chào duypham
Mình không biết hỏi ở phần nào vậy mong bạn chỉ giúp mình câu hỏi sau nhé
Khi viewsource của blog.duypham.info
Thì được như hình này
https://www.dropbox.com/s/ddtp6ufv75tgjwq/duy-pham.JPG
mình thấy bạn có thể comment phần javacrpit cuối phần footer như bức ảnh đó
Bạn có thể chỉ mình cách comment tất cả những thứ liên quan ở dưới footer blog
như thế này
https://www.dropbox.com/s/rigwcj7m428jul2/Capture.JPG

Và khi mình validator blog của mình thì xuất hiện 4 lõi này bạn có thể chỉ mình cách để khắc phục

https://www.dropbox.com/s/ve07uxtoyj6owej/validetion.JPG

Cảm ơn bạn nhiều

Reply
14

Khi loại bỏ js cuối blog sẽ ảnh hưởng tới 1 vài widget do Blogger cung cấp: lượt truy cập, nguồn cung cấp, avatar của hệ thống comment cũ...

Mình có viết js riêng để có thể sử dụng những tính năng đó nhưng k phải tất cả, vì 1 số widget mình k dùng nên chưa thử xem loại bỏ js có ảnh hưởng đến k. Để sử dụng những tính năng widget Blogger cung cấp bạn k nên loại bỏ js đó.

3 lỗi đầu của blog bạn là sử dụng những thuộc tính k "chuẩn" theo W3C: MSSmartTagsPreventParsing, service.post và publisher.
Lỗi thứ 4 là URL của href không được chứa ký tự & mà phải đổi thành &amp;

Reply
15

Cảm ơn admin nhiều.
4 cái lỗi validation
MSSmartTagsPreventParsing, service.post và publisher.
Trong code mình không có nó tự sinh ra, vậy có cách nào khắc phục không admin?
Hoặc là cho nó vào comment

Reply
16

Bạn có thể bỏ thẻ <b:include data='blog' name='all-head-content'/>

Xem thêm bài này http://blog.duypham.info/2010/10/all-in-one-seo-pack-cho-blogspot.html để có tag dics và key

thêm code dưới đây để có tag canonical và favicon
<link expr:href='data:blog.canonicalUrl' rel='canonical'/>
<link href='/favicon.ico' rel='icon' type='image/x-icon'/>


Trong temp bạn có url này http://247online.us6.list-manage.com/subscribe/post?u=a26eff8db3&id=073bb24ddc
Bạn cần phải sửa thành http://247online.us6.list-manage.com/subscribe/post?u=a26eff8db3&amp;amp;id=073bb24ddc

&amp;amp; khi Blogger xuất ra HTML sẽ thành &amp; -> k còn báo lỗi từ w3c.

Reply
17

Rất chân thành cảm ơn sự trả lời nhiệt tình của admin và học rất nhiều điều từ bạn
Trả lời thắc mắc nhanh như vậy làm mình rất thích quay lại blog của bạn nhiều
Một câu hỏi nữa trong code của mình đã cố tình đặt là như vậy
<html lang='vi'>
Nhưng sau khi lưu thì blogspot lại tự động thêm như thế này
<html lang='vi' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

và khi validtion lại xuất hiện báo lỗi do thẻ head này
có cách nào khắc phục để khi lưu nó không thêm vào code như vậy nữa không?
Cảm ơn nhiều

Reply
18

Bạn xóa những đoạn thừa đó đi và lưu lại là được. Đoạn đó là Blogger tự động thêm vào, lần sau vào chỉnh sửa HTML bạn sẽ thấy đoạn code đó lại được thêm, nếu bạn có chỉnh sửa gì trong temp thì lại quay lại đoạn đó và xóa đi đoạn code thừa đó tiếp.

19

Is there any way to make it float vertically?

Reply
20

You use this css code:
<style>
#dp-scroll{position:fixed;z-index:9999;top:20%;right:0}
#dp-scroll a{display:block;background-color:#5cd4f5;background-image:url(http://lh5.ggpht.com/-wREw7V6WEsg/UYQq0-d5cWI/AAAAAAAABsI/vnH-wGlJp6s/s216/scroll.png);width:36px;height:36px;text-indent:-999em}
#dp-scroll a.dp-up{background-position:0 -36px}
#dp-scroll a.dp-down{background-position:0 -72px}
#dp-scroll a.dp-bottom{background-position:0 -108px}
#dp-scroll a.dp-scroll{background-position:0 -144px}
#dp-scroll a.dp-stop{background-position:0 -180px}
#dp-scroll a:hover{background-color:#5cbbf5}
</style>

Reply
21

Code này hay.mình đang cần..thanks iu very nhiều nhiều

Reply
22

cái này dùng cho cả blogport được vậy bạn ơi

Reply
23

Chào admin
Mình có blogspot http://khamphablog.blogspot.com/ mình muốn làm bạn bè với blog của bạn có được không?

Reply
Nặc danh 19/5/13 09:38
24

Một ứng dụng của Xenforo hả anh :)

Reply
25

ngoài lề một chúc: Duy cho mình hỏi là làm thế nào để ẩn số lượng nhận xét như ở trang tĩnh này: http://www.hanhhuong.info/p/contact.html vậy bạn? hình như có lần mình hỏi rồi nhưng ko nhớ là hỏi ở bài viết nào!... mong cậu chỉ tớ với

Reply
26

hay quá nhỉ :D

Reply
28

Awesome brother..I love the new read more hack..

Thnx for providing this
What You don't know about Alexa

Reply
29

Mình muốn nằm Center vậy làm sao Add

Reply
30

DP cho mình hỏi có tiện ích nào đếm số lượt "phản ứng" bài đăng kô nhỉ?

Reply
Nặc danh 7/6/13 16:24
31

âynh viết 1 bài về seo cho anh em blogger tham khảo đi!!

Reply
32

Chào bạn, mình muốn hỏi về cách để load trang web frame bằng Java. Mình từng nhớ bạn có code này
Mình muốn trang web của mình load qua trang cua người khác giống derect của sinhvienit nhưng sử dụng Java thì làm sao ?
Vi dụ mình muốn link sẻ như thế này
www.domain.com/url=www.domain.net
Với www.domain.net là domain bất kỳ ki mình nhập vào link trên sẻ vẫn chạy frame đó?
Vidu như thế này ( vẩn ở trang của mình nhưng hiển thị trang của người khác )
http://sinhvienit.net/forum/url/?www.domain.com

Reply
33

Liệu có ảnh hưởng gì nhiều đến tốc độ load không admin oiw?

Reply
34

Download template tin tức đẹp :
http://199.91.153.101/gkvrk7qgbuog/ccj41alswczl8ku/webxinhdep.blogspot.com.xml

Reply
35

Không thấy bạn chia sẻ code tiện ích Nhận xét nhiều nhất trong tuần nhỉ

Reply
37

nhin giong thanh nghe nhac nhi

Reply
38

Chào bác
Mình có vấn đề là mình thấy đánh giá hình sao rating của blog khá hay bác xem có tích hợp được vào html thuần của 1 site bất kỳ không
ví dụ
http://khamphablog.blogspot.com/2013/07/mot-so-cong-cu-tool-seo-can-thiet.html

Reply
39

Bạn cho hỏi ngoài lề tí. view source blog này thì thấy cuối blog có 1 đoạn code dài đặt trong chú thích có ý nghĩa gì vậy. và không tìm thấy javascript dc khai trong thẻ head vậy cái rate comment của các bài post ở trang chủ sao chạy dc. tìm tới tìm lui mà ko thấy js xử lý cái đó.

Reply
40

Mình làm không thấy kết quả
Blog mình: http://anhdep3.blogspot.com

Reply
41

Nhận xét này đã bị quản trị viên blog xóa.

Reply
42

ôi đời nó thế !!! ^^^ quăng link lên giả vờ k làm dc này nọ mới ghê chứ.

Reply
43

Em có gửi liên hệ cho anh rồi đấy anh duy ơi, anh tl giúp em với

Reply
45

Trang của Duy Phạm bài viết chưa nhiều nhưng cực kỳ chất lượng. Nhưng sao mình thấy bạn có vẻ không tập trung lắm vào việc viết bài nhỉ ?...

Reply
46

Chôm đoạn code này về mày mò thử mới được, cám ơn bạn duypham nhé :)

Reply
47

Bác có thể chỉ cho mình cách lấy giá trị tiền như blogspot này dduocj không
http://johny-blackstore.blogspot.com/

Reply
48

Bác Duy sao lâu quá không post bài mới nhẩy. Mong quá :)

Reply
49


Lâu nay đói quá bác ạ, xây dựng mấy năm nay k có tiền. K có thực nên k vực dc đạo đâm lười viết bài :((

Reply
50

Bán template như pác Tiến đê. Bộn xiền á, lại vui nữa :D

Reply
52

Dạo này dường như Blogger không còn nhộn nhịp như trước nhỉ, thủ thuật ra mắt càng ngày càng ít đi, các cao thủ thì cũng ngày một vắng bóng.

Reply
55

Với traffic hiện tại của blog bác muốn kiếm chút tiền đâu có khó.

Reply
56

Bác ấy giàu lắm, ko cần tiền bán quảng cáo đâu bạn.

Reply
51

Nhận xét này đã bị quản trị viên blog xóa.

Reply
53

Thủ thuật này hay quá.

Reply
54

Lâu rồi ko thấy bác ra bài viết mới nhỉ ^^

Reply
57

blogger dạo ni vắng vẻ quá đi!...

Reply
59

Trang tin tức - giải trí - thủ thuật tổng hợp
http://www.viettin365.com/

Reply
60

Thanks Duypham..

Reply
61

wow KEREN gan ... thanks ya,. hihi

Reply
62

cảm ơn bạn mình đã thử web http://www.tpcnvision.net/ rất ok, thank bạn nhé

Reply
63

cảm ơn bạn mình đã thử web http://www.tpcnvision.net/ rất ok, thank bạn nhé

Reply
64

Hi Nice post !

Reply

Đăng nhận xét

Cancel reply

• Những nhận xét spam sẽ bị xóa.
• Public tài khoản Blogger để được trợ giúp.
• Nặc danh thường không được chào đón.