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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyRgassDPdFN3HIYWeFtsx5CdZ_mW5WQK7vUzhlpci2k7fsEQ3pubZGfyxYHdoGWnFvWOai4i7EsBEV1GOncHTrq4fuMqAt-_LcBOcPcNGFT2Eq2jvDrtaMe4cG30N8z6NFQANBsrnGq-j/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 Mantap nian postingan agan ..... comot dulu ya brooo hehehehehehe

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

    BalasHapus
  7. mantaps gan thanks sharingnya :D

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

    BalasHapus
  9. @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
  10. SOb link blog sudah terpasang silahkan di cek di halaman tukar banner??? thank sobbb

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

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

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

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

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

    BalasHapus
  16. 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
  17. wah keren ya bro , ijin praktek ^_^

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

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

    BalasHapus
  20. Terima kasih sahabat atas berbagi ilmunya nih sahabat

    BalasHapus
  21. 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
  22. @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
  23. Heheh mksih ya gan atas infonya, Aq sngat berterima kasih bnget ama kmu.........?

    Cob kmu liat hasilnya deh di Bahaya Lisan - Kebohongan

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

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

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

    BalasHapus
  27. 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
  28. @The 7Bloggersiya blognya dah bnyak kmajuan,,yooo smngat,,:D

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

    BalasHapus

Dexto Share™ © 2022

Pemberitahuan

Saat Ini Saya Juga Aktif Di Dextozine

Terimakasih