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

(Traidatmui.com) – 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

Tham khảo e2interactive.com

Xem khác cùng chủ đề

3 nhận xét | Viết lời bình

5/08/2011 06:56:00 SA Trả lời

Rất hay anh ạ. Anh có thể tạo được chatbox trong blogspot không ạ? giúp em với

Admin
5/08/2011 09:04:00 SA Trả lời

Việc tạo chatbox trước đây a đã có bài giới thiệu em xem tại đây nhe.

10/22/2011 04:55:00 SA Trả lời

cuoilon
Qua tuyet ban ak.May thu thuat nay do ban hay ai viet ma hay vay
Ghe minh choi nha
http://luat1x1.blogspot.com

Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow Bạn nhập từ: votay more »

Giải pháp bán hàng online Số 1 Việt Nam
Lên đầu trang Xuống cuối trang