Một số hiệu ứng trang trí tết đẹp cho website blogspot
Cập nhật ngày
Bởi Minh Khôi
Tết đến xuân về, mà COVID-19 vẫn không tha cho chúng ta. Hãy tránh nơi đông người để bảo vệ sức khỏe cho mình và người thân. Ở nhà tranh thủ dọn dẹp nhà cửa, lướt website xem phim. Đợt covid sẽ còn kéo dài, lượt truy cập mạng sẽ tăng rất cao trong giai đoạn này, hãy cùng đọc bài viết này và áp dụng theo để trang trí cho website / blogspot / blogger của bạn thật đẹp trong dịp tết này nhé.
Vào chỉnh sửa HTML -> ctrlF tìm <body và chèn đoạn code này bên dưới nó.
Nếu bạn muốn lấy bất kì bài hát nào khác để chèn vào website, comment tên bài hát + ca sĩ ở khung nhận xét bên dưới, mình sẽ lấy link mp3 cho bạn chèn vào web.
1. Hiệu ứng hoa mai vàng rơi
Demo trực tiếp trên website này.Vào chỉnh sửa HTML -> ctrlF tìm <body và chèn đoạn code này bên dưới nó.
<style>
.g-snows{position:relative;z-index:9999}.g-snows>li{opacity:0;position:fixed;top:0;border-radius:100%;background-color:#fff;background-repeat:no-repeat;background-size:100% auto;animation-name:snow-drop;animation-iteration-count:infinite;animation-timing-function:linear;animation-fill-mode:forwards;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicnum2ulUOzuu_skKAU7gDzZe15uS2j-7BrARag-1sAblPazlgOsMUOk85q3TKIROtlDvy2zMQRO1zs4jMTIf89M3o8tNUXVkDfcQiKsMe4gIyOvHX_HDN5Z1a8OQ21VZaJsRz78aCZ6U/s75/leaf.png)}.g-snows>li:nth-child(1){left:17%;width:7px;height:7px;animation-duration:7606ms;animation-delay:799ms}.g-snows>li:nth-child(2){left:11%;width:8px;height:8px;animation-duration:8647ms;animation-delay:2075ms}.g-snows>li:nth-child(3){left:26%;width:3px;height:3px;animation-duration:10316ms;animation-delay:3343ms}.g-snows>li:nth-child(4){left:15%;width:1px;height:1px;animation-duration:8168ms;animation-delay:2786ms}.g-snows>li:nth-child(5){left:11%;width:9px;height:9px;animation-duration:10347ms;animation-delay:4057ms}.g-snows>li:nth-child(6){left:6%;width:3px;height:3px;animation-duration:7051ms;animation-delay:4937ms}.g-snows>li:nth-child(7){left:54%;width:2px;height:2px;animation-duration:8869ms;animation-delay:3447ms}.g-snows>li:nth-child(8){left:67%;width:2px;height:2px;animation-duration:5289ms;animation-delay:1182ms}.g-snows>li:nth-child(9){left:77%;width:3px;height:3px;animation-duration:12310ms;animation-delay:3776ms}.g-snows>li:nth-child(10){left:2%;width:1px;height:1px;animation-duration:7970ms;animation-delay:2728ms}.g-snows>li:nth-child(11){left:84%;width:5px;height:5px;animation-duration:13254ms;animation-delay:4258ms}.g-snows>li:nth-child(12){left:57%;width:19px;height:19px;animation-duration:7924ms;animation-delay:4205ms}.g-snows>li:nth-child(13){left:60%;width:12px;height:12px;animation-duration:10346ms;animation-delay:3012ms}.g-snows>li:nth-child(14){left:81%;width:5px;height:5px;animation-duration:5360ms;animation-delay:2400ms}.g-snows>li:nth-child(15){left:91%;width:7px;height:7px;animation-duration:7269ms;animation-delay:634ms}.g-snows>li:nth-child(16){left:19%;width:6px;height:6px;animation-duration:5056ms;animation-delay:4718ms}.g-snows>li:nth-child(17){left:53%;width:11px;height:11px;animation-duration:7889ms;animation-delay:3311ms}.g-snows>li:nth-child(18){left:18%;width:7px;height:7px;animation-duration:6965ms;animation-delay:551ms}.g-snows>li:nth-child(19){left:24%;width:6px;height:6px;animation-duration:11998ms;animation-delay:4786ms}.g-snows>li:nth-child(20){left:83%;width:11px;height:11px;animation-duration:5149ms;animation-delay:960ms}.g-snows>li:nth-child(21){left:16%;width:8px;height:8px;animation-duration:6557ms;animation-delay:2575ms}.g-snows>li:nth-child(22){left:1%;width:4px;height:4px;animation-duration:7648ms;animation-delay:1833ms}.g-snows>li:nth-child(23){left:40%;width:4px;height:4px;animation-duration:12003ms;animation-delay:842ms}.g-snows>li:nth-child(24){left:58%;width:4px;height:4px;animation-duration:11412ms;animation-delay:2657ms}.g-snows>li:nth-child(25){left:76%;width:6px;height:6px;animation-duration:9239ms;animation-delay:4499ms}.g-snows>li:nth-child(26){left:22%;width:3px;height:3px;animation-duration:8995ms;animation-delay:1831ms}.g-snows>li:nth-child(27){left:115%;width:3px;height:3px;animation-duration:7498ms;animation-delay:2107ms}.g-snows>li:nth-child(28){left:104%;width:8px;height:8px;animation-duration:6177ms;animation-delay:2927ms}.g-snows>li:nth-child(29){left:61%;width:9px;height:9px;animation-duration:8308ms;animation-delay:643ms}.g-snows>li:nth-child(30){left:72%;width:14px;height:14px;animation-duration:6638ms;animation-delay:1359ms}.g-snows>li:nth-child(31){left:102%;width:16px;height:16px;animation-duration:11059ms;animation-delay:1638ms}.g-snows>li:nth-child(32){left:19%;width:0;height:0;animation-duration:11785ms;animation-delay:2803ms}.g-snows>li:nth-child(33){left:12%;width:6px;height:6px;animation-duration:5041ms;animation-delay:939ms}.g-snows>li:nth-child(34){left:46%;width:3px;height:3px;animation-duration:6932ms;animation-delay:1243ms}.g-snows>li:nth-child(35){left:131%;width:5px;height:5px;animation-duration:7856ms;animation-delay:241ms}.g-snows>li:nth-child(36){left:23%;width:7px;height:7px;animation-duration:7784ms;animation-delay:1985ms}.g-snows>li:nth-child(37){left:47%;width:4px;height:4px;animation-duration:11446ms;animation-delay:3203ms}.g-snows>li:nth-child(38){left:6%;width:7px;height:7px;animation-duration:9481ms;animation-delay:3415ms}.g-snows>li:nth-child(39){left:30%;width:8px;height:8px;animation-duration:8956ms;animation-delay:1652ms}.g-snows>li:nth-child(40){left:93%;width:12px;height:12px;animation-duration:5497ms;animation-delay:692ms}.g-snows>li:nth-child(41){left:114%;width:13px;height:13px;animation-duration:13602ms;animation-delay:1281ms}.g-snows>li:nth-child(42){left:15%;width:17px;height:17px;animation-duration:11915ms;animation-delay:351ms}.g-snows>li:nth-child(43){left:41%;width:4px;height:4px;animation-duration:6938ms;animation-delay:1389ms}.g-snows>li:nth-child(44){left:18%;width:11px;height:11px;animation-duration:6975ms;animation-delay:1366ms}.g-snows>li:nth-child(45){left:106%;width:7px;height:7px;animation-duration:9270ms;animation-delay:1044ms}.g-snows>li:nth-child(46){left:100%;width:4px;height:4px;animation-duration:10962ms;animation-delay:4530ms}.g-snows>li:nth-child(47){left:83%;width:11px;height:11px;animation-duration:7505ms;animation-delay:2442ms}.g-snows>li:nth-child(48){left:138%;width:11px;height:11px;animation-duration:9408ms;animation-delay:3461ms}.g-snows>li:nth-child(49){left:3%;width:7px;height:7px;animation-duration:5841ms;animation-delay:235ms}.g-snows>li:nth-child(50){left:10%;width:11px;height:11px;animation-duration:8824ms;animation-delay:4533ms}.g-snows>li:nth-child(51){left:41%;width:18px;height:18px;animation-duration:7294ms;animation-delay:2462ms}.g-snows>li:nth-child(52){left:21%;width:7px;height:7px;animation-duration:5249ms;animation-delay:4972ms}.g-snows>li:nth-child(53){left:81%;width:5px;height:5px;animation-duration:5942ms;animation-delay:3218ms}.g-snows>li:nth-child(54){left:53%;width:15px;height:15px;animation-duration:7330ms;animation-delay:1843ms}.g-snows>li:nth-child(55){left:110%;width:1px;height:1px;animation-duration:12253ms;animation-delay:2349ms}.g-snows>li:nth-child(56){left:48%;width:5px;height:5px;animation-duration:8370ms;animation-delay:4697ms}.g-snows>li:nth-child(57){left:103%;width:12px;height:12px;animation-duration:10097ms;animation-delay:1066ms}.g-snows>li:nth-child(58){left:9%;width:5px;height:5px;animation-duration:5444ms;animation-delay:4619ms}.g-snows>li:nth-child(59){left:46%;width:18px;height:18px;animation-duration:11026ms;animation-delay:2997ms}.g-snows>li:nth-child(60){left:68%;width:7px;height:7px;animation-duration:12024ms;animation-delay:2287ms}.g-snows>li:nth-child(61){left:60%;width:9px;height:9px;animation-duration:6829ms;animation-delay:3002ms}.g-snows>li:nth-child(62){left:99%;width:8px;height:8px;animation-duration:7248ms;animation-delay:2183ms}.g-snows>li:nth-child(63){left:40%;width:7px;height:7px;animation-duration:6134ms;animation-delay:826ms}.g-snows>li:nth-child(64){left:70%;width:3px;height:3px;animation-duration:6371ms;animation-delay:4551ms}.g-snows>li:nth-child(65){left:61%;width:7px;height:7px;animation-duration:8345ms;animation-delay:351ms}.g-snows>li:nth-child(66){left:68%;width:10px;height:10px;animation-duration:10482ms;animation-delay:577ms}.g-snows>li:nth-child(67){left:14%;width:6px;height:6px;animation-duration:9633ms;animation-delay:3301ms}.g-snows>li:nth-child(68){left:45%;width:3px;height:3px;animation-duration:5898ms;animation-delay:3080ms}.g-snows>li:nth-child(69){left:4%;width:11px;height:11px;animation-duration:8115ms;animation-delay:3123ms}.g-snows>li:nth-child(70){left:17%;width:1px;height:1px;animation-duration:9889ms;animation-delay:4484ms}.g-snows>li:nth-child(71){left:1%;width:7px;height:7px;animation-duration:11042ms;animation-delay:4430ms}.g-snows>li:nth-child(72){left:28%;width:2px;height:2px;animation-duration:9945ms;animation-delay:343ms}.g-snows>li:nth-child(73){left:9%;width:0;height:0;animation-duration:7378ms;animation-delay:493ms}.g-snows>li:nth-child(74){left:64%;width:14px;height:14px;animation-duration:6749ms;animation-delay:1522ms}.g-snows>li:nth-child(75){left:140%;width:5px;height:5px;animation-duration:8969ms;animation-delay:645ms}.g-snows>li:nth-child(76){left:90%;width:0;height:0;animation-duration:5259ms;animation-delay:4151ms}.g-snows>li:nth-child(77){left:5%;width:4px;height:4px;animation-duration:7632ms;animation-delay:1524ms}.g-snows>li:nth-child(78){left:3%;width:18px;height:18px;animation-duration:7619ms;animation-delay:1043ms}.g-snows>li:nth-child(79){left:28%;width:15px;height:15px;animation-duration:5314ms;animation-delay:4296ms}.g-snows>li:nth-child(80){left:68%;width:2px;height:2px;animation-duration:5585ms;animation-delay:1749ms}.g-snows>li:nth-child(81){left:57%;width:7px;height:7px;animation-duration:12011ms;animation-delay:4512ms}.g-snows>li:nth-child(82){left:11%;width:4px;height:4px;animation-duration:5281ms;animation-delay:1782ms}.g-snows>li:nth-child(83){left:8%;width:5px;height:5px;animation-duration:7533ms;animation-delay:2475ms}.g-snows>li:nth-child(84){left:11%;width:10px;height:10px;animation-duration:5695ms;animation-delay:1810ms}.g-snows>li:nth-child(85){left:120%;width:6px;height:6px;animation-duration:8462ms;animation-delay:1270ms}.g-snows>li:nth-child(86){left:80%;width:3px;height:3px;animation-duration:5525ms;animation-delay:1552ms}.g-snows>li:nth-child(87){left:82%;width:5px;height:5px;animation-duration:6954ms;animation-delay:4941ms}.g-snows>li:nth-child(88){left:89%;width:10px;height:10px;animation-duration:6151ms;animation-delay:3487ms}.g-snows>li:nth-child(89){left:54%;width:11px;height:11px;animation-duration:7822ms;animation-delay:3068ms}.g-snows>li:nth-child(90){left:4%;width:1px;height:1px;animation-duration:9647ms;animation-delay:3795ms}.g-snows>li:nth-child(91){left:53%;width:9px;height:9px;animation-duration:7790ms;animation-delay:86ms}.g-snows>li:nth-child(92){left:29%;width:8px;height:8px;animation-duration:7628ms;animation-delay:3581ms}.g-snows>li:nth-child(93){left:19%;width:5px;height:5px;animation-duration:11425ms;animation-delay:3453ms}.g-snows>li:nth-child(94){left:122%;width:2px;height:2px;animation-duration:6403ms;animation-delay:1280ms}.g-snows>li:nth-child(95){left:112%;width:15px;height:15px;animation-duration:12767ms;animation-delay:1370ms}.g-snows>li:nth-child(96){left:7%;width:10px;height:10px;animation-duration:9324ms;animation-delay:852ms}.g-snows>li:nth-child(97){left:48%;width:1px;height:1px;animation-duration:9656ms;animation-delay:4767ms}.g-snows>li:nth-child(98){left:65%;width:2px;height:2px;animation-duration:5747ms;animation-delay:4544ms}.g-snows>li:nth-child(99){left:104%;width:2px;height:2px;animation-duration:7304ms;animation-delay:1576ms}.g-snows>li:nth-child(100){left:16%;width:10px;height:10px;animation-duration:6635ms;animation-delay:1066ms}.g-snows>li:nth-child(4n){width:14px;height:14px;background-position:-31px 0}.g-snows>li:nth-child(4n+1){width:16px;height:16px;background-position:0 -23px}.g-snows>li:nth-child(4n+2){width:13px;height:13px;background-position:0 -50px}.g-snows>li:nth-child(4n+3){width:15px;height:15px;background-position:-49px -35px}@keyframes snow-drop{0%{transform:translate(0,0);opacity:.5;margin-left:0}10%{margin-left:15px}20%{margin-left:20px}25%{transform:translate(0,166.66667px);opacity:.75}30%{margin-left:15px}40%{margin-left:0}50%{transform:translate(0,466.66667px);opacity:1;margin-left:-15px}60%{margin-left:-20px}70%{margin-left:-15px}75%{transform:translate(0,800px);opacity:.5}80%{margin-left:0}100%{transform:translate(0,1000px);opacity:0}}
</style>
<ul class='g-snows' id='jsi-snows'><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
2. Banner nằm ở 2 góc của website
Vào chỉnh sửa HTML -> ctrlF tìm <body và chèn đoạn code này bên dưới nó.<style>.tet{display:scroll;position:fixed;top:0px;z-index:999}.tet-left{left:0}.tet-right{right:0}@media (max-width:800px){.tet{display:none}}</style>
<img class='tet tet-left' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlIH2b8-T6gDXK6jpzEWLom-Qbt0o0JTAen1wC2Iw99ZDJjzUsMhnHaf4C3n8vBrSe_3VSxpaKFvZVtoF6jyhueUEMeCqWSRJ6Pt-G-f2t9K5T3PV9G0-VLHVy-NadCFu_adBB_z8Z-2o/s522/caudoitet1.webp'/>
<img class='tet tet-right' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht9v08vAb5swbSA0p-lqIJdp76jlhhIXs7fmuMHTgU6xjhD1s3NcbMDaJ36vAxvFnm2_bBUsRrXaFR5_EpsrYr_OUvmRPtbIU7tHLzeQq4Dp8OdzuCkamgH02C5ZQORabJoe2JPsqD9Ks/s522/caudoitet2.webp'/>
3. Hình nền website giống thegioididong
Vào chỉnh sửa HTML -> chèn đoạn code bên dưới trước thẻ ]]></b:skin>body{background:#ffe7ab url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjHhRnJtDA7i-MiFtj27jVSIdwlM9gVJxnaC1mPiwaqSWilI26-5-bMnG6hWEe-wHLklrVo2o8q618wK30FTeC03fGRgjcrVoNlWrF5fN72JuEL8R-JGNa_ANhROb1rxGbsbr2xAepYXw/s1920/bg-v3-min.png) center top}
body:before{content:"";background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi24zB65mgeCknL1LVnnwvn9J9rgLH0JW7qG0WNy7hCIghJDhHR2QHdFM5uoL0DovgaRsiZ8Cl2REpswlO1lfjdIKOYlgkhDH3YJRD81CRIoPX2NK9JIkNGQPKd1-6oj9PaKifMGitAjC8/s1920/bg-top-v2-min.png) no-repeat center top;position:absolute;left:0;top:0;width:100%;height:997px;z-index:-1}
4. Thêm nhạc nền cho website
Vào chỉnh sửa HTML -> ctrlF tìm <body và chèn đoạn code này bên dưới nó.<audio autoplay="" src="https://aredir.nixcdn.com/NhacCuaTui960/MotNamMoiBinhAn-SonTungMTP-4315569.mp3"/>
Đây là bài hát Một Năm Mới Bình An - Sơn Tùng MTP. Nếu bạn muốn lấy bất kì bài hát nào khác để chèn vào website, comment tên bài hát + ca sĩ ở khung nhận xét bên dưới, mình sẽ lấy link mp3 cho bạn chèn vào web.
chèn nhạc sao AD
Trả lờiXóahướn dẫn up nhạc lên đi ạ, up host nào ạ
Trả lờiXóahướng dẫn up load nhạc lên chỗ nào đi ạ
Trả lờiXóaChúc tết + Tố Ny
Trả lờiXóaLấy cho em Link nhạc bài bạn tình ơi đi ah
Trả lờiXóa