skip to main | skip to sidebar

INFOIKI

tutorial untuk mengedit, mempercantik,membuat, dan memperindah blog template seo gratis

  • Home
  • Template
  • Ebook
  • Kata Mutiara
  • Tips Blog
  • Video
  • Umum
 

Dapatkan Update!

Dapatkan artikel terbaru dari INFOIKI yang akan dikirim ke email anda secara gratis!
Browse » Home » Ngeblog » Membuat Vertical Sliding Info Panel Dengan JQuery

Membuat Vertical Sliding Info Panel Dengan JQuery

     Halo, selamat malam! Posting kali ini, saya ingin share tentang Membuat Vertical Sliding Info Panel dengan jQuery. Kalau menurut saya, widget satu ini tergolong keren. Berikut screenshotnya :

LIVE DEMO
                                                     
PROSES PEMBUATAN WIDGET
1. Login blog -> Template.
2. Edit HTML -> Lanjutkan.
3. Centang Expand Template Widget.
5. Cari kode ]]></b:skin>
6. Letakan kode css dibawah ini, tepat diatas kode pada nomor 5 tadi.
.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/AVvXsEhCkbNc1DTQ_1xsYf_OkUl7kQqms1aSdeBD_GHjh-OQApBkJycgdMd-zEEacvrED_cPSTd6NXJscLJ8Ecnp4y8_dYg2jwxPr9k22SaoeXwLRjxxF0FfSu55cVM7OJ0lOS8c6nsQc2nzYmQ/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/AVvXsEhCkbNc1DTQ_1xsYf_OkUl7kQqms1aSdeBD_GHjh-OQApBkJycgdMd-zEEacvrED_cPSTd6NXJscLJ8Ecnp4y8_dYg2jwxPr9k22SaoeXwLRjxxF0FfSu55cVM7OJ0lOS8c6nsQc2nzYmQ/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/AVvXsEjblup2xE-oKB3AgKLnGp-Kg90Bi1pxsx0vdbDe0gtYsBKFg7jqIo3zaWSN82BcNws5ll_gBabhCglenfYLyZ8SCoPSsuHh6KhGKRQC45sW-gMIGY9DINrOAtxioQJ4VaqcCX_1QBu72sI/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}

7. Cari kode </head>.
8. Letakkan script berikut tepat diatasnya.

<script src='http://k-blogger.googlecode.com/files/jquery-1.3.2.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function(){
$(&quot;.trigger&quot;).click(function(){
$(&quot;.panel&quot;).toggle(&quot;fast&quot;);
$(this).toggleClass(&quot;active&quot;);
return false;
});
});
</script>


9. Klik Save Template, lalu Klik tutup.
10. Klik Tata letak -> Add Widget -> HTML/Java script.
11. Copas kode berikut :

<div class='panel'>
<center><font size="1"><a href="http://infoiki.blogspot.com/2012/08/membuat-vertical-sliding-info-panel.html"target=_blank"><div style="color: #444444;">
<span >make own</span></div></a></font></center>
<h3>KATA SAMBUTAN</h3>
<p style="text-align:justify">Salam Blogger | KATA - KATA YANG INGIN ANDA SAMPAIKAN
<br/>
<a title="NAMA ANDA DISINI" target="_blank" href="http://www.blogger.com/profile/08113139411481282535">Selengkapnya tentang saya</a></p>
<h3>Author..</h3>
<img width="73px" height="73px" alt="Nama Anda Disini" src="URL Foto profile anda disini" />
<p>Nama anda disini
<br/>
Caritakan Tentang anda</p>
<div class='columns'>
<div class='colleft'>
<h3>FIND ME ON..</h3>
<a href="feeds/posts/default"><img alt="RSS" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8hBFKwD59TxOLELUy3TsP3aSrQYp8smcCo0XW29mocKpXtmVPdNdgfjwPvEyjltpUJpSYbs8GwGOYUgVJWKQZ-BnyErWPb6-_y4HFxJrVU14QK5e-RE8I1bwx_iTwX18T6ePvvO5Uts8/s320/r.png" /></a>
<a href="http://www.mybloglog.com/buzz/members/08113139411481282535/"><img alt="mybloglog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9eivEI8sGS_J3vj2mhsMuOrRICCjDTfRwMgbMFGrnubKaxy1kiKmrJNhyphenhyphenCUZk0eq4Pq0it40LjNnvOiznJ-oXoZJH91Y_PqTRybHx9tBsRltCVFAvWEHmYxuF_jiK7PyuRvT1SRiBbnA/s320/l.png" /></a>
<a href="https://twitter.com/#!/yustin_annisa"><img alt="twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2HHqkjDppeJ0vYfnfzaQysu0_hYqwIht-kFfKNrsjYLkdhfK7EkEjQiYvDSVt_UDO1FJO3IJ3qwctVYVJcgjti2Kspoe2vYYAN1TZgg6B2I8VvbvMQRRqLDUeXWOWCgxWZv4jMUiYbII/s320/t.png" /></a>
<a href="http://www.facebook.com/yustin.annisa"><img alt="facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfv6017j3dPQyT3egz2Pcj6JxUUFnIUq57KCEhBx1GgJaS5sEfeMxuanL11kJ_qt5-uQqpvwiNizOzsfAUz3vsHlxi82ArTku-hYuCskrMjoHRd3gnn4r3T3dVWEu_gjwyFTvlbmeJ7FY/s320/f.png" /></a>
<a href="http://infoiki.blogspot.com"><img alt="HOME" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiijVDBUUyqAZ_4x7rchiAxNp9aLCrawI0QQD8eyurY8sVJeiN_KsEOQLe36bT8JWFUX1DHGj3cTTVdr9PSWl3Mg3-lAUT_eaK3cmmyWH9El64B8IRGC-PcwAm6_OAgiOcKnargsk2TQDU/s320/b.png" /></a>
</div>
</div>
</div>
<a class='trigger' href='#'>Info</a>


12. Klik Save dan Lihat hasilnya.

Keterangan,,...
a). Kode yang saya beri Blok kuning, ganti dengan ID profile anda.
b). Kode yang saya beri warna hijau, ganti dengan alamat jejaring social/blog anda.

          GOOD LUCK!! :)

Posted By Efendy bloggers | -

Comments :

0 komentar to “ Membuat Vertical Sliding Info Panel Dengan JQuery ”

Posting Komentar

Aturan Berkomentar
1. No spam!
2. No live link!
3. No maho :D

←  Posting Lebih Baru Posting Lama  → Beranda
Langganan: Posting Komentar ( Atom )

Statistik

Statistic Blog:
PageRank Checking Icon
SEO Reports for infoiki.blogspot.com

Pencarian

Kategori

  • Advertiser
  • Diet
  • Ebook gratis
  • Facebook
  • Handphone
  • Jasa Like
  • Kata Kata
  • Komputer
  • Kontes SEO
  • Ngeblog
  • Review‎
  • Software
  • Template
  • tips trik ngeblog
  • Umum
  • Video

Terpopuler

  • Software Hack Wifi GRATIS [WzCook.exe]
  • Kumpulan template blog Imut dan cantik (Blogspot)
  • Download template blog Anime keren
  • Cara paling ampuh membuka situs yang diblokir telkom
  • 3 langkah mudah membuat banner sendiri
  • Software SMS gratis lewat pc/komput [free download]
  • Cara menghapus virus dengan cara manual menggunakan CMD
  • 7 Cara mudah menghafal script tanpa hafalan
  • tips Cara merawat ayam serama
  • Trik mudah membuat header blog bergerak (Gif)

Pengikut

Diberdayakan oleh Blogger.
.

Send Quick Massage

Nama

Email *

Pesan *

 
INFOIKI
Template by Infoiki | Powered by Blogger