Komunitas Cloud Indonesia

Mengimport Javascript Slider Dan Menggunakan Custom Code Pada site.com, Salesforce

Penulis :   |   October 7, 2012

Bila sebelumnya saya pernah menulis tentang bagaimana cara membuat menu di site.com, kali ini saya akan memberika tutorial bagaimana cara untuk memasukan javascript serta memasukan custom code pada site.com. Bila sebelumnya belum pernah mencoba site.com studio, anda bisa lihat artikel sebelumnya disini.

Saya akan jelaskan langsung, karena untuk langkah-langkah awal sudah ada pada artikel sebelumnya. Pertama kita buat new site terlebih dahulu, sebagai contoh disini saya membuat site dengan nama lemonade.

Kemudian buat page template baru. Klik Page templates yang ada disebelah kiri, kemudian klik New Page Template. Maka akan tampil seperti tampilan dibawah. Kemudian beri nama page template tersebut main. Pilih layout standard saja kemudian untuk lebar pilih fixed saja, 800px.

 

Sebelum meng-import javascript kedalam site.com, sebagai contoh disini saya menggunakan javasrcipt-slider, maka download terlebih dahulu file nya pada link berikut http://www.menucool.com/javascript-image-slider . kemudian klik download

 

Bila sudah extract file tersebut, kemudian karena kita akan menggunakan themes 1 dari js-slider-image tersebut maka masuk folder themes kemudian masuk folder 1. Setelah selesai kembali lagi ke site.com studio.

Kemudian klik assets, nah disini kita akan mengimport semua file yang ita butuhkan mulai dari js, css sampai gambar. Pertama kita akan mengimport gambar, saya akan mengimport 2 gambar beresolusi 700x300px.

Klik assets kemudian klik images kemudian klik import.


Kemudian klik browse, pilih gambar beresolusi 700x300px yang ingin anda gunakan.

Kemudian import javasript slider, sama seperti langkah sebelumnya hanya saja kita kali ini mengimport file javascript

 


Kemudian kita juga harus mengimport js-image-slider.css, untuk memperbaiki tampilan slider.

Bila semua telah di import. Maka sekarang anda bisa klik 2 kali main page template yang telah anda buat sebelumnya. Maka anda akan melihat tampilan seperti gambar berikut.

 

Kemudan klik folder main yang ada pada sebelah kiri site.com studio, kemudian arahkan mouse ke arah sebelah kanan layar. Maka anda akan melihat tab properties. Di tab properties tersebut scroll mouse kebawah dan kemudian cari tulisan head script kemudian klik tanda plus. Disini kita akan memasukan javascript kedalah site kita.

pilih file yang telah dimport sebelumnya yang bernama js-image-slider.js

Kemudian ulangi hal yang sama seperti diatas hanya sekarang untuk stylesheet, scroll mouse kebawah kemudian pada box stylesheet klik tanda plus. Kemudian masukan js-image-slider.css

Kemudian Add Page Elemen pada Panel#Content klik custom code,

Kemudian isi dengan baris-baris HTML berikut,

<div id=”slider”>

     <img src=”/image-slider-1.jpg” alt=”ini gambar ke 1″ />

     <img src=”/image-slider-2.jpg” alt=”ini gambar ke 2″ />

     <img src=”/image-slider-3.jpg” alt=”ini gambar ke 3″ />

  </div>

Kemudian klik save and close.

Sekarang klik preview page, maka anda akan melihat tampilan slider dari gambar-gambar yang telah anda import ke dalam site.com studio.

Terimakasih, semoga menambah pengetahuan.

  1. Lowongan .NET Developer
  2. Lowongan Android Developer
  3. Lowongan Java Developer
  4. Jakarta Cloud Computing Meetup 09.2016
  5. Big Data dengan Google Cloud

Penulis :

Saya seorang mahasiswa teknik informatika yang berlatih untuk berbagi pengetahuan lewat tulisan. Sambil menyelam minum air, sambil menulis sambil belajar. Saya coba nikmati proses nya.

Komentar

Leave a Reply

Your email address will not be published. Required fields are marked *