Vertical Sliding Info Panel With jQuery

Sedikit Ilmu Yang Kita Miliki Wajib Kita Amalkan...

Tadi malam sedang jalan-jalan di halaman Om Google Eh ketemu Tutorial Blog yang sangat menarik dan sangat berguna juga buat dava ya mudah-mudahan Tutorial ini sangat berguna juga buat Teman2 bloger yang lainnya.Nah tutorial yang akan dava kasihkan adalah Vertical Sliding Info Panel With jQuery. Ups ada yang lupa tutorial ini dava dapat dari bang Oktri ,...
Dari pada pusing dan berbelit belit kita langsung menuju TKP za yuu,..
seperti biasa kita buka akun Blog Kita, lalu masuk Dasbor d lanjut ke Edit HTML jangan lupa juga Expand Templat Widget, lalu Cari Kode ]]></b:skin> kalo sudah ketemu letakan kode css di bawah ini di atas ]]></b:skin>

.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}

Nah Selanjutnya kita cari lgi dech </head>
lalu masukan script di bawah ini :

Langkah selanjutnya cari kode </body>
Kalo sudah ketemu copy Kan Scrief Di bawah ini di atasnya :

<div class='panel'>
<h3>Selamat Datang Di DavaStie BLOG</h3>

<p style='text-align:justify'>Selamat datang di Blog saya, semoga saja kalian bisa mendapatkan apa yang kalian butuhkan diblog saya ini. Terima kasih Telah Berkunjung Di Blog saya,apabila berkenan silahkan berkomentar dan follow blog saya,mari kita saling berbagi ilmu tentang apa saja...
</p>
<h3>Sekilas tentang penulis</h3>
<img height='73px' src='http://photos-b.ak.fbcdn.net/hphotos-ak-snc3/hs102.snc3/15017_124628910886970_100000195861006_316917_2683653_s.jpg' width='73px'/>
<p>Nama saya Siti Nurbaeti,saya seorang Pelajar SMA 1 Purwakarta yang saat ini saya baru masuk kelas 2 Jurusan Ips .</p>
<div style='clear:both;'/>
<div class='columns'>
<div class='colleft'>
<h3>Navigasi</h3>
<ul>
<li><a href='http://www.davastie.co.cc/' title='home'>Home</a></li>
<li><a href='http://www.davastie.co.cc/' title='about'>About</a></li>

<li><a href='http://picasaweb.google.com/108427962851884822495' title='Photoku'>Photoku</a></li>
<li><a href='http://www.davasiappatahhati.co.cc/search/label/Tutorial%20Blog' title='contact'>Tutorial</a></li>
<li><a href='http://www.davasiappatahhati.co.cc/search/label/kumpulan%20Tips' title='blog'>Kumpulan Tips</a></li>
</ul>
</div>
<div class='colright'>
<h3>Social Stuff</h3>
<ul>
<li><a href='http://www.davasiappatahhati.co.cc/search/label/Curhat' title='Curhat'>Curhat</a></li>
<li><a href='http://www.facebook.com/home.php?#!/profile.php?id=100000195861006' title='facebook'>Facebook</a></li>
<li><a href='http://friendster.com/ok3darmadi' title='friendster'>Friendster</a></li>

<li><a href='http://twitter.com/davastie' title='Twitter'>Twietter</a></li>
<li><a href='http://www.coercha.co.cc/' title='Inde'>Band Indie</a></li>
</ul>
</div>
</div>
<div style='clear:both;'/>
</div>
<a class='trigger' href='http://www.davastie.co.cc/'>Davastie</a>

Selesai dah tinggal Save template sesudah itu Liat hasilnya dech,..teman2 tinggal edit atau sesuain dengan blog teman-teman
Kalo teman2 mau Liat Demonya Disini