Cara Membuat Panel Slide Halaman Posting

Cara Membuat Panel Slide Halaman Posting - Kangen rasanya ingin menyapa sahabat semua pecinta SAHABAT BLOGGER 77, yang tanpa kehadiran Anda semua di blog yang sederhana ini, mungkin blog ini sudah lama saya tinggalkan. Berhubung beberapa waktu lalu ada sedikit masalah dengan laptop saya, sehingga ngeposting artikel, blogwalking serta bercerita dan bercanda ria pada kolom komentar tidak bisa saya lakukan karena Laptop tecinta terkena virus, tetapi bukan virus dari Slank loh, hehe...!!!, jadi Devy mohon maaf jika sekiranya beberapa hari ini tidak bisa hadir di blog sahabat semua (mau kan maafin Devy.!?).

Syukur masih ada beberapa file yang sempat saya selamatkan sebelum laptop saya masuk bengkel. Pertemuan kali ini saya kembali hadir untuk berbagi pengetahuan seputar tutorial blog dalam membahas CSS-Widget tentang Cara Membuat Panel Slide Halaman Posting seperti tampilan gambar berikut:

Baca juga - Cara Mudah Membuat Menu Navigasi Pada Postingan


Untuk menyimpan beberapa tulisan penting, kode-kode script tutorial atau beberapa gambar yang Anda sertakan saat menulis artikel pada halaman posting, disana Anda bsa menghemat ruang postingan Anda dengan Membuat Panel Slide Untuk Menyimpan Text. Desain tampilan hampir sama, namun untuk panel slide halaman posting kali ini, ruang kosong saat panel dibuka akan menampilkan menu, sedangankan event gerakan untuk efek slide pada panel saya membuatnya dengan pergeseran position-right dengan perintah @viewport {width: device-width;}, sehingga conten yang berada diluar halaman tidak ikut bergeser saat panel di KLIK seperti ini:




DEMO SHOW


Coba perhatikan pada halaman menu, disana saya menyisipkan banyak link yang berarti jika halaman menu melebihi tinggi muatan conten artikel, maka efek scroll akan ditampilkan. Namun agar bar-scroll tidak tampil, tambahkan kode overflow-scrolling: touch. Tujuannya agar efek scroll hanya akan berfungsi pada halaman menu saja, sedangkan pada halaman posting tidak ikut bergeser saat scroll terjadi.
Kode lengkapnya seperti 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>

Tambahkan script berikut setelah tag penutup </style> untuk mengaktifkan fungsi OPEN/CLOSE pada Tab-Menu, namun hapus kode script-jQuery yang saya beri warna MERAH jika Template Anda sudah menggunakan jenis jQuery yang sama seperti 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>

Tahap akhir, disini Anda bebas menambahkan seberapa banyak link-menu sesuai dengan label-label artikel blog Anda sesuai keinginan pada HTML berikut:

<div id="wrap" class="trans">
    <div id="header" class="panel overthrow">
        <nav>
            <ul id="nav"><span>DESAIN TEMPLATE</span>
            <li><a href="#">Desain Template Menu 1</a></li>
            <li><a href="#">Desain Template Menu 2</a></li>
            <li><a href="#">Desain Template Menu 3</a></li>
            <li><a href="#">Desain Template Menu 4</a></li>
            <li><a href="#">Desain Template Menu 5</a></li>
            <li><a href="#">Desain Template Menu 6</a></li>
            <span>CSS WIDGET</span>
           <li><a href="#">CSS Widget Menu 1</a></li>
           <li><a href="#">CSS Widget Menu 2</a></li>
           <li><a href="#">CSS Widget Menu 3</a></li>
           <li><a href="#">CSS Widget Menu 4</a></li>
<!..Silahkan tambahkan beberapa menu lagi..!>
           </ul>
       </nav>
   </div>

        <div id="content" class="panel trans">
  <a class="button icon-menu" href="#wrap" data-action="showNav">Open Menu</a>
            <div class="container">

                <p> ... Tulis Artikel Anda Disisni....</p>

            </div>
            <div id="footer">
                <p>Copyright 2014 Design by. SAHABAT BLOGGER 77</p>
            </div>
        </div><!.. Ending panel trans ..!>
</div><!.. Ending id='wrap' ..!>