Terus kalo sobat tertarik, bisa ikutan pasang info panel itu. Yuk menyimak caranya:
- Login ke blogger dengan akun sobat.
- Kemudian klik rancangan
- Biar lebih aman download lengkap template sobat
- Setelah itu pilih Edit HTML jangan lupa centang "Expand Template Widget"
- 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} - 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. - Masukan kode Javascript berikut dibawah script jQuery tadi:
- 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>
- 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..!!
<script type="text/javascript"> $(document).ready(function(){ $(".trigger").click(function(){ $(".panel").toggle("fast"); $(this).toggleClass("active"); return false; }); }); </script>
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
BalasHapuswah silahkan dicoba sob, dan kalau ada kesulitan silahkan didiskusikan di sini..!!
Hapuskalau takut salah dalam ngedit HTML nya sobat bisa download full templatenya dulu.. biar bisa direstore nantinya ketika terjadi error..
Di caoba di terapkan yah sob
BalasHapuskeren neh sob
Silahkan di coba sob..!
Hapusmksih infonya,,,
BalasHapusoh ya,,,
Laporan,,,,
Anda mendapatkan Awards dari Blog "Info penting banget "
cari aja Awards buat sobat di blog saya..!!!!
cemungut ea...!!!!
nice info gan.. ini nih yang saya sedang cari cari..terima kasih gan
BalasHapuswidget menarik... izin coba agan... >>
BalasHapussilahkan sobat....
HapusMenarik sepertinya, tapi blog saya sudah terasa berat. Jika ditambah javasript lagi, pengunjung bisa lari ngacir.
BalasHapusNanti jika nemu template yg bagus, akan saya coba. Terima kasih sudah berbagi ilmu sob :)