Tình cờ ghé ngang www.giangna.com thấy có bài viết chia sẻ code trang trí cho blog tuyệt đẹp nên mang về chia sẻ lại cho mọi người.
Thủ thuật này sử dụng javascript và css, sẽ biến mất khi trang load xong. Cùng xem và thực hiện nhé.
XEM DEMO
Bước 2: Copy và paste đoạn code sau vào sau thẻ
Thủ thuật này sử dụng javascript và css, sẽ biến mất khi trang load xong. Cùng xem và thực hiện nhé.
HƯỚNG DẪN THỰC HIỆN
Bước 1: Đăng nhập Blogger Mẫu Chỉnh sửa HTML.Bước 2: Copy và paste đoạn code sau vào sau thẻ
<body>
trong template.<style>Bước 3: Lưu mẫu.
#loading-wrapper{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000}#loading{display:block;position:relative;left:50%;top:50%;width:225px;height:225px;background:none;z-index:1002;margin:-112.5px 0 0 -112.5px}#loading-wrapper .loading-section{position:fixed;top:0;width:50%;height:100%;background:#f1f1f1;z-index:1000;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}#loading-wrapper .loading-section.section-left{background:#bc0808 url(https://blogger.googleusercontent.com/img/proxy/AVvXsEj31YoMgdWYuzFomL6X5_uesKogMf18i_Im3vu_Xc2EyQJy9DZ2PVzrh0LvqtuHdnA8RSxdqxJABtp6jXoH8WrSxDBz4vTS0RKMh-NTGUi4FNMZAmv9kz2wQq_0WBl6=s0-d) top right no-repeat;left:0}#loading-wrapper .loading-section.section-right{background:#bc0808 url(https://blogger.googleusercontent.com/img/proxy/AVvXsEiKw61H-V_hVAj45MjolLQpmrsK0mjknI4cN_Q1XvVrHZbRxN8u0m018HODGuOl94ArNM4bgzH2dsZrcIMXWecodB-b_xskhY6s7TD4CPw53h2NihEuF596-oT4FElt=s0-d) top left no-repeat;right:0}#loading-wrapper .loading-section.section-left a,#loading-wrapper .loading-section.section-right a{width:70%;height:100%;cursor:pointer;display:block}#loading-wrapper .loading-section.section-right a{margin-left:30%}.loaded #loading-wrapper .loading-section.section-left{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);-webkit-transition:all .7s .3s cubic-bezier(0.645,0.045,0.355,1.000);transition:all .7s .3s cubic-bezier(0.645,0.045,0.355,1.000)}.loaded #loading-wrapper .loading-section.section-right{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);-webkit-transition:all .7s .3s cubic-bezier(0.645,0.045,0.355,1.000);transition:all .7s .3s cubic-bezier(0.645,0.045,0.355,1.000)}.loaded #loading{opacity:0;-webkit-transition:all .3s ease-out;transition:all .3s ease-out}.loaded #loading-wrapper{visibility:hidden;-webkit-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%);-webkit-transition:all .3s 1s ease-out;transition:all .3s 1s ease-out}.adswide{margin:0 auto;padding:0;width:980px}
</style>
<script>
$(document).ready(function() {
setTimeout(function(){
$('body').addClass('loaded');
}, 0);
});
</script>
<script type='text/javascript'>
//<![CDATA[
var a="indexOf",b="&m=1",e="(^|&)m=",f="?",g="?m=1";function h(){var c=window.location.href,d=c.split(f);switch(d.length){case 1:return c+g;case 2:return 0<=d[1].search(e)?null:c+b;default:return null}}var k=navigator.userAgent;if(-1!=k[a]("Mobile")&&-1!=k[a]("WebKit")&&-1==k[a]("iPad")||-1!=k[a]("Opera Mini")||-1!=k[a]("IEMobile")){var l=h();l&&window.location.replace(l)};
</script><script type="text/javascript">
if (window.jstiming) window.jstiming.load.tick('headEnd');
//]]>
</script>
<div id='loading-wrapper'>
<div id='loading'/>
<div class='loading-section section-left'><a href='/' target='_top'/></div>
<div class='loading-section section-right'><a href='/' target='_top'/></div>
</div>
COMMENTS