Terwujud
KomTer,Komik Online
Smartphone Mainbitcoin

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-Terwujud.com
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://googledrive.com/host/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://googledrive.com/host/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


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://googledrive.com/host/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!!.

Mau Artikel Gratis! Silahkan Tulis Email Anda.
Print PDF
Next
« Prev Post
Previous
Next Post »

8 komentar

kapan kapan bisa di coba yah :)

Balas

Silahkan Mas, saya persilahkan dengan segala hormat

Balas

bisa di coba di blog saya nih, thanks artikelnya

Balas

yuups mas ahmad, silahkan dan terima kasih

Balas

Ini barangkali cocok untuk blog dengan tema tutorial ya mas ..

Balas

Boleh juga tu mas, terima kasih atas kunjungannya ya

Balas

modifikasinya cantik mas,,hehe,,
sudah mahir neh kayaknya tentang scrip dan CSS

suksess selalu blognya mas

Balas

Heehee, saya terinspirasi dari Mbak Devy juga kok ! mbak masih atasan saya dalam memahami script dan css, makasih ya

Balas

Saya akan sangat senang jika ada komentar yang membangun, tetapi:

*Jangan komentar SPAM
*Jangan menanam link
*Jangan ada unsur sara, Fornografi dan memojokkan

Komentar yang melanggar akan dimasukkan kedalam daftar SPAM dan tidak akan diijinkan lagi.

Icon:
:) ^_^ :D =D (smile dan tertawa)
:( =( (marah dan Bingung)
:-bd :-d (oke)
|o| (tepuk tangan)

By: Terwujud.com
Terima Kasih!!

Copyright © 2014. Terwujud.com | Sumber Informasi Terpercaya - All Rights Reserved | Template Created by Kompi Ajaib | Modified by Ibrahim Lubis