Thành công!
TRUCBLOG JOURNAL GÓC ĐỌC • GÓC VIẾT
Bài viết / Góc chia sẻ

Trang Trí Blog nhân Dịp Giáng Sinh

Đỗ Trực tháng 12 03, 2014 2 phút đọc 2 bình luận … Lượt xem
Không khí giáng sinh đang tràn ngập khắp đường phố , mọi nhà đều đang trang trí cho nhà cửa , đường phố đẹp lung linh với đủ loại màu sắc .Còn ngôi nhà Blog của bạn đã trang hoàng gì chưa? Thủ thuật nhỏ sau đây sẽ giúp bạn trang trí ngôi nhà ảo của bạn thật đẹp với hiệu ứng tuyết rơi và cây thông Noel . Chúc các bạn một mùa giáng sinh an lành  và ngập tràn hồng ân của Thiên Chúa.



HƯỚNG DẪN :Các bạn nhấn Ctrl + F rồi tìm kiếm với từ khóa  : </body>, sau đó chọn một trong những đoạn code dưới đây và dán  trên thẻ </body> là xong.
1.Hình nền cây thông và chuông ở hai bên Blog

<style type='text/css'>html{height:auto!important}</style><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqg1qdGYPGOyzAvxz_J-Vv3bOx0b09cbgkg8rD9xfGcsrngHTB8mqq9HSFEGcTA6_8S-LSxYlDFLtURgX6PMmXBwS_4K5HUdP7UT2T7LLC4OJ-8gYb7lwU0TZteQjGAAbSvFdDKkdgKUA/s150/top-left.png' style='position:fixed;z-index:9999;top:0;left:0'/><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYt8FZvOcnKDYIFDu0V5AJ0ZUCvBF3Vij6T6M6z7erSBDYnMpjLKmRaNmKruAHwXJxf6yA0rvOjHHV2Wj9RL8LyBbGAZV3Q-ZJv2uHV9fjT81zqTKw6bdJ2MJ3lwRw0OTkUm1Yim3u3so/s150/top-right.png' style='position:fixed;z-index:9999;top:0;right:0'/>

2.Tạo bông tuyết màu xanh rơi



<script type='text/javascript'>
//<![CDATA[
var SNOW_Picture="http://3.bp.blogspot.com/-YFWWvMkicLI/UrRmxFseoLI/AAAAAAAABEI/lxsGIUsIFxk/s1600/snow.png";var SNOW_no=56;var SNOW_browser_IE_NS=(document.body.clientHeight)?1:0;var SNOW_browser_MOZ=(self.innerWidth)?1:0;var SNOW_browser_IE7=(document.documentElement.clientHeight)?1:0;var SNOW_Time;var SNOW_dx,SNOW_xp,SNOW_yp;var SNOW_am,SNOW_stx,SNOW_sty;var i,SNOW_Browser_Width,SNOW_Browser_Height;if(SNOW_browser_IE_NS){SNOW_Browser_Width=document.body.clientWidth;SNOW_Browser_Height=document.body.clientHeight;}else{if(SNOW_browser_MOZ){SNOW_Browser_Width=self.innerWidth-20;SNOW_Browser_Height=self.innerHeight;}else{if(SNOW_browser_IE7){SNOW_Browser_Width=document.documentElement.clientWidth;SNOW_Browser_Height=document.documentElement.clientHeight;}}}SNOW_dx=new Array();SNOW_xp=new Array();SNOW_yp=new Array();SNOW_am=new Array();SNOW_stx=new Array();SNOW_sty=new Array();for(i=0;i<SNOW_no;++i){SNOW_dx[i]=0;SNOW_xp[i]=Math.random()*(SNOW_Browser_Width-50);SNOW_yp[i]=Math.random()*SNOW_Browser_Height;SNOW_am[i]=Math.random()*20;SNOW_stx[i]=0.02+Math.random()/10;SNOW_sty[i]=0.7+Math.random();if(i==0){document.write('<\div id="SNOW_flake'+i+'" style="position: fixed; z-index: '+i+'; visibility: visible; top: 15px; left: 15px;"><img src="'+SNOW_Picture+'" border="0"></div>');}else{document.write('<\div id="SNOW_flake'+i+'" style="position: fixed; z-index: '+i+'; visibility: visible; top: 15px; left: 15px;"><img src="'+SNOW_Picture+'" border="0"></div>');}}function SNOW_Weather(){for(i=0;i<SNOW_no;++i){SNOW_yp[i]+=SNOW_sty[i];if(SNOW_yp[i]>SNOW_Browser_Height-50){SNOW_xp[i]=Math.random()*(SNOW_Browser_Width-SNOW_am[i]-30);SNOW_yp[i]=0;SNOW_stx[i]=0.02+Math.random()/10;SNOW_sty[i]=0.7+Math.random();}SNOW_dx[i]+=SNOW_stx[i];document.getElementById("SNOW_flake"+i).style.top=SNOW_yp[i]+"px";document.getElementById("SNOW_flake"+i).style.left=SNOW_xp[i]+SNOW_am[i]*Math.sin(SNOW_dx[i])+"px";}SNOW_Time=setTimeout("SNOW_Weather()",20);}SNOW_Weather();
//]]>
</script>
  • Các bạn có thể thay đổi đoạn code màu vàng thành hình mà các bạn muốn hiển thị thay cho bông tuyết màu xanh mà mình đặt trong bài viết này.
  • Thay đổi chữ số trong đoạn code màu xanh để tăng giảm số lượng bông tuyết rơi.
2.Tạo hiệu ứng bông tuyết rơi bằng CSS3 Snow Animation
<style>.snow-container{position:fixed;width:100%;max-width:100%;z-index:99999;pointer-events:none;overflow:hidden;top:0;height:100%} .snow{display:block;position:absolute;z-index:2;top:0;right:0;bottom:0;left:0;pointer-events:none;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);-webkit-animation:snow linear infinite;animation:snow linear infinite} .snow.foreground{background-image:url("https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-large-075d267ecbc42e3564c8ed43516dd557.png");-webkit-animation-duration:15s;animation-duration:10s} .snow.foreground.layered{-webkit-animation-delay:7.5s;animation-delay:7.5s} .snow.middleground{background-image:url(https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-medium-0b8a5e0732315b68e1f54185be7a1ad9.png);-webkit-animation-duration:20s;animation-duration:15s} .snow.middleground.layered{-webkit-animation-delay:10s;animation-delay:10s} .snow.background{background-image:url(https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-small-1ecd03b1fce08c24e064ff8c0a72c519.png);-webkit-animation-duration:25s;animation-duration:20s} .snow.background.layered{-webkit-animation-delay:12.5s;animation-delay:12.5s} @-webkit-keyframes snow{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{-webkit-transform:translate3d(5%,100%,0);transform:translate3d(5%,100%,0)}} @keyframes snow{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{-webkit-transform:translate3d(5%,100%,0);transform:translate3d(5%,100%,0)}}</style> <div class='snow-container'> <div class='snow foreground'></div> <div class='snow foreground layered'></div> <div class='snow middleground'></div> <div class='snow middleground layered'></div> <div class='snow background'></div> <div class='snow background layered'></div> </div>
Chúc các bạn thành công
Chia sẻ bài viết:
Ảnh đại diện tác giả

Đỗ Trực Tác giả / Admin

Chia sẻ kiến thức lập trình, phát triển web, công nghệ và các thủ thuật thực tế. Cảm ơn bạn đã ghé thăm Truc Blog.

Thảo Luận & Nhận Xét (2)

Công cụ bình luận nâng cao:
Nội quy bình luận của blog

Hãy cùng giữ phần thảo luận thân thiện, hữu ích và an toàn cho mọi người.

  1. Trao đổi lịch sự, tôn trọng người khác; góp ý vào nội dung, không công kích cá nhân.
  2. Bình luận đúng chủ đề bài viết; tránh spam, quảng cáo lặp lại hoặc đường dẫn đáng ngờ.
  3. Không đăng mật khẩu, số giấy tờ, thông tin liên hệ riêng tư hay dữ liệu nhạy cảm.
  4. Khi chia sẻ mã nguồn, hãy dùng công cụ mã hóa code để giữ nguyên ký tự và dễ đọc.
  5. Chỉ chia sẻ hình ảnh, video và tài liệu mà bạn có quyền sử dụng; không đăng nội dung vi phạm pháp luật.
  6. Quản trị viên có thể ẩn hoặc xóa nội dung spam, xúc phạm, không an toàn hoặc không phù hợp.
Biểu tượng cảm xúc nổi bậtChạm để sao chép
Công cụ Mã hóa HTML & Chèn Code vào Bình luận
* Nhấn Chèn Ảnh/Video, dán liên kết công khai rồi sao chép URL vào bình luận. Sau khi bình luận được đăng, mẫu sẽ tự hiển thị ảnh trực tiếp, video MP4/WebM hoặc video YouTube nếu URL thuộc định dạng được hỗ trợ. Blogger không cho tải tệp trực tiếp lên bình luận.

Nhận xét

  1. Dịch vụ nạp tiền điện thoại online nhanh chóng tiện lợi chiết khấu cao.
    Key: Nạp Tiền Viettel | cách nạp tiền viettel

    Trả lờiXóa
  2. bài viết của bạn rất hữu ich cho người mới tập làm blogspot như tớ.

    Trả lờiXóa