Chào các bạn hôm nay mình xin chia sẻ đến các bạn cách tạo một intro siêu chất cho blogger ... Intro này được mình lấy từ trong template khoi rồm blog v5.0 ra mình thấy khá đẹp và chuyên nghiệp nên mình share cho các bạn luôn.
HƯỚNG DẪN CÀI ĐẶT INTRO
Các bạn copy đoạn code sau bỏ vào thẻ dưới thẻ <body> của blogger và lưu lại là được.Lưu ý : hiện tại mình chỉ cho nó hiển thị theo từng page không hiển thị ở trang chủ , nếu bạn muốn cho nó hiển thị theo ý thì các bạn sửa lại như sau :<b:if cond='data:blog.pageType == "index"'><b:if cond='data:blog.url != data:blog.homepageUrl'>
<style>
@keyframes slybounce{0%{-webkit-transform:translate(-5px,0)}50%{-webkit-transform:translate(5px,0)}100%{-webkit-transform:translate(-5px,0)}}
@keyframes slybouncex{0%{-webkit-transform:translate(0,-5)}50%{-webkit-transform:translate(0,5px)}100%{-webkit-transform:translate(0,-5)}}
@keyframes stop1{0%,45%,100%{opacity:1}50%,95%{opacity:0}}
@keyframes stop2{0%,10%{opacity:0}15%,45%{opacity:1}50%,100%{opacity:0}}
@keyframes stop3{0%,25%{opacity:0}30%,45%{opacity:1}50%,100%{opacity:0}}
@keyframes stop4{0%,50%{opacity:0}55%,90%{opacity:1}95%{opacity:0}}
#service{background-color:#1f252b;position:relative;text-align:center;width:100%;background:linear-gradient(rgba(248,248,248,0.65),rgba(0,0,0,0.3)),url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQFLbbr3oWG6BiBJkxyM-N5Z90F0iuiEb-SvM8oVICTTORKfidiDZdiDx-G4HobG9VqnvphXuZG4fJ8b2bGiPjMibiV4xZhIhlSq6VS8FqcGHByLBMSxQPJ0YuM9HeRrDvtl1fs5E1Rq1G/s1600/IrisTipsNewsletteBox.jpg) fixed;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;background-size:cover;background-position:5% 10%;padding-bottom:80px;color:#fff;text-align:center;border-bottom:10px solid #fff}
#serviceinside{max-width:1050px;padding:10px 15px 0;margin:0 auto;margin-bottom:-70px;text-align:left;overflow:hidden}
#service a,#serviceinside a{color:#fff}
.serviceimage{float:right;width:50%;position:relative;text-align:center}
.serviceimage img{-webkit-animation-name:slybouncex;-webkit-animation-duration:3s;-webkit-animation-timing-function:ease-in-out;-webkit-animation-iteration-count:infinite;-webkit-animation-delay:0;-webkit-animation-play-state:running;-moz-animation-name:slybouncex;-moz-animation-duration:3s;-moz-animation-timing-function:ease-in-out;-moz-animation-iteration-count:infinite;-moz-animation-delay:0;-moz-animation-play-state:running;-ms-animation-name:slybouncex;-ms-animation-duration:3s;-ms-animation-timing-function:ease-in-out;-ms-animation-iteration-count:infinite;-ms-animation-delay:0;-ms-animation-play-state:running;-o-animation-name:slybouncex;-o-animation-duration:3s;-o-animation-timing-function:ease-in-out;-o-animation-iteration-count:infinite;-o-animation-delay:0;-o-animation-play-state:running}
.serviceimage img{margin-top:-50px}
.servicetext{float:left;color:#fff!important;text-shadow: 1px 1px 1px rgba(0,0,0,0.3);width:40%;padding:20px 0 0}
.service-title{color:#fff;font-family:'Open Sans',Helvetica,sans-serif;font-size:30px;font-weight:700;margin:0 0 4% 0;line-height:1.2;display:block}
.servicebuttons span{display: inline-block;}
.servicebuttons{padding:10px 0}
.servicebuttons .button{margin-right:10px;display:inline-block;width:170px;text-align:center}
.premium{background-color:#fda75a!important}
.premium:hover{background-color:#eb9950!important}
a.servicebutton{background-color:#a7b0b7;color:white!important;padding:10px 15px;border:0;border-radius:2px}
a.servicebutton:hover{background-color:#919aa0;color:white;border:0}
a.servicebutton:hover .fa{color:white!important;}
#serviceinner{background-color:#1f252b;text-align:center;width:100%;padding-bottom:30px;padding-top:20px;margin-bottom:-80px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQFLbbr3oWG6BiBJkxyM-N5Z90F0iuiEb-SvM8oVICTTORKfidiDZdiDx-G4HobG9VqnvphXuZG4fJ8b2bGiPjMibiV4xZhIhlSq6VS8FqcGHByLBMSxQPJ0YuM9HeRrDvtl1fs5E1Rq1G/s1600/IrisTipsNewsletteBox.jpg) fixed;border-bottom:10px solid #fff}
#serviceinner .servicetext{float:none;color:#bebebe!important;width:100%!important;padding-top:40px}
#serviceinner .service-title{margin-bottom:0}
#serviceinner .servicebuttons{float:right;margin-top:30px;margin-left:30px}
.text-fade{display:block;Font-size:20px;opacity:0;transition:opacity .3s linear;line-height:15px}
.text-fade.line1{top:0}.text-fade.line2{top:.5em}.text-fade.line3{top:1em}
.text-fade.stop1{opacity:1;-webkit-animation:stop1 10s linear infinite;-o-animation:stop1 10s linear infinite;animation:stop1 10s linear infinite}
.text-fade.stop2{-webkit-animation:stop2 10s linear infinite;-o-animation:stop2 10s linear infinite;animation:stop2 10s linear infinite}
.text-fade.stop3{-webkit-animation:stop3 10s linear infinite;-o-animation:stop3 10s linear infinite;animation:stop3 10s linear infinite}
.text-fade.stop4{-webkit-animation:stop4 10s linear infinite;-o-animation:stop4 10s linear infinite;animation:stop4 10s linear infinite}
.builder{height:115px;position:relative}
.line-top{position:absolute;top:0}
p.hidden-xs{padding:15px 0 0;line-height:15px}
@media only screen and (max-width:768px){
.serviceimage,.serviceimage img{width:100%;padding-bottom:20px;}
.servicetext{width:100%;padding:0}}
</style>
<div id='service'>
<div id='serviceinside'>
<div class='serviceimage'>
<a class='image' href='/p/blog-page.html' target='_blank'>
<img alt='Blogger Premium Services' class='hoverZoomLink' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0-RhHIUEevJYpoajsHuYO_gJ7mcbt47Msoqo1r0_DzERyqcK07r1q_Kdix15S9QUgUeYFI5ag8y8_XUMRQFBZVFGzN-pxrTe90ogFPcFV5ZXH4uYlxnU-Pwt1t1mFO4v_6mGOzseB4r-K/s500/Blogger-2.png' title='Blogger Premium Services'/>
</a>
</div>
<div class='servicetext'>
<span class='service-title'>Premium Services</span>
<div class='builder'>
<div class='line-top'>
<div class='text-fade stop1'><i class='fa fa-hand-o-right'/> Thiết kế website chuyên nghiệp<br/><br/></div>
<div class='text-fade stop2'><i class='fa fa-hand-o-right'/> Hỗ trợ cài đặt và sử dụng template<br/><br/></div>
<div class='text-fade stop3'><i class='fa fa-hand-o-right'/> Sửa lỗi, tối ưu website & hơn thế nữa<br/><br/></div>
</div>
<div class='line-top'>
<div class='text-fade stop4'><i class='fa fa-thumbs-up'/> Giá cả cạnh tranh
<p class='hidden-xs'><i class='fa fa-thumbs-up'/> Chế độ hậu đãi tận tâm</p>
<p class='hidden-xs'><i class='fa fa-thumbs-up'/> Hỗ trợ và tư vấn kỹ thuật miễn phí</p>
</div>
</div>
</div>
<div class='servicebuttons'>
<span><a class='button servicebutton premium' href='https://info-leminhut.blogspot.com' target='_blank'>Thông Tin Liên Hệ<i class='fa fa-chevron-right'/></a></span>
</div>
</div>
</div>
</div></b:if></b:if>
Tùy Chỉnh
- Ở chỗ mình tô màu đỏ nó sẽ hiện thị theo từng page không hiển thị ở trang chủ nếu bạn muốn chúng chỉ hiện thị ở trang chủ và từng page luôn thì các bạn đổi chỗ mình tô màu đỏ thành đoạn html sau .
<b:ifcond='data:blog.pageType == "index"'>
- Ngoài ra nếu bạn muốn thị tất cả vị trí thì các bạn chỉ việc xóa bỏ đoạn html mà mình tô màu đỏ là được.
- Ở chỗ mình tô màu xanh là link ảnh và nội dung bạn thay thế sao cho phù hợp với blog bạn là được nhé.
LỜI KẾT
Chúc các bạn thành công nhé
Subscribe Our Newsletter
0 Response to "Tạo intro hiệu ứng animaton tuyệt đeph cho blogger"
Đăng nhận xét