Tạo gallery ảnh slideshow ấn tượng cho blogspot với jQuery

Hiện có rất nhiều loại gallery ảnh, slideshow đẹp cho blogspot tuy nhiên khi áp dụng vào cho blog của mình thì không được như ý muốn hoặc có khi không chạy. Ở bài viết này mình xin chia sẻ với các bạn tạo một slideshow ảnh 3D cực kỳ ấn tượng và đẹp mắt bảo đảm làm được thành công !
Các bạn xem DEMO

Bước 1:
Vào Template > Edit HTML > Tìm thẻ </head> sau đó paste đoạn code sau trước nó

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
<script src='http://helplogger.googlecode.com/svn/trunk/SpaceGallery/eye.js' type='text/javascript'/>
<script src='http://helplogger.googlecode.com/svn/trunk/SpaceGallery/utils.js' type='text/javascript'/>
<script src='http://helplogger.googlecode.com/svn/trunk/SpaceGallery/spacegallery.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
(function($){
var initLayout = function() {
var hash = window.location.hash.replace('#', '');
var currentTab = $('ul.navigationTabs a')
.bind('click', showTab)
.filter('a[rel=' + hash + ']');
if (currentTab.size() == 0) {
currentTab = $('ul.navigationTabs a:first');
}
showTab.apply(currentTab.get(0));
$('#myGallery').spacegallery({loadingClass: 'loading'});
};

var showTab = function(e) {
var tabIndex = $('ul.navigationTabs a')
.removeClass('active')
.index(this);
$(this)
.addClass('active')
.blur();
$('div.tab')
.hide()
.eq(tabIndex)
.show();
};

EYE.register(initLayout, 'init');
})(jQuery)
//]]>
</script>

Chú ý: Nếu trong template bạn có đoạn màu đỏ thì không cần thêm đoạn đó

Bước 2:
Tìm thẻ ]]></b:skin> và paste đoạn code css sau trước nó

#myGallery {
width: 100%;
height: 400px;
}
#myGallery img {
border: 2px solid #52697E; 
}
a.loading {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXvYiBMcd3v8HA4Prv2d_5JWmvsceVhTA79p0vZzMZkzUenR9QPUs8HKtlzoIZCpMBV1sDNk0q8s4nZ2CK5S7MadEjin6hEfnsjtGJ61ryjwAZJq_4ZvZs3LTCgJZJkSzfrFezjEm_zsQb/s1600/ajax_small.gif) no-repeat center;
}
.spacegallery {
position: relative;
overflow: hidden;
}
.spacegallery img {
position: absolute;
left: 50%;
}
.spacegallery a {
position: absolute;
z-index: 1000;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Các bạn Save template lại

Bước 3:
Thêm đoạn code dưới dây vào bất cứ chỗ nào bạn muốn đặt slideshow, bạn có thể đặt trong trang hay bài viết (sử dụng công cụ soạn thảo HTML)

<div class="spacegallery" id="myGallery">
<img src="Image URL"/>
<img src="Image URL"/>
<img src="Image URL"/>
<img src="Image URL"/>
<img src="Image URL"/>
</div>

Các bạn thay thế Image URL bằng đường dẫn tới hình. OK vậy là bạn có thể tạo một gallery ảnh hay slideshow đẹp cho blogspot rồi, chúc các bạn thành công !