Colorbox v1.3.6 untuk aplikasi web link

Pada blog ini saya pasang aplikasi colorbox untuk membuka web link. Untuk medapatkan plugin ini sangat mudah karena tinggal download saja di web pembuatnya Color Powered.com, terdapat 5 varian dari aplikasi ini, untuk proses instlasinya adalah sebagai berikut

Pertama upload file pendukung

1. Pertama adalah Download paket colorbox dari website pembuatnya ColorPoweed.com, setelah itu ektrak file, dan kita akan mendapatkan satu folder yang berisi sub folder colorbox, content dan example dari 1 sampai 5,
2. Subfolder color box terdapat 2 file js yang harus kita upload hosting kita. dan dapatkan alamtnya misal

   http://ifanadi.fileave.com/jquery.colorbox-min.js

3. Subfolder example1-example5 terdapat contoh tampilan dan terdapat satu file css yang dapat kita buka dengan notepad untuk di edit dan selanjutnya upload file tersebut. Pilih tampilan yang kita inginkan dari example1-5 pilih salah satu kemudian upload file cssnya. misal

   http://ifanadi.fileave.com/example4/colorbox.css

   saya gunakan example4 dan alamatnya adalah

Kedua Instalasi Pada blog

1. Login pada blogger, masuk ke blog, tataletak, edit html.
2. cari kode </head>, kopikan kode berikut tepat diatasnya
   <link href='http://ifanadi.fileave.com/example4/colorbox.css' media='screen' rel='stylesheet' type='text/css'/>
   <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
   <script src=' http://ifanadi.fileave.com/jquery.colorbox-min.js ' type='text/javascript'/> <script type='text/javascript'> $(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});
   $(".single").colorbox({}, function(){ alert('Howdy, this is an example callback.'); });
   $(".colorbox").colorbox();
   $(".youtube").colorbox({iframe:true, width:650, height:550}); $(".iframe").colorbox({width:"80%", height:"80%", iframe:true}); $(".inline").colorbox({width:"50%", inline:true, href:"#inline_example1"}); //Example of preserving a JavaScript event for inline calls. $("#click").click(function(){
   $('#click').css({"background-color":"#f00", "color":"#000", "cursor":"inherit"}).text("Open this window again and this message will still be here."); return false; }); }); </script>
3. ganti kode warna merah dengan kode yang telah di upload
4. Simpan template

Ketiga adalah cara penggunaannya

1. Untuk membuaka web link kita harus memasang kode class='iframe' contoh sebagai berikut:

   <a class=' iframe' href='http//alamatweb.com'>namalink</a>

   dapat di buka contoh di blog ini pada menubar contact us di atas.
2. untuk gambar kita tinggal menambahkan rel='example yang di pilih' misal

   <a href='http//alamtgambardiweb.com'rel='example1'>namagambar</a>

   dapat diklik gambar di posting ini sebagai contoh, pilihan tampilan untuk gambar adalah

elastis transisi: rel = "example1"

memudar transisi: rel = "example2"

no transition + fixed width and height (75% of screen size) : rel="example3"

slideshow : rel="example4"

Untuk pngembangannya kita dapat menerapkan pada beberapa aplikasi yang kita miliki misal pada sosial bookmarking, form contact dll, selanjutnya silahkan coba dan semoga berhasil.