SlideShare une entreprise Scribd logo
1  sur  11
Diktat Kuliah Rekayasa Web (KP212) ver 1.0



                                         Pertemuan 3
                Themes, Plugins dan Widgets Wordpress

    Memilih themes
    Menginstall dan Mengaktifkan Themes.
    Plugin WordPress
    Menginstall dan Mengaktifkan Plugin
    Widget WordPress



Kekuatan utama Wordpress adalah adanya dukungan begitu
banyak themes atau template, adanya widget yang sangat
mempermudah pengguna wordpress untuk mengatur sendiri
tampilan wordpress, serta adanya plugins yang mampu
menambah fungsionalitas blog.


Memilih Themes

Dalam prinsip content management system (CMS), user memungkinkan
untuk mengubah tampilan situs secara mudah tanpa perlu mengetahui
bagaimana code HTML atau CSS. Hampir semua situs berbasis CMS memiliki
fitur untuk mengubah tampilan, atau sering disebut themes atau template.

Wordpress sendiri memiliki ribuan themes yang dikembangkan oleh para
pengembang, komunitas dan pengguna wordpress. Anda hanya tinggal
memilih dan memilah themes yang Anda sukai. Hampir semuanya dapat
didownload secara gratis.

Themes pada umumnya didistribusikan dalam bentuk format standar dan
terkompresi (ZIP atau RAR). Untuk menggunakan themes, pada dasarnya
langkahnya cukup mudah. Anda hanya cukup mendownload, ekstrak di folder
tertentu dan aktifkan melalui halaman admin panel.

Berikut ini disajikan beberapa situs penyedia themes wordpress.

Theme Viewer (http://themes.wordpress.net)

Situs ini menjadi official-repository untuk themes wordpress secara resmi
sejak bulan Juli 2007. Di situs ini, Anda dapat menemukan ribuan themes
yang semuanya dapat didownload secara gratis. Saat ini (13/09/2007),
themes yang tersedia di situs ini sebanyak 1626 themes dengan total
6.862.899 kali download. Luar biasa!

Disamping link untuk download dan thumbnail dari masing-masing themes,
situs ini juga menyediakan link untuk mencoba themes secara langsung



Fakultas Teknologi Informasi (http://fti.bl.ac.id)                Halaman 1
Diktat Kuliah Rekayasa Web (KP212) ver 1.0



(viewer). Anda juga dapat melakukan pencarian themes berdasarkan layout
(1 kolom, 2 kolom, dsb), warna dasar (blue, white, black, dsb) dan
berdasarkan kriteria lainnya.




Beberapa themes yang paling sering didownload dari situs ini diantaranya
Africa theme 1, Cutline 3-Column Split 1.1, Sodelicious Black 1.0, Yourblog
2.0 theme, NetWorker 1.0, Pop Blue, Naruto Strikes Back, LoseMyMind 1.0
with Sidebar, Red Secret 0.1 dan Talian 1.0.




Fakultas Teknologi Informasi (http://fti.bl.ac.id)               Halaman 2
Diktat Kuliah Rekayasa Web (KP212) ver 1.0




Alex King's Theme Browser
(http://alexking.org/projects/wordpress/themes)




Alex King adalah seorang developer web yang terutama berkonsentrasi di
bidang desain web. Alex king juga merupakan salah satu pengembang
WordPress dan banyak mengembangkan plugins dan themes wordpress.
Selain itu, Alex King juga tergabung dalam beberapa project open source,
seperti BlackBerry Modem, PHP Tag Engine, PunBB Mods, dll.

Salah satu project yang dikerjakan oleh Alex King adalah themes browser
yang berisi kumpulan themes wordpress. Saat ini terdapat ratusan themes di


Fakultas Teknologi Informasi (http://fti.bl.ac.id)              Halaman 3
Diktat Kuliah Rekayasa Web (KP212) ver 1.0



situs alexking.org. Beberapa di antaranya menjadi pemenang dalam
kompetisi themes wordpress, yaitu Connections, Wuhan, Rin, Red Train, dll.




WordPressTheme.Com (http://wordpresstheme.com)




Situs Penyedia themes wordpress lainnya :

    http://www.wordpresswow.com/
    http://wpthemepark.com/
    http://www.lukaret.com/wordpress-themes/



Fakultas Teknologi Informasi (http://fti.bl.ac.id)              Halaman 4
Diktat Kuliah Rekayasa Web (KP212) ver 1.0



    http://www.bestwpthemes.com/
    http://themes.rock-kitty.net/
    http://www.reviewmytheme.com/
    http://www.wpthemesfree.com/
    http://wpdemo.kaushalsheth.com/
    http://biboz.net/themes/
    http://wpthemes.info/themes/
    http://www.themevibes.com/
    http://www.mygreencorner.com/freewordpressthemes.php
    http://www.jauhari.net/themes
    http://www.wpmix.com/
    http://www.bloggingpro.com/archives/category/wordpress-themes


Faktor-faktor yang Perlu Diperhatikan Saat Memilih Themes

1. Isi Blog. Isi (content) merupakan hal yang paling penting dari sebuah
   situs blog, sehingga banyak orang berpendapat bahwa ”content is the
   king”. Themes yang dipilih hendaknya sesuai dengan tema isi blog. Jika isi
   blog mengenai kesehatan, maka pilihkan themes yang sesuai atau
   berhubungan dengan dunia kesehatan. Selain itu, themes yang dipilih
   juga harus mendukung beberapa fitur seperti pencarian, RSS dan Atom,
   arsip blog, navigasi isi, dan pagination isi.

2. Pembaca atau Pengunjung. Pembaca atau pengunjung merupakan
   faktor penting dalam komunitas blog. Tanpa pengunjung, maka boleh
   dibilang, blog tiada artinya. Kesesuaian themes yang dipilih dengan
   sasaran pengunjung merupakan suatu keharusan. Jika sasaran
   pengunjung blog Anda adalah kalangan orang tua, maka jangan memilih
   themes yang bertema anak-anak.

3. Color dan Font. Warna dan jenis tulisan themes juga harus sesuai
   dengan tema blog yang Anda pilih. Selain itu, jangan memilih warna yang
   terlalu mencolok dan ”menyakitkan” mata.
   Beberapa aturan pemilihan warna dapat dilihat di link berikut ini
   http://www.webdesignfromscratch.com/colour.cfm.

4. Ukuran File Theme. Besarnya ukuran file theme menentukan seberapa
   lama halaman blog ditampilkan. Sebaiknya jangan terlalu banyak
   menggunakan image (gambar). Gunakan seperlunya saja. Pilihlah themes
   yang minimalis namun sesuai dengan kebutuhan situs Anda.




Fakultas Teknologi Informasi (http://fti.bl.ac.id)                 Halaman 5
Diktat Kuliah Rekayasa Web (KP212) ver 1.0



Menginstall dan Mengaktifkan Themes

Berikut ini langkah-langkah untuk menginstall themes wordpress di komputer
Anda sendiri.

Langkah 1. Download Themes
Pilih dan download themes yang Anda inginkan.

Langkah 2. Ekstrak File
Ekstrak file themes yang dipilih ke folder themes yang ada di dalam folder
wp-content di instalasi wordpress. Jika Anda menginstall wordpress di
C:Program Filesxampphtdocsmyblog, maka Anda harus menaruh
file theme di folder C:Program Filesxampphtdocsmyblogwp-
contentthemes. Jika wordpress Anda terdapat di server hosting, maka
Anda harus mengupload file-file themes ke server hosting. Anda dapat
menggunakan FTP atau file manager yang umumnya disediakan di masing-
masing server hosting.




Langkah 3. Mengaktifkan Themes
Untuk mengaktifkan themes yang sudah diinstall, login ke admin panel dan
pilih menu Presentation. Themes yang sudah terinstall akan ditampilkan
dalam daftar Available Themes. Klik pada themes yang akan Anda aktifkan
dan themes akan langsung aktif.




Fakultas Teknologi Informasi (http://fti.bl.ac.id)              Halaman 6
Diktat Kuliah Rekayasa Web (KP212) ver 1.0




Langkah 4. Preview
Lihat tampilan blog Anda dengan memilih menu View sites.




Plugin Wordpress

Plugin WordPress merupakan aplikasi terpisah dari WordPress namun dapat
dengan mudah ditambahkan maupun dihilangkan dari WordPress. Plugin ini
memberi keleluasaan bagi pengguna WordPress untuk menambahkan fungsi-


Fakultas Teknologi Informasi (http://fti.bl.ac.id)            Halaman 7
Diktat Kuliah Rekayasa Web (KP212) ver 1.0



fungsi atau fitur-fitur sesuai dengan kebutuhan pengguna. Saat ini tersedia
begitu banyak plugin wordpress di internet. Masing-masing mempunyai
fungsi tertentu. Anda dapat dengan mudah memasang plugin tersebut di
blog Anda.

Berikut ini beberapa situs pengedia plugin WordPress.

1. Official WordPress Plugins (http://wordpress.org/extend/plugins/)
2. WordPress Wiki (http://wiki.wordpress.org/Plugin)
3. WordPress Plugin Repository
   (http://dev.wp-plugins.org/wiki/PluginDirectory)
4. WordPress Plugin Database (http://wp-plugins.net/)




Fakultas Teknologi Informasi (http://fti.bl.ac.id)                Halaman 8
Diktat Kuliah Rekayasa Web (KP212) ver 1.0



Menginstall dan Mengaktifkan Plugin

Berikut ini langkah-langkah untuk menginstall plugin wordpress di komputer
Anda sendiri.

Langkah 1. Download Plugin
Pilih dan download plugin yang Anda inginkan.

Langkah 2. Copy (Upload) File
Copy file plugin yang dipilih, ke folder plugins yang ada di dalam folder wp-
content di folder instalasi wordpress. Jika Anda menginstall wordpress di
C:Program Filesxampphtdocsmyblog, maka Anda harus menaruh
file plugin di folder C:Program Filesxampphtdocsmyblogwp-
contentplugins. Jika wordpress Anda terdapat di server hosting, maka
Anda harus mengupload file-file themes ke server hosting. Anda dapat
menggunakan FTP atau file manager yang umumnya disediakan di masing-
masing server hosting.




Langkah 3. Mengaktifkan Plugin
Untuk mengaktifkan plugin yang sudah diinstall, login ke admin panel dan
pilih menu Plugins. Plugins yang sudah terinstall akan ditampilkan dalam
daftar Plugin Management. Klik pada link Activate pada plugin yang akan
Anda aktifkan dan plugin akan langsung aktif.




Fakultas Teknologi Informasi (http://fti.bl.ac.id)                 Halaman 9
Diktat Kuliah Rekayasa Web (KP212) ver 1.0




Langkah 4. Preview
Setelah diaktifkan, beberapa plugin akan menambahkan menu atau submenu
di admin panel. Baca manual atau dokumentasi dari masing-masing plugin
untuk keterangan lebih rinci.

Widget WordPress

Widget WordPress juga merupakan salah satu jenis plugin, namun
dikembangkan menggunakan framework widget yang dibuat oleh Matt
Mullenweg. Matt sendiri adalah ketua pengembang WordPress dan bekerja
pada Automattic (http://www.automattic.com). Framework widget sendiri
juga dikembangkan dengan menggunakan plugin API milik WordPress.

Tujuan utama pembuatan widget adalah untuk mempermudah user dalam
pengaturan tampilan blog wordpress, terutama di bagian sidebar (sisi).
Dengan widget, user dapat dengan mudah mengubah tampilan sidebar
wordpress hanya dengan satu kali drag-and-drop objek widget.

Untuk wordpress versi < 2.2, Anda harus menginstall widget secara manual.
Caranya sama seperti menginstall plugin. Anda dapat mendownload file
untuk widget di situs http://automattic.com/code/widgets/.

Sejak wordpress versi 2.2, sidebar widget sudah terinstall secara otomatis
saat menginstall wordpress. Anda dapat menemukan submenu Widgets
yang merupakan sub menu dari menu Presentation. Namun demikian, tidak
semua themes wordpress mendukung widget. Informasi lengkap mengenai
widget, termasuk daftar themes yang mendukung widget, dapat Anda
temukan di situs http://widgets.wordpress.com/.

Mengatur Tampilan Sidebar dengan Widget.



Fakultas Teknologi Informasi (http://fti.bl.ac.id)             Halaman 10
Diktat Kuliah Rekayasa Web (KP212) ver 1.0



Untuk mengatur tampilan sidebar dengan widget, login ke admin panel dan
buka menu Presentation dan sub menu Widgets.




Pada halaman widget, terdapat 2 (dua) bagian, yaitu Sidebar dan Available
Widgets. Bagian Sidebar berisi widget apa saja yang ditampilkan di sidebar
blog, sedangkan bagian available widgets berisi widget apa saja yang
tersedia. Untuk menambahkan widget ke sidebar blog, Anda cukup drag-and-
drop widget (item) yang berada di available widgets ke kotak Sidebar.
Selanjutnya klik tombol Save Changes untuk menyimpan perubahan.




                                                       Drag and drop
                                                       item widget




Fakultas Teknologi Informasi (http://fti.bl.ac.id)             Halaman 11

Contenu connexe

Tendances

Cara membuat-web-blog
Cara membuat-web-blogCara membuat-web-blog
Cara membuat-web-blogjoe riyanto
 
Pelatihan Pembuatan Website Bagi Dosen IAIN SU 2013
Pelatihan Pembuatan Website Bagi Dosen IAIN SU 2013Pelatihan Pembuatan Website Bagi Dosen IAIN SU 2013
Pelatihan Pembuatan Website Bagi Dosen IAIN SU 2013Septiana Dewi Andriana
 
Tutorial joomla versi 1.5.3
Tutorial joomla versi 1.5.3Tutorial joomla versi 1.5.3
Tutorial joomla versi 1.5.3Ocim Nationalism
 
Bab ii customizi n with plugins
Bab ii customizi n with pluginsBab ii customizi n with plugins
Bab ii customizi n with pluginsKhairul Ikhsan
 
Ppt cara membuat website menggunakan wordpress wdwp team
Ppt cara membuat website menggunakan wordpress wdwp teamPpt cara membuat website menggunakan wordpress wdwp team
Ppt cara membuat website menggunakan wordpress wdwp teamcaramembuatweb
 
Petunjuk instalasi moodle_di_laptop_windows7-okt2012sm
Petunjuk instalasi moodle_di_laptop_windows7-okt2012smPetunjuk instalasi moodle_di_laptop_windows7-okt2012sm
Petunjuk instalasi moodle_di_laptop_windows7-okt2012smAhmed_Mundir
 
Kelebihan dan kelemahan browser
Kelebihan dan kelemahan browserKelebihan dan kelemahan browser
Kelebihan dan kelemahan browserYulian Gibran
 
Presentation1 sintaa MACAM MACAM WEB BROWSER
Presentation1 sintaa MACAM MACAM WEB BROWSERPresentation1 sintaa MACAM MACAM WEB BROWSER
Presentation1 sintaa MACAM MACAM WEB BROWSERSuharyanto Suharyanto
 
pemrograman internet
pemrograman internetpemrograman internet
pemrograman internetmafailmi
 
Kelebihan dan kekurangan software browser
Kelebihan dan kekurangan software browserKelebihan dan kekurangan software browser
Kelebihan dan kekurangan software browserAida Anisa
 
Manual book web gampong rtik2017
Manual book web gampong rtik2017Manual book web gampong rtik2017
Manual book web gampong rtik2017relawantikaceh
 
Panduan installasi joomla
Panduan installasi joomlaPanduan installasi joomla
Panduan installasi joomlaMuhammad Arief
 
7. pembuatan website dengan joomla
7. pembuatan website dengan joomla7. pembuatan website dengan joomla
7. pembuatan website dengan joomlaFaiz Fanani
 
Joomla cara-cepat-mudah-membuat-website
Joomla cara-cepat-mudah-membuat-websiteJoomla cara-cepat-mudah-membuat-website
Joomla cara-cepat-mudah-membuat-websiteKhairul Iksan
 

Tendances (20)

Cara membuat-web-blog
Cara membuat-web-blogCara membuat-web-blog
Cara membuat-web-blog
 
Pelatihan Pembuatan Website Bagi Dosen IAIN SU 2013
Pelatihan Pembuatan Website Bagi Dosen IAIN SU 2013Pelatihan Pembuatan Website Bagi Dosen IAIN SU 2013
Pelatihan Pembuatan Website Bagi Dosen IAIN SU 2013
 
Tutorial joomla versi 1.5.3
Tutorial joomla versi 1.5.3Tutorial joomla versi 1.5.3
Tutorial joomla versi 1.5.3
 
Bab ii customizi n with plugins
Bab ii customizi n with pluginsBab ii customizi n with plugins
Bab ii customizi n with plugins
 
Ppt cara membuat website menggunakan wordpress wdwp team
Ppt cara membuat website menggunakan wordpress wdwp teamPpt cara membuat website menggunakan wordpress wdwp team
Ppt cara membuat website menggunakan wordpress wdwp team
 
Desain web
Desain webDesain web
Desain web
 
01.Rekayasa Web
01.Rekayasa Web01.Rekayasa Web
01.Rekayasa Web
 
Petunjuk instalasi moodle_di_laptop_windows7-okt2012sm
Petunjuk instalasi moodle_di_laptop_windows7-okt2012smPetunjuk instalasi moodle_di_laptop_windows7-okt2012sm
Petunjuk instalasi moodle_di_laptop_windows7-okt2012sm
 
Kelebihan dan kelemahan browser
Kelebihan dan kelemahan browserKelebihan dan kelemahan browser
Kelebihan dan kelemahan browser
 
01 how web works
01 how web works01 how web works
01 how web works
 
Presentation1 sintaa MACAM MACAM WEB BROWSER
Presentation1 sintaa MACAM MACAM WEB BROWSERPresentation1 sintaa MACAM MACAM WEB BROWSER
Presentation1 sintaa MACAM MACAM WEB BROWSER
 
Modul web programing
Modul web programingModul web programing
Modul web programing
 
pemrograman internet
pemrograman internetpemrograman internet
pemrograman internet
 
Kelebihan dan kekurangan software browser
Kelebihan dan kekurangan software browserKelebihan dan kekurangan software browser
Kelebihan dan kekurangan software browser
 
Manual book web gampong rtik2017
Manual book web gampong rtik2017Manual book web gampong rtik2017
Manual book web gampong rtik2017
 
Panduan installasi joomla
Panduan installasi joomlaPanduan installasi joomla
Panduan installasi joomla
 
Tug as
Tug asTug as
Tug as
 
Explore
ExploreExplore
Explore
 
7. pembuatan website dengan joomla
7. pembuatan website dengan joomla7. pembuatan website dengan joomla
7. pembuatan website dengan joomla
 
Joomla cara-cepat-mudah-membuat-website
Joomla cara-cepat-mudah-membuat-websiteJoomla cara-cepat-mudah-membuat-website
Joomla cara-cepat-mudah-membuat-website
 

Similaire à Pertemuan 3 Themes, Widget

Theme idbloglicious-makassar
Theme idbloglicious-makassarTheme idbloglicious-makassar
Theme idbloglicious-makassarprofmustamar
 
Panduan Dasar Web Matrix
Panduan Dasar Web MatrixPanduan Dasar Web Matrix
Panduan Dasar Web MatrixMas Tri Sragen
 
Pemrograman berbasis web
Pemrograman berbasis webPemrograman berbasis web
Pemrograman berbasis webmuhammadbazed
 
Belajar html dan css tutorial fundamental dalam mempelajari html dan css
Belajar html dan css   tutorial fundamental dalam mempelajari html dan cssBelajar html dan css   tutorial fundamental dalam mempelajari html dan css
Belajar html dan css tutorial fundamental dalam mempelajari html dan cssMuhtar Muhtar
 
Belajar html dan css tutorial fundamental dalam mempelajari html dan css
Belajar html dan css   tutorial fundamental dalam mempelajari html dan cssBelajar html dan css   tutorial fundamental dalam mempelajari html dan css
Belajar html dan css tutorial fundamental dalam mempelajari html dan cssUniska Lam
 
EBOOK -- BELAJAR HTML DAN CSS : TUTORIAL FUNDAMENTAL DALAM MEMPELAJARAI HTML ...
EBOOK -- BELAJAR HTML DAN CSS : TUTORIAL FUNDAMENTAL DALAM MEMPELAJARAI HTML ...EBOOK -- BELAJAR HTML DAN CSS : TUTORIAL FUNDAMENTAL DALAM MEMPELAJARAI HTML ...
EBOOK -- BELAJAR HTML DAN CSS : TUTORIAL FUNDAMENTAL DALAM MEMPELAJARAI HTML ...primagraphology consulting
 
Belajar HTML dan CSS | By Nersius Sabebeget
Belajar HTML dan CSS | By Nersius SabebegetBelajar HTML dan CSS | By Nersius Sabebeget
Belajar HTML dan CSS | By Nersius SabebegetNeraius Sabebeget
 
Contoh laporan job sheet magang smk
Contoh laporan job sheet magang smkContoh laporan job sheet magang smk
Contoh laporan job sheet magang smkDewa Dewa
 
How to start a blog (beginer guides) by. Fera Marentika
How to start a blog (beginer guides) by. Fera MarentikaHow to start a blog (beginer guides) by. Fera Marentika
How to start a blog (beginer guides) by. Fera MarentikaFera Marentika
 
Modul web programing
Modul web programingModul web programing
Modul web programingFitra Sani
 
Modul Web Programming dengan PHP dan MySQL
Modul Web Programming dengan PHP dan MySQLModul Web Programming dengan PHP dan MySQL
Modul Web Programming dengan PHP dan MySQLeddie Ismantoe
 
Belajar html dan css tutorial fundamental dalam mempelajari html dan css
Belajar html dan css   tutorial fundamental dalam mempelajari html dan cssBelajar html dan css   tutorial fundamental dalam mempelajari html dan css
Belajar html dan css tutorial fundamental dalam mempelajari html dan cssboim duminggu
 
Pengenalan Macromedia Dreamweaver
Pengenalan Macromedia DreamweaverPengenalan Macromedia Dreamweaver
Pengenalan Macromedia DreamweaverAchmad Solichin
 

Similaire à Pertemuan 3 Themes, Widget (20)

Theme idbloglicious-makassar
Theme idbloglicious-makassarTheme idbloglicious-makassar
Theme idbloglicious-makassar
 
Presentasi Rekayasa Web
Presentasi Rekayasa WebPresentasi Rekayasa Web
Presentasi Rekayasa Web
 
03.Rekayasa Web
03.Rekayasa Web03.Rekayasa Web
03.Rekayasa Web
 
Panduan Dasar Web Matrix
Panduan Dasar Web MatrixPanduan Dasar Web Matrix
Panduan Dasar Web Matrix
 
Pemrograman berbasis web
Pemrograman berbasis webPemrograman berbasis web
Pemrograman berbasis web
 
Belajar html dan css tutorial fundamental dalam mempelajari html dan css
Belajar html dan css   tutorial fundamental dalam mempelajari html dan cssBelajar html dan css   tutorial fundamental dalam mempelajari html dan css
Belajar html dan css tutorial fundamental dalam mempelajari html dan css
 
Belajar htmlcss
Belajar htmlcssBelajar htmlcss
Belajar htmlcss
 
Belajar html dan css tutorial fundamental dalam mempelajari html dan css
Belajar html dan css   tutorial fundamental dalam mempelajari html dan cssBelajar html dan css   tutorial fundamental dalam mempelajari html dan css
Belajar html dan css tutorial fundamental dalam mempelajari html dan css
 
EBOOK -- BELAJAR HTML DAN CSS : TUTORIAL FUNDAMENTAL DALAM MEMPELAJARAI HTML ...
EBOOK -- BELAJAR HTML DAN CSS : TUTORIAL FUNDAMENTAL DALAM MEMPELAJARAI HTML ...EBOOK -- BELAJAR HTML DAN CSS : TUTORIAL FUNDAMENTAL DALAM MEMPELAJARAI HTML ...
EBOOK -- BELAJAR HTML DAN CSS : TUTORIAL FUNDAMENTAL DALAM MEMPELAJARAI HTML ...
 
Htmlcss
HtmlcssHtmlcss
Htmlcss
 
Belajar HTML dan CSS | By Nersius Sabebeget
Belajar HTML dan CSS | By Nersius SabebegetBelajar HTML dan CSS | By Nersius Sabebeget
Belajar HTML dan CSS | By Nersius Sabebeget
 
Contoh laporan job sheet magang smk
Contoh laporan job sheet magang smkContoh laporan job sheet magang smk
Contoh laporan job sheet magang smk
 
How to start a blog (beginer guides) by. Fera Marentika
How to start a blog (beginer guides) by. Fera MarentikaHow to start a blog (beginer guides) by. Fera Marentika
How to start a blog (beginer guides) by. Fera Marentika
 
Modul web programing
Modul web programingModul web programing
Modul web programing
 
Modul webdesign
Modul webdesignModul webdesign
Modul webdesign
 
Tugas resume
Tugas resumeTugas resume
Tugas resume
 
Modul Web Programming dengan PHP dan MySQL
Modul Web Programming dengan PHP dan MySQLModul Web Programming dengan PHP dan MySQL
Modul Web Programming dengan PHP dan MySQL
 
Belajar html dan css tutorial fundamental dalam mempelajari html dan css
Belajar html dan css   tutorial fundamental dalam mempelajari html dan cssBelajar html dan css   tutorial fundamental dalam mempelajari html dan css
Belajar html dan css tutorial fundamental dalam mempelajari html dan css
 
Mari belajar vue js
Mari belajar vue jsMari belajar vue js
Mari belajar vue js
 
Pengenalan Macromedia Dreamweaver
Pengenalan Macromedia DreamweaverPengenalan Macromedia Dreamweaver
Pengenalan Macromedia Dreamweaver
 

Plus de Achmad Solichin

Kuliah Umum - Tips Publikasi Jurnal SINTA untuk Mahasiswa Galau (6 Agustus 2022)
Kuliah Umum - Tips Publikasi Jurnal SINTA untuk Mahasiswa Galau (6 Agustus 2022)Kuliah Umum - Tips Publikasi Jurnal SINTA untuk Mahasiswa Galau (6 Agustus 2022)
Kuliah Umum - Tips Publikasi Jurnal SINTA untuk Mahasiswa Galau (6 Agustus 2022)Achmad Solichin
 
Materi Webinar Web 3.0 (16 Juli 2022)
Materi Webinar Web 3.0 (16 Juli 2022)Materi Webinar Web 3.0 (16 Juli 2022)
Materi Webinar Web 3.0 (16 Juli 2022)Achmad Solichin
 
Webinar: Kesadaran Keamanan Informasi (3 Desember 2021)
Webinar: Kesadaran Keamanan Informasi (3 Desember 2021)Webinar: Kesadaran Keamanan Informasi (3 Desember 2021)
Webinar: Kesadaran Keamanan Informasi (3 Desember 2021)Achmad Solichin
 
Webinar PHP-ID: Mari Mengenal Logika Fuzzy (Fuzzy Logic)
Webinar PHP-ID: Mari Mengenal Logika Fuzzy (Fuzzy Logic)Webinar PHP-ID: Mari Mengenal Logika Fuzzy (Fuzzy Logic)
Webinar PHP-ID: Mari Mengenal Logika Fuzzy (Fuzzy Logic)Achmad Solichin
 
Webinar PHP-ID: Machine Learning dengan PHP
Webinar PHP-ID: Machine Learning dengan PHPWebinar PHP-ID: Machine Learning dengan PHP
Webinar PHP-ID: Machine Learning dengan PHPAchmad Solichin
 
Webinar Data Mining dengan Rapidminer | Universitas Budi Luhur
Webinar Data Mining dengan Rapidminer | Universitas Budi LuhurWebinar Data Mining dengan Rapidminer | Universitas Budi Luhur
Webinar Data Mining dengan Rapidminer | Universitas Budi LuhurAchmad Solichin
 
TREN DAN IDE RISET BIDANG DATA MINING TERBARU
TREN DAN IDE RISET BIDANG DATA MINING TERBARUTREN DAN IDE RISET BIDANG DATA MINING TERBARU
TREN DAN IDE RISET BIDANG DATA MINING TERBARUAchmad Solichin
 
Metodologi Riset: Literature Review
Metodologi Riset: Literature ReviewMetodologi Riset: Literature Review
Metodologi Riset: Literature ReviewAchmad Solichin
 
Materi Seminar: Artificial Intelligence dengan PHP
Materi Seminar: Artificial Intelligence dengan PHPMateri Seminar: Artificial Intelligence dengan PHP
Materi Seminar: Artificial Intelligence dengan PHPAchmad Solichin
 
Percobaan Perpindahan Kalor melalui Konduksi, Konveksi dan Radiasi
Percobaan Perpindahan Kalor melalui Konduksi, Konveksi dan RadiasiPercobaan Perpindahan Kalor melalui Konduksi, Konveksi dan Radiasi
Percobaan Perpindahan Kalor melalui Konduksi, Konveksi dan RadiasiAchmad Solichin
 
Metodologi Riset: Literature Review
Metodologi Riset: Literature ReviewMetodologi Riset: Literature Review
Metodologi Riset: Literature ReviewAchmad Solichin
 
Depth First Search (DFS) pada Graph
Depth First Search (DFS) pada GraphDepth First Search (DFS) pada Graph
Depth First Search (DFS) pada GraphAchmad Solichin
 
Breadth First Search (BFS) pada Graph
Breadth First Search (BFS) pada GraphBreadth First Search (BFS) pada Graph
Breadth First Search (BFS) pada GraphAchmad Solichin
 
Binary Search Tree (BST) - Algoritma dan Struktur Data
Binary Search Tree (BST) - Algoritma dan Struktur DataBinary Search Tree (BST) - Algoritma dan Struktur Data
Binary Search Tree (BST) - Algoritma dan Struktur DataAchmad Solichin
 
Computer Vision di Era Industri 4.0
Computer Vision di Era Industri 4.0Computer Vision di Era Industri 4.0
Computer Vision di Era Industri 4.0Achmad Solichin
 
Seminar: Become a Reliable Web Programmer
Seminar: Become a Reliable Web ProgrammerSeminar: Become a Reliable Web Programmer
Seminar: Become a Reliable Web ProgrammerAchmad Solichin
 
The Big 5: Future IT Trends
The Big 5: Future IT TrendsThe Big 5: Future IT Trends
The Big 5: Future IT TrendsAchmad Solichin
 
Seminar: PHP Developer for Dummies
Seminar: PHP Developer for DummiesSeminar: PHP Developer for Dummies
Seminar: PHP Developer for DummiesAchmad Solichin
 
Pertemuan 1 - Algoritma dan Struktur Data 1
Pertemuan 1 - Algoritma dan Struktur Data 1Pertemuan 1 - Algoritma dan Struktur Data 1
Pertemuan 1 - Algoritma dan Struktur Data 1Achmad Solichin
 

Plus de Achmad Solichin (20)

Kuliah Umum - Tips Publikasi Jurnal SINTA untuk Mahasiswa Galau (6 Agustus 2022)
Kuliah Umum - Tips Publikasi Jurnal SINTA untuk Mahasiswa Galau (6 Agustus 2022)Kuliah Umum - Tips Publikasi Jurnal SINTA untuk Mahasiswa Galau (6 Agustus 2022)
Kuliah Umum - Tips Publikasi Jurnal SINTA untuk Mahasiswa Galau (6 Agustus 2022)
 
Materi Webinar Web 3.0 (16 Juli 2022)
Materi Webinar Web 3.0 (16 Juli 2022)Materi Webinar Web 3.0 (16 Juli 2022)
Materi Webinar Web 3.0 (16 Juli 2022)
 
Webinar: Kesadaran Keamanan Informasi (3 Desember 2021)
Webinar: Kesadaran Keamanan Informasi (3 Desember 2021)Webinar: Kesadaran Keamanan Informasi (3 Desember 2021)
Webinar: Kesadaran Keamanan Informasi (3 Desember 2021)
 
Webinar PHP-ID: Mari Mengenal Logika Fuzzy (Fuzzy Logic)
Webinar PHP-ID: Mari Mengenal Logika Fuzzy (Fuzzy Logic)Webinar PHP-ID: Mari Mengenal Logika Fuzzy (Fuzzy Logic)
Webinar PHP-ID: Mari Mengenal Logika Fuzzy (Fuzzy Logic)
 
Webinar PHP-ID: Machine Learning dengan PHP
Webinar PHP-ID: Machine Learning dengan PHPWebinar PHP-ID: Machine Learning dengan PHP
Webinar PHP-ID: Machine Learning dengan PHP
 
Webinar Data Mining dengan Rapidminer | Universitas Budi Luhur
Webinar Data Mining dengan Rapidminer | Universitas Budi LuhurWebinar Data Mining dengan Rapidminer | Universitas Budi Luhur
Webinar Data Mining dengan Rapidminer | Universitas Budi Luhur
 
TREN DAN IDE RISET BIDANG DATA MINING TERBARU
TREN DAN IDE RISET BIDANG DATA MINING TERBARUTREN DAN IDE RISET BIDANG DATA MINING TERBARU
TREN DAN IDE RISET BIDANG DATA MINING TERBARU
 
Metodologi Riset: Literature Review
Metodologi Riset: Literature ReviewMetodologi Riset: Literature Review
Metodologi Riset: Literature Review
 
Materi Seminar: Artificial Intelligence dengan PHP
Materi Seminar: Artificial Intelligence dengan PHPMateri Seminar: Artificial Intelligence dengan PHP
Materi Seminar: Artificial Intelligence dengan PHP
 
Percobaan Perpindahan Kalor melalui Konduksi, Konveksi dan Radiasi
Percobaan Perpindahan Kalor melalui Konduksi, Konveksi dan RadiasiPercobaan Perpindahan Kalor melalui Konduksi, Konveksi dan Radiasi
Percobaan Perpindahan Kalor melalui Konduksi, Konveksi dan Radiasi
 
Metodologi Riset: Literature Review
Metodologi Riset: Literature ReviewMetodologi Riset: Literature Review
Metodologi Riset: Literature Review
 
Depth First Search (DFS) pada Graph
Depth First Search (DFS) pada GraphDepth First Search (DFS) pada Graph
Depth First Search (DFS) pada Graph
 
Breadth First Search (BFS) pada Graph
Breadth First Search (BFS) pada GraphBreadth First Search (BFS) pada Graph
Breadth First Search (BFS) pada Graph
 
Binary Search Tree (BST) - Algoritma dan Struktur Data
Binary Search Tree (BST) - Algoritma dan Struktur DataBinary Search Tree (BST) - Algoritma dan Struktur Data
Binary Search Tree (BST) - Algoritma dan Struktur Data
 
Computer Vision di Era Industri 4.0
Computer Vision di Era Industri 4.0Computer Vision di Era Industri 4.0
Computer Vision di Era Industri 4.0
 
Seminar: Become a Reliable Web Programmer
Seminar: Become a Reliable Web ProgrammerSeminar: Become a Reliable Web Programmer
Seminar: Become a Reliable Web Programmer
 
The Big 5: Future IT Trends
The Big 5: Future IT TrendsThe Big 5: Future IT Trends
The Big 5: Future IT Trends
 
Modern PHP Developer
Modern PHP DeveloperModern PHP Developer
Modern PHP Developer
 
Seminar: PHP Developer for Dummies
Seminar: PHP Developer for DummiesSeminar: PHP Developer for Dummies
Seminar: PHP Developer for Dummies
 
Pertemuan 1 - Algoritma dan Struktur Data 1
Pertemuan 1 - Algoritma dan Struktur Data 1Pertemuan 1 - Algoritma dan Struktur Data 1
Pertemuan 1 - Algoritma dan Struktur Data 1
 

Pertemuan 3 Themes, Widget

  • 1. Diktat Kuliah Rekayasa Web (KP212) ver 1.0 Pertemuan 3 Themes, Plugins dan Widgets Wordpress Memilih themes Menginstall dan Mengaktifkan Themes. Plugin WordPress Menginstall dan Mengaktifkan Plugin Widget WordPress Kekuatan utama Wordpress adalah adanya dukungan begitu banyak themes atau template, adanya widget yang sangat mempermudah pengguna wordpress untuk mengatur sendiri tampilan wordpress, serta adanya plugins yang mampu menambah fungsionalitas blog. Memilih Themes Dalam prinsip content management system (CMS), user memungkinkan untuk mengubah tampilan situs secara mudah tanpa perlu mengetahui bagaimana code HTML atau CSS. Hampir semua situs berbasis CMS memiliki fitur untuk mengubah tampilan, atau sering disebut themes atau template. Wordpress sendiri memiliki ribuan themes yang dikembangkan oleh para pengembang, komunitas dan pengguna wordpress. Anda hanya tinggal memilih dan memilah themes yang Anda sukai. Hampir semuanya dapat didownload secara gratis. Themes pada umumnya didistribusikan dalam bentuk format standar dan terkompresi (ZIP atau RAR). Untuk menggunakan themes, pada dasarnya langkahnya cukup mudah. Anda hanya cukup mendownload, ekstrak di folder tertentu dan aktifkan melalui halaman admin panel. Berikut ini disajikan beberapa situs penyedia themes wordpress. Theme Viewer (http://themes.wordpress.net) Situs ini menjadi official-repository untuk themes wordpress secara resmi sejak bulan Juli 2007. Di situs ini, Anda dapat menemukan ribuan themes yang semuanya dapat didownload secara gratis. Saat ini (13/09/2007), themes yang tersedia di situs ini sebanyak 1626 themes dengan total 6.862.899 kali download. Luar biasa! Disamping link untuk download dan thumbnail dari masing-masing themes, situs ini juga menyediakan link untuk mencoba themes secara langsung Fakultas Teknologi Informasi (http://fti.bl.ac.id) Halaman 1
  • 2. Diktat Kuliah Rekayasa Web (KP212) ver 1.0 (viewer). Anda juga dapat melakukan pencarian themes berdasarkan layout (1 kolom, 2 kolom, dsb), warna dasar (blue, white, black, dsb) dan berdasarkan kriteria lainnya. Beberapa themes yang paling sering didownload dari situs ini diantaranya Africa theme 1, Cutline 3-Column Split 1.1, Sodelicious Black 1.0, Yourblog 2.0 theme, NetWorker 1.0, Pop Blue, Naruto Strikes Back, LoseMyMind 1.0 with Sidebar, Red Secret 0.1 dan Talian 1.0. Fakultas Teknologi Informasi (http://fti.bl.ac.id) Halaman 2
  • 3. Diktat Kuliah Rekayasa Web (KP212) ver 1.0 Alex King's Theme Browser (http://alexking.org/projects/wordpress/themes) Alex King adalah seorang developer web yang terutama berkonsentrasi di bidang desain web. Alex king juga merupakan salah satu pengembang WordPress dan banyak mengembangkan plugins dan themes wordpress. Selain itu, Alex King juga tergabung dalam beberapa project open source, seperti BlackBerry Modem, PHP Tag Engine, PunBB Mods, dll. Salah satu project yang dikerjakan oleh Alex King adalah themes browser yang berisi kumpulan themes wordpress. Saat ini terdapat ratusan themes di Fakultas Teknologi Informasi (http://fti.bl.ac.id) Halaman 3
  • 4. Diktat Kuliah Rekayasa Web (KP212) ver 1.0 situs alexking.org. Beberapa di antaranya menjadi pemenang dalam kompetisi themes wordpress, yaitu Connections, Wuhan, Rin, Red Train, dll. WordPressTheme.Com (http://wordpresstheme.com) Situs Penyedia themes wordpress lainnya : http://www.wordpresswow.com/ http://wpthemepark.com/ http://www.lukaret.com/wordpress-themes/ Fakultas Teknologi Informasi (http://fti.bl.ac.id) Halaman 4
  • 5. Diktat Kuliah Rekayasa Web (KP212) ver 1.0 http://www.bestwpthemes.com/ http://themes.rock-kitty.net/ http://www.reviewmytheme.com/ http://www.wpthemesfree.com/ http://wpdemo.kaushalsheth.com/ http://biboz.net/themes/ http://wpthemes.info/themes/ http://www.themevibes.com/ http://www.mygreencorner.com/freewordpressthemes.php http://www.jauhari.net/themes http://www.wpmix.com/ http://www.bloggingpro.com/archives/category/wordpress-themes Faktor-faktor yang Perlu Diperhatikan Saat Memilih Themes 1. Isi Blog. Isi (content) merupakan hal yang paling penting dari sebuah situs blog, sehingga banyak orang berpendapat bahwa ”content is the king”. Themes yang dipilih hendaknya sesuai dengan tema isi blog. Jika isi blog mengenai kesehatan, maka pilihkan themes yang sesuai atau berhubungan dengan dunia kesehatan. Selain itu, themes yang dipilih juga harus mendukung beberapa fitur seperti pencarian, RSS dan Atom, arsip blog, navigasi isi, dan pagination isi. 2. Pembaca atau Pengunjung. Pembaca atau pengunjung merupakan faktor penting dalam komunitas blog. Tanpa pengunjung, maka boleh dibilang, blog tiada artinya. Kesesuaian themes yang dipilih dengan sasaran pengunjung merupakan suatu keharusan. Jika sasaran pengunjung blog Anda adalah kalangan orang tua, maka jangan memilih themes yang bertema anak-anak. 3. Color dan Font. Warna dan jenis tulisan themes juga harus sesuai dengan tema blog yang Anda pilih. Selain itu, jangan memilih warna yang terlalu mencolok dan ”menyakitkan” mata. Beberapa aturan pemilihan warna dapat dilihat di link berikut ini http://www.webdesignfromscratch.com/colour.cfm. 4. Ukuran File Theme. Besarnya ukuran file theme menentukan seberapa lama halaman blog ditampilkan. Sebaiknya jangan terlalu banyak menggunakan image (gambar). Gunakan seperlunya saja. Pilihlah themes yang minimalis namun sesuai dengan kebutuhan situs Anda. Fakultas Teknologi Informasi (http://fti.bl.ac.id) Halaman 5
  • 6. Diktat Kuliah Rekayasa Web (KP212) ver 1.0 Menginstall dan Mengaktifkan Themes Berikut ini langkah-langkah untuk menginstall themes wordpress di komputer Anda sendiri. Langkah 1. Download Themes Pilih dan download themes yang Anda inginkan. Langkah 2. Ekstrak File Ekstrak file themes yang dipilih ke folder themes yang ada di dalam folder wp-content di instalasi wordpress. Jika Anda menginstall wordpress di C:Program Filesxampphtdocsmyblog, maka Anda harus menaruh file theme di folder C:Program Filesxampphtdocsmyblogwp- contentthemes. Jika wordpress Anda terdapat di server hosting, maka Anda harus mengupload file-file themes ke server hosting. Anda dapat menggunakan FTP atau file manager yang umumnya disediakan di masing- masing server hosting. Langkah 3. Mengaktifkan Themes Untuk mengaktifkan themes yang sudah diinstall, login ke admin panel dan pilih menu Presentation. Themes yang sudah terinstall akan ditampilkan dalam daftar Available Themes. Klik pada themes yang akan Anda aktifkan dan themes akan langsung aktif. Fakultas Teknologi Informasi (http://fti.bl.ac.id) Halaman 6
  • 7. Diktat Kuliah Rekayasa Web (KP212) ver 1.0 Langkah 4. Preview Lihat tampilan blog Anda dengan memilih menu View sites. Plugin Wordpress Plugin WordPress merupakan aplikasi terpisah dari WordPress namun dapat dengan mudah ditambahkan maupun dihilangkan dari WordPress. Plugin ini memberi keleluasaan bagi pengguna WordPress untuk menambahkan fungsi- Fakultas Teknologi Informasi (http://fti.bl.ac.id) Halaman 7
  • 8. Diktat Kuliah Rekayasa Web (KP212) ver 1.0 fungsi atau fitur-fitur sesuai dengan kebutuhan pengguna. Saat ini tersedia begitu banyak plugin wordpress di internet. Masing-masing mempunyai fungsi tertentu. Anda dapat dengan mudah memasang plugin tersebut di blog Anda. Berikut ini beberapa situs pengedia plugin WordPress. 1. Official WordPress Plugins (http://wordpress.org/extend/plugins/) 2. WordPress Wiki (http://wiki.wordpress.org/Plugin) 3. WordPress Plugin Repository (http://dev.wp-plugins.org/wiki/PluginDirectory) 4. WordPress Plugin Database (http://wp-plugins.net/) Fakultas Teknologi Informasi (http://fti.bl.ac.id) Halaman 8
  • 9. Diktat Kuliah Rekayasa Web (KP212) ver 1.0 Menginstall dan Mengaktifkan Plugin Berikut ini langkah-langkah untuk menginstall plugin wordpress di komputer Anda sendiri. Langkah 1. Download Plugin Pilih dan download plugin yang Anda inginkan. Langkah 2. Copy (Upload) File Copy file plugin yang dipilih, ke folder plugins yang ada di dalam folder wp- content di folder instalasi wordpress. Jika Anda menginstall wordpress di C:Program Filesxampphtdocsmyblog, maka Anda harus menaruh file plugin di folder C:Program Filesxampphtdocsmyblogwp- contentplugins. Jika wordpress Anda terdapat di server hosting, maka Anda harus mengupload file-file themes ke server hosting. Anda dapat menggunakan FTP atau file manager yang umumnya disediakan di masing- masing server hosting. Langkah 3. Mengaktifkan Plugin Untuk mengaktifkan plugin yang sudah diinstall, login ke admin panel dan pilih menu Plugins. Plugins yang sudah terinstall akan ditampilkan dalam daftar Plugin Management. Klik pada link Activate pada plugin yang akan Anda aktifkan dan plugin akan langsung aktif. Fakultas Teknologi Informasi (http://fti.bl.ac.id) Halaman 9
  • 10. Diktat Kuliah Rekayasa Web (KP212) ver 1.0 Langkah 4. Preview Setelah diaktifkan, beberapa plugin akan menambahkan menu atau submenu di admin panel. Baca manual atau dokumentasi dari masing-masing plugin untuk keterangan lebih rinci. Widget WordPress Widget WordPress juga merupakan salah satu jenis plugin, namun dikembangkan menggunakan framework widget yang dibuat oleh Matt Mullenweg. Matt sendiri adalah ketua pengembang WordPress dan bekerja pada Automattic (http://www.automattic.com). Framework widget sendiri juga dikembangkan dengan menggunakan plugin API milik WordPress. Tujuan utama pembuatan widget adalah untuk mempermudah user dalam pengaturan tampilan blog wordpress, terutama di bagian sidebar (sisi). Dengan widget, user dapat dengan mudah mengubah tampilan sidebar wordpress hanya dengan satu kali drag-and-drop objek widget. Untuk wordpress versi < 2.2, Anda harus menginstall widget secara manual. Caranya sama seperti menginstall plugin. Anda dapat mendownload file untuk widget di situs http://automattic.com/code/widgets/. Sejak wordpress versi 2.2, sidebar widget sudah terinstall secara otomatis saat menginstall wordpress. Anda dapat menemukan submenu Widgets yang merupakan sub menu dari menu Presentation. Namun demikian, tidak semua themes wordpress mendukung widget. Informasi lengkap mengenai widget, termasuk daftar themes yang mendukung widget, dapat Anda temukan di situs http://widgets.wordpress.com/. Mengatur Tampilan Sidebar dengan Widget. Fakultas Teknologi Informasi (http://fti.bl.ac.id) Halaman 10
  • 11. Diktat Kuliah Rekayasa Web (KP212) ver 1.0 Untuk mengatur tampilan sidebar dengan widget, login ke admin panel dan buka menu Presentation dan sub menu Widgets. Pada halaman widget, terdapat 2 (dua) bagian, yaitu Sidebar dan Available Widgets. Bagian Sidebar berisi widget apa saja yang ditampilkan di sidebar blog, sedangkan bagian available widgets berisi widget apa saja yang tersedia. Untuk menambahkan widget ke sidebar blog, Anda cukup drag-and- drop widget (item) yang berada di available widgets ke kotak Sidebar. Selanjutnya klik tombol Save Changes untuk menyimpan perubahan. Drag and drop item widget Fakultas Teknologi Informasi (http://fti.bl.ac.id) Halaman 11