28 November 2011

Space Gallery:Galeri Imej Yang Sangat Berbeza

Tiada ulasan:
 
Snapshot:

Pamerkan imej di blog anda dengan cara yang menarik.Gambar akan beralih ke gambar yang lain apabila gambar yang dihadapan di klik
Ikut Langkah Ini

Untuk menggunakan galeri ini,mula-mula download file ini,unzip dan upload ketiga tiga skrip ke dalam mana mana free hosting.

Klik untuk download file

1.Log masuk ke blogger dashboard anda

2.Dekat Blogger Dashboard anda-->Klik Design --> Edit Html

Cari kod
</head>

Pastekan kod dibawah sebelum/diatas kod </head>


<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'/>
<script src='URL file eye.js' type='text/javascript'/>
<script src='URL file utils.js' type='text/javascript'/>
<script src='URL file 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>


Masukkan link URL file yang korang hostingkan tadi menggantikan URL file didalam kod diatas.Sila masukkan ikut susunan yang ditunjukkan

3.Seterusnya cari kod ]]></b:skin>

Pastekan kod dibawah sebelum/diatas kod ]]></b:skin>


#myGallery {
width: 100%;
height: 400px;
}
#myGallery img {
border: 2px solid #52697E;
}
a.loading {
background: url(http://2.bp.blogspot.com/_dsEG33PDaHw/TZUg9AbaMDI/AAAAAAAABQQ/fm_HIeX8MPg/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%;
}


4.Save template.

5.Pergi ke layout page atau design-->Add a gadget-->Html Javascript

Pastekan kod dibawah dekat situ

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

<img src="URL imej"/>

<img src="URL imej"/>

<img src="URL imej"/>

<img src="URL imej"/>

</div>


Gantikan URL imej dengan url gambar anda.Selesai.

Tiada ulasan:

Catat Ulasan

TERIMA KASIH UNTUK KOMENKOMEN TERBARU

 
© 1986. Aideal Fitri - fitri1986 Malaysian Blogger