Hướng dẫn tạo thêm Menu mở rộng đầu trang / Cuối trang - SideBar trượt Left Right giống Blogspot DigittalNomad.Vn

Gia Bảo
ɡɩλ✿ßảσ︵²ᵏ⁶ : Viết Blog Truyền Thông, Thiết Kế Đồ Họa Quảng Cáo, Làm Video Marketing.
  • Quảng bá sản phẩm Thớt Gỗ
  • Giới thiệu công ty cung cấp, ván ghép theo yêu cầu , tới các doanh nghiệp chuyên sản xuất đồ gỗ nội thất, mộc gia dụng & đơn vị chuyên thi công lắp đặt Nhà Gỗ.
    • Thông Điệp : Vật Liệu Xanh, Bảo Vệ Môi Trường.

    Menu được thiết kế có tác dụng điều hướng trên trang blog / web nhằm giúp người dùng di chuyển nhanh đến chuyên mục, bài viết trên blog hoặc đi tới một địa chỉ website khác. Xu hướng truy cập web trên các thiết bị di động cầm tay ngày càng nhiều đòi hỏi việc thiết kế menu Web-Blog cần phù hợp và tương thích với giao diện thân thiện với mobile và thuận tiện cho người dùng. Trong nội dung bài viết hướng dẫn các bạn chèn thêm menu điều hướng trên web vào các vị trí Đầu trang, cuối trang bên trái, bên phải & được chia làm 2 phần ( Phần 1 : Chèn Menu trên Website DigitalNomad.Vn & Phần 2 : Chia sẻ code tạo Menu mở rộng khác ). 
    Sau đây là phần hướng dẫn chi tiết cách chèn menu lên Web / Bog của bạn .
     
    PHẦN I : CHÈN MENU TRÊN WEBSITE DIGITALNOMAD.VN    

    MeNu Đơn Giản : Đây là thủ thuật blogspot tạo cấu trúc Menu điều hướng dạng Div dạng Text đơn giản & tạo menu dạng list, box share link, điều hướng đơn giản thích hợp dùng chèn vào SideBar - Trang Chủ - Trang Nhãn Blogspot :    

    MeNu dạng Div : 

    <div  style="font-size: 13.5px;margin: 2.5px;background: white;padding: 4.5px 8px !important;border-radius: 4px;border: 1px solid #ccc;border-radius: 3px;">
    <b>
    Gợi ý :
    <b style="color:blue">#</b><a href="https://www.digitalnomad.vn/2021/06/tong-hop-html-css-javascript-du-kieu-chen-vao-blogspot-website-cua-banNhi687.html">Html, Css, JavaScript </a> &nbsp;

    <b style="color:blue">#</b><a href="https://www.digitalnomad.vn/2021/09/thu-thuat-blogspot-su-dung-cac-loai-the-blogger21Ki.html">LayOut Tags BlogSpot </a> &nbsp;

    <b style="color:blue">#</b><a href="https://www.digitalnomad.vn/p/tips.html#danhsachPopup">Popup </a> &nbsp;

    <b style="color:blue">#</b><a href="https://www.digitalnomad.vn/2021/07/tong-hop-thu-thuat-code-web-giup-ban-thiet-ke-giao-dien-website-kiem-tien-dep-chuan-ui-uxBris526.html">Web Ui Ux </a> &nbsp;

    <b style="color:blue">#</b><a href="https://www.digitalnomad.vn/search/label/Consignment">Bán Ký Gửi </a> &nbsp;

    <b style="color:blue">#</b><a href="https://www.digitalnomad.vn/search/label/Business">Kinh Doanh </a> &nbsp;

    <b style="color:blue">#</b><a href="https://www.digitalnomad.vn/2021/03/mmo-kiem-tien-online-tu-website-khong-kho-nhung-phai-biet-cachVoi297.html">MMO </a> &nbsp;

    <b style="color:blue">#</b><a href="https://www.digitalnomad.vn/search/label/Marketing">Marketing </a> &nbsp;

    <b style="color:blue">#</b><a href="https://www.digitalnomad.vn/search/label/Du%20L%E1%BB%8Bch%20Ki%E1%BA%BFm%20Ti%E1%BB%81n">Du Lịch Kiếm Tiền </a> &nbsp;

    <b style="color:blue">#</b><a href="https://www.digitalnomad.vn/2021/08/keyword-tu-khoa-seo-top-google-tren-Blog-Gia-BaoKsaiz9.html">Seo Lên Top Google </a> &nbsp;

    <b style="color:blue">#</b><a href="https://www.digitalnomad.vn/2021/05/thiet-ke-landing-page-chay-quang-cao-google-ads-blog-web-content-marketingTo9p.html">Landing Page & Google Ads </a> &nbsp;

    <b style="color:blue">#</b><a href="https://www.digitalnomad.vn/2021/06/nen-tang-mmo-mang-luoi-ad-network-cach-kiem-tien-online-viec-lam-tai-nhaTwoKe8o9.html">
    Ad NetWork / Google Adsense / Mgid </a> &nbsp;

    <b style="color:blue">#</b><a href="https://www.digitalnomad.vn/p/list.html">
    List </a> &nbsp;

    <b style="color:blue">#</b><a href="https://www.digitalnomad.vn/p/tips.html">
    Tips </a> &nbsp;

    <b style="color:blue">#</b><a href="https://www.digitalnomad.vn/p/knowledge-experience-skill.html">
    List Kiến Thức, Kinh Nghiệm, Kỹ Năng   </a> &nbsp;

    <b style="color:blue">#</b><a href="https://www.digitalnomad.vn/2021/03/Review-BlogVurYum2E1.html">
    Review   </a> &nbsp;
    </b> 
    </div> 

    Tạo Side Bar bên Phải :

     <style type="text/css"> 
    
#gb{
    
position:fixed;
    
top:90px;
    
z-index:+1000;
    
}
    
* html #gb{position:relative;}
    
.gbtab{
    
height:150px;
    
width:50px;
    
float:left;
    
cursor:pointer;
    
background:url('https://2.bp.blogspot.com/-gJsNMloh51g/WblGu-aejuI/AAAAAAAAByw/qMDNpSSrlCgKPtTxoekvBf9UPChW36fWwCLcBGAs/s1600/MENU_RIGHT.png') no-repeat; }
    
.gbcontent{
    
float:left;
    
border:2px solid #990000;
    
background:#F5F5F5;
    
padding:10px;
    
}
</style>
    
<script type="text/javascript">
    
function showHideGB(){
    
var gb = document.getElementById("gb");
    
var w = gb.offsetWidth;
    
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
    
gb.opened = !gb.opened;
    
}
    
function moveGB(x0, xf){
    
var gb = document.getElementById("gb");
    
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
    
var dir = xf>x0 ? 1 : -1;
    
var x = x0 + dx * dir;
    
gb.style.right = x.toString() + "px";
    
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
    
}
    
</script>
    
<div id="gb">
    
<div class="gbtab" onclick="showHideGB()"> </div>
    
<div class="gbcontent">
    
<a href="#">
    
Code Blogspot DigitalNomad.Vn
    
</a>
    
<br/>
    
<a href="https://digitalnomadplus.blogspot.com/p/sitemap.html">Sitemap - Sơ đồ trang</a>
    

<div style="text-align:right">
    
<a href="javascript:showHideGB()">
    
[Hide]
    
</a>
    
</div>
    
</div>
    
</div>
    
<script type="text/javascript">
    
var gb = document.getElementById("gb");
    
gb.style.right = (30-gb.offsetWidth).toString() + "px";
    
</script>

    Sticky Menu - cố định cuối trang :

    <!--chen Stiky menu chan trang  -->  
    <link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>  
    
<!--mau Iris-->
    
<style>
    
.sticky-bottom{position:fixed;bottom:0;width:100%;max-width:2024px;z-index:999;background:#f2f2f2;padding-top:5px;text-align:center;box-sizing:border-box;}
    
.button-sticky-bottom{position:absolute;width:40px;height:30px;background:#f2f2f2;top:-30px;padding:10px;border-radius:100%;z-index:97;left:50%;margin-left:-30px;text-align:center;}
    
#mobile-navi, #mobile-share-bottom{position:relative!important;z-index:98!important;}  
    
#mobile-navi{z-index:999;position:fixed;margin:0!important;padding-bottom:15px;bottom:0;left:0;width:100%;height:40px;background:#fff;border-top:1px solid #eee;box-shadow:0 -1px 5px -2px rgba(0,0,0,0.1);overflow:hidden;}
    
#mobile-navi li{width:25%;height:40px;float:left;}
    
#mobile-navi li a{display:block;width:100%;height:100%;font-family:sans-serif;font-size:12px;font-weight:400;color:#555;text-align:center;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
    
#mobile-navi li a:hover{color:#00a1d6}
    
#mobile-navi li a span[class*=&quot;ti-&quot;]{display:block;width:100%;height:25px;line-height:28px;font-size:14px;margin-top:0}
    
#mobile-navi li a a{color:#555}
    
.ti-home:before{content:&quot;f015&quot;;font-family:FontAwesome;}
    
.ti-search:before{content:&quot;f002&quot;;font-family:FontAwesome;}
    
.ti-label:before{content:&quot;f00a&quot;;font-family:FontAwesome;}
    
.ti-service:before{content:&quot;f07a&quot;;font-family:FontAwesome;}} 
    
</style>  
    
  
<center>  
    
<div class='sticky-bottom'>
    
<a class='button-sticky-bottom' href='javascript:;'>
    

  <i class='fa fa-sort fa-lg'/></a>
    

  <ul id='mobile-navi' style='display: block;'>
    
<li class='btnHome' style='list-style-type:none;'>
    
<a href='/' title='Trang chủ'>
    
<span class='ti-home'/>Trang chủ</a>
    
</li>
    
<li class='btnSearchMobile' style='list-style-type:none;'>
    
 <a href='#' title='Tìm kiếm'><span class='ti-search'/>Tìm kiếm</a>
</li>
    
<li class='btnLabel' style='list-style-type:none;'>
    
<a href='#' title='Danh mục'><span class='ti-label'/>Danh mục</a>
</li>
    
<li class='btnService' style='list-style-type:none;'>
    
<a href='#' title='Store'><span class='ti-service'/>Cửa hàng</a>
</li>
    
</ul>
    
</div>
    
</center>
    
  
  <script type='text/javascript'>
    
    $(&#39;.button-sticky-bottom&#39;).click(function(){
    
        $(&quot;#mobile-navi&quot;).slideToggle();
    
    })
    
</script>
      
<!--end mau Iris-->

    Sticky menu Helper101 đầu trang :

    <link rel="stylesheet" type="text/css" href="https://rawgit.com/101Helper/docs/master/slideout-nav-public.css" />
    <nav id="nava" role="navigation" class="sticky-nav" style="top: 0px;">
    
<form id="searchbox" method="get" action="/search">
    
<input name="q" type="text" id="search-in" size="19" required />
    
<input name="m" type="hidden" value="1" />
    
<button type="submit"  class="_54k8 _56bs _56b_ _56bw _56bu"  id="u_0_1" data-sigil="touchable"><span class="_55sr">Go!</span></button>
    
<img id="hide-search" src="http://1.bp.blogspot.com/-tKEvMrl1rNg/VlHno1INErI/AAAAAAAAEDM/p6QC4v0mUGg/s1600/rsz_close-icon.jpg" />
    
<div id="search-height"></div>
    
</form>
    
<div class="prl-container">
    
<div class="nav-wrapper clearfix">
    
<img id="show-search" src="http://2.bp.blogspot.com/-JJaM7cFOVhQ/VlHnpNl_awI/AAAAAAAAEDU/DoJe685oe7w/s1600/rsz_search-icon.png" />
    
<div style="float:left;">
    
<div class="nav_menu_control"><a href="#" data-prl-offcanvas="{target:'#offcanvas'}"><img src="http://1.bp.blogspot.com/-pb2BSgtLzLA/VlHnpOZWKCI/AAAAAAAAEDQ/T3ujbHq-QXE/s1600/rsz_mobile-menu-icon.png"/></a></div>
    
</div>
    
<div class="container">
    
<div class="left">
    
<a href="/"><img src="https://1.bp.blogspot.com/-SpNGqoBgni0/YAo0WxDPMKI/AAAAAAAACgE/Aq3HYBeiuawJWvA-nrYS3nmhSxhz81MrgCLcBGAsYHQ/s16000/Du-lich-Kiem-tien-tu-website-DigitalNomad.vn-Z5Q1.png" class="logo" alt="Một trăm lẻ 1 Helper Blogspot"/></a>
    
</div>
    
<div class="clear"></div></div></div></div></nav><div style="clear: both;"></div>
    

 <div id="offcanvas" class="prl-offcanvas">
    
<div class="prl-offcanvas-bar">
    
<div class="social-icons" style="padding-top: 5px;background: #fff;padding-left: 5px;">
<p>Follow us:</p>
    
<a href="#"><img border="0" src="http://2.bp.blogspot.com/-GQPoAuiBzH8/VkyJRB21uUI/AAAAAAAAECk/hu0P8MunxW0/s1600/facebook.png" /></a>
<a href="#"><img border="0" src="http://4.bp.blogspot.com/-fWnS_YBm4Fk/VkyJtu17mhI/AAAAAAAAEC0/7ujWxnTR9S0/s1600/Twitter-Logo.png" /></a>
    
<a href="#"><img border="0" src="http://2.bp.blogspot.com/-Y4pUO8DhyRI/VkyJRMUnxFI/AAAAAAAAECs/3K3W7_XD4eM/s1600/App-Pinterest-icon.png" /></a>
    
<a href="#"><img border="0" src="http://4.bp.blogspot.com/-JWK2kZI99O4/VkyJRB8aZYI/AAAAAAAAECo/rX64EboMhD4/s1600/rsz_circle-google-plus-128.png" /></a>
</div>
    
<nav class="side-nav">
    
<ul id="nav-list" class="nav-list">
    
<li><a href="/">Home</a></li>
    
Blog - Web liên quan
    
<li><a href="#">Dulichkythuatso.blogspot.com</a></li>
    
<li><a href="#">DigitalNomadPlus.blogspot.com</a></li>
    
Kinh doanh :
    
<li><a href="#">Thớt gỗ</a></li>
    
<li><a href="#">Gỗ xẻ sấy</a></li>
    
<li><a href="#">Gỗ ghép</a></li>
    
<li><a href="#">Ván gỗ lót gác</a></li>
    
<li><a href="#">Bàn ghế Cafe - Bàn ghế</a></li>
    
Hợp tác Marketing content
    
<li><a href="#">Dịch vụ kế toán</a></li>
    
<li><a href="#">Rèm cửa</a></li>
    
Content Writing 
    
<li><a href="#">Du Lịch</a></li>
    
<li><a href="#">Thiết kế web BlogSpot</a></li>
    



<!-- 

    
Review
     
Dụng cụ nhà bếp bằng gỗ
    
Quán cafe 
    

Web Seo :
    
Goghepthanh.com
    
DichvuketoanPlus.com
    

Web Content Marketing
    
Vietquangcao.xyz
    
DigitalNomad.VN
    


<li><a href="#">Blogger tips and tricks</a></li>
    
<li><a href="#">Blogger seo</a></li>
    
<li><a href="#">Google webmaster tools tutorials</a></li>
    
<li><a href="#">Bing webmaster tools tutorials</a></li>
    
<li><a href="#">Blogger menus</a></li>
    
<li><a href="#">Earn money blogging</a></li>
    
<li><a href="#">Blogger gadgets</a></li>
    
<li><a href="#">How to's/Blogging</a></li>
    
<li><a href="#">Mobile blogging</a></li>
-->

    
<li><a href="#">Sitemap</a></li>
<a class="abt" href="#"><img src="https://4.bp.blogspot.com/-Et4EX_hsQDI/V35jh5bmRGI/AAAAAAAAFfU/bHaT1rx1d2AMPWWS-2nWKgrjytLxSfq-ACLcB/s1600/abt.png"/>DigitalNomad.VN</a>
    
</ul>
    
</nav>
    

</div></div>
    
<script type='text/javascript' src='https://rawgit.com/101Helper/docs/master/slideout_mobile_menu.js'></script>
    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    
<script type='text/javascript' src='https://rawgit.com/101Helper/docs/master/slideout_mobile_menu.js'></script>
<script>
    
$(document).ready(function(){
    
    $("#hide-search").click(function(){
    
        $("#searchbox").hide();
    
    });
    
    $("#show-search").click(function(){
    
        $("#searchbox").show();
    
    });
    
});
    
</script>
    
<div id='menu-height'/></div>
     
    PHẦN II : CHIA SẺ THÊM CODE TẠO MENU MỞ RỘNG   
     
    Code Tạo menu dọc bên trái
     
    Bạn vào bố cục chọn thêm tiện Html & chèn đoạn code sau : 
    <style>
    
@import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
    
}
    
@import url(http://fonts.googleapis.com/css?family=Titillium+Web:300);
    

.logo{
    

}
    

.settings {
    
  height:73px;
    
  float:left;
    
  background-image:url(http://s3.postimg.org/bqfooag4z/startific.jpg);
    
  background-repeat:no-repeat;
    
  width:250px;
    
  margin:0px;
    
 text-align: center;
    
font-size:20px;
    
font-family: 'Strait', sans-serif;
    

}
    



.hover {
    
  height:73px;
    
  float:left;
    
  background-image:url(http://s27.postimg.org/4hhl2szcf/startific_small.jpg);
    
  background-repeat:no-repeat;
    
  width:255px;
    
  margin:0px;
    
}
    





.fa-lg {
    
font-size: 1em;
    
  
}
    
.fa {
    
position: relative;
    
display: table-cell;
    
width: 55px;
    
height: 36px;
    
text-align: center;
    
top:12px; 
    

font-size:20px;
    



}
    



.main-menu:hover, nav.main-menu.expanded {
    
width:250px;
    
overflow:hidden;
    
opacity:1;
    

}
    

.main-menu {
    
background:#F7F7F7;
    
border-right:1px solid #e5e5e5;
    
position:absolute;
    
top:0;
    
bottom:0;
    
height:100%;
    
left:0;
    
width:55px;
    
overflow:hidden;
    
-webkit-transition:width .2s linear;
    
transition:width .2s linear;
    
-webkit-transform:translateZ(0) scale(1,1);
    
box-shadow: 1px 0 15px rgba(0, 0, 0, 0.07);
    
  opacity:1;
    
}
    

.main-menu>ul {
    
margin:7px 0;
    

}
    

.main-menu li {
    
position:relative;
    
display:block;
    
width:250px;
    
  


}
    

.main-menu li>a {
    
position:relative;
    
width:255px;
    
display:table;
    
border-collapse:collapse;
    
border-spacing:0;
    
color:#959595;
    
font-size: 14px;
    
text-decoration:none;
    
-webkit-transform:translateZ(0) scale(1,1);
    
-webkit-transition:all .14s linear;
    
transition:all .14s linear;
    
font-family: 'Strait', sans-serif;
    
border-top:1px solid #F0F0F0;
    
box-shadow:inset 0 1px 1px #FAFAFA;
    
text-shadow: 1px 1px 1px  #fff;  
    
}
    



.main-menu .nav-icon {
    
  
position:relative;
    
display:table-cell;
    
width:55px;
    
height:36px;
    
text-align:center;
    
vertical-align:middle;
    
font-size:18px;
    

}
    

.main-menu .nav-text  {
    
   
position:relative;
    
display:table-cell;
    
vertical-align:middle;
    
width:190px;
    
font-family: 'Titillium Web', sans-serif;
    
}
    

.main-menu .share {
    
}
    



.main-menu .fb-like {
    

left: 180px;
    
position:absolute;
    
top: 15px;
    
}
    

.main-menu>ul.logout {
    
position:absolute;
    
left:0;
    
bottom:0;
    
  
}
    

.no-touch .scrollable.hover {
    
overflow-y:hidden;
    

}
    

.no-touch .scrollable.hover:hover {
    
overflow-y:auto;
    
overflow:visible;
    
  
}
    




.settings:hover, settings:focus {   
    
  background:url( http://s3.postimg.org/bqfooag4z/startific.jpg);
    
}
    



a:hover,a:focus {
    
text-decoration:none;
    
border-left:0px solid #F7F7F7;
    



}
    

nav {
    
-webkit-user-select:none;
    
-moz-user-select:none;
    
-ms-user-select:none;
    
-o-user-select:none;
    
user-select:none;
    
  
}
    

nav ul,nav li {
    
outline:0;
    
margin:0;
    
padding:0;
    

}
    
.main-menu li:hover>a,nav.main-menu li.active>a,.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus,.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus,.no-touch .dashboard-page nav.dashboard-menu ul li:hover a,.dashboard-page nav.dashboard-menu ul li.active a {
    
color:#fff;
    
background-color:#00bbbb;
    
text-shadow: 0px 0px 0px; 
    
}
    
.area {
    
float: left;
    
background: #e2e2e2;
    
width: 100%;
    
height: 100%;
    
}
    
@font-face {
    
  font-family: 'Titillium Web';
    
  font-style: normal;
    
  font-weight: 300;
    
  src: local('Titillium WebLight'), local('TitilliumWeb-Light'), url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v2/anMUvcNT0H1YN4FII8wpr24bNCNEoFTpS2BTjF6FB5E.woff) format('woff');
    
}  
    
  </style>  
    
  
  <nav class="main-menu">
    

      <div class="logo">
    
</div>
    
<div class="settings">
    
</div>
    
<ul>
    
<li>
    

<a href="/">
    
<i class="fa fa-home fa-lg"></i>
    
<span class="nav-text">Home</span>
    

</a>
    
</li>
    
<!--  
    
<li>
    

  <a href="#">
    
<i class="fa fa-heart-o fa-lg"></i>
    

<span class="share">
    

<div class="addthis_default_style addthis_32x32_style">
    

  
<div style="position:absolute;
    
margin-left: 56px;top:3px;">
    

<a class="addthis_button_facebook"></a>
    
<a class="addthis_button_twitter"></a>
    
<a class="addthis_button_google_plusone_share"></a>
    
</div>
    

<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
    
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4ff17589278d8b3a"></script>
    

</span>
    
<span class="twitter"></span>
    
<span class="google"></span>
    
<span class="nav-text">
    
</span>
    
</a>
    

</li>
    
-->
    
  
  
<li class="has-subnav">
    
<a href="#">
    
<i class="fa fa-clock-o fa-lg"></i>
    
<span class="nav-text">
    
News
    
</span>
    
</a>
    

</li>
    
<li>
    
<a href="#">
    
<i class="fa fa-desktop fa-lg"></i>
    
<span class="nav-text">
    
Technology
    
</span>
    
</a>
    
</li>
    
<li class="has-subnav">
    
<a href="#">
    
<i class="fa fa-plane fa-lg"></i>
    
<span class="nav-text">
    
Travel
    
</span>
    
</a>
    

</li>
    
<li>
    
<a href="#">
    
<i class="fa fa-shopping-cart"></i>
    
<span class="nav-text">
    
Shopping
    
</span>
    
</a>
    
</li>
    
<li>
    
<a href="#">
    
<i class="fa fa-microphone fa-lg"></i>
    
<span class="nav-text">
    
Film & Music
    
</span>
    
</a>
    
</li>
    
<li>
    
<a href="#">
    
<i class="fa fa-flask fa-lg"></i>
    
<span class="nav-text">
    
Web Tools
    
</span>
    
</a>
    
</li>
    
<li>
    
<a href="#">
    
<i class="fa fa-picture-o fa-lg"></i>
    
<span class="nav-text">
    
Art & Design
    
</span>
    
</a>
    
</li>
    
<li>
    
<a href="#">
    
<i class="fa fa-align-left fa-lg"></i>
    
<span class="nav-text">
    
Magazines
    
</span>
    
</a>
    
</li>
    
<li>
    
<a href="#">
    
<i class="fa fa-gamepad fa-lg"></i>
    
<span class="nav-text">
    
Games
    
</span>
    
</a>
    
</li>
    
<li>
    
<a href="#">
    
<i class="fa fa-glass fa-lg"></i>
    
<span class="nav-text">
    
Life & Style
    
</span>
    
</a>
    
</li>
    
<li class="has-subnav">
    
<a href="#">
    
<i class="fa fa-rocket fa-lg"></i>
    
<span class="nav-text">
    
Fun
    
</span>
    
</a>
    

</li>
    
</ul>
    
<ul class="logout">
    
<li>
    
<a href="#">
    
<i class="fa fa-lightbulb-o fa-lg"></i>
    
<span class="nav-text">
    
BLOG
    
</span>
    

</a>
    
</li>
    
</ul>
    
</nav>
    
</div>
     
    Side menu trượt dọc bên trái  
    <script type='text/javascript'> 
    
    //<![CDATA[
    
      /*
    
    Configure menu styles below
    
    NOTE: To edit the link colors, go to the STYLE tags and edit the ssm2Items colors
    
    */
    
    YOffset=300; // no quotes!!
    
    XOffset=0;
    
    staticYOffset=30; // no quotes!!
    
    slideSpeed=20 // no quotes!!
    
    waitTime=100; // no quotes!! this sets the time the menu stays out for after the mouse goes off it.
    
    menuBGColor="#ccc";
    
    menuIsStatic="yes"; //this sets whether menu should stay static on the screen
    
    menuWidth=150; // Must be a multiple of 10! no quotes!!
    
    menuCols=2;
    
    hdrFontFamily="verdana";
    
    hdrFontSize="2";
    
    hdrFontColor="white";
    
    hdrBGColor="#4cab21";
    
    hdrAlign="left";
    
    hdrVAlign="center";
    
    hdrHeight="15";
    
    linkFontFamily="Verdana";
    
    linkFontSize="2";
    
    linkBGColor="white";
    
    linkOverBGColor="#f2f2f2";
    
    linkTarget="_top";
    
    linkAlign="Left";
    
    barBGColor="#111";
    
    barFontFamily="Verdana";
    
    barFontSize="2";
    
    barFontColor="white";
    
    barVAlign="center";
    
    barWidth=15; // no quotes!!
    
    barText="TIỆN ÍCH"; // <IMG> tag supported. Put exact html for an image to show.
    
     ///////////////////////////
    
     /* Menu settings start */
    
     // ssmItems[...]=[name, link, target, colspan, endrow?] - leave 'link' and 'target' blank to make a header
    
    ssmItems[0]=["Menu"] //create header
    
    ssmItems[1]=["Home", "http://tranphucminh.blogspot.com/", ""]
    
    ssmItems[2]=["Liên hệ", "http://tranphucminh.blogspot.com/2011/11/lien-he.html",""]
    
    ssmItems[3]=["Sơ đồ", "http://tranphucminh.blogspot.com/2011/10/sitemap.html#", ""]
    
 ssmItems[4]=["Blog Huy", "http://www.tranminhhuy.tk/", ""]
    
 ssmItems[5]=["Nhạc", "http://nhacblogminh.blogspot.com/", ""]
    
ssmItems[6]=["Blog Phim, Nhạc", "http://blogphim.blogspot.com/", ""]
    
ssmItems[7]=["Blog Hình", "http://bloguploadhinh.blogspot.com/", ""]
    
 ssmItems[8]=["Nick chat", "ymsgr:sendim?tpm1512", ""]
    
     /* Menu settings end */
    
   buildMenu();
    
  //]]>
    
    </script>
    
  
<script type='text/javascript'> 
    
    //<![CDATA[
    
     //Static Slide Menu 6.5 � MaXimuS 2000-2001, All Rights Reserved.
    
    //Site: http://www.absolutegb.com/maximus
    
    //Script featured on Dynamic Drive (http://www.dynamicdrive.com)
    
      //March 20th, 09'- Updated for IE8 compatibility
    
    NS6 = (document.getElementById&&!document.all)
    
    IE = (document.all)
    
    NS = (navigator.appName=="Netscape" && navigator.appVersion.charAt(0)=="4")
    
     
    tempBar='';barBuilt=0;ssmItems=new Array();
    
     
    function truebody(){
    
    return (document.compatMode!="BackCompat")? document.documentElement : document.body
    
    }
    
  moving=setTimeout('null',1)
    
    function moveOut() {
    
    if ((NS6||NS)&&parseInt(ssm.left)<0 || IE && ssm.pixelLeft<0) {
    
    clearTimeout(moving);moving = setTimeout('moveOut()', slideSpeed);slideMenu(10)}
    
    else {clearTimeout(moving);moving=setTimeout('null',1)}};
    
    function moveBack() {clearTimeout(moving);moving = setTimeout('moveBack1()', waitTime)}
    
    function moveBack1() {
    
    if ((NS6||NS) && parseInt(ssm.left)>(-menuWidth) || IE && ssm.pixelLeft>(-menuWidth)) {
    
    clearTimeout(moving);moving = setTimeout('moveBack1()', slideSpeed);slideMenu(-10)}
    
    else {clearTimeout(moving);moving=setTimeout('null',1)}}
    
    function slideMenu(num){
    
    if (IE) {ssm.pixelLeft += num;}
    
    if (NS6) {ssm.left = parseInt(ssm.left)+num+"px";}
    
    if (NS) {ssm.left = parseInt(ssm.left)+num; bssm.clip.right+=num;bssm2.clip.right+=num;}}
    
     function makeStatic() {
    
    if (NS||NS6) {winY = window.pageYOffset;}
    
    if (IE) {winY = truebody().scrollTop;}
    
    if (NS6||IE||NS) {
    
    if (winY!=lastY&&winY>YOffset-staticYOffset) {
    
    smooth = .2 * (winY - lastY - YOffset + staticYOffset);}
    
    else if (YOffset-staticYOffset+lastY>YOffset-staticYOffset) {
    
    smooth = .2 * (winY - lastY - (YOffset-(YOffset-winY)));}
    
    else {smooth=0}
    
    if(smooth > 0) smooth = Math.ceil(smooth);
    
    else smooth = Math.floor(smooth);
    
    if (IE) bssm.pixelTop+=smooth;
    
    if (NS6) bssm.top=parseInt(bssm.top)+smooth+"px"
    
    if (NS) bssm.top=parseInt(bssm.top)+smooth
    
    lastY = lastY+smooth;
    
    setTimeout('makeStatic()', 1)}}
    
     function buildBar() {
    
    if(barText.indexOf('<IMG')>-1) {tempBar=barText}
    
    else{for (b=0;b<barText.length;b++) {tempBar+=barText.charAt(b)+"<BR>"}}
    
    document.write('<td align="center" rowspan="100" width="'+barWidth+'" bgcolor="'+barBGColor+'" valign="'+barVAlign+'"><p align="center"><font face="'+barFontFamily+'" Size="'+barFontSize+'" COLOR="'+barFontColor+'"><B>'+tempBar+'</B></font></p></TD>')}
    
     function initSlide() {
    
    if (NS6){ssm=document.getElementById("thessm").style;bssm=document.getElementById("basessm").style;
    bssm.clip="rect(0 "+document.getElementById("thessm").offsetWidth+" "+document.getElementById("thessm").offsetHeight+" 0)";ssm.visibility="visible";}
    
    else if (IE) {ssm=document.all("thessm").style;bssm=document.all("basessm").style
    bssm.visibility = "visible";}
    
    else if (NS) {bssm=document.layers["basessm1"];
    
    bssm2=bssm.document.layers["basessm2"];ssm=bssm2.document.layers["thessm"];
    
    bssm2.clip.left=0;ssm.visibility = "show";}
    
    if (menuIsStatic=="yes") makeStatic();}
    
     function buildMenu() {
    
    if (IE||NS6) {document.write('<DIV ID="basessm" style="visibility:hidden;Position : Absolute ;Left : '+XOffset+'px ;Top : '+YOffset+'px ;Z-Index : 20;width:'+(menuWidth+barWidth+10)+'px"><DIV ID="thessm" style="Position : Absolute ;Left : '+(-menuWidth)+'px ;Top : 0 ;Z-Index : 20;" onmouseover="moveOut()" onmouseout="moveBack()">')}
    
    if (NS) {document.write('<LAYER name="basessm1" top="'+YOffset+'" LEFT='+XOffset+' visibility="show"><ILAYER name="basessm2"><LAYER visibility="hide" name="thessm" bgcolor="'+menuBGColor+'" left="'+(-menuWidth)+'" onmouseover="moveOut()" onmouseout="moveBack()">')}
    
    if (NS6){document.write('<table border="0" cellpadding="0" cellspacing="0" width="'+(menuWidth+barWidth+2)+'px" bgcolor="'+menuBGColor+'"><TR><TD>')}
    
    document.write('<table border="0" cellpadding="0" cellspacing="1" width="'+(menuWidth+barWidth+2)+'px" bgcolor="'+menuBGColor+'">');
    
    for(i=0;i<ssmItems.length;i++) {
    
    if(!ssmItems[i][3]){ssmItems[i][3]=menuCols;ssmItems[i][5]=menuWidth-1}
    
    else if(ssmItems[i][3]!=menuCols)ssmItems[i][5]=Math.round(menuWidth*(ssmItems[i][3]/menuCols)-1);
    
    if(ssmItems[i-1]&&ssmItems[i-1][4]!="no"){document.write('<TR>')}
    
    if(!ssmItems[i][1]){
    
    document.write('<td bgcolor="'+hdrBGColor+'" HEIGHT="'+hdrHeight+'px" ALIGN="'+hdrAlign+'" VALIGN="'+hdrVAlign+'" WIDTH="'+ssmItems[i][5]+'" COLSPAN="'+ssmItems[i][3]+'">&nbsp;<font face="'+hdrFontFamily+'" Size="'+hdrFontSize+'" COLOR="'+hdrFontColor+'"><b>'+ssmItems[i][0]+'</b></font></td>')}
    
    else {if(!ssmItems[i][2])ssmItems[i][2]=linkTarget;
    
    document.write('<TD BGCOLOR="'+linkBGColor+'" onmouseover="bgColor=''+linkOverBGColor+''" onmouseout="bgColor=''+linkBGColor+''" WIDTH="'+ssmItems[i][5]+'px" COLSPAN="'+ssmItems[i][3]+'"><ILAYER><LAYER onmouseover="bgColor=''+linkOverBGColor+''" onmouseout="bgColor=''+linkBGColor+''" WIDTH="100%" ALIGN="'+linkAlign+'"><DIV  ALIGN="'+linkAlign+'"><FONT face="'+linkFontFamily+'" Size="'+linkFontSize+'">&nbsp;<A HREF="'+ssmItems[i][1]+'" target="'+ssmItems[i][2]+'" CLASS="ssmItems">'+ssmItems[i][0]+'</DIV></LAYER></ILAYER></TD>')}
    
    if(ssmItems[i][4]!="no"&&barBuilt==0){buildBar();barBuilt=1}
    
    if(ssmItems[i][4]!="no"){document.write('</TR>')}}
    
    document.write('</table>')
    
    if (NS6){document.write('</TD></TR></TABLE>')}
    
    if (IE||NS6) {document.write('</DIV></DIV>')}
    
    if (NS) {document.write('</LAYER></ILAYER></LAYER>')}
    
    theleft=-menuWidth;lastY=0;setTimeout('initSlide();', 1)}
    
     //]]>
    
    </script>
    

  <script type='text/javascript'> 
    
    //<![CDATA[
    
      /*
    
    Configure menu styles below
    
    NOTE: To edit the link colors, go to the STYLE tags and edit the ssm2Items colors
    
    */
    
    YOffset=300; // no quotes!!
    
    XOffset=0;
    
    staticYOffset=30; // no quotes!!
    
    slideSpeed=20 // no quotes!!
    
    waitTime=100; // no quotes!! this sets the time the menu stays out for after the mouse goes off it.
    
    menuBGColor="#ccc";
    
    menuIsStatic="yes"; //this sets whether menu should stay static on the screen
    
    menuWidth=150; // Must be a multiple of 10! no quotes!!
    
    menuCols=2;
    
    hdrFontFamily="verdana";
    
    hdrFontSize="2";
    
    hdrFontColor="white";
    
    hdrBGColor="#4cab21";
    
    hdrAlign="left";
    
    hdrVAlign="center";
    
    hdrHeight="15";
    
    linkFontFamily="Verdana";
    
    linkFontSize="2";
    
    linkBGColor="white";
    
    linkOverBGColor="#f2f2f2";
    
    linkTarget="_top";
    
    linkAlign="Left";
    
    barBGColor="#111";
    
    barFontFamily="Verdana";
    
    barFontSize="2";
    
    barFontColor="white";
    
    barVAlign="center";
    
    barWidth=15; // no quotes!!
    
    barText="TIỆN ÍCH"; // <IMG> tag supported. Put exact html for an image to show.
    
     ///////////////////////////
    
     /* Menu settings start */
    
     // ssmItems[...]=[name, link, target, colspan, endrow?] - leave 'link' and 'target' blank to make a header
    
    ssmItems[0]=["Menu"] //create header
    
    ssmItems[1]=["Home", "/", ""]
    
    ssmItems[2]=["Liên hệ", "#",""]
    
    ssmItems[3]=["Sơ đồ", "#", ""]
    
 ssmItems[4]=["Blog Huy", "#", ""]
    
 ssmItems[5]=["Nhạc", "#", ""]
    
ssmItems[6]=["Blog Phim, Nhạc", "#", ""]
    
ssmItems[7]=["Blog Hình", "#", ""]
    
 ssmItems[8]=["Nick chat", "#", ""]
    
     /* Menu settings end */
    
   buildMenu();
    
  //]]>
    
    </script>
    Mẫu Float right menu ( bảng giá) chia sẻ bởi giuseart.com : 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
     <script language = "Javascript">
    
$(document).ready(function() {
    
  $("a[href*='#']:not([href='#])").click(function() {
    
    let target = $(this).attr("href");
    
    $('html,body').stop().animate({
    
      scrollTop: $(target).offset().top
    
    }, 1000);
    
    event.preventDefault();
    
  });
    
});
    
 
</script>
    
<style>
    
.menu-float-right {
    
    width: 100px;
    
    position: fixed;
    
    top: 35%;
    
    right: 0;
    
    z-index: 99999;
    
}
    
.menu-float-right #group {
    
    position: absolute;
    
    right: 0px;
    
}
    
.menu-float-right ul {
    
    padding: 0;
    
}
    
.menu-float-right #group ul li {
    
    background: #5eb509;
    
    position: relative;
    
    border-radius: 3px;
    
    border: 1px solid #fff;
    
    list-style: none;
    
    margin-bottom: 10px;
    
}
    
.menu-float-right #group ul li img {
    
    width: 57px;
    
    border-radius: 5px;
    
}
    
.menu-float-right #group ul li .mo-ta {
    
    font-size: 9px;
    
    text-align: center;
    
    color: rgb(255, 255, 255);
    
    position: absolute;
    
    width: 90%;
    
    left: 5%;
    
    bottom: 5%;
    
    margin-bottom: 0px;
    
}
    
</style>
    
<div class="menu-float-right">
    
      <div id="group">
    
         <ul>
    
             <li class="bang-gia">
    
                 <a href="/huong-dan-thanh-toan/" target="blank"><img src="http://maylockhi2.ninhbinhweb.net/wp-content/uploads/2018/09/icon-thanh-toan.png" >
                    <p class="mo-ta">Bảng giá</p>
    
                 </a>
    
                 
             </li>
    
             <li class="khuyen-mai">
    
                 <a href="/khuyen-mai" target="blank"><img src="http://maylockhi2.ninhbinhweb.net/wp-content/uploads/2018/09/icon-qua-tang.png" >
                 <p class="mo-ta">Khuyến mãi</p></a>
             </li>
    
             <li class="tu-van">
    
                 <a href="/hoi-dap" target="blank"><img src="http://maylockhi2.ninhbinhweb.net/wp-content/uploads/2018/09/icon-lien-he.png" >
    
                 <p class="mo-ta">Tư vấn</p></a>
    
             </li>
    
             
             <li class="lien-he">
    
                 <a href="/lien-he"  target="blank"><img src="http://maylockhi2.ninhbinhweb.net/wp-content/uploads/2018/09/icon-tu-van.png">
    
                 <p class="mo-ta">Liên hệ</p></a>
    
             </li>
    
             <li id="back_to_top" >
    
                 <a href="#top"><img src="http://maylockhi2.ninhbinhweb.net/wp-content/uploads/2018/09/icon-back-to-top.png" >
    
                 <p class="mo-ta">Lên đầu</p></a>
    
             </li>
    
         </ul>
    
     </div>
    
 </div>
    🦊 1 Phút Dành Cho Quảng Cáo 🦊

    Flagship, giá hời, đời cũ, cấu hình ngon, xem phim, chơi game, nghe nhạc cực đã. :

    + Iphone 11 : Xem Tại Đây
    + Iphone 12 : Xem Tại Đây
    + Iphone 13 : Xem Tại Đây

    + Samsung Galaxy S20 FE : Xem Tại Đây
    + Samsung Galaxy S22 Ultra 5G : Xem Tại Đây

    + Vivo V23 5G 8GB/128GB : Xem Tại Đây
    + Vivo V25e 4G 8GB/128GB : Xem Tại Đây

    + Redmi Note 11 Pro 5G : Xem Tại Đây
    + Xiaomi 12 Pro : Xem Tại Đây

    Điện Thoại Giá Rẻ, Chạy Grab, Tài Xế Công Nghệ :

    + Poco M4 Pro : Xem Tại Đây
    + Oppo A54 : Xem Tại Đây
    + Xiaomi Redmi Note 11 : Xem Tại Đây
    + Samsung Galaxy A23 : Xem Tại Đây

    Smartphone Gaming Giá Rẻ, Tải App Kiếm Tiền Online, Cài Đặt Ứng Dụng Học Tập, Giải Trí, Xem Phim Nghe Nhạc, Chơi Game Online, :

    + Tecno Poca 3 : Xem Tại Đây
    + Realme narzo 50i Prime : Xem Tại Đây

    Catalog Gỗ Nguyên Liệu Và Mộc Thành Phẩm
    Gia Bảo