Trang Trí Đón Tết Nguyên Đán Cho Blogspot

Trang Trí Đón Tết Nguyên Đán Cho Blogspot
Mùa xuân đã về,tết sắp tới.Không khí xuân tràn ngập mọi phố phường,trong thế giới ảo với những ngôi nhà blogspot chúng ta cũng nên để cho mọi người khi bước chân vào đều cảm nhận được cái không khí xuân đã về.
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.

áp dụng vào Blogspot
Xem thử DEMO qua ảnh
Trang Trí Đón Tết Nguyên Đán Cho Blogspot
Ở đâ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:
Trang Trí Đón Tết Nguyên Đán Cho Blogspot
Code:
<div class='banner-tet'>
<img src="http://3.bp.blogspot.com/-k5hUYj1Om7A/Uscw7H4bUCI/AAAAAAAABSY/tdL13KfBYHU/s1600/dao-01.png" style="position:fixed; top: 0px;left:-0px;border:none;z-index:5;"/>
<img src="http://1.bp.blogspot.com/-wNco8MXkCcg/Usg7eMesj0I/AAAAAAAAkk0/fFfPNSlaI0I/s1600/hoa.mai.png" style="position:fixed; top: 0px;right:-20px;border:none;z-index:5;"/>
<img src="http://1.bp.blogspot.com/-i71FPoBkDXo/Usc92pIZRvI/AAAAAAAABTA/3Bb2X6vzxNA/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="http://2.bp.blogspot.com/-12Z9TeklSxs/UsdLoH5Zx3I/AAAAAAAABTo/x-Jg1MY30BI/s1600/1283.gif" />
<img border="0" height="100" src="http://2.bp.blogspot.com/-PKjmFUzhwLI/UshQy2U1WSI/AAAAAAAABUI/WB_0vXgtIc0/s1600/den-long-2.gif" />
<img border="0" height="100" src="http://2.bp.blogspot.com/-12Z9TeklSxs/UsdLoH5Zx3I/AAAAAAAABTo/x-Jg1MY30BI/s1600/1283.gif" />
<img border="0" height="100" src="http://2.bp.blogspot.com/-PKjmFUzhwLI/UshQy2U1WSI/AAAAAAAABUI/WB_0vXgtIc0/s1600/den-long-2.gif" />
<img border="0" height="100" src="http://2.bp.blogspot.com/-12Z9TeklSxs/UsdLoH5Zx3I/AAAAAAAABTo/x-Jg1MY30BI/s1600/1283.gif" />
<img border="0" height="100" src="http://2.bp.blogspot.com/-PKjmFUzhwLI/UshQy2U1WSI/AAAAAAAABUI/WB_0vXgtIc0/s1600/den-long-2.gif" />
<img border="0" height="100" src="http://2.bp.blogspot.com/-12Z9TeklSxs/UsdLoH5Zx3I/AAAAAAAABTo/x-Jg1MY30BI/s1600/1283.gif" />
<img border="0" height="100" src="http://2.bp.blogspot.com/-PKjmFUzhwLI/UshQy2U1WSI/AAAAAAAABUI/WB_0vXgtIc0/s1600/den-long-2.gif" />
<img border="0" height="100" src="http://2.bp.blogspot.com/-12Z9TeklSxs/UsdLoH5Zx3I/AAAAAAAABTo/x-Jg1MY30BI/s1600/1283.gif" />
<img border="0" height="100" src="http://2.bp.blogspot.com/-PKjmFUzhwLI/UshQy2U1WSI/AAAAAAAABUI/WB_0vXgtIc0/s1600/den-long-2.gif" />
<img border="0" height="100" src="http://2.bp.blogspot.com/-12Z9TeklSxs/UsdLoH5Zx3I/AAAAAAAABTo/x-Jg1MY30BI/s1600/1283.gif" />
</div>
</div>
<style type='text/css">
@media screen and (max-width:800px){.banner-tet{display:none}}
</style>

2- Tưng bừng đón tết ở đáy Blogspot:

Trang Trí Đón Tết Nguyên Đán Cho Blogspot
Code:
<div class='banner-tet'>
<style type='text/css'>html{height:auto!important}body{background:none;padding-bottom:130px}</style>
<img src='http://4.bp.blogspot.com/-aotIQzUP53Y/UsplbN0KstI/AAAAAAAABVE/gUS_nHPuKWI/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(http://2.bp.blogspot.com/-BrhuYuCHZzw/UsplbN77wNI/AAAAAAAABVI/ixwE3JIdG6k/s1600/bottom.png) repeat-x bottom left;'></div>
</div>
<style type='text/css">
@media screen and (max-width:800px){.banner-tet{display:none}}
</style>

3- Làm trọn bộ như hình
Trang Trí Đón Tết Nguyên Đán Cho Blogspot
Code:
<div class='banner-tet'>
<img src="https://1.bp.blogspot.com/-yWsk0FfBC6A/WGmSpEO11-I/AAAAAAAACbg/xxWUUZV3TzUgxt3YZkv5MQNScV4Q3RExwCLcB/s1600/banner-left-1.png" style="position:fixed; top:0;left:0;border:none;z-index:5;"/>
<img src="https://2.bp.blogspot.com/-NewpKtC1BSs/WGmSpK3woiI/AAAAAAAACbc/1Ul3C6dZPr4G4lnhkAzFnOGdU4bCnORPQCLcB/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://4.bp.blogspot.com/-iAcEiadi68o/WGmQ7uiaZ0I/AAAAAAAACbQ/Y_b0NyEovMgwrxEyntycw1CaNksq74xYQCLcB/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)

Trang Trí Đón Tết Nguyên Đán Cho Blogspot
Code:
<div class='banner-tet'>
<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="http://2.bp.blogspot.com/-DwFRJsS4cvs/Uspmo_ZWSCI/AAAAAAAABVU/gK7Lh9L-pKs/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="http://1.bp.blogspot.com/-MwZk4cD-PBQ/UspmpZS6sSI/AAAAAAAABVc/BYzXokaUtLU/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>

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.
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 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>

- Đèn lồng và pháo
Code:

<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>

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.
Chúc thành công!
Nhận xét

Không có nhận xét nào :