Cara Membuat Vertical Sliding Info Panel With jQuer

Hi.. friends Memenuhi permintaan Teman  Blogger ichsanx.blogspot.com mengenai info profil slide panel sebelah kanan, contoh dari bisa dilihat contoh pada blog ichsanx, Artikel ini diadaptasi dari spyrestudios.com dengan judul asli "Vertical Sliding Info Panel With jQuery yang kemudian diberikan sedikit sentuhan oleh saya sehingga menjadi seperti yang sekarang digunakan. Artikel kali ini masih berbasis jQuery seperti efek-efek yang lainnya, makanya bagi teman-teman blogger yang mengikuti artikel demi artikel mungkin akan menemukan teknik terbaik pemasangan jQuery Pada tips-n-trick kali ini semua informasi yang dimasukan masih serba manual, hal ini agar mudah dipahami bagaimana kerja dari sliding panel, sehingga kedepannya kita hanya perlu melakukan modifikasi pada bagian isi dari sliding panel

Oke langsung saja berikut ini :
Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Klik "Expand Template Widget"
Langkah 4
Cari kode di bawah ini:
]]></skin>
Langkah 5
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 4:

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

 
Langkah 6
Cari kode dibawah ini:

</head>

Langkah 7
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 6:

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

Langkah 8
Cari kode dibawah ini: 

</body>

Langkah 9
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 8: 

<div class='panel'>
<h3>Selamat Datang Di Situs IchsanX</h3>


<p style='text-align:justify'>Selamat datang di Situs saya, semoga saja kalian bisa mendapatkan apa yang kalian butuhkan disitus saya ini. Terima kasih Telah Berkunjung Di Situs saya,apabila berkenan silahkan berkomentar dan follow situs saya,mari kita saling berbagi ilmu tentang apa saja...
</p>
<h3>Sekilas tentang penulis</h3>
<img height='73px' src='http://i1221.photobucket.com/albums/dd461/IchsanX/Ichsan%20semua/10933_1089494616059_1787304271_176673_2717575_n.jpg' width='73px'/>
<p>Nama saya Ichsan Saputra,saya seorang Musisi dan seorang Mahsiswa S1 Teknik Informatika Di Ibukota Jakarta .</p>
<div style='clear:both;'/>
<div class='columns'>
<div class='colleft'>
<h3>Navigasi</h3>
<ul>
<li><a href='http://ichsanx.co.cc/' 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/#!/ichsap' title='twitter'>Twitter</a></li>
<li><a href='http://facebook.com/ichsan.of.bomberx' title='facebook'>Facebook</a></li>
<li><a href='http://facebook.com/BOMBERX.Band' title='Silahkan di Like'>Band Gw</a></li>


<li><a href='http://plurk.com/ichsanx/invite' title='plurk'>My Plurk </a></li>
<li><a href='http://www.ichsanx.blogspot.com/' title='Blog IchsanX'>My Blog </a></li>
</ul>
</div>
</div>
<div style='clear:both;'/>
</div>
<a class='trigger' href='#'>IchsanX</a>

Catatan: script langkah 9,tinggal diedit sesuai dengan blog anda

Langkah 10
Simpan Template dan Preview blog...

Jika anda ingin mengetahui secara lengkap tentang tutorial ini dan bagaimana penerapan dari kode-kode diatas silahkan download DISINI.

Artikel Terkait: