CORNER JS

Back to bloglang no get nothing-nothing...kekekekek!!! Terpaksa memosting tentang nyekrip deh. Bagi yang suka bergaya-gaya dengan penampilan blognya. Mari simak kemari bagaimana membuat corner atau sudut pada gambar dengan menggunakan corner javascript. Untuk melihat aksinya silahkan klik link ini Live Demo. So seksi dan begitu elegan hehehehe.

License permits free of charge use on non-commercial and private web sites only under special conditions (as described in the license). Please read Netzgestade Non-commercial Software License Agreement. Support to Mozilla Firefox 1.5+, Opera 9+, Safari and IE6+. Yuk kita proses, halaaaahhh proses!!!

1. Log in terlebih dahulu ke account sobat.
2. Masuk pada halaman Edit HTML.
3. Masukkan script berikut diatas/sebelum tag </body>.
4. Ini scriptnya, harap di download dolo Scriptnya.
Entar nulisnya jadi begini kawan setelah kita menghosting script yang di download tadi.
<script type="text/javascript" src="CORNER.JS"></script> .
5. SAVE deh.

Nah sekarang caranya menghadirkan trik corner ini bagaimana bisa berfungsi di dalam postingan kita. Sebelumnya mari kita lihat screen shoot berikut.

Nah disana ada 12 gambar berikut dengan efek yang bisa dihasilkan dengan menggunakan corner.js ini. BeBeN kasih contohnya yang dari blog saja yah ^,^. Kalau kita sudah beres meng-upload sebuah gambar dari blog ini akan didapatkan kode seperti berikut :

<img style="cursor:pointer; cursor:hand;width: 320px; height: 256px;" src="http://1.bp.blogspot.com/LINK-URL-GAMBAR.png" border="0" alt=""id="BLOGGER_PHOTO_ID_12345678901234" />

Nah kita tinggal menambahkan class saja pada kode gambar tersebut.

<img style="cursor:pointer; cursor:hand;width: 320px; height: 256px;" class="KODE-YG-MAU-DIPAKAINYA" src="http://1.bp.blogspot.com/LINK-URL-GAMBAR.png" border="0" alt=""id="BLOGGER_PHOTO_ID_12345678901234" />

Apa saja KODE-YG-MAU-DIPAKAINYA itu, berikut kode-kode yang bisa sobat pakai (urut nomor yang terdapat pada screen shoot diatas tadi):

1. class="corner"
2. class="corner ishade50"
3. class="corner ishadow20"
4. class="corner ishade50 ishadow20"
5. class="corner ishadow40 inverse"
6. class="corner iradius16"
7. class="corner iradius24 ishadow33 inverse"
8. class="corner iradius20 ishadow33"
9. class="corner iradius8 ishade75 ishadow33"
10. class="corner iradius16 ishade66 ishadow30"
11. class="corner iradius32 ishade50 ishadow25"
12. class="corner iradius48 ishade33"
12 kode yang terdapat pada screen shot.
13. class="corner iradius12 ishade50 ishadow20"
14. class="corner iradius10 ishade66 ishadow25"
15. class="corner iradius8 ishade75 ishadow30"
16. class="corners iradius32"
17. class="corners iborder1 icolorffffff"

Ah capek ah, dah lah sok dicoba triknya sobat.

GOOD LUCK AND SEE YOU AGAIN WITH ME IS BLOGLANG.