Box Menu

Memasang kode Box Menu
Login ke akun blog klik tombol blog baru, buat satubuah link baru  
kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut, 
hapus semua kode template, ganti dengan kode blank template,  yang tersedia pada sumber  berikut ini   :   Blank Template  edit background warna sesuai keinginan dan klik simpan selesai

Kemudian klik entri halaman baru HTML pada link tersebut
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<style type="text/css">
body {
background-color: #7f7f7f;  
}
.menu-table {
    max-width: 368px;
    margin: 0 auto;
    transition: all .3s ease;
    -o-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -webkit-transition: all .3s ease;
    border-radius: 5px;
}
 .menu-table:hover {
      box-shadow: 0px 20px 20px 20px rgba(0, 0, 0, 0.1);
}
.menu-table:hover>.panel-footer-landing {
    box-shadow: 0px 0px 30px rgba(0,0,0, .05) inset;
    -webkit-transition:  all .3s ease;
}
.menu-table:hover>.panel>.panel-body-landing {
    background: #b2b2b2;
    -webkit-transition:  all .3s ease;
}
.menu-table:hover>.panel>.panel-heading-landing-box {
    background: #7f7f7f !important;
    color: #333 !important;
    -webkit-transition:  all .3s ease;
}
.menu-table:hover>.panel>.controle-header {
    background: #5CB85C !important;
    border: solid 2px #000 !important; 
    -webkit-transition:  all .3s ease;
}
.menu-table:hover>.panel>.panel-footer {
    background: #dad !important;
    border: solid 2px #000 !important;
    -webkit-transition:  all .3s ease;
}
.menu-table:hover>.panel>.panel-footer>.btn {
    border: solid 1px #7f7f7f !important;
    -webkit-transition:  all .3s ease;
}
.btn-price:hover {
    background-color: rgba(123, 105, 179, 0.4);
    color: #000 !important;
    -webkit-transition:  all .3s ease;
}
.menu-table:hover>.panel>.controle-header>.panel-title-landing {
    color: #808 !important;
    -webkit-transition:  all .3s ease;
}
.menu-table:hover>.panel>.panel-body-landing>.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
    color: #808 !important;
    -webkit-transition:  all .3s ease;
}
.panel-heading-landing {
    background: #f7f7f7 !important; 
    padding: 20px !important; 
    border-top-left-radius: 5px !important;  
    border-top-right-radius: 5px !important; 
    border: solid 2px #f00 !important; 
    border-bottom: none !important;
}
.panel-heading-landing-box {
    background: #5CB85C !important; 
    color: #eee !important; 
    font-size: 16px !important; 
    padding: 3px !important; 
    border: solid 2px #323232 !important; 
    border-top: none !important;
}
.panel-title-landing {
    color: #000 !important;
    font-size: 25px;
    font-weight: bold;
}
.panel-body-landing {
    border: solid 2px #f00 !important; 
    border-top: none !important; 
    border-bottom: none !important;
}
.panel-footer-landing {
    border: solid 2px #000 !important; 
    border-bottom-left-radius: 5px !important; 
    border-bottom-right-radius: 5px !important; 
    border-top: none !important;
}
    </style>

<div class="container">
        <div class="row text-center">
            <div class="col-md-12">                
            </div>
            <div class="col-md-12" style="margin-top: 120px;">
                <div class="menu-table"> 
<div class="controle-panel-heading panel-heading panel-heading-landing-box">
   <div class="controle-header panel-heading panel-heading-landing">
                    <div class="panel panel-primary">
                       <div class="panel-heading">
                        <div class="controle-header panel-heading panel-heading-landing">
                            <h1 class="panel-title panel-title-landing">
                               Parallax
                            </h1>
                        </div>
                        <div class="controle-panel-heading panel-heading panel-heading-landing-box">
                           Parallax appearance Scrolling
                        </div>
                        <div class="panel-body panel-body-landing">
                            <table class="table">
                                <tr>
                                    <td width="50px"><i class="fa fa-check"></i></td>
                                    <td>Picture slide</td>
                                </tr>
                                <tr>
                                    <td width="50px"><i class="fa fa-check"></i></td>
                                    <td>Mp4 Video</td>
                                </tr>
                                <tr>
                                    <td width="50px"><i class="fa fa-check"></i></td>
                                    <td>Animated Gif</td>
                                </tr>
                            </table>
                        </div>
                        <div class="panel-footer panel-footer-landing">
                            <a href="#" class="btn btn-price btn-success btn-lg">CLICK TO VIEW</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
     <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        window.alert = function(){};
        var defaultCSS = document.getElementById('bootstrap-css');
        function changeCSS(css){
            if(css) $('head > link').filter(':first').replaceWith('<link rel="stylesheet" href="'+ css +'" type="text/css" />'); 
            else $('head > link').filter(':first').replaceWith(defaultCSS); 
        }
        $( document ).ready(function() {
          var iframe_height = parseInt($('html').height()); 
          window.parent.postMessage( iframe_height, 'https://bootsnipp.com');
        });
    </script>
</head>
<body>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
</body>
</html>

Code by. Bootstrap/snipp
Design Code is Edited by. M-2010

DEMOSHOW

* If you want to directly copy and paste you canDownload  Box Menu

Category: Box Menu