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 !! 😉😊
Tác giả bài viết: Tính Getter
Thời gian đăng bài: Thứ Hai, 25 tháng 12, 2017
Tổng số bình luận: 29

29 nhận xét:

  1. Chém gió thoải mái đê các ace :v

    Trả lờiXóa
  2. Chúc e Noel vui vẻ, mới thấy bên chỗ thằng bình đã lượm về rồi à :v

    Trả lờiXóa
  3. Công nhận cái này google viết dài thật, nặng hết cả blog :(

    Trả lờiXóa
  4. Trả lời
    1. kiếm tên khác đi
      tinhgetter.tk

      Xóa
    2. Mình thích tên miền mặc định của Blogger hơn :D Ko thích sử dụng tên miền free nữa :3

      Xóa
    3. mua cái .com hoặc .net đi. còn liên kết k

      Xóa
    4. Cảm ơn bạn đã góp ý! Mà liên kết hiện tại đã tối đa, bạn vui lòng đợi dịp khác nha :D

      Xóa
  5. Trả lời
    1. Hiuhiu nhắc người ta thì nhẹ nhàng đi chứ >_<

      Xóa