Menampilan file PDF, WORD, EXCEL, dan PPT dalam Artikel Joomla dengan Plugin Google Docs Viewer - Jejaring Kimia

Hot

Agustus 06, 2017

Menampilan file PDF, WORD, EXCEL, dan PPT dalam Artikel Joomla dengan Plugin Google Docs Viewer

Joomla merupakan salah satu Content Management System (CMS) yang sangat menarik untuk dipelajari. Tidak seperti blogger, joomla dapat diinstall pada server jaringan lokal, sama halnya dengan wordpress dan CMS lain. Salah satu kelebihan Joomla adalah tersedianya beragam extension berupa plugin yang dapat digunakan sesuai kebutuhan, tanpa harus mengerti bahasa html. Cukup dengan mendownload plugin yang ingin digunakan, lalu install ke dalam Joomla kita.

Salah satu ekstensi atau plugin yang penting untuk diinstall pada CMS Joomla adalah Google Docs Viewer. Google Docs Viewer merupakan salah satu ekstensi gratis dari Petteri Kivimäki yang berfungsi untuk menampilkan file atau dokumen office seperti pdf, word, excel, dan ppt ke dalam artikel Joomla. Jika pada blogger kita cukup mengcopy script embed file office ke dalam postingan, di Joomla kita harus menginstal terlebih dahulu plugin atau ekstensi Google Docs Viewer, barulah dokumen office dapat ditampilkan.

Simak tahapan menampilkan file office pdf, word, excel, dan ppt ke artikel Joomla dengan ekstensi Google Docs Viewer berikut ini:

#1 Kunjungi situs Joomla! Extensions Directory, masukkan kata kunci plugin yang ingin sobat cari, misal "embed pdf free" atau langsung ke link Google Docs Viewer (klik di sini)



#2 Klik download seperti pada gambar berikut ini



Jika muncul pesan seperti di bawah ini, klik Continue, tunggu sampai unduhan selesai


#3 Login ke Control Panel Joomla, pilih Extensions > Manage > Install, seperti gambar berikut ini


#4 Selanjutnya pilih Upload Package File, klik Or browse for file, cari file ekstensi yang telah sobat download tadi, seperti gambar berikut


#5 Cari plugin Google Docs Viewer dengan mengklik Extensions > Plugin, masukkan kata kunci plugin yang sudah ikita install tadi, misal Google, Docs, atau embed, seperti gambar berikut


#6 Klik Content - Embed Google Docs Viewer untuk melihat deskripsi plugin dan syntax yang akan digunakan untuk menampilkan dokumen atau fileoffice dalam artikel Joomla, seperti gambar berikut ini.


Berdasarkan gambar pada point #6, terdapat beberapa syntax yang dapat kita gunakan, pilih salah satu, misalnya saya memilih syntax nomor 4 berikut ini.
{google_docs}document_url|width:200|height:200|border:1|border_style:solid|border_color:#000000{/google_docs}
#7 Ganti document_url dengan url file pdf yang bisa sobat dapatkan dengan mengupload dokumen / file office ke penyedia layanan penyimpanan data seperti google drive, dengan melakukan langkah-langkah berikut ini:

#7.1 Buka google drive, login atau signup dengan akun google soobat, klik di sini.
#7.2 Klik NEW > File upload > lalu cari file yang ingin sobat upload ke google drive, seperti gambar berikut ini.


#7.3 Jika sudah berhasil, klik kanan dokumen yang diupload, pilih preview seperti gambar berikut


#7.4 Arahkan kursor ke pojok kanan atas, pilih titik 3 (more actions) > klik open in a new window seperti gambar berikut


#7.5 Jika dokumen berhasil dibuka, copy url dokumen pada browser seperti gambar berikut.


Sekarang kita kembali ke Control Panel Joomla untuk membuat artikel dengan konten file / dokumen office di dalamnya.

#8 Buka Content > Article > New Article. Ketikkan judul pada kolom title, buka halaman konten dengan tampilan code, lalu pastekan syntax plugin Google Docs Viewer seperti gambar berikut.


#9 Ganti ukuran lebar dan panjang tampilan dokumen yang diinginkan, lalu ganti document_url dengan url google drive pada tahap #7.5 tadi sehingga seperti berikut ini.
{google_docs}https://drive.google.com/file/d/0B8OqKX8evaIGYS1wTHk4S2daRkE/view|width:200|height:200|border:1|border_style:solid|border_color:#000000{/google_docs}
#10 Ganti view (warna merah) pada document_url dengan edit, sehingga menjadi seperti berikut ini: 
{google_docs}https://drive.google.com/file/d/0B8OqKX8evaIGYS1wTHk4S2daRkE/edit|width:800|height:1000|border:1|border_style:solid|border_color:#000000{/google_docs}
 Jika sudah berhasil sampai dengan tahap 10, simpan artikel sobat dengan mengklik tombol Save pada kiri atas.

#11 Untuk melihat dokumen office yang kita sisipkan pada artikel Joomla, copy url dengan cara sederhana berikut ini.

#11.1 Buka halaman halaman artikel dalam mode Editor (samping Code), klik Insert/ Edit Link seperti gambar berikut.


#11.2 Jika sudah terbuka, pilih Content > cari dan klik artikel Menampilan File Office dalam Artikel Joomla, seperti gambar berikut


Copy url pada kolom di atas, lanjutkan ke tahap 11.3

#11.3 Untuk mengecek apakah konten yang dibuat berhasil atau tidak, tambahkan url pada point 11.2 pada domain web sobat, misalnya http://smkn1tumbangtiti.sch.id/index.php?option=com_content&view=article&id=71:menampilkan-file-office-dalam-artikel-joomla&catid=2:artikel. Jika sobat menginstal Joomla di komputer lokal atau jaringan LAN, tambahkan di belakang url localhost atau IP server seperti berikut http://localhost/index.php?option=com_content&view=article&id=71:menampilkan-file-office-dalam-artikel-joomla&catid=2:artikel

Hasilnya seperti gambar berikut ini.




Demikian tutorial menampilkan file atau dokumen offie pdf, word, excel, dan ppt dalam artikel Joomla dengan plugin Google Docs Viewer, semoga dapat membantu rekan. 


Rino Safrizal
Jejaring Kimia Updated at: Agustus 06, 2017

Post Top Ad