Image & Snippet

Membuat Panel Info Slide Vertikal Dengan JQuery

Kemarin ada sobat dexto yg sms,,Din gmn cara buat panel info itu,,,hehehe ya bkan bermaksud sokpinter/menggurui karna saya jg masih belajar,bisa jg di bilang anak baru,yah hanya sekedar share kepada sobat2 dexto semua,bik kali ini saya akan share tentang cara Membuat Panel Info Slide Vertikal Dengan Jquery,,,oke kita langsung keeeeeee TKP.hehe kyak OVJ ja


Langkah Nya
1.Login di blogger Anda
-Masuk ke Dasbor
-Pilih Tata Letak / Rancangan Dan Edit HTML
-Klik "Expand Template Widget"
-Jangan lupa untuk memback-up template anda terlebih dahulu

2. Cari kode
]]></b:skin>
Setelah ketemu Taruh/pasteken kode dibawah ini tepat di atasnya

.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 #940000;width:320px;
height:auto;filter:alpha(opacity=85);
-moz-opacity:0.85;opacity:0.85;
display:none;padding:10px 30px 30px 100px}

.panel p{color:#ffffff;margin:0 0 15px;padding:0}
.panel a,.panel a:visited{color:#940000;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://lh4.ggpht.com/_KnZf0QUvjQQ/TCqGoXWoy-I/AAAAAAAABXg/NOayGEKrun8/button_plus_red.png) 85% 55% no-repeat;border:2px solid #940000;-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:10px 35px 10px 10px}
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://lh3.ggpht.com/_KnZf0QUvjQQ/TCpkwE7UUNI/AAAAAAAABXc/rjZ7oZXAGXs/1277846394_minus.png) 85% 55% no-repeat;border2px solid #940000;-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:10px 40px 10px 10px}
a.active.trigger{background:#222 url(http://lh3.ggpht.com/_KnZf0QUvjQQ/TCpkwE7UUNI/AAAAAAAABXc/rjZ7oZXAGXs/1277846394_minus.png) 85% 55% no-repeat}
.columns{clear:both;width:330px;line-height:22px;padding:0 0 20px}
a:focus{outline:none}
.panel img{border:1px solid #FFFFFF;float:right;margin:3px 3px 6px 5px;padding:3px}
.panel h3{border-bottom:1px solid #FFFFFF;margin-bottom:5px;padding-bottom:3px;text-align:left;clear:both;color:#940000;font-size:13px;font-weight:700}
.columns ul,.columns ul li{list-style-type:none;margin:0;padding:0}

3.Cari kode
</head>
Setelah Ketemu Taruh Kode ini Di atasnya

<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(){
$(&quot;.trigger&quot;).click(function(){
$(&quot;.panel&quot;).toggle(&quot;fast&quot;);
$(this).toggleClass(&quot;active&quot;);
return false;
});
});
</script>
4.Pada langkah ini Silahkan cari Kode
</body>
Dan letakan kode ini tepat diatasnya

<div class='panel'>
<h3>Selamat Datang Di Dexto Share</h3>
<p style='text-align:justify'>Semeoga Blog Yang Sangat Sederhana Ini Dapat Membantu Anda.Mohon Do&#39;a Dan Saran Sobat Bloger Demi Kemajuan Blog Ini <a href='http://www.facebook.com/pages/Dexto-Share/321611497851955' title='Miftachudin Online'>Dexto In Facebook</a></p>
<h3>Sekilas Tentang Miftachudin</h3>
<img height='73px' src='http://3.bp.blogspot.com/-JH05GnIPMAc/TtsSGnQ3_8I/AAAAAAAAABI/Bdh3vaPrDlM/s220/13032009132.jpg' width='73px'/>
<p>Nama saya Miftachudin,Saya Orang Jawa Yang Terlahir Di Lampung,Ini Semua Berawal Dari Rasa Keingintahuan Dan Sekarang Malah Menjadi Hobi,Saat Ini Saya Sedang Menyelesaikan Studi S1 Saya Di Salah Satu Universitas Di Lampung.Begitulah Sekilas Tentang Sosok Pria Sederhana Ini</p>

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

<div class='columns'>
 <div class='colleft'>
 <h3>Navigasi</h3>
  <ul>
   <li><a href='http://dextoshare.blogspot.com/p/daftar-isi_26.html' title='Daftar Isi'>Daftar Isi</a></li>
   <li><a href='http://www.facebook.com/pages/Dexto-Share/321611497851955?sk=wall' title='contact'>Contact</a></li>
   <li><a href='http://dextoshare.blogspot.com/p/link-exchange.html' title='Blog Sahabat'>Link Exchange Url</a></li>
  </ul>
 </div>

 <div class='colright'>
 <h3>My Social Stuff</h3>
  <ul>
   <li><a href='http://www.facebook.com/miftachudin1?sk=info' title='Facebook'>Facebook</a></li>
   <li><a href='mailto:mudin@gmail.com' title='Gmail'>Gmail</a></li>
  </ul>
 </div>
</div>
<div style='clear:both;'/>
</div>
<a class='trigger' href='#'&gt;Info</a>
Pada Script Yang Berwarna Merah Sobat sesuaikan sesuai blog Sobat Dexto

5.Pada langkah terakhir Simpan

Selamat Mencoba dan semoga artikel ini bermanfaat

Close

56 komentar:

  1. kren ganpanel infonya,oh iya gan link agan sudah saya pasang juga silahkan di cek.trimakasih atas kerja samanya

    BalasHapus
  2. coba dulu ya gan slidenya :)

    BalasHapus
  3. sory bos ngerepotin templat aq kok ngak bsa malah dapet ya balesan kaya ini

    XML: Element type "a" must be followed by either attribute specifications, ">" or "/>".

    maksut y gmana ya?

    di tunggu penjelasan y di email tubanpojok@gmail.com

    BalasHapus
  4. coba dulu kang slidenya menggunakan jquery

    BalasHapus
  5. wahh mantep gan...nambah ilmu :)

    BalasHapus
  6. Wahh Mantap nian postingan agan ..... comot dulu ya brooo hehehehehehe

    BalasHapus
  7. @Pemula_Bloggerweeehhh kang adit kmn j ru nongol...silahkan kang,,hehehe

    BalasHapus
  8. mantaps gan thanks sharingnya :D

    BalasHapus
  9. @Widhisilahkan gan dengan senang hati

    BalasHapus
  10. @Dwi Yuliantoiya syukur ko gt,,,sama2 belajar sob

    BalasHapus
  11. @randy oktaraneeee ada kang randy..ya gan sama2,,kbtulan td saya sedng berslancar di t4 agan,,,

    BalasHapus
  12. @coretankumaaf gan bkanya saya bermksud sok pnter/menggurui,,,setau saya iu karna ada salah satu coding/deklarasi yang tdk tertutp(akhir/awal Tag)pelan2
    saja sob silhkan di coba dan lbih dperhtikan lagi,,saya pun sering mngalami hal itu,,,

    BalasHapus
  13. SOb link blog sudah terpasang silahkan di cek di halaman tukar banner??? thank sobbb

    BalasHapus
  14. Weeh... emang keren banget yach kalo dipake diBlog gitu!!!
    Ayas dulu udah pernah makek lo... MANTAAFF!!!
    Tapi sekarang udah enggak makek lagi Sob,,
    ^_^

    BalasHapus
  15. @BagiBagiBlogsma gan dlu sya jg mke,,it screen shot baju sya yng lama,,,y stlah tau blogazine y sya buang gan..hehehehe

    BalasHapus
  16. wew keren...
    efek nya mantap bgt...
    izin sedot sob...hehehe

    BalasHapus
  17. mantap blognya nih \m/
    keep spirit...

    BalasHapus
  18. @Beben Kobentrmakasih ats sport nya kang,,,blog akang lbh bgus...

    BalasHapus
  19. info bagus nih, cari tutorial di tympanus.net/codrops/ Disitu banyak tutorial bagus, biar di blog ini gak sama tutorX sama blog lain, cari aja referensi di link itu,

    BalasHapus
  20. wah keren ya bro , ijin praktek ^_^

    BalasHapus
  21. @Mbah Qopeteeee ada si mbh ne...slahkan mbh..:D

    BalasHapus
  22. sebenernya bagus sih buat di praktekin di blog, tapi takut jadi beban di blog ane. heheheheee
    nice info dech.

    BalasHapus
  23. @Miftachudin main lagi kesini ah sambil nungguin next postnya,,

    BalasHapus
  24. @BLOGCUNAYZiya gan,,,sdang dlam perjalanan...:D

    BalasHapus
  25. kereeennn...btw salam kenal ya sob

    BalasHapus
  26. Terima kasih sahabat atas berbagi ilmunya nih sahabat

    BalasHapus
  27. Gan maf oot, aq bngung nih buat SETIAP POSTING berbeda tampilannya.?

    Pkek kode tag inih (b:if cond='data:blog.pageType == "item") atw pkek tag ini (b:if cond='data:blog.url == "item") Please ya kmu jawab di blog aq. Aq ssngat menghargai bantuan kmu.........?

    BalasHapus
  28. @PieBieinfo mnarik gan,,5f sya bkan bemaksud mnggurui/sok pnter gan ,,saya pun msh blajar,,,koding yang agan tnyakan td stau saya untuk mnampilkan hanya judul post di halaman dpan...
    cranya di stiap post agn msukan tag/code CSS body{Backgroundsesuka agan}..smga mmbntu...salam,,

    BalasHapus
  29. Heheh mksih ya gan atas infonya, Aq sngat berterima kasih bnget ama kmu.........?

    Cob kmu liat hasilnya deh di Bahaya Lisan - Kebohongan

    BalasHapus
  30. @PieBieiya slamet y sob..truslh berkarya...

    BalasHapus
  31. Mas bro! gmana cara buat breadcrums kayak mas bro punya nech, share donk!

    BalasHapus
  32. @Ady Blinktu saya liat blog agan dah ada..???

    BalasHapus
  33. Assalamualaikum Bismillah Alhamdulillah | Ea mas, awalnya aku udah coba berkali-kali mesti gagal terus. Hehehehe akhirnya bisa juga. Oy mas gimana menurut kmu blog aq....? Di jwab di blog aq ya mas...? | Alhamdulillah Wassalamualaikum.

    BalasHapus
  34. @The 7Bloggersiya blognya dah bnyak kmajuan,,yooo smngat,,:D

    BalasHapus
  35. cakep bos, visit back ya kalau ngk repot he..he..he..

    BalasHapus

Dexto Share™ © 2011-2012 Redesain Miftachudin - Didukung Oleh Blogger

Pemberitahuan

Saat Ini Saya Juga Aktif Di Dextozine

Terimakasih