Indahnya Ngeblog - 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.
 |
| Indahnya Ngeblog di Batam Hari Ini, Esok & Nanti |
Berikut ini langkah-langkahnya :
- Login ke blogger dengan akun anda.
- Kemudian klik rancangan
- 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}
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'/>
<script type="text/javascript">
$(document).ready(function(){
$(".trigger").click(function(){
$(".panel").toggle("fast");
$(this).toggleClass("active");
return false;
});
});
</script>
6. 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcfxZe6OkAOlFeMXsih_hLFE-1GqUmC9p3-nwUvQVSq8Ebo06B3sENc_MBDMXmo7t37QlMvXpMaXPu8WDYYwRYfAqDQl8JbEEouB7_393RFPvVYrAloaD-ez42yijPZvqyRauBGr9P5IM/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>
8. 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. teman-teman juga ingin langsung ke sumbernya?,
