Adding Superbox (Light Box) Widget To Blogger Images. Fixed.

Wah aku da tutorial keren nih, pasti deh pada suka yaitu Adding Superbox (Light Box) Widget To Blogger Images. Fixed.

Yah tentang widget ini yaitu :

• Pertama-tama kita tambahkan kode widget template kami,
• Anda akan dapat Link widget ini untuk satu gambar anda di blogger.
• Anda dapat menggunakannya untuk membuat galeri foto.
• Anda dapat membuat Peragaan Slide dengan itu.
• Anda dapat menambahkannya ke link Anda.
  

Bagaimana widget ini bekerja ???

1. Pertama-tama kita tambahkan kode widget template kami,
2. Kemudian ketika kita menambahkan gambar ke posting baru kita harus Link ke widget dengan menambahkan kode kecil untuk itu dengan mengubah modus menulis pos dari menulis untuk html jangan khawatir itu mudah, lanjutkan membaca untuk mengetahuinya

Step 1

> Edit html and find the following code.">Pertama ke dashboard akun blogger Anda dan arahkan ke Layout>> Edit html dan cari kode berikut.

</head>

Dan Sebelum kode di atas tambahkan kode berikut.

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

Sekarang kami telah menambahkan semua kode ke template, kita lanjut ke step selanjutnya.


Step 2 - Bagaimana cara menggunakannya ??

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 sedikit kode ke kode gambar. dan Anda dapat menemukan kode gambar di daerah pasca menulis ketika Anda mengubah mode dari bidik untuk mengedit html Silakan lihat gambar berikutnya.

Step 2.1 – Add It To Single Image

Pergi ke account blogger, mulai menulis posting Anda dalam modus normal (menulis)
Dan setelah Anda menambahkan gambar ke posting Anda, silahkan mengubah modus untuk mengedit html, lihat sebelumnya imsge

Anda akan menemukan kode gambar tampak seperti berikut ini.
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKmt2r9CTAVmvb7JIefacuNGmNs3Pa6D24ACkAMOxfwdD70tBObndiWVDLIZnjwCbXpx46XLlDFVki1_FFKnY8R_Z89PdcLGBajh9DAzlkEGJedFuj8APJYrjfmwFnyKeoXI_AMNmYaYdb/s1600/3924705805_15d638ca8d_o.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 324px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKmt2r9CTAVmvb7JIefacuNGmNs3Pa6D24ACkAMOxfwdD70tBObndiWVDLIZnjwCbXpx46XLlDFVki1_FFKnY8R_Z89PdcLGBajh9DAzlkEGJedFuj8APJYrjfmwFnyKeoXI_AMNmYaYdb/s400/3924705805_15d638ca8d_o.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5406207422236379378" /></a>

Nah kita harus menambahkan ini :

rel="lytebox"

Contoh Kode Untuk Single FOTO nih:

<a rel="lytebox" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKmt2r9CTAVmvb7JIefacuNGmNs3Pa6D24ACkAMOxfwdD70tBObndiWVDLIZnjwCbXpx46XLlDFVki1_FFKnY8R_Z89PdcLGBajh9DAzlkEGJedFuj8APJYrjfmwFnyKeoXI_AMNmYaYdb/s1600/3924705805_15d638ca8d_o.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 324px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKmt2r9CTAVmvb7JIefacuNGmNs3Pa6D24ACkAMOxfwdD70tBObndiWVDLIZnjwCbXpx46XLlDFVki1_FFKnY8R_Z89PdcLGBajh9DAzlkEGJedFuj8APJYrjfmwFnyKeoXI_AMNmYaYdb/s400/3924705805_15d638ca8d_o.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5406207422236379378" /></a>


Beres deeeehhh ....

Eits masih ada beberapa trick lagi penyempurnaan di atas :
kita pelajari bersama :

How To Make Photo Group Gallery

Kita akan melalakukan hal yang sama seperti di atas hanya saja ditambah saja

rel="lytebox"

kita harus menambahkan nama untuk kode ini begitu
rel="lytebox[groub1]"

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

Contoh Kode Untuk Foto Album:

<a rel="lytebox[groub1]" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKmt2r9CTAVmvb7JIefacuNGmNs3Pa6D24ACkAMOxfwdD70tBObndiWVDLIZnjwCbXpx46XLlDFVki1_FFKnY8R_Z89PdcLGBajh9DAzlkEGJedFuj8APJYrjfmwFnyKeoXI_AMNmYaYdb/s1600/3924705805_15d638ca8d_o.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 324px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKmt2r9CTAVmvb7JIefacuNGmNs3Pa6D24ACkAMOxfwdD70tBObndiWVDLIZnjwCbXpx46XLlDFVki1_FFKnY8R_Z89PdcLGBajh9DAzlkEGJedFuj8APJYrjfmwFnyKeoXI_AMNmYaYdb/s400/3924705805_15d638ca8d_o.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5406207422236379378" /></a>

<a rel="lytebox[groub1]" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKmt2r9CTAVmvb7JIefacuNGmNs3Pa6D24ACkAMOxfwdD70tBObndiWVDLIZnjwCbXpx46XLlDFVki1_FFKnY8R_Z89PdcLGBajh9DAzlkEGJedFuj8APJYrjfmwFnyKeoXI_AMNmYaYdb/s1600/3924705805_15d638ca8d_o.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 324px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKmt2r9CTAVmvb7JIefacuNGmNs3Pa6D24ACkAMOxfwdD70tBObndiWVDLIZnjwCbXpx46XLlDFVki1_FFKnY8R_Z89PdcLGBajh9DAzlkEGJedFuj8APJYrjfmwFnyKeoXI_AMNmYaYdb/s400/3924705805_15d638ca8d_o.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5406207422236379378" /></a>


How To Make A Slide Show

Sebaliknya tadi kita menambahkan :

rel="lytebox[groub1]"

Sekarang kita menambahkan ini :
rel="lyteshow[groub1]"

Contoh Code Untuk SLIDE SHOWnya begini:

<a rel="lyteshow[groub1]" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKmt2r9CTAVmvb7JIefacuNGmNs3Pa6D24ACkAMOxfwdD70tBObndiWVDLIZnjwCbXpx46XLlDFVki1_FFKnY8R_Z89PdcLGBajh9DAzlkEGJedFuj8APJYrjfmwFnyKeoXI_AMNmYaYdb/s1600/3924705805_15d638ca8d_o.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 324px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKmt2r9CTAVmvb7JIefacuNGmNs3Pa6D24ACkAMOxfwdD70tBObndiWVDLIZnjwCbXpx46XLlDFVki1_FFKnY8R_Z89PdcLGBajh9DAzlkEGJedFuj8APJYrjfmwFnyKeoXI_AMNmYaYdb/s400/3924705805_15d638ca8d_o.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5406207422236379378" /></a>

<a rel="lyteshow[groub1]" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKmt2r9CTAVmvb7JIefacuNGmNs3Pa6D24ACkAMOxfwdD70tBObndiWVDLIZnjwCbXpx46XLlDFVki1_FFKnY8R_Z89PdcLGBajh9DAzlkEGJedFuj8APJYrjfmwFnyKeoXI_AMNmYaYdb/s1600/3924705805_15d638ca8d_o.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 324px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKmt2r9CTAVmvb7JIefacuNGmNs3Pa6D24ACkAMOxfwdD70tBObndiWVDLIZnjwCbXpx46XLlDFVki1_FFKnY8R_Z89PdcLGBajh9DAzlkEGJedFuj8APJYrjfmwFnyKeoXI_AMNmYaYdb/s400/3924705805_15d638ca8d_o.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5406207422236379378" /></a>



Nah ini dia DEMO alias Contohnya KLIK DISINI Nah di KLIK ajah tuh gambarnya sesuai dengan judulnya ada single, group dan slide. MED MENCOBA ...


sumber + tanks to dolem