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 Demo
Khô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/AVvXsEj2nBlZDzzdPysw3Mjlav7wvKoJELcKh4ATMlQtej-kTAxhGYVIyhLX8blc3NMFJRNsfJ55h6zpGn8EvqLdQcr9Qfw_oQtg72dNpQu-57mQHt_3El0D2Hu-s7z4wwCrzlNdN9WC-CwKk4nD/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/AVvXsEjuNCzmy-xgkEJ6UGZgZCsFpF_MMg497lmgvFG_MQ7Me9sZA1NWlrA5O5d8EMUniDBb1fOOO3jUuQwOh4cYDB04ySw3UIvnVpYStWFifgbW6m7DttgW_UGnrPNnZE9zeG2IgbQtSUa69DIo/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/AVvXsEiLWN0xm9jnIh4LJOS-REfxsahr2auffn-MTSGZzAXlr4g54ITTHCK5hbNxKA-8zcsRxegY6saxFlNIxiBQ11HJkb-LginPZZmRvdlYUTIrDDgU0L31OBUjQnkSbdaeTcGEahoqc_FAgIfx/s1600/right_phao-hoa-_bacsiwindows.png' style='position: absolute; right: 0; width: 10%;'/>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8GbPrfagRFFj84fUUEpR-hD_dyGnBnS2SMlDP6SqJOKocPZNNsyKlpf42KErE3vS_poaDmvT1AOfe-zNeDA0IkndK87Q3n8wdxQMxSuLKmwIvzpgB9N1nAzkbc0Dx4VJ-UWu8vy2z132q/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
Mọi bài viết đều thuộc bản quyền Bác Sĩ Windows, được viết bởi Admin. Hãy thể hiện mình là người văn minh, có văn hóa bằng cách copy ghi rõ "Nguồn: www.bacsiwindows.com". Tìm hiểu thêm
Tác giả: Vũ Trường
Ngày đăng: 14/2/18 lúc
Tổng số bình luận: 115
VỀ TÁC GIẢ
Với nhiều năm kinh nghiệm, chúng tôi sẵn sàng đáp ứng nhu cầu của khách hàng với những tiêu chí hàng đầu là Uy tín - Chất lượng - Lòng tin. Đã có nhiều người tin tưởng và sử dụng dịch vụ cao cấp của chúng tôi, bạn có phải là người tiếp theo?

BÌNH LUẬN (115)

  1. cmt đầu :v
    và tiện em xin liên kết

    Trả lờiXóa
    Trả lời
    1. Tui tự comment đầu nhé :v
      Liên kết tính sau đi, chưa có bài viết gì hết ý.

      Xóa
    2. ẹc vừa thấy bài của bác em cmt lun mừ bác xấu tính vãi

      Xóa
    3. Haha sao nhanh bằng thằng viết bài được hả bác :))

      Xóa
  2. ơ thế con BSW kia đâu nhỉ??

    Trả lờiXóa
    Trả lời
    1. Đây là con blog mới bác ạ, con kia bán lâu rồi.

      Xóa
    2. ơ thấy tên miền giống nhau mà :D

      Xóa
    3. Thì mình gia hạn tên miền dùng tiếp mà :d

      Xóa
  3. Tưởng bác nghỉ chơi blog lun r :v

    Trả lờiXóa
    Trả lời
    1. Cũng định vậy mà nhiều ông cứ inbox bảo quay lại viết blog đi, nên... hahaaa.

      Xóa
  4. Á đù, mơ hay thật đây??? Boss trở lại thật rồi à ^^^^^^

    Trả lờiXóa
    Trả lời
    1. Là mơ nhé không có thật đâu :v

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

      Xóa
    3. Thực ra BSW chỉ đùa thôi, trở lại đăng 1 bài xong nghỉ =))

      Xóa
    4. Đúng rồi viết 1 bài thôi hahaa :)))

      Xóa
    5. :) Chả có ai điên lại đi gia hạn cái domain rồi up 1 bài cho vui cả :)) Bởi tiền gia hạn 1 domain là không ít :v

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

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

    Trả lờiXóa
  6. Liên kết đặt sau nha. Chưa có bài viết gì hết ý.

    Trả lờiXóa
  7. Không đọc mấy comment trên hả ?

    Trả lờiXóa
  8. Muốn cho thanh menu lên tới trên luôn giống blog Bác đang dùng thì làm thế nào ạ

    Trả lờiXóa
    Trả lời
    1. Thêm position:absolute vào menu nha, đòi hỏi một chút kiến thức CSS.

      Xóa
  9. Hóng bài viết Đặt Liên Kết :)

    Trả lờiXóa
    Trả lời
    1. Còn lâu nhé, mới có 1 bài viết chưa có gì hết.

      Xóa
    2. Lâu thế cơ à, mà thêm cái nút back to top đi, nhìn trống vắng vl :v

      Xóa
    3. Từ từ có hết mà, chưa rảnh viết bài nữa :d

      Xóa
  10. Cái link chưa chuẩn SEO kìa chủ Thớt

    Trả lờiXóa
  11. Chật hơn 1k lượt xem chỉ trong chưa đến 1 ngày, tín hiệu tốt thật :D

    Trả lờiXóa
  12. 1 bài viết mà gần 1k lượt xem & 57 nhận xét ?! Chắc sếp's BSW nhiều fans lắm =))

    Trả lờiXóa
    Trả lời
    1. Hahaa trước giờ vẫn vậy mà, không ngờ bỏ lâu rồi quay lại mà cũng còn nhiều người quan tâm!

      Xóa
  13. Chào đón bác trở lại nhé :D

    Trả lờiXóa
  14. XÀM LỒN :))))))))))))))))))

    Trả lờiXóa
  15. Phátbiểuu vài lời cho bài viết đầu tiên này coi

    Trả lờiXóa
  16. Trả lời
    1. đặt liên kết đc ko ạ

      Xóa
    2. Liên kết đặt sau nha, phải có nhiều bài viết trước đã rồi mới đặt lk.

      Xóa
    3. Khi nào chuẩn bị đặt ới e với nha.

      Xóa
    4. Mấy thằng cha này thích liên kết thế :v LK để phát triển blog chứ có phải đặt cho vui đâu mà ham -.- À mà khi nào có nhớ đặt tui với nhé :v

      Xóa
  17. Của mình không có thẻ thì sửa như nào bạn.
    Có thể làm giùm mình thì tốt quá!

    Trả lờiXóa
    Trả lời
    1. Nhầm, của mình không có thẻ < body > thì làm thế nào bạn.
      Có thể làm giùm mình thì tốt quá.

      Xóa
    2. Bạn tìm <body là có nhé (bỏ dấu ngoặc sau chữ body).

      Xóa
    3. chúc mừng BSW trở lại nhé

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

    Trả lờiXóa
  19. Xác nhận lời mời đi bạn

    Trả lờiXóa
  20. muốn tạo ở trên như ad thì tìm thẻ nào v ad

    Trả lờiXóa
  21. Set Admin rồi, bạn vào edit đi

    Trả lờiXóa
  22. Ok rồi bạn, cảm ơn bạn nhiều nhé!

    Trả lờiXóa
  23. Bác Trường Trỏ lại :3

    Trả lờiXóa
  24. Sao hôm nay không thấy ai bình luận nhỉ

    Trả lờiXóa
  25. Anh Trường viết bài về Sticky menu cho Blogspot đi :D

    Trả lờiXóa
    Trả lời
    1. Sticky menu có đầy trên mạng rồi mà e. Thực ra chỉ thêm CSS làm cố định thanh menu thôi.

      Xóa
    2. Chỉ có điều là e ko biết chèn vào chỗ nào thôi ._.

      Xóa
    3. OK khi nào rảnh anh viết liền nhé ;)

      Xóa
  26. Chúc mừng, bác đã trở lại -.- bữa em cần cái đoạn code vào, blogspot nó hiện cái chữ mà em té ghế :(

    Trả lờiXóa
    Trả lời
    1. Hello. Hiện chữ gì mà té ghế dữ vậyy :v

      Xóa
    2. Câu gì gì đó - Không tìm thấy trang :v -

      Xóa
  27. sao k hiện lên ad ơi @@@ Giúp e với

    Trả lờiXóa
  28. Template - em không có phần body :(( h phải làm sao

    Trả lờiXóa