Cara Membuat Info Panel Slide Vertikal dengan jQuery

Cara Membuat Info Panel Slide Vertikal dengan jQuery - Pada kesempatan akli ini saya akan menuliskan cara membuat info panel slide vertikal, fungsi dari info panel adalah memberikan informasi yang berupa data atau catatan historis yang dicatat dan diarsipkan, penerangan , dan pemberitahuan kabar atau berita sesuatu.

Info Panel Slide Vertikal ini menggunakan kemasan animasi jQuery untuk memperindah tampilannya, info panel jQuery ini begitu simpel dan tidak memakan tempat cukup anda klik tombol info disebelah kiri atas maka akan mucul tampilan halaman info panel. Bagi anda yang tertarik untuk membuat Info Panel Slide Vertikal berikut ini tahapan-tahapannya :

1. Login keakun Blogger
2. Pilih Template » Klik Edit Html
3. Selanjutnya dengan menggunakan Ctrl+F anda cari kode ]]></b:skin>
4. Kemudian anda terapkan kode berikut sebelum ]]></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:390px;height:auto;filter:alpha(opacity=85);-moz-opacity:0.85;opacity:0.85;display:none;padding:30px 30px 30px 100px}
.panel p{font:normal Arial, Sans-Serif;color:#ccc;margin:0 0 15px;padding:0}
.panel a,.panel a:visited{font:normal Arial, Sans-Serif;color:#4BB3E4;text-decoration:none;border-bottom:1px solid #4BB3E4E;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:170px;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. Untuk tahapan selanjutnya anda cari kode </head> lalu anda copy kode dibawah ini kemudian anda terapkan sebelumnya.

Note :
Jika sebelumnya anda telah memasang script Jquery diatas, maka anda dapat meninggalkan langkah diatas.

6. Masih dalam tempat yang sama, terapkan kode Javascript berikut ini dibawah kode script jQuery tadi:

7. Tahapan selanjutnya anda cari kode </body> dan copykan kode dibawah ini diatasnya :

<div class='panel'>
<h3>Selamat Datang</h3>
<p style='text-align:justify'>Selamat datang di blog Aak,ini adalah catatan tentang mendandani Blog. Saya +Aak seorang sederhana yang belajar diwaktu senggang, ingin belajar dan terus belajar.<a href='http://aak-share.blogspot.com/2014/10/aak.html' title='creating website'>Baca Selengkapnya</a></p>
<h3>Sekilas tentang Aak</h3>
<img height='73px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzHAzXPJvfAvZfG30A033hcfleXwQV72Jf0PqHH5bwpGTQ2veJBIkbtxyDSk760KMh7ZpMDRb2zcUGIDgMc7NGOeDQ6OglTbRH24f4iD79zDAbWoIoJPFZs1lllsevb2wdytGNmJVzO6c/s1600/style+image.jpg' width='73px'/>
<p>Nama saya yosep yuswana, seorang yang sederhana yang ingin belajar blogger. Ini adalah Blog tempat saya untuk belajar dan bersenang-senang dengan Blog, keahlian saya dalam ngeblog dalam skala 1 hingga 10, saya menilai diri saya 1 (entah kapan bisa sampai 10)</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='Sitemap'>Sitemap</a></li>
<li><a href='#' title='contact'>Contact</a></li>
<li><a href='#' title='Portfolio'>Portfolio</a></li>
</ul>
</div>
<div class='colright'>
<h3>Social</h3>
<ul>
<a href='URL Tujuan' title='Judul'><img alt='sosial' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNzm5ni8iA6fHOTpC1BFGqXNAYUXvA-JOcuvm_z1D166DO9SqZvefT6ZSO5HEubyBqhJm-VA1KAmx8KLyLjhx_mwlyzJ_tfuelUcNt8vEDNKOCqGiFSkoYLTNYnaLdR29DSibEvdAJJZA/s1600/facebook-icon.png'/></a>
<a href='URL Tujuan' title='Judul'><img alt='sosial' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNmf-3Yjg-9ZvVGxbC8Sl1FUuIlCd0GKSdguqKr6rKQgdvmAnO7Eg7Y43kKpyjyuQf_OhSw25DC6mLqUVlAKwbt5UEd-TMUeVWWbd0IdMEgiugFWmDpKWvkwDUC2Tbk9JWjp-wKquJlAo/s1600/google-plus-icon.png'/></a>
<a href='URL Tujuan' title='Judul'><img alt='sosial' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGXTvCo8MOOthziL4Zaw_uih0LRiIQpWBAnWw1_7s9m4NAl9wrvu8-GeAbwKjDyJ0chSdlujxEHTmDGVQezffnh03tZMuyOzafOMKdbDFJ-8CctPwF5JB-Uwuyg8q-pnCAQkJIpgVZ114/s1600/twitter-icon.png'/></a>
</ul>
</div>
</div>
<div style='clear:both;'/>
</div>
<a class='trigger' href='#'>Info</a>

8. Tahapan terakhir simpan template anda.

Silahkan anda perhatikan tulisan pada kode diatas dan silahkan anda ganti dengan tulisan yang diinginkan.

Sekian dari saya Cara Membuat Info Panel Slide Vertikal dengan jQuery , semoga bermanfaat!!!