RSS

Membuat presentasi di WordPress menggunakan Shortcodes

16 Agu

Halo🙂
Sebelumnya saya pernah membuat postingan tentang memasukkan presentasi power point ke dalam wordpress menggunakan slide share. Nah, baru-baru ini wordpress mengeluarkan shortcodes untuk membuat presentasi di dalam wordpress. Jadi dengan menggunakan shotcodes ini saya sekarang bisa membuat presentasi di wordpress tanpa harus menggunakan slide share🙂

Berikut ini adalah contoh presentasi yang saya buat dengan menggunakan shortcodes

Slideshow ini tak bisa dijalankan. Coba segarkan laman atau buka dengan browser lain.

Apa itu shortcodes? Shortcodes adalah html versi wordpress untuk membantu pengguna wordpress dalam membuat postingan mereka. Dengan shortcodes user bisa menempelkan video ke dalam postingan mereka, memasukkan suara dan sebagainya. Mungkin kapan” akan saya bahas tentang shortcodes lebih lanjut, sekarang kita mulai saja mencoba membuat presentasi dengan shortcodes ini🙂

Berikut adalah shortcodes yang digunakan :

  • [presentation]

Tag utama, fungsinya sama dengan tag [html] pada html, jadi tag ini harus ada di awal dan di akhir shortcodes.

  • [slide]

Tag yang berfungsi untuk membuat slide baru

Selain 2 code di atas yang berdiri sendiri, code lainnya dimasukkan bersama tag [presentation] atau tag [slide], berikut ini contohnya

  • width dan height, untuk mengatur ukuran presentasi.

Contohnya [presentation width=600 height=375]  akan membuat presentasi dengan ukuran 600×375

  • duration, untuk mengatur waktu sebelum slide berganti ke slide berikutnya

Contohnya [presentation duration=5] akan membuat slide tampil selama 5 detik sebelum berganti slide

  • transition, untuk membuat efek [arah] pergantian slide

Ada 4 efek transisi yang bisa digunakan, 5 sebenarnya tapi yang kelima cukup unik. 4 efek itu adalah down, up, left dan right. Contohnya [slide transition="down"] akan membuat efek pergantian slide dengan slide baru muncul dari bawah [ini adalah efek default jadi tidak perlu ditulis sebenarnya kalau mau dipakai]. Efek ke lima yang khusus adalah none. None hanya berfungsi kalau fading pada presentasi diaktifkan [yang secara default sama seperti down pasti ada sejak awal, jadi kalau menggunakan none sebenarnya tidak perlu menambahkan apa-apa]

  • fade, untuk memberi efek slide muncul dengan slide lama menjadi kabur

Seperti ditulis di atas, efek fade ini sudah ada secara default, jadi kalau tidak mau dihilangkan tidak perlu ditambahkan apa-apa. Untuk mengaktifkan dan meng-nonaktifkan fade ini code yang digunakan seperti ini :

[slide fade="off"] or [slide fade="false"] <- untuk meng-nonaktifkan

[slide fade="on"] or [slide fade="true"] <- untuk mengaktifkan

  • rotate, untuk memberi efek berputar pada slide

Contohnya [slide rotate=90] akan membuat slide berputar sebanyak 90 derajat

  • scale, untuk memberi efek pergantian ukuran

Contohnya [slide scale=2] akan membuat slide terlihat lebih besar 2x

  • Yang terakhir, memberi bg pada slide. Kita bisa menggunakan warna dengan menulis code html warna yang kita inginkan. Atau kita bisa menggunakan gambar.

Warna : Daftar warna yang bisa digunakan bisa dilihat di link ini. Atau kalau Anda punya Photoshop atau app lainnya yang memiliki color palette Anda bisa memilih warna yang Anda inginkan lalu mengcopy code warna tersebut untuk dijadikan bg warna slide Anda.

color

Contohnya saya memilih warna jingga-krem(?) dari photoshop dengan code ddac6c jadi code nya seperti ini : [slide bgcolor=#ddac6c]

Image : Untuk image, karena ini dibuat dengan code secara online maka gambarnya harus didapat dari internet secara online. Jadi sebelumnya kita harus mengupload dulu gambar yang ingin kita gunakan sebagai bg presentation dan kemudian menggunakan link gambar tersebut pada code kita.

Karena gambar yang akan kita gunakan secara otomatis akan dipaskan dengan ukuran presentasi, jadi usahakan gambar yang digunakan ukurannya jangan lebih kecil dari presentasi.

Supaya gampang saya akan menggunakan gambar yang sudah saya upload di blog ini sebelumnya, yaitu gambar naga yang ada dipostingan ini. 

Link untuk gambar tersebut adalah ini : https://8oni.files.wordpress.com/2013/08/img_0391.jpg

Jadi codenya akan seperti ini : [slide bgimg=https://8oni.files.wordpress.com/2013/08/img_0391.jpg]

Sekarang, waktunya praktek🙂

Sebelumnya, ubah dulu view pada wordpress dari Visual menjadi Text [di sudut kanan atas]. Dan ketikkan code dibawah ini untuk membuat presentasi seperti contoh di atas.

2

Terima kasih sudah mampir dan membaca blog ini ^_^

 
Tinggalkan komentar

Ditulis oleh pada Agustus 16, 2013 in Blog

 

Tag: , ,

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

 
%d blogger menyukai ini: