Thêm widget chúc mừng giáng sinh cực đẹp để trang trí cho blogspot

Xin chào tất cả các bạn, chào mừng các bạn đã quay trở lại với blog của Tính Getter! 
Haizz, bây giờ là 23:45 PM rồi (tính từ thời gian viết bài), lang thang trên Google thì bất chợt gõ từ khóa "Christmas" thì mình hết sức ngạc nhiên, vì thấy cái header chúc mừng giáng sinh nhìn rất là bắt mắt. Thấy đẹp quá nên view-source về trang trí blog của mình thêm lung linh và sặc sỡ hơn vào ngày Noel, sẵn tiện viết bài cho các bạn xem. Nào, chúng ta cùng bắt đầu nhé!

Demo của widget này thì các bạn có thể xem tại blog của mình (ở dưới footer) hoặc lên Google tra từ khóa "Christmas" và xem phần header của Google nhé!

Các bước thực hiện

Bước 1: Các bạn vào Blogger Chủ đề chọn Chỉnh sửa HTML.
Bước 2: Copy và dán đoạn code này vào phía trước thẻ </body>

<b:if cond='data:blog.url == data:blog.homepageUrl'> <div id='easter-egg'> <style> #easter-egg{position:absolute;height:340px;width:100%;overflow:hidden} #logo img{background-image:url(https://www.google.com.vn/images/branding/googlelogo/2x/googlelogo_light_color_120x44dp.png);background-size:120px 44px;box-sizing:border-box;box-sizing:border-box;padding-left:120px} .sfbgg,.sfbg,#hdtb,#hdtb.hdtba #hdtbMenus.hdtb-td-o,#hdtbSum{background-color:transparent} .sfbgx{display:none} #hdtb,#hdtb.hdtba #hdtbMenus.hdtb-td-o{border-bottom-color:transparent} #appbar{background-color:transparent} .kp-blk{background:#fff} #taw{background:#fff} .commercial-unit-desktop-rhs{margin-top:6px!important} div.rl_feature,.kappbar{background-color:transparent!important;background-image:-webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.02))!important} div.rl_feature g-scrolling-carousel,.rlc__slider-page{background:transparent!important} #hdtbMenus,#hdtb.hdtba #hdtbMenus.hdtb-td-c{opacity:0} body.vasq #hdtbMenus.hdtb-td-o{opacity:1} .mn-dwn-arw{border-color:rgba(225,225,225,0.6) transparent} #rcnt{margin-top:74px} .kappbar{margin-top:105px;margin-bottom:-70px} .rl_container{margin-top:105px;margin-bottom:-70px} #hdtb-msb #hdtb-tls,#hdtb .hdtb-mitem a,#resultStats,.hdtb-mn-hd,.gb_bb{color:#fff!important} .gb_Bg .gb_b.gb_dc{background-position:0 -2179px} .gb_Cg .gb_b.gb_cc{background-position:-463px -35px} .gb_R .gb_eb{color:#fff} #hdtb .hdtb-mitem a:hover{color:rgba(255,255,255,0.8)} #hdtb-tls:hover{background:-webkit-linear-gradient(top,rgba(255,255,255,0.1),rgba(255,255,255,0.15));border-color:rgba(255,255,255,0.15)} #hdtb-msb .hdtb-tl-sel,#hdtb-msb .hdtb-tl-sel:hover{background:-webkit-linear-gradient(top,rgba(225,225,225,0.2),rgba(225,225,225,0.3));border:1px solid rgba(225,225,225,0.3)} body{background-image:url(https://www.google.com.vn/images/holiday/xmas_Christmas_Pattern_v2.png),-webkit-color:#ededed;background-size:213px 172px,100% 10000px;background-repeat:repeat,repeat-x;width:100%;z-index:-1} ._qow{position:absolute;top:80px;left:820px;width:454px;height:212px;z-index:-1} ._suw{position:absolute;width:100%;bottom:0} ._quw{position:absolute;width:150px;bottom:2px;left:132px} ._rrw{position:absolute;width:44px;height:100%;right:104px} ._kuw{position:absolute;width:100%;bottom:12px} ._nuw{position:absolute;width:201px;right:0;bottom:10px} ._muw{position:absolute;width:89px;left:4px;bottom:6px;z-index:1} ._Low{position:absolute;width:80px;height:91px;left:72px;top:110px} ._nqw{position:absolute;width:100%} ._yow{position:absolute;width:31px;bottom:18px;margin:0 auto;right:0;left:0} ._luw{position:absolute;width:64px;bottom:2px;left:94px} ._ruw{position:absolute;width:55px;bottom:4px;left:-38px} ._Jow{position:absolute;width:100%;height:212px;z-index:3} @media (max-width:1440px) { ._qow{left:800px} } @media (max-width:1350px) { #rhs{margin-top:18px} } @media (max-width:1280px) { ._Jow{width:1280px} } @media (max-width:1160px) { ._rrw{left:60px} ._zrw{display:none} } @media (max-width:1120px) { #easter-egg{overflow:visible} } </style> <style>._BDw{animation-duration:2s;animation-timing-function:step-end;animation-iteration-count:infinite;animation-play-state:running;position:absolute} ._ADw{transform:scale(0.5);transform-origin:top left} ._VDw{animation:xmas-orb 600ms ease-in-out 0 infinite alternate;position:absolute;width:44px;height:44px;background-color:rgba(251,140,0,0.25);border-radius:50%;left:50%;margin-left:-22px;bottom:4px} ._VDw:before{content:&#39;&#39;;position:absolute;background:inherit;border-radius:50%;width:75%;height:75%;top:12.5%;left:12.5%} ._zrw{animation-duration:4s;animation-name:xmas-smoke;background:url(https://www.google.com.vn/images/holiday/xmas_desktop_smoke_anim_sprite.png) no-repeat 0 0;width:30px;height:120px;left:166px;top:14px} ._trw{position:absolute;height:80px;width:80px} ._ouw{left:-11px;top:70px} ._puw{left:14px;top:94px} ._qEw{animation-name:xmas-flame-1;background:url(https://www.google.com.vn/images/holiday/xmas_desktop_flame1_anim_sprite.png) no-repeat 0 0;width:100%;height:100%} ._rEw{animation-name:xmas-flame-2;background:url(https://www.google.com.vn/images/holiday/xmas_desktop_flame2_anim_sprite.png) no-repeat 0 0;width:100%;height:100%} ._Vnw{animation-name:xmas-snow;background:url(https://www.google.com.vn/images/holiday/xmas_desktop_snow_anim_sprite.png) no-repeat 0 0;width:160px;height:182px;top:0} ._wpw{animation-duration:600ms;animation-name:xmas-lights-start;background:url(https://www.google.com.vn/images/holiday/xmas_desktop_lights_start_anim_sprite.png) no-repeat 0 0;width:560px;height:140px;right:0;bottom:-194px;transform-origin:top right} ._vpw{animation-duration:600ms;animation-name:xmas-lights-continuous;background:url(https://www.google.com.vn/images/holiday/xmas_desktop_lights_tileable_anim_sprite.png) repeat-x 100% 0;height:140px;left:0;right:-100%;bottom:-178px;margin-right:560px} @keyframes xmas-snow { 0%{background-position:0 0} 1.67%{background-position:-160px 0} 3.33%{background-position:-320px 0} 5%{background-position:-480px 0} 6.67%{background-position:-640px 0} 8.33%{background-position:-800px 0} 10%{background-position:-960px 0} 11.67%{background-position:-1120px 0} 13.33%{background-position:-1280px 0} 15%{background-position:-1440px 0} 16.67%{background-position:-1600px 0} 18.33%{background-position:-1760px 0} 20%{background-position:-1920px 0} 21.67%{background-position:-2080px 0} 23.33%{background-position:-2240px 0} 25%{background-position:-2400px 0} 26.67%{background-position:-2560px 0} 28.33%{background-position:-2720px 0} 30%{background-position:-2880px 0} 31.67%{background-position:-3040px 0} 33.33%{background-position:-3200px 0} 35%{background-position:-3360px 0} 36.67%{background-position:-3520px 0} 38.33%{background-position:-3680px 0} 40%{background-position:-3840px 0} 41.67%{background-position:-4000px 0} 43.33%{background-position:-4160px 0} 45%{background-position:-4320px 0} 46.67%{background-position:-4480px 0} 48.33%{background-position:-4640px 0} 50%{background-position:-4800px 0} 51.67%{background-position:-4960px 0} 53.33%{background-position:-5120px 0} 55%{background-position:-5280px 0} 56.67%{background-position:-5440px 0} 58.33%{background-position:-5600px 0} 60%{background-position:-5760px 0} 61.67%{background-position:-5920px 0} 63.33%{background-position:-6080px 0} 65%{background-position:-6240px 0} 66.67%{background-position:-6400px 0} 68.33%{background-position:-6560px 0} 70%{background-position:-6720px 0} 71.67%{background-position:-6880px 0} 73.33%{background-position:-7040px 0} 75%{background-position:-7200px 0} 76.67%{background-position:-7360px 0} 78.33%{background-position:-7520px 0} 80%{background-position:-7680px 0} 81.67%{background-position:-7840px 0} 83.33%{background-position:-8000px 0} 85%{background-position:-8160px 0} 86.67%{background-position:-8320px 0} 88.33%{background-position:-8480px 0} 90%{background-position:-8640px 0} 91.67%{background-position:-8800px 0} 93.33%{background-position:-8960px 0} 95%{background-position:-9120px 0} 96.67%{background-position:-9280px 0} 98.33%{background-position:-9440px 0} } @keyframes xmas-lights-start { 0%{background-position:0 0} 10%{background-position:0 -140px} 20%{background-position:0 -280px} 30%{background-position:0 -420px} 40%{background-position:0 -560px} 50%{background-position:0 -700px} 60%{background-position:0 -840px} 70%{background-position:0 -980px} 80%{background-position:0 -1120px} 90%{background-position:0 -1260px} } @keyframes xmas-lights-continuous { 0%{background-position:100% 0} 10%{background-position:100% -140px} 20%{background-position:100% -280px} 30%{background-position:100% -420px} 40%{background-position:100% -560px} 50%{background-position:100% -700px} 60%{background-position:100% -840px} 70%{background-position:100% -980px} 80%{background-position:100% -1120px} 90%{background-position:100% -1260px} } @keyframes xmas-smoke { 0%{background-position:0 0} 0.83%{background-position:-30px 0} 1.67%{background-position:-60px 0} 2.50%{background-position:-90px 0} 3.33%{background-position:-120px 0} 4.17%{background-position:-150px 0} 5%{background-position:-180px 0} 5.83%{background-position:-210px 0} 6.67%{background-position:-240px 0} 7.50%{background-position:-270px 0} 8.33%{background-position:-300px 0} 9.17%{background-position:-330px 0} 10%{background-position:-360px 0} 10.83%{background-position:-390px 0} 11.67%{background-position:-420px 0} 12.50%{background-position:-450px 0} 13.33%{background-position:-480px 0} 14.17%{background-position:-510px 0} 15%{background-position:-540px 0} 15.83%{background-position:-570px 0} 16.67%{background-position:-600px 0} 17.50%{background-position:-630px 0} 18.33%{background-position:-660px 0} 19.17%{background-position:-690px 0} 20%{background-position:-720px 0} 20.83%{background-position:-750px 0} 21.67%{background-position:-780px 0} 22.50%{background-position:-810px 0} 23.33%{background-position:-840px 0} 24.17%{background-position:-870px 0} 25%{background-position:-900px 0} 25.83%{background-position:-930px 0} 26.67%{background-position:-960px 0} 27.50%{background-position:-990px 0} 28.33%{background-position:-1020px 0} 29.17%{background-position:-1050px 0} 30%{background-position:-1080px 0} 30.83%{background-position:-1110px 0} 31.67%{background-position:-1140px 0} 32.50%{background-position:-1170px 0} 33.33%{background-position:-1200px 0} 34.17%{background-position:-1230px 0} 35%{background-position:-1260px 0} 35.83%{background-position:-1290px 0} 36.67%{background-position:-1320px 0} 37.50%{background-position:-1350px 0} 38.33%{background-position:-1380px 0} 39.17%{background-position:-1410px 0} 40%{background-position:-1440px 0} 40.83%{background-position:-1470px 0} 41.67%{background-position:-1500px 0} 42.50%{background-position:-1530px 0} 43.33%{background-position:-1560px 0} 44.17%{background-position:-1590px 0} 45%{background-position:-1620px 0} 45.83%{background-position:-1650px 0} 46.67%{background-position:-1680px 0} 47.50%{background-position:-1710px 0} 48.33%{background-position:-1740px 0} 49.17%{background-position:-1770px 0} } @keyframes xmas-flame-1 { 0%{background-position:0 0} 1.67%{background-position:-80px 0} 3.33%{background-position:-160px 0} 5%{background-position:-240px 0} 6.67%{background-position:-320px 0} 8.33%{background-position:-400px 0} 10%{background-position:-480px 0} 11.67%{background-position:-560px 0} 13.33%{background-position:-640px 0} 15%{background-position:-720px 0} 16.67%{background-position:-800px 0} 18.33%{background-position:-880px 0} 20%{background-position:-960px 0} 21.67%{background-position:-1040px 0} 23.33%{background-position:-1120px 0} 25%{background-position:-1200px 0} 26.67%{background-position:-1280px 0} 28.33%{background-position:-1360px 0} 30%{background-position:-1440px 0} 31.67%{background-position:-1520px 0} 33.33%{background-position:-1600px 0} 35%{background-position:-1680px 0} 36.67%{background-position:-1760px 0} 38.33%{background-position:-1840px 0} 40%{background-position:-1920px 0} 41.67%{background-position:-2000px 0} 43.33%{background-position:-2080px 0} 45%{background-position:-2160px 0} 46.67%{background-position:-2240px 0} 48.33%{background-position:-2320px 0} 50%{background-position:-2400px 0} 51.67%{background-position:-2480px 0} 53.33%{background-position:-2560px 0} 55%{background-position:-2640px 0} 56.67%{background-position:-2720px 0} 58.33%{background-position:-2800px 0} 60%{background-position:-2880px 0} 61.67%{background-position:-2960px 0} 63.33%{background-position:-3040px 0} 65%{background-position:-3120px 0} 66.67%{background-position:-3200px 0} 68.33%{background-position:-3280px 0} 70%{background-position:-3360px 0} 71.67%{background-position:-3440px 0} 73.33%{background-position:-3520px 0} 75%{background-position:-3600px 0} 76.67%{background-position:-3680px 0} 78.33%{background-position:-3760px 0} 80%{background-position:-3840px 0} 81.67%{background-position:-3920px 0} 83.33%{background-position:-4000px 0} 85%{background-position:-4080px 0} 86.67%{background-position:-4160px 0} 88.33%{background-position:-4240px 0} 90%{background-position:-4320px 0} 91.67%{background-position:-4400px 0} 93.33%{background-position:-4480px 0} 95%{background-position:-4560px 0} 96.67%{background-position:-4640px 0} 98.33%{background-position:-4720px 0} } @keyframes xmas-flame-2 { 0%{background-position:0 0} 1.67%{background-position:-80px 0} 3.33%{background-position:-160px 0} 5%{background-position:-240px 0} 6.67%{background-position:-320px 0} 8.33%{background-position:-400px 0} 10%{background-position:-480px 0} 11.67%{background-position:-560px 0} 13.33%{background-position:-640px 0} 15%{background-position:-720px 0} 16.67%{background-position:-800px 0} 18.33%{background-position:-880px 0} 20%{background-position:-960px 0} 21.67%{background-position:-1040px 0} 23.33%{background-position:-1120px 0} 25%{background-position:-1200px 0} 26.67%{background-position:-1280px 0} 28.33%{background-position:-1360px 0} 30%{background-position:-1440px 0} 31.67%{background-position:-1520px 0} 33.33%{background-position:-1600px 0} 35%{background-position:-1680px 0} 36.67%{background-position:-1760px 0} 38.33%{background-position:-1840px 0} 40%{background-position:-1920px 0} 41.67%{background-position:-2000px 0} 43.33%{background-position:-2080px 0} 45%{background-position:-2160px 0} 46.67%{background-position:-2240px 0} 48.33%{background-position:-2320px 0} 50%{background-position:-2400px 0} 51.67%{background-position:-2480px 0} 53.33%{background-position:-2560px 0} 55%{background-position:-2640px 0} 56.67%{background-position:-2720px 0} 58.33%{background-position:-2800px 0} 60%{background-position:-2880px 0} 61.67%{background-position:-2960px 0} 63.33%{background-position:-3040px 0} 65%{background-position:-3120px 0} 66.67%{background-position:-3200px 0} 68.33%{background-position:-3280px 0} 70%{background-position:-3360px 0} 71.67%{background-position:-3440px 0} 73.33%{background-position:-3520px 0} 75%{background-position:-3600px 0} 76.67%{background-position:-3680px 0} 78.33%{background-position:-3760px 0} 80%{background-position:-3840px 0} 81.67%{background-position:-3920px 0} 83.33%{background-position:-4000px 0} 85%{background-position:-4080px 0} 86.67%{background-position:-4160px 0} 88.33%{background-position:-4240px 0} 90%{background-position:-4320px 0} 91.67%{background-position:-4400px 0} 93.33%{background-position:-4480px 0} 95%{background-position:-4560px 0} 96.67%{background-position:-4640px 0} 98.33%{background-position:-4720px 0} } @keyframes xmas-orb { from{opacity:.9;transform:scale(1)} to{opacity:1;transform:scale(1.1)} </style> <div class='_qow'> <img class='_suw' src='https://www.google.com.vn/images/holiday/xmas_Table.png'/> <img class='_quw _vGw' src='https://www.google.com.vn/images/holiday/xmas_Gingerbread_House.png'/> <div class='_ADw _BDw _zrw'> </div> <div class='_rrw'> <img class='_kuw _vGw' src='https://www.google.com.vn/images/holiday/xmas_Candles.png'/> <div class='_ADw _trw _ouw'> <div class='_BDw _qEw'> </div> <div class='_VDw'> </div> </div> <div class='_ADw _trw _puw'> <div class='_BDw _rEw'> </div> <div class='_VDw'> </div> </div> </div> <img class='_nuw _vGw' src='https://www.google.com.vn/images/holiday/xmas_Cookies_Milk_Holly.png'/> <img class='_muw _vGw' src='https://www.google.com.vn/images/holiday/xmas_Candy_Canes_Gingerbread_Man.png'/> <div class='_Low'> <img class='_yow' src='https://www.google.com.vn/images/holiday/xmas_Tree.png'/> <div class='_BDw _ADw _Vnw'/> <img class='_nqw' src='https://www.google.com.vn/images/holiday/xmas_Snowglobe.png'/></div> <img class='_luw _vGw' src='https://www.google.com.vn/images/holiday/xmas_Candy_Cane.png'/> <img class='_ruw _vGw' src='https://www.google.com.vn/images/holiday/xmas_Holly_1.png'/> </div> <div class='_Jow'> <div class='_BDw _ADw _wpw _vGw'> </div> <div class='_BDw _ADw _vpw'/> </div> </div></b:if>

Bước 3: Lưu lại và hưởng thụ thành quả thôi!

Tổng kết

Bài viết vừa rồi là các bước để trang trí cho blog của mình thêm lung linh và huyền ảo hơn vào đêm giáng sinh rồi. Nếu thấy hay thì đừng quên cho mình 1 bình luận và 1 chia sẻ nhé! Giờ cũng khuya rồi, chúc các bạn ngủ ngon và có 2 đêm giáng sinh thật là an lành và hạnh phúc bên người thân, bạn bè của mình nhé. Chúc các bạn thành công !! 😉😊