Terwujud

Cara Membuat Slide Panel Cantik dan Menarik



Jika bermanfaat, Mohon di Share ya !, jika ada unek-unek komen aja
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://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


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


Artikelnya sudah di share, makasih ya !

Mau Artikel Gratis! Silahkan Tulis Email Anda.
Print PDF

You Might Also Like:

Previous
Next Post »

Sudah ada 8 komentar

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.

Klik dan Copy Icon di bawah:
:) :( hihi :-) :D =D :-d ;( ;-( @-) :P :o -_- (o) :p :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ $-) (y) (f) x-) (k) (h) cheer lol rock angry @@ :ng pin poop :* :v 100

By: Terwujud.com
Terima Kasih!!

  1. Replies
    1. Silahkan Mas, saya persilahkan dengan segala hormat

      Delete
  2. bisa di coba di blog saya nih, thanks artikelnya

    ReplyDelete
    Replies
    1. yuups mas ahmad, silahkan dan terima kasih

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

    ReplyDelete
    Replies
    1. Boleh juga tu mas, terima kasih atas kunjungannya ya

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

    suksess selalu blognya mas

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

      Delete
Copyright © 2014 Terwujud.com - All Rights Reserved