Desain Website

cara buat slider otomatis

gambar slideshow yang sering kita lihat di bawah header atau sering disebut sebagai image slider banyak sekali menghiasi halaman pada sebuah blog. Sekarang ini banyak sekali template blogger yang bagus dan dihiasi dengan berbagai macam slider yang tujuannya untuk memperindah tampilan. Permasalahan yang timbul sekarang adalah kita terkadang malas atau kurang teliti dalam memasukkan satu persatu keterangan dalam slider tersebut, baik itu URL gambar maupun URL post yang dituju. Seperti pada tutorial saya sebelumnya mengenai cara membuat slider gambar ala Yahoo, disitu anda harus memasukkan URL dan keterangan slider satu persatu.

Kali ini saya akan memberikan satu solusi berupa tutorial membuat image slider berdasarkan kategori tertentu, dimana Anda tidak perlu lagi memasukkan satu persatu keterangan dalam slider, jadi Anda tinggal mengganti dengan kategori atau label yang ingin ditampilkan dalam slider, gambarnya seperti diatas dan demonya seperti slider yang ada disini. Baik langsung saja pada cara pemasangannya :

Langkah Pertama
Login ke blogger dengan akun anda
Kemudian klik Tata Letak > pilih Edit HTML centang expand widget templates
Jangan lupa backup dulu template anda dengan mengklik Download Template Lengkap.
Letakkan kode berikut di atas kode ]]>

membuat halaman blog dengan angka

Page Navigation Widget Generator

Formulir Pendaftaran

Memindahkan Website dari Localhost ke Hosting Online

Kita telah mempelajari bagaimana membuat website menggunakan Wordpress CMS pada localhost. Alasan menggunakan localhost pun telah sama-sama kita ketahui, yaitu demi kemudahan serta efisiensi waktu dan biaya. Setelah kita mendesain website dengan Wordpress CMS tersebut, melakukan modifikasi, dan lain sebagainya, langkah selanjutnya yang kita lakukan tentu meng-hosting-kannya secara online. Pada dasarnya, kita boleh menyimpan file-file website tersebut di dalam komputer kita. Namun, agar bisa diakses oleh orang lain dari mana saja dan kapan saja, komputer tersebut harus tetap stand by dan terkoneksi ke internet 24 jam penuh. Sanggupkan kita melakukan semua itu? Saya rasa kita bakal mendapat lebih banyak kerugian. Itulah sebabnya kita membutuhkan webserver yang akan menyediakan layanan hosting pada kita. Pada postingan ini, saya akan memaparkan bagaimana cara memindahkan file-file website yang telah Anda bangun dari localhost ke hosting online.
Adapun layanan hosting yang akan kita gunakan untuk sementara adalah layanan hosting gratis pada sebuah provider free hosting, yaitu www.000webhost.com. Cara mendapatkan layanan free hosting pada 000webhost.Com telah saya paparkan sebelumnya. Silahkan klik disini untuk membuka tutorial mengenai cara mendapatkan free webhosting tersebut.
Saya asumsikan pembaca telah mendaftar dan mendapatkan layanan free hosting pada 000webhost.Com tersebut. Berikut langkah-langkah yang akan kita lakukan untuk memindahkan website kita dari localhost ke hosting online:

Silahkan login untuk masuk ke dalam akun Anda di 000webhost.Com. Klik menu "Members Area" yang ada di menu sebelah kanan.
Jika login berhasil, kita akan masuk pada halaman akun yang menampilkan daftar domain yang telah Anda daftarkan pada 000webhost.Com. Salah satu ciri khas dari 000webhost.Com adalah bahwa control panel untuk hosting dibedakan untuk tiap domain. Silahkan klik link "Go to CPanel" yang ada di kolom "Action" pada tabel domain tersebut.
Anda akan masuk pada halaman Control Panel akun Anda. Coba perhatikan bagian Account Information yang ada di sebelah kanan. Ada beberapa informasi yang penting yang akan kita gunakan sebelum memindahkan file website dari localhost ke hosting online. Sekarang perhatikan kembali bagian Account Information yang ada di sebelah kanan Control Panel Anda.
- Domain. Merupakan domain dari website yang akan kita simpan secara online. Pada localhost domain website kita adalah "http://localhost/webku" (sesuai dengan nama folder dari website yang kita simpan pada htdosc).
- Username. Merupakan username yang akan kita gunakan untuk mengakses file manager website kita. Username ini berbeda untuk tiap domain yang telah kita daftarkan.
- Password. Merupakan password yang akan kita gunakan untuk mengakses file manager. Password ini sama dengan password yang kita gunakan pada saat login ke dalam 000webhost.Com.
- Home Root. Merupakan tempat dimana kita akan menyimpan file website kita pada webserver tersebut. Pada localhost kita menyimpan di "C:\xampp\htdocs\".
Sekarang kita akan mengatur database website kita terlebih dahulu. Pada Control Panel Anda, klik tombol menu MySQL pada bagian Software/Services. Anda akan diarahkan menuju halaman "Manage MySQL Database".
Buatlah sebuah database baru dan user baru yang bisa mengakses database tersebut.
- MySQL database name. Merupakan nama database yang akan kita buat untuk website kita. Jika pada localhost, nama database yang kita buat adalah seperti pada gambar yang ada pada langkah 3 di atas, maka nantinya, nama database yang kita pakai adalah yang sedang kita buat sekarang.
- MySQL user name. Merupakan username yang bisa mengakses database yang telah kita buat. Pada localhost, username ini adalah "root".
- Password for MySQL user. Password yang akan kita gunakan untuk mengakses database yang telah kita buat tersebut. Pada localhost yang menggunakan Xampp, password tersebut tidak ada (kosong).
Silahkan klik tombol Create Database yang ada di bawahnya. Jika sudah berhasil, silahkan kembali pada bagian pembuatan database baru tersebut. Di sebelah bawah Anda akan melihat detail dari database yang telah Anda buat di dalam sebuah tabel. Anda juga bisa melihat informasi database host yang ditunjukkan pada kolom MySQL Host. Jika pada localhost, database host yang kita pakai adalah "localhost", maka pada hosting online ini, databse host yang kita gunakan adalah yang ditunjukkan pada tabel database tersebut.
Coba diingat kembali setting configuration yang kita lakukan pada saat menginstal Wordpress CMS pada localhost. Saya sarankan untuk membukanya kembali di sini.
Pengaturan yang kita lakukan seperti yang ditunjukkan pada gambar di atas adalah pengaturan pada localhost. Sehinnga, agar nantinya website kita bisa dibuka, kita harus merubah pengaturan konfigurasi tersebut sesuai dengan webserver dimana kita akan meng-hosting-kan website kita secara online. Sekarang kita akan mengganti setting configuaration pada website Wordpress CMS yang kita buat pada localhost dengan menggunakan informasi yang telah kita dapatkan dari langkah 3 dan langkah 5 agar sesuai dengan hosting online. Silahkan buka file website Anda yang ada di "C:\xampp\htdocs\webku" (sesuai dengan nama folder website yang Anda instal). Cari file yang bernama "wp-config.php", kemudian buka file tersebut menggunakan notepad, wordpad, atau dreamweaver.

Gambar di atas menunjukkan setting configuration untuk localhost seperti yang Anda lakukan pada saat instalasi Wordpress CMS pada localhost.
- Ganti "datawebku" yang ada pada baris 19 pada gambar dengan database name yang telah Anda buat pada langkah 5 di atas
- Ganti "root" yang ada pada baris 22 pada gambar dengan username yang telah Anda buat pada langkah 5 di atas
- Tuliskan password yang telah Anda buat pada langkah 5 di atas ke dalam tanda petik tunggal yang ada pada baris 25 pada gambar.
- Ganti "localhost" yang ada pada baris 28 pada gambar dengan username yang telah Anda buat pada langkah 5 di atas
Setelah itu simpan kembali file "wp-config.php" tersebut.
Sekarang saatnya meng-upload seluruh file website kita ke dalam hosting online di 000webhost.Com. Buka kembali Control Panel Anda seperti langkah 2 di atas. Klik tombol menu File Manager yang ada pada bagian Files. Anda akan masuk ke halaman login untuk masuk ke file manager. Gunakan username dan password yang ditunjukkan pada bagian Account Informatiion yang telah dijelaskan pada langkah 3.
Anda akan masuk ke dalam halaman file manager. Masuklah ke dalam folder "public_html", karena di dalam folder tersebutlah kita akan meng-upload seluruh file website Anda. Jika sudah masuk ke dalam folder tersebut, silahkan klik menu Upload yang ada di bagian atas. Anda akan masuk ke halaman Upload file and archive. Ada 2 cara upload yang tersedia:
- Files. Digunakan untuk meng-upload file satu persatu.
- Archive. Digunakan untuk meng-upload file yang disimpan dalam bentuk archive, yaitu .zip, .tar, .tgz, .gz.
Kita akan menggunakan cara yang kedua agar lebih mudah dan tidak menghabiskan waktu yang banyak mengingat file Wordpress CMS milik kita sangat banyak. Untuk itu, kita harus menyimpan terlebih dahulu file-file website Wordpress CMS kita ke dalam salah satu bentuk archive tersebut. Sebagai contoh kita kompress ke dalam bentuk .zip. Buka file website Anda yang ada di "C:\xampp\htdocs\webku". Perlu diperhatikan bahwa yang akan kita kompress bukanlah folder "webku" secara langsung, tetapi isi dari foder "webku" agar website akan langsung terlihat ketika dibuka melalui domain yang digunakan, dan tidak lagi membuka folder "webku".
Jika sudah dikompres dalam bentuk .zip, silahkan kembali lagi ke halaman upload pada file manager Anda.

Setelah itu, klik tanda contreng warna hijau di sebelah kiri atas untuk men-submit atau memulai untuk meng-upload archive. Secara otomatis, sistem server akan mengekstrak file tersebut di dalam file manager Anda, sehingga hasilnya akan seperti gambar di bawah ini.
Setalah kita meng-upload file ke dalam hosting online tersebut, kita juga perlu untuk memindahkan database website Wordpress CMS milik kita ke webserver. Buka PHPMyAdmin Anda pada localhost dengan membuka alamat "http://localhost/phpmyadmin". Klik database yang Anda gunakan pada website Wordpress CMS milik Anda. Dari contoh yang sebelumnya, nama database kita adalah "datawebku".

Klik menu Export yang ada di sebelah atas. Simpan database Anda dalam bentuk .sql. Beri nama misalnya "datawebku.sql". Caranya dengan memilih opsi SQL sebagai bentuk file databse, kemudian beri centang pada bagian Save as file, lalu klik tombol Go yang ada di sebalah kanannya.
Sekarang kembali lagi ke dalam Control panel Anda pada 000webhost.Com. Klik tombol menu PhpMyAdmin pada bagian Software/services. Anda akan masuk ke bagian phpMyAdmin Access. Klik link Enter phpMyadmin pada tabel List of current databases. Anda akan masuk ke halaman PHPMyAdmin pada 000webhost.Com. Bentuknya tidak terlalu berbeda dengan PHPMyAdmin yang ada pada localhost karena menggunakan software yang sama.
Langkah selanjutnya adalah memasukkan database yang kita simpan dari localhost tadi. Klik menu Import. Pada bagian File to import, klik tombol Browse dan pilih file "datawebku.sql" yang telah kita export sebelumnya dari localhost. Setelah itu klik tombol Go yang ada di sebelah bawah.
Langkah terakhir adalah mengganti URL website Anda dari "http://localhost/webku" menjadi domain yang Anda miliki yang ditunjukkan pada bagian Account Information yang telah dijelaskan pada langkah 3. Masih pada PHPMyAdmin pada hosting online, klik tabel "wp_options" (prefix tergantung pada saat instalasi) yang ada pada database Anda. Klik menu Browse untuk melihat isi dari tabel tersebut. Edit baris "siteurl" untuk mengubah URL website Anda. Ganti "http://localhost/webku" menjadi domain dari website Anda.

Akhirnya selesai sudah pemindahan website Wordpress CMS dari localhost ke hosting online. Jika masih ada langkah-langkah yang masih membingungkan, jangan sungkan-sungkan untuk berdiskusi melalui kotak komentar di bawah. Selamat mencoba...

Mengedit Website dengan Dreamweaver

Ada sebagian web designer dalam membuat situs professional tidak memanfaatkan Adobe Photoshop dalam merancang web, padahal dengan software tersebut kita akan lebih mudah dan lebih praktis dibandingkan harus membuat kode html.

Ketika dokumen Adobe Photoshop (download: situs_bisnis.zip) tersimpan dalam bentuk web maka secara otomatis akan membuat tag html sendiri sehingga tidak perlu bersusah payah mengetik kode html. Anda dapat membuktikan sendiri seperti nampak pada gambar berikut.

1. Mengubah Objek menjadi Background

Tidak semua gambar (image) yang pada web yang telah kita buat diganti. Jika image tersebut berfungsi sebagai tombol, maka Anda dapat menambahkan menu pull down agar tampilan website lebih menarik. Anda juga dapat membuat tombol dalam bentuk mouse over, dan lain sebagainya.

Pada bagian ini, kita akan mencoba membahas tentang teknik penggantian objek gambar menjadi latar belakang (backgrdound) agar kita dapat memasukkan beberapa komponen di dalamnya (teks maupun grafik).

Pertama kali, bukalah file index.html menggunakan Macromedia Dreamweaver.
Setelah file terbuka, tentukan terlebih dahulu image mana saja yang akan di jadikan latar belakang dan bagian mana saja yang akan dijadikan sebagai tombol. Sebagai contoh, klik image di bagian bawah teks New Product.
Pada bagian Properties, tertulis Src = images/index_26.gif. Hal itu berarti kita tidak dapat memasukan teks di atas gambar tersebut karena objek tersebut adalah image, bukan merupakan background. Tekan Del untuk menghapusnya.
Klik pada Background URL of cell untuk memilih gambar yang akan dijadikan latar belakang (background). Oleh karena nama file yang baru saja dihapus adalah index_26.gif maka gunakan file tersebut sebagai latar belakang.
Ketikkan images/index_26.gif pada kolom Bg.
Lakukan hal yang sama pada bagian lain apabila ingin dijadikan sebagai latar belakang agar kita dapat memasukkan objek berupa teks, animasi, maupun gambar.

2. Memasukkan Objek

Objek yang dimaksud dapat berupa animasi, gambar, maupun teks. Dalam Macromedia Dreamweaver proses memasukkan objek sangat mudah karena sudah disediakan tool yang sangat lengkap. Anda tinggal memilih objek apa yang akan dimasukkan. Berikut ini akan membahas masalah teknik memasukkan objek berupa teks.

Letakkan kursor pada tempat yang akan ditambahkan teks.
Pada penel Properties, aturlah beberapa spesifikasi seperti nampak pada gambar berikut.
Ketikkan beberapa kalimat yang berisi berita, kemudian aturlah format teks tersebut seperti nampak pada gambar berikut.
Anda bisa memasukkan image di antara teks tersebut. Untuk melakukan hal itu, pertama kali letakkan kursor di awal paragraf kemudian pilih menu Insert > Image.
Pilih file gambar yang akan dimasukkan dalam dokumen tersebut.
Apabila berhasil memasukkan gambar, maka akan terlihat objek tersebut berada di depan paragraf. Namun posisinya masih kurang sempurna karena susunan teks terdorong oleh gambar tersebut.
Agar tampilan lebih rapi, Anda dapat mengatur posisi gambar sehingga seluruh teks akan berada di sebelah kanan gambar. Untuk melakukan hal tersebut, pada panel Properties pilih Left untuk Align.

MEMBUAT LINK DAN NAVIGASI

Menu yang mudah digunakan (user friendly) dapat membantu pengguna ketika mencari informasi yang dibutuhkan. Sebaiknya menggunakan tombol menu yang umum, seperti: Home, Product, Service, dan Contact Us

Dalam Macromedia Dreamweaver, kita membuat Pop-up Menu, dan Jumping Menu secara mudah. Anda tidak bersusah payah menuliskan script yang panjang dalam bahasa Javascript karena telah disediakan tool yang sangat mudah dan fleksibel.

1. Membuat Pop-up Menu

Keunggulan software Macromedia Dreamweaver dibandingkan dengan aplikasi lain yang sejenis adalah adanya tool untuk membuat menu pop-up yang dibuat dengan bahasa Java. Bagi mereka yang masih awan dengan bahasa Java, tidak perlu bingung karena disediakan panel Behavior untuk mempermudah dalam pembuatan menu pop-up.

Sebelum membuat pop-up menu terlebih dulu harus menyiapkan nama file sebagai link. Sebagai contoh: ketika user memilih menu PC maka yang akan muncul adalah pilihan nama computer seperti Acer, HP, BenQ, dan lain sebagainya. Dan ketika user memilih salah satu opsi (missal: Acer) maka akan terhubung ke file tersebut.

Dengan demikian, Anda harus membuat beberapa file dengan bentuk interface yang sama seperti halaman utama, yaitu menyimpan dengan nama lain (contoh: Save As > acer.html). Diasumsikan, Anda telah memiliki beberapa file sebagai link yang dimaksud.

Pertama kali, klik menu PC.
Jika panel Behaviors belum muncul, aktifkan terlebih dulu dengan cara memilih menu Window > Behaviors.
Pada panel Behaviors (berada di sebelah kanan), klik tombol Add (tanda plus) untuk membuka menu.
Selanjutnya pilih Show Pop up Menu.
Setelah mengklik pilihan tersebut, maka akan muncul kotak dialog Show Pop-up Menu yang masih kosong.
Pada Tab Contents, masukkan nama menu pada kolom Text (misal: Acer).
Kemudian masukkan alamat URL pada kolom Link.
Selanjutnya pada kolom Target, pilih _parent.
Untuk membuat menu yang baru, klik tanda plus (+) di bagian atas. Kemudian lakukan hal sama seperti pada tahap 6.
Selanjutnya, klik Tab Appearance untuk mengatur warna teks dan latar belakang pop up menu. Tentukan jenis dan ukuran font yang digunakan. Lalu tentukan pula warna teks dan warna cell ketika mouse berada di atas teks.
Klik Tab Advanced untuk menentukan lebar, tinggi dan warna border kotak pop up menu.
Klik Tab Position untuk menentukan posisi pop up menu.
Setelah selesai klik OK. Untuk melihat hasilnya, klik tombol F12.
Untuk mengasah keterampilan Anda, buatlah pop-up menu pada tombol lain.

2. Membuat Rollover Image

Macromedia Dreamweaver selain menyediakan tool untuk membuat Pop up Menu juga menyediakan tool untuk membuat Rollover Image sebagai tombol. Yang harus Anda lakukan pertama kali adalah menyediakan dua buah gambar yang ukurannya sama tapi warnanya berbeda.

Buatlah duplikasi gambar tombol yang telah ada.
Kemudian editlah file hasil duplikasi tersebut menggunakan Adobe Photoshop. Pilih menu Image > Adjustment > Hue/Saturation.
Setelah muncul kotak dialog Hue/Saturation, aktifkan pilihan Colorize. Kemudian geser Slider Hue maupun Saturation sesuai kebutuhan. Setelah selesai klik OK, simpan dokumen tersebut dengan cara menekan Ctrl+S.
Sekarang kembali ke Macromedia Dreamweaver. Klik gambar About Us.
Hapuslah objek tersebut dengan cara menekan tombol Del. Selanjutnya pilih menu Insert > Image Objects > Rollover Image.
Setelah muncul kotak dialog Insert Rollover Image, berilah nama gambar pada kolom Image name kemudian tentukan gambar asli pada kolom Original Image. Untuk mempermudah pencarian file, klik tombol Browse. Tentukan pula file untuk gambar rollover pada kolom Rollover Image.
Masukkan teks alternat pada kolom Alt, lalu tentukan nama file sebagai link ketika tombol tersebut di klik.
Untuk melihat hasilnya, tekan tombol F12.

Membuat Mini Frontpage pada Joomla 1.5.x

Halaman utama sebuah website memiliki peran yang sangat penting bagi para pengunjung untuk mencari informasi yang dibutuhkan secara cepat dan menarik. Pada beberapa website portal, kombinasi antara teks, gambar, animasi, dan media lainnya dapat diatur sedemikian rupa sehingga tidak terkesan “semrawut”. Tema berita juga dapat ditempatkan secara terstruktur tanpa mengurangi keindahan tampilan.
Website yang dibuat dengan Joomla! mampu merealisasikan kebutuhan tersebut dengan cara menambahkan component, module, dan plugin sehingga sebuah berita terbaru maupun terpopuler dapat ditempatkan pada bagian yang jelas (eye catching). Hal ini dapat memberikan perhatian khusus dari para pengunjung.
Ada banyak cara untuk menampilkan berita/artikel dengan tujuan memberikan informasi kepada pengunjung tentang menarik dan up to date. Salah satunya adalah membuat beberapa halaman depan mini (Mini Frontpage) yang dapat menampilkan gambar dengan ukuran kecil, lengkap dengan deskripsi artikel tersebut.

A. Mengenal Mini Frontpage

Frontpage umumnya tampil di halaman utama, lengkap dengan gambar sebagai ilustrasi dan kalimat pembuka dari berita/artiel yang dimaksud. Jumlah artikel yang akan ditampilkan dalam frontpage juga dapat diatur sesuai kebutuhan. Dengan memanfaatkan ekstensi dari pihak ketiga, frontpage dengan ukuran kecil (mini) dapat ditampilkan di halaman utama dan dapat diatur berdasarkan Section dan Cetogory. Dengan memanfaatkan mini frontpage, berita maupun artikel menjadi semakin informatif.

Module untuk menampilkan mini frontpage bervariasi, ada yang gratis namun ada pula yang berbayar. Buku ini menyertakan file pendukung untuk menginstal mini frontpage yang gratis, jadi tidak perlu membayar atau mendownload terlebih dulu

B. Menginstal Mini Frontpage

Untuk melakukan instalasi, pilih menu Extensions > Instal/Uninstall.

Tekan tombol Browse untuk menentukan lokasi file.
Temukan file mini frontpage.
Jika sudah yakin, tekan tombol Open.
Klik tombol Upload File & Install untuk melakukan proses instalasi.
Tunggu beberapa saat hingga proses instalasi selesai. Jika telah berhasil akan muncul informasi bahwa proses instalasi berhasil
Selanjutnya mengatur parameter untuk menampilkan berita melalui module Mini Frontpage di halaman utama.

C. Mengatur Parameter Mini Frontpage
Module mini frontpage memiliki halaman untuk mengatur tampilan, jumlah artikel, besarnya gambar (thumbnail), artikel yang ditampilkan, dan pengaturan lainnya. Sebelum mengatur parameter terlebih dulu harus mengetahui ID Section, ID Category, dan ID Article karena nomor identitas tersebut (ID) digunakan sebagai pengaturan parameter untuk menampilkan artikel.

Pertama kali, periksa nomor ID Section dengan cara memilih menu Content > Section Manager.
Apabila telah berada di halaman Section Manager, nampak daftar nama section yang telah dibuat sebelumnya. Pada kolom paling kanan nampak nomor ID, nomor identitas tersebut yang nantinya akan digunakan untuk mengatur parameter Mini Frontpage dalam ruang lingkup Section.
Setelah mencatat ID masing-masing Section, langkah selanjutnya mencatat ID Category. Untuk itu, pilih menu Content > Category Manager.
Pada halaman Category Manager, nampak beberapa Category yang telah dibuat sebelumnya dan pada kolom paling kanan tertera nomor identitas (ID). Nomor identitas ini juga akan digunakan untuk mengatur parameter Mini Frontpage dalam ruang lingkup Category. Catatlah nomor identitas tersebut.
Selanjutnya, pilih menu Content > Article Manager untuk mencatat nomor identitas masing-masing artikel.
Catatlah semua ID artikel berdasarkan Category dan Section.
Langkah selanjutnya mengatur parameter Mini Frontpage, pilih menu Extensions > Module Manager.
Pada halaman Module Manager temukan module Mini Frontpage.
Editlah Mini Frontpage dengan cara mengklik nama module tersebut.
Setelah berada pada halaman Module [Edit], nampak beberapa informasi yang harus diatur yaitu: Details dan Parameters. Untuk Details, atur Show Title = Yes, Enabled = Yes, Position = Right, dan Access Level = Public.
Untuk Parameters, perlu beberapa pengaturan namun akan dijelaskan secara bertahap. Atur Enabled Cache = No, pada kolom Section masukkan ID Section yang akan ditampilkan. Dalam buku ini, ID yang dimasukkan adalah 5 (Section Olah Raga), kemudian masukkan ID Category. Dalam hal ini, beberapa ID Category yaitu: 34, 35, 36, 37 (Sepak Bola, Bulu Tangkis, Tenis Meja, dan Catur).
Untuk pengaturan lainnya, aturlah sesuai kebutuhan.
Thumbnail Position = posisi gambar (thumbnail), sebelum judul/kategiru atau setelah judul/kategori.
Show Category Title = Judul kategori ditampilkan (Show atau Hide).
Frontpage Items = Item ditampilkan difrontpage (Yes atau No).
Display Article Title = Judul artikel ditampilan (Show atau Hide).
Title Link = Judul artikel dalam bentuk Link (Yes atau No).
Display Author = Nama penulis ditampilkan (Yes atau No).
Display date articles created = Tanggal pembuatan artikel ditampilkan (Yes atau No)
Limit Intro = Batas maksimal kalimat pembuka (formatnya karakter).
Untuk mengatur format tampilan dan ukuran gambar, aturlah beberapa spesifikasi.
Number of columns = Jumlah kolom untuk menampilkan mini frontpate.
Number of Articles to display = Jumlah artikel yang akan ditampilkan
Number of Introtext / Hide Introtext = Jumlah kalimat pembuka yang akan ditampilkan.
Show thumbnails = Thumbnail ditampilkan (Show atau Hide).
Thumbnail Image Width = Lebar thumbnail (formatnya pixel).
Thumbnail Image height = Tinggi thumbnail (formatnya pixel).
Preserve Aspect = Rasio thumbnail.
Header Title for another articles link = Judul teks untuk artikel lainnya.
Langkah terakhir adalah melihat hasilnya di halaman utama. Maka akan nampak tampilan Mini Frontpage seperti nampak pada gambar berikut.