Membuat Panel Slide Untuk Menyimpan Text

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
Tutup Panel