Space Gallery:Galeri Imej Yang Sangat Berbeza
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivJF2orpDz4M6ew0Fh2t9ektvvmZGGd6XK1YwdDBYqJlsNaNUOVTk9UKdNr6Neuj2MajuyPkJ4VG2U-BcDuNqAfAir3hC7PYERcRx08ihGSP15IoNrWhDOlOwfkg3OLcKHfNQfBJCZvB8/) 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.
Ikut Langkah IniUntuk 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivJF2orpDz4M6ew0Fh2t9ektvvmZGGd6XK1YwdDBYqJlsNaNUOVTk9UKdNr6Neuj2MajuyPkJ4VG2U-BcDuNqAfAir3hC7PYERcRx08ihGSP15IoNrWhDOlOwfkg3OLcKHfNQfBJCZvB8/) 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.
Post a Comment:
Nota: Hanya ahli blog ini sahaja yang boleh mencatat ulasan.