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.