tutorial website
TRANSCRIPT
-
7/31/2019 Tutorial Website
1/65
www.INDO9.com Jasa Pembuatan Website | 1
edisi # 1
TUTORIAL WEBSITE
Disusun oleh :
Support & Customer Service
INDO9.COM
Jasa Pembuatan Website
http://indo9.com/http://indo9.com/http://indo9.com/ -
7/31/2019 Tutorial Website
2/65
www.INDO9.com Jasa Pembuatan Website | 2
Kata Pengantar
Tutorial ini kami persembahkan untuk klien INDO9.COM, agar dapat mengelola sendiriwebsitenya dengan MUDAH. Namun demikian, kami persilahkan juga bagi Anda yang belum
bergabung menjadi klien INDO9.COMuntuk ikut baca-baca tutorial ini, dengan harapan segera
tertarik untuk bergabung menjadi klienINDO9.COM.
Tak perlu ragu meskipun Anda awam pemrograman! Kami membangun WEBSITE PROFESIONAL
di atas Blogspot karena kami bekerja sama dengan GOOGLE. Blogspot adalah sebuah CMS milik
GOOGLE yang biasanya digunakan untuk nge-blog yang paling mudah dipakai! Meskipun kami
menggunakan Blogspot, namun Anda tetap mendapatkan nama domain sendiri (BUKAN domain.blogspot.com). Selain mudah digunakan, Blogspot juga terbukti paling handal dalam SEO (Search
Engine Optimization), terbukti Blogspot paling banyak dipakai oleh para pakar SEO di Indonesia
maupun dunia, dan sudah banyak klien kami pemilik website yang muncul dalam halaman-
halaman depan Google, dalam berbagai kategori.
Akhirnya kami menyampaikan ucapan selamat kepada Anda yang sudah menjadi Klien
INDO9.COM. Ketika Anda sudah membuat website diINDO9.COM, maka kemajuan perusahaan
anda hanya semudah meng-klik lewat ujung jari anda. Bagi yang belum menjadi klienINDO9.COM, silahkan bergabung menjadi klien kami bersama lebih dari 5.000 klien kami yang
tersebar diseluruh Indonesia dan tampilkan informasi perusahaan, produk, dan penawaran Anda
agar dikenal oleh klien maupun calon klien potensial baik ditingkat lokal, nasional, sampai
mancanegara.
Selamat Datang di Dunia Online, Semoga buku ini dapat memberikan manfaat nyata !
INDO9.COM
Jasa Pembuatan Website
http://indo9.com/http://indo9.com/http://indo9.com/http://indo9.com/http://indo9.com/http://indo9.com/http://indo9.com/http://indo9.com/http://indo9.com/http://indo9.com/http://indo9.com/http://indo9.com/http://indo9.com/http://indo9.com/http://indo9.com/http://indo9.com/http://indo9.com/http://indo9.com/http://indo9.com/http://indo9.com/http://indo9.com/http://indo9.com/http://indo9.com/http://indo9.com/ -
7/31/2019 Tutorial Website
3/65
www.INDO9.com Jasa Pembuatan Website | 3
Daftar Isi
Cover Depan. 1
Kata Pengantar 2
Daftar Isi . 3
BAB 1 SEKILAS TENTANG WEBSITE.. 4
1.1Pengertian.. 41.2Sejarah 41.3JenisJenis Website 41.4Mengapa memakai Blogspot .. 51.5Mengenai Buku Ini. 7
BAB 2 MENGELOLA WEBSITE 9
2.1 Melihat Tampilan website.. 9
2.2 Masuk ke Admin Area. 10
2.3 Mengedit tulisan pada halaman website . 13
2.4 Mengenal Area Teks Editor.. 14
2.5 Menambah / membuat halaman baru 21
2.6 Membuat Link Menu di Menu Atas.. 232.7 Membuat Link Menu di Menu Samping... 28
BAB 3 MENGELOLA WIDGET.... 35
3.1 Widget Running Text. 35
3.2 Widget Translate to . 39
3.3 Widget Yahoo Messenger 41
3.4 Widget Jam & Tanggal 49
3.5 Widget Klien Indo9.com 49
3.6 Widget Menu Samping.. 503.7 Widget Facebook 58
3.8 Widget Address 62
3.9 Widget Administrator 65
-
7/31/2019 Tutorial Website
4/65
www.INDO9.com Jasa Pembuatan Website | 4
BAB 1
SEKILAS TENTANG WEBSITE
1.1 Pengertian websiteDunia internet sudah semakin berkembang. Informasi yang cepat dan tanpa batas merupakan
suatu kelebihan dari internet yang akan berguna sebagai media promosi USAHA Anda. Anda
dengan mudah akan menemukan pelanggan potensial yang baru, sekaligus juga memperlebar
pasar. Jika bisnis Anda ingin menjadi besar, maka kini saatnya Anda untuk membuat website di
INDO9 untuk menghalau semua rintangan, dan nikmatilah menjadi pebisnis yang HANDAL dan
SUKSES !
Website Adalah Media Promosi Bisnis Anda di Internet yang dapat menampilkan penawaran
produk dan jasa perusahaan Anda, Online 24 Jam sepanjang tahun. Selain dari kemudahan yang
didapatkan, kegunaan dan manfaat website juga dapat menunjang bisnis anda, dengan website
dan internet, semua kalangan dapat melihat penawaran & promosi informasi perusahaan serta
produk-produk yang Anda jual. Kemudahan tersebut dapat mendekatkan anda dengan para
pelanggan dan calon pembeli. Hingga secara otomatis akan meningkatkan omzet bisnis Anda.
1.2Sejarah websiteWebsite berbasis blog pertama kali dipopulerkan oleh Blogger.com yang saat ini dimiliki oleh
GOOGLE.COM pada akhir tahun 2002. Semenjak itu, banyak terdapat aplikasi-aplikasi yang
bersifat terbuka yang bersifat add-on untuk mempercantik dan melengkapi website yang
dibangun dengan blogspot.
1.3. Jenis Jenis Website
Sejak ditemukannya website sampai sekarang, jenis website terus berkembang, yang semula
hanya bersifat pribadi kini menjadi lebih beragam. Berikut ini jenis-jenis website yang dapat
diklasifikasikan dari sekian banyaknya website yang ada di Internet :
Website Company Profile : Website yang berisi informasi tentang sebuah perusahaan,meliputi Profil, Produk & Jasa, Galeri Foto dll.
-
7/31/2019 Tutorial Website
5/65
www.INDO9.com Jasa Pembuatan Website | 5
Website Toko Online : Website yang memajang produk-produknya untuk memudahkanpembeli untuk memilih dan membeli barang-barang yang dijual secara online.
Website Perguruan Tinggi : Website yang dimiliki oleh Perguruan tinggi. Website Sekolah : Website yang digunakan untuk menampilkan segala aspek dan
kegiatan dari lingkungan sekolah. Website UKM : website yang dimiliki oleh pelaku bisnis dari kelompok UKM Website Blog Pribadi : Website milik perorangan yang biasanya memuat artikel sesuai
dengan hobby si pemilik Website.
1.4. MENGAPA MEMAKAI BLOGSPOT ?Tak perlu ragu meskipun Anda awam pemrograman! Kami membangun website professional di
atas Blogspot karena kami bekerja sama dengan GOOGLE. Blogspot adalah sebuah CMS milikGOOGLE yang biasanya digunakan untuk nge-blog yang paling mudah dipakai! Meskipun kami
menggunakan Blogspot, namun Anda tetap mendapatkan nama domain sendiri (BUKAN domain
.blogspot.com). Selain mudah digunakan, Blogspot juga terbukti paling handal dalam SEO (Search
Engine Optimization), terbukti Blogspot paling banyak dipakai oleh para pakar SEO di Indonesia
maupun dunia, dan sudah banyak klien kami pemilik website yang muncul dalam halaman-
halaman depan GOOGLE, dalam berbagai kategori.
Sejak pertama mengenal website, banyak orang sudah langsung kesengsem dengan blogspot.
Untuk seorang pemula misalnya, dalam mengelola website sangat terbantu dengan
menggunakan Blogspot karena memiliki interface yang easy catching, enak dilihat dan mudah
dipahami. Menu- menunya yang sederhana membuat siapapun mudah mempelajari platform
blog milik GOOGLE yang satu ini. Kemudahan lain juga akan kita peroleh ketika kita ingin
memodifikasi website yang kita miliki, seperti optimasi SEO, mengganti template, menambah
widget atau modifikasi widget yang sangat memanjakan penggunanya. Disamping kelebihan
kelebihan tersebut Blogspot juga masih memiliki kelebihan lainnya yakni :
2.5.9.Dimiliki oleh Perusahaan TI paling terkemuka didunia yaitu Google.Blogspot sebenarnya, pertama kali diperkenalkan oleh Pyra Labs pada tahun 1999. Kemudian
Google membelinya dengan kepemilikan penuh. Selain itu Google juga memiliki sistem operasi
Android yang semakin pesat perkembangannya dimana jelas search engine defaultnya tentu saja
memakai google.
-
7/31/2019 Tutorial Website
6/65
www.INDO9.com Jasa Pembuatan Website | 6
1.4.2. Murah
Murah karena website Anda tidak perlu untuk mencari perusahaan web hosting yang baik,
Google memiliki ruang web dan bandwidth yang cukup besar untuk mengalokasikan website
Anda di server mereka.
1.4.3. Blogspot lebih Aman
Google hampir 99,99% anti hack. Mereka dapat menjamin Anda bahwa setiap situs web host di
dalamnya tidak dapat hacked sampai dan kecuali Anda membocorkan informasi login Anda.
Setiap akun di google dilindungi dengan berbagai cara termasuk menggunakan nomer
Handphone pribadi pemiliki akun. Jika Anda meng-host website Anda di perusahaan web hosting
lain, mungkin ada peluang untuk website Andat di hack. Ada beberapa predator yang haus untuk
database MySQL hacker tanpa alasan, membaca artikel tentang database MySQL hacking dengan
SQL injection.
1.4.4. Tidak perlu khawatir Investasi website Anda akan ketinggalan Teknologi.
Bila Anda menggunakan Wordpress, Joomla, Drupal, dll maka setiap kali ada upgrade ke versi
baru, berarti Anda harus upgrade ke versi baru secara manual. Tapi di Blogspot Anda tidak perlu
khawatir tentang itu, fitur baru akan tersedia secara` otomatis untuk dashboard Anda segera
setelah mereka diluncurkan.
1.4.5. Kemudahan dalam mendesain template website.
Untuk desainer WordPress membutuhkan lebih dari satu desain halaman, yaitu untuk Homepage, halaman Post, halaman Arsip, dll halaman kustom Sementara di Google Blogspot, halaman
web saja sudah cukup. Dalam kasus jika Anda ingin desain terpisah maka Anda dapat
menggunakan tag kondisional untuk mengubah template, misalnya tampilan yang berbeda
antara halaman homepage dan postingan.
1.4.6. Jangan khawatir bahkan jika domain Anda berakhir .
Jika seorang blogger yang sebelumnya memakai blogspot kemudian membeli domain dan
custom domainnya berakhir, maka kita dapat segera beralih kembali ke subdomain gratis dari
blogspot.
1.4.7. Login terpadu dengan Akun Google Anda.
Seperti kami 6amper6r sebelumnya, Blogspot menjadi produk Google, semua aplikasi Google
dan produk dapat dengan mudah diintegrasikan ke Website Anda. Banyak fitur yang berguna
untuk situs Web yang ditawarkan oleh Google, termasuk AdSense, AdWords, Google Analytics
dan alat Webmaster untuk pengindeksan Google. Alih-alih menambahkan kode ke template
-
7/31/2019 Tutorial Website
7/65
www.INDO9.com Jasa Pembuatan Website | 7
Anda, sesuatu yang dapat dengan cepat menjadi membingungkan dan menghasilkan situs yang
rusak, Blogspot memungkinkan Anda untuk hanya mengklik sebuah tombol dan
mengintegrasikan alat ini kewebsite Anda.
1.4.8. Mudah dan Cepat Pengindeksan.
Segera setelah Anda mempublikasikan artikel Anda dari Blogspot, Google langsung bereaksi!
Posting website Anda dengan mudah diindeks di mesin pencari mereka. Selain itu, Google adalah
salah satu mesin pencari terkemuka dan Blogspot adalah salah satu layanan yang disediakan
oleh mereka.
1.4.9. Satu akun Gmail bisa untuk beberapa website.
Dengan Blogspot, Anda dapat memiliki beberapa jumlah website dengan email yang sama dari
akun Google. Anda dapat menjalankan beberapa website sekaligus dalam satu akun gmail. Ini
yang tidak dimiliki jika memakai CMS lainnya. Proses mengelola website menjadi sangat mudahsehingga seorang anak pun bisa melakukannya.
Itulah beberapa alasan mengapa INDO9.COM bekerjasama dengan GOOGLE membangun
website professional menggunakan CMS Blogspot. Bukan CMS yang lain !!!
1.5. Mengenai Buku IniBuku ini pada dasarnya memberikan penjelasan dan tutorial teknis praktek secara langsung
untuk mengelola sebuah website yang dibangun berbasis Blogspot dengan menggunakan
Domain sendiri (Bukan domain.blogspot.com).
Pembahasan dalam buku ini diusahakan terstruktur secara prosedur sesuai proses yang terjadi
dampai dengan sebuah website dapat dikelola secara online dengan mudah. Tidak sampai disitu,
pembahasan berlanjut pada proses bagaimana agar website Anda dikenal oleh search engine,
serta bagaimana agar website Anda dapat memberikan penghasilan bagi Anda.
Adapun secara garis besar yang akan dibahas pada buku ini adalah :
BAB 1: Membahas tentang website, dimulai dari pengertian website, sejarah website, jenis
website serta alasan memilih Blogspot didalam membangun website professional.
BAB 2 : Membahas cara-cara mengelola website, meliputi Melihat Tampilan website,
-
7/31/2019 Tutorial Website
8/65
www.INDO9.com Jasa Pembuatan Website | 8
Masuk ke Admin Area, Membuat Halaman Barul, Membuat Link Menu di Top Menu (Menu
Atas), Membuat Link Menu di Side Menu (Menu Samping), Menyisipkan Media ke Artikel atau
Halaman.
BAB 3 : Membahas tentang cara MENGELOLA WIDGET, meliputi Widget Running Text, WidgetTranslate to, Widget Yahoo Messenger, Widget Jam & Tanggal, Widget Klien Indo9.com, Widget
Menu, Widget Facebook, Widget Address, Widget Administrator.
-
7/31/2019 Tutorial Website
9/65
www.INDO9.com Jasa Pembuatan Website | 9
BAB 2
MENGELOLA WEBSITE
2.1 MELIHAT TAMPILAN WEBSITE
Pada saat pertama kali, tampilan awal website Anda akan disesuaikan dengan permintaan Anda
pada saat Anda mengisi FORM ORDER website.
Salah satu tampilan website, misalnya seperti berikut ini :
Gambar 1 Contoh tampilan website
Website Anda pada saat pertama kali dibuat oleh INDO9.COM dengan dilengkapi beberapa fitur
yang sangat menarik dan fungional, diantaranya sbb :
Dibagian atas (top menu):
Ada Top Menu : Home, Profil, Produk & Jasa, Galeri Foto, Kontak Kami. Bisa diganti seduai
dengan kebutuhan Anda.
-
7/31/2019 Tutorial Website
10/65
www.INDO9.com Jasa Pembuatan Website | 10
Dibagian tengah atas :
Ada widget di running text atau teks berjalan) 10amper10 widget slideshow.
Dibagian samping kiri :Ada widget Klien INDO9.COM, widget Menu (samping), widget Facebook,
Ada widget Address, widget Administrator
Dibagian samping kanan :
Ada widget Translate to, widget Yahoo Messenger, widget Label, widget Jam & Tanggal.
Dibagian bawah :
Ada Banner Link dari INDO9.COM Jasa Pembuatan Website. Sebuah Merek yang berarti bahwa
website tersebut dibuat dan di support serta bergaransi resmi dari INDO9.COM.
2.2. Masuk Ke Admin Area.
Untuk mengatur website Anda baik mengedit tulisan pada halaman website, menambah gambar,
menghapus gambar pada halaman website, menambah halaman baru dll, maka Anda
diharuskan masuk ke halaman Admin. Ini disebut juga dengan LOGIN WEBSITE. Hanya Anda dan
yang diberi hak yang diizinkan untuk membuka halaman admin.
Berikut langkah-langkah untuk masuk ke halaman admin :
1. Silahkan klik LOGIN WEBSITE yang ada di widget ADMINISTRATOR. Untuk jelasnya lihatgambar berikut ini :
-
7/31/2019 Tutorial Website
11/65
www.INDO9.com Jasa Pembuatan Website | 11
Gambar 2 Login Website
2. Maka akan tampil halaman Login seperti Gambar 3 dibawah ini.3. Masukkan Email dan Password Anda. Jangan lupa untuk memilih Bahasa Indonesia
dengan mengaturnya di bagian kanan bawah (lihat panah pada Gambar 3).
Gambar 3 Login Admin Area
4. Lalu klik Masuk5. Maka Anda akan masuk ke halaman Dashboard atau halaman Admin.
-
7/31/2019 Tutorial Website
12/65
www.INDO9.com Jasa Pembuatan Website | 12
Gambar 4 Halaman Awal Dashboard
6. Klik Nama website yang ingin Anda kelola, pada contoh Gambar 4 diatas, nama websitenya adalah Nama Perusahaan.
7. Setelah itu akan tampil dilayar komputer Anda menu pilihan utama untuk mengelolawebsite Anda, seperti ditunjukkan oleh lingkaran merah pada Gambar 5 dibawah ini :
Gambar 5 Menu Dashboard
-
7/31/2019 Tutorial Website
13/65
www.INDO9.com Jasa Pembuatan Website | 13
2.3 Mengedit tulisan pada halaman website
Untuk mengedit tulisan yang ada di halaman website Anda, caranya adalah klik menu Post yang
ada di Menu Dashboard (perhatikan tanda panah didalam lingkaran pada Gambar 5 diatas).
Selanjutnya akan muncul dilayar komputer Anda tampilan seperti Gambar 6 berikut ini :
Gambar 6 Nama-nama Posting atau halaman-halaman pada website.
-
7/31/2019 Tutorial Website
14/65
www.INDO9.com Jasa Pembuatan Website | 14
Pilihlah salah satu posting atau halaman yang ingin Anda edit isinya. Dalam contoh ini marilah
kita praktekkan cara mengedit halaman Home. Caranya adalah dengan klik nama postingnya
yaitu Home, maka pada layar 14amper14r Anda akan tampil seperti Gambar 7 berikut ini :
Gambar 7 Area Text Editor
Anda bisa mengedit konten website semau Anda. Kalau sudah selesai maka untuk mengakhiri
nya silahkan klik Perbarui
2.4 Mengenal Area Teks Editor
Teks Editor pada website Anda hampir sama dengan teks editor pada Ms-Word, sehingga sangat
mudah digunakan. Berikut Gambar Text editor pada website Anda :
Gambar 8 Text Editor
-
7/31/2019 Tutorial Website
15/65
www.INDO9.com Jasa Pembuatan Website | 15
Adapun kegunaan dari tiap-tiap pilihan tersebut adalah sbb :
Gambar Fungsi
Digunakan untuk mengedit konten website dalam bentuk text biasa.
Digunakan untuk menampilkan konten website dalam bentuk HTML
Digunakan untuk mengembalikan ke sebelumnya, misalnya kita keliru
menghapus, maka untuk mengembalikannya kita klik gambar tsb.
Digunakan untuk mengembalikan ke sesudahnya.
-
7/31/2019 Tutorial Website
16/65
www.INDO9.com Jasa Pembuatan Website | 16
Digunakan untuk memilih jenis huruf atau Font. Jenis Font yang
tersedia adalah sbb :
Untuk mengetahui perbedaanya, silahkan Anda melakukan uji coba.
Digunakan untuk mengatur Ukuran Font, besar kecilnya huruf.
Pilihannya adalah sbb :
Untuk mengetahui perbedaanya, silahkan Anda melakukan uji coba.
Digunakan untuk mengatur Text untuk Judul, Sub Judul, Normal dll.
Pilihannya sbb :
Untuk mengetahui perbedaanya, silahkan Anda melakukan uji coba.
-
7/31/2019 Tutorial Website
17/65
www.INDO9.com Jasa Pembuatan Website | 17
Untuk membuat teks menjadi Bold atau tebal
Untuk membuat teks menjadi Italic atai miring
Untuk membuat teks menjadi Underline atau bergaris bawah
Untuk membuat teks mempunyai Coretan, Misalnya untuk contoh
sbb :
Harga Rp. 980.000,- 450.000,-
Untuk memberikan warna Depan pada Teks, pilihannya adalah sbb :
Untuk mengetahui warna-warnanya, silahkan Anda melakukan uji
coba.
Untuk memberikan warna Latar Belakang pada Teks, pilihannya
adalah sbb :
-
7/31/2019 Tutorial Website
18/65
www.INDO9.com Jasa Pembuatan Website | 18
Untuk mengetahui warna-warnanya, silahkan Anda melakukan uji
coba.
Memasang Link pada teks atau gambar gunanya kalau tulisan ataugambar tsb di klik, akan menampilkan halaman tertentu atau website
tertentu.
Caranya klik tulisan atau gambar yang ingin diberikan Link, kemudian
klik menu Link, maka akan muncul sbb :
-
7/31/2019 Tutorial Website
19/65
www.INDO9.com Jasa Pembuatan Website | 19
Untuk memasang gambar, pilihannya sbb :
Untuk memasang video, pilihannya sbb :
Untuk memotong artikel yang terlalu panjang, sehingga tempat
dipotong tsb akan muncul tulisan READ MORE atau BACA
SELANJUTNYA.
Untuk mengatur tepi dari tulisan, apakah rata kiri, rata kanan, tengah
atau rata kiri kanan.
Digunakan untuk membuat daftar nomor secara otomatis, contohnya
:
1. Handphone2. Laptop
-
7/31/2019 Tutorial Website
20/65
www.INDO9.com Jasa Pembuatan Website | 20
Digunakan untuk memberikan bullet lingkaran atau kotak pada daftar,
contohnya :
Baju Tas Buku dll
Untuk menampilkan tanda Quote atau tanda petik besar pada tulisan.
Untuk menghapus semua format yang telah diatur, misalnya jenis
font, ukuran font, warna font, rata kiri dll, semuanya dikembalikan ke
aslinya.
Untuk mengecek spelling (ejaan) pada tulisan Anda. Apakah ada salah
ketik dll.
-
7/31/2019 Tutorial Website
21/65
www.INDO9.com Jasa Pembuatan Website | 21
2.5 Menambah / membuat halaman baru
Anda bisa membuat atau menambah halaman website Anda sebanyak-banyaknya, tanpa
dibatasi. Bahkan ribuan halaman sekalipun seperti majalah online, portal berita dll. Adapun cara
menambah halaman adalah sbb :
Gambar 9 Menu pilihan pada Dashboard
Untuk menambah atau membuat halaman baru, klik Entri Baru
-
7/31/2019 Tutorial Website
22/65
www.INDO9.com Jasa Pembuatan Website | 22
Setelah itu akan muncul teks editor yang masih kosong, sbb :
Gambar 10 Menambah / Membuat Halaman Baru
OK, sebagai bahan praktek, marilah kita membuat sebuah posting untuk latihan saja :
JUDUL : Cara cepat menjadi jutawan lewat internet
ISI : Ini adalah contoh artikel cara cepat menjadi jutawan untuk belajar membuat posting atau
halaman baru. Ini adalah contoh artikel atau posting untuk belajar membuat halaman baru. Ini
adalah contoh artikel atau posting untuk belajar membuat halaman baru. Ini adalah contoh
artikel atau posting untuk belajar membuat halaman baru. Ini adalah contoh artikel atau posting
untuk belajar membuat halaman baru.
LABEL : Label boleh diisi boleh dikosongkan, sebaiknya diisi, karena kata-kata yang Anda isi pada
label ini nantinya akan tampil di Widget Label secara otomatis. Dalam contoh ini label kita isi
dengan misalnya Tips.
Sekarang kita sudah selesai, untuk menyimpannya kita klik Publikasikan.
Maka pada layar computer Anda akan tampil seperti Gambar 11 berikut ini :
-
7/31/2019 Tutorial Website
23/65
www.INDO9.com Jasa Pembuatan Website | 23
Gambar 11 Halaman Baru sudahjadi (lihat panah)
Halaman yang baru Anda buat sudah jadi, tapi belum bisa dilihat oleh pengunjung website Anda.
Karena belum ada LINK MENU yang bisa di klik untuk menampilkan halaman tsb. Nahcara
membuat LINK MENU di ATAS dan cara membuat LINK MENU di samping akan dibahas di topik
berikut ini.
2.6 Membuat Link Menu di Bagian Atas
Berikut ini adalah contoh link menu di bagian atas (Top menu).
-
7/31/2019 Tutorial Website
24/65
www.INDO9.com Jasa Pembuatan Website | 24
Gambar 11 Menu Atas (Top Menu)
Mari kita bahas cara membuat Link Menu dibagian Atas.
1. Pertama letakkan cursor di tulisan Lihat yang ada dibagian bawah judul posting(ditunjukkan oleh panah pada Gambar 12 dibawah ini)
Gambar 12- Meng-copy alamat URL halaman
-
7/31/2019 Tutorial Website
25/65
www.INDO9.com Jasa Pembuatan Website | 25
2. Setelah posisi cursor di tulisan Lihat, maka kita akan menyalin alamat URL halamantersebut, caranya : klik kanan mouse, akan tampil sbb :
Gambar 13 Pilih Salin alamat tautan
3. Selanjutnya klik Salin alamat tautan4. Selanjutnya klik Laman (Lihat Gambar 14)
Gambar 14 klik Laman
-
7/31/2019 Tutorial Website
26/65
www.INDO9.com Jasa Pembuatan Website | 26
Setelah itu maka akan tampil seperti Gambar 15 berikut ini :
Gambar 15 klik tanda segitiga
5. Klik tanda segitiga (lihat panah Gambar 15 diatas)Akan muncul seperti Gambar 16 berikut ini :
Gambar 16 Klik Alamat Web
6. Klik Alamat web, maka akan muncul seperti Gambar 17 berikut ini :
-
7/31/2019 Tutorial Website
27/65
www.INDO9.com Jasa Pembuatan Website | 27
Gambar 17 Isi Nama Link Menu & tempel (Paste) alamat URL nya.
7. Isi pada form Judul laman, link menu misalnya TIPS8. Selanjutnya pada form Alamat web (URL) tulisan http:// dihapus dulu, lalu tekan Ctrl+V
(untuk temple URL halaman yang tadi di copy pada langkah 3 diatas)
Hasilnya mirip (tentu tidak sama persis dengan alamat URL anda) seperti Gambar 18
berikut ini :
Gambar 18 Contoh setelah Diisi
-
7/31/2019 Tutorial Website
28/65
www.INDO9.com Jasa Pembuatan Website | 28
9. Langkah terakhir klik SIMPAN (lihat Gambar 18 diatas).Selesai, untuk melihat hasilnya silahkan lihat website Anda dengan klik
Maka link menu yang tadi kita buat sudah ada di website, lihat Gambar 19 berikut ini.
Gambar 19 Link menu TIPS sudah berhasil ditambahkan.
2.7 Membuat Link Menu di Menu Samping
Berikut ini adalah contoh link menu di samping.
Gambar 20 Contoh Link Menu di Samping
Mari kita bahas cara membuat Link Menu dibagian samping.
-
7/31/2019 Tutorial Website
29/65
www.INDO9.com Jasa Pembuatan Website | 29
1. Pertama letakkan cursor di tulisan Lihat yang ada dibagian bawah judul posting(ditunjukkan oleh panah pada Gambar 21 dibawah ini).
Gambar 21 - Meng-copy alamat URL halaman
2. Setelah posisi cursor di tulisan Lihat, maka kita akan menyalin alamat URL halamantersebut, caranya : klik kanan mouse, akan tampil sbb :
-
7/31/2019 Tutorial Website
30/65
www.INDO9.com Jasa Pembuatan Website | 30
Gambar 22 Pilih Salin alamat tautan
3. Selanjutnya klik Salin alamat tautan (Lihat Gambar 22 diatas)4. Selanjutnya klik Tata Letak (Lihat Gambar 23)
Gambar 23 klik Tata Letak
Setelah itu maka akan tampil seperti Gambar 24 berikut ini :
-
7/31/2019 Tutorial Website
31/65
www.INDO9.com Jasa Pembuatan Website | 31
Gambar 24 Klik Edit Pada Widget Menu
5. Klik Edit (Lihat panah pada Gambar 24 diatas), maka akan muncul di layar komputer Andaseperti Gambar 25 berikut ini :
-
7/31/2019 Tutorial Website
32/65
www.INDO9.com Jasa Pembuatan Website | 32
Gambar 25 Isi Nama Link Menu & tempel (Paste) alamat URL nya.
6. Selanjutnya pada form URL Situs Baru, yang dilakukan adalah : hapus dulu http:// , lalutekan Ctrl+V (untuk temple URL halaman yang tadi di copy pada langkah 3 diatas)
7.8. Isi pada form Nama Situs Baru, link menu misalnya TIPS lalu tekan [ENTER]
-
7/31/2019 Tutorial Website
33/65
www.INDO9.com Jasa Pembuatan Website | 33
Hasilnya mirip (tentu tidak sama persis dengan alamat URL anda) seperti Gambar 26
berikut ini :
Gambar 26 Contoh setelah diisi dan menekan [ENTER]
Panah ke bawah ini
untuk memindahkan
posisi Tips ke bawah
-
7/31/2019 Tutorial Website
34/65
www.INDO9.com Jasa Pembuatan Website | 34
9. Terakhir klik Simpan.
Selesai, untuk melihat hasilnya silahkan lihat website Anda dengan klik
Maka link menu Tips di samping sudah berhasil dibuat, lihat Gambar 27 berikut ini.
Gambar 27 Menu Tips di samping sudah berhasil dibuat.
-
7/31/2019 Tutorial Website
35/65
www.INDO9.com Jasa Pembuatan Website | 35
BAB 3
MENGELOLA WIDGET
3.1 Widget Running Text
Widget Running Text atau Teks Bergerak sangat bagus untuk menyampaikan pesan yang penting
diketahui, disamping itu dapat mempercantik tampilan website. Contoh Running Text adalah sbb
:
Gambar 28 Contoh Running Text (Teks Berjalan)
Cara mengganti tulisan yang ada pada running text adalah sbb :
-
7/31/2019 Tutorial Website
36/65
www.INDO9.com Jasa Pembuatan Website | 36
1. Klik Tata Letak (lihat Gambar 29)
Gambar 29 Klik Tata Letak
-
7/31/2019 Tutorial Website
37/65
www.INDO9.com Jasa Pembuatan Website | 37
2. Klik Edit (Lihat Gambar 30)
Gambar 30 Klik Edit
3. Selanjutnya akan muncul pada layar komputer Anda seperti Gambar 31. Silahkan EditTulisan berjalan semau Anda (lihat Gambar 31 tulisan yang di blok).
4. Kalau sudah selesai Klik Simpan
5. Klik Simpan Setelan
6. Selesai, Untuk melihat hasilnya Klik Lihat Blog
-
7/31/2019 Tutorial Website
38/65
www.INDO9.com Jasa Pembuatan Website | 38
Gambar 31 Mengedit Running Text (Tulisan Berjalan)
-
7/31/2019 Tutorial Website
39/65
www.INDO9.com Jasa Pembuatan Website | 39
3.2 Widget Translate to
Widget ini berfungsi untuk melakukan terjemahan secara otomatis oleh GOOGLE ke dalam
beberapa bahasa asing. Tampilannya adalah seperti Gambar 32 berikut ini :
Gambar 32 Widget Translate to
Anda dapat mengelola widget Translate to ini semau Anda, misalnya memindahkan kebawah
atau menurunkan, memindahkan keatas atau menaikkan, memindahkan dari kanan ke kiri, atau
memindahkan dari kiri ke kanan (cara memindahkan widget ini berlaku untuk semua widget
yang ada di kiri dan kanan website).
Berikut langkah-langkahnya untuk memindahkan letak widget Translate to:
1. Klik Tata Letak (Lihat Gambar 33)
-
7/31/2019 Tutorial Website
40/65
www.INDO9.com Jasa Pembuatan Website | 40
Gambar 33 Klik Tata Letak
2. Letakkan cursor di widget Translate to (lihat Gambar 34 ) kemudian tekan klik kiri tahanjangan di lepas (click & drag), kemudian pindahkan widget tersebut ke kiri atau ke bawah
(semau Anda), kalau sudah lepas klik tadi. Maka Widget sudah berpindah ke posisi yang
Anda tentukan tadi.
Gambar 34 Memindahkan Widget Translet to
-
7/31/2019 Tutorial Website
41/65
www.INDO9.com Jasa Pembuatan Website | 41
3. Kalau sudah Simpan Setelan
Selesai. Untuk melihat hasilnya Klik Lihat Blog.
3.3 Widget Yahoo Messenger
Widget Yahoo Messenger berfungsi untuk melakukan Chatting secara interaktif antara
pengunjung website dengan Admin Website atau pemilik website.
Salah satu tampilan widget Yahoo Messenger adalah pada Gambar 35 sbb :
Gambar 35 Widget Yahoo Messenger
Kita tidak mempelajari cara tentang cara memindahkan letak Widget Yahoo Messenger misalnya
memindahkan ke kiri, memindahkan ke kanan, memindahkan ke bawah dll karena caranya sama
dengan memindahkan widget pada Widget Translate to pada pelajaran sebelumnya (Pelajaran
3.2 Widget Translate to).
Selanjutnya mari kita belajar cara mengelola widget Yahoo Messenger, seperti mengganti YM
sesuai dengan YM Anda, atau menambah beberapa YM lagi sesuai kebutuhan perusahaan Anda.
-
7/31/2019 Tutorial Website
42/65
www.INDO9.com Jasa Pembuatan Website | 42
Berikut Langkah-langkah mengelola widget Yahoo Messenger :
1. Klik Tata Letak (Lihat Gambar 34)
Gambar 34 Klik Tata Letak
2. Klik Edit pada widget Yahoo Messenger (Lihat panah pada Gambar 35)
-
7/31/2019 Tutorial Website
43/65
www.INDO9.com Jasa Pembuatan Website | 43
Gambar 35 Klik Edit pada widget Yahoo Messenger
3. Selanjutnya akan muncul pada layar computer Anda seperti Gambar-36
-
7/31/2019 Tutorial Website
44/65
www.INDO9.com Jasa Pembuatan Website | 44
Gambar 36 Kode HTML pada widget Yahoo Messenger
-
7/31/2019 Tutorial Website
45/65
www.INDO9.com Jasa Pembuatan Website | 45
4. Ganti tulisan alamat_ym_anda (Lihat gambar 36 ditandai dengan kotak merah) gantidengan YM Anda, Misalnya email Yahoo [email protected],maka YM anda
adalah herman_73 (Lihat gambar 36, ada tulisan alamat_ym_anda dalam kotak warna
merah, ganti dengan alamat YM Anda).
5.
Sedangkan Angka 2 yang di tunjuk oleh panah pada Gambar 36, itu bisa diganti denganangka 1 s/d 24 yang akan menimbulkan efek gambar YM yang berbeda pula,
selengkapnya lihat Tabel berikut ini :
TABEL NOMOR & GAMBAR YAHOO MESSENGER
Angka YM Offline YM Online
1
2
3
4
5
6
7
8
9
mailto:[email protected]:[email protected]:[email protected]:[email protected] -
7/31/2019 Tutorial Website
46/65
www.INDO9.com Jasa Pembuatan Website | 46
10
11
12
13
14
15
-
7/31/2019 Tutorial Website
47/65
www.INDO9.com Jasa Pembuatan Website | 47
16
17
18
19
20
-
7/31/2019 Tutorial Website
48/65
www.INDO9.com Jasa Pembuatan Website | 48
21
22
23
24
-
7/31/2019 Tutorial Website
49/65
www.INDO9.com Jasa Pembuatan Website | 49
3.4 Widget Jam & TanggalWidget ini berfungsi untuk menampilkan Jam & Tanggal. Seperti Gambar 37 dibawah ini.
Sedangkan untuk cara mengelola widget ini sama seperti mengelola widget lainnya, jadi tidak
dibahas lagi.
Gambar 37 Widget Jam & Tanggal
3.5 Widget Klien Indo9.comWidget ini berfungsi sebagai Kartu Garansi bahwa Anda adalah Klien INDO9.COM serta tanggal
online. Anda tidak diperkenankan mengubah tulisan, tanggal dll yang ada pada widget ini karena
mengubah nya akan menyebabkan GARANSI Anda tidak berlaku lagi. Bentuk tampilannya adalah
seperti Gambar 38 dibawah ini.
-
7/31/2019 Tutorial Website
50/65
www.INDO9.com Jasa Pembuatan Website | 50
Gambar 38 Widget Indo9.com (SEBAGAI KARTU GARANSI)
3.6 Widget Menu Samping.Widget Widget ini berfungsi untuk membuat link menu di bagian samping. Bentuk tampilannya
seperti Gambar 39 berikut ini :
Gambar 39 Widget Menu Samping
Mari kita bahas bagaimana cara menambah item link menu pada Widget Menu Samping ini.
Sebagai bahan kita praktek, marilah kita belajar bagaimana cara membuat link menu baru,
misalnya menu Tips (Lihat Gambar 40)
-
7/31/2019 Tutorial Website
51/65
www.INDO9.com Jasa Pembuatan Website | 51
Gambar 40Belajar menambah item menu baru Tips
Langkah-langkah menambah item link menu baru (misalnya menu Tips) adalah sebagai berikut
:
1. Klik Post (Lihat Gambar 41)
Gambar 41 Klik Post
Tips
-
7/31/2019 Tutorial Website
52/65
www.INDO9.com Jasa Pembuatan Website | 52
2. Letakkan cursor di tulisan Lihat yang ada dibawah judul Posting yang diinginkan (lihatGambar 42)
Gambar 42 Letakkan cursor di tulisan Lihat
3. Tekan klik Kanan, makapada layar komputer Anda akan tampil seperti Gambar 43.4. Tekan Klik kiri pada tulisan Salin alamat tautan.
Gambar 43 Klik Salin alamat tautan
-
7/31/2019 Tutorial Website
53/65
www.INDO9.com Jasa Pembuatan Website | 53
5. Klik Tata Letak (lihat Gambar 44)
Gambar 44 Klik Tata Letak
6. Klik Edit yang ada di Gadget Menu (di website Anda mungkin saja tulisannya bukanMenu, tidak masalah) Lihat Gambar 45.
-
7/31/2019 Tutorial Website
54/65
www.INDO9.com Jasa Pembuatan Website | 54
Gambar 45 Klik Edit di Gadget Menu
7. Akan tampil pada layar monitor Anda seperti Gambar 46.
-
7/31/2019 Tutorial Website
55/65
www.INDO9.com Jasa Pembuatan Website | 55
Gambar 46 Menambah Link
8. Hapus tulisan http:// ini, kemudian tekan klik kanan mouse Anda maka akan munculseperti Gambar 47.
-
7/31/2019 Tutorial Website
56/65
www.INDO9.com Jasa Pembuatan Website | 56
Gambar 47 Klik Tempel
9. Klik Tempel , maka hasilnya akan seperti ini10.Kemudian di Baris dibawahnya ketik nama link yang kita inginkan yaitu Tips
Gambar 48 Isi Nama Link
-
7/31/2019 Tutorial Website
57/65
www.INDO9.com Jasa Pembuatan Website | 57
11.Tekan Enter, maka Menu Tips Akan berubah seperti Gambar 49 :
Gambar 49 Menu Tips
12.Gunakan tanda panah ini untuk menurunkan menu Tips, sampai bearada dibawah KontakKami
13.Klik SimpanSelesai.
-
7/31/2019 Tutorial Website
58/65
www.INDO9.com Jasa Pembuatan Website | 58
3.7 Widget FacebookWidget Facebook ini begitu popular sejak beberapa tahun belakangan ini. Hal ini seiring dengan
begitu banyaknya pemakai Facebook di Indonesia. Bentuk Tampilan Gadget ini adalah :
Gambar 50 Widget Facebook
Widget Facebook dipasang di website agar pengunjung website bisa meng-klik widget ini untuk
membuka Facebook Anda.
Cara menyeting widget Facebook agar konek dengan Facebook Anda adalah sbb :
1. Bukalah Facebook melalui http://facebook.com, lalu Masukkan Email & Password laluklik Login. (lihat Gambar 51)
Gambar 51 Login ke Facebook
2. Setelah berhasil masuk ke Facebook Anda, Klik Nama Anda (Lihat Gambar 52)
Gambar 52 Klik Nama Anda
http://facebook.com/http://facebook.com/http://facebook.com/ -
7/31/2019 Tutorial Website
59/65
www.INDO9.com Jasa Pembuatan Website | 59
3. Salin Link pada browser (lihat Gambar 53) caranya Blok link tsb dari awal sampai akhir,kemudian tekan Ctrl+C (Tombol control jangan dilepas, lalu tekan tombol C). setelah itu
baru dilepas.
Gambar 53 Salin Link pada browser.
4. Kembali ke Blogger Anda, Klik Tata Letak (Lihat Gambar 54)
Gambar 54- Klik Tata Letak
-
7/31/2019 Tutorial Website
60/65
www.INDO9.com Jasa Pembuatan Website | 60
5. Klik Edit pada Fitur Facebook (Lihat Gambar 55)
Gambar 55 Tekan Edit pada Fitur Facebook.
6. Akan muncul di layar monitor Anda seperti Gambar 56.
-
7/31/2019 Tutorial Website
61/65
www.INDO9.com Jasa Pembuatan Website | 61
Gambar 56 Fitur Facebook.
7. Ganti teks pada kotak warna merah dengan Link yang tadi di salin pada langkah ke 3diatas caranya hapus dulu teks yang ada dalam kotak warna merah, lalu tempelkan kode
-
7/31/2019 Tutorial Website
62/65
www.INDO9.com Jasa Pembuatan Website | 62
pada langkah 3 diatas dengan cara Ctrl+V (Tekan control & tombol V). lalu Klik Simpan
dan selesai.
3.8 Widget AddressFitur Address ini berguna untuk menampilkan Alamat, Telpon, HP, Email, PIN BB, dll, yang
gunanya adalah untuk memudahkan pengunjung Anda untuk menghubungi Anda. Misalnya
untuk melakukan ORDER atau meminta INFO lebih lanjut.
Contoh Tampilannya adalah seperti Gambar 57 berikut ini:
Gambar 57 Fitur Address.
Adapun langkah-langkah untuk mengedit Fitur Address, misalnya mengganti No. HP, menambah
PIN BB dll adalah sbb :
-
7/31/2019 Tutorial Website
63/65
www.INDO9.com Jasa Pembuatan Website | 63
1. Klik Tata Letak (Lihat bGambar 58)
Gambar 58 Klik Tata Letak
-
7/31/2019 Tutorial Website
64/65
www.INDO9.com Jasa Pembuatan Website | 64
2. Klik Edit pada Fitur Address (Lihat Gambar 59)
Gambar 59 Klik Edit pada fitur Address
3. Akan muncul pada layar monitor Anda seperti Gambar 60.
Gambar 60 Edit fitur Address
-
7/31/2019 Tutorial Website
65/65
4. Silahkan mengganti tulisan yang ada semau Anda, kalau sudah selesai Klik Simpan.Selesai.
3.9 Widget AdministratorWidget ini berguna bagi Anda untuk memudahkan Anda bila ingin Login ke Website, Login ke E-
mail, dan Tutorial.
Bentuk tampilan widget ini adalah seperti Gambar 61
Gambar 61 Widget Administrator.