Tambah Jquery Slide Panel Show/Hide Kkeren Di Blog

Cara Pasang Slide Panel di Blog Untuk Hemat Space Sidebar Blog



Trisatya BlogMembuat 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.

Silahkan lihat demo menu Slide Panel berikut :







ara 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(http://1.bp.blogspot.com/_QeR8kbaWhLU/S-YpuL_4-qI/AAAAAAAAAvY/oCc1nsIsZSg/s1600/btn-slide.gif) no-repeat center top;}


.btn-slide {background: url(http://2.bp.blogspot.com/_QeR8kbaWhLU/S-Ypuu53xSI/AAAAAAAAAvg/v_4rKz5mEkc/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.


# width:280px;height:200px; adalah lebar dan tinggi area content.
# width:304px; adalah lebar border pada code class slide.
# Slide Panel adalah tulisan pada tombol slide panel.


Untuk tutorial originalnya silahkan kunjungi postingan berjudul jQuery Tutorials for Designers.
 Bagaimana trik kali ini? keren bukan? jelas saja keren karena saya dapatkan trik ini dari blog tetangga yaitu Hapia Mesir. Disana banyak sekali widget dan aksesoris untuk mempercantik blog sobat semua.
happy blogging oketrik.blogspot.com.



SEO


TUTORIAL BLOG


WIDGET


TOOL BLOG


ARTIKEL LAINNYA :


    SECURITY======================================


    TRIK WINDOWS============================




    DESIGN========================================

    INTERNET==================================

    EARN $==================================










    Penulis : ADMIN ~ Sebuah blog yang menyediakan berbagai macam informasi

    Artikel Tambah Jquery Slide Panel Show/Hide Kkeren Di Blog ini dipublish oleh ADMIN pada hari Monday, July 16, 2012. Semoga artikel ini dapat bermanfaat.Terimakasih atas kunjungan Anda silahkan tinggalkan komentar.sudah ada 0 komentar: di postingan Tambah Jquery Slide Panel Show/Hide Kkeren Di Blog
     

    0 comments:

    Post a Comment

    Zona Download Software Gratis
    DESIGN
    SECURITY
    TOOLS WINDOWS
    • CamStudio 8  (Tool untuk merekam layar komputer ke format video)
    INTERNET
    AUDIO/VIDEO
    OTHERS