Thủ thuật blogspot - Dautoblog

Trang trí tết 2017 cho blogspot

Trang trí tết 2017 cho blogspot
Mùa đông giá lạnh đang dần qua,mùa xuân đang về,tết sắp tới.Không khí xuân tràn ngập mọi ngóc ngách của phố phường thôn bản,trong thế giới ảo với những ngôi nhà blogspot của 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 đang về.
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.

Nguồn: http://www.giangna.com/2017/01/blogger-viet-2017-code-trang-tri-tet.html
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!
Nhận xét
Facebook
Blogger