Blogunuzun Köşesine Sesli Karakter Ekleyin

Yazıya nasıl başlayacağımı bilemediğim için direk bu blogun sağ alt köşesindeki Kemal Sunal’ı örnek göstereyim. Üzerine geldiğiniz zaman Kemal Sunal’a ait bir replik çalmakta. Şimdilerde birçok blogda bu tarz bir şey görmek mümkün. Ben de bu yazımda bunun nasıl yapıldığını anlatmak istedim.

Öncelikle bu şekilde karakter genelde flash ile yapılmakta. Fakat oldukça zahmetli bir iş. Ben flash ile yapmak yerine html ile nasıl yapıldığını anlatacağım. Ben basit bir örnek yaptım isterseniz siz kendinize göre değiştirebilirsiniz.

Öncelikle buradan gerekli dosyaları indirin ve rar dosyasını açın. İçinden çıkan hudaverdi.png ve hudaverdi.mp3 dosyalarını temanızın bulunduğu klasöre atın. Daha sonra style.css dosyasını açarak aşağıdaki kodları ekleyin.

#sabit{position:fixed; right:0; bottom:-2px; z-index:9999999;}

Daha sonra header.php dosyamızı açarak < body> etiketinin hemen altına aşağıdaki kodları ekleyin.

<div id="sabit">
<img onmouseover="document.getElementById('beep-one').play()" onMouseOut="document.getElementById('beep-one').pause()" src="<?php bloginfo('template_url'); ?>/hudaverdi.png" alt="Hüdaverdi" />
<audio style="display:none;" id="beep-one" controls="controls" preload="auto">
<source src="<?php bloginfo('template_url'); ?>/hudaverdi.mp3"></source>
</audio>
</div>

Bu işlemi de yaptıktan sonra blogun sağ alt köşesinde Hüdaverdi’nin çıkması lazım. Tabi siz bunu kullanmak yerine başka karakter de kullanabilirsiniz. Kullanmak istediğiniz karakteri Photoshop yardımıyla güzelce kesin. Arkaplan transparan olsun ve png olarak kaydedin. Sonra üzerine gelince ne çalmasını istiyorsanız onu bulun. Hatta ses kesme işlemi yapacak olursanız MP3 Splitter programını da kullanabilirsiniz.

Benzer Yazılar
Cevap Bırakın

Yorum ( 37 )
  1. Sabah Kemal Cansu
    9 Temmuz 2013 - 13:45
    Cevapla
    • Usluer Yazar
      9 Temmuz 2013 - 13:55
      Cevapla
      • Sabah Kemal Cansu
        9 Temmuz 2013 - 13:57
        Cevapla
  2. Volkan Akpınar
    9 Temmuz 2013 - 17:46
    Cevapla
  3. Volkan Akpınar
    9 Temmuz 2013 - 18:29
    Cevapla
    • Usluer Yazar
      9 Temmuz 2013 - 18:48
      Cevapla
      • Volkan Akpınar
        9 Temmuz 2013 - 23:43
        Cevapla
        • Usluer Yazar
          10 Temmuz 2013 - 09:09
  4. Şüpheli
    10 Temmuz 2013 - 00:06
    Cevapla
    • Usluer Yazar
      10 Temmuz 2013 - 09:13
      Cevapla
  5. Alperen
    10 Temmuz 2013 - 08:25
    Cevapla
  6. Berkay YILMAZ
    10 Temmuz 2013 - 09:16
    Cevapla
    • Berkay YILMAZ
      10 Temmuz 2013 - 09:20
      Cevapla
    • Usluer Yazar
      10 Temmuz 2013 - 09:20
      Cevapla
  7. Volkan Akpınar
    10 Temmuz 2013 - 13:54
    Cevapla
    • Usluer Yazar
      10 Temmuz 2013 - 14:03
      Cevapla
  8. Mehmet GÜMÜŞ
    10 Temmuz 2013 - 14:55
    Cevapla
  9. ehliblog
    16 Temmuz 2013 - 00:23
    Cevapla
  10. Aydın Yeşilmen
    19 Temmuz 2013 - 23:03
    Cevapla
  11. Sefa GENÇ
    1 Ağustos 2013 - 01:19
    Cevapla
  12. mutlu
    16 Ağustos 2013 - 21:26
    Cevapla
  13. caner
    10 Eylül 2013 - 16:09
    Cevapla
    • Usluer Yazar
      10 Eylül 2013 - 17:31
      Cevapla
  14. faruk yaman
    15 Eylül 2013 - 21:35
    Cevapla
  15. Usluer Yazar
    16 Eylül 2013 - 16:58
    Cevapla
    • faruk yaman
      16 Eylül 2013 - 18:03
      Cevapla
  16. Alexis
    3 Ekim 2013 - 16:00
    Cevapla
    • Usluer Yazar
      3 Ekim 2013 - 18:06
      Cevapla
  17. Şenol Şengül
    14 Ekim 2013 - 10:55
    Cevapla
  18. Vedat
    22 Aralık 2013 - 21:19
    Cevapla
  19. Ertuğrul
    16 Şubat 2014 - 00:09
    Cevapla
  20. Abdullah Solgun
    23 Şubat 2014 - 11:14
    Cevapla
    • Usluer Yazar
      23 Şubat 2014 - 12:55
      Cevapla
      • Abdullah Solgun
        23 Şubat 2014 - 19:53
        Cevapla