Kamis, 21 Juni 2012

Create Your Own Placeholder use Holder.js

Masih ingat dengan trik menampilkan image (gambar) secara acak ala Placeholder Image Lorempixum? Terasa berguna bagi blogger yang suka menampilkan gambar di dalam blognya. Cikal bakal layanan place-image mungkin datang dari web Placehold.it (sotoy mode ON) :p
Sekarang waktunya kita memiliki hal serupa layak placehold web, tetapi dengan hostingan sendiri (kalau punya) Tidak punya hostingan mari pakai jasa dari Google Code ;)) Di placehold.it terdapat beberapa opsi dalam pemanggilan syntax yakni: Text, Color and Size. Dimana ke semua opsi tersebut dapat kita customize. Bila di aplikasikan menjadi sbbbeben kobenSebenarnya kalau jenis ini mah cocok banget bagi yg sering bermain dengan konten dummies! Jadi tidak usah capek dan pusing dalam memberikan contoh dengan syntax img ;)
Say thanks for master Ivan Malopinsky yg sudah membuat kreasi full stylish Holder.js Dengan Download Holder.js (4KB) kita akan membuat service placeholders serupa dengan ala placehold.it Sok di download dulu scriptnya, kemudian hostingkan ke account google-code kalian masing² Versi minimize Koben buatkan juga Download Holder.js (min)
Yuk kita masuk ke cara penanaman & pemakaian ke dalam blog :)

Tepat diatas tag penutup </body> simpan script<script src="YOUR-HOST/HOLDER.JS"></script>SAVE. Gampang toh!
Syntax pemakaian (versi minimize) seperti berikut
Default display
<img src="holder.js/100x100" />
Display 1
<img src="holder.js/100x100/1" />
Display 2
<img src="holder.js/100x100/2" />
Display 3
<img src="holder.js/100x100/3" />
Keterangan:
>> holder.js = domain syntax (harus terisi)
>> 100x100 = tinggi & lebar bidang.
>> 1,2,3 = style placeholders.Lantas bagaimana bila kepingin customize background dan warna huruf secara instant! Syntax<img data-src="holder.js/100x100/#f00:#fff" />#f00 = warna background.
#fff = warna huruf.
Begitu saja, terima kasih :)
Happy place holders image \m/

Tidak ada komentar:

Posting Komentar