Cara Membuat Slide Panel Cantik dan Menarik

Pada artikel sebelumnya saya telah menjelaskan tentang Cara Membuat Tampilan Spoiler Box Terbaru, Nah,..kali ini saya mencoba mengulas bagaimana Cara Membuat Slide Panel Cantik dan Menarik pada blog anda. Slide panel ini dapat anda terapkan dalam postingan artikel dan widget HTML/JavaScript.

Slide Panel ini hakikatnya berfungsi untuk mempersingkat atau memendekkan teks/gambar di blog anda, seperti Scroll dan Spoiler. Namun tampilan slide panel ini sedikit saya modifikasi dari segi kode dan warna, sedangkan hasil slide panel yang asli dapat anda rujuk pada sumber yang saya kutip melalui http://sahabatblogger77.blogspot.com (Ucapan terima kasih untuk Sahabat Blogger 77). Berikut:

Cara Membuat Slide Panel Cantik dan Menarik

A. Penempatan pada Halaman Posting Blog

1. Log In ke www.blogger.com

2. Buat/Edit Artikel anda

3. Pilih Menu HTML bukan Compose

4. Copy dan Paste Kode di bawah ini (silahkan Buka Panel dibawah untuk melihat kode)

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>
<link href="https://drive.google.com/uc?export=download&amp;id=0B2J42XkvLqFoR0pEbWZlSnF1a0k" rel="stylesheet"></link>
<script type="text/javascript">
$(document).ready(function() {
$('.tombolpanel').click(function() {
$('#panel').slideToggle('slow');
$('.tombolpanel span.in').toggle();
});
});
</script>
<div id="panel">

... Silahkan Masukkan Tulisan atau Gambar atau apa saja di sini...

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

Keterangan:

• Kode warna Merah merupakan kode JQuery, jika ada yang sejenis maka anda boleh pasang atau tidak.
• Kode CSS bisa anda ganti (kode ini dengan panel warna hijau. ini kodenya <link href="https://drive.google.com/uc?export=download&amp;id=0B2J42XkvLqFoR0pEbWZlSnF1a0k" rel="stylesheet"></link> )
• Kode CSS bisa anda ganti (kode ini dengan panel warna Biru Maron. ini kodenya <link href="https://googledrive.com/host/0B2J42XkvLqFoYWxWa1hHRTZZcjQ" rel="stylesheet"></link> )

Buka Panel
Tutup Panel

B. Penempatan Pada widget HTML/JavaScript Blog

1. Log In ke www.blogger.com

2. Masuk ke halaman Dashboard dan pilih Tata Letak

3. Pilih Menu HTML/JavaScript

4. Copy dan Paste Kode di bawah ini (silahkan Buka Spoiler dibawah untuk melihat kode)

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>
<link href="https://drive.google.com/uc?export=download&amp;id=0B2J42XkvLqFoYWxWa1hHRTZZcjQ" rel="stylesheet"></link>
<script type="text/javascript">
$(document).ready(function() {
$('.tombolpanel').click(function() {
$('#panel').slideToggle('slow');
$('.tombolpanel span.in').toggle();
});
});
</script>
<div id="panel">

... Silahkan Masukkan Tulisan atau Gambar atau apa saja di sini...

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

^^ Demikianlah artikel tentang Cara Membuat Slide Panel Cantik dan Menarik, jika ada yang belum jelas atau ada kode yang tidak berfungsi, silahkan hubungi saya atau berikanlah saran dan kritik anda. Terima Kasih!!.