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:


Widget profile image



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

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= About Profile With Hover Effect
Ditulis oleh= Devy Indriyani
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

59 komentar

  1. Balasan
    1. Salam malam juga Sobat q @Nazar salam kenal ya sob..? maaf saya yang jawab Mbak Devy nya kaya nya sudah Bubu tuh :d

      Hapus
    2. iya mas, semalam setelah meracik kode widget About Profile ini, 30 menit setelahnya, devy langsung tidur, habisnya nungguin mas saud, kagak nongol-nongol tuh, hehe..!!

      Hapus
    3. malam juga , mumpung mampir nya lagi malem2 hehe , :-d

      Hapus
  2. Salam malam Mbak Devy,, wuss makin cantik jadinya profil nya ya Mbak perlu saya coba nih

    BalasHapus
    Balasan
    1. silahkan dicoba kang saud :d
      maaf nich saya yang jawab cz mbak devy nya nyuruh saya untuk ngewakilin dia.

      Hapus
    2. makin cantik profilnya apa adminnya ne.... mas saud ne biasa saja lah.... cheer

      Hapus
    3. bohong mas Saud, devy gak pernah kok nyuruh kang jum, cume merintah doangk, hehe..!!

      Hapus
    4. sebenarnya sih yang dimaksud Devy tuh, sudah pasti attuh devy cantik, kan cewek, masa mas saud tega kalau bilang devy ganteng.?

      Hapus
    5. kalau devy ganteng perlu dipertanyakan itu :d

      Hapus
  3. Keren euy! Asli keren banget. Makasih sharingnya.
    Lam kenal ya

    BalasHapus
  4. klo yg ni hrus sy psang .... tpi itu brupa widget y? klo yg brupa page di buat spt itu bsa gk ? hhe

    BalasHapus
    Balasan
    1. ukuran dan mengambil ruang halaman sidebar yang umumnya kecil mas Fiu, jadi widget yang satu ini khusus buat tampilan sidebar page saja, kalau untuk halaman posting kan sudah pernah devy share,

      mas fiu lihat disini, tetapi tidak ada foto devy, gak apa-apa kan..?

      Cara Membuat Panel Slide Halaman Posting

      Hapus
    2. yah sy kn pengen yg ada fotonya devy ,,,, hehe

      Hapus
    3. devynya pulang mas, saya siapin kok foto mas saud, mau..!!!??

      Hapus
    4. ih gk mw ,,,, masa fot nya mas saud sih , @-) ,, kn mw nya ftonya devy ,,,,

      Hapus
  5. keren banget, izin copas kodenya mbak, terima kasih

    BalasHapus
  6. Teteh geulis pisan eu...

    BalasHapus
  7. oya mbak, desain mbak itu sudah responsive ya :D

    BalasHapus
    Balasan
    1. belum mas, saya hanya mengambil ukuran sidebar blog pada umumnya, maksudnya jika blog yang memiliki lebar halaman sidebar lebih dari 33% maka lebar pada widget ini harus diedit lagi,

      namun untuk height sudah auto,

      Hapus
  8. keren infonya, sangat menarik

    BalasHapus
  9. Wah mba cantik yah, boleh kenalan?hihihihi

    BalasHapus
    Balasan
    1. GAK BOLEH kang sudah apa yang punya :D

      Hapus
    2. hihi,, iya gpp deh mba.salam kenal aja :D

      Hapus
    3. hadir..hadir, belum ada yang punya kok, yukkk..kenalan sama SAHABAT BLOGGER 77 + adminnya, hehe..!!

      Hapus
    4. hihi,, iya mba.mempererat tali persaudaraan sesama bloger :D

      Hapus
  10. Busetttt ... Cantiknyaaa Efek nya mbak Bisa Hide Klo di sentuh :D

    BalasHapus
    Balasan
    1. hmmm..alur kata-katanya sudah seperti mas Saud, keren widgetnya atau..?

      Hapus
  11. keren sekali mba devy.. mksh sdh berbagi

    BalasHapus
    Balasan
    1. sama-sama kang, cuma sedikit ber-inovasi saja, dan alhamdulillah banyak yang suka dengan widget ini.
      terimakasih atas kunjungannya ya kang,

      Hapus
  12. Kalau di blogspot mungkin script ini gak terasa berat. Tapi kalau di wordpress.org bisa saji terasa, benar gak Mbak?

    BalasHapus
    Balasan
    1. noteband script diatas tidak besar mas, dan hanya saya gunakan untuk mengaktifkan fungsi efek slide hover, artinya script diatas bisa saja diganti dengan CSS animasi-transisi, namun kalau CSS mungkin akan banyak perintah, yang sama bebannya dengan script diatas.

      praktek dulu, kalau berat kasih tahu Devy.

      Hapus
  13. kalau pakai script ini jadi tambah keren ya mbak?
    tapi kayanya scriptnya masih kalah kerenz sama kang saud dech mbak :d

    BalasHapus
    Balasan
    1. demonya secantik adminnya.
      jadi maaaaauuu

      Hapus
    2. Devy kasih tahu rahasianya mas, kenapa scriptnya kalah keren dengan mas saud, karena mas saud punya PACUL keramat, xixixix...!!!

      Hapus
    3. selain kakek cangkul
      ternyata masih ada saud pacul ys mbak :d

      Hapus
    4. bakal ada saingan nich si kakek cangkul sama kang saud pacul
      :d

      Hapus
  14. keren sekali mba widget profilnya. patut di terapkan nih.. makasih mba share nya.

    BalasHapus
  15. Okay saya coba ya mbak Devy. Cantik skali widget ini.
    Langsung dipakai di sidebar blog baru saya.

    Terima kasih

    BalasHapus
    Balasan
    1. silahkan mas, tetapi foto devy diganti dulu ya sama foto mas marlon,.Okay deal..!!?

      Hapus
  16. saya lihat script yang satu ini harus konsentrasi ne.. biar agar gak selalu terbayang-bayang mbak devy nya...

    tapi biasanya sih mbak, saya pasang script seperti ini saya letak saja dari google code, agar lebih terasa nyaman....

    ;(

    BalasHapus
    Balasan
    1. sama kok mas jai, devy juga sering simpan script pada google, namun hanya script pilihan saja, yang mana script tersebut bisa mempengaruhi terhadapa loading blog.

      kalau script diatas, sengaja tidak saya ringkas, karena hanya difungsikan untuk efek slidenya saja, untuk memanggil perintah onmouseover pada slide.

      Hapus
    2. apaan lagi tuch mbak onmouseover :d
      ngebacanya saja dah nyut-nyutan jeh.... :d

      Hapus
    3. Devy Indriyani : bener tuh mbak devy, kalau emang script tidak merasa berat atau script itu hanya sedikit, tidak seharusnya kita letak di google code. lebih baik di letak di dalam template kita, atau di dalam postingan kita..

      Kang Jum : saya berikan lagi tambahan ne kang jum onmouseover dan onmouseout (Ketika mouse berada di atas sebuah obyek "seluruh variabel dalam onmouseover bekerja" dan ketika mouse meninggalkan obyek maka "seluruh fungsi dalam onmouseout yang bekerja") :d cheer

      Hapus
  17. Kebetulan temen saya lagi nyariin yang beginian, ternyata baru di update to mbak. Ijin CTRL+D

    BalasHapus
    Balasan
    1. semoga saja teman mas imron suka ya, tetapi jangan bilang-bilang kalau widget ini dari Devy ya,

      Hapus
    2. saya juga nye-te-er-el-plus-de...

      Hapus
    3. kang zeer ikutan juga yaa... :>)

      Hapus
  18. saya g mbaca artikelnya lho...saya cuma mau mandangin fotonya jah.. sudah mak nyess

    BalasHapus
  19. bisa berubah gitu, keren abis
    selalu menarik hasilnya

    BalasHapus
  20. cocoknya itu disimpen dimana ya vy..?

    BalasHapus
    Balasan
    1. di simpen di genteng cocok mbk ,,,hehe

      Hapus
  21. lagi lagi css membuat saya berpikir untuk membuat blogazine biar bisa nerapin semua cssnya

    BalasHapus
  22. gan gimana cara menhapus spam dlog secara otpmatis

    BalasHapus
  23. Boleh dong iya belajar sama mbak devy :D

    BalasHapus
  24. ya.. salam cantik nian lah ini desain blog, secantik orangnya..

    BalasHapus
  25. alamaak..! ada lagi..
    bagaimana bisa diterapkan.. bidadarinya muncul truzz..!

    BalasHapus
  26. menarik juga mbak...bisa ada teknik munculan setelah kursor bersentuhan dengan tentang saya...gak repot juga harus pake klik...ok makasih inspirasinya....

    BalasHapus
  27. Assalamu''alaikum mbak devy artikelnya bikin ketagihan sejak pandangan pertama nie mbak, wis kecanduan nongkrong disini.. terima kasih ilmunya

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK