19.2.14
25
Gambar Panel Slide
Membuat Panel Slide Untuk Menyimpan Text - Tidak jauh berbeda dengan text area yang mungkin sudah banyak orang menggunakan untuk menyimpan text, baik itu berupa CSS Code maupun kode-kode html, namun menyimpan text dengan metode text area sudah sangat jarang sekali yang menggunakannya, dikarenakan metode text area ini sudah banyak di modifikasi sehingga tampilannya semakin menarik, seperti kotak SPOILER atau Membuat Text Area Dengan Tombol Buka Tutup merupakan salah satu versi yang telah dikembangkan oleh banyak webmaster untuk menyimpan text, gambar dan lain sebagainya yang dapat kita gunakan.

Dan cara demikian, sedikit akan membantu untuk menyimpan beberapa text, sehingga kolom postingan dapat terlihat satu halaman tanpa harus scroll untuk melihat tulisan yang ada dibawah, karena beberapa text sudah kita simpan. Setelah banyak perkembangan, saya coba-coba memodifikasi kode pada kotak spoiler tersebut menggunakan jQuery dengan Membuat Panel Slide Untuk Menyimpan Text, versi hampir sama dengan Spoiler Box namun style/gaya yang berbeda. Jika pada spoiler bok memuat tombol "BUKA" untuk membuka/melihat text, pada versi ini saya menggunakan icon "PANEL HOVER" sehingga saat akan membuka tombol panel ini, tombol text terkesan menyala (Hover).

Buat SAHABAT BLOGGER 77 yang tertarik ingin mencoba menggunakan metode ini, berikut kode CSS Membuat Panel Slide Untuk Menyimpan Text:

CSS Code 1
/*
February 19,2014 :: Devy Indriyani
Design Code: http://sahabatblogger77.blogspot.com
*/
#panelsahabatblogger77 {display:block}
#panel {
  background-color#ea9999:;
  border:2px solid #a7cc54;
  border-width:2px 2px 0 2px;
  height:250px;
  margin:0;
  padding:10px;
  color:#111;
  font:normal 12px Times,Serif;
  -webkit-box-shadow:inset 0 0 7px #222;
  -moz-box-shadow:inset 0 0 7px #222;
  box-shadow:inset 0 0 7px #222;
  display:none;}

CSS Code 2
.tombolpanel {
  position:relative;
  cursor:pointer;
  text-shadow:1px 1px 2px #000;
  padding:7px 15px;
  background-color:magenta;
  border-top:3px solid #a7cc54;
  color:#e5e5e5;
  text-align:center;
  font:bold 14px Times,Sans-Serif;
  font-style:italic;
  -webkit-box-shadow:0 -1px 2px #222;
  -moz-box-shadow:0 -1px 2px #222;
  box-shadow:0 -1px 2px #222;
  -webkit-border-radius:0 0 14px 14px;
  -moz-border-radius:0 0 14px 14px;
  border-radius:0 0 14px 14px;}

CSS Code 3
.tombolpanel:hover {color:#ccc}
.tombolpanel:after {
  content:'';
  position:absolute;
  top:100%;
  margin-top:-10px;
  left:5%;
  width:0;
  height:0;
  display:block;
  border-width:20px;
  border-style:solid;
  border-color:#333 #333 transparent magenta;}

Script jQuery
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript">
$(document).ready(function() {
    $('.tombolpanel').click(function() {
        $('#panel').slideToggle('slow');
        $('.tombolpanel span.in').toggle();
    });
});
</script>

HTML Mode Code
<div id="panelsahabatblogger77">
<div id="panel">

... TULISAN ANDA DI SINI ...

</div>
<div class="tombolpanel">
<span class="in">Buka Panel</span>
<span class="in" style="display:none;">Tutup Panel</span>
</div>
</div>

Hasilnya akan seperti di bawah ini:


Keterangan:
  1. Perhatikan pada kode script jQuery diatas, jika template anda sudah menggunakan jQuery, abaikan kode yang sudah saya beri tanda, karena penggunaan jQuery lebih dari satu akan membuat template menjadi error
  2. Copy kode CSS 1,2 dan 3, selanjutnya Pastekan pada postingan anda mode HTML, namun jangan lupa untuk menambahkan kode pembuka ini pada awal CSS <style type="text/css"> dan kode penutup pada akhir CSS </style> 
  3. Selanjutnya Copy HTML Mode Code lalu letakkan tepat setelah atau dibawah kode penutup </style> pada kode CSS
  4. Silahkan ganti text yang berwarna Merah dengan tulisan anda
  5. Terimakasih dan Selamat Mencoba.
Buka Panel

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Membuat Panel Slide Untuk Menyimpan Text
Ditulis oleh= Devy
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 =

25 komentar

  1. Kunjungan malam nih mumpung masih melek..
    saya nyimak aja ya mbak.. sudah punya. tp beda versi..hehehe

    BalasHapus
    Balasan
    1. begadang neh,hehe
      iya sob, versi sama dengan spoiler hanya style-nya sedikit saya ubah, agar terkesan cantik dan menarik aja,hehe
      terimakasih sudah temani begadang sob..

      Hapus
  2. cantik nih, bener2 kreatif. saya belum begitu bisa tentang kode mengkode tapi saya bisa belajar disini.terimakasih..

    BalasHapus
    Balasan
    1. sama-sama masih belajar kok mas,
      terimakasih kunjungan malamnya mas

      Hapus
  3. saya kaynya belum nyoba hehe

    BalasHapus
  4. Lumayan juga nich scripnya agak panjang. tp sebanding dengan hasilnya. nice trick :)

    BalasHapus
    Balasan
    1. perubahan sedikit bang dengan spoiler,hanya tambahkan jQuery saja agar hovernya dapet

      Hapus
  5. Pelajaran saya ambil mbak pelan2 saya coba pelajari..sebab agak panjang makasih ya

    BalasHapus
    Balasan
    1. sipp mbak,saya juga masih dalam tahap belajar kok,,

      Hapus
  6. keren, bisa buka tutup, buka tutup
    hehehehe

    ganti blog http://mas-onqi.blogspot.com/
    hahaha

    BalasHapus
    Balasan
    1. ganti blog atau buat blog baru neh, emang gak pusing urusin blog yang banyak.hehe

      Hapus
    2. blog baru tapi blog yg satunya jarang tak urus jadinya

      hehehe

      Hapus
    3. jadikan dummy aja mas blog yang satunya, hitung-hitunh untuk mendongkrak traffik ke blog utama mas,hehe

      Hapus
    4. dummy itu gimana maksudnya mbak??
      maklum newbie saya mbak :)

      Hapus
    5. sama seperti blog biasa mas, tetapi untuk dummy kita buat blog khusus yang semua link yang ada pada dummy blog akan mengarah pada blog utama, sehingga saat pengunjung membuka dummy blog,maka akan mengarah pada link blog utama jika klik beberapa link tersebuat, trik ini juga optimasi SEO yang banyak digunakan webmaster untuk meningkatkan pagerank ke blog utama,

      Hapus
  7. Dipelajari dulu ya Mbak, habis baru nih. belum ngerti bahasa HTML nya

    BalasHapus
    Balasan
    1. ok dech mas, saya juga masih belajar kok

      Hapus
  8. Design nya kreatif banget :p , wah jarang2 ni ada blogger cewe yang udah pro. :>)

    BalasHapus
  9. simpan dulu buat dipraktekkin nanti deh

    BalasHapus
  10. weh keren juga nih jadinya, sip deh saya simpen dulu scriptnya

    BalasHapus
  11. kreatif juga mbak Devy,saya masih pakai spoiler box jadul lho hehe,baiklah saya akan mencoba tutornya mbak Devy,Terimakaish yah sudah berbagai,,,,

    BalasHapus
  12. mbaaak makin keren keren aja nih tutor-nyaaa :D

    BalasHapus

  • 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