Trang trí tết 2017 cho blogspot

Trang trí tết 2017 cho blogspot
Tuy là hướng dẫn trang trí tết 2017 cho blogspot nhưng với các code này bạn có thể sử dụng trang trí tết Nguyên Đán cho Blogspot vào các năm sau như: 2018, 2019...và nhiều tết nữa với việc thay đổi ảnh và thay đổi text là bạn đã có thể làm code phù hợp với tết hiện tại.

Trước đây đã có bài hướng dẫn trang trí đón tết Nguyên Đán cho blogspot:
- Câu đối banner ảnh hoặc flash Tại đây
- Pháo hoa cho blogspot đời cũ Tại đây
- Pháo hoa cho blogspot mọi màu nền cực đẹp Tại đây
- Pháo hoa cho blogspot nền đen Tại đây
- Đồng hồ đếm ngược thời gian tới tết bằng javascript Tại đây
- Đồng hồ đếm ngược thời gian tới tết bằng Flash Tại đây
Bạn có thể tham khảo và xem có lựa chọn được code nào không và tùy biến theo cách của mình.
Tại bài này xin chia sẻ một vài kiểu trang trí tết 2017 cho blogspot độc đáo.

KIỂU 1
DEMO
- Blogspot cần có thư viện jquery
- Cách thực hiện thì đơn giản bạn chỉ việc thêm đoạn code sau vào trước thẻ </body> hoặc là thêm một tiện ích HTML/javascript
Code:
<!-- Tết -->
<style>
#loading-wrapper{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000}
#loading{display:block;position:relative;left:50%;top:50%;width:225px;height:225px;background:none;z-index:1002;margin:-112.5px 0 0 -112.5px}
#loading-wrapper .loading-section{position:fixed;top:0;width:50%;height:100%;background:#f1f1f1;z-index:1000;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}
#loading-wrapper .loading-section.section-left{background:#bc0808 url(https://4.bp.blogspot.com/-hH3H_MC3y1Y/WGkS6h7bo3I/AAAAAAAADwg/SD1acaiP1M4PRXwcdUlyBVbJglR-mLLhwCLcB/s1600/ga1.png) top right no-repeat;left:0}
#loading-wrapper .loading-section.section-right{background:#bc0808 url(https://4.bp.blogspot.com/-80DOqxpBfFg/WGkS6uorQuI/AAAAAAAADwk/sMvJdkeTnkomAcKYXA1CgTXlTrWMqgnsgCLcB/s1600/ga2.png) top left no-repeat;right:0}
#loading-wrapper .loading-section.section-left a,#loading-wrapper .loading-section.section-right a{width:70%;height:100%;cursor:pointer;display:block}#loading-wrapper .loading-section.section-right a{margin-left:30%}
.loaded #loading-wrapper .loading-section.section-left{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);-webkit-transition:all .7s .3s cubic-bezier(0.645,0.045,0.355,1.000);transition:all .7s .3s cubic-bezier(0.645,0.045,0.355,1.000)}
.loaded #loading-wrapper .loading-section.section-right{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);-webkit-transition:all .7s .3s cubic-bezier(0.645,0.045,0.355,1.000);transition:all .7s .3s cubic-bezier(0.645,0.045,0.355,1.000)}
.loaded #loading{opacity:0;-webkit-transition:all .3s ease-out;transition:all .3s ease-out}
.loaded #loading-wrapper{visibility:hidden;-webkit-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%);-webkit-transition:all .3s 1s ease-out;transition:all .3s 1s ease-out}
.adswide{margin:0 auto;padding:0;width:980px}
.contenttdb{position:relative;z-index:1000}
._label_ h2{animation: fadeInDown 2s;font-size:50px;font-weight:500;color:#FFF;letter-spacing:0;margin:0;padding:0;font-family:Lobster;text-transform:uppercase}
._label_ p{animation: slideIn 3s;text-transform: capitalize;font-size:30px;font-weight:100;color:white;margin:25px 0 0;padding:0}
._label_{margin:0 auto;text-align:center;padding:0}
@-webkit-keyframes sdb05{
0% {opacity: 0}
50% {opacity: 1}
100% {opacity: 0}}
@keyframes sdb05{
0% {opacity: 0}
50% {opacity: 1}
100% {opacity: 0}}
@keyframes slideIn {0%{opacity:0;transform:translateY(-500px)}100 {opacity:1;transform:translateY(0)}}
@-webkit-keyframes slideIn {0%{opacity:0;transform:translateY(-500px)}100 {opacity:1;transform:translateY(0)}}
@keyframes fadeInDown {0%{opacity:0;transform:translateY(-250px)}100 {opacity:1;transform:translateY(0)}}
@-webkit-keyframes fadeInDown {0%{opacity:0;transform:translateY(-250px)}100 {opacity:1;transform:translateY(0)}}
@keyframes slideToLeft {
  0% {position:relative;left:1000px}
  100%{position:relative;left:0}
}

@keyframes trangtritet {
  0% {opacity:0}
  100%{opacity:1}
}
</style>
<script>
$(document).ready(function() {
 setTimeout(function(){
  $('body').addClass('loaded');
 }, 4000);
});
</script>
<div id='loading-wrapper'>
<div id='loading'></div>
<div class='loading-section section-left'><a href='/' target='_top'></a></div>
<div class='loading-section section-right'><a href='/' target='_top'></a></div>
<div class='contenttdb'>
<div class='_label_'>
<h2 class='_title'>chúc mừng năm mới 2017</h2>
<p>An khang thịnh vượng - Vạn sự như ý</p>
</div>
</div>
</div>
Trong đó 4000(bôi màu) là thời gian quy định cho nội dung mất khỏi màn hình.
KIỂU 2
Với kiểu trang trí tết 2017 cho blogspot này thì nội dung trang trí không tự động tắt theo thời gian bạn quy định mà bạn có thể tắt trực tiếp bằng cách click vào 3 dấu trỏ xuống.Code cũng có phần nhẹ nhàng hơn.

DEMO
Bước 1:
Thêm link font Lobster
<script type='text/javascript'>
      //<![CDATA[
      //CSS Ready
      function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
      loadCSS("//fonts.googleapis.com/css?family=Droid+Sans|Ruda:400,700|Lobster");
      //]]>
    </script>
Nếu đang dùng đoạn javascript này thì thêm đoạn sau vào sau dấu chấm phẩy (;) trong javascript đó
loadCSS("//fonts.googleapis.com/css?family=Droid+Sans|Ruda:400,700|Lobster");
Bước 2:
Thêm css sau vào trước thẻ </head>
<style type='text/css'>
#happy_new_year{position: relative; display:table;width:100%; height: 100vh; margin: 0!important; padding: 0!important; z-index: 999; background: url(https://4.bp.blogspot.com/--5SDfFX0gxs/WG6A2gFgHZI/AAAAAAAADxE/diXIMWA0QB4KdWbakE1jkUV3-dn-wcNSACLcB/s1600/ga-tet.jpg) no-repeat center center fixed!important; background-size: cover!important;-webkit-user-select:none;-moz-user-select:none;-o-user-select:none}
#happy_new_year:before{content:'';opacity:0.5;position:absolute;top:0;right:0;bottom:0;left:0;z-index:0}
#happy_new_year:after{content:'';z-index:0;position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(rgba(12, 23, 36, 0),rgba(12,23,36,0) 0%,rgba(12, 23, 36, 0.43))}
.noi_dung{position:relative;z-index:3}
._label_ h2{animation: fadeInDown 2s;font-size:50px;font-weight:500;color:#FFF;letter-spacing:0;margin:0;padding:0;font-family:Lobster;text-transform:uppercase}
._label_ p{animation: slideIn 3s;text-transform: capitalize;font-size:30px;font-weight:100;color:white;margin:25px 0 0;padding:0}
._label_{margin:0 auto;text-align:center;padding:0}
.degrees-index-hero-quote-img-meta_{text-align:center;max-width:215px;margin:0 auto}
.button-down a{position:absolute;bottom:10%;left:50%;z-index:2;display:inline-block;-webkit-transform:translate(0,-50%);transform:translate(0,-50%);color:#fff;font:normal 400 20px/1 'Josefin Sans',sans-serif;letter-spacing:.1em;text-decoration:none;transition:opacity .3s}
.meta_{display: table-cell; vertical-align: middle; text-align: center}
#button-down a span{
position:absolute;
top:-45px;
left:50%;
width:30px;
height:30px;
margin-left:-12px;
border-left:1px solid #FFF;
border-bottom:1px solid #fff;
-webkit-transform:rotate(-45deg);
transform:rotate(-45deg);
-webkit-animation:sdb05 2s infinite;
animation:sdb05 2s infinite;
box-sizing:border-box}
@-webkit-keyframes sdb05{
0% {opacity: 0}
50% {opacity: 1}
100% {opacity: 0}}
@keyframes sdb05{
0% {opacity: 0}
50% {opacity: 1}
100% {opacity: 0}}
#button-down a span:nth-of-type(1){-webkit-animation-delay:0s;animation-delay:0s}
#button-down a span:nth-of-type(2){-webkit-animation-delay:.2s;animation-delay:.2s}
#button-down a span:nth-of-type(3){-webkit-animation-delay:.4s;animation-delay:.4s}
@keyframes slideIn {0%{opacity:0;transform:translateY(-500px)}100 {opacity:1;transform:translateY(0)}}
@-webkit-keyframes slideIn {0%{opacity:0;transform:translateY(-500px)}100 {opacity:1;transform:translateY(0)}}
@keyframes fadeInDown {0%{opacity:0;transform:translateY(-250px)}100 {opacity:1;transform:translateY(0)}}
@-webkit-keyframes fadeInDown {0%{opacity:0;transform:translateY(-250px)}100 {opacity:1;transform:translateY(0)}}
@keyframes slideToLeft {
  0% {position:relative;left:1000px}
  100%{position:relative;left:0}
}

@keyframes trangtritet {
  0% {opacity:0}
  100%{opacity:1}
}

</style>
Bước 3:
Thêm đoạn html sau vào ngay sau thẻ <body>
<div id='happy_new_year'>
<div class='meta_'>
<div class='noi_dung'>
<div class='_label_'>
<h2 class='_title'>Chúc mừng năm mới 2017</h2>
<p>An khang thịnh vượng - Vạn sự như ý</p>
</div>
</div></div>
<div class='meta_'>
<style>.wrapper{margin:10px auto}</style>
</div>
<section class='button-down' id='button-down'>
<a href='#continue'><span></span><span style='margin-top: 15px'></span><span style='margin-top: 30px'></span></a>
</section>
</div>
<div id='continue'></div>
Nếu bạn muốn nội dung trang trí tết cho blogspot chỉ ở trang chủ thì bạn bao quanh đoạn html trên trong thẻ điều kiện sau:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
Nội dung đoạn html 
</b:if>
- Với kiểu 1 thì bạn cũng bao toàn bộ code như vậy (nhưng chỉ với trường hợp code bạn đặt trong mẫu)
- Còn với code đặt theo kiểu thêm tiện ích HTML/javascript thì làm như sau.
Bạn vào phần bố cục và xác định ID của tiện ích đó bằng cách xem số ở cuối dòng trong ảnh
Trang trí tết 2017 cho blogspot
Ví dụ trong ảnh ID là 3.
Bạn vào phần chỉnh sửa mẫu tìm đến tiện ích javascript/HTML có ID là HTML3(ví dụ vậy),trong phần code từ <b:widget id='HTML3'........tới </b:widget> có 1 cặp thẻ
<b:includable id='main'>
                  <b:if cond='data:title != &quot;&quot;'>
                    <h2 class='title'>
                      <data:title/>
                    </h2>
                  </b:if>
                  <div class='widget-content'>
                    <data:content/>
                  </div>
                </b:includable>
Bạn sửa nó thành
<b:includable id='main'>
                  <b:if cond='data:blog.url == data:blog.homepageUrl'>
                  <b:if cond='data:title != &quot;&quot;'>
                    <h2 class='title'>
                      <data:title/>
                    </h2>
                  </b:if>
                  <div class='widget-content'>
                    <data:content/>
                  </div>
                </b:if>
                </b:includable>
Năm mới An Khang Thịnh Vượng!

Xem thêm

- Trang trí tết Kỷ Hợi 2019
Publis: 

Post a Comment

🙂😬😀😂🤣😍💖
Windows + . hoặc Windows + ; để chèn emoji