Berkay Tosun
Üye
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
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
Daha sonra ” header.php ” dosyamızı açarak < body> etiketinin hemen altına aşağıdaki kodları ekleyin.
İşte bu kadar güle güle kullanın.
Aşağıdaki kullanacağımız kodumuz
PHP:
<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>
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
PHP:
#sabit{position:fixed; right:0; bottom:-2px; z-index:9999999;}
PHP:
<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>