Cara Bikin Lightbox Pada Blogspot

Tau kan apa itu lightbox? itu tuuu, yang bisa bikin gambar kamu membesar.. kalo pengen jelas coba aja klick gambar di bawah ini!!!

Ok, begini ni caranya:

1,Login ke Blogger , Dashboard , Design ,terus Edit HTM, download template (buat jaga2)

2,Cari kode :
</head>

3,Masukan kode dibawah ini sebelum </head>
<style>
#lightbox{    position: absolute;    left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhibj3FweCrcwiK84d77xqcBB4BeHHHaBjwFCHdCtZfKJo3poTx6kcMBKglGai6VqrsyszUKfc1nrklJWrILMrvp29IzPTXxvOvWOKbX-zweEHBqx5RIxh8crmqD6fdgQ7wI-gEvYwHqiQ/) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD-k4eV86TPueBsj9hIbuQeyY8cLHN_DpXZn-QOxwTsy34uExJ6v-jKsDh6jXDCUMtH0uOVf07zJjnSxcebuOZGzcmBE_YUOk6fd1GVYYXXYQzC8RBDXmULEll49eqj8pwUGeD0i69Fak/) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%    ; }

#imageData{    padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold;    }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;    }
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;}

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
round-color: #000; }
lute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
round-color: #000; }
</style>
<script src='http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js' type='text/javascript'/>
<script src='http://files.bloggerplugins.org/lbox/js/scriptaculous.js' type='text/javascript'/>
<script src='http://blogergadgets.googlecode.com/files/lightbox.js' type='text/javascript'/>

Save/simpan template!

4,Untuk memasang Lightbox efek pada postingan ,ketika editi post ,click pada Edit HTML .

Terus gunakan kode berikut rel="lightbox" title="judul gambar" pada gambar.
Sedang untuk gambar dalam bentuk album,pake yang ini... rel="lightbox[nama album]" title="judul album"
jika anda ingin menambahkan foto lain ke album ini, upload gambar kedua dan gunakan rel="lightbox[nama album]" title="judul/keterangan untuk album kedua"
gimana... mudah nggak???   selamat mencoba