Cara Membuat Slideshow Gambar / Image Untuk Blog / Website Dengan Wowslider

0 komentar Diposting oleh Robby S. di 20.19


  
   Jumpa lagi dg blog abal'' ini, kali ini saya akan share CAra Membuat Slideshow Gambar/ Image Untuk Blog /Website yg saya dapat dr blog tetangga. itung'' buat dokumentasi pribadi saya sewaktu'' membutuhkan tutor membuat slideshow sendiri.
 WOW Slider adalah aplikasi yang bisa kita gunakan untuk membuat sebuah slider / slideshow dengan mudah dan cuman modal klik klak klik doang. Gak pake skill coding dll. Lagipula akhir-akhir ini slideshow merupakan salah satu unsur wajib bagi sebuah website, karena akan menambah daya tarik tersendiri.
Nah karena aplikasi ini gratisan / free pasti gak lepas dari yang namanya copyright / watermark yang cukup mengganggu dan pastinya kurang sedap dipandang mata. Nah disini juga saya bahas cara simplenya gmana cara menghilangkan “gangguan2″ tersebut.

Download

Aplikasi WOW Slider dapat kalian download dengan gratis disini http://wowslider.com/index.html#download

Kelebihan

1. Kita bisa membuat slideshow dengan sangat mudah. Nah asik tuh untuk orang seperti saya yang gak bisa coding.
2. Configurasinya cukup bagus dan gak terlalu susah

Kekurangan

1. Akan terdapat watermark pada setiap gambar yang akan kita pilih untuk dijadikan slideshow.
2. Watermark berupa anchor text yang terdapat disebelah kanan bawah slideshow kita.
3. Transition effect / Effect slideshownya yang mau kita pilih hanya bisa 1 macam.

Well.. mungkin ada beberapa kelebihan dan kekurangan yang saya lewatkan tapi namanya juga gratisan so bersyukurlah... Wokwokowkowkwokwok…

Pengoperasian

Gak ada yang terlalu susah dalam hal pengoperasian. Setelah melakukan penginstalan kita tinggal jalankan aplikasinya dan akan mendapat tampilan seperti berikut.


[Image: 1.jpg]

Lalu langkah awal yang perlu kita lakukan adalah meng-klik tanda plus hijau untuk memilih gambar yang akan kita jadikan slideshow.

[Image: 2.jpg]

Nah setelah gambar sudah selesai kita pilih, lanjut ke menu Gallery – Properties atau klik icon obeng maka akan muncul tampilan sebagai berikut.

[Image: 3.jpg]

- Slider title = Nama title dari slider yang kita buat
- Auto play Slide Show = Slide show akan otomatis berjalan ketika website dibuka
- Pause on mouseover = Ketika mouse diarahkan ke slideshow maka akan berhenti
- Stop slideshow after one loop = Jadi setelah semua gambar yang telah kita pilih sudah ditampilkan maka slideshownya akan berhenti
- Show descriptions = Menampilkan deskripsi gambar
- Show Prev/Next buttons = Menampilkan tombol prev dan next
- Show bullet navigation = Menampilkan thumbnail kecil dari gambar slideshow kita
- Thumbnail preview = Tinggal kita pilih mau diletakkan dimana thumbnail preview dari slideshow kita

Kalau gak mau ribet dilewatkan aja bagian ini karena settingan seperti itu juga gak buruk kok . Sekarang lanjut ke Tab Images disebelahnya.

[Image: 4.jpg]

Gak terlalu susah ngutak-atik bagian ini. Kita tinggal pilih template yang mau kita pake, ukuran gambar, effect slideshow dll. Sayangnya template yang bisa digunakan tidak terlalu banyak tapi dengan modal ngerti sedikit CSS dan Photoshop kita juga bisa kok buat sendiri templatenya.

Lanjut ke bagian Publish. Mudah kan ?

[Image: 5.jpg]

Watermark oh Watermark

Sebenernya gak ada maksud jahat juga, itu merupakan bentuk penghargaan kita sama si pembuat aplikasi yang udah buat capek-capek dan dikasih gratis pula.  Tapi ya mau bagaimana lagi, client kita bakalan marah2 klo sampai ada sesuatu yang kurang enak dipandang mata di websitenya.

Tanda seperti ini akan ada pada setiap Images, Thumbnail dan Layout pada slideshow kita.

[Image: 6.jpg]

Untuk images dan thumbnailnya gak terlalu susah lah menghilangkannya, cukup replace aja dengan gambar aslinya.  Gampang kan ? Nah sekarang untuk menghilangkan watermark pada tampilan layout slideshow kita sekarang buka file script.js yang terdapat pada folder engine1.

[Image: 7.jpg]

Berantakan banget yah? Tapi untungnya tidak dilakukan enkripsi / encoding sama sekali tapi hanya diminimize agar ukuran file tidak terlalu besar so kita tinggal rapihin aja susunan code javascriptnya disini jsbeautifier.org. Copy dan paste kode tersebut dan klik tombol Beauty Javascript. Maka susunan kodenya sudah agak terlihat manusiawi

[Image: 8.jpg]

Langkah selanjutnya yah tinggal kita copy paste lagi hasilnya tadi ke file script.jsnya. Permasalahan belum selesai Bro, code yang digunakan untuk menghandle watermark tersebut adalah dibagian berikut.
Code:

var d = c ? $(document.createElement("A")) : c;
if (d) {
d.css({
position: "relative",
display: "block",
'background-color': "#E4EFEB",
color: "#837F80",
'font-family': "Lucida Grande,sans-serif",
'font-size': "11px",
'font-weight': "normal",
'font-style': "normal",
'-moz-border-radius': "5px",
'border-radius': "5px",
padding: "1px 5px",
width: "auto",
height: "auto",
margin: "0 0 0 0",
outline: "none"
});
d.attr({
href: "ht" + "tp://" + t.toLowerCase()
});
d.html(t);
d.bind("contextmenu", function (eventObject) {
return false;
});
c.append(d);
}


Tinggal hapus aja sehingga keseluruhan codenya menjadi seperti gambar di bawah
Dan akhirnya hilang sudah watermark yang cukup mengganggu.



[Image: 9.jpg]
Diposkan oleh di  

 

Label:

Langganan: Postingan (Atom)

Blogger Template by Blogcrowds