Tạo intro Chúc Mừng Năm Mới tuyệt đẹp chỉ bằng CSS và HTML

Tác giả Vũ Trường

Xuất bản

Hello xin chào tất cả các bạn, chào mừng các bạn đã quay lại với blog Bác Sĩ Windows.
Bài viết đầu tiên trên blog cũng là bài viết mình tâm đắc và yêu thích nhất trong các thủ thuật blogspot mà mình từng viết. Tại vì nhìn nó đẹp vch kkk

Cụ thể đây là bài viết hướng dẫn các bạn làm một đoạn chữ giới thiệu giữa màn hình kèm theo một số hiệu ứng bằng CSS để trang trí cho blog bạn thêm phần đẹp và sinh động hơn, có thể xem demo ngay tại trang chủ. Giống như cái bài viết hồi lúc trước mình viết để trang trí tết gì gì ấy quên rồi, bài viết này là mình lấy lại code từ đó rồi chỉnh sửa một tí theo sở thích các nhân nhìn cho phù hợp với blog!
Live DemoKhông tinh linh luyên thuyên nữa, bắt đầu thôi!

Các bước thực hiện

Bước 1. Vào trang chỉnh sửa HTML của Blogspot.
Bước 2. Tim thẻ <body> và dán đoạn code dưới đây vào phía sau thẻ đó.

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<style>
#intro_homepage{position:relative;display:table;width:100%;height:60vh;margin:0!important;padding:0!important;z-index:999;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRdFI0Lg_STryRelW4X3Z863-_-GfHXVihSLOElT57Sk7TgNVoDj-xPpz0X1yNPMAkqEsDsd1pvOpPCo1yicoqGFx1_7iYUyG1imI_2zspan9joRqT5xQRjvsP2tzF3byXMVwwvRJcX17Q/s1600/beautiful-girl------------www-bacsiwindows-com+%25288%2529.jpg) no-repeat center center!important;background-size:cover!important}
#intro_homepage:before{content: &#39;&#39;; opacity: 1; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; background: linear-gradient(transparent, #050a18)}
#intro_homepage: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))}
.intro_homepage_content{position:relative;z-index:3}
.intro_label h2{animation:zoomInUp 6s;font-size:45px;font-weight:700;color:rgba(255,255,255,.85);letter-spacinggg:0;margin:0 0 .25em;padding:0;font-family:&quot;Roboto Condensed&quot;,sans-serif;text-transform:uppercase}
.intro_label p{animation: zoomInDown 4s; text-transform: uppercase; font-size: 16px; font-weight: 400; color: rgba(255,255,255,0.7); margin: 0; padding: 0; letter-spacing: 2px}
.intro_label{margin:0 auto;text-align:center;padding:0}
.intro_buttondown 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-spacinggg:.1em;text-decoration:none;transition:opacity .3s}
.meta_{display:table-cell;vertical-align:middle;text-align:center}
#intro_buttondown a span{position:absolute;top:-45px;left:50%;width:22px;height:22px;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}
#intro_buttondown a{animation:zoomInDownn 8s}
@-webkit-keyframes sdb05{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
@keyframes sdb05{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
#intro_buttondown a span:nth-of-type(1){-webkit-animation-delay:0s;animation-delay:0s}
#intro_buttondown a span:nth-of-type(2){-webkit-animation-delay:.2s;animation-delay:.2s}
#intro_buttondown a span:nth-of-type(3){-webkit-animation-delay:.4s;animation-delay:.4s}
.xem-hd{text-align:right;width:1080px;font-size:16px;color:#fff;text-transform:uppercase;letter-spacinggg: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}
</style>
<div id='intro_homepage'>
<div class='meta_'>
<div class='intro_homepage_content'>
<div class='intro_label'>
<h2 class='_title'><i aria-hidden='true' class='fa fa-gg' style='margin:0 20px 0 0'/>Chúc Mừng Năm Mới 2018<i aria-hidden='true' class='fa fa-gg' style='margin:0 0 0 20px'/></h2>
<p>An Khang Thịnh Vương - Vạn Sự Như Ý - Bác Sĩ Windows</p>
</div>
</div></div>
<div class='xem-hd'>
  <a href='/' target='blank' title='Xem hướng dẫn'>Xem hd <i class='fa fa-angle-right'/></a>
</div>
<section class='intro_buttondown' id='intro_buttondown'>
<a href='#continue'><span/><span style='margin-top: 10px'/><span style='margin-top: 20px'/></a>
</section>
<div class='meta_'>
</div>
</div>
<div id='continue'/>
</b:if>

Bước 3. Lưu mẫu, và thưởng thức thôi!

Tùy chỉnh

Đoạn màu đỏ là chỉ giới hạn nó chỉ hiển thị ở trang chủ, bạn có thể xóa nó nếu muốn nó hiển thị ở tất cả các trang nhé.
Đoạn màu xanh là link ảnh, có thể thay ảnh khác nếu không thích hình ảnh có sẵn.
Đoạn in đậm chắc không cần nói cũng biết nhỉ!

Nâng cao

Nếu bạn muốn tạo dòng chữ chạy như Bác Sĩ Windows Blog thì thêm code này vào sau <body> thay cho đoạn code trên.

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<style>
#intro_homepage-bsw{user-select:none;position:relative;display:table;width:100%;height:100vh;margin:0!important;padding:0!important;z-index:999;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz9TJolK5A_9PBxyzqjIjC-IZyqYj4E585S2VocdoJB4iS1SHhRWkEoGu5_DyGw8QIoGKzTK1HEnwNtyLGzYZUdN9wtesInJpopcjabMOxUZiW3uQdQiSoXHY08mQlYenJILlw9lcuIwCs/s1600/beautiful-girl------------www-bacsiwindows-com+%25283%2529.jpg) no-repeat center center!important;background-size:cover!important}
#intro_homepage-bsw:before{content: &#39;&#39;; opacity: .4; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; background: linear-gradient(transparent, #050a18)}
#intro_homepage-bsw: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))}
.intro_homepage-bsw_content-bsw{position:relative;z-index:3}
.intro_label-bsw h2{animation:zoomInUp 6s;font-size:45px;font-weight:700;color:rgba(255,255,255,.85);letter-spacinggg:0;margin:0 0 .25em;padding:0;font-family:&quot;Roboto Slab&quot;,sans-serif;text-transform:uppercase}
.intro_label-bsw p{font-family:Roboto Slab,sans-serif;animation: zoomInDown 4s; text-transform: uppercase; font-size: 16px; font-weight: 400; color: rgba(255,255,255,0.7); margin: 0; padding: 0; letter-spacing: 2px}
.intro_label-bsw{margin:0 auto;text-align:center;padding:0}
.intro_buttondown-bsw 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-spacinggg:.1em;text-decoration:none;transition:opacity .3s}
.meta_{display:table-cell;vertical-align:middle;text-align:center}
#intro_buttondown-bsw a span{position:absolute;top:-45px;left:50%;width:22px;height:22px;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}
#intro_buttondown-bsw a{animation:zoomInDownn 8s}
@-webkit-keyframes sdb05{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
@keyframes sdb05{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
#intro_buttondown-bsw a span:nth-of-type(1){-webkit-animation-delay:0s;animation-delay:0s}
#intro_buttondown-bsw a span:nth-of-type(2){-webkit-animation-delay:.2s;animation-delay:.2s}
#intro_buttondown-bsw a span:nth-of-type(3){-webkit-animation-delay:.4s;animation-delay:.4s}
.xem-hd{text-align:right;width:1080px;font-size:16px;color:#fff;text-transform:uppercase;letter-spacinggg: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}
</style>
<div id='intro_homepage-bsw'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLtZLweG51Jf3zi4HLbKZ1vN-8NPMQ-yAO_E9PK92sRLhVzrg661COnSuE-FF-PU1Pjwa3b48DRjFX_-XcJvZ5PRyTlUWhOu-ESKuq582blOxHSQ0myARXIgZuqrnH90fB4q3s0H9l3pBS/s1600/right_phao-hoa-_bacsiwindows.png' style='position: absolute; right: 0; width: 10%;'/>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicvud5Uexgt4hza5PcF-r_DcU2TT37jtXdY00GXqY0HbjE4BzzjZo36k8eSSViVMuPavgtVbdRvjA-tgi5rwuZ9BeR5_xAw2w6xvyCWGFKrOGWrMHXoJY_8nWxwXLzTfD138wkVNSxJfNF/s1600/left_phao-hoa-_bacsiwindows.png' style='position: absolute; left: 0; width: 10%;'/>
<div class='meta_'>
<div class='intro_homepage-bsw_content-bsw'>
<div class='intro_label-bsw'>
<h2 class='_title'><i aria-hidden='true' class='fab fa-gg' style='margin:0 20px 0 0'/>Chúc Mừng Năm Mới 2018<i aria-hidden='true' class='fab fa-gg' style='margin:0 0 0 20px;transform:rotate(180deg)'/></h2>
<p><div class='bacsiwindows_happy-new-year2'><span id='text'/><div class='bac-si-windows-happy-new-year2' id='console'>I</div></div>
</p>
</div>
</div></div>
<div class='xem-hd'>
<a href='https://bacsiwindowscom.blogspot.com/2017/11/tao-intro-tuyet-dep-cho-blogspot-chi-tu-css-va-html.html' target='blank' title='Xem hướng dẫn'>Xem hướng dẫn <i class='fa fa-angle-right'/></a>
</div>
<section class='intro_buttondown-bsw' id='intro_buttondown-bsw'>
<a href='#continue'><span/><span style='margin-top: 10px'/><span style='margin-top: 20px'/></a>
</section>
<div class='meta_'>
</div>
</div>
<div id='continue'/>
</b:if>

Thêm đoạn js này vào trước </body>

<script>//<![CDATA[
// bacsiwindows.com
consoleText(['An Khang Thịnh Vượng - Vạn Sự Như Ý', '12 Tháng Phú Quý, 365 Ngày Phát Tài, 8760 Giờ Sung Túc, 525600 Phút Thành Công, 31536000 Giây Hạnh Phúc', 'Chúc năm mới sức khỏe dẻo dai, công việc thuận lợi thăng tiến dài dài, phi những nước đại tiến tới thành công.', 'Chúc Mừng Năm Mới - Bác Sĩ Windows - Happy New Year ^_^'], 'text', ['white']);
function consoleText(words, id, colors) {
    if (colors === undefined) colors = ['#fff'];
    var visible = true;
    var con = document.getElementById('console');
    var letterCount = 1;
    var x = 1;
    var waiting = false;
    var target = document.getElementById(id)
    target.setAttribute('style', 'color:' + colors[0])
    window.setInterval(function() {

        if (letterCount === 0 && waiting === false) {
            waiting = true;
            target.innerHTML = words[0].substring(0, letterCount)
            window.setTimeout(function() {
                var usedColor = colors.shift();
                colors.push(usedColor);
                var usedWord = words.shift();
                words.push(usedWord);
                x = 1;
                target.setAttribute('style', 'color:' + colors[0])
                letterCount += x;
                waiting = false;
            }, 100)
        } else if (letterCount === words[0].length + 1 && waiting === false) {
            waiting = true;
            window.setTimeout(function() {
                x = -1;
                letterCount += x;
                waiting = false;
            }, 100)
        } else if (waiting === false) {
            target.innerHTML = words[0].substring(0, letterCount)
            letterCount += x;
        }
    }, 120)
    window.setInterval(function() {
        if (visible === true) {
            con.className = 'bac-si-windows-happy-new-year2'
            visible = false;

        } else {
            con.className = 'bac-si-windows-happy-new-year2'

            visible = true;
        }
    }, 100)
}
//]]></script>

Dòng chữ nhấp nháy

<div id='happynewyear-bacsiwindows'>Happy New Year - Chúc Mừng Năm Mới 2018</div>
<style>
#happynewyear-bacsiwindows{font-family:'Dancing Script',cursive;font-weight:700;font-size:3em;padding:.5em 0 0;text-align:center;display:block;color:#7577a9;background:#fff url(https://res-zaloapp-te-vnso-zn-4.zadn.vn/pc/banners/header-t1-3.png) no-repeat;animation:blink-text-bsw 1.5s infinite;text-shadow:0 0 10px}
@keyframes blink-text-bsw{0%{color:#e69034}10%{color:#3179F6}20%{color:#008000}30%{color:#00CCBB}40%{color:#0AC353}50%{color:#EF3CE8}60%{color:#A3F4C7}70%{color:#2e857e}80%{color:#8D8D9E}90%{color:#6821c3}100%{color:#dd2a84}}
</style>

Tổng thể

Với một ít CSS kèm một xíu HTML, mình đã mang đến cho các bạn một tùy chọn trang trí Blog nữa, nếu thấy hay hoặc hữu ích hãy chia sẻ bài viết nhé, cảm ơn các bạn.

Ảnh: www.nguyenanhduy.com