Sabtu, 14 April 2012

Memasang Info Panel di Blog/Web

Memasang Info Panel di Blog/WebHai sobat gimana kabarnya?? semoga baik baik aja!! yah permisi share ilmu nih sehubungan dengan adanya permintaan dari salah satu sobat yang telah menanyakan cara memasang panel info pada blog. Kalo masih ada yang gak ngerti tentang panel info itu seperti apa sobat bisa lihat screenshot di bawah ini >>

 Terus kalo sobat tertarik, bisa ikutan pasang info panel itu. Yuk menyimak caranya:
  1. Login ke blogger dengan akun sobat.
  2. Kemudian klik rancangan
  3. Biar lebih aman download lengkap template sobat
  4. Setelah itu pilih Edit HTML jangan lupa centang "Expand Template Widget"
  5. 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}
  6. 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'/> 
    Namun jika sobat telah memasang script Jquery sebelumnya anda dapat meninggalkan langkah diatas.
  7. Masukan kode Javascript berikut dibawah script jQuery tadi:
  8. <script type="text/javascript">  $(document).ready(function(){  $(".trigger").click(function(){  $(".panel").toggle("fast");  $(this).toggleClass("active");  return false;  });  });  </script>
  9. Langkah terakhir cari lagi kode berikut </body> setelah itu copas kode dibawah ini dan taruh diatasnya.
    <div class='panel'> <h3>Selamat Datang</h3> <p style='text-align:justify'>Selamat datang di Arimjie Blog, saya harap anda senang berada diblog sederhana ini. Blog ini saya tulis apa adanya, ada yang muncul dari hasil pemikiran sendiri ada juga dari materi kuliah, hasil copas (tentunya diedit dulu..hehe.. <a href='http://Arimjie.blogspot.com/' title='arimjie blog'>Selengkapnya tentang blog ini</a></p> <h3>Sekilas tentang Arimjie Blog</h3> <img height='73px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgETtEZC3U70rpd1jianFvJEqTlTjnB9IS2PRxowoB3_gFncNPD1NcCYW0b_zgo6mpC1vqWka2wFF1PT9kJqzt4j-lQ09YlgwXBfZlyi9dYl08WZu2-OXKJ9ty5cvswnxkEAmVYWilhKQVF/h120/icon-kecil.png' width='73px'/> <p style='text-align:justify'>Logo di samping itu punya makna tersendiri buat saya, dan saya jadikan logo dari blog ini. Ceritanya panjang yang jelasnya berhubungan sama seseorang ..:) Oppss.. Nama lengkap saya Abd.Karim biasanya disapa Arim ato Aim saya membuat blog ini karena ingin berbagi ma teman-teman, sekaligus eksis di dunia blogger and dunia maya tentunya :p</p> <div style='clear:both;'/> <div class='columns'> <div class='colleft'> <h3>Navigasi</h3> <ul> <li><a href='http://arimjie.blogspot.com/' title='home'>Home</a></li> <li><a href='http://arimjie.blogspot.com/search/label/Daftar%20Isi' title='portfolio'>Daftar Isi</a></li> </ul> </div> <div class='colright'> <h3>Social Stuff</h3> <ul> <li><a href='http://twitter.com/#!/ariemjie' title='Twitter'>Twitter</a></li> <li><a href='https://plus.google.com/116347522496901295356' title='About Me'>About Me</a></li> <li><a href='mailto:arimjie@gmail.com' title='Gmail'>Gmail</a></li> </ul> </div> </div> <div style='clear:both;'/> </div> <a class='trigger' href='#'>Info</a>
  10. Terakhir Save Template anda, dan lihat hasilnya Tentu sobat 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. Kalo ada yang kurang jelas silahkan sobat tinggalkan pesan..!!

    Ditulis Oleh : arimjie blog ~Arimjie Blog~ share about what I know

    icon-kecil Artikel Memasang Info Panel di Blog/Web ini diposting oleh arimjie blog pada hari Sabtu, 14 April 2012. Anda bisa menemukan artikel Memasang Info Panel di Blog/Web ini dengan url http://arimjie.blogspot.com/2012/04/memasang-info-panel.html, Anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Memasang Info Panel di Blog/Web ini sangat bermanfaat, namun jangan lupa untuk meletakkan link Memasang Info Panel di Blog/Web sebagai sumbernya.

    ..:: Terimakasih::..

    Artikel Terkait Lainnya Seputar:



    9 comments:

    1. Mantap sob, ini bisa buat blog jadi kelihatan rapi dan kemas sehingga membuat para pengunjung juga betah berlama-lama bukan cuma itu style ini juga membuat blog kita seperti web/blog profesional... saya akan coba diblog saya yang satunya yang khusus untuk percobaan. maklum masih newbie takut salah dalam mengedit HTML/javascript

      BalasHapus
      Balasan
      1. wah silahkan dicoba sob, dan kalau ada kesulitan silahkan didiskusikan di sini..!!
        kalau takut salah dalam ngedit HTML nya sobat bisa download full templatenya dulu.. biar bisa direstore nantinya ketika terjadi error..

        Hapus
    2. Di caoba di terapkan yah sob

      keren neh sob

      BalasHapus
    3. mksih infonya,,,

      oh ya,,,

      Laporan,,,,
      Anda mendapatkan Awards dari Blog "Info penting banget "

      cari aja Awards buat sobat di blog saya..!!!!

      cemungut ea...!!!!

      BalasHapus
    4. nice info gan.. ini nih yang saya sedang cari cari..terima kasih gan

      BalasHapus
    5. widget menarik... izin coba agan... >>

      BalasHapus
    6. Menarik sepertinya, tapi blog saya sudah terasa berat. Jika ditambah javasript lagi, pengunjung bisa lari ngacir.

      Nanti jika nemu template yg bagus, akan saya coba. Terima kasih sudah berbagi ilmu sob :)

      BalasHapus

    Mohon Berkomentarlah dengan Baik dan Sopan, tanpa harus memasang link hidup. Trims

     

    Selamat Datang

    Selamat datang di Arimjie Blog, saya harap anda senang berada diblog sederhana ini. Blog ini saya tulis apa adanya, ada yang muncul dari hasil pemikiran sendiri ada juga dari materi kuliah, hasil copas (tentunya diedit dulu..hehe..

    Sekilas tentang Arimjie Blog

    Nama lengkap saya Abd.Karim biasanya disapa Arim ato Aim saya membuat blog ini karena ingin berbagi ma teman-teman, sekaligus eksis di dunia blogger and dunia maya tentunya :p

    Navigasi

    Info