Phan Anh Buổi Sáng

Trang trí Giáng Sinh - Merry Christmas cho Blogger

Trang trí blog mùa giáng sinh với hiệu ứng tuyết rơi, ông già Noel và giàn chuông cực độc.
Mùa giáng sinh mà có ông già Noel cưỡi tuần lộc chạy tới chạy lui thì không có gì thú vị bằng. Hiệu ứng này rất đơn giản chỉ cần chèn đoạn code này ngay phía sau thẻ <body> là được.

DEMO

<b:if cond='data:blog.url == &quot;URL_HERE&quot;'>
<style>
body{margin:0;padding:0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbkNABQiNdJ9DVFCyX6eRBOTsx1l5SfYgmGm8shOz4zx_eUiHtxqCoiudUKnTmrdJIRz-3yHWt65bWnJq-FMtUt59QVtxvUv0biguuqVFIYDLsmHC9ohIPhnrx5rqqhsYHmB75XVxOyzrs/s0/christmas-background.jpg);background-size:cover;text-align:center;word-wrap:break-word;background-attachment:fixed;background-position:center}
#top-comment{box-shadow:0 1px 0 rgba(0,0,0,.05),0 3px 3px rgba(0,0,0,.05);margin-top:20px;overflow:hidden;font-size:100%;position:fixed;background:rgba(255,255,255,0.83);width:300px;bottom:0;right:10px}
#top-comment h4,.related-post h4{font-size:17px;margin:0 0 .5em;background:rgba(214,5,13,0.73);color:rgb(255,255,255);padding:10px;font-weight:normal;position:relative;text-transform:uppercase}
.santa{z-index:600;cursor:pointer;-webkit-animation:FlyingSanta 38s infinite linear;-moz-animation:FlyingSanta 38s infinite linear;-ms-animation:FlyingSanta 38s infinite linear;-o-animation:FlyingSanta 38s infinite linear;animation:FlyingSanta 38s infinite linear;bottom:0%;left:0%;position:absolute}
@keyframes FlyingSanta{25%{bottom:80%;left:85%;transform:rotateY(0deg)}26%{transform:rotateY(180deg)}50%{bottom:60%;left:0%;transform:rotateY(180deg)}51%{transform:rotateY(0deg)}75%{bottom:40%;left:85%;transform:rotateY(0deg)}76%{bottom:40%;left:85%;transform:rotateY(180deg)}99%{transform:rotateY(180deg)}}
.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(&quot;https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-large-075d267ecbc42e3564c8ed43516dd557.png&quot;);-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)}}
.lgo{position:absolute;width:200px;z-index:1;overflow:hidden;top:-39px;left:1%;height:100%}
.thong{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6mSTrU9pOO4nbkhIO3l1iMAPwpYjnt6Z3GgB3_pzwLBPE3Er5L4yAO3v1gKsRyxcco8VWijD7zpeWd29jjW2lR-swszjMW8nfSo6HTJ-caWW-ABNH_gVzOw0HLf8U8lL-STs7m2hdKXFT/s320/cay-thong-giang-sinh-noel-2.png);background-repeat:no-repeat;position:absolute;width:300px;z-index:1;overflow:hidden;bottom:0;left:0%;height:300px}
.daythong{background-image:url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6g4JcWsK6eFwlyESKBQyaYSErnE0yDdg9eyk4GFVrspGmZgm3FW1gdtT3H0sVdDxD23mMckFwyC7utiMNornxYB7NZQEayyZQZrHu0Uv1V8LYcrT7IQOQ4QmXl_OFLb-7Divg_mSnnvSA/s0/qua-chau-trang-tri-noel.png&quot;);background-repeat:repeat-x;top:-39px;width:100%;height:236px;position:relative}
.sthong{position:relative;top:-39px}
h2{background:rgba(1,107,183,0.79);padding:10px;color:white}
</style>
<div class='daythong'/>
<h2 class='happy'>Christmas spells out love, hope and joy. Pass it on to everyone in your life. Have a great Christmas.</h2>
<div class='sthong'/>
<a class='lgo' href='/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgasV2P4-dESS9Ja5xtJc7hrj4j1JIzdIyxwqAiKD6V3rluyGlIKBrrjCCLpbZ2mhmop6actDx4siPeUBel21vYIJbehwI7cfw67NLtAHV4k4DfP3OaIxX6g1td3E-B27oyjd07nLobCdcK/s320/large_merry-christmas-title2.png' width='320'/></a>
<div class='thong'/><div class='snow-container'><div class='snow foreground'/>
<div class='snow foreground layered'/><div class='snow middleground'/><div class='snow middleground layered'/><div class='snow background'/><div class='snow background layered'/>
<img alt='Santa Be Watchin' class='santa' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj91sQgeHY6nsWEq6BTXUjC31ycRj3Z0x0pIr-KNwAv1F3zDAzCbSMngrZtdtzz8BSOJxkEr1khAUoREH85ELnnxILzV7PsY5_kfNmV7dRw8FMZbCZxci95-Bop-PxYV3HZYFkp5OCxWhF/s0/santas.gif'/>
&lt;object width=&quot;1&quot; height=&quot;1&quot;&gt;  &lt;param name=&quot;movie&quot; value=&quot;http://www.nhaccuatui.com/m/f32o3Q4f6Q&quot; /&gt;  &lt;param name=&quot;quality&quot; value=&quot;high&quot; /&gt;  &lt;param name=&quot;wmode&quot; value=&quot;transparent&quot; /&gt;  &lt;param name=&quot;allowscriptaccess&quot; value=&quot;always&quot; /&gt; &lt;param name=&quot;allowfullscreen&quot; value=&quot;true&quot;/&gt; &lt;param name=&quot;flashvars&quot; value=&quot;autostart=true&quot; /&gt;  &lt;embed src=&quot;http://www.nhaccuatui.com/m/f32o3Q4f6Q&quot; flashvars=&quot;target=blank&amp;autostart=true&quot; allowscriptaccess=&quot;always&quot; allowfullscreen=&quot;true&quot; quality=&quot;high&quot; wmode=&quot;transparent&quot; type=&quot;application/x-shockwave-flash&quot; width=&quot;1&quot; height=&quot;1&quot;&gt;&lt;/embed&gt;&lt;/object&gt;
</div>
<div id='top-comment'>
<h4><span>Bình luận</span></h4>
<div class='top-content'><div id='fb_comments'>
<div class='fb-comments' data-colorscheme='light' data-href='URL_HERE' data-numposts='8' data-width='300'/>
<div id='fb-root'/>
<script type='text/javascript'>
/*<![CDATA[*/
//Facebook Script
(function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(d.getElementById(id))return;js=d.createElement(s);js.id=id;js.src="//connect.facebook.net/vi_VN/sdk.js#xfbml=1&appId=880116602106596&version=v2.3";fjs.parentNode.insertBefore(js,fjs)}(document,'script','facebook-jssdk'));
//Google Plus Script
(function(){var s=document.createElement('script');s.type='text/javascript';s.async=true;s.src='https://apis.google.com/js/plusone.js';var x=document.getElementsByTagName('script')[0];x.parentNode.insertBefore(s,x)})();
/*]]>*/
</script>
</div></div></div>
<b:else/>