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.

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

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

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

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)

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 class='banner-tet'>

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

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



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

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

Thủ thuật blogspot

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

Post a Comment

Tạo tiện ích điều hướng breadcrumbs cho blogspot

Cài đặt mật khẩu cho các bài viết riêng lẻ trên blogspot/blogger mới nhất

Cải thiện và tăng tốc độ tải trang cho blogspot-Optimal speed for blogspot/website

Code meta seo onpage đầy đủ gọn nhẹ mới nhất

Tải về miễn phí mẫu blogger cao cấp Appiki - App Store không bản quyền chân trang

Thủ thuật blogspot®