[Thủ thuật Blogspot] Thêm hiệu ứng chuyển trang đẹp cho blog

Để cho trang blog của bạn có phần chuyên nghiệp hơn, bạn có thể thêm vào một số hiệu ứng nhỏ, như là hiệu ứng chuyển trang mà mình giới thiệu ở bài đăng này.

Khi bạn kích vào một đường link trên trang blog, hiệu ứng chuyển trang sẽ làm cho trang blog của bạn tối lại, đồng thời, hình vòng tròn chạy chạy như hình dưới sẽ hiện ra, sẽ làm cho trang blog của bạn trông chuyên nghiệp, đẹp hơn.

Hướng dẫn:

Đầu tiên bạn chèn đoạn code này vào trước ]]></b:skin>

#loadtrang {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(59 ,151 , 254);border-right:5px solid transparent;border-left:5px solid transparent;border-radius:50px;box-shadow: 0 0 35px rgb(97 ,170 , 252);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(59 ,151 , 254);border-left:5px solid transparent;border-right:5px solid transparent;border-radius:50px;box-shadow: 0 0 15px rgb(97 ,170 , 252);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(97, 170, 252)}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(97, 170, 252)} 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); }}

Tiếp theo, bạn chèn đoạn code sau vào trước thẻ đóng </body>

<div id='loadtrang'>
<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() {
        $('#loadtrang').fadeIn(1500).delay(6000).fadeOut(1000);
    });
    $('#loadtrang').click(function() {
        $(this).hide();
    });
});
</script>

Cuối cùng, bạn lưu mẫu lại.

Chúc bạn thành công!