Tạo intro tuyệt đẹp cho Blogspot chỉ từ CSS và HTML
/ lúc / 127 bình luận
Ra mắt BSW Community - trang đăng bài tự do dành cho bạn, thoải mái trao đổi, đặt câu hỏi, thắc mắc, viết bài viết mới hay thậm chí rao vặt, buôn bán. Click trải nghiệm ngay!
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
Tạo intro tuyệt đẹp cho Blogspot chỉ từ CSS và HTML - Bác Sĩ Windows

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!
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://4.bp.blogspot.com/-Puc43u-sEYM/Wf3Fat9-PCI/AAAAAAAAACk/z4qrDlCMk-M8-28KILqGlRwE5-_B1O6WQCLcBGAs/s1600/background_full_Intro_bacsiwindows-com.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'/>Bác Sĩ Windows<i aria-hidden='true' class='fa fa-gg' style='margin:0 0 0 20px'/></h2>
<p>Blog Thủ Thuật Công Nghệ - Blogspot</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ỉ!

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. Ahihi

BÌNH LUẬN VỀ BÀI VIẾT (127)

avatar
Trường Nguyễn

Còm men phát

TRẢ LỜI
avatar
z0mbie win

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

TRẢ LỜI
avatar
Trường Nguyễn ­

Rep còm men phát :v

TRẢ LỜI
avatar
Trường Nguyễn ­

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

TRẢ LỜI
avatar
z0mbie win

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

TRẢ LỜI
avatar
Trường Nguyễn ­

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

TRẢ LỜI

ơ thế con BSW kia đâu nhỉ??

TRẢ LỜI
avatar
Trường Nguyễn ­

Đây là con blog mới bác ạ, con kia bán lâu rồi.

TRẢ LỜI
avatar
Duy Ripper

Tưởng bác nghỉ chơi blog lun r :v

TRẢ LỜI
avatar
Trường Nguyễn ­

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

TRẢ LỜI

ơ thấy tên miền giống nhau mà :D

TRẢ LỜI

Trở lại!!!

TRẢ LỜI
avatar
Star Cường IT ­

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

TRẢ LỜI
avatar
Trường Nguyễn ­

Là mơ nhé không có thật đâu :v

TRẢ LỜI
avatar
Trường Nguyễn ­

Yehhh :))

TRẢ LỜI
avatar
Trường Nguyễn ­

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

TRẢ LỜI
avatar
Star Cường IT ­

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

TRẢ LỜI
avatar
Star Cường IT ­

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

TRẢ LỜI

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

TRẢ LỜI
avatar
Trường Nguyễn ­

Đúng rồi viết 1 bài thôi hahaa :)))

TRẢ LỜI
avatar
Star Cường IT ­

:) 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

TRẢ LỜI
avatar
Trường Nguyễn ­

Không add fr đâu nhaaaa

TRẢ LỜI
avatar
Star Cường IT ­

đệt :v cạn lời...

TRẢ LỜI
avatar
Star Bình

Đặt liên kết blog k Trường? Title: Star Bình Blog, Url: http://www.starbinhit.net/

TRẢ LỜI
avatar
Trường Nguyễn ­

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

TRẢ LỜI
avatar
Star Cường IT ­

Không đọc mấy comment trên hả ?

TRẢ LỜI
avatar
Nguyễn Thúy Hằng

Xin chào, xin chào.

TRẢ LỜI
avatar
Trường Nguyễn ­

Xin chào, xin chào!

TRẢ LỜI
avatar
Star Cường IT ­

vcl, thánh lội sang cả bên lày comment -_-

TRẢ LỜI
avatar
SHuyTarUT

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ỜI
avatar
Trường Nguyễn ­

Thêm position:absolute vào menu nha, đòi hỏi một chút kiến thức CSS.

TRẢ LỜI
avatar
Star Cường IT ­

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

TRẢ LỜI
avatar
Trường Nguyễn ­

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

TRẢ LỜI
avatar
Star Cường IT ­

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

TRẢ LỜI
avatar
Trường Nguyễn ­

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

TRẢ LỜI
avatar
Nguyễn Thúy Hằng

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

TRẢ LỜI
avatar
Tính Getter

BSW đã trở lại !

TRẢ LỜI
avatar
Trường Nguyễn ­

Thế nào mới chuẩn SEO hỉ bạn!?

TRẢ LỜI
avatar
Trường Nguyễn ­

Hello ^^

TRẢ LỜI
avatar
Tính Getter

Ước gì có thể Get this widget nhỉ =))

TRẢ LỜI
avatar
Trường Nguyễn ­

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

TRẢ LỜI
avatar
Trường Nguyễn ­

Là sao nhỉ ?? :))

TRẢ LỜI
avatar
Tính Getter

Vãi BSW mà ko biết TA =))

TRẢ LỜI
avatar
Trường Nguyễn ­

Không hiểu ý nói gì ý: "Ước gì có thể Get this widget nhỉ" ?? :v

TRẢ LỜI
avatar
Tính Getter

Template :v

TRẢ LỜI
avatar
Trường Nguyễn ­

Cuối cùng vẫn méo hiểu...

TRẢ LỜI
avatar
Star Cường IT ­

haha

TRẢ LỜI
avatar
Star Cường IT ­

Nói chuyện cứ như trên trời rơi xuống :v

TRẢ LỜI
avatar
Trường Nguyễn ­

Đấy, nói chuyện có ai hiểu được đâu :v

TRẢ LỜI
avatar
Trường Nguyễn ­

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ỜI
avatar
Star Bình

bị lỗi font rồi kìa ông

TRẢ LỜI
avatar
Trường Nguyễn ­

Lỗi ở đâu vậy ông? Tui thấy bình thường cả mà!?

TRẢ LỜI
avatar
Star Bình

https://scontent.fdad2-1.fna.fbcdn.net/v/t35.0-12/23313110_504163273280254_1199658568_o.png?oh=706de0ef46d81a99f40dbfdeb0ff86e7&oe=5A015F6E

TRẢ LỜI
avatar
Trường Nguyễn ­

Okk đã sửa rồi nha!

TRẢ LỜI
avatar
Trần Nghĩa Phương

welcome bác trở lại :D

TRẢ LỜI
avatar
Tính Getter

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ỜI
avatar
Trường Nguyễn ­

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!

TRẢ LỜI
avatar
Trường Nguyễn ­

Hello :D

TRẢ LỜI
avatar
Phú Cường Blogger

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

TRẢ LỜI
avatar
Trường Nguyễn ­

Vâng chào người ae ;)

TRẢ LỜI
avatar
Vitamin Phê

XÀM LỒN :))))))))))))))))))

TRẢ LỜI
avatar
SHuyTarUT

Phátbiểuu vài lời cho bài viết đầu tiên này coi

TRẢ LỜI
avatar
Trường Nguyễn ­

!? :d

TRẢ LỜI
avatar
Phú Cường Blogger

Ẹc. Nghe từ vâng đáng sợ vãi :v

TRẢ LỜI
avatar
Trường Nguyễn ­

Thằng vô học, cút.

TRẢ LỜI
avatar
Trường Nguyễn ­

Hahaaa chào người ae thôi nhé :)))

TRẢ LỜI
avatar
Hưng Star - IT

Hóng BSW bữa giờ

TRẢ LỜI
avatar
Trường Nguyễn ­

Hello, Hưng Star IT :D

TRẢ LỜI
avatar
Hưng Star - IT

đặt liên kết đc ko ạ

TRẢ LỜI
avatar
Trường Nguyễn ­

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

TRẢ LỜI
avatar
Phú Cường Blogger

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

TRẢ LỜI
avatar
Star Cường IT ­

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

TRẢ LỜI
avatar
Trường Nguyễn ­

Thường xuyên theo dõi bacsiwindows.com để xem bài viết mới / liên kết nhé :d

TRẢ LỜI
avatar
Nguyễn Lương Duy Blog

boss đã trở lại

TRẢ LỜI
avatar
Trường Nguyễn ­

Chào Nguyễn Lương Duy Blog :d

TRẢ LỜI
avatar
Star Sơn IT ✔️

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ỜI
avatar
Star Sơn IT ✔️

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á.

TRẢ LỜI
avatar
Trường Nguyễn ­

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

TRẢ LỜI
avatar
Star Sơn IT ✔️

ok thanks bạn

TRẢ LỜI
avatar
Star Sơn IT ✔️

chúc mừng BSW trở lại nhé

TRẢ LỜI
avatar
Star Sơn IT ✔️

Không dc bạn ơi, tìm <body rồi thêm vào sau bị lỗi cú pháp liền.
Mình xét admin rồi bạn làm giúp mình đc ko.
link ảnh lỗi cp: https://uphinhnhanh.com/images/2017/11/06/image6125b.png

TRẢ LỜI
avatar
Trường Nguyễn ­

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

TRẢ LỜI
avatar
Star Sơn IT ✔️

Xác nhận lời mời đi bạn

TRẢ LỜI
avatar
Trâm Shady

muốn tạo ở trên như ad thì tìm thẻ nào v ad

TRẢ LỜI
avatar
Star Sơn IT ✔️

Thẻ <­body­>

TRẢ LỜI
avatar
Trường Nguyễn ­

Body đó bạn

TRẢ LỜI
avatar
Trường Nguyễn ­

Rồi nhé

TRẢ LỜI
avatar
Star Sơn IT ✔️

Set Admin rồi, bạn vào edit đi

TRẢ LỜI
avatar
Trường Nguyễn ­

Rồi nhé bạn.

TRẢ LỜI
avatar
Star Sơn IT ✔️

Ok rồi bạn, cảm ơn bạn nhiều nhé!

TRẢ LỜI
avatar
Nguyễn Đức Huy

để trên phần header cũng đc á bác

TRẢ LỜI

Đẹp đấy anh

TRẢ LỜI
avatar
Trường Nguyễn ­

Cảm ơn em nhé! ;)

TRẢ LỜI
avatar
Trọng Văn

Bác Trường Trỏ lại :3

TRẢ LỜI
avatar
Trường Nguyễn ­

Hello nhé ahihi ;)

TRẢ LỜI
avatar
Trọng Văn

:v còn nhớ thằng này ko vẫn là avtar này nè

TRẢ LỜI
avatar
Trường Nguyễn ­

Không :v mới đổi tên đấy à :))

TRẢ LỜI

Sao hôm nay không thấy ai bình luận nhỉ

TRẢ LỜI
avatar
Duy Ripper

Bình luận nè :))

TRẢ LỜI
avatar
Trường Nguyễn ­

Ừhmm.. hôm nay không khí ảm đạm ghê nhỉ :v

TRẢ LỜI
avatar
Tính Getter

Bình loạn nè :3

TRẢ LỜI
avatar
Tính Getter

Anh Trường viết bài về Sticky menu cho Blogspot đi :D

TRẢ LỜI
avatar
Phú Cường Blogger

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.

TRẢ LỜI
avatar
Tính Getter

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

TRẢ LỜI
avatar
Trường Nguyễn ­

OK khi nào rảnh anh viết liền nhé ;)

TRẢ LỜI
avatar
Nguyễn Ngọc Quí ✔

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ỜI
avatar
Trường Nguyễn

Hello. Hiện chữ gì mà té ghế dữ vậyy :v

TRẢ LỜI
avatar
Nguyễn Đức Nam

Comment thứ 800

TRẢ LỜI
avatar
Trường Nguyễn

Comment thứ 804

TRẢ LỜI
avatar
Nguyễn Ngọc Quí ✔

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

TRẢ LỜI
avatar
Trường Nguyễn

Câu này phải không? :v
https://i.imgur.com/wMFWvaE.png

TRẢ LỜI
avatar
Mạng Thủ Thuật

sao k hiện lên ad ơi @@@ Giúp e với

TRẢ LỜI
avatar
Trường Nguyễn

Để link blog mình xem.

TRẢ LỜI
avatar
Nguyễn Ngọc Quí ✔

Template - em không có phần body :(( h phải làm sao

TRẢ LỜI
avatar
Star Dũng Blog

v:

TRẢ LỜI
avatar
Nguyễn Ngọc Quí ✔

Tìm lồi mắt có ra đâu :(

TRẢ LỜI
avatar
Star Dũng Blog

<body

TRẢ LỜI
avatar
Star Dũng Blog

[pre]Ctrl+f tìm <body [/pre]

TRẢ LỜI
avatar
Star Bình

<pre>&lt;body class=&#39;index&#39;&gt;</pre>

TRẢ LỜI
avatar
Trường Nguyễn

Theme nào cũng có body hết nhé
Tìm kĩ lại một lần nữa!

TRẢ LỜI
avatar
Trọng Khanh Nguyễn

mới bận có 1 ngày mak BSW lại đổi temp rồi. sao ko để temp FB v anh

TRẢ LỜI
avatar
Trung Phạm

Hay qúa bác ơi ! Em tìm đúng Blog rồi =)))

TRẢ LỜI
avatar
Trường Nguyễn

Cảm ơn bác ;)

TRẢ LỜI
avatar
Cọp Art

như em lấy cái đoạn có 3 muổi tên không thì sao a

TRẢ LỜI
avatar
Trường Nguyễn

Tách code phía trên ra thôi em, còn không thì:
https://codepen.io/search/pens?q=arrow%20animation

TRẢ LỜI
avatar
Nguyễn Văn Đức

Làm theo được rồi nhưng click vào mũi tên để trượt xuống thì nó không nhảy xuống @@, help me : http://www.nguyenduc-dz.tk/

TRẢ LỜI

THAM GIA TRANH TOP BÌNH LUẬN NGAY!

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 (xem nội quy).

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời.

Bạn có thể dùng ảnh động hoặc mã hóa code HTML để bình luận.