Sau đây xin hướng dẫn một vài cách thức trang trí đón tết Nguyên Đán cho Blogspot.
Để làm điều này mình sử dụng code của bài Chuông Giáng Sinh cho Blogspot rồi sau đó thay ảnh và hiệu chỉnh đôi chút cho phù hợp.
Tất cả đều mang tính chất cây nhà lá vườn(xin cảm ơn những người đã post những tấm ảnh phù hợp với code này).
Trong thời gian này khi mà thiết bị di động đang lên ngôi lấn át máy tính bàn và máy tính xách tay thì nẩy sinh vấn đề các banner trang trí che khuất màn hình di động vì vậy ta cần khắc phục vấn đề này.Thực chất là ta không cho các phần trang trí xuất hiện trên thiết bị di động.
Trang Trí Đón Tết Nguyên Đán Cho Blogspot
Xem thử DEMO qua ảnh
Ở đây mình chia nhỏ từng phần trang trí ứng với mỗi code nếu để tất cả như ảnh demo thì rất rối,ai thích phần nào thì xài phần đó còn không thì xài tất code thì tùy.Chỉ việc post gộp tất cả.
Công việc cần làm là tiến hành thêm 1 tiện ích,tiện ích này nên đặt cuối blog(load cho nhanh)
1- Cành đào+mai và dãy đèn lồng:
Code:
<div class='banner-tet'>2- Tưng bừng đón tết ở đáy Blogspot:
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixfcDSFHryKiQqULJ01BDqoLnliAVI9FMs6NXLigD7jvETdpAOzSQLH0t1RNuw6LumyNItDY3NQbEj3DVLGyGPOnmAe4kqG5AKibaOrRl5BHkPYGEQV6qr_p8XiEFMds4DlcN_YYcxs3Q/s1600/dao-01.png" style="position:fixed; top: 0px;left:-0px;border:none;z-index:5;"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ5ABtIfwPKEx4hWkMxkipuXPYHpfni3f2ZqKh7Haxr_r2nC2kfGHogDe0FmG8h5gIZmXTjdzTY1E70bF8BnE23EZ_cD38ZUtyEmRiwJXJyzJ88WVPdnjeUuODWZJ5SSuZ7lJdtRWrYHw/s1600/hoa.mai.png" style="position:fixed; top: 0px;right:-20px;border:none;z-index:5;"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhkRrBaiYGiPQ_Rw4XCaOa8kUi8DePZb6Nn4yrhmzDYEdbhc6PRc2EZuQRUEb7OpoRSr7juvXM0ghk5vUeQbe5LcC20cyHSzCpaw-Owh1gCNSXl1-ok_Hhi6Gwp4DjiTbUHuhA0IKa43g/s1600/mai-01.png" style="position:fixed; top: 50px;right:-30px;border:none;z-index:5;"/>
<!--Đèn lồng-->
<div style='position: fixed; top: -10px; right:8%;'>
<img border="0" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi10WZII-GDv2HZm3Ozq1_kUW4vc0aSI6XEhl1FyUinB-Q872TGLHiATZnJXWr760_rWFhVC9rwM0i-JeITV6Q-T6ivofTlw7V_6Dh7dDmmGG54KcoCrj719JW1Fae1mSfVhLgnFS9qS8g/s1600/1283.gif" />
<img border="0" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-cZH3alksQIZHzAb-jXqprEnOrrD_KR1_2EEM-LoxwIW_xYSrpwMtbpfzS1wq1hGl7H33GDu4ebVUKX2oHbh8rLEMvOgLWs7y7hkS7visUnCjTx8-KeR5q8LFp36MhyfMCFAwlYwKIx0/s1600/den-long-2.gif" />
<img border="0" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi10WZII-GDv2HZm3Ozq1_kUW4vc0aSI6XEhl1FyUinB-Q872TGLHiATZnJXWr760_rWFhVC9rwM0i-JeITV6Q-T6ivofTlw7V_6Dh7dDmmGG54KcoCrj719JW1Fae1mSfVhLgnFS9qS8g/s1600/1283.gif" />
<img border="0" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-cZH3alksQIZHzAb-jXqprEnOrrD_KR1_2EEM-LoxwIW_xYSrpwMtbpfzS1wq1hGl7H33GDu4ebVUKX2oHbh8rLEMvOgLWs7y7hkS7visUnCjTx8-KeR5q8LFp36MhyfMCFAwlYwKIx0/s1600/den-long-2.gif" />
<img border="0" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi10WZII-GDv2HZm3Ozq1_kUW4vc0aSI6XEhl1FyUinB-Q872TGLHiATZnJXWr760_rWFhVC9rwM0i-JeITV6Q-T6ivofTlw7V_6Dh7dDmmGG54KcoCrj719JW1Fae1mSfVhLgnFS9qS8g/s1600/1283.gif" />
<img border="0" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-cZH3alksQIZHzAb-jXqprEnOrrD_KR1_2EEM-LoxwIW_xYSrpwMtbpfzS1wq1hGl7H33GDu4ebVUKX2oHbh8rLEMvOgLWs7y7hkS7visUnCjTx8-KeR5q8LFp36MhyfMCFAwlYwKIx0/s1600/den-long-2.gif" />
<img border="0" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi10WZII-GDv2HZm3Ozq1_kUW4vc0aSI6XEhl1FyUinB-Q872TGLHiATZnJXWr760_rWFhVC9rwM0i-JeITV6Q-T6ivofTlw7V_6Dh7dDmmGG54KcoCrj719JW1Fae1mSfVhLgnFS9qS8g/s1600/1283.gif" />
<img border="0" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-cZH3alksQIZHzAb-jXqprEnOrrD_KR1_2EEM-LoxwIW_xYSrpwMtbpfzS1wq1hGl7H33GDu4ebVUKX2oHbh8rLEMvOgLWs7y7hkS7visUnCjTx8-KeR5q8LFp36MhyfMCFAwlYwKIx0/s1600/den-long-2.gif" />
<img border="0" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi10WZII-GDv2HZm3Ozq1_kUW4vc0aSI6XEhl1FyUinB-Q872TGLHiATZnJXWr760_rWFhVC9rwM0i-JeITV6Q-T6ivofTlw7V_6Dh7dDmmGG54KcoCrj719JW1Fae1mSfVhLgnFS9qS8g/s1600/1283.gif" />
<img border="0" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-cZH3alksQIZHzAb-jXqprEnOrrD_KR1_2EEM-LoxwIW_xYSrpwMtbpfzS1wq1hGl7H33GDu4ebVUKX2oHbh8rLEMvOgLWs7y7hkS7visUnCjTx8-KeR5q8LFp36MhyfMCFAwlYwKIx0/s1600/den-long-2.gif" />
<img border="0" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi10WZII-GDv2HZm3Ozq1_kUW4vc0aSI6XEhl1FyUinB-Q872TGLHiATZnJXWr760_rWFhVC9rwM0i-JeITV6Q-T6ivofTlw7V_6Dh7dDmmGG54KcoCrj719JW1Fae1mSfVhLgnFS9qS8g/s1600/1283.gif" />
</div>
</div>
<style type='text/css">
@media screen and (max-width:800px){.banner-tet{display:none}}
</style>
Code:
<div class='banner-tet'>3- Làm trọn bộ như hình
<style type='text/css'>html{height:auto!important}body{background:none;padding-bottom:130px}</style>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFxOBptuGIx1TOP_YytuOR-pDFZHYaZeXVVnVMDKyi4TVwU3B0ordVzfVGwNlSad5cSCfCr1Wh8M16AiuxcDUrPYCQsLEojAGSSk7Rq0fNbKw5hyvFBji0uAqwGdSkAqdzZcV5-5wNQnI/s1600/buttom-tet.png' style='position:fixed;z-index:9999;bottom:0px;left:46%'/>
<div style='position:fixed;z-index:9999;bottom:0;left:0;width:100%;height:150px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_CjUWSleb7SRCRWLkgDHOsN4JddhEPqf58YYjNIdR8ctqpkJ3UnSBY8wjTvthSAAuPQVIQEaM15l1HIXpeTBxK_1kjQqaY38lCoATJ2IF0gD_yZYPamzqJJVHTaOdB4bOnkQG5_Fjx9E/s1600/bottom.png) repeat-x bottom left;'></div>
</div>
<style type='text/css">
@media screen and (max-width:800px){.banner-tet{display:none}}
</style>
Code:
<div class='banner-tet'> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAMDgDATXkPXDN2bWzPawFga-7kvzHKpVFctNbt-UbaCG5eSeSVxNQ1pNn2JGA_XqInT-EC3e5RStIDevr4FhtyMz312rYcgkoQfjB4uepIYtoCmCnHSOSXKlPI7DfiA9t2oKVN_9QdEI/s1600/banner-left-1.png" style="position:fixed; top:0;left:0;border:none;z-index:5;"/> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYD8R9CKw8RqYT1cPhX9E3QbSh8Q6rheOTVIkohlL_tTl407meQanCvjDa_l0FnuUq7zB7Hyyqh0GaA4F1-4PoIJZQKDWu2jiETywL1P3ms1lINkZ5bbYugLHhYbBQze_PMaUPOiqUbTM/s1600/banner-right-1.png" style="position:fixed; top:0;right:0;border:none;z-index:5;"/> <!-- bottom --> <div style='position:fixed;z-index:9999;width:100%;height:90px;bottom:0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg01JxnT7NzudT4FS0ulYsbtjly_LLRPGaKijhTQsffbSiMTd2jq2lvMuA_dCm9jcN8MCz-5hWEtlS6NAG6fJXAgFNSPPZus7kHpRQLGnUMFMcJVrp6rw0n4YsOOibIkBRGsbPk57pKqYY/s1600/banner-footer-1.png) no-repeat bottom center;'></div> </div> <style type='text/css"> @media screen and (max-width:800px){.banner-tet{display:none}} </style>4- Hai ngựa cung hỷ(Tết 2014)
Code:
<div class='banner-tet'>Nếu bạn muốn có 1 dàn hoa đào hoa mai cùng các icon tượng trưng cho tết nguyên đán nằm ở header của blog và khi rê chuột vào phát ra tiếng leng keng như giàn chuông giáng sinh thì bạn tải gói hình ảnh NÀY về sau đó giải nén và up lên host lấy link thay vào phần code CSS vì tên ảnh là b-ball_n1 và b-ball_i1 bạn thay đúng ảnh tương ứng trong code là được.
<div style="left: 0px; bottom: 100px; position: fixed; z-index: 50; id="columnleft";position:relative;">
<img alt="quy ngo trai" style="border-width:0px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRrGI2JAZNVm8m6aaW1sRVBretHFOs55PeTV1TxByNSJx7mzMiek6gvKLXBntTfzZnaqEL2f5i5ae8ixIV0ER1naERz7YdNJx8FD7Hkxqhk7LvU4j9NTJFCND4gdogqsMKilp9rdb9uoc/s1600/Quy-ngo_left.png" width="140" height="229" />
</div>
</div>
<div style="right: 0px; bottom: 100px; position: fixed; z-index: 50;id="columnright";
position:relative;">
<img alt="quy ngo phai" style="border-width:0px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8XOLjkSP8aN60E_IvwKjZbA7TT0duDPSfM1bKZbmW2tUm2zg5EFuRVhF__Haw-BhefThxYeEoD8iv8cAgJ7d2qFw59Mn9Wr0Z43MLz6Mx2Z2g8KsuG9d6KEVtlMhMHrRPxNG2yoBIVLI/s1600/Quy-ngo_right.png" width="140" height="229" />
</div>
</div>
</div>
<style type='text/css">
@media screen and (max-width:800px){.banner-tet{display:none}}
</style>
Theo phần C của bài này
Code này khá nặng và phải đụng chạm tới template nên phải cẩn thận và hết tết nên khẩn trương gỡ ra.
Trang trí bằng Flash
- Hai dây đèn lồng
Code:
<div class='banner-tet'>- Đèn lồng và pháo
<div style="top: 0px; left: 2px; position: fixed;">
<embed align="middle" allowscriptaccess="always" height="250" pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" src="https://b4d5bbfe-a-62cb3a1a-s-sites.googlegroups.com/site/flashdautocrazy/cmnm.swf" type="application/x-shockwave-flash" width="150" wmode="transparent"></embed></div>
<div style="top: 0px; position: fixed; right: 2px;">
<embed align="middle" allowscriptaccess="always" height="250" pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" src="https://b4d5bbfe-a-62cb3a1a-s-sites.googlegroups.com/site/flashdautocrazy/aktv.swf" type="application/x-shockwave-flash" width="150" wmode="transparent"></embed></div>
</div>
<style type='text/css">
@media screen and (max-width:800px){.banner-tet{display:none}}
</style>
Code:
Các bạn điiều chỉnh chiều rộng(width) chiều cao(height) của flash cho phù hợp với blogweb của mình.
<div class='banner-tet'>
<div style="top: 0px; left: 2px; position: fixed;">
<embed height="250" pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" src="https://b4d5bbfe-a-62cb3a1a-s-sites.googlegroups.com/site/flashdautocrazy/phao-mai.swf" type="application/x-shockwave-flash" width="150" wmode="transparent"></embed></div>
<div style="top: 0px; position: fixed; right: 2px;">
<embed height="250" pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" src="https://b4d5bbfe-a-62cb3a1a-s-sites.googlegroups.com/site/flashdautocrazy/den-long-phai.swf" type="application/x-shockwave-flash" width="150" wmode="transparent"></embed></div>
</div>
<style type='text/css">
@media screen and (max-width:800px){.banner-tet{display:none}}
</style>
Lưu ý trang trí này chỉ dùng trên PC còn muốn dùng cho mobile nên xài ở đây
Chúc thành công!