Iseng iseng nulis tutorial ahhh..(sambil nunggu scanner bener lagi..baru deh bisa post design lagi..abis scannernya rusak(instalannya), sedangkan banyak design saya yang belum saya scan..hehe..gini jadinya..hehe), ok semua....hari ini aq posting tutorial tentang "image gallery step carousel viewer" yang aku adaptasikan dari dynamicdrive (sebuah website yang menyajikan css+js untuk web). Tutorial ini aq tulis dan aq coba setelah melihat blog athletes-sports.blogspot.com blog milik Gdpermana yang dihiasi gallery step carousel di bagian atas postingannya, dan ternyata template yang dia pakai adalah template hasil kreasi Kang Rohman jadi deh aq langsung manuju blog kang rohman dan download template serupa untuk melihat rahasia kode apa yang ada di balik gallery step carousel. dan setelah ditelusuri html template tersebut aq menemukan kode yang aneh yang biasanya tidak ada di html template standar dan ternyata kode itu adalah kode kode css+js milik dynamicdrive (langganan aq belajar css+js) langsung deh aq menuju web Dynamicdrive dan langsung menemukan kode yang aq cariii ( horreeee...akhirnya ketemu juga..ujung ujungnya dioper ke dynamicdrive juga...). sebenarnya Dynamicdrive sudah menjelaskan tutorial ini lengkap dan jelas dalam bahasa inggris, tapi kekurangan mereka yaitu tidak menjelaskan bagaimana caranya meyisipkan kode kode css+js tersebut ke dalam page script blog, jadi deh aq praktekkan di blogku dengan mata yang sudah ngantuk(waktu itu saya buatnya malem jam 3an sekalian blogkamling). untuk membuat step carousel, template anda harus sudah ada widget/kolom persis dibawah header seperti template punyaku ini...caranya mudah berikut scriptnya :
1. login dulu ke blogger anda
2. klik tata letak
3. klik edit html
4. klik "expand template widget"
5. Cari kode ]]></b:skin>.
6. Copy paste kode berikut persis di atas kode ]]></b:skin>.
.adscolumn{
width:933px;
padding:10px 3px;
background:#fff;
margin:5px 10px 0px 10px;
text-align:center;
border:1px solid #C0C0C0;
}
.adscolumn .widget{
}
7. Lihat ke bagian bawah, lalu cari kode berikut :
<div id='main-wrapper'>
8. Copy paste kode berikut persis di atas kode <div id='main-wrapper'>
<b:section class='adscolumn' id='adscolumn' preferred='yes'/>
9. Klik tombol SIMPAN TEMPLATE.
9. Klik tombol SIMPAN TEMPLATE.
Ok..langkah diatas adalah langkah membuat elemen persis dibawah header, coba anda clik tata letak, lalu elemen halaman sudah adakah elemen halaman tersebut dibawah header yang nantinya jadi seperrti ini :
Nah yang dilingkari brush hitam itulah yang disebut elemen percis dibawah header..(maaf lingkarannya pletat pletot..hehe)
Ok sekarang lanjut,,sekarang kita mulai masuk untuk membuat step carousel, sekarang anda kembali ke edit html. cari kode ]]></b:skin> kemudian paste kode css berikut ini diatas kode ]]></b:skin>
.carousel{
float:left;
margin: 0;
padding:0px;
}
.carousel .widget {
width: 980px;
background:#c4d5ec;
margin: 0;
padding:0;
}
.carousel h2{
display:none;
}
.stepcarousel{
position: relative;
overflow: scroll;
width: 940px;
height: 160px;
}
.stepcarousel .belt{
position: absolute;
left: 0;
top: 0;
}
.stepcarousel .panel{
float: left;
overflow: hidden;
margin: 5px;
width: 140px;
}
.stepcarousel .panel img{
float: left;
background:#940f04;
margin: 5px;
padding:5px;
border:1px solid #ccc;
}
.stepcarousel .panel img:hover{
background:#ffffff;
}
float:left;
margin: 0;
padding:0px;
}
.carousel .widget {
width: 980px;
background:#c4d5ec;
margin: 0;
padding:0;
}
.carousel h2{
display:none;
}
.stepcarousel{
position: relative;
overflow: scroll;
width: 940px;
height: 160px;
}
.stepcarousel .belt{
position: absolute;
left: 0;
top: 0;
}
.stepcarousel .panel{
float: left;
overflow: hidden;
margin: 5px;
width: 140px;
}
.stepcarousel .panel img{
float: left;
background:#940f04;
margin: 5px;
padding:5px;
border:1px solid #ccc;
}
.stepcarousel .panel img:hover{
background:#ffffff;
}
berikutnya kita langsung masuk ke kode javascriptnya, sebelumnya tolong klik link dibawah untuk melihat seperti apa kode javascript yang akan kita pakai, lalu copy kode tersebut.
jquery-1.2.6.pack.js (klik kanan, open link in new tab)
stepcarousel.js (klik kanan, open link in new tab)
nah, sudah lihat bagaimana kode javascriptnya..?, jangan dipikirkankan..!!!, copy ajah langsung lalu paste kode javascript tersebut diatas kode </head>
nah selesai sudah penyisipan kode di page html, kalau anda belum yakin jangan langsung save tuh kode...lihat dulu kebenarannya dengan mengklik "pratinjau", setelah yakin tidak ada kesalahan, baru anda langsung save.
eits,,belum selesai sobat,,,sekarang kita langsung menuju tata letak, lalu elemen halaman dan klik tambah gatdet di kolom elemen halaman dibawah header yang baru saja kita tambahkan, nih saya kasih lihat lagi gambarnya :
gimana..sudah jelas kan,,? nah lalu pilih html/javascript, kronologisnya gini nih..
stepcarousel.setup({
galleryid: 'mygallery', //id of carousel DIV
beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
panelclass: 'panel', //class of panel DIVs each holding content
autostep: {enable:true, moveby:1, pause:3000},
panelbehavior: {speed:500, wraparound:false, persist:true},
defaultbuttons: {enable: true, moveby: 1, leftnav: ['http://i41.tinypic.com/j0b0j7.png', 30, 60], rightnav: ['http://i41.tinypic.com/mcu1zk.png', -65, 60]},
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: ['inline'] //content setting ['inline'] or ['external', 'path_to_external_file']
})
</script>
<div id="mygallery" class="stepcarousel">
<div class="belt">
<!-- change the links with your own links -->
<div class="panel">
<a href="http://fajardesign.blogspot.com/2008/10/vampire-hunter-rumanian.html"><img border="1" src="http://photos-318.friendster.com/e1/photos/81/33/27313318/1_581635038l.jpg"/></a>
</div>
<div class="panel">
<a href="http://fajardesign.blogspot.com/2008/10/vampire-hunter-chinese.html"><img border="1" src="http://photos-318.friendster.com/e1/photos/81/33/27313318/1_945981278l.jpg"/></a>
</div>
<div class="panel">
<a href="http://fajardesign.blogspot.com/2008/10/vampire-hunter-eghyptian.html"><img border="1" src="http://photos-318.friendster.com/e1/photos/81/33/27313318/1_401707626l.jpg"/></a>
</div>
<div class="panel">
<a href="http://fajardesign.blogspot.com/2009/01/perempuan-solo.html"><img border="1" src="http://photos-318.friendster.com/e1/photos/81/33/27313318/1_556499958l.jpg"/></a>
</div>
</div>
</div>
<div class="panel">
<a href="http://fajardesign.blogspot.com/2009/01/perempuan-solo.html"><img border="1" src="http://photos-318.friendster.com/e1/photos/81/33/27313318/1_556499958l.jpg"/></a>
</div>
<a href="http://fajardesign.blogspot.com/2009/01/perempuan-solo.html"><img border="1" src="http://photos-318.friendster.com/e1/photos/81/33/27313318/1_556499958l.jpg"/></a>
</div>
sebenarnya widget ini bisa disimpan dimanapun selain di bawah header..namun pada umumnya widget ini disimpan tepat dibawah header...
selamat mencoba..
begitu caranya perlu dicoba juga nih mas, ntar kucoba diblog ku yang satu lagi khusus test template
nice tutorial sob..
thx banget uda bagi2 ilmunya.. :D :D
manstab bro
keep posting
mantap sob!!
nice info sob..cuman blum mau pasang, tkut blognya berat...
Wah, sob... ini tutor yang keren abiss, tapi sayang... blogku bukan blog design... sorri ya nggak ku praktekin... Tapi yang jelas tutor ini jarang yang posting... kapan-kapan kalau buat blog design, nanti aku praktekin deh
gua nggak ngerti pa sih..gallery image step....
tersebut terangin dong.....abis baru sih..he...
tengkiu....
sumpah brur saya gak ngerti bahasa HTML sampae sebegitunya.......tapi hasilnya keren tuh!?!?!?
hahahaha jadi pengen deh!!!!!
jadi pengen nyoba,,
@ sosial seni budaya bisnis
step carousel itu nama tutorial ini..hasilnya ya yang anda lihat di bagian atas template ini ( yang gallery design..) itu tuh yang jalan dan ada tombol ke kanan dan kekirinya
hehe..
Wa..., banyak banget yg harus dikerjakan.
Bisa gak ya aku nyoba ??
wahh manteb bro...klo aku bingung mo pasang apa hehehe
Wah...bagus nich...emmm...perlu dicoba
hwaaaaaa... asiiiikk.. nah ini nih yg aku cari.. :D
wah tengs bangets yak.. mudah2an bisa cepet aku bikin nih di blog aku..
btw kalo gambarnya bannyakk apa ga tambah berat yak loading blog-na???
tengkyu banget yah.. :)
Wah, keren nih postingan..
Sukses ya..
seep dipraktekin
Wah, keren... tapi lumayan panjang jalanya. Kebetulan kmaren saya baru dapet template baru yang mirip2 step crousel, tapi udah otomatis geraknya, sekalian ditambah postingan.
Anyway, thanks buat triks nya. Akan dicoba segera... :)
Owya, di blog saya juga ada beberapa tips dan trik blog yang layak buat diterapkan. silahkan kunjungi saja blog saya. thanks...
apakah carosel akan membebani loading blog kita ? karena ada beberapa image yang diloading pada saat bersamaan.
bagus juga tampaknya...nanti lah tak coba ;)
wah bagus nih, tp rada gaptek, ntar deh dicoba-coba. makasih sharingnya.
tips yang bagus sob...!!!!!btw,,,,
bentrok nggak ma script yang smile icon ato yang lainnya..??
kalo imagenya di taruh dalam postingan bisa gak sob...?????
Tipsx mantap,.. entar saya coba praktekin...
Yahuuud Tips ya sobat...nice post...
panjang aja nih tutorialnya tp ky'a cool nih sob..tar dicoba...deh
langsung k TKP
Mantab banget nih bang.....
weeeh dapet inspirasi nih gw...
keren bgt nih bro....ntar sy coba
fajar, saya mengedit page source saya pake dream weaver, apakah caranya sama dgn diatas ? :)
manstabs.....banget....
wah.....kali ini sahabat ngedesign blog nih..
keren kawan
good posting nih :) cuma apa ga bikin blognya jadi berat bro?
Fajar design sudah makin luas saja nih topik nya sampai ke tutorial....hehhehe...
Mantap sob...teruslah memposting sesuatu yang menarik tapi bisa dinikmati manfaatnya oleh orang banyak seperti tutorial ini
wow keren
tengkyu udah sharing, coba dulu ah
aku belum nyoba sih.....tapi cukup informatif.
duh kok kaya'e ribet, tapi memberatkan kerja blogku nggak ya (jangan tanya dong praktekin langsung he he he..)
nice info sob
Huaaaaaaaa..... ternayta ribet yack...
sangat bagus..tapi sedikit ribet...ntar perlu dicoba dilain template sobat.....tahnks atas nice postingnya....
makasih tutorialnya.. wah.. boleh nih diajarin tentang bahasa html. soalnya baru mulai melek nih..
jadi kalau nyisipkan kode-kode ngak salah lagi..
kalau yang sekarang, belum berani masukkan, :-) soalnya pasti tambah lama ngeditnya
Jar ... maaf nih, baru dateng ... koneksi putus ... hampir sebulan daku tak main internet ... hihihi ... skarang tulis tutorial yah kawan ^.^
Ok deh ... tetap semangat !
mantabz,.. terus berkarya bro,.. :D
cocok ne buat pajang foto di blog...
waduh sob... rumit banget saya sbenernya alergi ma scripts xixixixi...... tapi saya aan berjuang untuk mencobanya thx...sob
bos di template saya ga ada main_wraper nya, gmn tuh?
thanks..sob, lam kenal
mas saya mau nanyak ne, saya baru saja pakai widget ini, tapi kenapa setelah saya pasang, ada salah satu widget saya yang tidak aktif/rusak.
mohon maaf sebelumnya karena saya pemula blog,
@mas kiswanto...coba tunjukan blog anda sepeti apa hasilnya... biar saya lihat dulu :D
makasih bang fajar tipsnya, tak coba yah