Trang chủ \5.5.13

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXloSjcpI5KQHwTrX21ylweeRMrCC3u6eKaAbTNvSzCa3uqc2Gl8iQm7AegWYzNacJdY37KyPYwKXHV7Y9_zpmn-7SMHjtApMn_Q5v0rwmxb6FqSpyekOcmherl7DnQ44Ze-QIzZvOZ3U/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.

Hướng dẫn thủ thuật Blogger, Blogspot

64

Nhận xét
Nặc danh 5/5/13 08:26
1

This is...AWESOME, Bro!

Reply Xóa nhận xét
3

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

Reply Xóa nhận xét
5

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

Reply Xóa nhận xét
Nặc danh 6/5/13 13:54
6

nice........

Reply Xóa nhận xét
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 Xóa nhận xét
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 Xóa nhận xét
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 Xóa nhận xét
10

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

Reply Xóa nhận xét
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 Xóa nhận xét
12

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

Reply Xóa nhận xét
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 Xóa nhận xét
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 Xóa nhận xét
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 Xóa nhận xét
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 Xóa nhận xét
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 Xóa nhận xét
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.

Xóa nhận xét
19

Is there any way to make it float vertically?

Reply Xóa nhận xét
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 Xóa nhận xét
21

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

Reply Xóa nhận xét
22

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

Reply Xóa nhận xét
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 Xóa nhận xét
Nặc danh 19/5/13 09:38
24

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

Reply Xóa nhận xét
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 Xóa nhận xét
28

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

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

Reply Xóa nhận xét
29

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

Reply Xóa nhận xét
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 Xóa nhận xét
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 Xóa nhận xét
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 Xóa nhận xét
33

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

Reply Xóa nhận xét
34

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

Reply Xóa nhận xét
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 Xóa nhận xét
Nặc danh 11/7/13 20:31
37

nhin giong thanh nghe nhac nhi

Reply Xóa nhận xét
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 Xóa nhận xét
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 Xóa nhận xét
40

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

Reply Xóa nhận xét
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 Xóa nhận xét
Nặc danh 11/8/13 13:09
43

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

Reply Xóa nhận xét
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 Xóa nhận xét
46

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

Reply Xóa nhận xét
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 Xóa nhận xét
48

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

Reply Xóa nhận xét
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 Xóa nhận xét
50

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

Reply Xóa nhận xét
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 Xóa nhận xét
Nặc danh 9/11/13 16:14
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 Xóa nhận xét
56

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

Reply Xóa nhận xét
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 Xóa nhận xét
54

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

Reply Xóa nhận xét
57

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

Reply Xóa nhận xét
59

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

Reply Xóa nhận xét
61

wow KEREN gan ... thanks ya,. hihi

Reply Xóa nhận xét
62

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

Reply Xóa nhận xét
63

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

Reply Xóa nhận xét
Nặc danh 20/11/14 11:02
64

Hi Nice post !

Reply Xóa nhận xét

Đăng nhận xét

Cancel