Sitenize Sesli Atatürk Resmi Ekleyin

Merhabalar,

Malum dün 30 ağustos Zafer Bayramıydı bu konuyu daha erken açmam gerekirdi fakat açamadım.Bu yazımda sizlere herhangi harici eklenti,program veya bir şey kullanmadan sesli resim eklemeyi öğreteceğim.

Öncelikle buraya tıklayarak gerekli dosyalarımızı indiriyoruz.

İndirdikten sonra içerisindeki dosyaları temanızın bulunduğu dizine atın.

Ardından style.css dosyası içine aşağıdaki kodları ekleyin,

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

Ardından header.php dosyasındaki < body > kodunun hemen altına aşağıdaki kodları ekleyin.

</pre>
<div id="sabit">
<img onmouseover="document.getElementById('beep-one').play()" onMouseOut="document.getElementById('beep-one').pause()" src="<?php bloginfo('template_url'); ?>/ata.jpeg" alt="ATATÜRK" />
<audio style="display:none;" id="beep-one" controls="controls" preload="auto">
 <source src="<?php bloginfo('template_url'); ?>/ata.mp3"></source>
</audio>
</div>

İşlemimiz bu kadar.

//Ellerine Sağlık ..

Sunucu bulunamadı.

Bir de demo vs. görebilsek....

Şöyle bırakayım ben belki işinize yarar.

DEMO: https://i.hizliresim.com/aB7Va4.png

<div id="sabit"> 
<img onmouseover="document.getElementById('beep-one').play()" onMouseOut="document.getElementById('beep-one').pause()" src="https://i.hizliresim.com/gLQ7GO.png" alt="ATATÜRK" /> 
<audio style="display:none;" id="beep-one" controls="controls" preload="auto"> 
<source src="http://site.com/ataturk.mp3"></source> 
</audio>
</div>

Kullanımı: bold ile belirttiğim yeri düzenlemelisiniz. Buradaki dosyayı indirerek sunucunuza atın ve adresini değiştirin.


" ATAM NERDESiN MEHMETiN SENi ARAR , KARA FATMAN SENi ARAR ZEYNEBiN SENi ARAR ATAM…
NERDESiN GUNES BATTI DiYORLAR
ATAM SENiN iCIN ÖLDÜ DiYORLAR
iNANMIYORUM iNANAMIYORUM
CUNKU SENi GORDUM ATAM
SEN SiNEMDESiN SEN KALBiMDESiN ATAM…"

Ses içinde bir parça..

--R10.NET; Flood Engellendi -->-> Yeni yazılan mesaj 09:36:43 -->-> Daha önceki mesaj 09:34:21 --

öncelikle CSS'yi eklemeyi unutmayın

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