Iklan 300 x 250

Random Post

Recent Post

 

Membuat Info Panel Slide Vertikal dengan jQuery

Text Resizer: Click for Resizer
Halo teman-teman semuanya masih semangatkan. Oh ya tutorial kali ini masih mengenai beragam animasi jQuery,dimana kali ini aku akan menjelaskan tentang Membuat Info Panel Slide Vertikal dengan jQuery. Sesuai dengan namanya yakni fungsinya ialah memberikan informasi tentang penulis kepada pembaca dengan sedikit kemasan animasi jQuery untuk memperindahnya. Ok untuk lebih lengkapnya langsung menuju ke tkp aja ya....









  • Log in dulu ke account blog anda
  • Pada dasbor klik rancangan
  • Pilih Edit HTML jangan lupa centang "Expand Template Widget"
  • Cari kode berikut ]]></b:skin>
  • Copy paste kode dibawah ini diatas kode ]]></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}

  • Setelah itu cari kode </head> setelah itu copas kode dibawah ini dan taruh diatasnya.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
Jika anda telah memasang script Jquery sebelumnya anda dapat meninggalkan langkah diatas.

  • Masukan kode Javascript berikut dibawah script jQuery tadi:
<script type="text/javascript">
$(document).ready(function(){
$(".trigger").click(function(){
$(".panel").toggle("fast");
$(this).toggleClass("active");
return false;
});
});
</script>

  • 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 blog nobinoku, saya harap anda senang berada diblog sederhana ini. dan berharap Anda sering datang kembali. Silahkan anda mencari hal-hal yang baru di blog saya ini<a href='http://nobinoku.blogspot.com/' title='Nobinoku Online'>Selengkapnya tentang Saya</a></p>

<h3>Sepintas Tentang Nobinoku</h3>
<img src='http://3.bp.blogspot.com/_nPsKqQ9Juww/TPdc6WK08yI/AAAAAAAAAIM/XwhMKmOqQDQ/S220/nobi.jpg' width='73px' height='73px'/>
<p>Nama saya Arga Anggriawan saya seorang yang ingin belajar blogger. Saya memulai blogger sejak usia 18 th dan baru aja koq memulai aktifitas blogging.</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://facebook.com/argabluesky' title='Facebook'>Facebook</a></li>
<li><a href='http://www.blogger.com/profile/00631051388707687274' title='About Me'>About Me</a></li>
<li><a href='mailto:welleh_welleeh@gmail.com' title='Gmail'>Gmail</a></li>
</ul>
</div>
</div>
<div style='clear:both;'/>
</div>
<a class='trigger' href='#'>Info</a>

  • Klik Simpan Selesai dan preview blog.


Artikel Terkait:

Nobi Noku Ditulis oleh : Arga Anggriawan | BLOG : This Is My Art
Dalam Judul : Membuat Info Panel Slide Vertikal dengan jQuery
Dalam Kategori :
Saya hanyalah blogger pemula yang ingin belajar dan berbagi dengan sahabat, Semua artikel blog ini bersumber dari pengalaman saya dari dunia blogger.

7 komentar:

sony's mengatakan... Reply Comment

blogwalking back and silahtuhrahmi bro :)

tukeran follow and link banner bro ?? di tunggu info lebih lanjutnya bro

sentraBLOG mengatakan... Reply Comment

mantap tutor nya...

follow sahabat

@ sony's & Abang suara : sudah sob

@ sentraBlog : thanks sobat

Salam persahabatan sob...udah langsung difollow balik ,,txs ya

udah di follow gan..txs...

hello sobat wah..... blog yang penuh aneka informasi.., salut dah

:a: :b: :c: :d: :e: :f: :g: :h: :i: :j: :k: :l: :m: :n: :o: :p: :q: :r: :s: :t: :u: :v: :w: :x: :y: :z:

Poskan Komentar

Bagi sobat-sobat silahkan comment disini, Insya Allah saya comment balik di blog anda.Blog ini Blog Do Follow,Trims atas kerja samanya

 
 
 

Temukan Kami Dalam FB

Sahabat Blogger

http://nobinoku.blogspot.com/

Tukeran Link Yuk..!! Silahkan copy kode di atas..!!
Saya akan segera link balik..!! Link & Banner Teman
powered by PRBbutton Powered by  MyPagerank.Net backlink Site Meter http://www.wikio.com Free Automatic Backlink
Check Google Page Rank
Cerita Seks Panas Dewasa 17Tahun
free counters
 
Copyright 2010 - 2011 © This Is My Art | Didukung Oleh : Blogger
Template Name : Evolution Magazine Template | Modification by : Argabluesky