LightBox Untuk Image
Apa itu lightbox? Ia akan menjadikan setiap image yang diklik akan keluar pada "pop up box". Boleh digunakan pada single image, group image ataupun slideshow. Jom, kita belajar untuk mengaplikasikannya. Apa pun, sila backup template anda terlebih dahulu.
Pergi ke dashboard >> layout >> Edit HTML dan cari tag </head>. Kemudian masukkan kod di bawah tag tersebut.
<!--Brought-By-TycoBlogger-->
<link href='http://tycoblogger.webs.com/lytebox.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='http://tycoblogger.webs.com/lytebox.js' type='text/javascript'/>
<!--Brought-By-TycoBlogger-->
Dan klik save.
Kita pergi ke kaedah untuk menggunakannya. PASTIKAN anda menggunakan "old" editor dan bukannya "Update" editor untuk post sebarang entri yang menggunakan trick ini.
Di bahagian Posting, anda akan lihat dua tab iaitu Edit HTML dan Compose seperti gambar di bawah.
Upload gambar seperti biasa. Anda akan mendapat kod seperti di bawah:-
Tambahkan kod rel="lytebox" dan kod image itu akan jadi seperti di bawah:-
Itu untuk satu gambar.
Sekarang untuk Group Image.
Sama seperti kaedah di atas cuma gantikan kod untuk ditambah seperti di bawah:-
rel="lytebox[groub1]"
Dan untuk slideshow, tambahkan pula dengan kod rel="lyteshow[groub1]"
Untuk demo, klik SINI.
Pergi ke dashboard >> layout >> Edit HTML dan cari tag </head>. Kemudian masukkan kod di bawah tag tersebut.
<!--Brought-By-TycoBlogger-->
<link href='http://tycoblogger.webs.com/lytebox.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='http://tycoblogger.webs.com/lytebox.js' type='text/javascript'/>
<!--Brought-By-TycoBlogger-->
Dan klik save.
Kita pergi ke kaedah untuk menggunakannya. PASTIKAN anda menggunakan "old" editor dan bukannya "Update" editor untuk post sebarang entri yang menggunakan trick ini.
Di bahagian Posting, anda akan lihat dua tab iaitu Edit HTML dan Compose seperti gambar di bawah.
Upload gambar seperti biasa. Anda akan mendapat kod seperti di bawah:-
Tambahkan kod rel="lytebox" dan kod image itu akan jadi seperti di bawah:-
Itu untuk satu gambar.
Sekarang untuk Group Image.
Sama seperti kaedah di atas cuma gantikan kod untuk ditambah seperti di bawah:-
rel="lytebox[groub1]"
Dan untuk slideshow, tambahkan pula dengan kod rel="lyteshow[groub1]"
Untuk demo, klik SINI.
Comments
Post a Comment