Xin chào các độc giả của Namkna!
Mình mới gia nhập nhóm cộng tác viên của blog này. Vì là thành viên mới nên chắc còn nhiều thiếu sót về cách thức trình bày cũng như nội dung bài viết, vì vậy mong các bạn góp ý nhiệt tình nha! Và bài viết đầu tiên mình chia sẻ đến các bạn đó là làm cách nào để thêm hiệu ứng Loading khi chuyển trang cho blogger
Có rất nhiều blog đã chia sẻ thủ thuật này nhưng chủ yếu hiệu ứng họ đưa ra là 1 hình ảnh hoặc đoạn text đơn giản "Loading...". Đây cũng chính là sự khác biệt hơn so với những thủ thuật mình nói bên trên, hiệu ứng Loading mà mình giới thiệu ở bài viết này hoàn toàn được tạo bởi CSS như ví dụ bên dưới, chắc hẳn sẽ có bạn tưởng rằng đây là một hình ảnh động
Và để thêm hiệu ứng thú vị này vào blog các bạn vui lòng làm theo các bước hướng dẫn đơn giản bên dưới
CSS
Để hiển thị hình ảnh khi load trang như ở trên bạn thêm code sau vào trước thẻ ]]></b:skin> trong template#loadhalaman {position:fixed;opacity:0.93;top:0;left:0;background-color:#000;z-index:9999;text-align:center;width:100%;height:100%;padding-top:20%;color:#000;display:none;} .loadball {background-color: transparent;border:5px solid rgb(240 ,0 , 0);border-right:5px solid transparent;border-left:5px solid transparent;border-radius:50px;box-shadow: 0 0 35px rgb(255 ,0 , 0);width:50px;height:50px;margin:0 auto;-moz-animation:spinPulse 1s infinite ease-in-out;-webkit-animation:spinPulse 1s infinite linear;} .loadball-2 {background-color: transparent;border:5px solid rgb(240 ,0 , 0);border-left:5px solid transparent;border-right:5px solid transparent;border-radius:50px;box-shadow: 0 0 15px rgb(255 ,0 , 0);width:30px;height:30px;margin:0 auto;position:relative;top:-50px;-moz-animation:spinoffPulse 1s infinite linear;-webkit-animation:spinoffPulse 1s infinite linear;} @-moz-keyframes spinPulse {0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px rgb(255, 0, 0)}50% { -moz-transform:rotate(145deg); opacity:1; }100% { -moz-transform:rotate(-320deg); opacity:0; }} @-moz-keyframes spinoffPulse {0% { -moz-transform:rotate(0deg); } 100% { -moz-transform:rotate(360deg); }} @-webkit-keyframes spinPulse {0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px rgb(255, 0, 0)} 50% { -webkit-transform:rotate(145deg); opacity:1;} 100% { -webkit-transform:rotate(-320deg); opacity:0; }} @-webkit-keyframes spinoffPulse {0% { -webkit-transform:rotate(0deg); } 100% { -webkit-transform:rotate(360deg); }}
Script
Chèn đoạn code bên dưới trước thẻ đóng </body><div id='loadhalaman'> <div class='loadball'></div> <div class='loadball-2'></div> </div> <script type='text/javascript'> $(function() { var siteURL = "http://" + top.location.host.toString(); var $internalLinks = $("a[href^='"+siteURL+"'], a[href^='/'], a[href^='./'], a[href^='../']"); $internalLinks.click(function() { $('#loadhalaman').fadeIn(1500).delay(6000).fadeOut(1000); }); // Hilangkan overlay saat diklik untuk mengatasi gangguan, terutama jika link internal diset dengan target='_blank' $('#loadhalaman').click(function() { $(this).hide(); }); }); </script>
Mình xin được nhắc lại lời bên trên, đây là bài viết đầu tiên của mình tại Namkna blog vì vậy mong được sự đóng góp ý kiến từ các bạn để những bài viết sắp tới sẽ hoàn thiện hơn, đưa đến cộng đồng blogger Việt những thủ thuật tốt nhất. Và nếu có thời gian các bạn hãy ghé thăm blog cá nhân của mình tại địa chỉ TrollVL. Xin cảm ơn và chúc blog các bạn ngày một đẹp và phát triển!
Được viết bởi tác giả MRK
Style của TUTORIAL BLOG
Nhận xét
em bóc tem trước nhé! :D
Trả lờiXóaké luôn :)
Trả lờiXóakhông thấy hiển thị lun anh à....:D
Trả lờiXóaMình thao tác đúng như hướng dẫn bên trên và không xảy ra lỗi nào cả tại blog demo, các bạn có thể xem demo tại đây
Trả lờiXóaCode hoạt động bình thường bạn ạ, bạn xem lại các bước thực hiện nha!
anh Huy ơi, mặc dù em đã làm theo đúng y như hướng dẫn nhưng nó vẫn không hiển thị anh ak, anh qua xem lại dùm em nhé! TẠI ĐÂY
XóaEm thêm đoạn này trước thẻ </head> coi sao nha:
Xóa<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
thủ thuật này rất hay, nhưng sao nó tương thích với blog em anh Nam nhỉ? hay là bại code bị lỗi vậy anh Nam???
XóaHiệu ứng không dùng hình ảnh chỉ dùng CSS3 đây là cách kết hợp rất hay :) Với các ảnh động thì thời gian load trang thường rất lâu vì ảnh có dung lượng tương đối lớn.
Trả lờiXóaem làm hoài mak hk được nên em đã gửi cả template vào địa chỉ gmail:tavannam01@gmail.com của anh rôi, hy vọng anh xem giúp dùm em nhé!
XóaHôm nay anh bận rồi chắc để mai quá :)))))
Xóavậy may anh xem dùm em nhé! xong thì Bing dùm em nhé!
Xóahình như mình có thể chỉnh độ trễ(delay) của nó mak bạn...:D
Trả lờiXóaChắc là ở cái này:
Trả lờiXóa.fadeIn(1500)thời gian hiệu ứng đậm dần và xuất hiện
.delay(6000)thời gian hiệu ứng duy trì
.fadeOut(1000)thời gian hiệu ứng mở dần và biến mất
i giây =1000
TUTORIAL BLOG _Tiếng Indonesia ???
Trả lờiXóachưa đc anh ak . a em xem nhé: http://vina-cntt.blogspot.com
Trả lờiXóaBlog bạn chưa áp dụng thủ thuật này mà
XóaKhông được bạn ơi phim.gvm4u.info
Trả lờiXóaAnh Nam đoạn code này có phải là đoạn code lịch k vậy. em thấy nó trong tem mà k biết có tác dụng gì k nữa, xóa bỏ đi nhé anh http://notepad.cc/share/3QkyhxFTmw
Trả lờiXóaKhông em ak đó là code của tiện ích recent post. thường được áp dụng ở trang chủ.
XóaDạ, cảm ơn anh, thấy cái đó lạ quá :)
XóaNhận xét này đã bị quản trị viên blog xóa.
Trả lờiXóacái ảnh trên demo mà là động, quay tròn thì đẹp tuyệt luôn
Trả lờiXóaCó rất nhiều cách em ak, Nhưng các phổ biến và được áp dụng nhiều nhất hiện nay lae em hãy xác định ID của widget và chèn đoạn code bên dưới trực tiếp vào trong bài viết em muốn ẩn widget đó.
Trả lờiXóa<style>
#ID{display:none !important}
#main{width:1000px}
</style>
ví dụ
<style>
#HTML1{display:none !important}
#main{width:1000px}
</style>
trong đó phần <b># main</b> là id widget mỗi blog có một ID này khác nhau.
sao khi em xem bằng firefox thì nó hiển thị còn xem bằng chorm thì hk thấy gì lun...:D
Trả lờiXóaKiểm tra lại mếu trag laod quá nhanh không để ý kỹ sẽ không thấy đâu,,
XóaTốt!
Trả lờiXóaNhận xét này đã bị tác giả xóa.
Trả lờiXóaKhông bạn ak, Có những bài do mình và cũng có những bài do cộng tác viên viết, Như bài này là Huycovip viết :)
XóaNhận xét này đã bị quản trị viên blog xóa.
Trả lờiXóaem làm nó ko xoay, nó chỉ hiện lên 2 giây rồi nó lên bài lun
Trả lờiXóahiệu ứng này chỉ hiển thị trong thời gian tải trang thôi e. Khi trang tải xong rồi nó sẽ không hiển thị nữa/
XóaBạn nào làm dùm mình đuoc không , mới tập làm khó quá :3
Trả lờiXóa