Cara Membuat Panel Slide Halaman Posting

Berikut ini akan diuraikan langkah-langkah cara membuat (  Panel Slide Halaman Posting  ) semoga artikel kali ini bermanfaat untuk kita semua.
Adapun Cara membuat : (  Panel Slide Halaman Posting  ) sebagai berikut :

1. Login ke akun blogger
2. Klik tema
3. Edit html

Masukan CSS di bawah ini :

<style type='text/css'>
@-ms-viewport {width: device-width;}
@viewport {width: device-width;}
.group:before, .group:after {content:""; display:table;}
.group:after {clear:both;}
.container {font-size: 1.6rem; padding: 2em;}
#wrap {position: relative; overflow: hidden; width: 100%;}
#header {
   background: #333;
   height: 100%;left: 0;
   overflow: auto;
   position: absolute;
   top: 10px;width: 100%;
   -webkit-overflow-scrolling: touch;}

#header ul a {
   color: #81d8d0;display: inline-block;
   font: bold 11px/18px Verdana,serif;
   padding: 8px 10px;}

#header a:hover  {color:#e06666;}
#header ul {margin: 0; padding: 0;}
#header li {display: block; list-style: none;}
#content {
   background: #fff;
   position: relative;
   width: 100%;
   transform: translate3d(0px, 0px, 0px);
   transition: transform 500ms ease 0s;}

#header span {
   color:#fff;width:500px;
   text-shadow:0px 1px 2px #333;
   font: bold 12px/26px Verdana,serif;
   padding: 5px 10px;display:block;
   margin-top:-13px;box-shadow:1px 1px 1px black;
   background-image:-webkit-linear-gradient(#333, #444, #333, #222);
   background-image:-moz-linear-gradient(#333, #444, #333, #222);
   background-image:-ms-linear-gradient(#333, #444, #333, #222);
   background-image:-o-linear-gradient(#333, #444, #333, #222);
   background-image:linear-gradient(#333, #444, #333, #222);}

#footer {
  background: #000;color: #fff;
  display: block;font-size: 1.6rem;
  padding: 1em;}

#wrap:target #content,
.nav-open #content {transform: translate3d(53%, 0px, 0px);}

.button {
   background: #000;color: #CCC;
   display: block;font-size: 15px;
   padding: 8px;width: 80px;
  -webkit-tap-highlight-color: rgba(125, 142, 56, 3);}
</style>

Masukan Kode HTML di bawah ini :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(window).load(function(){
$('.button').click(function (e) {
e.preventDefault();
if ($('#wrap').hasClass('nav-open')) {
closeNav();
} else {
showNav();}});
});
function closeNav(){
$('#wrap').removeClass('nav-open');
}
function showNav(){
$('#wrap').addClass('nav-open');
}
</script>

Setelah semua kode html, (style, atau b:skin, dan javascript sudah di pasang sesuai posisinya masing-masing langkah terahir adalah

simpan, atau klik pratinjau tema terlebih dahulu,. Namun untuk saran tiada salahnya langsung klik SIMPAN dan lihat hasilnya, jika terjadi eror,

dan kode tidak berfungsi dengan baik silahkan informasikan kami di kolom komentar, salam Team SAHAB BISNIS 77.

Demikian Cara membuat ( Panel Slide Halaman Posting  ) semoga bermanfaat terima kasih.