MEMBUAT PROFIL MUNCUL DARI KIRI BLOG / VERTIKAL SLIDING

Oke kawand kali ini saya akan memberi tahukan trik dan tips tentang bagai mana memodifikasi profil atau biodata di blog kita agar tampak lebih menarik.  "Vertical Sliding Info Panel With jQuery yang kemudian diberikan sedikit Modifikasi oleh saya sehingga menjadi seperti yang sekarang digunakan.Kali ini masih berbasis jQuery seperti efek-efek yang lainnya,
Oke langsung saja berikut ini :

CAUTION :

BACKUP TERLEBIH DAHULU DATA/ KODE HTML/JAVA SCRIPT  TAMPLATE BLOG ANDA KE NOTEPAD, AGAR JIKA TERJADI KESALAHAN BISA DI KEMBALIKAN SEMULA

1. Login ke Blogger
2. Masuk ke "Tata Letak - Edit HTML"
3. Klik "Expand Template Widget"
4. Cari kode di bawah ini:
           ]]></skin>
5. Masukan (copy paste) kode dibawah ini diatas kode pada langkah 4:

.panel {
position: fixed;
top: 50px;
left: 0;
display: none;
background: #000000;
border:1px solid #111111;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
width: 330px;
height: auto;
padding: 30px 30px 30px 30px;
filter: alpha(opacity=90);
opacity: .90;
}

.panel p{
margin: 0 0 15px 0;
padding: 0;
color: #cccccc;
}

.panel a, .panel a:visited{
margin: 0;
padding: 0;
color: #9FC54E;
text-decoration: none;
border-bottom: 1px solid #9FC54E;
}

.panel a:hover, .panel a:visited:hover{
margin: 0;
padding: 0;
color: #ffffff;
text-decoration: none;
border-bottom: 1px solid #ffffff;
}

a.trigger{
position: fixed;
text-decoration: none;
top: 10px; left: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px 40px 20px 15px;
font-weight: 700;
background:#333333 url(http://i732.photobucket.com/albums/ww323/satriya_photo/plus-1.png) 85% 55% no-repeat;
border:1px solid #00bfff;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
display: block;
}

a.trigger:hover{
position: fixed;
text-decoration: none;
top: 10px; left: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#00bfff;
padding: 20px 40px 20px 20px;
font-weight: 700;
background:#222222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9z-mq8IDHgXzVfaCySjmNu7gVmsUyTK05kJsbEg4TwQYDISsT1rjsgwppkJYLCOKAL4CwowsNX5Dep4fv9OFNKMLEcG33hmnXYm9qaMBN4Ub-O_OZN5MmnR7ivv_HORoiPV0tfYxmQSKd/s1600/plus.png) 85% 55% no-repeat;
border:1px solid #444444;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
display: block;
}

a.active.trigger {
background:#222222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKWVan5P3ovecOt4gdhk-0RTFy8qcGdVeaMlLIbW4UcN-F5wjPAap7L6JB1ov0S340Qwji8JBy14A7ZAjJGK-GqRa9ZbNQh5borbYtaEfbwfV0xNRhza_Iit4pnylpUlV4R4Hvtp7y80Kb/s1600/minus.png) 85% 55% no-repeat;
}

.columns{
clear: both;
width: 330px;
padding: 0 0 20px 0;
line-height: 22px;
}

.colleft{
float: left;
width: 130px;
line-height: 22px;
}

.colright{
float: right;
width: 130px;
line-height: 22px;
}

ul{
padding: 0;
margin: 0;
list-style-type: none;
}

ul li{
padding: 0;
margin: 0;
list-style-type: none;
}

hr{
background-color: #333333;
height: 1px;
}

6. MASUKAN kode jQuery JavaScript Library v1.3.2 dibawah kode ]]></b:skin>:

<!-- jQuery Call -->
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
<!-- End of jQuery Call -->

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

7.  Tambahkan kode dibawah ini pada bagian body ( diatas kode </body> )


<div class='panel'>
<h3>Selamat Datang MAAFINGUE</h3>

<p style='text-align:justify'>Selamat datang di Blog saya, semoga saja kalian bisa mendapatkan apa yang kalian butuhkan diblog saya ini. Terima kasih Telah Berkunjung Di Blog saya,apa bila ada kekurangan saya mohon maaf. Marilah kita berbagi ilmu dan senyuman kepada siapa saja
</p>
<h3>Sekilas tentang penulis</h3>
<img height='73px' src='http://i732.photobucket.com/albums/ww323/satriya_photo/Image2250_collage.jpg' width='73px'/>
<p>Nama saya Satriya Tri Putra,saya seorang manusia biasa dan saya ........</p>
<div style='clear:both;'/>
<div class='columns'>
<div class='colleft'>
<h3>Navigasi</h3>
<ul>
<li><a href='http://www.maafingue.co.tv/' title='home'>Home</a></li>
<li><a href='link facebook anda' title='facebook'>Facebook</a></li>
<li><a href='link twitter anda' title='Twitter'>Twitter</a></li>
<li><a href='link friendster anda' title='Friendster'>Friendster</a></li>
<li><a href='link salingsapa anda' title='Salingsapa'>Salingsapa</a></li>
</ul>

</div>
<div class='colright'>


</div>
</div>
<div style='clear:both;'/>
</div>
<a class='trigger' href='#'>PROFIL</a>

isi warna merah dengan link gambar anda
isi tulisan berwarna biru dengan kata kata anda
isi tulisan berwarna ungu dengan link social networking anda
8. SIMPAN


kalo kurang paham kontak deh facebook gue ........!!!!!!!

Posted in: belajar ngeblog