Cara membuat About Profile With Hover Effect

Berikut ini akan diuraikan langkah-langkah cara membuat (About Profile With Hover Effect) semoga artikel kali ini bermanfaat untuk kita semua.
Adapun Cara membuat : (About Profile With Hover Effect) sebagai berikut :

1. Login ke akun blogger
2. Klik tema
3. Edit html

Masukan CSS di bawah ini :

<style type='text/css'>
.wrapper {
width:205px;margin:-80px auto;
background:rgba(20,20,20,.3);
padding:20px;border:1px solid #ccc;}

#list {
top:0;z-index:-10;
background:rgba(250,200,0,1);
width:3px;text-align:left;}

ul{list-style:none;width:200px;text-align:left;}
#list {margin:5px;display:none;}
#list a {
color:#999;paddingt:10px;
margin:0 0 0 -25px;
text-shadow:0px 0px 5px black;
-o-transition: all .3s;
-moz-transition: all .3s;
-webkit-transition: all .3s;
-ms-transition: all .3s;
transition: all .3s;}

#list a:hover {
color:rgba(250,200,0,1);
text-shadow:0px 0px 5px black;
font:bold italic medium Georgia;}

.top-menu a{
z-index:10;margin:0px;padding:2px;
line-height:40px;color:#999;
text-shadow:0px 0px 5px black;
border-top:2px solid rgba(250,200,0,1);
border-bottom:2px solid rgba(250,200,0,1);
font-size:20px;border-radius:5px;}

a:hover,focus{color:rgba(250,200,0,1);}
.pic{position:relative;}
img {
overflow:hidden;margin-top:10px;
border:1px solid #ccc;width:205px;}

img:hover ~ .text {opacity:1;}
img:hover {border:1px solid rgba(250,200,0,1);border-radius:5px;}
.text {
position:absolute;color:#ccc;
font-size:16px;margin:-3px auto;
transition:all 0.5s ease;
opacity:0;display:block;
-o-transition: all .3s;
-moz-transition: all .3s;
-webkit-transition: all .3s;
-ms-transition: all .3s;
transition: all .3s;}
</style>

Masukan Kode HTML di bawah ini :

<div class="wrapper">
 <div class="top-menu">
<a href="#" class="menu">TENTANG SAYA</a>
</div>
<div id="list">
<ul>
 <li><a href="#">Home</a></li>
 <li><a href="#">Daftar Isi</a></li>
 <li><a href="#">Go Backlink</a></li>
 <li><a href="#">Iklan</a></li>
 <li><a href="#">Sitemap</a></li>
</ul>
</div>
 <div class="pic">
<img alt="" src="URL-Gambar Anda.jpg">
 <span class="text">Design By. Devy Indriyani</span>
 </div>
</div><!..ending wrapper tag..!>

Kemudian Masukan Kode Javascript dibawah ini :

<script>
$(document).ready (function(){
$(".menu").mouseover(function(){
$("#list").slideToggle(500);
 $(".pic").slideToggle(500);
});
});
</script>

Setelah semua kode html, (style, atau b:skin, dan javascript sudah di pasang sesuai posisinya masing-masing langkah terahir adalah

simpan, atau klik pratinjau tema terlebih dahulu,. Namun untuk saran tiada salahnya langsung klik SIMPAN dan lihat hasilnya, jika terjadi eror,

dan kode tidak berfungsi dengan baik silahkan informasikan kami di kolom komentar, salam Team SAHAB BISNIS 77.

Demikian Cara membuat (About Profile With Hover Effect ) semoga bermanfaat terima kasih.