Có gì mới trên Blog StarThảo-IT?

Cập nhật những thay đổi, cập nhật mới trên Blog StarThảo-IT

Menu Game

Kho game online blogspot miễn phí khổng lồ với rất nhiều game độc đáo.

Tiên Ích Online

Có vô vàn tiện ích online ngay trên Blog cho các bạn sử dụng

Và còn nhiều điều hot nữa

Đang được cập nhật...

Blogger Hướng dẫn tạo thanh menu cố định (Sticky menu)

Hướng dẫn tạo thanh menu cố định (Sticky menu)

November 11, 2017 26 comments
Chia sẻ
Xin chào các bạn , loanh quanh mấy blog và thấy Blog Bác Sĩ Windows có một số bạn thích Sticky Menu của bác ấy mà bác ấy hứa sẽ share .
Tuy nhiên, không ai muốn đợi lâu cả, vì thế mình đã view-source template của bác ấy :)) và mang về cái menu đó.
Sorry bác Trường nhé :D
Thôi, không linh tinh luyên thuyên nữa, ta bắt đầu ngay thôi!
Trước tiên là demo:
Hình minh họa

CÁC BƯỚC THỰC HIỆN:

Bước 1: Blogger => Chủ đề => Sao lưu/Khôi phục => Tải chủ đề xuống. ( An toàn là trên hết )
Bước 2: Đóng lại => Chỉnh sửa HTML .
Bước 3: Các bạn xóa hết tất cả những gì bạn có bằng cả yêu thương. Á đù, nhầm, nhầm nhé :((
Các bạn xóa hết Css và code liên quan đến thanh menu mà bạn đang có.
Sau đó tìm thẻ  <body>và chèn tất cả nhưng thứ sau vào sau thẻ đó:
Copy

<style>
.search_box_menu{display:inline;float:right}
#bsw_menu_search_box_v2_top_ws {background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9JAVs_N3fesF3uQhBTd8_kq5LTTon1oGx8QqZUaijJiiFAdg0_5YqmS_zhvdLDs1Ge-vJ1NgFY9ziXWoNNa7IoZz5P-ZsaDuTFeSHgENr0DRH-EJ79UU9WUpMYt3n5S9En2hSDTrLTRwX/s20/search_icon.png) no-repeat center left; background-position: 50%; border: 0; padding: 0 10px 0 42px; font: 400 16px Roboto; width: 0; transition: .5s; -webkit-transition: .5s; -moz-transition: .5s; -o-transition: .7s;cursor:pointer;line-height:33px}
#bsw_menu_search_box_v2_top_ws:focus{background:rgba(0,0,0,.2) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9JAVs_N3fesF3uQhBTd8_kq5LTTon1oGx8QqZUaijJiiFAdg0_5YqmS_zhvdLDs1Ge-vJ1NgFY9ziXWoNNa7IoZz5P-ZsaDuTFeSHgENr0DRH-EJ79UU9WUpMYt3n5S9En2hSDTrLTRwX/s20/search_icon.png) no-repeat center left;background-position:5% 50%;outline:0;border:0;border-radius:50px;color:#eee;padding:0 10px 0 37px;font:400 15px Roboto;line-height:33px;margin:0;width:180px;z-index:99;position:relative;cursor:text}
#bsw_menu_search_box_v2_top_ws::-webkit-input-placeholder{color:#ddd}

/* search box */
#top-wrap-bsw-menu.change .top_wrap-menu-bsw .logo a {padding:0 0 0 44px}
.top_wrap-menu-bsw .logo img {width:50px; height:50px}
#top-wrap-bsw-menu.change .top_wrap-menu-bsw .logo img {width:35px; height:35px}
#top-wrap-bsw-menu.change {height: 50px; line-height: 50px; background: #7577a9; box-shadow: 0 5px 5px rgba(0,0,0,.15)}
#top-wrap-bsw-menu{z-index:9999;width:100%;height:100px;line-height:100px;padding:0;background:transparent;position:fixed;top:0;left:0;-moz-transition:all .1s ease;-webkit-transition:all .1s ease;-ms-transition:all .1s ease;-o-transition:all .1s ease;transition:all .1s ease}
.top-wrap-menu_bsw{width:100%;margin:0 auto;-webkit-user-select:none;-moz-user-select:none;-o-user-select:none}
.top_wrap-menu-bsw{margin:0 auto;max-width:1080px;position:relative;width:100%}
.top_wrap-menu-bsw ul,.top_wrap-menu-bsw li{margin:0 0;padding:0 0;list-style:none}
.top_wrap-menu-bsw li{margin:0;float:right;display:inline;position:relative;text-transform:none}
.top_wrap-menu-bsw a{display:block;padding:0 15px;text-decoration:none;color:rgba(255,255,255,.9);font-weight:700;font-family:'Roboto Condensed',sans-serif;text-transform:none;transition:.1s}
.res-bsw-menu{display:none;margin:0 0;paddi.top_wrap-menu-bsw ul.drop-down-bsw_menung:0 0;width:80px;height:35px;opacity:0;cursor:pointer}
.res_bsw-menu{font:500 30px Roboto;display:none;width:35px;height:36px;line-height:36px;text-align:center}
.top_wrap-menu-bsw ul.drop-down-bsw_menu{margin:0;width:250px;background:#fff;box-shadow:0 10px 23px rgba(0,0,0,.2);position:absolute;z-index:99;padding:0;opacity:0;visibility:hidden;transition:all .25s ease-in-out}
.top_wrap-menu-bsw ul.drop-down-bsw_menu:before{content:'';position:absolute;top:-12px;right:10px;width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:12px solid #fff;left:35px}
.top_wrap-menu-bsw ul .drop-down-bsw_menu li{display:block;width:100%;font:12px 'Roboto',sans-serif;text-transform:none}
ul.drop-down-bsw_menu.morong-colum{width:500px}
.top_wrap-menu-bsw li:last-child ul.drop-down-bsw_menu{right:0}
.top_wrap-menu-bsw li:last-child ul.drop-down-bsw_menu:before{content:'';position:absolute;top:-12px;right:35px;width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:12px solid #fff;left:inherit}
.top_wrap-menu-bsw li:hover ul.drop-down-bsw_menu{opacity:1;visibility:visible;transform:none}
.top_wrap-menu-bsw ul.drop-down-bsw_menu a{color:#555;padding:12px 20px;line-height:normal}
.top_wrap-menu-bsw ul .drop-down-bsw_menu li a{font:400 15px Roboto!important;text-transform:uppercase}
.top_wrap-menu-bsw ul.drop-down-bsw_menu a:hover{background:rgba(0,0,0,.1)}
.top_wrap-menu-bsw ul.drop-down-bsw_menu a:focus{background:rgba(0,0,0,.3)}
.top_wrap-menu-bsw .logo {position:absolute;left:0}
.top_wrap-menu-bsw .logo img {position:absolute;top:50%;left:0;transform:translate(0,-50%);border-radius:50%}
.top_wrap-menu-bsw .logo a {padding:0 0 0 70px;text-transform:uppercase;font-size:24px;letter-spacinggg:1px}
/* TOP MENU with Banner */
#bsw_bg_m_top{background:#fff;position:relative;padding:15px 0 5px 0;margin:auto;max-width:100%;overflow:hidden;text-align:left;margin:0}
.bsw_bg_m_top{width:1080px;margin:auto}
.bsw_bg_m_top a{color:#66689c;font:700 34px Roboto;text-transform:uppercase;letter-spacinggg:.05em}
.bsw_bg_m_top a:hover{color:333}
@media screen and (max-width:1024px){.top_wrap-menu-bsw ul.drop-down-bsw_menu a{color:#ccc!important}
.top-wrap-menu_bsw{width:100%!important;margin:0 auto}
.top_wrap-menu-bsw{margin:0 auto;width:100%!important;position:relative}
#top-wrap-bsw-menu{z-index:9999;width:100%;height:55px;background:#7577a9!important;position:inherit!important;top:0;padding:0}
.top_wrap-menu-bsw ul{background:rgba(48,55,59,0.98);position:absolute;top:40px;right:0;left:0;display:none;padding:15px 0!important;transition:.1s;position:relative;z-index:99999}
.top_wrap-menu-bsw ul.drop-down-bsw_menu:before{display:none!important}
.top_wrap-menu-bsw a{display:block;line-height:0;padding:10px 15px!important;text-decoration:none;color:#fefefe!important;text-transform:none}
.top_wrap-menu-bsw ul li a{font:400 18px Roboto!important}
.top_wrap-menu-bsw ul.drop-down-bsw_menu{height:auto;width:100%!important;background:transparent!important;position:inherit!important;z-index:99;display:block!important;visibility:visible;opacity:1;border:0;box-shadow:none!important;padding:8px 0!important;top:0!important;display:none;transform:none}
.top_wrap-menu-bsw li{display:block;float:none;width:100%}
.top_wrap-menu-bsw input,.top_wrap-menu-bsw label{position:absolute;top:12px;left:15px;display:block}
.top_wrap-menu-bsw input{z-index:4;width:90%}
.top_wrap-menu-bsw input:checked + label .hamburger1{transform:rotate(225deg);top:14px}
.top_wrap-menu-bsw input:checked + label .hamburger2{transform:rotate(-45deg);top:12px}
.top_wrap-menu-bsw input:checked + label .hamburger{transform:rotate(90deg);top:-50px}
.top_wrap-menu-bsw input:checked ~ ul .top_wrap-menu-bsw label{top:10px}
.top_wrap-menu-bsw input:checked ~ ul{top:55px;display:inherit;text-align:center;padding: 70px 0 0 0!important}
.top_wrap-menu-bsw input:checked + ul .drop-down-bsw_menu{display:block}
.hamburger,.hamburger1,.hamburger2{transition:.45445s!important}
.hamburger{font-size:18px;background:#fff;height:2px;display:block;position:relative;top:6px}
.hamburger1{font-size:18px;background:#fff;height:2px;display:block;position:relative;top:12px}
.hamburger2{font-size:18px;background:#fff;height:2px;display:block;position:relative;top:18px}
.top_wrap-menu-bsw .title-bsw{color:#fff;font:500 26px Roboto;text-transform:uppercase;line-height:55px;left:70px;position:absolute;letter-spacinggg:0;display:none}</style>
<script>
//<![CDATA[
$(document).ready(function(){$(".widgetsplitone_right img").attr("src",function(a,b){return b.replace("s1600","s200")})})
//]]>
</script>
<script>
//<![CDATA[
$(document).ready(function(){$(".PopularPosts img").attr("src",function(a,b){return b.replace("w150-h150-p-k-no-nu","s1600")})})
//]]>
</script>
<noscript><meta content='0;url=//fb.com/100014201562904' http-equiv='refresh'/></noscript>
<!-- begin top wrap menu bsw -->
<div id='top-wrap-bsw-menu'>
<div class='top-wrap-menu_bsw'><nav class='top_wrap-menu-bsw'>
<input class='res-bsw-menu' type='checkbox'/>
<label class='res_bsw-menu'><span class='title-bsw'>Bác Sĩ Windows</span>
<span class='hamburger'></span>
<span class='hamburger1'></span>
<span class='hamburger2'></span>
</label>
<div class='logo'><a href='/'><img original='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh7AkDNKsl2JhlNl9YA2zHn_eS-7B0fl2NNlz-Pp0bFGHV5MedIKVgBoJiLLrzkjd83gsvuOGIab0ewR6poaj41PLRg22FdGjf1G53F2Vha3B1SZyjq26_ts1gcmNvgyCkbzO0cGbYOCNV/s100/Logo-Bac-Si-Windows.png' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh7AkDNKsl2JhlNl9YA2zHn_eS-7B0fl2NNlz-Pp0bFGHV5MedIKVgBoJiLLrzkjd83gsvuOGIab0ewR6poaj41PLRg22FdGjf1G53F2Vha3B1SZyjq26_ts1gcmNvgyCkbzO0cGbYOCNV/s100/Logo-Bac-Si-Windows.png'/>Bác Sĩ Windows</a></div>
<ul>
<li><a href='/' style='background:rgba(0,0,0,.2)'><i class='fa fa-home fa-lg'></i></a></li>
<li><a href='/blogspot'>BLOGSPOT<i class='fa fa-angle-down' style='margin:0 0 0 8px'></i></a>
<ul class='drop-down-bsw_menu'>
<li><a href='/blogspot'>Thủ thuật blogspot </a></li>
<li><a href='//www.bacsiwindows.com/theme' target='_blank'>Theme blogspot </a></li>
<li><a href='//www.bacsiwindows.com/search/label/Blogspot Menu'>Menu blogspot </a></li>
<li><a href='//www.bacsiwindows.com/blogger'>Widget blogspot </a></li>
<li><a href='//www.bacsiwindows.com/search/label/CSS'>CSS blogspot </a></li>
<li><a href='//www.bacsiwindows.com/search/label/Blogger Effect'>Effect blogspot </a></li>
<li><a href='//www.bacsiwindows.com/search/label/Blogger Loading'>Loading blogspot </a></li>
<li><a href='//www.bacsiwindows.com/contact'>Dịch vụ blogspot </a></li>
</ul>
</li>
<li><a href='//www.bacsiwindows.com/search/label/Phần Mềm'>PHẦN MỀM<i class='fa fa-angle-down' style='margin:0 0 0 8px'></i></a>
<ul class='drop-down-bsw_menu'>
<li><a href='//www.bacsiwindows.com/search/label/Antivirus'>
Diệt Virus </a></li>
<li><a href='//www.bacsiwindows.com/search/label/CCleaner'>CCleaner </a></li>
<li><a href='//www.bacsiwindows.com/2016/12/download-idm-full-crack-su-dung-vinh-vien.html'>I.D.M </a></li>
<li><a href='/copyright'>Bản quyền </a></li>
<li><a href='//www.bacsiwindows.com/2016/12/phan-mem-go-tieng-viet-unikey-moi-nhat.html'>Unikey </a></li>
</ul>
</li>
<li><a href='//www.bacsiwindows.com/'>THỦ THUẬT<i class='fa fa-angle-down' style='margin:0 0 0 8px'></i></a>
<ul class='drop-down-bsw_menu'>
<li><a href='//www.bacsiwindows.com/search/label/Thủ Thuật Máy Tính'>Thủ Thuật Máy Tính</a></li>
<li><a href='//www.bacsiwindows.com/search/label/Thủ Thuật Facebook'>Thủ Thuật Facebook</a></li>
<li><a href='//www.bacsiwindows.com/search/label/Thủ Thuật Youtube'>Thủ Thuật Youtube</a></li>
<li><a href='//www.bacsiwindows.com/search/label/Windows 10'>Thủ Thuật Windows 10</a></li>
</ul>
</li>
<li><a href='#'>ABOUT US<i class='fa fa-angle-down' style='margin:0 0 0 8px'></i></a>
<ul class='drop-down-bsw_menu'>
<li><a href='//www.bacsiwindows.com/p/top-commentators.html' target='_blank' title='Những người bình luận hàng đầu'>Top bình luận</a></li>
<li><a href='//www.bacsiwindows.com/comments' target='_blank'>Bình luận mới </a></li>
<li><a href='//www.bacsiwindows.com/ps' target='_blank'>Photoshop Online </a></li>
<li><a href='//www.bacsiwindows.com/p/ma-hoa-code.html' target='_blank'>Mã hóa HTML </a></li>
<li><a href='//www.bacsiwindows.com/p/nen-css.html' target='_blank'>Nén CSS </a></li>
<li><a href='//www.bacsiwindows.com/p/sitemaps.html' target='_blank'>Sitemaps </a></li>
<li><a href='//www.bacsiwindows.com/about' target='_blank'>Giới thiệu </a></li>
<li><a href='//www.bacsiwindows.com/contact' target='_blank'>Liên hệ </a></li>
<li><a href='//www.bacsiwindows.com/lien-ket' target='_blank'>Liên kết </a></li>
<li><a href='//www.bacsiwindows.com/rule' target='_blank'>Một số nội quy </a></li>
<li><a href='//www.bacsiwindows.com/admin' target='_blank'>Liên hệ Quản Trị Viên </a></li>
</ul>
</li>
<div class='search_box_menu'>
<form action='/search' id='searchthis' method='get' style='display:inline;'>
<input id='bsw_menu_search_box_v2_top_ws' name='q' placeholder='Tìm kiếm' type='text'/>
</form>
</div>
</ul>
</nav></div></div>
=> Thay đổi theo ý thích của bạn nhé. Nhất là Logo và tên Bác Sĩ Windows đấy :))

LỜI KẾT:

Chúc các bạn thành công, còn cái chữ thì chắc do font ròi. Thôi kệ đi má. K đc giống lắm :((
view-source:http://www.bacsiwindows.com/
Labels:
https://starthao-it.blogspot.com/2017/11/huong-dan-tao-thanh-menu-co-inh-sticky-menu.html
StarThảo-IT

Người Phán Xử:

Ước mơ giống như những vì sao… ta có thể không bao giờ chạm tay vào được, nhưng nếu đi theo chúng, chúng sẽ dẫn ta đến vận mệnh của mình

HIỆN ĐANG CÓ 26 bình luận
BÌNH LUẬN NGAY

avatar
Unknown MEMBER
November 12, 2017 at 12:52 AM

bài viết hay, nhưng còn thiếu :D đấy

TRẢ LỜI
avatar
StarThảo-IT MEMBER
November 12, 2017 at 5:52 AM

dạ, e sẽ update thêm B-)

TRẢ LỜI
avatar
Trần Quang Huy MEMBER
November 18, 2017 at 3:15 AM

Vào thăm blog ông nè. Viết thì viết cho hay hay đầy đủ chứ nhìn ít v :)

TRẢ LỜI
avatar
StarThảo-IT MEMBER
November 18, 2017 at 5:31 AM

Đầy đủ mà :D

TRẢ LỜI
avatar
Nguyễn Bảo Trang MEMBER
November 23, 2017 at 1:36 AM

Liên Kết đii a ơi hihi
Tên : Bảo Trang Blog
Url : https://baotrangblogseo.blogspot.com/

TRẢ LỜI
avatar
StarThảo-IT MEMBER
November 23, 2017 at 4:39 AM

bạn vào đây để đặt lk nhé

TRẢ LỜI
avatar
Trần Quang Huy MEMBER
December 1, 2017 at 8:46 PM

Xin lỗi nhưng A gỡ liên kết với em nhé. Còn về lý do em sẽ thông báo sau nhé

TRẢ LỜI
avatar
Chánh Đức Blog MEMBER
December 2, 2017 at 2:58 AM

Tôi mượn nhé bác :D tôi ghi nguồn :v

TRẢ LỜI
avatar
StarThảo-IT MEMBER
December 2, 2017 at 5:32 AM

được bạn

TRẢ LỜI
avatar
Chánh Đức Blog MEMBER
December 2, 2017 at 6:50 PM

Ghé thăm blog tui nha bác :V
:D http://www.chanhducit.tk/

TRẢ LỜI
avatar
StarThảo-IT MEMBER
December 2, 2017 at 11:40 PM

khung cmt blogger đâu r bác ;-?

TRẢ LỜI
avatar
Chánh Đức Blog MEMBER
December 2, 2017 at 11:43 PM

Bác nói tui mới nhớ :< đâu ròi nhỉ ! có cách nào thêm vào k ta

TRẢ LỜI
avatar
StarThảo-IT MEMBER
December 3, 2017 at 5:07 AM

template Sờ ta cường share thì hỏi thím ấy xem 8*

TRẢ LỜI
avatar
StarThảo-IT MEMBER
December 3, 2017 at 5:08 AM

chắc tại bác ẩn mất phần nào đó thôi, kiểm tra xem có css cho khung cmt chưa P-(

TRẢ LỜI
avatar
Chánh Đức Blog MEMBER
December 5, 2017 at 2:53 AM

Chúc bác có mọt kì giáng sinh vui vẻ <3

TRẢ LỜI
avatar
Chánh Đức Blog MEMBER
December 5, 2017 at 2:54 AM

^^ Ok bác

TRẢ LỜI
avatar
StarThảo-IT MEMBER
December 5, 2017 at 5:27 AM

thanks bác, bác cũng vậy nhé :)

TRẢ LỜI
avatar
Admin MEMBER
December 13, 2017 at 5:28 AM

Chào ông Tui Qua Tương Tác Nè :V

TRẢ LỜI
avatar
StarThảo-IT MEMBER
December 14, 2017 at 5:53 AM

chào bác sờ ta Nguyễn

TRẢ LỜI
avatar
Chánh Đức Blog MEMBER
December 20, 2017 at 1:39 AM

Chánh Đức IT chuyển qua url này nhé bác :
http://chanhducblogger.blogspot.com/
cảm ơn ạ <3

TRẢ LỜI
avatar
StarThảo-IT MEMBER
December 20, 2017 at 5:48 AM

đã đổi cho bạn

TRẢ LỜI
avatar
Unknown MEMBER
December 25, 2017 at 8:15 PM

Hay nha a :V

TRẢ LỜI
avatar
StarThảo-IT MEMBER
December 26, 2017 at 5:27 AM

thanks bạn

TRẢ LỜI
avatar
Huy Hoàng IT MEMBER
December 27, 2017 at 8:49 PM

temp :v ảo vậy

TRẢ LỜI
avatar
StarThảo-IT MEMBER
December 28, 2017 at 5:32 AM

Sao vậy bác ?

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.

Hãy xem hướng dẫn để bình luận theo đúng ý nhé.

Hướng dẫn bình luận

Tiện ích

  • Dùng những công cụ ở dưới để viết chữ theo ý muốn, chèn link

Chèn hình ảnh

  • Nếu muốn chèn hình ảnh, video từ Youtube vào khung bình luận, bạn chỉ việc paste trực tiếp link hình ảnh, link video youtube vào đó

Upload ảnh

Chèn một đoạn Code

  • Đầu tiên sử dụng công cụ mã hóa code phía dưới để mã hóa đoạn code muốn chèn.
    Sau đó dùng thẻ [code] CODE_ĐÃ_MÃ_HÓA [/code] hoặc [pre] CODE_ĐÃ_MÃ_HÓA [/pre] rồi paste vào khung bình luận
Hiện EmoticonsẨn Emoticons Hiện Upload ảnhẨn Upload ảnh
Click vào icon để bôi đen mã, sau đó copy mã
Ctrl + V hoặc Right click chọn Paste vào ô nhận xét để chèn Emoticon
Nếu dùng nhiều Emoticon giữa chúng ngăn cách bằng 1 dấu cách

Mã Hóa Code
Chữ đậm Chữ nghiêng Chữ nghiêng 2 Chèn Link Chèn Link Help ?Nhấn vào biểu tượng hoặc kiểu chữ hoặc chèn link sau đó nhấn nút Chọn rồi copy (Ctrl + C) để paste (Ctrl + V) vào khung viết bình luận. Mã hóa code nếu bạn muốn đưa code vào bình luận.

Chọn Xóa
Subscribe to: Post Comments ( Atom )