About Profile With Hover Effect

Widget About Profile Blogger For Sidebar Page

About Profile With Hover Effect - Seperti janji saya kemarin yang akan membuat sebuah widget keren untuk halaman sidebar ( Sidebar Page ), yang tertunda karena harus mendahulukan tutorial tentang Cara Membuat Gallery Gambar Dengan 2 Model. Kesempatan kali ini About Profile With Hover Effect akan menghias tampilan halaman sidebar blog Anda dengan widget profile efek hover yang keren seperti gambar berikut:

Pekerjaannya cukup mudah, seperti Membuat Menu Blogger Dengan Target Gambar pada tutorial sebelumnya. Pada widget ini semua fungsi gerak saya gunakan dengan perintah HOVER (Sentuhan Panah Mouse), sedangkan untuk tampilan default, saya desain semirip mungkin dengan tampilan widget google plus yang pada umumnya menampilkan gambar profile dengan teks yang sama "Tentang Saya". Disini sudah saya siapkan bahan-bahannya secara komplit, sekarang saatnya mengolah bahan tersebut untuk membuat sebuah widget about profile yang cantik dengan racikan kode CSS seperti 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>

Dan Hasilnya:




DEMO SHOW



Kita desain sedikit tampilan slide gambarnya dengan perintah JavaScript-toggle, Anda bisa mengatur kelembutan efek slidenya. Cukup ubah nilai slideToggle(500) sesuai keinginan sampai ketemu perpindahan slide yang sangat lembut menurut Anda dengan script berikut:

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

Bentuk tampilan dengan efek hover yang lembut sudah selesai Anda lakukan, tinggal mengubah struktur letak teks link-menu yang ingin Anda tampilkan pada HTML berikut:

<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..!>

Kemajuan dan popularitas blog ditunjang oleh hadirnya pengunjung, namun blog juga butuh tampilan yang cantik dengan pemberian widget About Profile With Hover Effect seperti ini, semata-mata hanya demi kepuasan pengunjung, so..!! Anda mau mencoba..?