Demo.
Để cài đặt plugin, bạn hãy thực hiện theo các bước sau đây.
Bước 1. Đăng nhập Blogger >> Design >> Edit HTML. Đặt đoạn code sau đây vào trước thẻ </head>.
<script src='http://ajax.googleapis.com/ajax/libs/prototype/1.7/prototype.js'/>
<script src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8/scriptaculous.js'/>
<script src='/lightwindow.js' type='text/javascript'/>
<style type='text/css'>
#lightwindow_overlay {display: none; visibility: hidden; position: absolute; top: 0px; left: 0px; width: 100%; height: 100px; z-index: 500;}
#lightwindow {display: none; visibility: hidden; position: absolute; z-index: 999; line-height: 0px;}
#lightwindow_container {display: none; visibility: hidden; position: absolute; padding: 0; margin: 0;}
* html #lightwindow_container {overflow: hidden;}
#lightwindow_contents, #lightwindow_loading {-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;-moz-box-shadow:0 0 40px #DDD inset;-webkit-box-shadow:0 0 40px #DDD inset;box-shadow:0 0 40px #DDD inset;filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FF000000', EndColorStr='#FF333333');}
#lightwindow_contents {background-color:transparent;overflow:hidden;padding:15px;position:relative;z-index:0;}
#lightwindow iframe {background-color:#EEE;}
#lightwindow_loading {background-color:#333;height:100%;left:0;position:absolute;top:0;width:100%;z-index:9999;}
#lightwindow_loading img {float:left;margin:30px 0 0 50px;}
#lightwindow_loading span {color:#DDD;float:left;font-size:14px;margin:42px 0 0 5px;}
#lightwindow_loading span a {color:#FFF;cursor:pointer;}
#lightwindow_loading_shim {display: none; left: 0px; position: absolute; top: 0px; width: 100%; height: 100%;}
#lightwindow_navigation {position: absolute; top: 0px; left: 0px; display: none;}
#lightwindow_navigation_shim {display: none; left: 0px; position: absolute; top: 0px; width: 100%; height: 100%;}
#lightwindow_navigation a, #lightwindow_navigation a:link, #lightwindow_navigation a:visited, #lightwindow_navigation a:hover, #lightwindow_navigation a:active {}
#lightwindow_previous, #lightwindow_next {width: 49%; height: 100%; background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlV3pKj5DaZrkzd-EhTwPfgrp3nj8gy8DBzv_19XFPa1xy_PhBgp-M-BbrLRfRj2Dw-n-QoacLk49Sba1BqYriaByNjv8qNZQ_b8dzvqeuDpXWJW7G7wReGYfWZNauGJXSwz1ecoyNmk0/s0/blank.gif) no-repeat; display: block;}
#lightwindow_previous {float: left; left: 0px;}
#lightwindow_next {float: right; right: 0px;}
#lightwindow_previous:hover, #lightwindow_previous:active {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjItOu8x1HtvwzJOSoDZd2sv_nOWUOGwQcfEXLtl3qJsXKmv6TtM2Ka6hY2ICaaANgDf-4Y9j7OTGwhWivfgEI736P_mH5m6nVX_Tt6JaLO-9MTMO7b4UadSJCZg96wFiJk-wUNIk-KXuI/s0/LWicoleft.png) no-repeat 20% 50%;}
#lightwindow_next:hover, #lightwindow_next:active {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2kWV81rzyO3gTaL1L4hJVoBYP7-JkaPuSgh0WksIJ9tQBstNWHp8k5XDK81fY28oJPqlnbFVP71x6f9PPoYnapB3L4s1Za1rkjDv3z-eGFuUQjMFYa_nePM_0vdmExSFoxRFbeKSRl90/s0/LWicoright.png) no-repeat right 50%;}
#lightwindow_previous_title, #lightwindow_next_title {display: none;}
#lightwindow_galleries {display:none !important;}
#lightwindow_data {position: absolute;}
#lightwindow_data_slide {display:none !important;}
#lightwindow_title_bar {height: 25px; overflow: hidden;}
#lightwindow_title_bar_title {color:#DDD;float:left;font-size:14px;line-height:25px;margin-left:20px;text-align:left;}
a#lightwindow_title_bar_close_link, a#lightwindow_title_bar_close_link:link, a#lightwindow_title_bar_close_link:visited {-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;-moz-box-shadow:0 0 17px #FFF inset;-webkit-box-shadow:0 0 17px #FFF inset;box-shadow:0 0 17px #FFF inset;background-color:#000;color:#AAA;cursor:pointer;display:block;float:right;font-family:Verdana;font-weight:bold;height:22px;line-height:22px;padding:0 30px;text-align:right;text-transform:lowercase;}
a#lightwindow_title_bar_close_link:hover {color:#FFF;background-color:#222}
#lightwindow p {color: #000; padding-right: 10px;}
a.lightwindow {cursor:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR0NgnrP9No8RPLTN60AYytC71ohpwA3EgpKyeBHzRru6m2msDA_VJbFBKdqdcgpmm3jqDnj1JrUydOl7ZhncpQqDDQJO11AN3hw0MXhRzH5e5Nerr7hmiGmH7jeqG9I0zPpMa31IKWX4/s0/magplus.gif), pointer !important;}
a.lightwindow img {cursor:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR0NgnrP9No8RPLTN60AYytC71ohpwA3EgpKyeBHzRru6m2msDA_VJbFBKdqdcgpmm3jqDnj1JrUydOl7ZhncpQqDDQJO11AN3hw0MXhRzH5e5Nerr7hmiGmH7jeqG9I0zPpMa31IKWX4/s0/magplus.gif), pointer !important;}
</style>
Bạn nên tải về file js lighwindow.js sau đó upload lên host hoặc lên googlecode để sử dụng cho blogspot của bạn.
Lưu Template.
Bước 2. Thiết lập cấu trúc HTML cho các liên kết như sau:
<a class='lightwindow' href='#' params='lightwindow_width=600,lightwindow_height=600,lightwindow_loading_animation=true' rel='nofollow' title='Title Text'>Text Link</a>
Chú ý điều chỉnh width (600) và height (600) tương ứng với chiều rộng và chiều cao của cửa sổ hiệu ứng sao cho tương thích với từng trường hợp áp dụng.
Để áp dụng plugin này cho hình ảnh, bạn có thể sử dụng cấu trúc HTML như sau:
<a class="lightwindow" href="URL_hình ảnh"><img src="URL_hình ảnh" width="350px" height="250px"/></a>
Unknown
15 June, 2015 15:17
toms shoes
chanel online shop
chanel handbags
abercrombie outlet
tory burch outlet
oakley sunglasses outlet
kate spade outlet
tory burch shoes
kate spade uk
nike air max
gucci outlet
gucci outlet
ralph lauren outlet
michael kors handbags
hollister clothing store
air max 90
tory burch handbags
burberry handbags
coach outlet
cheap jordans
gucci uk
ray ban uk
prada outlet
cheap jerseys
soccer jerseys
true religion jeans
ray ban sunglasses
burberry outlet
ray bans
chanel outlet
coach outlet online
oakley sunglasses wholesale
christian louboutin outlet
tory burch outlet online
fitflops sale clearance