Webmaster Ticaret Forumu'a Giriş Yapın

webmastertr · 07-04-2021, 04:26 PM

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

Kod:

<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

Kod:

#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.

Kod:

<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>

bu kadar kullanmaya başlayabilirsiniz