Trình diễn ảnh dạng Slide Pro cho Blogspot


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>
<link href='http://traidatmui.110mb.com/Myfile/css/e2.css' rel='stylesheet' title='default' type='text/css'/>
<link href='http://traidatmui.110mb.com/Myfile/css/e2photo_black.css' rel='alternate stylesheet' title='black' type='text/css'/>
<link href='http://traidatmui.110mb.com/Myfile/css/e2photo_gray.css' rel='alternate stylesheet' title='gray' type='text/css'/>
<link href='http://traidatmui.110mb.com/Myfile/css/e2photo_lightgray.css' rel='alternate stylesheet' title='lightgray' type='text/css'/>
<link href='http://traidatmui.110mb.com/Myfile/css/e2photo.css' rel='alternate stylesheet' title='none' type='text/css'/>

<script type="text/javascript" src="http://www.e2interactive.com/wp-content/plugins/e2_photo_gallery/js/mootools.v1.11.js"></script>
<script type="text/javascript">
var transspeed=500;
var fadespeed=300;
</script>
<script type="text/javascript" src="http://www.e2interactive.com/wp-content/plugins/e2_photo_gallery/js/e2photo.js"></script>
<script type="text/javascript" src="http://www.e2interactive.com/wp-content/plugins/e2_photo_gallery/js/styleswitcher.js"></script>

<script type="text/JavaScript">
var tempgallery = new Array()
tempgallery[0]=['http://www.e2interactive.com/e2photogalleryimages/DSC_0031.jpg', '600', '399', '70 K', 'Moon Sliver', 'e2interactive', 'Copyright 2006, e2interactive', 'Taken Just after Sunset.', '0']
tempgallery[1]=['http://www.e2interactive.com/e2photogalleryimages/DSC_1352.jpg', '600', '399', '98.69 K', 'Tree Line Sunset', 'e2interactive', 'Copyright 2006, e2interactive', 'Laying on the Grass Looking up at a sunset just over the trees', '1']
tempgallery[2]=['http://www.e2interactive.com/e2photogalleryimages/DSC_3297.jpg', '600', '399', '125.32 K', '', 'e2interactive', 'Copyright 2006, e2interactive', '', '2']
tempgallery[3]=['http://www.e2interactive.com/e2photogalleryimages/DSC_3405.jpg', '600', '399', '86.52 K', 'Winter Creek', 'e2interactive', 'Copyright 2006, e2interactive', '', '3']
tempgallery[4]=['http://www.e2interactive.com/e2photogalleryimages/DSC_4052.jpg', '600', '399', '137.8 K', 'Look up', 'e2interactive', 'Copyright 2006, e2interactive', 'Taken of an old building. I love the Brick', '4']
tempgallery[5]=['http://www.e2interactive.com/e2photogalleryimages/photo1.jpg', '600', '399', '107.9 K', '', '', '', '', '5']
var currentwidth=600; //độ rộng của ảnh đầu tiên
var currentheight=399; //chiều cao của ảnh đầu tiên
var firstimagewidth=currentwidth;
var firstimageheight=currentheight;
</script>
<script type="text/javascript" src="http://www.e2interactive.com/wp-content/plugins/e2_photo_gallery/js/e2photo2.js"></script>

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

Đăng nhận xét

item