tambah super box(light box)

Apa yang Baru Tentang Widget ini

• Pertama-tama kita tambahkan kode widget pada template kita,
• Anda akan dapat link widget ini untuk gambar tunggal Anda di blogger.
• Anda dapat menggunakannya untuk membuat galeri foto.
• Anda dapat membuat Slide show dengan itu.
• Anda dapat menambahkannya ke link Anda.

Bagaimana Apakah Ini Bekerja

• Pertama-tama kita tambahkan kode widget pada template kita,
• Kemudian ketika kita menambahkan gambar ke posting baru kita harus link ke widget dengan menambahkan kode kecil untuk itu dengan mengubah modus menulis posting dari menulis untuk html jangan khawatir itu mudah, lanjutkan membaca untuk mencari tahu

Langkah 1

GO ke dashboard blogger account Anda dan arahkan ke Layout>> Edit html dan temukan kode berikut.

</ Head> 

Dan Sebelum menambahkan kode berikut.

<- Kode-By-AllBlogTools ->
 href='http://www.mydatanest.com/files/allblogtools/29603_izeup/lytebox.css' <link media='screen' rel='stylesheet' type='text/css'/>
 <script src='http://www.mydatanest.com/files/allblogtools/29602_xemqf/lytebox.js' type='text/javascript'/>
 <- Kode-By-AllBlogTools ->

Sekarang kita telah menambahkan semua memerlukan kode ke template, memungkinkan tahu bagaimana menggunakannya.

Langkah 2 - Bagaimana Menggunakan

Cara untuk membuat widget ini bekerja di blog Anda sangat mudah tetapi Anda harus tahu apa yang Anda lakukan,
Apa yang harus Anda lakukan adalah: menambahkan kode kecil untuk kode gambar. dan Anda dapat menemukan kode gambar di daerah pasca menulis ketika Anda mengubah modus dari menulis untuk mengedit html Silakan lihat gambar berikutnya.

Apa Dan Bagaimana Untuk Tambah:

Langkah 2.1 - Tambahkan Ini Untuk Image Tunggal

Pergi ke account blogger, mulai menulis posting Anda dalam mode normal (menulis)
Dan setelah Anda menambahkan gambar ke posting Anda, silahkan ubah modus Anda untukmengedit html, lihat imsge sebelumnya

Anda akan menemukan kode gambar terlihat seperti berikut.

<A onblur = "try {parent.deselectBloggerImageGracefully ();} catch (e) {}"  style = "display: block; margin: 10px 0px auto; text-align: center; kursor: pointer; kursor: tangan; width: 400px; height: 324px;"  border = "0" alt = "" id = "BLOGGER_PHOTO_ID_5406207422236379378" /> </ a>

Apa yang kita akan perlu menambahkan kode ini adalah bagian selanjutnya

rel = "lytebox" 

Contoh Kode Untuk Gambar Tunggal:

<A rel = "lytebox" onblur = "try {parent.deselectBloggerImageGracefully ();} catch (e) {}"  style = "display: block; margin: 10px 0px auto; text-align: center; kursor: pointer; kursor: tangan; width: 400px; height: 324px;"  border = "0" alt = "" id = "BLOGGER_PHOTO_ID_5406207422236379378" /> </ a> 

Dan Anda selesai.

Langkah 2.2 - Cara Membuat Galeri Foto Kelompok

Kami akan melakukan hal yang sama seperti langkah sebelumnya, tapi bukannya menambahkan Hanya

rel = "lytebox" 

kita harus menambahkan nama untuk kode ini sehingga akan menjadi

rel = "lytebox [groub1]" 

ketika Anda menambahkan kode ini untuk lebih dari satu gambar, semua gambar akan terbuka sebagai sebuah kelompok.

Contoh Kode Untuk Album Gambar:

<A rel = "lytebox [groub1]" onblur = "try {parent.deselectBloggerImageGracefully ();} catch (e) {}"  style = "display: block; margin: 10px 0px auto; text-align: center; kursor: pointer; kursor: tangan; width: 400px; height: 324px;"  border = "0" alt = "" id = "BLOGGER_PHOTO_ID_5406207422236379378" /> </ a>

 <A rel = "lytebox [groub1]" onblur = "try {parent.deselectBloggerImageGracefully ();} catch (e) {}"  style = "display: block; margin: 10px 0px auto; text-align: center; kursor: pointer; kursor: tangan; width: 400px; height: 324px;"  border = "0" alt = "" id = "BLOGGER_PHOTO_ID_5406207422236379378" /> </ a>

Langkah 2.2 - Cara Membuat Slide Show

Sebaliknya Dari menambahkan

rel = "lytebox [groub1]"

Kami akan menambahkan

rel = "lyteshow [groub1]"

Contoh Kode Untuk Slide Show:

<A rel = "lyteshow [groub1]" onblur = "try {parent.deselectBloggerImageGracefully ();} catch (e) {}"  style = "display: block; margin: 10px 0px auto; text-align: center; kursor: pointer; kursor: tangan; width: 400px; height: 324px;"  border = "0" alt = "" id = "BLOGGER_PHOTO_ID_5406207422236379378" /> </ a>

 <A rel = "lyteshow [groub1]" onblur = "try {parent.deselectBloggerImageGracefully ();} catch (e) {}"  style = "display: block; margin: 10px 0px auto; text-align: center; kursor: pointer; kursor: tangan; width: 400px; height: 324px;"  border = "0" alt = "" id = "BLOGGER_PHOTO_ID_5406207422236379378" /> </ a>

Demo

Klik di sini untuk melihat demo, terima kasih khusus untuk dolem

Langkah 2.3 - Dan Anda Dapat Menambah Ini Untuk Link

Kode link yang normal terlihat seperti ini

<a href="http://www.google.com" title="Search Google" rev="width: 400px; height: 300px;"> Google Search </ a> 

Kami akan menambahkan Kode berikut untuk itu.

rel = "lyteframe" 

Jadi Kode ini akan

<a rel="lyteframe" href="http://www.google.com" title="Search Google" rev="width: 400px; height: 300px;"> Google Search </ a> 

Dan Anda dapat menerapkan pengaturan yang sama untuk slide show dan kelompok foto untuk link.