Modul Pembuatan Blog mrmung

(1)

(2)

2 |

P a g e

w w w . m r m u n g . c o m

DAFTAR ISI



Pendahuluan ... 3



Membuat blog di blogger.com ... 5



Mendesain template blog ... 8



Mengelola Weblog ... 12



Menghias Weblog ... 24



Koleksi Kode Script Instant ... 29

(3)

3 |

P a g e

w w w . m r m u n g . c o m

PENDAHULUAN

1. PENGERTIAN BLOG

Blog adalah kependekan dari Weblog, istilah yang pertama kali

digunakan oleh Jorn Barger pada bulan Desember 1997. Jorn Barger

menggunakan istilah Weblog untuk menyebut kelompok website pribadi

yang selalu diupdate secara kontinyu dan berisi link-link ke website lain

yang mereka anggap menarik disertai dengan komentar-komentar mereka

sendiri.

Secara garis besar, Weblog dapat dirangkum sebagai kumpulan

website pribadi yang memungkinkan para pembuatnya menampilkan

berbagai jenis isi pada web dengan mudah, seperti karya tulis, kumpulan

link internet, dokumen-dokumen(file-file WOrd,PDF,dll), gambar ataupun

multimedia.

Para pembuat blog dinamakan Blogger. Melalui Blognya, kepribadian

Blogger menjadi mudah dikenali berdasarkan topik apa yang disukai, apa

tanggapan terhadap link-link yang di pilih dan isu-isu didalamnya. Oleh

karena itu Blog bersifat sangat personal.

Perkembangan lain dari Blog yaitu ketika Blog memuat tulisan

tentang apa yang seorang Blogger pikirkan, rasakan, hingga apa yang dia

lakukan sehari-hari. Blog kemudian juga menjadi Diary Online yang berada

di Internet. Satu-satunya hal yang membedakan Blog dari Diary atau

Jurnal yang biasa kita miliki adalah bahwa Blog dibuat untuk dibaca orang

lain.

2. SEJARAH BLOG

Blog pertama kemungkinan besar adalah halaman "What’s New"

pada browser Mosaic yang dibuat oleh Marc Andersen pada tahun 1993.

Kalau kita masih ingat, Mosaic adalah browser pertama sebelum adanya

Internet Explorer bahkan sebelum Nestcape.

Kemudian pada Januari 1994 Justin Hall memulai website pribadinya

"Justin’s Home Page" yang kemudian berubah menjadi "Links from the

Underground" yang mungkin dapat disebut sebagai Blog pertama seperti

yang kita kenal sekarang.

(4)

4 |

P a g e

w w w . m r m u n g . c o m

Hingga pada tahun 1998, jumlah Blog yang ada masih sangat

sedikit. Hal ini disebabkan karena saat itu diperlukan keahlian dan

pengetahuan khusus tentang pembuatan website, HTML, dan web hosting

untuk membuat Blog, sehingga hanya mereka yang berkecimpung di

bidang Internet, System Administrator atau Web Designer yang kemudian

pada waktu luangnya menciptakan Blog-Blog mereka sendiri.

Namun saat ini, kita tidak perlu menjadi seorang programmer untuk

menjadi seorang Blogger, karena kita dapat menampilkan seluruh isi dalam

web dengan mudah melalui menu editor yang telah disediakan.

Keuntungan dari penggunaan Weblog antara lain:

1. Melalui weblog, kita dapat memperluas hubungan teman/ kenalan

hingga dapat membentuk suatu komunitas yang besar.

2. Weblog melebihi surat elektronik (Email), karena satu posting

blog yang anda bahas, dapat dibaca oleh pengunjung blog yang

tak terbatas. Beda dengan email yang hanya bisa dibaca oleh

orang yang kita kirimkan. Selain itu, pengunjung blog juga

dengan cepat dapat memberikan respon terhadap posting blog

melalui komentar yang dapat langsung dituliskan di blog

tersebut.

3. Melalui weblog juga kita bisa menghasilkan uang baik dolar

maupun rupiah.

Seiring perkembangan weblog dari waktu ke waktu, pengertian

weblog juga akan berkembang seiring dengan ide - ide dan kemauan para

Blogger.

.:: INGAT !!! ::.

Sesuatu yang dianggap mudah dan

sederhana bagi kita, kadang sangat

(5)

5 |

P a g e

w w w . m r m u n g . c o m

CARA MEMBUAT BLOG DI BLOGGER.COM

Salah satu syarat yang harus dipenuhi dalam membuat blog adalah anda

memiliki alamat email yang masih aktif. Jika anda belum mempunyai alamat

email, silahkan buat dahulu di

gmail

karena blogger adalah salah satu layanan

dari Google maka ketika mendaftar ke blogger sebaiknya gunakan email

gmail

.

Cara Membuat Blog di Blogger

1. Silahkan anda buka

http://www.blogger.com

2. Masukan email gmail dan password anda:

3. Setelah login, anda bisa merubah bahasa yang digunakan supaya

mudah dalam mengikuti tahap demi tahap dalam proses pembuatan

blog ini (

lihat pojok kanan atas

), sebagai contoh saya rubah ke bahasa

Indonesia:

(6)

6 |

P a g e

w w w . m r m u n g . c o m

4. Klik tombol bertuliskan

Blog Baru

.

5. Isilah judul blog serta alamat blog yang di inginkan. pastikan alamat

blog yang anda tuliskan tersedia (

ditandai dengan tanda centang biru

disebelah kanan kolom alamat blog

), kemudian pilih template yang

diinginkan, dan klik tombol

Buat blog

di pojok kanan bawah.

Catatan:

Template blog ibarat baju yang anda kenakan, jadi baju yang

bagus tentu akan enak dipandang, untuk masalah template blog, nanti

bisa kita rubah sesuai keinginan kita dilain waktu.

6. Selamat blog anda sudah selesai dibuat, anda sudah bisa langsung

melihat blog anda dengan mengklik tombol

Lihat Blog

atau anda juga

(7)

7 |

P a g e

w w w . m r m u n g . c o m

bisa langsung memposting tulisan pertama anda dengan mengklik

tombol warna orange yang ada gambar pensilnya.

7. Misal anda akan memposting tulisan pertama anda, setelah anda klik

tombol orange (

ikon pensil dan ketika disentuh muncul tulisan buat

entri baru

) akan masuk ke halaman

post editor

, silahkan isi apa saja (

disarankan untuk langsung mengisi posting, biasanya jika tidak

langsung posting akan terjaring robot anti spam milik blogger, dan blog

anda akan di lock). Contoh : hello world. Klik Tombol

PRATINJAU

untuk melihat tampilan yang nanti akan muncul di blog, klik tombol

PUBLIKASIKAN

jika posting anda mau dipublikasikan ke publik.

8. Selesai.

Untuk tahap awal, blog anda sudah jadi dan bisa diakses dimana saja

diseluruh dunia.

Blog yang baru dibuat, tidak langsung terindex atau bisa

dicari mealui mesin pencari seperi google.com, dalam

keadaan normal butuh beberapa hari supaya blog yang baru

bisa terindex otomatis oleh mesin pencari google, namun

bagi anda yang menginginkan blognya cepat terindex di

google,

anda

bisa

gunakan

tool

milik

google,

http://google.com/addurl

untuk mensubmit blog

(8)

8 |

P a g e

w w w . m r m u n g . c o m

DESAIN TEMPLATE BLOG

A. DESAIN TEMPLATE BLOG BAWAAN BLOGGER

Blogger sudah menyediakan tool yang bisa digunakan untuk mendesain

template blog sesuai kebutuhan standar kita, seperti mengatur jumlah kolom

blog atau tata letak, lebar blog, warna, background, dan jenis font.

Berikut langkah-langkah mendesain template blog dengan tool yang

disediakan blogger.com

1. Login kehalaman admin blog anda melalui

http://blogger.com

2. Silahkan anda masuk ke pilihan template

3. Klik tombol orange bertuliskan

Sesuaikan

seperti gambar berikut:

4. Setelah terbuka disini anda bisa langsung berkreasi sesuka anda, mulai

dari memilih template, mengatur latar belakang (background), mengatur

lebar blog, dan mengatur tata letaknya supaya blog bisa tampil 2 kolom

atau 3 kolom sesuai selera anda.

(9)

9 |

P a g e

w w w . m r m u n g . c o m

Tampilan mengatur template blog:

Tampilan mengatur latar belakang blog:

Mengatur lebar blog dengan cara menggeser kekanan dan kekiri,

atau bisa juga anda ketik langsung pada kolom yang disediakan,

misal anda rubah lebar blog menjadi 900 px

(10)

10 |

P a g e

w w w . m r m u n g . c o m

Mengatur tata letak blog dengan pilihan 1 kolom, 2 kolom, 3 kolom

dll.

5. Setelah selesai, jangan lupa anda simpan dengan mengklik tombol

Terapkan ke Blog yang ada di pojok kanan atas.

B. MEMASANG TEMPLATE BLOG DARI PIHAK KETIGA

Untuk memperindah tampilan blog, anda bisa mendapatkan

template-template blog yang disediakan pihak ketiga (template-template didapat dari website

penyedia template blogger dengan cara mendownloadnya), ada yang tersedia

secara gratis, ada juga template blog yang premium atau anda harus membeli

lisensi untuk dapat menggunakan template tersebut.

Untuk website-website penyedia template gratis, anda bisa buka salah satu

web berikut:

1. eBlog Templates => http://www.eblogtemplates.com/templates/blogger-templates/

2. B-Template => www.btemplates.com

3. Our Blog Templates => http://www.ourblogtemplates.com/

4. Jisele Jaguenod => http://www.giselejaquenod.com.ar/blog/blogger-templates/

5. Zoom Template => http://www.zoomtemplate.com/

6. Blogger Templates => http://www.bloggertemplatesfree.com/ 7. Mas Template => http://www.mastemplate.com/

8. Seo Blogger Template => http://www.seobloggertemplates.com/ 9. Dll.

(11)

11 |

P a g e

w w w . m r m u n g . c o m

Cara memasang template blog yang sudah kita download dari penyedia template diatas adalah sebagai berikut:

Sebelum dilanjutkan, pastikan file template yang akan anda pasang di

blog ber-extension .xml , misal:

nama_template.xml

1. Login ke halaman admin blog anda 2. Masuk ke menu template

3. Klik tombol Cadangkan/ Pulihkan

4. Upload template yang sudah disiapkan, klik tombol browse kemudian klik Unggah

(12)

12 |

P a g e

w w w . m r m u n g . c o m

MENGELOLA WEBLOG

A. Cara Masuk/ Login Ke Halaman Admin

1. Buka browser kesayangan anda misal disini saya akan menggunakan browser mozilla fire fox.

2. ketikan alamat http://blogger.com/ atau langsung ketikan blogger.com kemudian tekan enter

3. Maka anda akan dibawa kehalaman utama blogger.com/home seperti gambar berikut:

4. Kemudian tuliskan username dan password anda di form akun

5. Klik tombol Sign In atau tekan enter

Yang akan kita pelajari:



Cara Login dan Log Out



Cara Mengisi/ Posting di Blog



Cara Edit dan Menghapus Posting



Membuat Jump Break/ Pemenggalan paragraf

dengan Baca Selengkapnya



Pemberian link teks



Penyisipan gambar kedalam posting



Pemberian label/ kategori tiap posting



Pembuatan Page/ Laman Terpisah dari Posting

Artikel

(13)

13 |

P a g e

w w w . m r m u n g . c o m

6. Tunggu beberapa saat sampai halaman admin blog sebagai tempat untuk mengelola blog (dasbor) kita terbuka dengan sempurna:

B. Cara Logout dari Halaman Admin

Untuk keluar dari halaman admin blog, kita cukup klik link log out atau link keluar pada halaman admin blog kita.

Untuk lebih jelasnya perhatikan gambar berikut:

2. Klik

disini

1. Klik

disini

(14)

14 |

P a g e

w w w . m r m u n g . c o m

C. Cara Melakukan Posting atau mengisi weblog

Istilah posting sama dengan mengisi weblog kita dengan tulisan hasil karya atau CoPas (Copy Paste) dari weblog orang lain.

Perlu di ingat dalam copas artikel orang lain

aturan mainnya jangan lupa kasih sumber

artikel yang di copas, ini sebagai wujud

menghargai hasil karya orang.

Untuk melakukan posting atau mengisi weblog, langkahnya adalah sebagai berikut:

1. Login sebagai administrator http://blogger.com 2. perhatikan gambar berikut:

3. Klik tombol Buat Entri Baru akan tampil jendela posting seperti gambar berikut:

Keterangan Gambar diatas:

No 1 : Tuliskan judul posting. No 2 : Tuliskan artikel anda disini.

(15)

15 |

P a g e

w w w . m r m u n g . c o m

D. Cara Mengedit dan menghapus Posting

Untuk Mengedit atau menghapus posting yang telah kita buat caranya adalah

sebagai berikut:

1. Login sebagai admin

Perhatikan gambar berikut:

Pada gambar diatas klik pada tool posting, nanti akan tampil jendela

postingan yang berisi sekumpulan judul-judul artikel yang pernah kita buat.

2. Perhatikan gambar berikut:

(16)

16 |

P a g e

w w w . m r m u n g . c o m

3. Setelah anda klik Edit Entri maka akan tampil seperti saat anda pertama

melakukan posting, bedanya teks tombol

publikasikan

berubah menjadi

Perbaharui

.

Sedangkan Untuk

Menghapus

Posting yang sudah pernah kita buat dan

publikasikan yaitu dengan cara klik menu hapus disebelah kanan menu Edit,

setelah tampil konfirmasi penghapusan silahkan anda klik OK untuk eksekusi

penghapusan postingan, dan klik Cancel jika ingin menggagalkan perintah

penghapusan.

(17)

17 |

P a g e

w w w . m r m u n g . c o m

E. Cara Posting dengan baca selanjutnya “Read more…”

Apabila kita mau menulis artikel yang panjang, disarankan memberi pemenggalan pada artikel yang kita tulis agar terlihat rapi.

Untuk memberi pemenggalan tulisan dengan readmore/ baca selanjutnya caranya adalah sebagai berikut:

1. Lakukan posting seperti biasa (Klik entri baru – tulis judul artikel – tulis artikel anda), untuk memenggal artikel yang terlalu panjang silahkan anda klik pada icon Insert Jump Break, perhatikan gambar berikut:

2. Hasilnya akan ada tanda garis putus-putus yang menandakan artikel sudah di beri readmore/ Baca Selengkapnya.

3. Setelah selesai menulis artikel, jangan lupa klik tombol publikasikan untuk menampilkan di blog.

Hasilnya akan tampak seperti gambar berikut:

Pada beberapa template blog yang di unduh dari tempat

lain, ada yang sudah tersetting readmore otomatis,

dengan system artikel akan terpenggal otomatis setelah

beberapa karakter (sesuai setting yang dipasang), jadi

tidak perlu menggunakan tool Insert Jump Break.

(18)

18 |

P a g e

w w w . m r m u n g . c o m

F. Cara Membuat Link pada posting

Dalam menulis sebuah artikel kadang kala kita menginginkan ada beberapa tulisan dalam artikel kita yang berisi link ke web/ blog lain, atau mungkin Cuma ingin mengaitkan artikel 1 dan artikel 2 pada blog kita.

Caranya adalah sebagai berikut: 1) Blok teks yang akan di buat link,

2) Klik icon bertuliskan Link Kemudian tuliskan atau copas alamat web/ blog yang kita kehendaki sebagai tujuan link kita nantinya.

3) Perhatikan gambar:

4) Isilah web address dengan alamat blog, atau alamat artikel anda, untuk mendapatkan alamat artikel pada blog sendiri caranya adalah:

 Pastikan artikel sudah dipublikasikan di blog.

 Buka atau klik judul posting yang akan diambil alamatnya, blok alamat yang ditampilkan di address bar, klik kanan – klik Copy, perhatikan gambar berikut:

 Paste kedalam kolom web address. 5) Klik OK.

JANGAN TAKUT SALAH Untuk mencoba, praktikan dan cobalah menu atau fitur lainnya, semakin berani mencoba, semakin tambah pengetahuan anda.

(19)

19 |

P a g e

w w w . m r m u n g . c o m

G. Cara Menyisipkan Gambar pada Posting

Pada saat kita melakukan posting selain kita bisa mengatur tampilan tulisan, jenis font, font color, font size layaknya pada program Microsoft Word, istilah kerennya blogger sudah menggunakan sistem WYSIWYG (What You See Is What You Get ) apa yang kita lihat dalam proses posting itulah yang nantinya bisa kita lihat ketika sudah di publikasikan ke halaman weblog kita, kita juga bisa menyisipkan gambar di postingan kita, caranya adalah:

1. Klik icon Insert image, perhatikan gambar berikut:

Klik Pilih file (Browse) untuk memilih file gambar dari dalam komputer kita,

Setelah gambar berhasil terupload dengan sempurna, selanjutnya anda klik gambar dan klik tombol Add Selected , perhatikan gambar berikut:

Klik Open untuk

mulai mengupload

kedalam posting

blog

(20)

20 |

P a g e

w w w . m r m u n g . c o m

Hasilnya akan tampak seperti gambar berikut, gambar sudah masuk kedalam kotak postingan;

Untuk mengatur posisi gambar, silahkan anda klik gambar yang telah masuk kedalam postingan, maka akan tampil pengaturan gambar seperti Ukuran:

small – medium – Large – X-Large dan letak gambar Left – Center – Right dst. Silahkan anda pilih dan atur sesuai kebutuhan anda.

Klik Gambar

Klik Add Selected

JANGAN TAKUT SALAH Untuk mencoba, praktikan dan cobalah menu atau fitur lainnya, semakin berani mencoba, semakin tambah pengetahuan anda.

(21)

21 |

P a g e

w w w . m r m u n g . c o m

H. Memberi Label/ Kategori pada Postingan

Katogori merukapan sebuah kelas atau kelompok. Fungsi dari kategori dalam sebuah postingan adalah untuk mengelompokkan postingan berdasarkan kriteria yang telah ditentukan sebelumnya.

Kategori dalam blogspot ini diganti dengan kata Label. Sebagai contoh kategori/ label: materi pembelajaran, download gratis, download makalah, Tips dan Trik dll.

Untuk membuat/ memberi label pada postingan adalah sebagai berikut:

1) Login dan Klik posting seperti biasa sampai keluar tampilan posting seperti gambar berikut:

2) Pada gambar diatas sudah tampak jelas posisi penulisan label/ kategori pada sebuah postingan, penulisan label disarankan jangan terlalu panjang-panjang, cukup 1 – 3 kata. Untuk memberi banyak label pada sebuah postingan caranya dengan memberi tanda pemisah komah. Misal sebuah postingan Pembelajaran Microsoft Word masuk dalam kategori: Ms. Word, Materi Kelas 8

3) Pada gambar diatas juga terlihat deretan label/ kategori yang sudah pernah dibuat, hal ini bertujuan, untuk memudahkan pemberian label pada posting tanpa harus menulis, cukup dengan mengklik salah satu label yang ada.

Tulis Label/ Kategori

(22)

22 |

P a g e

w w w . m r m u n g . c o m

I. Membuat Page/ Laman Terpisah di blogger.com

Salah satu fasilitas blogger.com saat ini adalah adanya page atau halaman yang

terpisah dari posting artikel blog, dulu saat awal keberadaan fasilitas ini masih diberi

10 halaman, meningkat menjadi 20 halaman dan sekarang ini pengguna blogger lebih

dimanjakan lagi dengan ketersediaanya halaman yang terpisah dari artikel dengan

jumlah postingan tanpa batas. Page/ Laman ini bisa anda gunakan untuk membuat

halaman profil, kontak kami, area download, dll.

Berikut Cara-cara membuat page/ laman di blogger:

1)

Login kehalaman admin blog anda

2)

Setelah tampil dasbor blogger, pilih menu laman untuk membuka jendela

pengelolaan laman/ page di blogger, perhatikan gambar berikut:

(23)

23 |

P a g e

w w w . m r m u n g . c o m

3)

Berikutnya anda bisa klik laman baru, dan memilih

laman kosong

(laman baru siap

anda isi lengkap mulai judul, dan isi laman),

pilihan kedua Alamat Web

, jika anda

menginginkan menu yang ditampilkan menuju web tertentu, misal saja menu

Login Admin link menuju http://blogger.com.

4)

Langkah-langkah berikutnya hampir sama seperti cara memposting artikel, untuk

pilihan laman baru, akan ditampilkan seperti pada gambar berikut:

(24)

24 |

P a g e

w w w . m r m u n g . c o m

MENGHIASI BLOG

1. Membuat link penting, Link Blog Sahabat pada weblog

Untuk membuat link blog sahabat atau link penting ke website atau weblog lain caranya adalah sebagai berikut:

- Masih di jendela yang sama yaitu jendela design/ rancangan => elemen halaman

- Perhatikan gambar berikut:

- Klik tambah Gadget maka anda akan tampil menu pilihan yang jumlahnya ada 19 gadget.

- Pada pilihan gadget tersebut pilihlah Daftar link seperti gambar disamping, maka akan tampil jendela konfigurasi link seperti berikut:

(25)

25 |

P a g e

w w w . m r m u n g . c o m

- Anda tinggal memasukan link yang diinginkan pada kotak URL Situs Baru sebagai contoh http://www.mr-mung.com kemudian pada kotak Nama Situs Baru di isi: Mr. Mung dot Com

- Kemudian klik Tambahkan Tautan

- Untuk pilihan Menyortir digunakan apabila anda menginginkan link diurutkan sesuai abjad atau tidak diurutkan.

- Klik Simpan apabila udah selesai.

J. Membuat RSS FEED Blog/ Website Berita

Tujuan dari memasang RSS FEED adalah agar kita bisa mengetahui posting terbaru secara langsung melalui blog kita tanpa harus membuka blog/ website berita terlebih dahulu.

Caranya adalah sebagai berikut:

- Klik tambahkan Gadget pada elemen halaman kita - Pilihlah Feed seperti gambar berikut:

- Maka akan tampil jendela konfigurasi seperti gambar berikut:

- Untuk menampilkan weblog yang menggunakan blogspot/ wordpress caranya tinggal menambahkan atom.xml dipaling belakang alamat blog, contoh: http://mr-mung.blogspot.com/atom.xml

- Kemudian klik lanjutkan maka akan tampil seperti gambar berikut:

Anda tinggal mengatur data yang akan ditampilkan, kemudian tanggal dan penulis dari blog tersebut.

(26)

26 |

P a g e

w w w . m r m u n g . c o m

- Berikut contoh beberapa penulisan URL FEED website berita. http://www.detikinet.com/index.php/feed/

http://www.okezone.com/rss

http://www.metrotvnews.com/rss_docs.asp http://www.liputan6.com/feed/rss2/

K. Memasang Script HTML/Java Script di Weblog

Jika kita ingin menempatkan kode html/ javascript, misal kita menginginkan status Yahoo Messanger di weblog kita caranya adalah sebagai berikut:

- Tambahkan gadget HTML/ Java Script

- Maka akan tampil jendela konfigurasi HTML/JavaScript seperti berikut:

- Masukkan Code HTML ini:

<a href="ymsgr:sendIM?mr_mung81"> <img

src="http://opi.yahoo.com/online?u=mr_mung81&m=g&t=14

&l=us" /></a>

(27)

27 |

P a g e

w w w . m r m u n g . c o m

Untuk mengganti model gambar status YM, silahkan anda ganti angka tercetak warna merah dengan angka-angka berikut (pilih sesuai keinginan):

1 "

2

3

4

5

6

7

8

9

10

11

12

13

14

15

(28)

28 |

P a g e

w w w . m r m u n g . c o m

Atau cara yang lebih praktis lagi silahkan anda kunjungi web

http://ymgen.com

dan ikuti

langkah-langkah memilih model dan memasukan id YM anda, hasil akhirnya anda akan

mendapat kode yang siap di pasang di blog anda.

Untuk Koleksi Tutorial Lainya sebagai tambahan pengetahuan, anda bisa

berkunjung di blog saya:

www.mrmung.com

Pada gadget HTML/ Java Script ini sering kita gunakan untuk meletakan

script-script yang bisa anda dapatkan dari internet untuk mempercantik weblog kita, dan sering juga di gunakan untuk meletakan script-script iklan.

(29)

29 |

P a g e

w w w . m r m u n g . c o m

Berikut beberapa koleksi Script Instant yang tinggal anda

pasang untuk menghiasi blog anda.

1. Kode Script Asmaul Khusna (http://www.al-habib.info/islamic-widget/ )

Husna-99-Beautiful-Names-of-Allah-3616-8192_134217728.widget?__install_id=1280144728748&__view=expand ed" width="150" height="170"

flashvars="col1=e18f32&col2=59ba1f&col3=005500&dur=3000&gig_lt =1280144888425&gig_pt=1280145000628&gig_g=1&gig_n=blogger" swliveconnect="true" quality="autohigh" loop="false"

menu="false" wmode="transparent"

allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" /></embed>

2. Kode Script Tanggalan Otomatis

<script

src='http://kodeku.googlecode.com/files/kalender.js'></script>

3. Kode Script Buku Tamu

<iframe title="Shoutbox"

src="http://shoutbox.widget.me/window.html?uid=YOURID_"

width="100%" height="300" frameborder="0" scrolling="auto"></iframe>

Ganti teks YOURID pada kode diatas dengan id anda.

4. Kode Script Jam Animasi

</script><script language="JavaScript" type="text/javascript"> obj=new

Object;obj.clockfile="8008-orange.swf";obj.TimeZone="JOG";obj.width=150;obj.height=150;obj.wm ode="transparent";showClock(obj);

</script>

</script><script language="JavaScript" type="text/javascript"> obj=new

Object;obj.clockfile="2006-white.swf";obj.TimeZone="JOG";obj.width=150;obj.height=150;obj.wmo de="transparent";showClock(obj);

</script>

(30)

30 |

P a g e

w w w . m r m u n g . c o m

EDIT MENU DAN SUB MENU MELALUI EDIT HTML TEMPLATE

Study kasus, kita akan mengedit menu dan sub menu seperti pada gambar berikut ini:

1. Login halaman admin blog anda seperti biasa, => blogger.com (masukan email dan password anda)

Klik template dan lakukan backup template terlebih dahulu, supaya jika terjadi kesalahan, kode template bisa dikembalikan:

Klik tombol Cadangkan/ Pulihkan – Unduh Template Lengkap/ Backup Template

(31)

31 |

P a g e

w w w . m r m u n g . c o m

2.

klik pada Edit HTML Perhatikan gamabar berikut:

3. Setelah kode HTML template terbuka, Gunakan tombol kombinasi keyboard CTRL+F untuk menggunakan fasilitas SEARCH, ketiklah kode atau nama menu yang akan anda edit:

(32)

32 |

P a g e

w w w . m r m u n g . c o m

Pada gambar diatas nomor 1 merupakan letak link tujuan menu ketika di klik, sedangkan nomor 2 merupakan nama menu/ sub menunya.

Pada nomor 3 merupakan kode untuk 1 menu, jadi jika anda akan menambah menu lain, maka anda cukup mengcopy kode HTML sesuai gambar diatas.

Pastikan anda sudah memposting tulisan sesuai dengan menu yang akan dibuat, karena nanti posting tersebut akan diambil link lokasinya untuk dipasang pada menu, sebagai contoh:

Saya akan membuat menu Profil, maka saya memposting terlebih dulu dengan judul Profil, setelah dipublikasikan, maka kita bisa mendapatkan link lokasi posting Profil seperti link berikut:

http://www.bloganda.com/2013/03/profil.html (kita bisa copy link diatas di Address Bar)

Dari link yang sudah kita dapatkan, selanjutnya kita pasang di kode HTML menu, maka jadinya seperti kode berikut:

<li><a href=”http://www.bloganda.com/2013/03/profil.html”>Profil</a></li> Setelah selesai anda edit menu dan sub menu yang ada, jangan lupa untuk menyimpan hasilnya dengan mengklik tombol simpan template.

(33)

33 |

P a g e

w w w . m r m u n g . c o m

TENTANG PENULIS

Mr.Mung nama bekenku di dunia maya, lengkapnya Amin Mungamar asal Banjarnegara, tepatnya desa Kincang Rt 01 Rw 01 Kec. Rakit, Kab. Banjarnegara. Profesi sekarang sebagai abdi negara, Guru mata pelajaran TIK (Teknologi Informasi dan Komunikasi) di SMP N 1 Kaliwungu Kab. Semarang yang beralamat di Ds. Kaliwungu Kecamatan Kaliwungu, Kabupaten Semarang, termasuk daerah pemekaran Kabupaten Semarang.

Sebagai aktifitas sepulang mengajar, menjadi Suami yang baik dan Ayah dari 3 jagoan kecil (Muhammad Ulin Nuha, Muhammad Mufid Ramadhan dan Muhammad Fakhri Shidiq), juga merangkap sebagai Pengelola dan Owner MungBisnis.com Penyedia Jasa Pembuatan Blog Elegan, Keren dan Murah yang memiliki klien-klien dari berbagai penjuru di Indonesia dan mancanegara.

Pengalaman Mengelola, Pembuat Website dan Blog Pribadi:

 Blog Mr. Mung dot Com (Education and Services) http://www.mr-mung.com

(2007).

 Website SMP Muhammadiyah 7 Semarang http://www.smpmutu.sch.id (2008)

 Website SMP Negeri 1 Kaliwungu Kab. Semarang menggunakan engine blogger.

http://www.smpn1klw.sch.id (mei 2010)

 Blog Guru (Berisi koleksi tutorial blog, dan materi pelajaran TIK kelas 7, 8, dan 9)

http://www.mrmung.com (2010)

 Blog Bisnis Mr. Mung (Jasa Pembuatan Weblog) http://www.mungbisnis.com

(2009)

 Toko Online Versi Blogspot http://kd-collection.blogspot.com

 Toko Online Profesional Versi Wordpress http://toko.mung.web.id dan

 Lebih dari 700 blog klien saya di http://klien.mungbisnis.com

Hubungi Saya

085640335006

089667100109

53D0DCDC

mr@mung.web.id

mr_mung81

(1)

28 | P a g e

w w w . m r m u n g . c o m

Atau cara yang lebih praktis lagi silahkan anda kunjungi web

http://ymgen.com

dan ikuti

langkah-langkah memilih model dan memasukan id YM anda, hasil akhirnya anda akan

mendapat kode yang siap di pasang di blog anda.

Untuk Koleksi Tutorial Lainya sebagai tambahan pengetahuan, anda bisa

berkunjung di blog saya:

www.mrmung.com

Pada gadget HTML/ Java Script ini sering kita gunakan untuk meletakan script-script yang bisa anda dapatkan dari internet untuk mempercantik weblog kita, dan sering juga di gunakan untuk meletakan script-script iklan.

(2)

29 | P a g e

w w w . m r m u n g . c o m

Berikut beberapa koleksi Script Instant yang tinggal anda

pasang untuk menghiasi blog anda.

1. Kode Script Asmaul Khusna (http://www.al-habib.info/islamic-widget/ )

Husna-99-Beautiful-Names-of-Allah-3616-8192_134217728.widget?__install_id=1280144728748&__view=expand ed" width="150" height="170"

flashvars="col1=e18f32&col2=59ba1f&col3=005500&dur=3000&gig_lt =1280144888425&gig_pt=1280145000628&gig_g=1&gig_n=blogger" swliveconnect="true" quality="autohigh" loop="false"

menu="false" wmode="transparent"

allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" /></embed>

2. Kode Script Tanggalan Otomatis

<script

src='http://kodeku.googlecode.com/files/kalender.js'></script>

3. Kode Script Buku Tamu

<iframe title="Shoutbox"

src="http://shoutbox.widget.me/window.html?uid=YOURID_"

width="100%" height="300" frameborder="0" scrolling="auto"></iframe>

Ganti teks YOURID pada kode diatas dengan id anda.

4. Kode Script Jam Animasi

</script><script language="JavaScript" type="text/javascript"> obj=new

Object;obj.clockfile="8008-orange.swf";obj.TimeZone="JOG";obj.width=150;obj.height=150;obj.wm ode="transparent";showClock(obj);

</script>

</script><script language="JavaScript" type="text/javascript"> obj=new

Object;obj.clockfile="2006-white.swf";obj.TimeZone="JOG";obj.width=150;obj.height=150;obj.wmo de="transparent";showClock(obj);

</script>

(3)

30 | P a g e

w w w . m r m u n g . c o m

EDIT MENU DAN SUB MENU MELALUI EDIT HTML TEMPLATE

Study kasus, kita akan mengedit menu dan sub menu seperti pada gambar berikut ini:

1. Login halaman admin blog anda seperti biasa, => blogger.com (masukan email dan password anda)

Klik template dan lakukan backup template terlebih dahulu, supaya jika terjadi kesalahan, kode template bisa dikembalikan:

Klik tombol Cadangkan/ Pulihkan – Unduh Template Lengkap/ Backup Template

(4)

31 | P a g e

w w w . m r m u n g . c o m

2.

klik pada Edit HTML Perhatikan gamabar berikut:

3. Setelah kode HTMLtemplate terbuka, Gunakan tombol kombinasi keyboard CTRL+F untuk menggunakan fasilitas SEARCH, ketiklah kode atau nama menu yang akan anda edit:

(5)

32 | P a g e

w w w . m r m u n g . c o m

Pada gambar diatas nomor 1 merupakan letak link tujuan menu ketika di klik, sedangkan nomor 2 merupakan nama menu/ sub menunya.

Pada nomor 3 merupakan kode untuk 1 menu, jadi jika anda akan menambah menu lain, maka anda cukup mengcopy kode HTML sesuai gambar diatas. Pastikan anda sudah memposting tulisan sesuai dengan menu yang akan dibuat, karena nanti posting tersebut akan diambil link lokasinya untuk dipasang pada menu, sebagai contoh:

Saya akan membuat menu Profil, maka saya memposting terlebih dulu dengan judul Profil, setelah dipublikasikan, maka kita bisa mendapatkan link lokasi posting Profil seperti link berikut:

http://www.bloganda.com/2013/03/profil.html (kita bisa copy link diatas di Address Bar)

Dari link yang sudah kita dapatkan, selanjutnya kita pasang di kode HTML menu, maka jadinya seperti kode berikut:

(6)

33 | P a g e

w w w . m r m u n g . c o m

TENTANG PENULIS

Mr.Mung nama bekenku di dunia maya, lengkapnya Amin Mungamar asal Banjarnegara, tepatnya desa Kincang Rt 01 Rw 01 Kec. Rakit, Kab. Banjarnegara. Profesi sekarang sebagai abdi negara, Guru mata pelajaran TIK (Teknologi Informasi dan Komunikasi) di SMP N 1 Kaliwungu Kab. Semarang yang beralamat di Ds. Kaliwungu Kecamatan Kaliwungu, Kabupaten Semarang, termasuk daerah pemekaran Kabupaten Semarang.

Sebagai aktifitas sepulang mengajar, menjadi Suami yang baik dan Ayah dari 3 jagoan kecil (Muhammad Ulin Nuha, Muhammad Mufid Ramadhan dan Muhammad Fakhri Shidiq), juga merangkap sebagai Pengelola dan Owner MungBisnis.com Penyedia Jasa Pembuatan Blog Elegan, Keren dan Murah yang memiliki klien-klien dari berbagai penjuru di Indonesia dan mancanegara.

Pengalaman Mengelola, Pembuat Website dan Blog Pribadi:

 Blog Mr. Mung dot Com (Education and Services) http://www.mr-mung.com

(2007).

 Website SMP Muhammadiyah 7 Semarang http://www.smpmutu.sch.id (2008)  Website SMP Negeri 1 Kaliwungu Kab. Semarang menggunakan engine blogger.

http://www.smpn1klw.sch.id (mei 2010)

 Blog Guru (Berisi koleksi tutorial blog, dan materi pelajaran TIK kelas 7, 8, dan 9)

http://www.mrmung.com (2010)

 Blog Bisnis Mr. Mung (Jasa Pembuatan Weblog) http://www.mungbisnis.com

(2009)

 Toko Online Versi Blogspot http://kd-collection.blogspot.com

 Toko Online Profesional Versi Wordpress http://toko.mung.web.id dan  Lebih dari 700 blog klien saya di http://klien.mungbisnis.com