blog demo jaya

Akhirnya punya waktu juga nge share tutorial jQuery, berhubung bulan ini aku magang jadi gak begitu banyak nge buka blog hehe... di tutorial ini saya akan memberikan trik tentang jQuery ColorBox popup yang gak kalah menarik untuk di coba, masih ingat kan tentang tutorial saya sebelumnya yaitu membuat popup modal jQuery yang sempat menjadi post populer di blog saya. Di tutorial ini saya akan memberikan tutorial popup jQuery dengan tiga jenis kamu bisa lihat contoh pertamanya di blog demo jaya. contoh kedua dan ketiga akan segera menyusul. Sudah melihatnya dan ingin memasangnya di blog kamu ikuti langkah langkah pembuatannya dibawah ini

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

    <link href='https://sites.google.com/site/shofisanjaya/colorboxwhite/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/colorboxwhite/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 kamu dan buat satu post untuk membuat popupnya, copy dan paste kan kode HTML dibawah ini didalam kolom posting kamu

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

* Terbitkan Entri dan lihat hasilnya kamu bisa mengeditnya sesuai keinginan dibwah ini kamu bisa lihat contohnya

Contoh 1 jQuery ColorBox popup

Contoh 2 jQuery ColorBox popup

Sabtu, 16 Juli 2011

jQuery ColorBox popup