Share Code Trang Trí Với Hình Nền Và Chữ Cực Đẹp Cho Blogspot

byHồng Hải Blog • • 2 min read
8

CÁCH THỰC HIỆN
Bước 1: Copy và paste đoạn code sau vào sau thẻ <body> trong template.
<b:if cond='data:blog.url == data:blog.homepageUrl'><style>
#menu_top{position:relative;display:table;width:100%;height:100vh;margin:0!important;padding:0!important;z-index:999;background:url(http://i.imgur.com/vbP0Jy5.jpg) no-repeat center center fixed!important;background-size:cover!important;-webkit-user-select:none;-moz-user-select:none;-o-user-select:none}
#menu_top:before{content:'';opacity:0.5;position:absolute;top:0;right:0;bottom:0;left:0;z-index:0}
#menu_top: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 */
._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 */ -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 */
.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 */
@keyframes slideToLeft{0%{position:relative;left:1000px}100%{position:relative;left:0}}
</style>
<div id="menu_top">
<div class="meta_">
<a href="/" target="blank">
<div class="noi_dung">
<div class="_label_">
<h2 class="_title">Chào Mừng Bạn Đến Với HỒNG HẢI BLOG</h2>
<p>Website Chia Sẽ Thủ Thuật Facebook - Blogspot Và Ảnh Bìa Chất ,...</p>
</div>
</div>
</a></div>
<div class="xem-hd">
<a href="https://www.facebook.com/HongHai.H.T.H" target="blank" title="Liên Hệ">Liên Hệ  <i class="fa fa-angle-right"></i></a>
</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 class="meta_">
<style>.wrapper{margin:10px auto}</style>
</div>
</div>
Đ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'> đi.
Bước 2: Lưu template Lại, và ra thưởng thức thôi!
Nếu Muốn Thay Đổi Ảnh Thì Thay Link: http://i.imgur.com/vbP0Jy5.jpg Link URL hình ảnh Khác Là Được
Chúc các bạn thành công!!
4.94 / 169 rates

8 Nhận xét

Đăng nhận xét
Mới hơn Cũ hơn