Genel

Sitelerinize ücretsiz yılbaşı efekti yapımı

Evet arkadaşlar yılbaşı görsellerini paylaştıktan sonra size daha yararlı olabilmek adına , aşağıda ekran görüntüsünü verdiğim eklentiyi paylaşıyorum , kolaylıkla sitelerinize uygulayabilirsiniz.

Ekran Görüntüsü :

yilbasi

 

Şimdi eklentiyi sitelerinize nasıl ekleyeceğini anlatacağım.
Öncelikle burdan eklediğim dosyayı indirip rardan çıkartıyoruz ya da buraya tıklayarak demosunu görebilirsiniz.
Rardan çıkartınca şöyle bir görüntü olacak.

ek1

Eklentiyi eklemek istediğimiz sitenin ana dizinine index.html hariç bütün dosyaları aktarıyoruz.
Daha sonra notepad yardımı ile index.html i açıp kodlarımızı eklemeye başlıyoruz.
Sitenizin ana sayfasını açıp aşağıda ki kodları tek tek eklemeye başlıyoruz.
<head> </head> tagları arasına aşagığa verdiğim kodları ekleyip index.html e geri dönüyoruz.

<style type="text/css">
* {
    padding: 0;
    margin: 0;
}

img {
    border: 0;
}

body, html {
    height: 100%;
    width: 100%;
}

body {
    background-image: url("tree.png");
    text-align: center;
    color: #093365;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size: 80%;
}

.text_niftyplayer {
    color: #093365;
}

a.niftyplayer {
    color: #093365;
    text-decoration: none;
}

a.niftyplayer:hover {
    text-decoration: underline;
}
</style>

<script type="text/javascript" src="resources/scripts/snowstorm-min.js"></script>
<script type="text/javascript" src="resources/scripts/soundmanager2-nodebug-jsmin.js"></script>
<script type="text/javascript">
    var urlBase = 'index.html';
    soundManager.url = 'index.html';
</script>
<script>
    snowStorm.flakesMax = 200;
    snowStorm.flakesMaxActive = 200;  // show more snow on screen at once
    snowStorm.animationInterval = 60;
    snowStorm.flakeBottom = null;
    snowStorm.freezeOnBlur = true;
    snowStorm.snowStick = false;

</script>
<script type="text/javascript" src="resources/scripts/jquery-1.9.1.js"></script>
<script type="text/javascript" src="sound/niftyplayer.js"></script>
<script type="text/javascript">
    var music_player = '';
    function stopMusic() {
        music_player = $('#music_player').html();
        $('#niftyPlayer1').remove();
    }

    function playMusic() {
        $('#music_player').html(music_player);
    }
</script>

Aşağıda verdiğim kodlarıda <body> etiketinin aşağısına uygun bir yere yerleştiriyoruz.

<div style="position:absolute; left:-2000px;" id="music_player">
        <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
                codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
                width="165" height="37" id="niftyPlayer1" align="">
            <param name=movie value="sound/niftyplayer0f95.swf?file=jingle-bells.mp3&amp;as=1"/>
            <param name=quality value=high/>
            <param name=bgcolor value="transparent"/>
            <embed src="sound/niftyplayer0f95.swf?file=jingle-bells.mp3&amp;as=1" quality=high bgcolor=#FFFFFF width="165"
                   height="37" name="niftyPlayer1" align="" type="application/x-shockwave-flash" swLiveConnect="true"
                   pluginspage="http://www.macromedia.com/go/getflashplayer">
            </embed>

        </object>

    </div>

<div style="position:fixed; bottom:-7px; left: 5px; z-index:5" class="niftyplayerbox">
            <span class="text_niftyplayer">
                <img src="resources/images/soundicon.png" align="middle"/>
                <a href="javascript:playMusic()" class="niftyplayer">Oynat</a> |
                <a href="javascript:stopMusic()" class="niftyplayer">Durdur</a></span>
</div>

<div style="position: fixed; bottom:0; left:0; z-index: 4; background: url(resources/images/snow.png) repeat-x; height: 100px; width: 100%">
</div>

Tüm kodları eklediğimize göre sitemizi test edebiliriz.  İyi eğlenceler 🙂

// kod uygulanmış siteler..

1- http://www.izmirtemelemlak.com/

Kategori: Genel
Yazı oluşturuldu 19

Benzer yazılar

Aramak istediğinizi üstte yazmaya başlayın ve aramak için enter tuşuna basın. İptal için ESC tuşuna basın.

Üste dön