Hướng Dẫn Cách Thêm Menu BG dạng Facebook cho blogger

Xin chào các bạn. Sau một hành trình dò thám Internet thì mình đã tìm được một template rất đẹp đó là Timeline của Bác Sĩ Windows , ở template này mình kết mỗi cái Cover BG này ,nó vừa đẹp ,vừa chất nên mình đã dùng thử trên template của Star Tỉnh và thấy rất hiệu quả nên mình quyết định chia sẻ cho các bạn dùng chung.

Cách làm

Bạn tiến hành chèn đoạn CSS sau trước thẻ ]]></b:skin.

.cover-bg:active{}
#cover_bg{width:100%;position:relative;top:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}
.cover-bg{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8kG5FRcj-dpD00i5sum81HKlORuosm8uYmUPBy2M_gAcblUcnfkYgebAASD5W0ikbgQa-M47TuTEqoIY0LPkrJP8HYH_OSb0TgWsf3aOvyCsmh5BKpjXDlvkuu78hgBUrzPNWOSYNgyY/w1000-h500/cover_bg_bacsiwindows_com.jpg) no-repeat center;background-size:cover;height:350px;width:1350px;margin:0 auto;position:relative;transition:1s ease-in-out;-webkit-transition:1s ease-in-out;-moz-transition:1s ease-in-out}
.cover-bg p{color:#fff;position:absolute;bottom:0;font:500 24px Roboto,sans-serif;left:220px;margin:15px}
.cover-bg p span{display:block;font-size:15px;font-weight:400;margin:5px 0 0 0}
.profile_img img{transition:.3s;width:170px;height:170px;object-fit:cover;border-radius:50%;background:#fff1;padding:6px;;position:absolute;bottom:-40px;left:30px;z-index:1}
.profile_img img:hover{border-radius:0;background:white}
.cover-bg  h2{margin:0 0 10px 0;padding:0;font-size:22px;font-weight:500}
#menu{background:white;bottom:-50px;width:100%;position:absolute}
.menu li{list-style:none;display:inline;position:relative;left:230px}
.menu li a{text-decoration:none;color:#666;padding:0 10px;line-height:50px!important;display:inline-block;text-transform:uppercase;font:500 14px Roboto;border-right:1px solid #eee}
.menu li a:hover,.menu li a:focus{color:#6bad9d}
.btn1_cover{font:500 12px Roboto;letter-spacing:0;padding:4px 10px;display:inline-block;background:white;margin:0 0 0 10px;border-radius:4px;opacity:.7;text-transform:uppercase}
.btn1_cover:hover,.btn1_cover:focus{background:#fff;opacity:1}
.btn_cover{position:absolute;right:0;bottom:0;padding:15px}
#btop-btn a.change{opacity:1;visibility:visible;right:13px}
#btop-btn a{position:fixed;bottom:13px;right:-50px;z-index:999;background:white;padding:5px 15px;font-size:30px;opacity:0;visibility:hidden;transition:.5s}
@media screen and (max-width:320px){.top-header h2 a{font-size:30px!important}.read_more_ a,.read_more_{font-size:15px}h2.post-title{font:400 24px Roboto!important;line-height:1.7!important;text-align:center!important}#top_header{display:none}.thumb{height:200px!important}#admin-thumb{top:155px!important;margin:0 -40px!important}#admin-thumb img{width:80px!important;height:80px!important;border:4px solid white!important}.post{margin:215px 0 0!important}}
@media screen and (max-width:768px){.cover-bg p{left:50%;transform:translate(-50%,-50%);text-align:center;box-sizing:border-box;width:100%;top:50%}.profile_img img{transform:translatex(-50%);left:50%}.cover-bg{width:100%}.cover-bg p,#menu,.btn_cover{display:none}#sidebar-bacsiwindows_com_wrapper{width:90%;float:none;margin:auto}

Đặt đoạn code sau nơi bạn muốn hiển thị ( Thay thế cho thanh Menu hoặc đặt ở một nơi nào đó dễ nhìn).

 <div id="cover_bg"><div class="cover-bg">
<p>TKW TIPS<span>(Tìm Hiểu Kiến Thức Chưa Biết)</span></p><div class="profile_img"><img src="https://i.imgur.com/lbqBBsa.png"><div id="menu"><div class="menu">
<li><a href="/">Trang chủ</a></li><li><a href="/p/admin.html">Giới thiệu</a></li><li><a href="/search/label/Thủ Thuật Facebook">Facebook</a></li><li><a href="https://www.facebook.com/">Liên hệ</a></li><li><a href="/lienket">Liên kết</a></li><li><a href="/search/label/Thủ Thuật Blogspot">Blogger</a></li><li><a href="/search/label/Template Blogspot">Template</a></li></div></div></div><div class="btn_cover"><a class="btn1_cover" href="/admin">Cập nhật thông tin</a><a class="btn1_cover" href="/link">Xem nhật kí hoạt động</a></div></div></div>

Vậy là xong chúc các bạn thành công