blog demo jaya: jQuery popup black style

Masih ingat kan tutorial yang dulu tentang membuat jQuery ColorBox popup. Tutorial yang ini lanjutan dari tutorial yang sebelumnya, jQuery popup kali ini gak ada bedanya dari tutorial yang sebelumnya hanya tampilan skinnya dan warnanya saja yang berbeda. Pembuatannya cukup mudah hanya memasang kode jQuery dan kode HTML di blog kamu bisa melihat contohnya langsung di blog demo punya saya yaitu blog demo jaya klik disini untuk melihat contohnya. Okey langsung saja ikuti pembuatan popup jQuery nya dibawah ini

* Langkah yang pertama masuk ke blogger
* Masuk ke Rancangan dan Edit HTML
* Tekan F3 pada keyboard dan cari kode <head> letakan kode jQuery dibawah ini dibawah kode <head>

    <link href='https://sites.google.com/site/shofisanjaya/colorboxblack/colorbox.css' media='screen' rel='stylesheet'/>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'/>
    <script src='https://sites.google.com/site/shofisanjaya/colorboxblack/jquery.colorbox.js'/>
    <script>
        $(document).ready(function(){
            //Examples of how to assign the ColorBox event to elements
            $("a[rel='example1']").colorbox();
            $("a[rel='example2']").colorbox({transition:"fade"});
            $("a[rel='example3']").colorbox({transition:"none", width:"75%", height:"75%"});
            $("a[rel='example4']").colorbox({slideshow:true});
            $(".example5").colorbox();
            $(".example6").colorbox({iframe:true, innerWidth:425, innerHeight:344});
            $(".example7").colorbox({width:"80%", height:"80%", iframe:true});
            $(".example8").colorbox({width:"50%", inline:true, href:"#inline_example1"});
            $(".example9").colorbox({
                onOpen:function(){ alert('onOpen: colorbox is about to open'); },
                onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
                onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
                onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
                onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
            });

            //Example of preserving a JavaScript event for inline calls.
            $("#click").click(function(){
                $('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
                return false;
            });
        });
    </script>

* Simpan template lalu buat satu entri di blog kamu caranya pergi ke posting, copy dan pastekan kode HTML dibawah ini didalam kolom Entri

<a class="example8" href="#">Contoh jQuery ColorBox popup</a>
<div style="display: none;">

<div id="inline_example1" style="background: none repeat scroll 0% 0% rgb(255, 255, 255); padding: 10px;">
<b>jQuery ColorBox popup</b>
Ini adalah contoh jQuery ColorBox popup, kamu bisa membuat jQuery popup ini dengan mudah dan bisa langsung dipasang pada blog kamu by shofisanjaya.

</div>
</div>

* Simpan dan lihat hasilnya contohnya bisa kamu lihat dibawah ini

Contoh jQuery ColorBox popup

blog demo jaya

Senin, 25 Juli 2011

jQuery popup black style

Tidak ada komentar:

Posting Komentar