Kamis, 07 Juni 2012
,kali ini saya akan share engenai info profil slide panel sebelah kanan, contohnya bisa dilihat di blog saya. Tutorial ini diadaptasi dari spyrestudios.com dengan judul asli "Vertical Sliding Info Panel With jQuery" yang kemudian diberikan sedikit sentuhan oleh saya sehingga menjadi seperti yang sekarang saya digunakan.
1. Login ke blogger kamu
2. Pilih Template >> Edit HTML
3. Centang "Expand Template Widget"
4. Cari kode ]]></skin> dengan CTRL + F
5. Kemudian copy pastekan kode dibawah ini tepat diatas kode ]]></skin>
6. Kemudian cari kode </head>.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}
7. Lalu copy pastekan kode dibawah ini tepat diatas kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>8. Kemudian cari kode </body>
<script type="text/javascript">
$(document).ready(function(){
$(".trigger").click(function(){
$(".panel").toggle("fast");
$(this).toggleClass("active");
return false;
});
});
</script>
9. Lalu copy pastekan kode dibawah ini diatas kode </body>
<div class='panel'>Kode script yang langkah nomor 9 tinggal kamu ganti sesuai blog kamu.
<h3>WeLcome To My Blog :)</h3>
<p color='lime' style='text-align:justify'>Selamat datang di blog saya, semoga saja kalian bisa mendapatkan apa yang kalian butuhkan di blog saya ini. Dan terima kasih juga sudah berkunjung di blog saya, jangan lupa di komentar dan di follow blog saya. Terima kasih..
</p>
<h3>Sekilas Tentang Saya</h3>
<img height='73px' src='URL Gambar' width='73px'/>
<p>Nama saya David. Saya beragama Kristen Protestan hehee. Saya masih kuliah semester 4 jurusan Komputer Akuntansi di kampus Medan. Saya adalah pemula untuk membuat blog dan saya memasuki dunia blogger pada September tahun lalu.</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='# '>Edit</a></li>
</ul>
</div>
<div class='colright'>
<h3>Social Stuff</h3>
<ul>
<li><a href='#' title='Facebook'>Facebook</a></li>
</ul>
</div>
</div>
<div style='clear:both;'/>
</div>
<a class='trigger' href='#'>Info</a>
<< SELAMAT MENCOBA >>
