mas template

Membuat Info Panel Slide Vertikal dengan jQuery

Temen-temen sudah baca artikel saya tentang Membuat Chatbox Slide Vertikal Dengan jQuery kan? Tutorial kali ini pada dasarnya sama, yaitu kita menyembunyikan panel ini dengan tombol. Hanya disini yang kita sembunyikan adalah informasi tentang blog kita atau seputar tentang penulis blog. Nah, pada tutorial blog kali ini saya akan memberikan cara dalam membuat info panel slide vertikal dengan jQuery.


Sesuai dengan namanya fungsi dari menu ini adalah memberikan informasi tentang penulis kepada pembaca dengan sedikit kemasan animasi jQuery untuk memperindahnya.Untuk contoh gambarnya anda bisa lihat di atas, atau langsung lihat disini, klik tombol info yang ada di sebelah kiri atas. Bagi anda yang tertarik untuk membuatnya berikut ini langkah-langkahnya :
  1. Login ke blogger dengan akun anda.
  2. Kemudian klik rancangan
  3. Pilih Edit HTML jangan lupa centang "Expand Template Widget"
  4. Cari kode berikut ]]></b:skin> gunakan control + f biar cepet, kemudian copy kode dibawah dan letakkan diatas kode tersebut
    .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}
  5. Setelah itu cari kode </head> lalu copy kode dibawah ini dan letakkan diatasnya.
    <script  src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js'  type='text/javascript'/>
  6. Jika anda telah memasang script Jquery sebelumnya anda dapat meninggalkan langkah diatas.
  7. Masukan kode Javascript berikut dibawah script jQuery tadi:
    <script type="text/javascript">
    $(document).ready(function(){
    $(".trigger").click(function(){
    $(".panel").toggle("fast");
    $(this).toggleClass("active");
    return false;
    });
    });
    </script>
  8. Langkah terakhir cari lagi kode berikut </body> setelah itu copas kode dibawah ini dan taruh diatasnya.
    <div class='panel'>
    <h3>Selamat Datang bahasa inggrisnya welcome</h3>
    <p style='text-align:justify'>Selamat datang di blog maskolis, saya harap anda senang berada diblog sederhana ini. Blog ini saya tulis dengan komputer yang sederhana dan koneksi internet yang juga sederhana. Saya berharap Anda sering datang kembali. Silahkan anda mencari hal-hal yang baru di blog saya ini <a href='http://creatingwebsite-maskolis.blogspot.com/' title='creating website'>Selengkapnya tentang blog ini</a></p>

    <h3>Sekilas tentang maskolis</h3>
    <img height='73px' src='http://1.bp.blogspot.com/_jeu1dUw9AK4/TVI1C5QJ--I/AAAAAAAAAcw/AkK1DNuu__o/s1600/maskolis.jpeg' width='73px'/>
    <p>Photo di samping itu bukan saya dan juga bukan pacar saya, pokoknya bukan siapa-siap saya. Nama saya maskolis saya seorang yang ingin belajar blogger. Saya mulai belajar blogger sejak bulan Oktober 2010, dan blog ini saya buat pada bulan Desember 2010</p>

    <div style='clear:both;'/>

    <div class='columns'>
    <div class='colleft'>
    <h3>Navigasi</h3>
    <ul>
    <li><a href='#' 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/#!/4rifin123' title='Twitter'>Twitter</a></li>
    <li><a href='http://www.blogger.com/profile/00429201158192562265' title='About Me'>About Me</a></li>
    <li><a href='mailto:helmi4rifin@gmail.com' title='Gmail'>Gmail</a></li>
    </ul>
    </div>
    </div>
    <div style='clear:both;'/>
    </div>
    <a class='trigger' href='#'>Info</a>
  9. Terakhir Save Template anda, dan lihat hasilnya
Tentu temen-temen sudah tahu kan? Tulisan yang saya beri warna bisa diganti dengan tulisan yang diinginkan. Demikian tadi penjelasan mengenai membuat panel info dengan jQuery selamat mencoba dan semoga bermanfaat.
Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Creating Website

17 comments:

  1. @:Dicoba dulu kalo bisa yang dipake, kalo nggak bisa pake kode jQuery 1.2.6 aja

    ReplyDelete
  2. kok dicoba ngga bisa ya :'(

    ReplyDelete
  3. siip ,, moga sukses gan ..
    jangan lupa kunjungan balik'a ia ..
    makasih ..

    ReplyDelete
  4. ka kalo buat di web php bisa ga.?

    ReplyDelete
  5. Kok punya saya dibagian isi yang judulnya "sekilas tentang maskolis" kok paragraf nya center ya , bingung mau ngubah ke justify .bingung cari kodenya yang mana . tolong ya om .

    ReplyDelete
  6. Produk dijamin asli
    TILLA SHOP : Barang yang Kami Tawarkan Semuanya Barang Asli Original Garansi Resmi Distributor dan Garansi TAM .
    Semua Produk Kami Baru dan Msh Tersegel dLm BOX_nya.
    BERMINAT HUB-SMS:0896-9198-6275 ATAU KLIK WEBSET RESMI KAMI
    BlackBerry>Samsung>Nokia>Apple>Acer>Dell>Nikon>DLL

    Dijual

    Ready Stock !
    BlackBerry 9380 Orlando - Black
    Rp.900.000,-

    Ready Stock !
    BlackBerry Curve 8520 Gemini
    Rp.500.000,-

    Ready Stock !
    BlackBerry Bold 9780 Onyx 2
    Rp.800.000,-

    Ready Stock !
    Blackberry Curve 9320
    Rp.700.000,-

    Ready Stock !
    Samsung Galaxy Tab 2 (7.0)
    Rp. 1.000.000

    Ready Stock !
    Samsung Galaxy Nexus I9250 - Titanium Si
    Rp.1.500.000,-

    Ready Stock !
    Samsung Galaxy Note N7000 - Pink
    Rp.1.700.000

    Ready Stock !
    Samsung Galaxy Y S5360 GSM - Pure White
    Rp.500.000,-

    Ready Stock !
    Nokia Lumia 800 - Matt Black
    Rp.1.700.000,-

    Ready Stock !
    Nokia Lumia-710-white
    Rp. 900.000,-

    Ready Stock !
    Nokia C2-06 Touch & Type - Dual GSM
    Rp.450.000,-

    Ready Stock !
    Nokia Lumia 710 - Black
    Rp. 900.000,-

    Ready Stock !
    Apple iPhone 4S 16GB (dari XL) - Black
    Rp.1.200.000,-

    Ready Stock !
    Apple iPhone 4S 16GB (dari Telkomsel)
    Rp.1.200.000,-

    Ready Stock !
    Apple iPod Touch 4 Gen 8GB
    Rp.700.000

    Ready Stock !
    APPLE iPod Nano 8GB - Pink
    Rp.500.000,-

    Ready Stock !
    Acer Aspire 4752-2332G50Mn Core i3 Win7 Home
    Rp 1.300.000

    Ready Stock !
    Acer Aspire S3-951-2364G34iss
    Rp. 1.200.000,-

    Ready Stock !
    Acer Aspire 5951G Core i7 2630 Win 7
    Rp. 2.500.000,-

    Ready Stock !
    Acer Aspire 4755G Core i5 2430 Win 7 Home Premium Green
    Rp. 2.500.000,-

    Ready Stock !
    Nikon D7000 kit 18-105mm
    Rp.1.700.000

    Ready Stock !
    Nikon D90 Kit 18-105mm Vr
    Rp 1.300.000

    Ready Stock !
    Nikon Coolpix L 120 Red
    Rp. 900.000

    Ready Stock !
    Nikon Coolpix P 500 Black
    Rp 1.000.000

    ReplyDelete
  7. kok setelah ku coba ada masalah di lebar kolom utamanya jadi mengecil.

    ReplyDelete
  8. Terimakasih Maskolis, keren banget... :D

    ReplyDelete
  9. Produk di Jamin Asli.
    ELECTRONIC SOLUTION-SHOP.
    Menawarkan harga Promo , Barang yang Kami Tawarkan Semuanya Barang Asli Original Garansi Resmi Distributor dan Garansi Tam .Semua Produk Kami Baru dan Msh Tersegel dLm BOX_nya,
    Berminat Hub: Hotline/sms: 0857-7087-2865 ATAU KLIK WEBSET RESMI KAMI http://electronicsulution-shop.blogspot.com
    BlackBerry>Samsung>Nokia>Apple>Acer>Toshiba
    Led tvlg>Led tv Samsung>Nikon>Canon>DLL

    Dijual,
    Ready Stock !
    Blackberry Bold 9780
    Harga Promo Rp.1.500.000,-
    Ready Stock !
    BlackBerry Bold Curve 9300,
    Harga promo Rp.1.000.000,-
    Ready Stock !
    BlackBerry Torch 9800
    Rp.1.600.000,-
    Ready Stock !
    BlackBerry Z10
    Rp.3.500.000,-
    Ready Stock !
    BlackBerry Q 10
    Rp.4.000.000,-
    Ready Stock !
    Samsung Galaxy S3 Mini
    Rp. 2.700.000,-
    Ready Stock !
    Samsung Galaxy Ace
    Rp.1.400.000,-
    Ready Stock !
    Samsung Galaxy S2
    Rp.2.500.000,-
    Ready Stock !
    Samsung Galaxy S4
    Rp.4.500.000,-
    Ready Stock !
    Nokia 808 Pure View
    Rp.4.200.000,-
    Ready Stock !
    Nokia Lumia 820
    Rp. 2.700.000,-
    Ready Stock !
    Nokia Lumia 920
    Rp.3.400.000,-
    Ready Stock !
    Nokia Lumia 620
    Rp. 1.500.000,-
    Ready Stock !
    Apple iPhone 5G 16GB
    Rp.4.100.000,-
    Ready Stock !
    Apple iPhone 4G- 32GB
    Rp.3.500.000,-
    Ready Stock !
    Apple iPhone 3G-16GB
    Rp.2.900.000,-
    Ready Stock !
    Apple iPhone 4S-64GB
    Rp.4.000.000,-
    Ready Stock !
    Acer Aspire one 756
    Rp.1.400.000,-
    Ready Stock !
    Acer Aspire E1-471G
    Rp.2.800.000,-
    Ready Stock !
    Acer Aspire S5 Ultrabook Core 17
    Rp.7.000.000,-
    Ready Stock !
    Toshiba Satellite C800D-1006
    Rp.2.500.000,-
    Ready Stock !
    Toshiba Satellite C800D-1003
    Rp.1.500.000,-
    Ready Stock !
    Toshiba Satellite L840-1045XR
    Rp.3.700.000,-
    Ready Stock !
    Led TV Lg 42 inch LN5100
    Rp 3.500.000,-
    Ready Stock !
    Led TV Lg 42 inch LN5710
    Rp. 4.000.000,-
    Ready Stock !
    Led TV Lg 39 inch LN5100
    Rp. 3.000.000,-
    Ready Stock !
    Led TV Samsung UA 32 inch F5000
    Rp. 2.100.000,-
    Ready Stock !
    Led TV Samsung UA 32 inch F4000
    Rp.1.500.000,-
    Ready Stock !
    Nikon D5100+18-15Kit
    Rp 3.500.000,-
    Ready Stock !
    Nikon D3000 Kit 18-15mm VR
    Rp. 1.500.000,-
    Ready Stock !
    Nikon D3200 Kit 18-105mm VR
    Rp 3.100.000,-
    Ready Stock !
    Canon Eos 600D Kit EF-S 18-135mm
    Rp.3.800.000,-
    Ready Stock !
    Canon Eos 70D Kit EF-S 18-55mm is stm
    Rp.4.700.000,-
    Ready Stock !
    Canon Eos 600D Body
    Rp.2.500.000,-


    Kami melakukan Pengiriman barang lewat Tiki atau Jne ,Pos,Cargo,bagi luar kota,Ongkir ditanggung pembeli
    Berkat Anda Usaha Kami Jadi Semakin Lancar,Terima kasih telah berbelanja di Electronic Solution-Shop.

    Nikmati berbagai keuntungan berbelanja di sini.
    *Barang berkualitas dan harga relatif lebih murah
    *Dapat diantar ke seluruh indonesia
    *Keamanan di jamin karna setiap pengiriman di sertai asuransi proses cepat dan sederhana
    Barang di jamin 100% original baru dan bergaransi resmi.
    Selamat Berbelanja ! ! !

    ReplyDelete
  10. Sujud syukur saya ucapkan kepada ALLAH SWT dan saya sekeluarga sangat berterimakasih banyak kepada EYANG SEMAR atas bantuannya saya bisa menang togel dan nomor ghoib yang diberikan 4d (6300) alhamdulillah BENAR2 berhasil sya menang 79 juta’ karna sekarang ini kehidupan saya jauh lebih baik dari sebelumnya dan semua utang2 saya sudah pada lunas semua, jika anda mau bukti bukan rekayasa silahkan hubungi EYANG SEMAR:(_0_8_5_3_1_6_1_1_0_0_1_2_) ini lah kisah nyata dari saya
















    Sujud syukur saya ucapkan kepada ALLAH SWT dan saya sekeluarga sangat berterimakasih banyak kepada EYANG SEMAR atas bantuannya saya bisa menang togel dan nomor ghoib yang diberikan 4d (6300 ) alhamdulillah BENAR2 berhasil sya menang 79 juta’ karna sekarang ini kehidupan saya jauh lebih baik dari sebelumnya dan semua utang2 saya sudah pada lunas semua, jika anda mau bukti bukan rekayasa silahkan hubungi EYANG SEMAR:(_0_8_5_3_1_6_1_1_0_0_1_2_) ini lah kisah nyata dari saya















    Sujud syukur saya ucapkan kepada ALLAH SWT dan saya sekeluarga sangat berterimakasih banyak kepada EYANG SEMAR atas bantuannya saya bisa menang togel dan nomor ghoib yang diberikan 4d (6300 ) alhamdulillah BENAR2 berhasil sya menang 79 juta’ karna sekarang ini kehidupan saya jauh lebih baik dari sebelumnya dan semua utang2 saya sudah pada lunas semua, jika anda mau bukti bukan rekayasa silahkan hubungi EYANG SEMAR:(_0_8_5_3_1_6_1_1_0_0_1_2_) ini lah kisah nyata dari saya















    Sujud syukur saya ucapkan kepada ALLAH SWT dan saya sekeluarga sangat berterimakasih banyak kepada EYANG SEMAR atas bantuannya saya bisa menang togel dan nomor ghoib yang diberikan 4d (6300 ) alhamdulillah BENAR2 berhasil sya menang 79 juta’ karna sekarang ini kehidupan saya jauh lebih baik dari sebelumnya dan semua utang2 saya sudah pada lunas semua, jika anda mau bukti bukan rekayasa silahkan hubungi EYANG SEMAR:(_0_8_5_3_1_6_1_1_0_0_1_2_) ini lah kisah nyata dari saya















    Sujud syukur saya ucapkan kepada ALLAH SWT dan saya sekeluarga sangat berterimakasih banyak kepada EYANG SEMAR atas bantuannya saya bisa menang togel dan nomor ghoib yang diberikan 4d (6300 ) alhamdulillah BENAR2 berhasil sya menang 79 juta’ karna sekarang ini kehidupan saya jauh lebih baik dari sebelumnya dan semua utang2 saya sudah pada lunas semua, jika anda mau bukti bukan rekayasa silahkan hubungi EYANG SEMAR:(_0_8_5_3_1_6_1_1_0_0_1_2_) ini lah kisah nyata dari saya















    Sujud syukur saya ucapkan kepada ALLAH SWT dan saya sekeluarga sangat berterimakasih banyak kepada EYANG SEMAR atas bantuannya saya bisa menang togel dan nomor ghoib yang diberikan 4d (6300 ) alhamdulillah BENAR2 berhasil sya menang 79 juta’ karna sekarang ini kehidupan saya jauh lebih baik dari sebelumnya dan semua utang2 saya sudah pada lunas semua, jika anda mau bukti bukan rekayasa silahkan hubungi EYANG SEMAR:(_0_8_5_3_1_6_1_1_0_0_1_2_) ini lah kisah nyata dari saya















    Sujud syukur saya ucapkan kepada ALLAH SWT dan saya sekeluarga sangat berterimakasih banyak kepada EYANG SEMAR atas bantuannya saya bisa menang togel dan nomor ghoib yang diberikan 4d (6300 ) alhamdulillah BENAR2 berhasil sya menang 79 juta’ karna sekarang ini kehidupan saya jauh lebih baik dari sebelumnya dan semua utang2 saya sudah pada lunas semua, jika anda mau bukti bukan rekayasa silahkan hubungi EYANG SEMAR:(_0_8_5_3_1_6_1_1_0_0_1_2_) ini lah kisah nyata dari saya

    ReplyDelete
  11. tq gan atas infonya & sukses selalu gan :)


    PROMOSI

    hello semua para coment gan gan :)
    ayo bergabung bersama kami di website www.senang77.com
    cara mendapatkan uang dengan mudah gabunglah bersama kami..
    kami juga menyediakan bonus turn over 0.3% dan akan di bagikan dalam

    1 minggu dan balance akan masuk kedalam secara otomatisnya


    WWW.senang77.COM
    PENDAFTARAN
    http://senang77.com/Register000.aspx

    Kami juga menyediakan kode referral :)

    http://www.senangpoker.com/?ref=859522

    kami bisa dihunbungi melalui :

    YM : cs.senangpoker@yahoo.com
    FACEBOOK : cs.senangpoker@yahoo.com
    BBM : 764a99d1
    Twitter : senangpoker
    SKYPE : senang.poker


    Untuk anda kami suport dengan 5 bank Lokal : BANK BCA, BANK BNI, BANK

    BRI, BANK MANDIRI, DAN BANK DANAMON.


    TERIMA KASIH
    salam manis :) senang77.com / senang77.net / senang77.info :)

    ReplyDelete

No comment moderation in this page
Do not put the link in this comment, I'll make it disappear forever
I hate when people play cheat to increase their blog, meanwhile everyone else do it politely and honestly

 
CREATING WEBSITE © 2012 the other blog Mas Template | Look at this Johny Template | Powered by Blogger