tutorial website

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/


2/65


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/


3/65


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


4/65


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.


5/65


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.


6/65


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/65


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,


8/65


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.


9/65


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.


10/65


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 :


11/65


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.


12/65


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


13/65


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.


14/65


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


15/65


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.


16/65


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 :


Digunakan untuk mengatur Text untuk Judul, Sub Judul, Normal dll.

Pilihannya sbb :



17/65


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 :


18/65


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 :


19/65


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


20/65


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.


21/65


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


22/65


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 :


23/65


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).


24/65


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


25/65


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


26/65


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 :


27/65


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


28/65


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.


29/65


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 :


30/65


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 :


31/65


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 :


32/65


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]


33/65


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


34/65


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.


35/65


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 :


36/65


1. Klik Tata Letak (lihat Gambar 29)

Gambar 29 Klik Tata Letak


37/65


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


38/65


Gambar 31 Mengedit Running Text (Tulisan Berjalan)


39/65


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)


40/65



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


41/65


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.


42/65


Berikut Langkah-langkah mengelola widget Yahoo Messenger :

1. Klik Tata Letak (Lihat Gambar 34)


2. Klik Edit pada widget Yahoo Messenger (Lihat panah pada Gambar 35)


43/65


Gambar 35 Klik Edit pada widget Yahoo Messenger

3. Selanjutnya akan muncul pada layar computer Anda seperti Gambar-36


44/65


Gambar 36 Kode HTML pada widget Yahoo Messenger


45/65


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]


46/65


10

11

12

13

14

15


47/65


16

17

18

19

20


48/65


21

22

23

24


49/65


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.


50/65


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)


51/65


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


52/65


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


53/65


5. Klik Tata Letak (lihat Gambar 44)


6. Klik Edit yang ada di Gadget Menu (di website Anda mungkin saja tulisannya bukanMenu, tidak masalah) Lihat Gambar 45.


54/65


Gambar 45 Klik Edit di Gadget Menu

7. Akan tampil pada layar monitor Anda seperti Gambar 46.


55/65


Gambar 46 Menambah Link

8. Hapus tulisan http:// ini, kemudian tekan klik kanan mouse Anda maka akan munculseperti Gambar 47.


56/65


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


57/65


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.


58/65


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/


59/65


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


60/65


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.


61/65


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


62/65


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 :


63/65


1. Klik Tata Letak (Lihat bGambar 58)



64/65


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


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.

tutorial website

Documents