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:

Panel slide image



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' ..!>

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Cara Membuat Panel Slide Halaman Posting
Ditulis oleh= Devy Indriyani
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

54 komentar

  1. Ngiler saya ngelihat hasilnya.. coba kalu warna hijau tuanya diganti hitam atau abu2.. lebih mantep lagi tuh. :) keren!!

    BalasHapus
    Balasan
    1. wadduh jadi bingung Devy, daritadi cari-cari warna yang hijau, gak ketemu-ketemu, padahal ini artikel devy sendiri..hehe..!!

      kayaknya komentarnya salah arah mas

      Hapus
    2. Setelah saya lihat DEMO nya panel slide ini menarik dan cantik ya Mbak Devy. agak mirip seperti Daftar isi tampilan LIST Artikel yang tampil di panel slidenya ya Mbak Devy.. sungguh ide yang luar biasa dan ide yang cemerlang :)

      Hapus
    3. wuih keren banget pas liat demo panel slide halaman posting, blog jadi terlihat lebih pro kalaututorial ini di pasangin di blog saya yang lain nih ah.
      makasih ya

      Hapus
  2. untung bukan virus ebola mbak :-d
    kalau diterapkan disidebar bagus itu mbak :)

    BalasHapus
    Balasan
    1. bisa saja mas, namun karena umumnya halaman sidebar kolomnya kecil, daftar menu diubah menjadi link label saja.seperti category-file

      Hapus
    2. responsive dan valid html5 ngga neng?

      Hapus
  3. Tertarik sih, tapi blog jadi berat nggak mas?

    BalasHapus
    Balasan
    1. nanti saya gendong kemana2 kalau keberatan

      Hapus
    2. setuju banget dengan ide brilian pak ustadz, gendong tuch kang imron :p
      kalau masalah adminnya, biar saya aja yang gendongnya pak
      :p

      Hapus
    3. kalo adminnya jangan ada yang pegang bahaya bukan Muhrim :D

      Hapus
    4. hahaha.. pada guyon sih..

      Hapus
  4. keren.. jadi kayak vertical menu gitu ya mbak???

    BalasHapus
    Balasan
    1. sebenarnya bukan karena menu tampilannya mas, karena menu-menu itu bisa kita ubah apa saja disana untuk ditampilkan sebagai gantinya.

      Hapus
  5. mau langsung saya praktekkan di blog saya, mbak :p
    biar blog saya jadi cantik tampilannya seperti cantiknya Mbak Devy :p

    #PLAKK

    BalasHapus
  6. mau langsung saya praktekkan di blog saya, mbak :p
    biar blog saya jadi cantik tampilannya seperti cantiknya Mbak Devy :p

    #PLAKK

    BalasHapus
    Balasan
    1. silahkan kang jum, mudah-mudahan blog kang jum akan terlihat profesional dan cantik. hehe

      Hapus
    2. jadi malu dibilang seperti blog profesional
      xixixixi

      Hapus
    3. kok malu kang, kan tujuan kita yang serius membangun blog itu kearah sana.

      Hapus
  7. euleh2 ... sebenarnya sy mw bilang .....
    bgus nih slide nya ,,, tapi itu sdh biasa, mw bilang ...

    sy coba dulu deh, sudah bisa juga, apalgi jelas2 blog sy jelek ,,, hehe, mw bilng ..keren tutorialnya dah biasa juga, karena memang dri zaman bahela tutorial yg devy bikin keren-keren semua,,

    trus yg belum mw bilang apa lgi yah buat devy ,,,, Hmmmm ,,, hhehee ,,,,, :-?

    BalasHapus
    Balasan
    1. banar mas, ini hanya merupakan modifakasi accordion slide pada umumnya, namun efek gerakan tidak mengganggu objek yang berada diluar tabel, sehingga gerakan slide hanya bekerja pada halaman posting saja.
      biasa namun diubah menjadi luar biasa.. hehe..

      hayooo...mau bilang apa..?

      Hapus
    2. ow ,,, jadi gerakan slide tidak menggu objek lainnya yah ,,, intinya sih ,,, suatu saat sy kan paki jika akn membuatkan blog buat teman atau blg siapa aja ,,, bru tutornya devy sy gunakan ,,,


      hehehe,,,, mw bilang apalgi yah ,,,, jdi bgung sndri nih ,,, :)

      Hapus
    3. apalagi Devy mas, sangat bingun mau jawab apa, jika yang mau dibilang kagak ada,?
      hehe...!!

      Hapus
    4. mw bilang devy itu luar biasa ,,,, :)

      Hapus
  8. hehe,,, mw bilang gini dulu deh ,,,, devy tuh bisa kek gtu dari umur brp yah, trus baljr dimana ??? kok ampe lihai bgtu upek-upek code nya ,,, :)

    BalasHapus
    Balasan
    1. berawal dari penasaran mas, ibarat ingin mengetahui sesuatu yang sudah jelas-jelas terlihat didepan mata, misalnya didepan mas ada 2 buah cat dengan warna berbeda, hijau dan merah, jika cat tersebut kita campur menjadi satu, maka warna apa yang akan kita dapatkan.

      begitupun dengan kode script seperti ini mas, modalnya hanya berani dan sedikit tahu bahasa asing (inggris). karena kode seperti ini hanya akan terbentuk dengan bahasa mereka. Jadi devy baru belajar kode-kode seperti ini dari keberanian dan awalnya seperti yang mas fiu bisa lhat pada Arsip Blog

      22 Oktober 2013, jadi ulang tahun blog ini sudah lewat donk..!! hehe

      Hapus
    2. awal devy menggeluti dunia coding juga tgl 22 Oktober 2013 ?

      waaaah ,,,, devy pinter bahasa inggrs juga yah ,,, ah ,,, dah cakep, pinter coding, pinter pula bhasa bule ,,, cepluk ,,,, hehehe

      Hapus
    3. benar mas, jadi bukannya devy tidak pernah gagal, bisa dibilang blog ini adalah blog yang ke-16 setelah blog-blog sebelumnya saya hapus karena gagal belajar coding. dan akhirnya blog ini saya abaikan selama 2 bulan. setelah sudah punya sedikit basic. blog sederhana ini devy kelola kembali dengan title "SAHABAT BLOGGER 77" dengan tampilan Template berbeda.

      dan jrengggg..akhirnya bisa kenal dech dengan mas Fiu.s hehe..!!

      Hapus
    4. wiiiiiihhh ... blog ke-16 ??? ajib dah buat devy ....heheh, tittle blog "SAHABAT BLOGGER 77 dapat nemu inspirasi dimana nih ? hehe

      iya nih ,, lwt blog bsa kenal deh ama devy hehe,, jreeeng ,, sy ingat2 dulu kpn ya pertama syke blog nya devy ....

      Hapus
    5. tunggu jawaban wawancara anda setelah yang satu ini.. "Iklan" he

      Hapus
  9. cukup lumayan juga ya mbak scriptnya.. mbak satu ini oke bener dah...

    BalasHapus
    Balasan
    1. sebenarnya kodenya lumayan singkat kok mas, hanya devy susun seperti tampilan diatas tujuannya agar mempermudah sahabat lain yang ingin melakukan perubahan tampilan (edit kode). jadi mereka lebih mudah melakukannya.

      jika sudah selesai di edit, tinggal sejajarkan kodenya.

      *) mas Jai juga OK kok, hanya berbeda pembahasan saja menurut devy, betul kagak mas jai..?

      Hapus
    2. tapi kalau saya sebagian ada juga yang belum faham mbak devy.. dan saya juga masih belajar.. termasuk belajar dari blog nya mbak devy... saya senengnya disini tutornya sangat mudah di terapkan mbak...

      iya sih mbak. mbak lebih ke pembahasan script-script gini, sedangkan saya ke blogazine mbak... :) sebenarnya gak jauh beda sih mbak..

      Hapus
  10. mantab...kalau ini langsung saya coba dulu...awas ya kalau ndak berhasil... :D

    BalasHapus
    Balasan
    1. kalau ga berhasil sapa yang salah..? :d

      Hapus
    2. mbak santika dung... kasian kalau nyalahin mbak devy... :D

      Hapus
    3. lho ko gitu.. ;(( ;(( ;((

      Hapus
  11. Bagus tampilannya, hanya aku gak terbiasa otak atik tampilan hehee...

    BalasHapus
  12. ternyata mudah ya , kirain susah

    BalasHapus
  13. Menarik sekali tutorial yang Mbak Devy bagikan ini. saya coba pelajari dulu ya Mbak bisa tambah menarik nantinya panel di page post. terima kasih Mbak Devy :)

    BalasHapus
  14. Beuhhh tadi saya lihat demonya kerennn jadi kpincut kpengen pasang nih :D

    BalasHapus
  15. oo gitu aku baru ngert yah, telat banget, tapi bahasa apaan itu vi..

    BalasHapus
  16. Waw :o , sangat keren sekali hasilnya ni, jadi kepenhen pasang di blog ni, ijin coba sob script nya

    BalasHapus
  17. Sangat bermanfaat terutama buata newbie macam saya...

    BalasHapus
  18. assalamu 'alaikum..!
    selamat beraktifitas sj Vy..!

    BalasHapus
  19. jadi tambah maknyus ya mbak kalau blog kita ditambah panel slide ini, tambah mentereng ya ;)

    BalasHapus
  20. mba devi mau tanya, gmn nih cara membuang tumbnail post, jadi biasa aja ga usah pakai gambar? dan sekalian pengaturan featured pos gmn ya? cek blogku dev, please :d
    http://tamuilmu.blogspot.com/

    BalasHapus
    Balasan
    1. thumbanail gambar kan banyak mas, pada halaman mana yang ingin dihapus, pop-pos atau related-post.

      Devy lihat dulu ya mas

      Hapus
    2. pada homepage mba dev, tolong ya? keihatannya jelek banget sih ;( pada homepage kan ada featured-post yang tampilannya hitam blank dev....

      Hapus
  21. gan gmna caranya buat menu yang kyak pnya agan tu.. keren,..
    share dnk toturialnya

    BalasHapus
  22. waaaaah bagus banget....(y)

    BalasHapus
  23. gmna cra membuat panel slide yg seperti itu tpi kta tdk usah klik cukup mengarahkannya saja ke stu ?

    BalasHapus
    Balasan
    1. fungsi gerak dengan element pointer:cursor sistem KLIK, jika dengan onmouse over, atau bila dihover, element CSS diatas kita ubah perintahnya hover.

      sebagai contoh dasar saya pernah membuat tutornya dengan objek gambar seperti ini:

      Efek According Pada Gambar Dengan Perintah Hover

      Hapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK