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
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>
Biến Content Thành tiền
Chiến mã đường rừng
Gia Bảo