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!
Bước 2. Tim thẻ
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/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: ''; 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/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: ''; 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/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>
</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
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?
Còm men phát
Trả lờiXóaRep còm men phát :v
Xóacmt đầu :v
Trả lờiXóavà tiện em xin liên kết
Tui tự comment đầu nhé :v
XóaLiê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
XóaHaha sao nhanh bằng thằng viết bài được hả bác :))
Xóaơ thế con BSW kia đâu nhỉ??
Trả lờiXóaĐây là con blog mới bác ạ, con kia bán lâu rồi.
Xóaơ thấy tên miền giống nhau mà :D
XóaThì mình gia hạn tên miền dùng tiếp mà :d
XóaTưởng bác nghỉ chơi blog lun r :v
Trả lờiXóaCũng định vậy mà nhiều ông cứ inbox bảo quay lại viết blog đi, nên... hahaaa.
XóaTrở lại!!!
Trả lờiXóaYehhh :))
XóaÁ đù, mơ hay thật đây??? Boss trở lại thật rồi à ^^^^^^
Trả lờiXóaLà mơ nhé không có thật đâu :v
XóaNhận xét này đã bị tác giả xóa.
XóaThực ra BSW chỉ đùa thôi, trở lại đăng 1 bài xong nghỉ =))
XóaĐúng rồi viết 1 bài thôi hahaa :)))
Xóa:) 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óaNhận xét này đã bị tác giả xóa.
XóaNhận xét này đã bị tác giả xóa.
Trả lờiXóaKhông add fr đâu nhaaaa
Xóađệt :v cạn lời...
XóaLiên kết đặt sau nha. Chưa có bài viết gì hết ý.
Trả lờiXóaKhông đọc mấy comment trên hả ?
Trả lờiXóaờ
Trả lờiXóaXin chào, xin chào.
Trả lờiXóaXin chào, xin chào!
Xóavcl, thánh lội sang cả bên lày comment -_-
XóaMuố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óaThêm position:absolute vào menu nha, đòi hỏi một chút kiến thức CSS.
XóaHóng bài viết Đặt Liên Kết :)
Trả lờiXóaCòn lâu nhé, mới có 1 bài viết chưa có gì hết.
XóaLâu thế cơ à, mà thêm cái nút back to top đi, nhìn trống vắng vl :v
XóaTừ từ có hết mà, chưa rảnh viết bài nữa :d
XóaCái link chưa chuẩn SEO kìa chủ Thớt
Trả lờiXóaThế nào mới chuẩn SEO hỉ bạn!?
XóaBSW đã trở lại !
Trả lờiXóaHello ^^
XóaƯớc gì có thể Get this widget nhỉ =))
XóaLà sao nhỉ ?? :))
XóaVãi BSW mà ko biết TA =))
XóaKhông hiểu ý nói gì ý: "Ước gì có thể Get this widget nhỉ" ?? :v
XóaTemplate :v
XóaCuối cùng vẫn méo hiểu...
XóaNói chuyện cứ như trên trời rơi xuống :v
XóaĐấy, nói chuyện có ai hiểu được đâu :v
XóaChậ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óabị lỗi font rồi kìa ông
XóaLỗi ở đâu vậy ông? Tui thấy bình thường cả mà!?
XóaOkk đã sửa rồi nha!
Xóawelcome bác trở lại :D
Trả lờiXóaHello :D
Xóa1 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óaHahaa 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óaChào đón bác trở lại nhé :D
Trả lờiXóaVâng chào người ae ;)
XóaẸc. Nghe từ vâng đáng sợ vãi :v
XóaHahaaa chào người ae thôi nhé :)))
XóaXÀM LỒN :))))))))))))))))))
Trả lờiXóaThằng vô học, cút.
XóaPhátbiểuu vài lời cho bài viết đầu tiên này coi
Trả lờiXóa!? :d
XóaHóng BSW bữa giờ
Trả lờiXóaHello, Hưng Star IT :D
Xóađặt liên kết đc ko ạ
XóaLiên kết đặt sau nha, phải có nhiều bài viết trước đã rồi mới đặt lk.
XóaKhi nào chuẩn bị đặt ới e với nha.
XóaMấ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óaboss đã trở lại
Trả lờiXóaChào Nguyễn Lương Duy Blog :d
XóaCủa mình không có thẻ thì sửa như nào bạn.
Trả lờiXóaCó 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.
XóaCó 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).
Xóaok thanks bạn
Xóachúc mừng BSW trở lại nhé
XóaNhận xét này đã bị tác giả xóa.
Trả lờiXóaXác nhận lời mời đi bạn
Trả lờiXóamuốn tạo ở trên như ad thì tìm thẻ nào v ad
Trả lờiXóaThẻ <body>
XóaBody đó bạn
Xóađể trên phần header cũng đc á bác
XóaRồi nhé
Trả lờiXóaSet Admin rồi, bạn vào edit đi
Trả lờiXóaRồi nhé bạn.
Trả lờiXóaOk rồi bạn, cảm ơn bạn nhiều nhé!
Trả lờiXóaĐẹp đấy anh
Trả lờiXóaCảm ơn em nhé! ;)
XóaBác Trường Trỏ lại :3
Trả lờiXóaHello nhé ahihi ;)
Xóa:v còn nhớ thằng này ko vẫn là avtar này nè
XóaKhông :v mới đổi tên đấy à :))
XóaSao hôm nay không thấy ai bình luận nhỉ
Trả lờiXóaBình luận nè :))
XóaỪhmm.. hôm nay không khí ảm đạm ghê nhỉ :v
XóaBình loạn nè :3
XóaAnh Trường viết bài về Sticky menu cho Blogspot đi :D
Trả lờiXóaSticky 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óaChỉ có điều là e ko biết chèn vào chỗ nào thôi ._.
XóaOK khi nào rảnh anh viết liền nhé ;)
XóaChú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óaHello. Hiện chữ gì mà té ghế dữ vậyy :v
XóaCâu gì gì đó - Không tìm thấy trang :v -
XóaComment thứ 800
Trả lờiXóaComment thứ 804
Xóasao k hiện lên ad ơi @@@ Giúp e với
Trả lờiXóaĐể link blog mình xem.
XóaTemplate - em không có phần body :(( h phải làm sao
Trả lờiXóav:
XóaTìm lồi mắt có ra đâu :(
Xóa[pre]Ctrl+f tìm <body [/pre]
Xóa<pre><body class='index'></pre>
XóaTheme nào cũng có body hết nhé
XóaTìm kĩ lại một lần nữa!
<body
Trả lờiXóa