Trang trí Blog với hình nền full màn hình cực đẹp

Lang thang trên mạng thấy 1 trang web co chia se về cách trang trí Blog ngày tết với hình nền và chữ full màn hình cực đẹp . Demo các bạn có thể tham thảo trực tiếp tại trang chủ luôn nhé

Thứ 1 : Đặng nhập vào trang Blogspot > Mẫu> Chỉnh sửa HTML

Thứ 2 : Copy và dán đoạn code sau dưới 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

"<b:if cond='data:blog.url == data:blog.homepageUrl'>"

 "</b:if> " và  đi.

Cuối cùng bạn lưu lại và quay trở lại trang chủ thưởng thức thành quả của mình

Ngoài ra bạn có thể chèn nhạc nền vào trong thông qua đoạn code bên dưới

<iframe scrolling="no" width="1" height="1" src="http://mp3.zing.vn/embed/song/ZW79ZBE8" frameborder="0" allowfullscreen="true"></iframe>

Nguồn: www.bacsiwindows.com