Excalibur
Info

Selamat Datang

Selamat Datang Di Blog Roy Lichtenstein- Saya Senang Anda Berada Di Sini, Dan Berharap Anda Sering Datang Kembali. Silakan Berlama - Lama Di Sini Dan Membaca Lebih Lanjut Tentang Artikel Yang Saya Susun. Ada Banyak Hal Dapat Anda Pelajari, Anda Mungkin Akan Menemukan Sesuatu Yang Menarik

Sekilas Tentang Roy

Nama saya Roy Lichtenstein, Saya Bukan Seorang Blogger, Hacker, Desainer Atau Apapun Tapi Saya Hanya Seseorang Yang Ingin Selalu Belajar Dan Ingin Tau Sesuatu Yang Baru...

Social Icons

xtreme5-roylichtenstein.blogspot.com

Tambah Jquery Slide Panel Show/Hide keren Di Blog

Membuat Slide Panel Di Blog. seperti halnya menu accordion, slide panel bisa dipasang di sidebar ataupun di area posting. menghemat penggunaan tempat pada blog dan simple membuatnya. kemudian meletakkan gadget didalamnya.
Membuat Slide Panel Di Blog 

Layaknya Simple Accordions, menu slide panel ini menyembunyikan content yang ada didalamnya kemudian akan ditampilkan setelah diklik.



cara membuat Slide Panel DI Blog adalah sebagai berikut :

- Login keBlogger dengan account anda.
- Pergi ke "Tata Letak" kemudian "Edit HTML".
- Gunakan JQuery versi 1.2.3 berikut pada template anda. copy paste JQuery berikut dibawah :
<head>




<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js' type='text/javascript'/>

- Copy paste script berikut dan letakkan dibawah JQuery 1.2.3 tadi :


<script type='text/javascript'>
$(document).ready(function(){
$(&quot;.btn-slide&quot;).click(function(){
$(&quot;#panel&quot;).slideToggle(&quot;slow&quot;);
$(this).toggleClass(&quot;active&quot;);
});
});
</script>





- Masukan code CSS berikut dan letakkan diatas ]]></b:skin> :


#panel {background: #fff;border:2px solid #f0f0f0;border-bottom:none;text-align:left;padding:10px;width:280px;height:200px;display: none;}


.slide {margin: 0;padding: 0;width:304px;border-top: solid 4px #422410;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmlYFlM_cSelssvqEp_txCcaRCCkyGEYl4t6VWxyUkkUOlweVSeJ_Xh1QwH8duxnu84Nag8_hBjXJVimihWmkvGSyLr7sOX5SejbW1mR_4FP2kp4D_I_g4az1b7NhFWkn8PcHnl9TKkSg/s1600/btn-slide.gif) no-repeat center top;}


.btn-slide {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWhVBMGCOqWINelBwlxemsq6aqkXDbNo-fx9HqKQCrYIlt-7xmziBn7qBPMahHCZGLWwtdH0bsfez3QHuW6BNnH2WWwBoOMoHBKAtT7Z7l7jvFCxsh9tJ6XY66jayNhjo9ZUjZeevN1J8/s1600/white-arrow.gif) no-repeat right -50px;text-align:center;width: 144px;height: 31px;padding: 10px 10px 0 0;margin: 0 auto;display: block;font: bold 120%/100% Arial, Helvetica, sans-serif;color: #fff;text-decoration: none;}


.active {background-position: right 12px;}


- Simpan template.


Untuk langkah berikutnya adalah sebagai berikut :


- Copy paste code berikut dan letakkan ditempat yang anda inginkan (postingan atau sidebar) :
<div id="panel" style="font-weight:bold;">

LETAKKAN CONTENT ANDA DISINI

</div><div class="slide"><a class="btn-slide" href="#">Slide Panel</a></div>



- Simpan.

Tidak ada komentar:

Posting Komentar

Berikan Komentar Anda Dibawah Sini Jika Belum Punya Akun Google/Blogger Anda Bisa Pilih Anonymous