Trình diễn ảnh dạng Slide Pro cho Blogspot ~ Thủ Thuật

Mình thấy ở site e2interactive.com cung cấp một dạng trình diễn ảnh rất Pro, bạn có thể vào đây để xem cách trình diễn ảnh. Để có thể làm được cách trình diễn ảnh theo kiểu này thì chúng ta phải thực hiện các bước rất phức tạp, ở đây mình chỉ chia sẽ cách tạo sơ bộ không đi chi tiết từng chỉ mục. Nếu bạn có thắc mắc hãy để lại comment bên dưới mình sẽ chia sẽ thêm.

Hình ảnh minh họa

» Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn code bên dưới vào sau thẻ <head>

Bạn thay các link màu đỏ trong code thành link ảnh mà bạn muốn trình diễn trong tiện ích này, bạn chú ý các số màu xanh trong code là số đánh dấu thứ tự của các ảnh.

5. Save template lại và trở về phần tử trang (Page Elements)
6. Thêm 1 HTML/Javascript và thêm vào code bên dưới

<div class="e2_photo_gallery">
<div class="hd"><div class="c"></div></div>
<div class="bd"> <div class="c"> <div class="s">
<div id="gallery" align="center"><div id="main_image_wrapper"><div id="iptc_btn"></div><div id="imgloader"> </div><div id="iptc_info">
</div>
<div id="pn_overlay">

<a href="javascript:previmage(current_imgid);" id="prev" class=".toolTip" tooltitle="Previous Image" ></a>
<a href="javascript:nextimage(current_imgid);" id="next" tooltitle="Next Image"></a> </div>
</div>
<div align="center" class="spacing"> </div>

<div id="thumbdisplay">
<div align="center" id="photocount"> <script type="text/javascript">document.write("1 of "+tempgallery.length+" Photos");</script> </div>

<div id="thumbtoggler"><a href="#" onclick="setActiveStyleSheet('none'); return false;"><img src="http://www.e2interactive.com/wp-content/plugins/e2_photo_gallery/rsrc/none.gif" alt="Minimalistic" class="toolTips" title="Minimalistic::Click to Display Simple Design Version" /></a> <a href="#" onclick="setActiveStyleSheet('lightgray'); return false;"><img src="http://www.e2interactive.com/wp-content/plugins/e2_photo_gallery/rsrc/lightgray.gif" class="toolTips" title="Light Gray Design::Click to Display Light Gray Design Version" alt="Light Gray Design" /></a> <a href="#" onclick="setActiveStyleSheet('gray'); return false;"><img src="http://www.e2interactive.com/wp-content/plugins/e2_photo_gallery/rsrc/gray.gif" class="toolTips" title="Dark Gray Design::Click to Display Dark Gray Design Version" alt="Dark Gray Design" /></a> <a href="#" onclick="setActiveStyleSheet('black'); return false;"><img src="http://www.e2interactive.com/wp-content/plugins/e2_photo_gallery/rsrc/black.gif" class="toolTips" title="Black Design::Click to Display Black Design Version" alt="Black Design" /></a> <a href="#" onclick="setActiveStyleSheet('default'); return false;"><img src="http://www.e2interactive.com/wp-content/plugins/e2_photo_gallery/rsrc/e2.gif" class="toolTips" title="(E)2 Design::Click to Display (E)2 Design Design Version" alt="(E)2 Design" /></a> <img src='http://www.e2interactive.com/wp-content/plugins/e2_photo_gallery/rsrc/info_btn.gif' onclick='loadinfo();' border="0" class="toolTips" title="Show IPTC Info::Click to Display IPTC Info" alt="Show IPTC Info" /> <a href="javascript:thumbs();" ><img src="http://www.e2interactive.com/wp-content/plugins/e2_photo_gallery/rsrc/thumbgallery.gif" border="0" class="toolTips" title="Toggle Thumbnails::Click to Toggle Thumbnails" alt="Toggle Thumbnails" /></a></div>
<div class="clear"></div>
</div><div align="center" class="spacing"> </div>
<div id="thumbhide"><div id="thumbbox"><div id="thumb_container"><div id="thumbgall"><div id="thumbs">

<div id="widthbox">
<a href="#" onclick="getstarted(600, 399, 'imgloader', 0, '0', current_imgid);return false;"><img src="http://www.e2interactive.com/e2photogallerythumbs/DSC_0031.jpg" alt="Moon Sliver" title="Moon Sliver" tooltitle="Moon Sliver" class="toolTipImg" /></a>
<a href="#" onclick="getstarted(600, 399, 'imgloader', 1, '1', current_imgid);return false;"><img src="http://www.e2interactive.com/e2photogallerythumbs/DSC_1352.jpg" alt="Tree Line Sunset" title="Tree Line Sunset" tooltitle="Tree Line Sunset" class="toolTipImg" /></a>
<a href="#" onclick="getstarted(600, 399, 'imgloader', 2, '2', current_imgid);return false;"><img src="http://www.e2interactive.com/e2photogallerythumbs/DSC_3297.jpg" alt="" title="" tooltitle="" class="toolTipImg" /></a>
<a href="#" onclick="getstarted(600, 399, 'imgloader', 3, '3', current_imgid);return false;"><img src="http://www.e2interactive.com/e2photogallerythumbs/DSC_3405.jpg" alt="Winter Creek" title="Winter Creek" tooltitle="Winter Creek" class="toolTipImg" /></a>
<a href="#" onclick="getstarted(600, 399, 'imgloader', 4, '4', current_imgid);return false;"><img src="http://www.e2interactive.com/e2photogallerythumbs/DSC_4052.jpg" alt="Look up" title="Look up" tooltitle="Look up" class="toolTipImg" /></a><a href="#" onclick="getstarted(600, 399, 'imgloader', 5, '5', current_imgid);return false;"><img src="http://www.e2interactive.com/e2photogallerythumbs/photo1.jpg" alt="" title="" tooltitle="" class="toolTipImg" /></a>
</div>

</div>
</div>
</div>
<div id="back">

<script type="text/javascript">if(thumbnailnum>maxthumbvisible){document.write("<div id='leftmore'><ul><li><a href=\"javascript:checkbutton(addposition('minus'));movethumbs('plus');\"><img src="http://www.e2interactive.com/wp-content/plugins/e2_photo_gallery/rsrc/buttonblank.gif" width='15' height='115' border='0' /></a></li></ul></div>");}</script>
</div>
<div id="more">
<script type="text/javascript">if(thumbnailnum>maxthumbvisible){document.write("<div id='rightmore'><ul><li><a href=\"javascript:checkbutton(addposition('plus'));movethumbs('minus');\"><img src="http://www.e2interactive.com/wp-content/plugins/e2_photo_gallery/rsrc/buttonblank.gif" width='15' height='115' border='0' /></a></li></ul></div>");}</script>

</div></div></div>
<div align="center" class="spacing"> </div><div id="imgtitle"></div></div></div></div></div><div class="ft"><div class="c"></div></div></div>

Bạn thay các link ảnh (link màu đỏ) thành link của các ảnh thumbnail tương ứng với các ảnh ở bước 4. Các số màu xanh chính là thứ tự của ảnh tương ứng với các ảnh ở bước 4.

7. Save tiện ích lại

Chúc bạn thành công

Địa chỉ bài viết: http://www.traidatmui.com/2011/04/trinh-dien-anh-dang-slide-pro-cho.html#ixzz1YPbin1lb
Nguồn: TRAIDATMUI.com