Cài đặt plugin Lightwindow cho blogspot

Tên tiện ích: Lightwindow Plugin for Blogspot
Tính năng: Tạo hiệu ứng độc đáo cho các liên kết
Ưu điểm: Dễ cài đặt, dễ tùy biến, load nhanh
Yêu cầu: CSS, Javascript, Scriptaculous, HTML
Người thực hiện: Huỳnh Nhật Hà
Đối tượng sử dụng: người dùng Blogger và các nền tảng khác.

Demo.

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=&#39;#FF000000&#39;, EndColorStr=&#39;#FF333333&#39;);}
#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/AVvXsEiqWXdXjKdbAigkAgh6e-OTp3UKF31cDcHL1Qgp9cVqbXA8DhkLa5EmIEaRStHT6IF5o3zqLhDR6-KWBNUKTP5sOfSs5IeW4rUEn6FbSphWKNpAVopPMwAeSY7jZ-HMIlxxyn8NYDDTKH8/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/AVvXsEjGF-VnvbYnzXigeQ0d-66NYP7cXFWfz1f1GUYnpwKbvfDTLfXNM8DM6W0FzZrRuwTDYGwZcoW46HbPuNptyiTUKx8Bp_sIo-NnBL0DUWtfOEK4XVquzDhrrooNKAKnS2L566Me6xMx04Q/s0/LWicoleft.png) no-repeat 20% 50%;}
#lightwindow_next:hover, #lightwindow_next:active {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtWOLArNq88jY3cKmu-vE1xEcDWX0QOZyZ1fsJU-YFx4P1wOxACw4gd9MUe_Bck9rn4TXfC5m91Xl10uf3dE8i1VyVkgcq8U7sjpht3cs2bQTEvFXxAVukTnM6TWndIZNnZK1Qd8ZEcXo/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/AVvXsEhaKOJ5kEOz0qfdGJBmwzCotmmhv7Hq7zDnivw6VKprepRFP67QVTjw7j62XtvoQaCJolIBcwIon9tDvqni30smpZ4iAD1gCOy9cUmmEvlEU0uXnSvIqNoVs4aWBb-Bl8K9z6HihZGy0EQ/s0/magplus.gif), pointer !important;}
a.lightwindow img {cursor:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaKOJ5kEOz0qfdGJBmwzCotmmhv7Hq7zDnivw6VKprepRFP67QVTjw7j62XtvoQaCJolIBcwIon9tDvqni30smpZ4iAD1gCOy9cUmmEvlEU0uXnSvIqNoVs4aWBb-Bl8K9z6HihZGy0EQ/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.