Tạo intro Chúc Mừng Năm Mới tuyệt đẹp chỉ bằng CSS và HTML
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
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!
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 == "index"'>Bước 3. Lưu mẫu, và thưởng thức thôi!
<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/AVvXsEhb-rOQVRrroVYPLX-RCB1KbR6Un5hr5vEX43JST4cUgEZCxjhpwUXQdlFYom35_EYfSy9Qt5EP3YOnzfqC44CtlOFOWVC_AyE-eCwBbBOQIGWt0CjOv84g5jCoauoRuc0kT-x5ARbIp74q/s1600/beautiful-girl------------www-bacsiwindows-com+%25288%2529.jpg) no-repeat center center!important;background-size:cover!important}
#intro_homepage:before{content: ''; opacity: 1; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; background: linear-gradient(transparent, #050a18)}
#intro_homepage: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))}
.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:"Roboto Condensed",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 'Josefin Sans',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>
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 == "index"'>Thêm đoạn js này vào trước
<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/AVvXsEhqVc8A8BsbU3IEfk5Jt4kEqDcqLa_4gWLWAiKPJsjdvw5Y7WYaRoErGYQolQzJl-dEFG2KJDa86Z3w1SbB5kYweu4rPRK7IE761jXN9NgGhlcd3am5q75qpdVEgm3M_u0ehSEvG39-Skqr/s1600/beautiful-girl------------www-bacsiwindows-com+%25283%2529.jpg) no-repeat center center!important;background-size:cover!important}
#intro_homepage-bsw:before{content: ''; 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:'';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:"Roboto Slab",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 'Josefin Sans',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/AVvXsEjGcBGwqRc93DHB7rWpl8wt_rJWfI0w9-zXMXSXArEz82GmXzYDLUi_3Nu04RaGr6Um2C6paKKb4vCUYwIKfCUe0iLNUVfLxtNprquuqwhTVxau1Uc9Qt9xkjeZ0XqdD0gsdsLorN9H1at8/s1600/right_phao-hoa-_bacsiwindows.png' style='position: absolute; right: 0; width: 10%;'/>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhipJ_njXUDIy4H7ETIjZhlOqsFlKBkTfhrKu6ccOqU04Dloi25SAhvsH97grDPWUyiCNWgqxgvOqZSIRxhQ6iKCuNdWAh3QDgbRV9Xx_klEqHqyEJQOO-GVF3OleDlkrc77MK8dVOL2kZ4/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>
</body><script>//<![CDATA[
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
Copyright © 2017
148 nhận xét:
Còm men phát
cmt đầu :v
và tiện em xin liên kết
Rep còm men phát :v
Tui tự comment đầu nhé :v
Liên kết tính sau đi, chưa có bài viết gì hết ý.
ẹc vừa thấy bài của bác em cmt lun mừ bác xấu tính vãi
Haha sao nhanh bằng thằng viết bài được hả bác :))
ơ thế con BSW kia đâu nhỉ??
Đây là con blog mới bác ạ, con kia bán lâu rồi.
Tưởng bác nghỉ chơi blog lun r :v
Cũng định vậy mà nhiều ông cứ inbox bảo quay lại viết blog đi, nên... hahaaa.
ơ thấy tên miền giống nhau mà :D
Trở lại!!!
Á đù, mơ hay thật đây??? Boss trở lại thật rồi à ^^^^^^
Là mơ nhé không có thật đâu :v
Yehhh :))
Thì mình gia hạn tên miền dùng tiếp mà :d
Nhận xét này đã bị tác giả xóa.
Nhận xét này đã bị tác giả xóa.
Thực ra BSW chỉ đùa thôi, trở lại đăng 1 bài xong nghỉ =))
Đúng rồi viết 1 bài thôi hahaa :)))
:) 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
Không add fr đâu nhaaaa
đệt :v cạn lời...
Liên kết đặt sau nha. Chưa có bài viết gì hết ý.
Không đọc mấy comment trên hả ?
ờ
Xin chào, xin chào.
Xin chào, xin chào!
vcl, thánh lội sang cả bên lày comment -_-
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 ạ
Thêm position:absolute vào menu nha, đòi hỏi một chút kiến thức CSS.
Hóng bài viết Đặt Liên Kết :)
Còn lâu nhé, mới có 1 bài viết chưa có gì hết.
Lâu thế cơ à, mà thêm cái nút back to top đi, nhìn trống vắng vl :v
Từ từ có hết mà, chưa rảnh viết bài nữa :d
Cái link chưa chuẩn SEO kìa chủ Thớt
BSW đã trở lại !
Thế nào mới chuẩn SEO hỉ bạn!?
Hello ^^
Ước gì có thể Get this widget nhỉ =))
Nhận xét này đã bị tác giả xóa.
Là sao nhỉ ?? :))
Vãi BSW mà ko biết TA =))
Không hiểu ý nói gì ý: "Ước gì có thể Get this widget nhỉ" ?? :v
Template :v
Cuối cùng vẫn méo hiểu...
Nói chuyện cứ như trên trời rơi xuống :v
Đấy, nói chuyện có ai hiểu được đâu :v
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
bị lỗi font rồi kìa ông
Lỗi ở đâu vậy ông? Tui thấy bình thường cả mà!?
Okk đã sửa rồi nha!
welcome bác trở lại :D
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 =))
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!
Hello :D
Chào đón bác trở lại nhé :D
Vâng chào người ae ;)
XÀM LỒN :))))))))))))))))))
Phátbiểuu vài lời cho bài viết đầu tiên này coi
!? :d
Ẹc. Nghe từ vâng đáng sợ vãi :v
Thằng vô học, cút.
Hahaaa chào người ae thôi nhé :)))
Hóng BSW bữa giờ
Hello, Hưng Star IT :D
đặt liên kết đc ko ạ
Liên kết đặt sau nha, phải có nhiều bài viết trước đã rồi mới đặt lk.
Khi nào chuẩn bị đặt ới e với nha.
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
boss đã trở lại
Chào Nguyễn Lương Duy Blog :d
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á!
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á.
Bạn tìm <body là có nhé (bỏ dấu ngoặc sau chữ body).
ok thanks bạn
chúc mừng BSW trở lại nhé
Nhận xét này đã bị tác giả xóa.
Xác nhận lời mời đi bạn
muốn tạo ở trên như ad thì tìm thẻ nào v ad
Thẻ <body>
Body đó bạn
Rồi nhé
Set Admin rồi, bạn vào edit đi
Rồi nhé bạn.
Ok rồi bạn, cảm ơn bạn nhiều nhé!
để trên phần header cũng đc á bác
Đẹp đấy anh
Cảm ơn em nhé! ;)
Bác Trường Trỏ lại :3
Hello nhé ahihi ;)
:v còn nhớ thằng này ko vẫn là avtar này nè
Không :v mới đổi tên đấy à :))
Sao hôm nay không thấy ai bình luận nhỉ
Bình luận nè :))
Ừhmm.. hôm nay không khí ảm đạm ghê nhỉ :v
Bình loạn nè :3
Anh Trường viết bài về Sticky menu cho Blogspot đi :D
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.
Chỉ có điều là e ko biết chèn vào chỗ nào thôi ._.
OK khi nào rảnh anh viết liền nhé ;)
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ế :(
Hello. Hiện chữ gì mà té ghế dữ vậyy :v
Comment thứ 800
Comment thứ 804
Câu gì gì đó - Không tìm thấy trang :v -
sao k hiện lên ad ơi @@@ Giúp e với
Để link blog mình xem.
Template - em không có phần body :(( h phải làm sao
v:
Tìm lồi mắt có ra đâu :(
<body
[pre]Ctrl+f tìm <body [/pre]
<pre><body class='index'></pre>
Theme nào cũng có body hết nhé
Tìm kĩ lại một lần nữa!
mới bận có 1 ngày mak BSW lại đổi temp rồi. sao ko để temp FB v anh
Hay qúa bác ơi ! Em tìm đúng Blog rồi =)))
Cảm ơn bác ;)
như em lấy cái đoạn có 3 muổi tên không thì sao a
Ủa bình luận này khi nào vậy ta, sao giờ mới thấy!?
1. Domain đã hết hạn vào 2 tuần trước, đúng lúc định đóng Blog nên không muốn gia hạn nữa, có lần đã gửi đơn yêu cầu đóng Blog lên Google và đã mở lại sau vài ngày.
2. Có thể sẽ không phát triển nữa, một phần muốn một phần không. Mặc dù thỉnh thoảng vẫn vào edit vài dòng code, trả lời vài bình luận, nếu ai còn quan tâm thì sẽ tự tìm đến tên miền mặc định của BSW.
3. Ăn thịt mấy đứa tên Cường =))
Quay trở lại rồi ạ boss :v
No :)
F12 rồi chỉnh CSS thôi bạn, rất đơn giản.
Vâng ! Mình cũng đã thử rồi ! Làm mãi nó cứ xấu miết nên nhờ ông giúp !
Nghỉ Tết đi, giao thừa rồi.
Thôi được rồi ! Tui cũng vừa edit lại nhìn cũng chất ! Thanks and Happy New Year
à còn nữa là cho tui xin 2 đoạn code sau:
1.Code ẩn phần tử trên điện thoại
2.Code if else ấn hiện phần tử trên pc và điện thoại
Nhớ ông có share mà không save
1. Muốn ẩn gì thì chỉ việc thêm display:none!important là được.
2. Dùng thẻ điều kiện:
<b:if cond='data:blog.isMobileRequest'>
<!-- Mobile -->
<b:else/>
<!-- PC -->
</b:if>
Nhận xét này đã bị tác giả xóa.
Thanks
Saved
And Happy New Year
Happy New Year ; )
Thế méo nào ông đổi tên tui được thành Phan Mạnh Cường hay thế :V
Trường đz mà méo gì làm không được *hihi* :v
Phan Mạnh Cường nghe hay hơn Star Cường IT nhỉ
Cũng được đó :v mấy hôm trước thấy dấu tick bị méo giờ tròn trịa đẹp r :D
Dấu tick bị méo là sao ?
Chăm chút từng tí sao k chăm chút cái menu mobi đi
Menu mobi bị làm sao ?
K đc hiển thị đẹp
Lỗi code nâng cao kìa Trường anh
Lỗi gì vậy em?
Menu nào vậy? Trên/dưới
cho em xin cai phan popular post di anh Truong.
MaiL: Nguyenchanhduc3107@gmail.com
Thanks anh
Đã gửi em nhé.
da duoc roi anh oi, thanks anh
Ok
Sao hông hiện nhỉ
Tại sao hông hiện. Code vẫn hoạt động 100%
Đăng nhận xét