[CODE] TRANG TRÍ BLOG NGÀY TẾT VỚI HÌNH NỀN VÀ CHỮ SIÊU ĐẸP

[CODE] TRANG TRÍ BLOG NGÀY TẾT VỚI HÌNH NỀN VÀ CHỮ SIÊU ĐẸP

Tết thì đang đến gần, Blog sẽ tiếp tục với series trang trí blog ngày Tết như đã dự đinh. Hôm nay, cũng ko ngoại lệ, mình sẽ viết bài này hướng dẫn các bạn tạo hình nền và chữ full màn hình đệp để trang trí cho blog mỗi khi load :). Bài này, thì mình thấy bên Blog Thủ Thuật có đăng mình đã để lại nguồn và xin chủ bài viết rồi nên mong các bạn ủng hộ ( mình có viết lại 1 số chỗ), nói vậy để các bạn không hiểu nhầm Blog mình :) hihi
DEMO:

Các bước thự hiện như sau:

Bước 1: Đăng nhập Blogger Mẫu Chỉnh sửa HTML.
Bước 2: Copy và paste đoạn code sau vào sau thẻ <body> trong template.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
#happy_new_year{position:relative;display:table;width:100%;height:100vh;margin:0!important;padding:0!important;z-index:999;background:url(https://2.bp.blogspot.com/-wp5c9Ln0T-8/WGpufIIVYaI/AAAAAAAACFk/MAoTyJG06Ocd36df-M0qelbkLCQ3GZS4ACLcB/s1600/gai-dep-blogttcn-blogspot-com%2B%25283%2529.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(transparent,rgba(51, 51, 51, 0.15) 0%,rgba(12,23,36,0.4))}
.noi_dung{position:relative;z-index:3}/* code by blogttcn.blogspot.com */
._label_ h2{animation:zoomInUp 6s;font-size:55px;font-weight:700;color:rgba(255,255,255,.85);letter-spacing:0;margin:0;padding:0;font-family:"Roboto Condensed",sans-serif;text-transform:uppercase}
@keyframes zoomInUp { from { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } }
@keyframes zoomInDown { from { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);/* code by blogttcn.blogspot.com */ -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } }
._label_ p{animation:zoomInDown 4s;text-transform:capitalize;font-size:30px;font-weight:300;color:rgba(255,255,255,0.7);margin: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}/* code by blogttcn.blogspot.com */
.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}
#button-down a{animation:zoomInDownn 8s}
@keyframes zoomInDownn {0%{opacity:0}50%{opacity:0}100%{opacity:1}}
@-moz-keyframes zoomInDownn {0%{opacity:0}50%{opacity:0}100%{opacity:1}}
@-webkit-keyframes zoomInDownn {0%{opacity:0}50%{opacity:0}100%{opacity:1}}
@-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)}}
.xem-hd{text-align:right;width:1080px;font-size:16px;color:#fff;text-transform:uppercase;letter-spacing:0;font-weight:300;position:absolute;bottom:20px;right:30px;z-index:9999}
.xem-hd a{color:rgba(255,255,255,.5);animation:slideToLeft 2s}
.xem-hd a:hover{color:#fff}/* code by blogttcn.blogspot.com */
@keyframes slideToLeft{0%{position:relative;left:1000px}100%{position:relative;left:0}}
</style>
<div id='happy_new_year'>
<div class='meta_'>
<a target='blank' href='https://blogttcn.blogspot.com'>
<div class='noi_dung'>
<div class='_label_'>
<h2 class='_title'>chúc mừng năm mới 2017</h2>
<p>Chúc mừng năm mới - An khang thịnh vượng - Vạn sự như ý!</p>
</div>
</div> </a></div>
<div class='xem-hd'>
<a href='http://blogttcn.blogspot.com/2017/01/trang-tri-blog-ngay-tet-voi-hinh-nen-va-chu-full-man-hinh-cuc-dep.html' target='blank' title='Xem hướng dẫn'>Xem hd <i class='fa fa-angle-right'/></a>
</div>
<section class='button-down' id='button-down'>
<a href='#continue'><span/><span style='margin-top: 15px'/><span style='margin-top: 30px'/></a>
</section>
<div class='meta_'>
<style>.wrapper{margin:10px auto}</style>
</div>
</div>
<div id='continue'/>
</b:if>

Đoạn code trên đây là chỉ giới hạn hiển thị ở trang chủ blog. Nếu bạn muốn hiển thị ở tất cả các trang thì xóa đoạn màu cam đi.
Bước 3: Lưu template, và ra trang chủ thưởng thức thôi! Tuyệt vời !!
Dưới đây là một số hình ảnh khác, bạn nào thích hình khác thì có thể thay nhé. (Click vào ảnh chọn Sao chép URL hình ảnh, rồi thay vào đoạn màu đỏ ở trên).