Cara Membuat Info Panel dengan Jquery

Manfaat info panel adalah untuk memberikan informasi pemilik dan penulis blog.

Yang ingin saya share dari hasil googling adalah info panel dengan efek jquery.

Yuk langsung ke caranya:

1. Login blog

2. Template

3. Edit html dan centang expand widget template

4. Tempatkan kode berikut di atas ]]></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}

5. Kemudian letakkan kode berikut diatas </head>

<script  src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js'  type='text/javascript'/>

jika sobat sudah mempunyai script jquery ,sobat dapat mengabaikan langkah nomor 5.

6. Letakkan kode berikut dibawah langkah no.5

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

7. Selanjutnya letakkan kode berikut diatas </body>

 <div class='panel'>
<h3>Welcome to our blog</h3>
<p style='text-align:justify'>Selamat datang, selamat menyimak dan selamat berdownload ria di blog kita yang minimalis ini.
Karena kita suka googling, browsing n download game, kita ingin mengabadikannya dengan share ke teman2 smua agar apa yang kita ketahui juga bermanfaat buat pembaca blog cybermig.<a href='http://www.cybermig.com/' title='creating website'>Ke TKP gan...</a></p>
<h3>Tentang kita...</h3>
<img height='73px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4KPUEAH1ESfyoo4EPn4DEX4Jy9ZYLjgfNLyPu6FwN33IAFo__BJ3t-Wt-W2Fc0jW51b4vyFF97sVq95R7eIGHfh8I5A6VtUcwXpJy4BVPsxolRrCC0s7cYipk2j9Aofj2Wa8YZcEXrk4/s1600/DSC01284.JPG' width='73px'/>
<p>1 kalimat tentang kita. Kita 2 insan yang saling mencintai..hihi</p>
<div style='clear:both;'/>
<div class='columns'>
<div class='colleft'>
<h3>Ash</h3>
<ul>
<li><a href='http://www.facebook.com/ash.shassine' title='facebook'>Facebook</a></li>
<li><a href='#' title='about'>About</a></li>
<li><a href='#' title='contact'>ash@cybermig.coml</a></li>
</ul>
</div>
<div class='colright'>
<h3>Arthur</h3>
<ul>
<li><a href='http://www.facebook.com/surya.minimoys' title='Facebook'>Facebook</a></li>
<li><a href='https://plus.google.com/u/0/115146411053813483519/posts' title='About Me'>About Me</a></li>
<li><a href='#' title='Gmail'>arthur@cybermig.com</a></li>
</ul>
</div>
</div>
<div style='clear:both;'/>
</div>
<a class='trigger' href='#'>About</a>

tulis info tentang sobat pada kode diatas,

kode berwarna merah seperti diatas contohnya yang musti di ganti.

8. Simpan template dan selesai.

Demikian tutorial Cara Membuat Info Panel dengan Jquery.

Selamat mencoba dan semoga bermanfaat.

Socialize It →:

Tweet

Artikel terkait Lainnya