Sayfa Köşesine Sesli Resim Eklem (1 İzleyici)

[Berkay Tosun]

Bir blog ve sitelerde sayfaların sağ alt tarafından resim üzerine gelince çalışan sistemi nasıl yapıldığından bahsedeceğiz Bilg Master olarak 30 ağustos zafer bayramında site üzerinde kullanmıştık biz bu sistemi isterseniz siz sitenizin sağ veya sol tarafına sabitleyebilirsiniz.

Aşağıdaki kullanacağımız kodumuz

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

Tema klasörünüzün içerisine 1 adet ” 30agustos.png ” ve 1 adet ” 30agustos.mp3 ” dosyası eklemeniz gerekiyor tabi siz bunu değiştirebilirsiniz

Yukardaki kodu siteniz herhangi bir yerine ekleyerek sistemi kullanabilirsiniz fakat yukardaki kod sayfanızın sağ tarafına sabit olarak eklemez

Şimdi sayfamızın sağ tarafına nasıl sabitleyeceğiz ona bakalım

İlk olarak aşağıdaki kodu temamızın ” css ” dosyasında en alta ekleyelim

#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'); ?>/30agustos.png" alt="Hüdaverdi" />
<audio style="display:none;" id="beep-one" controls="controls" preload="auto">
    <source src="<?php bloginfo('template_url'); ?>/30agustos.mp3"></source>
</audio>
</div>

İşte bu kadar güle güle kullanın.

 

[Seomaster]

Paylaşım için teşekkürler.