Membuat efek slide show Smooth Gallery

Sunday, February 8, 2009

Membuat efek slide show Smooth Gallery

30 comments Sunday, February 08, 2009 Posted by ANDIE
Labels: Efek Blog Menengah

Sebelumnya ini request special dari Mas Gede Permana dan Meindra dan banyak teman-teman yang lain yang tidak bisa saya sebutkan satu persatu.

1. Copy Paste Script Berikut:

<link rel="stylesheet" type="text/css" href="http://www.geocities.com/adeha_182/jd2.gallery.css" />

<script src='http://www.geocities.com/adeha_182/mootools2.v1.11.js' type='text/javascript'/>

<script src='http://www.geocities.com/adeha_182/jd2.gallery.js' type='text/javascript'/>

+ Login ke Blogger kemudian pilih "Layout"
+ Klik pada "Edit HTML" dan paste kode diatas dibawah <head>

2. Masih di "Edit HTML", Copy kode dibawah ini:

<div id='isismoothgallery'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<style>
#myGallery, #myGallerySet, #flickrGallery {
width: 500px;
height: 400px;
z-index:5;
border: 1px solid #000;
margin: 0px 0px 0px 30px;
}

.jdGallery .slideInfoZone
{
position: absolute;
z-index: 10;
width: 100%;
margin: 0px;
left: 0;
bottom: 0;
height: 85px;
background: #000;
color: #fff;
text-indent: 0;
overflow: hidden;
}
</style>
<script type='text/javascript'>
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: true
});
}
window.addEvent('domready',startGallery);
</script>

<div id='myGallery'>
<div class='imageElement'>
<h2>Featured Article #1</h2>
<p>This is an example of a Blogger post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can ...</p>
<a class='open' href='http://www.blogger.com/demo/church/featured/featured-article-1.htm' title='Read More'/>
<img class='full' src='http://www.revolutiontwo.com/demo/church/images/01.png'/>
<img class='thumbnail' src='http://www.revolutiontwo.com/demo/church/images/01.png'/>
</div>

<div class='imageElement'>
<h2>Featured Article #2</h2>
<p>This is an example of a Blogger post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can ...</p>
<a class='open' href='http://www.blogger.com/demo/church/featured/featured-article-2.htm' title='Read More'/>
<img class='full' src='http://www.revolutiontwo.com/demo/church/images/02.png'/>
<img class='thumbnail' src='http://www.revolutiontwo.com/demo/church/images/02.png'/>
</div>

<div class='imageElement'>
<h2>Featured Article #3</h2>
<p>This is an example of a Blogger post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can ...</p>
<a class='open' href='http://www.blogger.com/demo/church/featured/featured-article-3.htm' title='Read More'/>
<img class='full' src='http://www.revolutiontwo.com/demo/church/images/03.png'/>
<img class='thumbnail' src='http://www.revolutiontwo.com/demo/church/images/03.png'/>
</div>

</div>
</b:if>
</div>

Paste kode diatas, persis diatas kode ini :

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>

+ Ganti tulisan Featured Article #1, Featured Article #2, Featured Article #3 yang bercetak tebal dengan Judul artikelmu.

+ Ganti tulisan yang berwarna Merah sesuai ukuran lay out mu.

width: 500px; (lebar Smooth Gallery)

height: 400px; (tinggi Smooth Gallery)

margin: 0px 0px 0px 30px; (jarak atas,kanan,bawah,kiri Smooth Gallery)

+ Ganti tulisan yang berwarna Biru dengan Ringkasan artikelmu.

+ Ganti tulisan yang berwarna Hijau dengan Link artikelmu.

+ Ganti tulisan yang berwarna Ungu dengan Link Gambarmu.

+ Untuk menambah elemen slideshow, copy kode yang berkedip - kedip dan paste dibawahnya kode tersebut.

3. Simpan dan Lihat Hasilnya. 'Trust Me It's Work'

4. Posisi kode-kode semuanya :

<html>
<head>


<link rel="stylesheet" type="text/css" href="http://www.geocities.com/adeha_182/jd2.gallery.css" />

<script src='http://www.geocities.com/adeha_182/mootools2.v1.11.js' type='text/javascript'/>

<script src='http://www.geocities.com/adeha_182/jd2.gallery.js' type='text/javascript'/>


<b:skin><![CDATA[/*

DISINI TEMPAT KODE2 CSS

]]></b:skin>
</head>

<body>
<div id='main-wrapper'>
<div id='isismoothgallery'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<style>
#myGallery, #myGallerySet, #flickrGallery {
width: 400px;
height: 300px;
z-index:5;
border: 1px solid #000;
margin: 0 0 30px;
}

.jdGallery .slideInfoZone
{
position: absolute;
z-index: 10;
width: 100%;
margin: 0px;
left: 0;
bottom: 0;
height: 85px;
background: #000;
color: #fff;
text-indent: 0;
overflow: hidden;
}
</style>
<script type='text/javascript'>
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: true
});
}
window.addEvent('domready',startGallery);
</script>
<div id='myGallery'>
<div class='imageElement'>
<h2>Featured Article #1</h2>
<p>This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can ...</p>
<a class='open' href='http://www.revolutiontwo.com/demo/church/featured/featured-article-1.htm' title='Read More'/>
<img class='full' src='http://www.revolutiontwo.com/demo/church/images/01.png'/>
<img class='thumbnail' src='http://www.revolutiontwo.com/demo/church/images/01.png'/>
</div>

<div class='imageElement'>
<h2>Featured Article #2</h2>
<p>This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can ...</p>
<a class='open' href='http://www.revolutiontwo.com/demo/church/featured/featured-article-2.htm' title='Read More'/>
<img class='full' src='http://www.revolutiontwo.com/demo/church/images/02.png'/>
<img class='thumbnail' src='http://www.revolutiontwo.com/demo/church/images/02.png'/>
</div>

<div class='imageElement'>
<h2>Featured Article #3</h2>
<p>This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can ...</p>
<a class='open' href='http://www.revolutiontwo.com/demo/church/featured/featured-article-3.htm' title='Read More'/>
<img class='full' src='http://www.revolutiontwo.com/demo/church/images/03.png'/>
<img class='thumbnail' src='http://www.revolutiontwo.com/demo/church/images/03.png'/>
</div>

</div>
</b:if>
</div>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>

</body>
</html>

5. Contoh silahkan klik disini samplesmoothgallery.blogspot.com/

Comments

30 comments to "Membuat efek slide show Smooth Gallery"

Admin said... February 9, 2009 at 5:38 PM: buset dah sob,, panjang bener postingannya,? kira? bisa ga yah??hehe
nti deh butuh waktu ekstra nih tuk wujudin nya..
Anonymous said... February 9, 2009 at 7:30 PM: Aku gak bisa2....masalah pertama,waktu upload k Geocities,salah satu JSnya gak bisa di upload....yang kedua,waktu q coba copy JS dari source ni blog,tetep aja nyantol....
Mas,kalo script yang "main" dan sbginya tu gak ada gimana????
ANDIE said... February 9, 2009 at 8:46 PM: @gdpermana dan cupid-alert " sebenarnya ada yg lebih mudah yaitu copy paste kan script ini dibawah <head>


<link charset='utf-8' href='http://www.geocities.com/adeha_182/jd.gallery.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='http://www.geocities.com/adeha_182/mootools.v1.11.js' type='text/javascript'></script>
<script src='http://www.geocities.com/adeha_182/jd.gallery.js' type='text/javascript'></script>


lalu ikuti langkah nomor 10 sampai selesai.
ANDIE said... February 9, 2009 at 9:10 PM: @cupid-alert "udah bner nama ketiga filenya? (jd.gallery.css, mootools.v1.11.js, dan jd.gallery.js)"

INGAT,utk upload di Geocities nama file jangan ada spasi.

Kalau MAIN g ada cari kode ini MAINSECTION
M said... February 11, 2009 at 4:08 PM: Udah beres mas....!!!sip tenan pokok.e.......
Poison-Tech' blog said... February 23, 2009 at 6:28 PM: sob,, tuk link image nya harus upload ke photobucket atau geocities dulu ga??
Anonymous said... February 23, 2009 at 7:18 PM: sob,, pertanyaan yang tadi...
tutorialnya gampang banget kok dimengertinya,, ga susah di cerna.. thanks yaw.. bagi2 lagi yah kalo ada efek yang lain..hehe
Anonymous said... March 3, 2009 at 4:54 PM: makasih atas semua info bloging nya ;)
ebeeth said... March 8, 2009 at 2:20 PM: wualah,panjang amat boss scriptnya...
Poison-Tech' blog said... March 8, 2009 at 3:21 PM: yang ini juga sob,, mau saya apply.. mantep dah pokoknya..

saya lagi pengen tau tentang template dulu.. blog saya yang pertama mau saya ganti templatenya tapi masih belajar dulu takut gagal total nti malah acak2n... twngkiyu berat sob..
Anonymous said... March 8, 2009 at 9:47 PM: wah...selain tertarik sama slide ini..saya juga tertarik dengan link buat menyembunyikan artikel yang panjang...gimana caranya yaa..? share dong.

salam kenal sebelumnya :)
Anonymous said... March 8, 2009 at 9:57 PM: yang seperti punya mu loh...bukan readmore biasa..nih yang bertuliskan seperti ini :

[+/-] Read Full Post...

lalu untuk menutupnya kembali yang bertuliskan seperti ini :

[+/-] summary post

gimana caranya bro ..?
Anonymous said... March 9, 2009 at 9:09 PM: mas, gimana cara membuat kotak berwarna putih dibelakang dlide show smooth gallery nya
Anonymous said... March 13, 2009 at 4:01 PM: sob,, bos,, mau upload file buat slide show di akun geocities sendiri tapi ga tau nih, yang harus di upload yang mana?????? mohon petunjuk guru?....
Mr.Ozay said... April 6, 2009 at 11:47 AM: waw..keren nih..dah aku coba dan berhasil...kira2 untuk upload gambarnya berapa kali berapa yach?
ANDIE said... April 6, 2009 at 6:23 PM: @ozay 'utk upload gmbrnya terserah ukurannya.yg pasti jgn lebih dari
* width: 500px; (lebar Smooth Gallery)

* height: 400px; (tinggi Smooth Gallery)
Pelatihan NLP said... April 7, 2009 at 3:03 PM: Mas Andie, sy sdh cobam dan bisa berhasil, tapi ke-3 file dibawah ini sdh TIDAK ADA? sehingga slide tdk jalan?

http://www.geocities.com/adeha_182/jd.gallery.css
http://www.geocities.com/adeha_182/mootools.v1.11.js
http://www.geocities.com/adeha_182/jd.gallery.js

Sy coba langsung akses ke tiga file tsb, ERROR.

Gimana solusinya mas?
ANDIE said... April 7, 2009 at 10:17 PM: @pelatihan NLP 'oo itu..bukan file nya g ada, tpi krna overquota/over bandwith dari geocities.coba situ upload sendiri aja ke3 file di atas.caranya liat artikel ku yg ini http://andidwih.blogspot.com/2009/03/cara-upload-file-di-geocities.html
Ishak said... June 15, 2009 at 4:39 PM: gimana cara pasang di wordpress? tolong dong.
eka said... September 7, 2009 at 8:09 AM: trimakasih infonya.......n slam kenal
Anonymous said... September 30, 2009 at 8:25 PM: adoeh mas kok gak bisa yach?
Anonymous said... September 30, 2009 at 9:03 PM: argh, kok masih gak bisa mas?!
Anonymous said... September 30, 2009 at 9:05 PM: emang biasa error ya mas?
Blog ku yang satu dulu bisa kok...
eh sekarang aku liat di blog baruku, error...
piye?
Anonymous said... September 30, 2009 at 9:06 PM: kadang error kadang enggak...
mungkin biarin aja ya... ntar juga bener sendiri...
Pilwali Surabaya 2010 said... October 7, 2009 at 8:10 PM: error nech, ada yg lebih mudah nggak? trims
Jie said... December 20, 2009 at 10:35 PM: Mudah saja kok..ane udah bisa..
coba liat ini http://mykomputerz.blogspot.com/
Fajri Photography said... March 6, 2010 at 4:54 AM: priview nya gimana kang??
maksudnya jadinya. abis males kotak2 template
kalo ancur aku ga ngerti :p
ANDIE said... March 7, 2010 at 11:41 AM: @fajriphoto.com : liat aja preview nya di blog saya yg lain di samplesmoothgallery.blogspot.com.

utk script bisa pakai ini (yg baru)
http://sites.google.com/site/andidwih/javascript/jd.gallery.css
http://sites.google.com/site/andidwih/javascript/mootools.v1.11.js
http://sites.google.com/site/andidwih/javascript/jd.gallery.js
Pentatopia said... December 21, 2010 at 2:26 PM: Smooth Gallery masih tetap keren..hehe
scriptnya jangan d.hapus mas, biar bisa kepake terus..wkkwkwk
thanks banget buat mas andie..

-Cupidalert/Meindra-
adit said... March 24, 2011 at 12:11 AM: cara buat nya gmana bro..
gambarnya diupload kemana y

ANDIE BLOG | spesial efek blog

Sunday, February 8, 2009