Thông Tin

anh-dai-dien

Chưa gán giá trị

Trang chủ

Tạo menu tựa giống Facebook Responsive cho blogspot

Cùng chuyên mục:

Xin chào tất cả các bạn theo yêu cầu của một số bạn thì hôm nay mình sẽ chia sẻ một mẫu menu giống Facebook dành cho blogspot, code này mình lấy bên www.bacsiwindows.com. Xem demo ảnh bên dưới để biết menu đó trông như thế nào nhé
Demo Menu bên

HƯỚNG DẪN CÁCH LÀM:

Đây là cách làm:
Đăng nhập vào blogger.com vào Chủ đề -> chọn Chỉnh sửa HTML rồi tìm đoạn <body> và thêm toàn bộ đoạn code bên dưới xuống phía dưới thẻ vừa tìm được
<style>
.mobile_-theme-bsw{float:right;margin:3px!important;background:#fff;padding:0;border-radius:100px;color:#666!important;width:35px;height:35px;line-height:38px!important;text-align:center}
.log-out-bacsiwindows-btn{z-index:9;position:absolute;top:0;right:0;background:#d25252;width:30px;height:30px;line-height:30px;border-radius:50px;text-align:center;padding:0;margin:10px;box-sizing:border-box;font-size:15px;color:#fff!important;font-weight:500}
.fbuser_info_BSW{font-weight:500}
.right_btn_{position:absolute;right:0;font-size:24px;color:#fff!important;padding:10px}
.left_btn_{position:absolute;left:0;font-size:24px;color:#fff!important;padding:10px 18px}
.bsw_bsw_wrapper{margin:6px auto 15px}
#top_wrapmenu_bacsiwindows_v13{height:50px;background:#4267b2;position:relative}
#top_wrapmenu_bacsiwindows_v13_s{width:75%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}
.search-bacsiwindows_v13{background:rgba(0,0,0,.2);width:100%;text-align:center;height:27px;line-height:27px;font-size:14px;color:#555}
.search-bacsiwindows_v13::placeholder{color:#ccc!important}
#bttop,.go_group_BSW a,.comment_t,#bsw_loading_,.post_comment,.ghim,.pinned_post{display:none!important}
.bacsiwindows_slidemenu_v3{visibility:hidden;user-select:none;-webkit-user-select:none;-moz-user-select:none;background:#eee;display:block;font-size:16px;font-weight:400;height:100%;left:0;position:fixed;overflow:auto;transform:translate(10%,0);transition:all .35s ease-in-out;width:100%;z-index:999999;opacity:0;top:0}
.bacsiwindows_slidemenu_v3.show{visibility:visible;transform:none;opacity:1}
.info_bacsiwindows_{padding:0;margin:0;height:150px;position:relative;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrNHaAGxvGJjSQYcgn5n8ipJ7113YDa6V5Oaz971x-38qUiLtPvHjicoOOTOhsbomjZqx23PcOva8JgMClqIBKoayn95r5OPHfGbhh2jX6pGLtNcit4fEINYnBdxdDfxvbJ5L0ufdu7iFL/s600/giao-trinh-tu-hoc-guitar-tai-nha_-BacSiWindows-Com.jpg) no-repeat center center;background-size:cover}
.info_bacsiwindows_:before{content:&#39;&#39;;position:absolute;height:150px;width:100%;left:0;top:0;background:linear-gradient(transparent,black);opacity:.7}
.info_bacsiwindows_ img{border-radius:50%;height:auto;width:50px;position:absolute;top:50%;left:50%;transform:translate(-50%,-100%)}
.profile_text_BSW{z-index:1;position:absolute;bottom:0;padding:10px;text-align:center;width:100%;box-sizing:border-box}
.profile_text_BSW a{display:block;line-height:1.5;color:#fff;font-weight:500;font-size:16px}
.bacsiwindows_slidemenu-onmobile_-menu-v13{list-style:none;margin:0;padding:0;border:1px solid #ddd;border-left:0;border-right:0}
.bacsiwindows_slidemenu-onmobile_-menu-v13 li{display:block;position:relative;background:#fff}
.bacsiwindows_slidemenu-onmobile_-menu-v13 a{font:400 14px Roboto;background:transparent;color:#444;display:block;line-height:24px;padding:10px 20px;text-decoration:none}
.bacsiwindows_slidemenu-onmobile_-menu-v13 a:after{content:&#39;&#39;;background:#f5f5f5;height:1px;width:84%;position:absolute;bottom:0;right:0}
.bacsiwindows_slidemenu-onmobile_-menu-v13 a i{width:32px;height:32px;line-height:32px;text-align:center;color:#fff;border-radius:100px}
.bacsiwindows_slidemenu-onmobile_-menu-v13 a:hover{background-color:#eee}
.bacsiwindows_slidemenu-onmobile_-menu-v13 a.active{color:#333}
.bacsiwindows_slidemenu-onmobile_-menu-v13 a.active .bsw_dropdown_-icon{color:#333}
.nav-item_BSW{padding:0}
.nav-item_BSW i{margin:0 10px 0 0}
.nav-item_BSW2{padding:0 0 0 15px}
.bsw_dropdown_{display:none;list-style:none;margin:0;padding:0}
.bsw_dropdown_ li{background:#f9f9f9}
.bsw_dropdown_ a{color:#666;padding-left:62px}
.bsw_dropdown_ a:hover{background:#ddd}
.bsw_dropdown_-icon{color:#757575;height:50px;right:0;position:absolute;line-height:50px;top:0;width:50px;text-align:center;transition:.35s;opacity:0;border-left:1px solid #eee}
.bsw_dropdown_-icon.show{opacity:1;transform:none}
.bacsiwindows_slidemenu_v3::-webkit-scrollbar-track,.bacsiwindows_slidemenu_v3::-webkit-scrollbar-thumb,.bacsiwindows_slidemenu_v3::-webkit-scrollbar{width:0}
#responsive-menu_v3_bacsiwindows{z-index:21;width:100%;background:#fff;text-align:center;border-bottom:1px solid #ccc}
.responsive-menu_v3_bacsiwindows a{display:inline-block;width:15.5%;text-align:center;margin:0;padding:15px 0;box-sizing:border-box;color:#888;font-size:16px}
.responsive-menu_v3_bacsiwindows a:hover{color:#4267b2}
.responsive-menu_v3_bacsiwindows{display:inline;position:relative}
div#overlay{display:none;z-index:3;background:#fff;position:fixed;width:100%;height:100%;left:0;top:0;text-align:center}
div#jQsearchBSWv3{display:none;position:fixed;z-index:4;margin:auto;width:100%;background:#FFF;color:#000}
.form-search .jsSearchBSWv3{border:0;padding:12px 0 12px 28px;color:#444;font:400 15px Roboto;position:fixed;left:15px;top:15px;box-sizing:border-box;margin:0;width:93%;border-bottom:1px solid #ccc;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmfjNlAc0rdHVg5HyBYAEivpBeaYjnqijLxoqvs8WKChVnVzwk7WIEu_i4ULrBMkQuIR_1ouPZDHbPK8EEMj1Pt4RLZU7r-CxI-CT3D22z-i9UeYYtShxAB_X46coqrJSlD8cHwyThq_vu/s24/search_icon_dark.png) no-repeat center;background-position:0}
.form-search input:focus{outline:0}
#close{position:fixed;right:0;top:10px;border-radius:50%;padding:15px;cursor:pointer;color:#999}
.trending-search-bsw .content{position:fixed;top:60px;padding:10px;background:#fff;box-sizing:border-box;width:100%;text-align:left;height:80vh;overflow:auto}
.trending-search-bsw .content a{display:inline-block;font:400 14px Roboto;color:#666;margin:3px;padding:6px 15px;border:1px solid #ddd;border-radius:50px}
.number-noty{font-size:10px;position:absolute;background:#da5858;padding:2px 4px;border-radius:4px;top:-5px;color:#fff}
#top_wrapmenu_bacsiwindows_v13,#top-menu-bacsiwindows,#top-wrap-bsw-menu{display:none}
#res_menu_bsw{background:#66689c;position:relative}
.logo_text{padding:10px}
.logo_text img{width:40px;height:40px;border-radius:50%;vertical-align:middle}
.logo_text a{vertical-align:middle;font:500 18px Roboto;text-transform:uppercase;color:#fff;margin:0 0 0 10px}
@media screen and (max-width: 350px) {
a#bm{display:none!important}
}
</style>
<div id='res_menu_bsw'>
<div class='logo_text'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMnyi6bK111ghL-t-J0_5BSihKDRcvoeEqtO_LqwnnUdzPUsNYmrtOQhghaoLKPBGR7dg2hFfbbHfNpjwJNcSxbkmZD3fiQhitV5x1i_WBRc9N26xwux43MmAtcnofZiXzxkBMqR8WBDpa/s100/Logo-Bac-Si-Windows.png'/><a href='/'>Bác Sĩ Windows</a>
<a class='mobile_-theme-bsw' href='/contact'><i class='far fa-envelope'/></a>
<a class='mobile_-theme-bsw' href='javascript:;' id='bm' onclick='javascript:alert(&quot;Làm theo hướng dẫn để lưu BSW vào trình duyệt.&quot;)'><i class='far fa-bookmark'/></a>
</div>
</div>
<div id='top_wrapmenu_bacsiwindows_v13'>
<div id='top_wrapmenu_bacsiwindows_v13_s'>
<form action='/search' id='search-bacsiwindows_v13' method='get'>
<input class='search-bacsiwindows_v13' id='s' name='q' placeholder='Tìm kiếm' type='text'/></form>
</div><a class='left_btn_' href='javascript:;' onclick='window.history.back();'><i class='fa fa-angle-left'/></a>
<a class='right_btn_' href='/cmt'><i class='fa fa-comments-o'/></a></div>
<div id='overlay'>
<div class='trending-search-bsw'>
<div class='content'><a href='/search?q=guitar'>guitar</a><a href='/search?q=học+guitar'>học guitar</a><a href='/search?q=guitar'>hướng dẫn guitar</a><a href='/search?q=blogspot'>blogspot</a><a href='/search?q=thủ+thuật+blogspot'>thủ thuật blogspot</a><a href='/search?q=widget'>widget blogspot</a><a href='/search?q=popular+post'>popular post</a><a href='/search?q=subscribe'>widget đăng ký</a><a href='/search?q=template'>template miễn phí</a><a href='/'>bác sĩ windows</a><a href='/search?q=code'>code</a><a href='/search?q=javascript'>javascript</a><a href='/search?q=css'>css</a><a href='/search?q=html'>html</a><a href='/search?q=tiện+ích'>tiện ích</a><a href='/search?q=menu'>menu</a><a href='/search?q=comment'>comment</a><a href='/search?q=facebook'>facebook</a><a href='/search?q=google'>google</a></div>
</div>
<div id='jQsearchBSWv3'>
<form action='/search' class='form-search center-text' id='jq_search_bacsiwindows_v3' method='get'>
<input class='jsSearchBSWv3' id='s' name='q' placeholder='Nhập từ khóa tìm kiếm' type='text'/></form>
<div id='close' onclick='toggleOverlay()'><i class='fas fa-times'/></div>
</div>
</div>
<div id='responsive-menu_v3_bacsiwindows'>
<div class='responsive-menu_v3_bacsiwindows'><a href='/'><i class='fa fa-home' style='color:#4267b2'/></a></div>
<div class='responsive-menu_v3_bacsiwindows'><a href='/hop-tac'><i class='far fa-user'/></a></div>
<div class='responsive-menu_v3_bacsiwindows'><a href='/cmt'><i class='far fa-comments'/><!--<span class='number-noty'>99+</span>--></a></div>
<div class='responsive-menu_v3_bacsiwindows'><a href='javascript:;' onclick='alert(&apos;Chức năng này hiện chưa khả dụng.&apos;);'><i class='far fa-bell'/></a></div>
<div class='responsive-menu_v3_bacsiwindows'><a href='javascript:;' id='bsw_search' onclick='toggleOverlay()'><i class='fa fa-search'/></a></div>
<div class='responsive-menu_v3_bacsiwindows'><a class='toggle' href='javascript:;' id='bsw_nav_'><i class='fas fa-bars'/></a></div>
</div>
<nav class='bacsiwindows_slidemenu_v3' data-bacsiwindows_slidemenu_v3='active' data-bsw_nav_='#bsw_nav_'>
<div class='info_bacsiwindows_'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMnyi6bK111ghL-t-J0_5BSihKDRcvoeEqtO_LqwnnUdzPUsNYmrtOQhghaoLKPBGR7dg2hFfbbHfNpjwJNcSxbkmZD3fiQhitV5x1i_WBRc9N26xwux43MmAtcnofZiXzxkBMqR8WBDpa/s100/Logo-Bac-Si-Windows.png'/>
<div class='profile_text_BSW'><a href='/' id='fbuser_nonelogin_bacsiwindows'>Bác Sĩ Windows - Trường Nguyễn Blogger</a><a href='mailto:truongdz2069@gmail.com' style='opacity:.85;font-size:14px'>truongdz2069@gmail.com</a></div>
</div>
<ul class='bacsiwindows_slidemenu-onmobile_-menu-v13'>
<li><a href='/'><i class='fa fa-home' style='background:#4267b2'/><span class='nav-item_BSW2'>Trang chủ</span></a></li>
<li>
<a data-bsw_dropdown_-toggle='active' href='javascript:;'>
<span class='nav-item_BSW'><i class='fa fa-tags' style='background:#6acdec'/> Tất cả chuyên mục</span>
<span class='bsw_dropdown_-icon show' data-bsw_dropdown_-icon='active'><i class='fa fa-angle-down' style='background: none; color: #777; padding: 0;'/></span>
<span class='bsw_dropdown_-icon' data-bsw_dropdown_-icon='active'><i class='fa fa-angle-up' style='background: none; color: #333; padding: 0;'/></span>
</a>
<ul class='bsw_dropdown_' data-bsw_dropdown_='active'>
<li><a href='/blogspot'>Thủ Thuật Blogspot</a></li>
<li><a href='/search/label/Facebook'>Thủ Thuật Facebook</a></li>
<li><a href='/theme'>Theme Blogspot</a></li>
<li><a href='/tan-man'>Tản Mạn / Tâm Sự</a></li>
<li><a href='/search/label/Giveaway'>Giveaway</a></li>
</ul>
</li>
<li>
<a data-bsw_dropdown_-toggle='active' href='javascript:;'>
<span class='nav-item_BSW'><i class='fa fa-code' style='background:#7fa3af'/> Tools - Công cụ</span>
<span class='bsw_dropdown_-icon show' data-bsw_dropdown_-icon='active'><i class='fa fa-angle-down' style='background: none; color: #777; padding: 0;'/></span>
<span class='bsw_dropdown_-icon' data-bsw_dropdown_-icon='active'><i class='fa fa-angle-up' style='background: none; color: #333; padding: 0;'/></span>
</a>
<ul class='bsw_dropdown_' data-bsw_dropdown_='active'>
<li><a href='/mahoahtml'>Mã hóa HTML</a></li>
<li><a href='/nencss'>Nén / Rút gọn CSS</a></li>
<li><a href='/upload'>Upload hình ảnh Imgur</a></li>
<li><a href='/vietchunguoc'>Viết chữ ngược</a></li>
<li><a href='/ps'>Pixlr / Photoshop Online</a></li>
<li><a href='/laymamau'>Lấy mã màu từ ảnh</a></li>
<li><a href='/testresponsive'>Test responsive website</a></li>
<li><a href='/iconfb'>Icon Facebook</a></li>
</ul>
</li>
<li><a href='/about'><i class='far fa-user' style='background:#8faf5e'/><span class='nav-item_BSW2'>Về chúng tôi</span></a></li>
<li><a href='/guitar'><i class='fas fa-music' style='background:#d45c5c'/><span class='nav-item_BSW2' style='font-weight:500'>Giáo trình Guitar đệm hát cơ bản</span></a></li>
<li><a href='/contact'><i class='far fa-envelope' style='background:#b38c50'/><span class='nav-item_BSW2'>Liên hệ</span></a></li>
<li><a href='/hop-tac'><i class='far fa-handshake' style='background:#7e5eaf'/><span class='nav-item_BSW2'>Hợp tác nội dung</span></a></li>
<li><a href='/rule'><i class='fa fa-exclamation-triangle' style='background:#5eaf7b'/><span class='nav-item_BSW2'>Nội quy Blog</span></a></li>
<li><a href='/upload'><i class='fa fa-image' style='background:#797974'/><span class='nav-item_BSW2'>Upload hình ảnh</span></a></li>
<li><a href='/cmt'><i class='far fa-comments' style='background:#5b8460'/><span class='nav-item_BSW2'>Bình luận mới</span></a></li>
<li><a href='/' style='color:#777;text-align:center'>&#169; 2018 Bác Sĩ Windows - Trường Nguyễn Blogger</a></li>
</ul>
<a class='log-out-bacsiwindows-btn' href='javascript:;' id='bsw_nav_' target='blank'><i class='fa fa-times'/></a>
</nav>
<script type='text/javascript'>function toggleOverlay(){var e=document.getElementById(&quot;overlay&quot;),l=document.getElementById(&quot;jQsearchBSWv3&quot;);e.style.opacity=1,&quot;block&quot;==e.style.display?(e.style.display=&quot;none&quot;,l.style.display=&quot;none&quot;):(e.style.display=&quot;block&quot;,l.style.display=&quot;block&quot;,document.forms.jq_search_bacsiwindows_v3.elements.s.focus(500))}</script>
<script>
//<![CDATA[
var _0x9925=["jQuery","use strict","$el","opt","extend","init","prototype","initToggle","initDropdown","click","target","bsw_nav_","data","closest","show","toggleClass","bacsiwindows_slidemenu_v3-no-scroll","body","toggleOverlay","removeClass","hideOverlay","on","[data-bsw_dropdown_-toggle]","slideToggle","[data-bsw_dropdown_]","next","[data-bsw_dropdown_-icon]","find","preventDefault","[data-bacsiwindows_slidemenu_v3-overlay]","<div data-bacsiwindows_slidemenu_v3-overlay class=\"bacsiwindows_slidemenu_v3-overlay\"/>","append","fadeToggle","fadeOut","bacsiwindows_slidemenu_v3","fn","each","[data-bacsiwindows_slidemenu_v3]"];
var _0xc13c=[_0x9925[0],_0x9925[1],_0x9925[2],_0x9925[3],_0x9925[4],_0x9925[5],_0x9925[6],_0x9925[7],_0x9925[8],_0x9925[9],_0x9925[10],_0x9925[11],_0x9925[12],_0x9925[13],_0x9925[14],_0x9925[15],_0x9925[16],_0x9925[17],_0x9925[18],_0x9925[19],_0x9925[20],_0x9925[21],_0x9925[22],_0x9925[23],_0x9925[24],_0x9925[25],_0x9925[26],_0x9925[27],_0x9925[28],_0x9925[29],_0x9925[30],_0x9925[31],_0x9925[32],_0x9925[33],_0x9925[34],_0x9925[35],_0x9925[36],_0x9925[37]];
!function(_0x4377x2)
{
 _0xc13c[1];function _0x4377x3(_0x4377x3,_0x4377x4)
 {
  this[_0xc13c[2]]= _0x4377x2(_0x4377x3),this[_0xc13c[3]]= _0x4377x2[_0xc13c[4]](!0,{},_0x4377x5,_0x4377x4),this[_0xc13c[5]](this)
 }
 var _0x4377x5={};
 _0x4377x3[_0xc13c[6]]= {init:function(_0x4377x2)
 {
  _0x4377x2[_0xc13c[7]](_0x4377x2),_0x4377x2[_0xc13c[8]](_0x4377x2)
 }
 ,initToggle:function(_0x4377x3)
 {
  _0x4377x2(document)[_0xc13c[21]](_0xc13c[9],function(_0x4377x5)
  {
   var _0x4377x4=_0x4377x2(_0x4377x5[_0xc13c[10]]);
   _0x4377x4[_0xc13c[13]](_0x4377x3[_0xc13c[2]][_0xc13c[12]](_0xc13c[11]))[0]?(_0x4377x3[_0xc13c[2]][_0xc13c[15]](_0xc13c[14]),_0x4377x2(_0xc13c[17])[_0xc13c[15]](_0xc13c[16]),_0x4377x3[_0xc13c[18]]()):_0x4377x4[_0xc13c[13]](_0x4377x3.$el)[0]|| (_0x4377x3[_0xc13c[2]][_0xc13c[19]](_0xc13c[14]),_0x4377x2(_0xc13c[17])[_0xc13c[19]](_0xc13c[16]),_0x4377x3[_0xc13c[20]]())
  }
  )
 }
 ,initDropdown:function(_0x4377x3)
 {
  _0x4377x3[_0xc13c[2]][_0xc13c[21]](_0xc13c[9],_0xc13c[22],function(_0x4377x3)
  {
   var _0x4377x5=_0x4377x2(this);
   _0x4377x5[_0xc13c[25]](_0xc13c[24])[_0xc13c[23]](500),_0x4377x5[_0xc13c[27]](_0xc13c[26])[_0xc13c[15]](_0xc13c[14]),_0x4377x3[_0xc13c[28]]()
  }
  )
 }
 ,toggleOverlay:function()
 {
  var _0x4377x3=_0x4377x2(_0xc13c[29]);
  _0x4377x3[0]|| (_0x4377x3= _0x4377x2(_0xc13c[30]),_0x4377x2(_0xc13c[17])[_0xc13c[31]](_0x4377x3)),_0x4377x3[_0xc13c[32]](500)
 }
 ,hideOverlay:function()
 {
  _0x4377x2(_0xc13c[29])[_0xc13c[33]](500)
 }
 },_0x4377x2[_0xc13c[35]][_0xc13c[34]]= function(_0x4377x5)
 {
  return this[_0xc13c[36]](function()
  {
   _0x4377x2[_0xc13c[12]](this,_0xc13c[34])|| _0x4377x2[_0xc13c[12]](this,_0xc13c[34], new _0x4377x3(this,_0x4377x5))
  }
  )
 }
}
(window[_0xc13c[0]]);$(_0xc13c[37])[_0xc13c[34]]()
//]]></script>
Chúc bạn thành công!
, , , ,
0 Nhận xét

Đăng ký: Đăng Nhận xét (Atom)