Cara Membuat Vertical Sliding Info Panel With jQuery
Vertical Sliding Info Panel With Jquery.
kali ini saya akan meberikan cara memasang widget "Vertical Sliding Info Panel" Widget ini menempel di atas kanan blog, dan tidak terlalu berat buat di pake di blog kalian.
Jika kalian berminat memasang widget ini di blog agan ! silahkan ikuti tutor yang akan saya jelaskan!!!
1. Seperti biasa masuk ke blogger
2. Klik rancangan pada blog yang akan kalian taruh widget ini
3. Beri tanda centang "Expand Template Widget"
4. Tekan Ctrl+F (untuk mempermudah pencarian) dan cari kode ]]></b:skin>
5. Jika sudah ketemu, letakkan kode di bawah ini tepat di atas 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 #666;width:320px;height:auto;filter:alpha(opacity=85);-moz-opacity:0.85;opacity:0.85;display:none;padding:10px 30px 30px 100px}.panel p{color:#fff;margin:0 0 15px;padding:0}
.panel a,.panel a:visited{color:#9FC54E;text-decoration:none;margin:0;padding:0}
.panel a:hover,.panel a:visited:hover{color:#fff;text-decoration:none;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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqO4G3mtDeOQfYeMJXfcyEPNzhSStxV8p94gHIrbFyr3uCbgoAB7dpH14s-nx6mUegTODwiHcwJhyphenhyphen9BSL3BybRdBWuaZWZ6P-KVLe63CNvWOzBHwWvHhVQZbafmFeAoIkG7aJ3X574g8U/s320/plus.png) 85% 55% no-repeat;border:1px solid #fff;-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:10px 35px 10px 10px}
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqO4G3mtDeOQfYeMJXfcyEPNzhSStxV8p94gHIrbFyr3uCbgoAB7dpH14s-nx6mUegTODwiHcwJhyphenhyphen9BSL3BybRdBWuaZWZ6P-KVLe63CNvWOzBHwWvHhVQZbafmFeAoIkG7aJ3X574g8U/s320/plus.png) 85% 55% no-repeat;border:1px solid #fff;-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:10px 40px 10px 10px}
a.active.trigger{background:#222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLOHfsC74y7xgXC64-J2TZbguFHkkbbDcd9etarV9bk4TUaM7nS7mNNyQ2FYrtkl_-0evqqGuk8UI4HraVlhnHm1ZNffVGigQlOvx-1AGMEe3tk4sX7gSMIsxbA5OpOF3ebQye4iQEiSA/s320/minus.png) 85% 55% no-repeat}
.columns{clear:both;width:330px;line-height:22px;padding:0 0 20px}
a:focus{outline:none}
.panel img{border:1px solid #666;float:right;margin:3px 0px 6px 5px;padding:2px}
.panel h3{border-bottom:1px solid #666;margin-bottom:5px;padding-bottom:3px;text-align:left;clear:both;color:#fff;font-size:13px;font-weight:700}
.columns ul,.columns ul li{list-style-type:none;margin:0;padding:0}
6. Kalau sudah kalian cari lagi kode </head> dan taruh kode JavaScript di bawah ini, tepat diatas code </head>
<script src='http://k-blogger.googlecode.com/files/jquery-1.3.2.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(".trigger").click(function(){
$(".panel").toggle("fast");
$(this).toggleClass("active");
return false;
});
});
</script>
- Code yang berwarna merah itu adalah code JQUERY
- Bila template kalian udah menggunakan code JQUERY tinggal remove aja code yang merah
7. Save/Simpan template
8. Ini yang terakhir agar menu Info panel-nya bisa nongol di blog agan,
Masuk ke :
8. Ini yang terakhir agar menu Info panel-nya bisa nongol di blog agan,
Masuk ke :
- Tata Letak/Rancangan
- Add new widget
- Tambah Gadget
- Pilih HTML/Javascript
Kemudian Masukan kode dibawah ini:
<div class='panel'>
<center><font size="1"><a href="http://kode-blogger.blogspot.com/2011/05/membuat-vertical-sliding-info-panel.html"target=_blank"><div style="color: #444444;">
<span >make own</span></div></a></font></center>
<h3>LUNATIC INVADES</h3>
<p style="text-align:justify">Salam Blogger
<br/>
<a title="azew pratama" target="_blank" href="http://lunatic-84art.blogspot.com/">Selengkapnya tentang saya</a></p>
<h3>Sekilas tentang penulis</h3>
<img width="73px" height="90px" alt="azew pratama" src="http://3.bp.blogspot.com/-HX5MTuGDUxU/T4ikTKHWLTI/AAAAAAAAAaY/7ZpKisOqdsE/s1600/mk.png" />
Nama lengkap saya azew pratamadari kecil saya hoby menggambar mungkin akan menjadi cita-cita saya kelak nanti..!!<div class='columns'>
<div class='colleft'>
<h3>Social Stuff</h3>
<li><a href='#' title='twitter'>Twitter</a>
<li><a href='#' title='Facebook'>Facebook</a>
<li><a href='#' title='Youtube'>Youtube</a>
<li><a href='#' title='Myspace'>Myspace</a>
</li></li></li></li></div>
</div>
</div>
<a class='trigger' href='#'>Info</a>
9. Lalu Save widget ini dan coba kalian lihat hasilnya.
Selamat mencoba semoga berhasil,
Keterangan : Warna yang terdapat di atas bisa kalian ubah sesuai kemauan kalian dan yang saya kasih tanda hitam tebal adalah foto. dan yang terakhir ( # ) itu adalah code SOCIAL link kalian.
- Bila terjadi kegagalan dalam pemasangan WIDGET di atas harap kasih komentar di bawah ini.
>
Show
0 Comments
prev
next
