1. Hello Guest, selamat datang di Forum WinPoin. Kamu bisa bertanya, berdiskusi, sharing, dan ngobrolin apapun seputar Windows, Windows Phone, PC, Gadget, atau hal seputar Teknologi lainnya. Selamat berkomunitas! ;)

Cara Membuat Logo Blog Bergerak Ketika Di Hover

Discussion in 'Developer Corner' started by SyamsQ, Jun 28, 2014.

  1. SyamsQ

    SyamsQ Member

    Joined:
    Apr 16, 2014
    Messages:
    585
    Masters, bagaimana cara buat logo blog bergerak kayak winpoin?
    :desperate2:

    Edited: Gunakan judul yang jelas dan spesifik. Baca rule forum no 1.
     
  2. Yusril Ibnu

    Yusril Ibnu Winpoin Staff Staff Member

    Joined:
    May 12, 2014
    Messages:
    6,351
    RE: Logo dan Nama Blog

    memang logo winpoin bergerak ya :bingung:
    klo bergerak bisa pake gambar gif
     
  3. Jazz

    Jazz Super Moderatór Staff Member

    Joined:
    Jan 6, 2014
    Messages:
    14,731
    RE: Logo dan Nama Blog

    mungkin maksudnya saat di hover pke mouse, logo Winpoin bergerak
     
  4. SyamsQ

    SyamsQ Member

    Joined:
    Apr 16, 2014
    Messages:
    585
    RE: Logo dan Nama Blog

    Ya, maksudnya itu.
     
  5. Yusril Ibnu

    Yusril Ibnu Winpoin Staff Staff Member

    Joined:
    May 12, 2014
    Messages:
    6,351
    RE: Logo dan Nama Blog

    pertama lihat dulu image logonya di bungku pake css apa...
    minsal aja dibungkus pake class logo (.logo), seperti kode dibawah :
    Code:
    <div class="logo"><img src="logo/alamatgambar.png"/></div>
    maka css ketika dihover (disentuh oleh mouse) buat saja seperti ini (contoh)

    Code:
    /*buat efek transisi*/
    .logo,.logo:hover {
    -webkit-transition: all 250ms ease-in-out; 
    -moz-transition: all 250ms ease-in-out;
    -o-transition: all 250ms ease-in-out;
    transition: all 250ms ease-in-out;
    }
    
    .logo:hover {
    opacity: 0.6; /* Saat di sentuh opacity menjadi 60%*/
    margin-left: -15px; /* Saat di sentuh menggeser 15 px ke kiri*/
    }
    :goodjob:
     
  6. Krisnanda Juni Antara

    Krisnanda Juni Antara General Moderating Staff Member

    Joined:
    Apr 21, 2014
    Messages:
    2,468
    RE: Logo dan Nama Blog

    Hehehehehe lumayan nih bang yuzz soal coding :ketawa:
    Boleh bagi ilmunya gk? :ketawa:
     
  7. mabaega

    mabaega Well-Known Member

    Joined:
    Nov 9, 2013
    Messages:
    2,735
    RE: Logo dan Nama Blog

    sama ya?
     

    Attached Files:

  8. Yusril Ibnu

    Yusril Ibnu Winpoin Staff Staff Member

    Joined:
    May 12, 2014
    Messages:
    6,351
    RE: Logo dan Nama Blog

    tanyanya di : http://forum.winpoin.com/forum-css :goodjob:
    Dasarnya di : http://forum.winpoin.com/diskusi-yuk-ketahui-tentang-cascading-style-sheets
     
  9. SyamsQ

    SyamsQ Member

    Joined:
    Apr 16, 2014
    Messages:
    585
    RE: Logo dan Nama Blog


    Masukkin CSSnya dimana?
    :desperate2: saya gak tahu gan. Masih nuwbi banget. baru bisa merubah warna template.
     
  10. Yusril Ibnu

    Yusril Ibnu Winpoin Staff Staff Member

    Joined:
    May 12, 2014
    Messages:
    6,351
    RE: Logo dan Nama Blog

    pake apa ? blogger ?
     
  11. Andika Xp

    Andika Xp Member

    Joined:
    Aug 18, 2013
    Messages:
    955
    RE: Logo dan Nama Blog

    Ijin buat nambahin ya :cool:

    Jika ingin efeknya ada pada judul blog (biasanya judul blog pake tag H1), coba kode di bawah ini,

    Code:
    
    .Header h1{
    -moz-transition: all 0.4s ease-out;
    -o-transition: all 0.4s ease-out;
    -webkit-transition: all 0.4s ease-out;
    -ms-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
    }
    .Header h1:hover  {
    margin-left: 25px;
    padding-left: 5px;
    }
    
    0.4s adalah kecepatan silahkan atur sendiri :goodjob:

    Penempatan kodenya adalah di atas ]]></b:skin> pada template
     
  12. SyamsQ

    SyamsQ Member

    Joined:
    Apr 16, 2014
    Messages:
    585
    RE: Logo dan Nama Blog

    Ya gan pake blogger. Masukkinya dimana?
     
  13. SyamsQ

    SyamsQ Member

    Joined:
    Apr 16, 2014
    Messages:
    585
    RE: Logo dan Nama Blog

    Ini kode di blog saya, kode yang harus dimasukkan di blog saya bagaimana gan? apakah masih sama kayak agan? meletakkanya dimana?
    Code:
    <div class='logo-blog'>
      <a href='/' title='SyamsQ'><img alt='SyamsQ' height='93' src='http://lh4.googleusercontent.com/UZDtUC1Tx5d0ADwGzQ77LAo-JfB9panwA-9jBfnfiGU=w532-h212-p-no' title='SyamsQ' width='236'/></a>
                   </div>
     
  14. Yusril Ibnu

    Yusril Ibnu Winpoin Staff Staff Member

    Joined:
    May 12, 2014
    Messages:
    6,351
    RE: Logo dan Nama Blog

    coba ini :

    Code:
    .logo-blog, .logo-blog:hover {
    -webkit-transition: all 250ms ease-in-out; 
    -moz-transition: all 250ms ease-in-out;
    -o-transition: all 250ms ease-in-out;
    transition: all 250ms ease-in-out;
    }
    
    .logo-blog:hover {
    opacity: 0.6; 
    margin-left: -15px; 
    }
    Penempatan kodenya adalah di atas ]]></b:skin> pada template
     
  15. SyamsQ

    SyamsQ Member

    Joined:
    Apr 16, 2014
    Messages:
    585
    RE: Logo dan Nama Blog

    Berhasil gan. cara ganti hovernya gimana?
     
  16. Yusril Ibnu

    Yusril Ibnu Winpoin Staff Staff Member

    Joined:
    May 12, 2014
    Messages:
    6,351
    RE: Logo dan Nama Blog

    ganti hover mau gimana maksudnya ?? :bingung:
     
  17. SyamsQ

    SyamsQ Member

    Joined:
    Apr 16, 2014
    Messages:
    585
    RE: Logo dan Nama Blog

    Inikan hovernya bergeser kekiri. kalau bergeser kebawah gimana?
     
  18. Yusril Ibnu

    Yusril Ibnu Winpoin Staff Staff Member

    Joined:
    May 12, 2014
    Messages:
    6,351
    RE: Logo dan Nama Blog

    Perhatikan kodenya...
    nah pada kode yg warna merah sesuaikan mau bergeser ke arah mana... pake bahasa inggris..tinggal ubah saja dgn
    left = kearah kiri
    right = kearah kanan
    top = kearah atas
    bottom = kearah bawah

    lalu ubah kode yang warna biru sebesar berapa jauh bergesernya... dengan catatan dalam satuan negatif (-)
     
  19. SyamsQ

    SyamsQ Member

    Joined:
    Apr 16, 2014
    Messages:
    585
    Terima Kasih gan.
     
  20. Yusril Ibnu

    Yusril Ibnu Winpoin Staff Staff Member

    Joined:
    May 12, 2014
    Messages:
    6,351
    sudah solved ? jgn lupa ubah prefix, sama sama...
     

Share This Page