MODUL PELATIHAN & KURSUS

MEDIA PEMBELAJARAN DENGAN WEB-BLOG BLOGSPOT

Oleh: Creative Team of IT-Community UPT Teknologi Informasi Universitas Jember

Published by: IT-Community UPT Teknologi Informasi

Universitas Jember
Tahun 2011

KATA PENGANTAR
Segala puji bagi Allah, Tuhan semesta alam yang telah memberi sangat banyak kenikmatan kepada makhluknya. Shalawat dan salam tetap tercurahkan kepada Rasullullah Muhammad SAW yang telah menyampaikan risalah kebaikan akhlak, keobjektifan berpikir, dan kemaksimalan humanisme lewat ayat-ayat Quraniah yang dibawanya berupa Al-Quran, Al-Hadits, dan peluang kemajuan yang berupa ayat-ayat kauniah. Salah satu dari sedemikian banyaknya ayat kauniah tersebut adalah Kemajuan dalam bidang teknologi informasi dan komunikasi yang membawa fenomena baru dalam hal komputerisasi. Diharapkan eksperimen ini dapat menambah kerangka filosofis dan produktif guna kemaksimalan nilai-nilai kemanusiaan kita. Demikian kami ucapkan terimakasih sebesar-besarnya kepada semua pihak yang baik secara langsung maupun tidak langsung berkontribusi dalam terselesainya tulisan ini. Sebagaimana pri-bahasa tak ada gading yang tak retak, maka penulis mengharapkan kritik dan saran guna penyempurnaan tulisan selanjutnya. Penulis ucapkan terimakasih banyak atas perhatiannya.

Jember, Februari 2011

Creative Team of IT-Community

DAFTAR ISI

Halaman Kata Pengantar Daftar Isi Bab 1. Pendahuluan Bab 2. Cara Membuat Account di Blogger / Blogspot Bab 3. Memulai Membuat Posting Awal di Blogger / Blogspot Bab 4. Mengubah dan Memodifikasi Halaman Template Blog Bab 5. Fitur Tambahan dengan Edit HTML dan Java Scrip Daftar Pustaka i ii 1 3 6 8 11 -

ii

BAB

PENDAHULUAN

Aktivitas ngeblog makin digemari pengguna internet. Melalui blog, seseorang bisa menuangkan ide atau pemikiran apa saja untuk dipublikasikan di internet. Asyiknya, ini bisa dilakukan tanpa harus memiliki sebuah website. Blog digemari karena sangat sederhana dan mudah dikelola oleh siapa pun. Selain itu, banyaknya penyedia layanan blog gratis membuat orang semakin berminat memilikinya.

Gambar 1.1 Contoh Homepage sebuah Blog

Blog adalah berupa singkatan dari web log, merupakan sebuah aplikasi web memuat tulisan-tulisan atau posting-posting pada sebuah webpage umum. Blog juga bisa dikatakan sebagai sejenis website yang berisi jurnal atau catatan rutin sang pengelola. Isi blog berupa sejumlah artikel (disebut posting) yang rutin ditulis si pengelola, serta komentar yang diberikan pengunjung pada artikel tersebut. Posting blog disajikan secara kronologis dalam urutan tanggal, bulan, dan tahun, sehingga mudah dikelola dan dibaca. Materi posting sangat beragam, mulai dari artikel berbentuk teks, gambar, hingga video. Tema blog biasanya 1

sesuai dengan bidang kegemaran pemiliknya, misalnya seputar teknologi, musik, olahraga, atau karya fotografi. Meskipun umumnya dikelola secara individual, kini blog juga sudah lazim dipakai institusi untuk mempublikasikan informasi seputar kegiatan mereka. Sehingga blog sekarang ini tidak hanya berfungsi sebagai catatan harian seseorang, pendapat-pendapat akan sebuah fenomena yang terjadi, tapi bahkan ada yang menawarkan baik barang maupun jasa.

Gambar 1.2 Blogger (Blogspot) salah sat penyedia jasa Blog gratis

Salah satu situs penyedia blog adalah www.blogger.com yang dimiliki oleh PyraLab yang akhirnya diakuisisi oleh Google.com sehingga user yang telah memiliki account gmail (google mail) akan dengan mudah bisa membuat dan memiliki sebuah blog tanpa harus mempunyai account baru, cukup dengan memakai sebuah account saja, yaitu account gmail. Blogger.com adalah layanan blog gratis milik Google. Selain Blogger, layanan blog gratis lain yang diminati orang adalah Wordpress.com. Blogger sendiri disukai karena terintegrasi dengan beragam fitur dan layanan Google lainnya. Dengan kata lain, sebelum kita bisa membuat blog baru di blogger.com di wajibkan mempunyai email di Google dulu.

BAB Cara Membuat Account di

BLOGGER / BLOGSPOT

Syarat agar untuk membuat weblog di Blogger adalah kita harus memiliki E-mail di Gmail dan bisa didapatkan secara gratis dengan Registrasi ke Situs Gmail di http://www.gmail.com. Alamat Email dari Gmail inilah yang digunakan untuk mendaftar sekaligus ID untuk Login di Blogger. ID dan Password Email adalah hal yang fundamental, sehingga pengnggunaan Password yang sama dengan password E-mail pada saat mendaftar di blogger merupakan satu alternatif dalam memudahkan mengingat. Walaupun pemberian password yang berbeda pada account email dan blogger dapat menambah tingkat securitas (kerahasiaan) account diinternet. Berikut langkah-langkah untuk membuat blog dengan menggunakan layanan blogger: 1. Buka situs http://www.blogger.com

2. Untuk memudahkan Anda, pastikan pada kotak Bahasa terpilih Indonesia. Klik tombol Buat Blog yang tersedia. 3. Lengkapi formulir. Ketikkan alamat email yang Anda miliki pada dua kotak isian. Ketikkan dua kali password yang akan Anda pakai. Tuliskan nama Anda. Masukkan huruf acak yang ditampilkan. Tandai kotak Saya menerima Persyaratan dan Layanan. Klik Lanjutkan.

4. Jika tidak ada kesalahan pengisian, maka muncul halaman pembuatan blog. Isikan Judul Blog dan Alamat Blog yang Anda inginkan. Anda akan memperoleh alamat blog dengan susunan sebagai berikut:

http://namablog.blogspot.com.

5. Klik Cek Ketersediaan untuk memastikan alamat blog belum dipakai orang. Jika sudah dipakai, coba alamat lain lalu cek lagi. Jika tersedia, klik Lanjutkan.

6. Kini muncul pilihan template atau temantampilan blog. Pada salah satu tema yang Anda inginkan, klik link Pratayang Template untuk melihat bagaimana wajah blog Anda nantinya jika memakai template tersebut. Tentukan pilihan, lalu klik Lanjutkan. Tidak perlu ragu, Anda dapat mengganti template kapan saja jika sudah bosan. 7. Blog telah jadi. Anda dapat langsung membuat posting pertama atau mencoba melihat tampilannya dulu di alamat http://namablog.blogspot.com 8. Untuk menuntaskan pendaftaran, periksa email Anda. Sebuah pesan email berjudul Verifikasi Email Google akan Anda terima. Klik sebaris link yang ada di dalam pesan email untuk mengaktifkan akun dan memverifikasi alamat email Anda. Kini blog siap dipakai.

BAB Memulai Posting Awal di

BLOGGER / BLOGSPOT

Posting adalah tulisan-tulisan yang dipublikasikan secara periodik di dalam sebuah blog. Biasanya di dalam blogger atau dunia blog, posting

mengidentifikasikan juga waktu publikasi, sehingga pembaca blog dapat mengetahui kapan tulisan (posting) pada blog yang bersangkutan dibuat. Berikut langkah-langkah untuk mengisi artikel (membuat posting) didalam blogspot: 1. Jika Anda masih di halaman pendaftaran, klik tombol Mulai Blogging. Jika tidak, maka login ke http://www.blogger.com lalu isikan alamat email dan password yang telah Anda buat. Setelah masuk di Dasbor, klik tombol Entri Baru.

2. Pada halaman pembuatan Posting, berikan Judul posting, lalu ketikkan isi artikel Anda. Gunakan toolbox di atas kolom isian artikel untuk mengatur ukuran huruf, format teks, menyisipkan link, atau memasang gambar dan video. 3. Contoh, untuk memasang gambar dari komputer, klik tombol Tambah Gambar. Di jendela Unggah Gambar, tekan Browse, lalu pilih file gambar dari komputer. Anda pun bisa mengatur posisi dan ukuran gambar. Setelah siap, klik kotak Saya menyetujui Persyaratan Layanan, lalu klik Unggah Gambar. Setelah diproses, klik Selesai untuk kembali ke jendela pembuatan Posting. Terlihat gambar sudah muncul di sana, sebagai berikut:

4. Anda dapat menggolongkan tema setiap posting dengan memberinya Label. Ketikkan label di kotak Label untuk entri ini. Label berupa kata kunci tema, misalnya internet. Anda bisa mengetik beberapa kata kunci sekaligus. Pisahkan penulisannya dengan tanda koma, seperti belajar, internet, blogging. Daftar label nantinya memudahkan pembaca mencari posting Anda dengan tema tertentu. 5. Setelah semua selesai, publikasikan posting Anda. Klik Terbitkan Entri.

6. Untuk melihat hasilnya, klik link Lihat Blog (di jendela baru). Posting Anda telah selesai dan siap dibaca atau dikomentari pengunjung. 7. Jika kurang puas, edit posting tersebut dengan klik pada link Edit entri. Anda nanti bisa mengedit posting lama di menu Posting > Edit Entri, lalu klik Edit pada posting yang Anda tuju. Demikian juga, untuk menghapus sebuah posting, klik link Hapus di bagian kanan posting yang Anda maksud.

BAB

Mengubah dan Memodifikasi Halaman:

EDITING TEMPLATE BLOG

Blogspot / Blogger memberi keleluasaan kepada pengguna dengan

memberikan layanan editing template, sehingga pengguna dapat memodifikasi dan memperkaya fitur pada blog yang dimiliki berdasar kreatifitas pengguna sendiri. Untuk dapat mengubah, mengtur setting blog, dan memodifikasi halaman blog, bisa dilakukan dengan klik menu Pengaturan dan menu Layout (Tata Letak). Perlu dingat bahwa penggunaan istilah pada modul ini menggunakan blogger dengan pengaturan bahasa yang telah diubah menjadi bahasa Indonesia, lebih jelas silakan baca kembali Bab 2 halaman 4 modul ini. Pada menu Pengaturan tersebut terdapat beberapa sub menu lain yang terdiri dari: Dasar: untuk mengedit Judul blog atau menambahkan Uraian singkat pada blog Anda. Bagian lain biasanya tidak perlu diedit, karena sudah terisi nilai yang umum dipakai. Klik Simpan Setelan. Publikasikan: untuk mengganti alamat blog. Ini tidak perlu diubah, kecuali Anda benar-benar ingin berganti alamat blog. Format: untuk menata jumlah posting yang ditampilkan di halaman utama, format waktu dan penanggalan, serta pemilihan bahasa menu blog. Komentar: untuk menentukan bagaimana pengunjung berkomentar di posting blog. Arsipkan: untuk mengatur frekuensi tampilan arsip di halaman blog Anda, apakah tahunan, bulanan, atau harian. Feed Situs: untuk menetapkan ijin berlangganan dan cara penyajian feed blog Anda. Feed adalah fitur yang memungkinkan orang lain membaca atau merelay update posting Anda tanpa harus mengakses langsung ke blog Anda.

Selain memposting dan mengatur setting blog, Anda juga dapat menata layout blog,nmisalnya menambahkan elemen, mengubah warna dan huruf, atau mengganti template. Klik menu Tata Letak untuk menata layout. 1. Di Elemen Halaman, Anda dapat menambahkan elemen baru. Klik link Tambah Gadget di posisi yang tersedia.

2. Pada jendela pilihan gadget, klik salah satu elemen yang tersedia, misalnya Kotak Penelusuran.

10

3. Atur settingnya, misalnya untuk kotak penelusuran berikan judul dan tab pencarian. Perhatikan pratayangnya, klik Simpan jika cocok. 4. Kini elemen baru muncul di jendela Elemen Halaman. Klik Lihat Blog untuk memeriksa hasilnya. 5. Anda bisa menata ulang posisi elemen dengan mendrag kotak elemen dan menempatkannya di lokasi lain. Klik Simpan dan lihat perubahannya di halaman blog Anda.

6. Di Font dan Warna, Anda bisa mengganti-ganti jenis font dan warna dasar blog. Perhatikan perubahannya pada kotak pratayang yang ada di bawah. Jika cocok, klik Simpan Perubahan. 7. Di Edit HTML, Anda dapat mengutak-atik kode HTML, yaitu kode pemrograman halaman blog. Anda harus paham dasar-dasar HTML untuk melakukan hal ini. 8. Di Pilih Template Baru, Anda dapat mengganti tema tampilan blog dengan pilihan tema baru yang tersedia.

BAB

Fitur Tambahan Mendesain Blog dengan

EDIT HTML DAN JAVA SCRIPT

Halaman-halaman web sangat mudah dibuat dengan editor HTML bertipe WYGIWYS (What You Get Is What You See). Editor semacam ini tersebar di jagat internet dan dapat diperoleh gratis. Sayangnya, kebanyakan editor secara lancang' menambahkan kode-kode tertentu yang kadang tidak kita harapkan. Beberapa diantaranya bahkan membelenggu kreatifitas karena tidak dapat dikendalikan secara total sesuai keinginan kita. Untuk membiasakan diri, mungkin hal semacam ini tidak menjadi masalah, bahkan penulis anjurkan untuk menggunakannya. Tetapi setelah sedikit terbiasa, Anda HARUS mempelajari HTML, terutama jika Anda ingin menjadi WebMaster kreatif, bukan sekedar WebDesainer! Hal utama yang biasanya sangat menjengkelkan saat membuat situs web gratis adalah adanya selipan banner iklan atau munculnya iklan pop-up yang secara otomatis ditambahkan oleh penyelenggara free webspace-nya. Banner dan iklan-iklan pop-up ini jelas memperlambat akses ke situs kita dan bahkan dapat memecah perhatian pengujung situs. Dengan trik khusus yang akan dijelaskan di bab lain, kekurangan ini bisa diatasi. Akan tetapi trik ini membutuhkan pengetahuan HTML, terutama karena editor HTML biasanya secara otomatis memperbaiki kode-kode 'nyleneh' yang kita tulis. Padahal hanya dengan kode 'nyleneh' seperti inilah pop-up banner dan iklan dapat dilenyapkan! Tidak terasa, tiba-tiba saja internet telah menjadi lautan data maha luas. Datadata itu tersimpan dalam ratusan ribu server yang terkoneksi satu sama lain dari seluruh dunia. Seiring dengan berjalannya waktu, berbagai macam protocol transmisi data bermunculan serta berevolusi sehingga menambah koleksi, sekaligus kekacauan bagi jaringan internet. Salah satu area yang tumbuh demikian dahsyat di internet adalah World Wide Web (WWW) yang menggunakan teknologi MarkUp berbasis hypertext untuk memungkinkan jutaan orang

11

menyeberangi lautan data dalam berbagai format data diatas berbagai macam tipe perangkat keras dan lunak. Konsep hypertext sebenarnya adalah konsep lama, akan tetapi baru mulaiterkenal pada dekade 1985-an. Ide penggunaan hypertext pertama kali disampaikan dalam sebuah essay karangan Vannervar Bush tahun 1945 dan dilanjutkan oleh Theodore (Ted) Nelson pada dekade 1960-an dan 1970an. Meski hypercard for Macintosh produksi Apple Computer memiliki kesamaan dalam implementasi hypertext primitif, namum kekuatan hypertext yang sesungguhnya adalah kemampuannya dalam menciptakan link dokumen antar host komputer di jaringan. Praktek pertama penggunaan hypertext di jaringan dilakukan oleh Tim Berners Lee dari CERN (Laboratorium Fisika Partikel Eropa yang berlokasi di Geneva, Switzerland) dengan perangkat pengembang Next Step, dengan tujuan untuk menciptakan apa yang dikemudian hari dikenal dengan HTML (HyperText Markup Language), HTTP (HyperText Tarnsfer Protocol) dan WWW (World Wide Web atau W3 atau Web). HTTP (Hyper Text Trasfer Protocol) adalah salah satu dari beberapa protocol yang digunakan sebagai bahasa komunikasi antar server. Protokol dapat berupa protokol web (http), Telnet, News, Gopher atau FTP. Hampir semua dokumen web saat ini ditulis dalam bahasa HTM, dimana sebuah teks ASCII biasa dipoles (di mark up) dengan apa yang disebut tag. Karena file ASCII dapat dibaca oleh sistem komputer macam apapun yang ada didunia ini, maka polesan tag pada file-file ASCII membuat file-file ini dapat dibaca oleh sistem-sistem komputer berbasis DOS, WIN 3.x, WIN 9x, Win ME, WINDOWS 2000 atau WIN NT sama baiknya dengan sistem-sistem berbasis MACINTOSH, UNIX atau LINUX. Tag-tag yang digunakan dalam file HTML membuat semua dokumen terlihat sama meski user menggunakan sistem operasi dari tipe komputer yang sangat berbeda. Tidak seperti file-file dokumen tradisional seperti Word, Excel, WS atau WordPerfect yang tidak dapat saling dipertukarkan! HTML adalah bahasa interpreter, bukan bahasa pemrograman yang sebenarnya seperti bahasa C++, Delphi, VisualBasic atau JAVA yang harus dikompilasi terlebih dahulu sebelum dapat dieksekusi. Browser yang digunakan

untuk melihat dan menampilkan halaman-halaman web seperti Nestcape Communicator, MS Internet Explorer atau Mosaic, sesungguhnya adalah interpreter yang menterjemahkan tag-tag yang diselipkan didalam file ASCII berekstensi .html (atau .htm) dan menampilkannya di layar sesuai tag yang ditemukan. Sebagai contoh, teks ASCII "membuat home page" akan ditampilkan apa adanya jika ditulis tanpa tag, tetapi jika dipoles (baca di mark up) dengan tag <B></B> (sehingga menjadi "<B>membuat home page</B>"), maka teks tersebut akan ditampilkan oleh browser dalam huruf-huruf tebal. Seperti telah dijelaskan sebelumnya, kekuatan utama file HTML adalah kemampuannya dalam melakukan link hypertext. Sebuah teks yang diberi tag khusus akan membuat browser melompat ke halaman lain di server manapun di dunia ini jika pemakai membawa kursor dan meng-klik mouse-nya diatas teks tersebut. Namun demikian, apa yang mampu dikerjakan oleh browser sesungguhnya tidak hanya sekedar melompat dan menampilkan isi file .html atau .txt kelayar monitor saja, melainkan juga dapat menjalankan programprogram tambahan (add-on) untuk memutar lagu/musik jika teks yang dibuat tujuan hypertext adalah nama file berekstensi .wav atau .mid, memutar filmfilm secara otomatis jika file yang dituju berekstensi .mov, .avi atau .mpeg dan aktivitasaktivitas lain sesuai kode ekstensi file yang dipakai sebagai tujuan klik hypertext. Pada beberapa fitur yang penting bagi blog, misalnya Counter dan guestbook tidak bisa dibuat hanya dengan kode html saja, karena itu materi ini tidak dimasukkan kedalam langkah 3 (saat mempelajari html). Anda harus melakukan pendaftaran ke suatu penyedia layanan counter/guestbook untuk dapat memiliki counter dan guestbook. Tetapi jika server Anda mendukung FrontPage Server Extension, Anda dapat membuat counter dan guestbook sendiri sebagai komponen tambahan yang memang telah disediakan oleh FrontPage. Counter juga dapat dibuat dengan JavaScript, akan tetapi efek penambahan angka counternya hanya terjadi pada mesin client, bukan pada server. Akibatnya, angka counter yang tampak pada masing-masing computer dapat berbeda-beda. Contoh penyedia Counter gratis untuk mengetahui jumlah pengunjung yang mengunjungi blog:

1. Pandawa (http://www.pandawa.com/) - Penyedia layanan counter gratis dari Indonesia 2. TheCounter (http://www.thecounter.com/new.html) - Counter dan Statistik seperti yang digunakan PengenPunyaSitus.com 3. Superstats (http://www.superstats.com/) - Menyediakan layanan pencatat statistik yang dapat digunakan untuk mengetahui siapa pengunjung situs web Anda. Statistik yang didapat adalah jumlah pengunjung, tipe browser yang digunakan, nama domain, alamat IP, pola trafik situs web dan lain sebagainya. SuperStats memungkinkan Anda untuk mengetahui dari mana pengunjung mendapatkan link ke situs web Anda. 4. Freestats (http://www.freestats.com/) Menampilkan berapa banyak

pengunjung situs Anda, berapa banyak pengunjung unik (pengunjung baru) tiap hari dan tiap bulan dan juga menunjukkan siapa mereka dan dari halaman web mana mereka datang. 5. NedStat (http://www.nedstat.com) atau (http://usa.nedstat.net/) Layanan statistik untuk situs non-komersial dengan pengunjung maksimal 10.000 setiap hari. Statistik yang dicatat adalah jumlah pengunjung hari ini, minggu ini, bulan ini, tanggal dan bulan pengunjung terbanyak serta jumlah total pengunjung sejak Anda mendaftar di NedStat. Selain itu juga ada laporan mengenai asal negara pengunjung, alamat IP-nya serta grafik pengunjung bulanan. Selain itu, NedStat juga menyediakan data mengenai dari halaman web mana 25 user terakhir yang mengunjungi situs web Anda. 6. BetterCounter (http://www.better-counter.com/) - Menyediakan counter sampai 20 halaman dengan pengunjung maksimal 500 perhari. Struktur analisisnya bisa diatur sendiri. 7. EasyCounter (http://www.easycounter.com/) - Menawarkan beberapa counter sekaligus, seting angka awal counter, melihat counter pada semua halaman secara simultan, fasilitas reset counter untuk penghitungan pengunjung seja counter direset. Catatan: EasyCounter Menampilkan iklan banner agak besar. 8. FastCounter (http://www.fastcounter.com/) - Menyediakan counter gratis yang mudah disetup dengan respon cepat. Tipe-tipe counter bisa dipilih

sendiri. Uniknya, laporan statistik pengunjung bisa dikirim melalui alamat email. 9. Maweb (http://www.maweb.com/) - Menyediakan counter gratis hingga 5 buah. Anda harus meletakkan link untuk kembali ke Maweb. 10. Aaddzz (http://www.aaddzz.com/pages/counters) - Menyediakan counter dan tracker berupa laporan pengunjung. 11. Aid4 (http://www.y4i.com/counters.html) - Menyediakan counter halaman dan counter situs serta berbagai materi gratis lainnya. 12. Cameron's Free Counter (http://counter.bloke.com/register.html) -

Menyediakan counter gratis dengan pendaftaran mudah. Anda hanya perlu mengirim alamat e-mail Anda dan beberapa detik kemudian sebuah e-mail pemberitahuan untuk mengaktifkan counter akan Anda terima. Anda juga dapat men-download applet counter disini. 13. CashFreeCounters (http://www.cashfree.net/freecounters.html) Counter gratis dari CashFree 14. DIGIWEB.COM (http://counter.digiweb.com/main.shtml) - Counter gratis dari Digiweb. Disini Abda bisa mendapatkan lebih dari 100 tipe counter. Informasi yang diperoleh termasuk ukuran layar pengunjung dan negara asal pengunjung. 15. CountZ.com (http://countz.com/) - Counter gratis dengan instalasi mudah dari CountZone 16. FreeCounter.nu (http://www.freecounter.f2s.com/) - Counter gratis tanpa iklan! Pendaftaran cepat, hanya 1 menit! 17. Site Meter (http://www.sitemeter.com/) - Counter gratis dengan style yang dapat dipilih sendiri. Mereka menyediakan grafik chart yang

merepresentasikan jumlah pengunjung, halaman yang dilihat, peta kota dan lain sebagainya dalam modus 3D chart. 18. FreeSiteX (http://freesitex.com/counter.html) - Daftar counter dan tracker gratis dari seluruh jaringan internet!

Dalam modul ini, contoh Counter yang dipakai adalah Hit Counter. Hit Counter berfungsi untuk mengetahui berapa jumlah pengunjung pada weblog kita. Berikut cara menambahkan Hit Counter tersebut: 1. Buka http://www.hitcountersite.com/ kemudian pilih salah satu model hit counter

2. Setelah memilih model, akan muncul halaman berikut :

CLICK HERE GET YOUR COUNTER CODE, untuk mendapatkan kode yang diperlukan. 3. Copy code Java Script yang diberikan

4. Buka halaman kontrol blog, pada Template Elemen Halaman klik Tambahkan Sebuah Elemen Halaman.

5. Konfigurasi Gadget: