Trang trí Blog ngày tết với hình nền và chữ full màn hình cực đẹp

#Thủ Thuật #Windows #Blogger #Facebook

Trang trí Blog ngày tết với hình nền và chữ full màn hình cực đẹp

Share:
Nhân dịp Tết 2017, mình tiếp tục với series trang trí blog với nhiều hiệu ứng. Thấy nhiều bạn cũng thích ý tưởng này rồi xin về blog của họ, nên hôm nay mình sẽ giới thiệu đến các bạn một ý tưởng trang trí blog mới với ảnh nền full tràn màn hình cùng dòng chữ Chúc Mừng Năm Mới ngay giữa.
Demo xem tại trang chủ của blog mình luôn nhé!
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:&#39;&#39;;opacity:0.5;position:absolute;top:0;right:0;bottom:0;left:0;z-index:0}
#happy_new_year:after{content:&#39;&#39;;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:&quot;Roboto Condensed&quot;,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 &#39;Josefin Sans&#39;,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).
Anh em nào đã áp dụng rồi thì để lại link blog cho mọi người ghé qua xem thử như nào nhé! Chúc các bạn, anh em blogger, những người độc giả của blog Bác Sĩ Windows năm mới an khang thịnh vượng, vạn sự như ý và dồi dào sức khỏe!
CHUYÊN MỤC

Bài Viết Liên Quan

Bình Luận Gần Đây

4 Nhận xét

- s tui làm bên blog tui thì mất thanh menu bác hỗ trợ lại cho tui đi

Bạn cho mình xem demo bạn làm bên blog của bạn nhé

- mình ms đổi theme nên cần khắc phục lỗi cái chữ to năm ở trên s nó che mất một phần chữ ở dưới
http://www.thanhphuit.tk/ link đó nha bạn

Nhận xét này đã bị tác giả xóa.

Một số lưu ý khi bình luận
● Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước.
● Tích vào ô Thông báo cho tôi (Notify me) để nhận thông báo phản hồi của Admin.
● Không chửi tục, nói bậy, quảng cáo thông qua khung Comment.
● Để bình luận một đoạn code, hãy mã hóa code trước nhé.