Home » » Cara Membuat Vertical Sliding Info Panel With jQuery

Cara Membuat Vertical Sliding Info Panel With jQuery

Hi.. friends Memenuhi permintaan Teman Blogger oktri.co.cc mengenai info profil slide panel sebelah kanan, contoh dari bisa dilihat contoh pada blog oktridarmadi, Artikel ini diadaptasi dari spyrestudios.com dengan judul asli "Vertical Sliding Info Panel With jQuery yang kemudian diberikan sedikit sentuhan oleh saya sehingga menjadi seperti yang sekarang digunakan. Artikel kali ini masih berbasis jQuery seperti efek-efek yang lainnya, makanya bagi teman-teman blogger yang mengikuti artikel demi artikel mungkin akan menemukan teknik terbaik pemasangan jQuery Pada tips-n-trick kali ini semua informasi yang dimasukan masih serba manual, hal ini agar mudah dipahami bagaimana kerja dari sliding panel, sehingga kedepannya kita hanya perlu melakukan modifikasi pada bagian isi dari sliding panel

Oke langsung saja berikut ini :
Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Klik "Expand Template Widget"
Langkah 4
Cari kode di bawah ini:

]]></skin>
Langkah 5
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 4:


.panel{position:fixed;top:20px;left:0;background:#000;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;border:1px solid #444;width:330px;height:auto;filter:alpha(opacity=85);-moz-opacity:0.85;opacity:0.85;display:none;padding:30px 30px 30px 100px}
.panel p{color:#ccc;margin:0 0 15px;padding:0}
.panel a,.panel a:visited{color:#9FC54E;text-decoration:none;border-bottom:1px solid #9FC54E;margin:0;padding:0}
.panel a:hover,.panel a:visited:hover{color:#fff;text-decoration:none;border-bottom:1px solid #fff;margin:0;padding:0}
a.trigger{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#333 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}
a.trigger:hover{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#222 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}
a.active.trigger{background:#222 url(http://lh3.ggpht.com/_xcD4JK_dIjU/S4QDvxbreOI/AAAAAAAAD2M/Cz3Q2r5pdTM/d/minus.png) 85% 55% no-repeat}
.columns{clear:both;width:330px;line-height:22px;padding:0 0 20px}
.colleft{float:left;width:130px;line-height:22px}
.colright{float:right;width:130px;line-height:22px}
a:focus{outline:none}
.panel img{background-color:#262626;border:1px solid #333;float:right;margin:3px 3px 6px 8px;padding:5px}
.panel h3{border-bottom:1px solid silver;margin-bottom:5px;padding-bottom:3px;text-align:left;clear:both;color:#FFF;font-size:12px;font-weight:700}
.columns ul,.columns ul li{list-style-type:none;margin:0;padding:0}






Langkah 6
Cari kode dibawah ini:

</head>

Langkah 7
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 6:


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/> <script type="text/javascript"> $(document).ready(function(){ $(".trigger").click(function(){ $(".panel").toggle("fast"); $(this).toggleClass("active"); return false; }); }); </script>
Langkah 8
Cari kode dibawah ini:

</body>

Langkah 9
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 8:


<div class='panel'>
<h3>Selamat Datang Di OKTRI BLOG</h3>

<p style='text-align:justify'>Selamat datang di Blog saya, semoga saja kalian bisa mendapatkan apa yang kalian butuhkan diblog saya ini. Terima kasih Telah Berkunjung Di Blog saya,apabila berkenan silahkan berkomentar dan follow blog saya,mari kita saling berbagi ilmu tentang apa saja...
</p>
<h3>Sekilas tentang penulis</h3>
<img height='73px' src='http://i634.photobucket.com/albums/uu66/oktri_2009/o-3Jqh3BlhR3srjirD0J-A.jpg' width='73px'/>
<p>Nama saya Oktri darmadi,saya seorang Mahsiswa S1 Teknik Informatika Di IBI DARMAJAYA Bandar Lampung.</p>
<div style='clear:both;'/>
<div class='columns'>
<div class='colleft'>
<h3>Navigasi</h3>
<ul>
<li><a href='http://oktridarmadi.blogspot.com/' title='home'>Home</a></li>
<li><a href='#' title='about'>About</a></li>

<li><a href='#' title='portfolio'>Portfolio</a></li>
<li><a href='#' title='contact'>Contact</a></li>
<li><a href='#' title='blog'>Blog</a></li>
</ul>
</div>
<div class='colright'>
<h3>Social Stuff</h3>
<ul>
<li><a href='http://twitter.com/oktridarmadi' title='twitter'>Twitter</a></li>
<li><a href='http://facebook.com//oktri.darmadi' title='facebook'>Facebook</a></li>
<li><a href='http://friendster.com/ok3darmadi' title='friendster'>Friendster</a></li>

<li><a href='http://oktridarmadi.blogspot.com/' title='plurk'>My Blog 1</a></li>
<li><a href='http://www.oktri.co.cc/' title='myspace'>My Blog 2</a></li>
</ul>
</div>
</div>
<div style='clear:both;'/>
</div>
<a class='trigger' href='#'>Oktri</a>
Catatan: script langkah 9,tinggal diedit sesuai dengan blog anda

Langkah 10
Simpan Template dan Preview blog...




Artikel Terkait:

34 komentar:

  1. ni info bro tipsnya!! sebah undangan undangan nih bro di forumku skalin meramaikan blogger forum dan bisa link back gratis setelah postingan

    BalasHapus
  2. Salam ukhuwah untuk sobat bloger, oke mas tips baru lagi nih...bisa dicoba deh...manteb bisa tambah keran lagi nih blog,sipsh..maksih untuk artikelnya mas sukses selalu

    BalasHapus
  3. wah kak bagus tuh...tapi lebih jelas donk ka..
    jadi di kasih keterangan..tukan scripnya warnanya merah semua jadi agak" bingung kak?

    BalasHapus
  4. kapan kapan saya coba sob, massih males edit template

    BalasHapus
  5. Wah artikel yang menarik... Penasaran ingin mencoba... Aku coba ya sobat... Jadi ngiler...

    BalasHapus
  6. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  7. @arbitter salam blogger,,,

    @q ingin bisa mksh ya mas...salam ukhuwah,terima kasih kemabali .mudah2 dapat berguna

    @rizal ya patut dicoba thu buat ,hehehe

    @hendriono terima kasih sudah berkomnetar mas,,,wah mas ini ngeledek blog mas dah dipasng malah blognya lebih bagus...salam kenal ya mas

    @vidi pa yg salah q dah coba thu liat az skrg dah q pasang diblog ini pake cara diatas...mungkin km kurang teliti,,

    BalasHapus
  8. @Vidi: Perhatikan Langkah 9 setelah tag </a> baris ke 6 dari bawah, disana ada javascript kebawah, nah yang itu dibuang saja... dijamin maknyus...
    Ini dibuang:
    <script type='text/javascript'>
    if (window.jstiming) window.jstiming.load.tick(&#39;widgetJsBefore&#39;);
    </script><script src='http://www.blogger.com/static/v1/widgets/125596948-widgets.js' type='text/javascript'/>
    <script type='text/javascript'/&gt

    BalasHapus
  9. terima kasih mas hendriono,sudah mengingatkan ,
    sudah saya saya hapus Js yg dibawah,,sekali lagi terima kasih banyak

    BalasHapus
  10. wah dah aku coba..tapi kenapa gak bisa and muncul kode pesan salah terus...padahal udah sama apa yg di blog ini terapin..????napa yua???jwab???

    BalasHapus
  11. nah seperti inilah pesannya :
    ( Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
    Pesan error XML: The reference to entity "ref" must end with the ';' delimiter. )
    terus gimana tuh kak???

    BalasHapus
  12. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  13. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  14. Pertamax,..
    Sudah berulang Kali Stie mencoba tutorial yg seperti ni tpi selalu ga,tpi setelah mampir di agan stie coba akhirnya berhasil,Terimakasih gan atas tutornya.
    Semoga Tuhan Selalu Memberikan Yang terbaik buat agan dan membalas semua ke baikan agan,.
    sekali lg terimakasih,..
    klo da waktu silahkan mampir di http://www.davastie.co.cc/ Di Tunggu gan ke datangannya.

    BalasHapus
  15. Lam kenal bro..
    Aq udah pasang di template terbaru bawaan blogger. berhasil.. cuman.. efeknya, setiap postingan jadi bergeser/menciut ke kiri semua.
    cuma itu aja efekna.

    kira2 kenapa yah ??

    Req jg bro, cara bikin efek salju seperti yg km pake.. thanks bro..

    BalasHapus
  16. matur tengkyu!!
    oy jangan sungkan2 berkunjung ke www.freakoutcloth.blogspot.com yaaaa!!!hehehe...

    BalasHapus
  17. Maaf Brother....
    mau nnya... Kko saya cari ]]> ga ada yaaa?
    udah pke CTRL+F.... gmna yaa brother tlong..

    BalasHapus
  18. yg lngkah pertama brother...tlong dbantu
    maaf repost..

    BalasHapus
  19. gan sama kaya vivan pradita..smua jadi menciut gtu..knpa tuh??
    trus msalah ke 2 ko pnya we klo stiap diklik eh trus tu mlah lngsung balik lg widgetnya..boro2 bisa ngeliat..apa yg slah gan?? mohon di jawab...
    http://dhe-romantic.blogspot.com

    BalasHapus
  20. aduh2 maaf agan jdi double post...
    mslah saya udah terpecahkan...
    buat yg lain yg ngalamin kaya saya cobe cek2 aja code yg dikasih sama Mas Oktri..
    Cobalah Belajar dan jdi lebih baik...
    Regards..
    http://dhe-romantic.blogspot.com

    BalasHapus
  21. ka..
    ini hanya untuk menampilkan Nama "facebok, Twitter," saja. Gimana caranya kaya ka Oktri, menampilkan Icon Facebook dan Twitter. bkan menampilkan kata Facebooknya saja.

    BalasHapus
  22. kalo bikinnya banyak bisa nggak???
    dalam 1 page...jadi kaya menu2 tapi pake panel gitu....

    BalasHapus
  23. Selamat PAgi..

    Saya sudah mencoba ka..

    tapi tulisannya begeser ke kiri, jadi agak tidak terlihat (tertimpa)

    mohon pencerahannya

    BalasHapus
  24. koq malah muncul di page paling bawah sich stelah aku coba bro...tolng penjelasannya yach.....mao banget nich tips

    BalasHapus
  25. qo gak bs muncul info'a yah???
    cm muncul OKTRI kaya pnya anda... gimn cara muncul'in info'a yah???
    bingung...

    BalasHapus
  26. cuakeb masss .
    mksii ya tips n tricknya mass .

    sukses selalu :)

    BalasHapus
  27. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  28. di blog saya enggak ada ]]>
    giemna
    ???????????

    BalasHapus
  29. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  30. kok punya aku gag bisa ya kak?? tulisan
    ]]> gag ada adanya ]]>

    gmana dunk?? mohon bantuannya

    BalasHapus
  31. Klo mau nambahi garis hijau yang ada di Vertical Sliding Info Panel With jQuery kyak gtu gmana sih????????

    BalasHapus
  32. Blognya sangat menarik dan informatif Mas. Saya pengen belajar.

    BalasHapus

Fivers

Selamat Datang Di OKTRI BLOG

Selamat datang di Blog saya, semoga saja kalian bisa mendapatkan apa yang kalian butuhkan diblog saya ini. Terima kasih Telah Berkunjung Di Blog saya,apabila berkenan silahkan berkomentar dan follow blog saya,mari kita saling berbagi ilmu tentang apa saja...Selengkapnya tentang Tutorial Ini

Sekilas tentang penulis

Nama saya Oktri darmadi,saya seorang Mahasiswa S1 Teknik Informatika Di IBI DARMAJAYA Bandar Lampung.

Social Stuff

  • RSS
  • Twitter
  • Facebook
  • HOME
Oktri