BAB 5 COMPANY PROFILE: LEMBAGA AGAMA
Situs bertema agama masih kalah populer bila dibandingkan dengan situssitus yang mengusung tema teknologi, bisnis, atau berita. Karena itu situs bertemakan agama harus dikemas sedemikian menarik sehingga tak kalah dengan situs-situs teknologi atau bisnis. Nah, salah satu cara untuk membuat tampilan situs bertemakan agama terlihat menarik adalah dengan memanfaatkan theme Masipag yang disediakan secara gratis oleh situs www.paddsolutions.com.
Tampilan demo Theme Masipag
Theme Masipag memiliki sederet fitur yang dapat mendukung situs bertemakan agama terlihat lebih menarik dan segar dipandang. Fitur-fitur yang tersedia antara lain slideshow atau konten galeri, beragam pilihan warna schemes, social networking, kategori popular, tweet terbaru, publikasi artikel melalui social bookmarks yang secara default telah ditambahkan pada setiap halaman, posting yang saling terhubung, pemisahan komentar dan trackbacks, SEO yang optimal, fitur pengubah ukuran thumbnail secara otomatis (tanpa menggunakan custom field), RSS dan Twitter subscription, integrasi dengan Google Analytics, built-in navigasi halaman, pemblokiran iklan, dan gravatar. Theme Masipag bisa diperoleh melalui alamat URL di bawah ini: http://www.paddsolutions.com/wp-content/plugins/downloadmonitor/download.php?id=118. Setelah Anda memperoleh file instalasi theme dan menginstalnya, maka Anda akan mendapati tampilan awal theme seperti ilustrasi di bawah ini. 100
Tampilan awal theme Masipag setelah diinstal dan diaktifkan
MEMBUAT POSTING DENGAN MEMANFAATKAN FITUR POST THUMBNAIL DAN SLIDE SHOW Pada theme Masipag ini posting konten web ditampilkan secara istimewa. Image-image yang berasal dari salah satu kategori secara otomatis akan ditampilkan pada slideshow. Slideshow ini ditampilkan di bagian atas halaman utama. Bila pengunjung memilih foto dalam slideshow tersebut, maka mereka akan segera dibawa ke halaman posting yang mengandung foto. Karena itu posting artikel dan fitur slideshow saling berkaitan erat. Anda bebas menentukan sebuah kategori yang foto-fotonya hendak ditampilkan di dalam slideshow. CATATAN: Anda bisa menggunakan image berukuran berapa pun untuk artikel. Nantinya Masipag secara otomatis akan mengubah ukurannya sesuai dengan keadaan theme, termasuk menambahkan frame polaroid untuk galeri foto.
MEMBUAT KATEGORI BARU Sebelum kita membuat posting dan memanfaatkan fitur slideshow, maka langkah awal yang harus dilakukan adalah membuat kategori-kategori. 101
Nantinya salah satu kategori tersebut akan dikaitkan dengan fitur slideshow. Selain itu, theme Masipag tidak mendukung fasilitas Menu. Karena itu kita harus menggunakan fasilitas Kategori secara maksimal sebagai pengganti Menu. Pada theme Masipag, kategori-kategori yang Anda ciptakan akan ditampilkan sejajar pada bagian atas slideshow. Nah, untuk membuat kategori baru tersebut, gunakanlah langkah-langkah di bawah ini. 1.
Pada halaman Dashboard, pilihlah opsi Tulisan.
2.
Kemudian lanjutkan dengan memilih opsi Kategori.
Memilih opsi Kategori
3.
102
Setelah itu masukkan informasi mengenai kategori yang meliputi:
Nama: masukkan nama kategori di kolom ini.
Slug: ketikkan versi URL kategori dengan menggunakan huruf kecil dan hanya terdiri dari huruf, angka, dan tanda strip.
Induk: bila Anda menginginkannya, Anda bisa memilih salah satu kategori yang menjadi induk dari kategori baru ini. Tetapi pastikan kategori tersebut telah Anda buat sebelumnya.
Deskripsi: ketikkan keterangan mengenai kategori baru di kolom ini. Keterangan ini nantinya akan muncul, ketika para pengunjung situs Anda mengarahkan mouse ke nama kategori.
Mengisi informasi mengenai kategori baru
4.
Jika sudah pilihlah tombol Tambahkan Kategori Baru.
Ulangi langkah di atas untuk membuat beberapa kategori baru sesuai dengan kebutuhan Anda. Nantinya kategori-kategori baru tersebut baru terlihat ketika Anda sudah menggunakannya untuk posting artikel.
MEMBUAT POSTING DENGAN MEMANFAATKAN FITUR POST THUMBNAIL Sesudah beberapa kategori dibuat selanjutnya kita akan membuat posting baru. Pada pembuatan posting baru ini kita akan memanfaatkan fitur Post Thumbnail. Dengan fitur ini, setiap image pada artikel juga akan ditampilkan dalam bentuk thumbnail image di halaman depan situs disertai dengan cuplikan artikel. Berikut ini langkah-langkah selengkapnya. 1.
Masuklah ke halaman Dashboard.
103
2.
Lalu pilihlah opsi Tulisan di sisi kiri.
3.
Lantas pilih opsi Tambahkan Baru.
4.
Pada halaman Tambahkan Tulisan Baru yang muncul, ketikkan judul artikel dan artikel Anda.
Membuat tulisan baru
5.
Masih di halaman yang sama tepatnya di bagian Ruas Tersuai atau Custom Field, masukkan pengaturan di bawah ini berkaitan dengan image yang hendak ditampilkan pada artikel.
Nama: paddimage
Nilai: masukkan path lokasi image yang hendak Anda tampilkan pada artikel. Image ini dapat Anda masukkan melalui jendela Windows Explorer. Misalnya saja di \wordpress\wp-content\ uploads\2011\01\New.jpg.
Memasukkan informasi untuk fitur Post Thumbnail
104
6.
Lanjutkan dengan memilih salah satu kategori di bagian Kategori.
Memilih salah satu kategori
7.
Kemudian klik tombol Terbitkan di bagian Terbitkan.
Memilih tombol Terbitkan
Dengan cara ini, posting artikel baru telah berhasil dilakukan. Artikel tersebut juga dilengkapi dengan image. Thumbnail image dan potongan artikel ditampilkan juga di halaman depan situs.
Artikel yang telah dilengkapi dengan image
105
PENGATURAN FITUR SLIDESHOW Selanjutnya kita akan melakukan posting artikel dengan memanfaatkan fitur slideshow. Namun sebelum melakukannya, lakukan terlebih dahulu pengaturan fitur slideshow. Caranya sebagai berikut. 1.
Masuklah terlebih dahulu ke halaman Dashboard.
2.
Setelah itu pilihlah opsi Tampilkan di sisi kiri halaman Dashboard.
3.
Lanjutkan dengan memilih opsi Masipag Options.
Memilih opsi Masipag Options
4.
Pada halaman Masipag Options yang muncul, pilihlah salah satu kategori pada kotak kombo Featured Category yang foto-foto artikel di dalamnya hendak ditampilkan dalam fitur slideshow. Tentukan pula jumlah item yang hendak ditampilkan pada fitur slideshow di kolom Featured Category Items Limit.
Tampilan pengaturan untuk fitur slideshow
5. 106
Jika sudah klik tombol Save Settings di bagian bawah halaman.
MEMBUAT POSTING DENGAN MEMANFAATKAN FITUR POST SLIDESHOW Nah, setelah pengaturan diatas selanjutnya kita akan membuat posting dengan memanfaatkan fitur Post Slideshow yang tersedia, lakukanlah langkah-langkah di bawah ini. 1.
Masuklah terlebih dahulu ke halaman Dashboard.
2.
Kemudian pilihlah opsi Tulisan di sisi kiri.
3.
Lanjutkan dengan memilih opsi Tambahkan Baru.
4.
Pada halaman Tambahkan Tulisan Baru yang muncul, ketikkan judul artikel dan artikel Anda.
Menambah artikel baru
5.
Setelah itu masuklah ke bagian Ruas Tersuai atau Custom Field. Masukkan pengaturan di bawah ini hanya untuk artikel pada kategori yang terkait dengan fitur slideshow atau galeri foto.
Nama: paddimage-gallery
Nilai: masukkan path lokasi image yang hendak Anda tampilkan pada artikel dan sekaligus di konten galeri atau slideshow. Image tersebut bisa Anda masukkan melalui jendela Windows Explorer. Misalnya saja di \wordpress\wp-content\uploads\2011\01\ Image01.jpg. 107
Memasukkan informasi untuk fitur slideshow
6.
Jika sudah pilihlah tombol Tambahkan Ruas Tersuai.
7.
Masih di bagian Ruas Tersuai atau Custom Field, masukkan pengaturan untuk mengaktifkan fitur post thumbnail agar posting artikel ini juga dilengkapi dengan image.
Nama: paddimage
Nilai: masukkan kembali path lokasi image yang hendak Anda tampilkan pada artikel dan sekaligus digunakan untuk post thumbnail. Gunakan image yang sama seperti yang digunakan pada fitur slideshow. Contoh path yang digunakan \wordpress\ wp-content\uploads\2011\01\Image01.jpg.
Memasukkan informasi untuk fitur Post Thumbnail
8.
108
Sesudah itu pilihlah tombol Tambahkan Ruas Tersuai.
9.
Beralih ke bagian Kategori, pilihlah kategori sesuai dengan kategori terpilih yang telah kita atur pada halaman Masipag Options di bagian Featured Category.
Memilih kategori yang terkait dengan fitur slideshow
10. Lalu masuklah ke bagian Terbitkan dan pilih tombol Terbitkan.
Memilih tombol Terbitkan
Dengan cara ini sebuah artikel yang dilengkapi dengan image telah ditambahkan. Khusus untuk artikel-artikel pada kategori yang telah dikaitkan dengan fitur slideshow atau galeri foto, maka foto akan muncul slideshow. Bila Anda melakukan klik pada image artikel yang muncul di galeri foto, maka Anda segera dibawa ke halaman yang menampilkan artikel tersebut. Ulangi langkah-langkah di atas untuk menambahkan artikel-artikel lainnya. 109
Tampilan image slideshow yang terkait dengan artikel
MEMANFAATKAN FITUR CUSTOM ADS UNTUK MENAMPILKAN IKLAN SENDIRI Theme Masipag juga menyediakan fitur untuk menampilkan iklan di situs Anda. Fitur ini memberikan keleluasaan bagi Anda untuk menampilkan iklan di sisi kanan halaman situs. Nah, untuk menampilkan iklan Anda pada fitur tersebut, masukkan terlebih dahulu lima buah image untuk iklan Anda di folder wordpress/wp-content/themes/masipag/images/. Pastikan salah satu image berukuran 250x250px, sedangkan empat image lainnya berukuran 125x125px. Setelah itu lakukanlah langkah-langkah di bawah ini. 1.
Awali dengan memilih opsi Tampilan di sisi kiri halaman Dashboard.
2.
Lanjutkan dengan memilih opsi Masipag Options.
Memilih opsi Masipag Options
Pada halaman pengaturan Masipag Options yang muncul, masuklah ke dalam Tab Custom Ads. Kemudian masukkan deskripsi iklan Anda di kolom Short Description, path image Anda di kolom Image URL, dan link situs iklan Anda di kolom Website. 110
Memasukkan lokasi image dan link iklan
3.
Masih di halaman yang sama, masukkanlah informasi mengenai image iklan selanjutnya.
Memasukkan lokasi image iklan dan link iklan lainnya
4.
Jika sudah pilihlah tombol Save Settings.
Dengan cara ini iklan Anda telah terpasang di sisi kanan halaman situs, tepatnya di bagian Sponsor.
111
Tampilan image iklan di bagian Sponsors
MEMANFAATKAN FITUR RELATED POSTS Theme Masipag menyediakan fitur Related Posts untuk menghubungkan satu posting dengan posting lainnya. Nah, untuk memanfaatkan fitur ini, lakukanlah langkah-langkah pengaturan di bawah ini. 1.
Pilihlah kembali opsi Masipag Options yang terdapat di dalam bagian Tampilan.
2.
Pada halaman Masipag Options yang muncul, masuklah ke dalam Tab Related Posts.
3.
Kemudian lakukan pengaturan di bawah ini.
4.
Aktifkan opsi Enable Related Posts.
5.
Masukkan nilai yang menunjukkan jumlah artikel terkait yang ditampilkan di kolom Maximum Number of Related Posts.
6.
Aktifkan opsi Consider Tags agar tag digunakan sebagai dasar untuk mengaitkan posting artikel.
112
7.
Aktifkan opsi Consider Categories untuk menggunakan kategori sebagai dasar untuk mengaitkan posting artikel.
Tampilan pengaturan di bagian Related Posts
8.
Sesudah itu pilihlah tombol Save Settings.
Fitur Related Posts ini menampilkan artikel-artikel terkait berdasarkan pengaturan yang telah dilakukan. Related posts terlihat di bagian bawah setiap artikel.
Tampilan artikel-artikel terkait di bagian Related Posts
MENAMPILKAN TWEET PADA SITUS Theme Masipag secara khusus mendukung plugin Twitter for Wordpress. Plugin ini berfungsi untuk menampilkan tweet Anda. Theme Masipag 113
secara istimewa menyediakan tempat di bagian bawah halaman situs untuk menampilkan tweet terbaru Anda. Nah, bila Anda ingin memanfaatkan plugin ini, maka gunakanlah langkah-langkah berikut. 1.
Download terlebih dahulu plugin Twitter for Wordpress di alamat URL http://wordpress.org/extend/plugins/twitter-for-wordpress/.
2.
Setelah itu instal plugin tersebut dan aktifkanlah.
3.
Jika sudah masuklah ke bagian Tampilan dan pilihlah opsi Widget.
Memilih opsi Widget
4.
Pada halaman Widget yang muncul, klik widget Twitter #1 di bagian Widget yang Tersedia dan tarik ke bagian Nonaktifkan Widget yang terdapat di bagian bawah halaman.
5.
Lantas masukkan pengaturan yang berkaitan dengan akun Twitter Anda pada widget tersebut.
Tampilan pengaturan plugin Twitter for Wordpress
114
Judul: berilah nama untuk tampilan tweet terbaru Anda.
Username: masukkan username akun Twitter Anda.
Number of links: masukkan nilai 1 untuk menampilkan tweet terbaru.
Aktifkan opsi Show timestamps untuk menampilkan tanggal tweet terbaru.
Linked: masukkan link menuju profil Twitter Anda.
6.
Aktifkan opsi Discover Hyperlinks agar teks yang mengandung link berada dalam keadaan aktif atau dapat diklik oleh pengunjung.
7.
Aktifkan opsi Discover @replies agar jawaban atau balasan dengan format @username berada dalam keadaan aktif atau dapat diklik.
8.
Aktifkan opsi UTF8 Encode bila Anda mengalami masalah encoding.
9.
Sesudah itu pilihlah tombol Simpan dan lanjutkan dengan memilih opsi Tutup.
10. Setelah pengaturan di atas, Anda akan mendapati tampilan tweet terbaru pada akun Twitter Anda telah muncul di bagian bawah halaman situs.
Tampilan tweet terbaru di bagian bawah halaman situs
MENGUBAH WARNA SCHEME THEME Theme Masipag menyediakan beragam pilihan warna sesuai dengan kebutuhan Anda. Nah, untuk mengubah warna scheme theme, lakukanlah langkah-langkah singkat di bawah ini: 1.
Pertama-tama masuklah ke bagian Tampilan.
2.
Lanjutkan dengan memilih opsi Masipag Options. 115
Memilih opsi Masipag Options
3.
Pada halaman Masipag Options yang muncul tepatnya di bagian General, pilihlah warna theme yang Anda inginkan di kolom Color Scheme.
Memilih salah satu warna Scheme
4.
Sesudah itu pilihlah tombol Save Settings.
MENGUBAH JUDUL DAN DESKRIPSI SITUS Pada tampilan theme Masipag ini, Anda akan mendapati judul situs masih menggunakan judul “Masipag” sesuai dengan nama theme yang digunakan. Sementara itu deskripsi situs juga berkaitan dengan theme Masipag. Nah, untuk menggantinya, lakukanlah langkah-langkah di bawah ini:
116
1.
Luncurkan terlebih dahulu aplikasi Adobe Photoshop.
2.
Pertama-tama masuklah terlebih dahulu ke dalam folder pada path \wordpress\wp-content\themes\masipag\images. Pada folder tersebut Anda akan menemukan dua file dalam format PSD yakni file sitename.psd dan file site-description.psd.
3.
Selanjutnya klik tombol kanan mouse pada file site-name.psd dan pilihlah opsi Open With.
4.
Pada kotak dialog Open With yang muncul, pilihlah aplikasi Adobe Photoshop sebagai software yang digunakan untuk mengubah file.
Memilih aplikasi Adobe Photoshop
Sesudah itu pilihlah tombol OK. 5.
Setelah jendela Adobe Photoshop terbuka, selanjutnya gunakan Horizontal Type Tool untuk mengubah judul situs yang ada.
Tampilan judul situs yang telah diubah
117
6.
Jika sudah simpanlah dengan nama “site-name” dalam format file png untuk mengganti file judul situs sebelumnya.
7.
Lakukan langkah yang sama untuk file “site-description.psd” dan simpan dengan dengan nama “site-description” dalam format file png untuk mengganti file deskripsi situs yang sebelumnya telah ada.
8.
Dengan cara ini, maka Anda akan mendapati nama dan deskripsi situs telah berganti.
Tampilan judul dan deskripsi situs yang telah diubah
MENAMBAHKAN IKON DAN DESKRIPSI ”ABOUT US” Bagian “About Us” dapat Anda temukan di bagian bawah halaman situs. Bagian ini berisi keterangan singkat mengenai situs Anda. Pada bagian ini Anda juga bisa melengkapi deskripsi singkat tersebut dengan ikon situs Anda. Berikut ini langkah-langkahnya: 1.
Pertama-tama masukkan terlebih dahulu ikon situs Anda pada folder \wordpress\wp-content\themes\masipag\images. Sebaiknya ikon ini berukuran kurang lebih 80x80px.
2.
Setelah itu masuklah kembali ke halaman pengaturan Masipag dengan memilih opsi Masipag Options di bagian Tampilan.
118
Memilih opsi Masipag Options
3.
Pada halaman Masipag Options yang muncul tepatnya di bagian General, masukkanlah path lokasi image ikon situs Anda dan ketikkan deskripsi situs dengan menggunakan format seperti ilustrasi di bawah ini.
Memasukkan informasi mengenai situs
4.
Sesudah itu pilihlah tombol Save Settings.
5.
Dengan pengaturan ini, maka Anda akan mendapati bagian “About Us” telah dilengkapi dengan ikon dan deskripsi situs Anda.
Tampilan bagian ”About Us” di bagian bawah halaman
MEMASANG FAVICON Secara default, theme Masipag tidak menyediakan favicon. Karena itu Anda memiliki kebebasan untuk memasang favicon yang ingin Anda gunakan. Nah, untuk memasangnya, masukkanlah terlebih dahulu image 119
yang hendak digunakan sebagai favicon ke dalam folder \wordpress\wpcontent\themes\masipag\images. Biasanya image yang digunakan sebagai favicon memiliki ukuran 16x16 px dalam format icon. Setelah image dimasukkan, selanjutnya ikutilah langkah-langkah di bawah ini. 1.
Masuklah terlebih dahulu ke halaman pengaturan theme Masipag dengan memilih opsi Masipag Options di bagian Tampilan.
Memilih opsi Masipag Options
2.
Pada halaman Masipag Options yang muncul, masukkanlah lokasi folder penyimpanan image favicon di kolom Favicon URL.
Memasukkan informasi mengenai lokasi image favicon
3.
Jika sudah klik tombol Save Settings.
Dengan cara ini, favicon pada website Anda telah berganti sesuai dengan image yang Anda tentukan.
Tampilan image favicon yang telah berganti
120
