panduan+bikin+blog+dari+ihsan elektro

45
  0

Upload: uhibbuka-fillah

Post on 13-Jul-2015

38 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Panduan+Bikin+Blog+Dari+Ihsan Elektro

5/12/2018 Panduan+Bikin+Blog+Dari+Ihsan Elektro - slidepdf.com

http://slidepdf.com/reader/full/panduanbikinblogdariihsan-elektro 1/45

 

0

Page 2: Panduan+Bikin+Blog+Dari+Ihsan Elektro

5/12/2018 Panduan+Bikin+Blog+Dari+Ihsan Elektro - slidepdf.com

http://slidepdf.com/reader/full/panduanbikinblogdariihsan-elektro 2/45

 

1

Kata Pengantar 

Bergalon-galon air mineral dihabiskan, banyak kilogram telur, tempe, tahu (trio makanan sehari-

hari) sudah ditelan, sumpah, serapah, makian, cacian, waktu luang, bervolt-volt energi listrik dihabiskan,

ber m-m uang telah dikeluarkan (maksudnya maratus, maribu, mablas-ribu). Fuhh, perjalanan panjang

yang melelahkan akhirnya bermuara juga….ya, e-book dengan judul “ Nge-blog yukk… “ yang merupakan

hasil jerih payah penulis dalam dunia blog ditambah dengan beberapa artikel yang merupakan copy &

paste dari para suhu-suhu blogger dengan sedikit modifikasi ini akhirnya telah saya selesaikan di sela-

sela kesibukan kuliah yang teramat sangat (ga sibuk-sibuk amat siy sebenarnya..). Mulai dari cara

mendaftarkan blog, pengaturan-pengaturan, trik-trik khusus, pengetahuan-pengetahuan seputar blog,

dan yang gak kalah penting mengenai bagaimana agar tampilan blog kita terlihat profesional, yang

kesemuanya itu dapat ditemukan di e-book ini. Jadi saya harap dengan adanya e-book ini kata-kata “ah

males banget bikin blog” atau “bikin blog?!! Yang bener aja, emang bisa !!” atau kata-kata aneh lainnya

bisa disingkirkan dari otak kita yang amat teramat canggih ini. Hehh..eHehh..eHehhh (capek juga niy dari

tadi ngomong <tepatnya nulis siy> menggebu-gebu). Pada intinya saya mengajak anda semua untuk ikut

serta dalam dunia perbloggingan yang ada sekarang ini. Gimana?!! Tertarik khan??!! Kalau masih belum

tertarik ya pokoknya dibaca aja dulu deh siapa tahu ntar bakal berubah pikiran (ketahuan maksa niy..)

Ehm..Saya memahami secara ikhlas bahwa apa yang saya buat dan yang saya hasilkan tetap

butuh perbaikan. Sehingga saran dan kritik sangat saya harapkan demi kemajuan di kemudian hari.

Nha, daripada basa-basi melulu akhir kata saya ucapkan..Selamat Membaca…!!!

O ya sebelum itu saya mau ngucapin terima kasih dahulu coz There’s no me without them… 

Thanks to :

  God Allah SWT & Muhammad SAW

  Kedua orang tua yang senantiasa memberikan kepercayaan dan dukungan atas segala aktifitas

yang dijalani.

  My sister (ketiga-tiganya) Ka Ida, Ka Lia, Nina (yang semangat tuh ujiannya)..

  Buat seluruh sepupu ane yang gila-gila.

  Temen-temen di SMAN 10 “Melati” (Masih negeri ga’ siy statusnya??? ..) macam Hadi (ketua

angkatan ane), Doni, Hendra, Reza, Rajdian, Chandra (gap2an smp 1,huakakakak…), Mimi &

Lujeng (saudara sekeluarga asuh..), Ginting & Handa (dua manusia yang super hina), all of cowo’

& cewe’ 8th

splendid , dan semua kenangan2 semasa SMA yang sulit buat dilupakan..

  Senior & junior ane di SMA 10 “ Melati”… 

  Buat semua personel di SINUS FAMILY…”Salam Olahraga”…(Konyol banget dah..) 

  Temen-temen seperjuangan di Teknik Elektro Universitas Diponegoro..Fathul faris (teman satu

kos yang selalu setia jadi tumpangan buat pergi & pulang kuliah), Reza, Ridho, Dirman

(perkumpulan manusia peng-grab foto cewek di Friendster), Pono & Imam (kelompok praktikum

Page 3: Panduan+Bikin+Blog+Dari+Ihsan Elektro

5/12/2018 Panduan+Bikin+Blog+Dari+Ihsan Elektro - slidepdf.com

http://slidepdf.com/reader/full/panduanbikinblogdariihsan-elektro 3/45

 

2

yang paling rajin..hihihi), Seluruh personel di grup “Alexsyah” yang dikomandoi orang gila

bernama Fuckruddin, for semua personel eletro 2007 dah pokoknye..Mari kita majukan jurusan

elektro yang tercinta ini!!!..ELEKTRO JAYA!!!

  Semua asisten praktikum..terima kasih atas bimbingan yang telah diberikan,,cos ane yakin di

balik didikan keras kalian tersimpan makna yang dalam (ceile,sok banget kata2nya….) 

  Buat semua dosen elektro, terima kasih banyak atas ilmu yang dah di share…Jujur Disiplin Kerja

keras itu motto kita..

  Semua warga elektro pokoknye… 

  Para suhu-suhu blogger macam bang o-om (http://www.o-om.com), bang Kendhin (http://trik-

tips.blogspot.com), dll. Dan juga buat semua blogger yang ada di dunia..terima kasih… 

  The Last but not least terima kasih buat semua yang tak tertulis tapi tak terlupakan…. 

Wahh banyak banget tuh ucapan thanks to (dah nge-sok kayak bikin buku beneran hihihi…

padahal ini baru di level e-book, syukur-syukur kalau ada yang mau baca) . Yahh doain aja ya semoga

ane jadi penulis beneran. Amin. .

Sekali lagi saya ucapkan Selamat Membaca…  

Semarang, 13 Mei 2008

M. Ikhsan Anshori

Page 4: Panduan+Bikin+Blog+Dari+Ihsan Elektro

5/12/2018 Panduan+Bikin+Blog+Dari+Ihsan Elektro - slidepdf.com

http://slidepdf.com/reader/full/panduanbikinblogdariihsan-elektro 4/45

 

3

Daftar Isi

Kata Pengantar

Daftar Isi

Bab I Hal-hal umum yang ada pada blog

Membuat blog

Pengaturan – pengaturan pada blog

Pengaturan font & warna

Bab II Trik & tips dalam pengelolaan blog

Membuat Shoutbox

Membuat Comments Box (kotak komentar)

Membuat read more/baca selengkapnya versi 1

Membuat read more/baca selengkapnya versi 2

Membuat kotak “link exchange” 

Membuat kotak blogroll

Membuat label pada blog

Menampilkan status off/online Yahoo Messenger

Menghilangkan navigation bar

Menampilkan judul posting tanpa isi posting

Menampilkan halaman lain di blog

Membuat “Tips of the day” 

Membuat blog lebih expressive

Memproteksi blog dari penjiplakan

Bab III Seputar blog

Mem-backup blog

Mendaftarkan blog ke search engine

Mempersingkat nama domain blog

Memasang meta tags di blogger

17 tips agar halaman blog tampil profesional

Penutup

Daftar Pustaka

Biografi

Page 5: Panduan+Bikin+Blog+Dari+Ihsan Elektro

5/12/2018 Panduan+Bikin+Blog+Dari+Ihsan Elektro - slidepdf.com

http://slidepdf.com/reader/full/panduanbikinblogdariihsan-elektro 5/45

 

4

BAB I

Pada bab ini kita akan membahas hal-hal umum yang di blogger.com. Tentu saja untuk memulaibab ini, kita awali dengan pembahasan tentang bagaimana mendaftar ke blogger.com yang kemudian

akan dilanjutkan dengan bagian-bagian yang lainnya. Selamat menyimak..

Membuat Blog 

Walaupun gambar icon judul ini berupa orang yang sedang pusing, tetapi untuk membuat blog

di blogger.com kita tidak akan pusing seperti icon itu. Nha, berikut ini saya sajikan cara membuat blog

gratis pada situs blogger.com. Pastikan komputer kamu sudah terhubung internet dengan koneksi yangagak lumayan.

1.  Silahkan kunjungi situs blogger.com (https:// www.blogger.com/start), sehingga tampil gambar

sebagai berikut:

Page 6: Panduan+Bikin+Blog+Dari+Ihsan Elektro

5/12/2018 Panduan+Bikin+Blog+Dari+Ihsan Elektro - slidepdf.com

http://slidepdf.com/reader/full/panduanbikinblogdariihsan-elektro 6/45

 

5

2.  Dari homepage diatas, klik Create Your Blog Now, so that kamu sekarang melihat tampilan

seperti berikut :

Silahkan kamu isi form diatas dan jangan lupa untuk menceklist I accept term of service.

3.  Klik Continue after U ngisi form diatas dengan benar :

Pada tahap ini kamu disuruh untuk mengisi judul dari blog anda dan URLnya. URL yang

disediakan adalah dalam bentuk subdomain, seperti terlihat pada gambar diatas, saya

menggunakan url : http://almuhandis-elektro.blogspot.com (ini adalah alamat blog kamu

nantinya).

Page 7: Panduan+Bikin+Blog+Dari+Ihsan Elektro

5/12/2018 Panduan+Bikin+Blog+Dari+Ihsan Elektro - slidepdf.com

http://slidepdf.com/reader/full/panduanbikinblogdariihsan-elektro 7/45

 

6

4.  Klik Continue, sehingga tampil jendela berikut :

Pada jendela ini, diberikan beberapa alternative template dari blogmu, silahkan pilih template

yang kamu sukai dengan cara meng-klik tombol Option yang berada di bawah gambar

tempalate tersebut. Terlihat pada gambar diatas saya memilih template dengan nama Tic-Tac.

5.  Klik Continue, sehingga sekarang kamu akan melihat tampilan berikut :

Selamat ya…..Blog ente telah sukses dibuat…., artinya, sampai disini blog saya dengan alamat

http://almuhandis-elektro.blogspot.com telah dapat diakses namun belum ada beritanya.

Page 8: Panduan+Bikin+Blog+Dari+Ihsan Elektro

5/12/2018 Panduan+Bikin+Blog+Dari+Ihsan Elektro - slidepdf.com

http://slidepdf.com/reader/full/panduanbikinblogdariihsan-elektro 8/45

 

7

6.  Klit Start Posting untuk memulai memasukan berita ke blog, perhatikan gambar berikut :

Kemudian klik Publish untuk menampilkan berita ini di halaman blog.

7.  Selesai..selamat yo akhirnya kamu telah memiliki blog yang bisa diakses di seluruh dunia..

Untuk keterangan lebih lanjut, kita ikuti materi-materi selanjutya…Yukk..  

Pengaturan-pengaturan yang ada pada blog 

Bagi kalian yang baru membuat blog, ada beberapa settingan / pengaturan yang harus di

lakukan agar blog kita bisa sesuai dengan yang kita inginkan. Nha,kalau belum tahu apa yang harus di

setting, silahkan ikuti langkah-langkahnya :

1.  Login ke blogger.com dengan user name dan password yang kamu miliki.

2.  Klik judul blog yang mau di setting ( kalau sudah mempunyai beberapa blog)

3.  Klik Pengaturan, trus klik Dasar. Beberapa form yang harus di isi pada menu Dasar :

  Judul⇒ isi dengan judul blogmu. Contoh : trik & tips blog

  Uraian⇒ isi dengan deskripsi blogmu. Contoh : blog ini berisi tentang beberapa trik & tips

tentang blog…. 

  Tambahkan blog Anda ke daftar kami?⇒ pilih ya agar setiap posting kita selalu masuk di daftar

Blogger.com.

Page 9: Panduan+Bikin+Blog+Dari+Ihsan Elektro

5/12/2018 Panduan+Bikin+Blog+Dari+Ihsan Elektro - slidepdf.com

http://slidepdf.com/reader/full/panduanbikinblogdariihsan-elektro 9/45

 

8

  Biarkan mesin pencari menemukan blog Anda?⇒ pilih ya 

  Tampilkan Editing Cepat di Blog Anda? ⇒ pilih Ya 

  Tampilkan Link Posting Email?⇒ Sebaiknya pilih ya, tapi pilih tidak juga tidak apa-apa

  Konten Dewasa?⇒ Pilih tidak. Kalau pilih ya berarti blogmu di anggap blog untuk dewasa

(semacam blog porno… )

  Tampilkan Mode Compose untuk semua blog Anda?⇒ pilih Ya 

  Aktifkan transliterasi?⇒ pilih Tidak, jika kamu ingin ada button untuk mengubah biasa ke

hurupfhindi (India), pilih ya jika sebaliknya)

  Klik tombol Simpan Pengaturan . Selesai

4. Klik Publikasi untuk mengatur menu Publikasi :

  Alamat Blog*Spot⇒ isi dengan nama blogmu. Contoh : ihsan-cakep. Biasanya alamat yang

tercantum adalah langsung alamat blog kamu, jadi jangan di ubah aja.

  Klik tombol Simpan pengaturan. Selesai

5. Klik Format untuk mengatur menu format :

  Tampilkan⇒ pilih angka posting yang ingin anda tampilkan. Misalkan => Tampilkan : 6 posting,

berarti posting yang akan tampil di halaman blogmu adalah sebanyak enam posting. Pilih

posting (sebaiknya jangan hari) pada menu pulldown.

  Format Header Tanggal⇒ pilih model tanggal/bulan yang kamu sukai, Format tanggal/bulan ini

akan selalu muncul diatas postingan kita.

  Format tanggal Index Arsip⇒ pilih model untuk peng-arsip-an yang anda sukai.

  Format Timestamp⇒ Pilih bentuk waktu yang kamu sukai.

  Zona Waktu⇒ Pilih zona waktu yang sesuai. Contoh untuk WIB : [UTC-+7.00]Asia/Jakarta.

  Bahasa⇒ Pilih bahasa yang di inginkan.

  Tampilkan Field judul⇒ Pilih ya atau tidak pun tidak apa-apa

  Tampilkan kolom link⇒ pilih ya, tapi seandainya pilih tidak juga tidak apa-apa.

  Aktifkan perataan float⇒ pilih ya, tapi seandainya mau pilih tidak juga tidak apa-apa

Page 10: Panduan+Bikin+Blog+Dari+Ihsan Elektro

5/12/2018 Panduan+Bikin+Blog+Dari+Ihsan Elektro - slidepdf.com

http://slidepdf.com/reader/full/panduanbikinblogdariihsan-elektro 10/45

 

9

  Klik tombol Simpan Pengaturan. Selesai

6. Klik Komentar Untuk mengatur menu komentar :

  Komentar⇒ pilih tampilkan, ini agar artikelmu dapat di komentari oleh pengunjung

  Siapa yang Bisa Berkomentar ?⇒ Pilih Siapa pun - termasuk Pengguna Anonim. Ini di

maksudkan agar setiap orang bisa berkomentar tidak terbatas kepada anggota blogspot saja.

  Default Komentar untuk Posting⇒ pilih Posting baru memiliki komentar.

  Link balik⇒ Pilih tampilkan. Ini dimaksudkan agar kita mengetahui apabila ada yang memasang

link pada artikel kita.

  Default Link Balik untuk Posting⇒ pilih Posting baru Memiliki Link Balik.

  Format Timestamp Komentar⇒ pilih format jam yg singkat. Contoh: 8.00 PM.

  Tampilkan komentar dalam sebuah window popup?⇒ pilih Ya. Supaya ketika di klik oleh

pengunjung, halaman blog anda tidak menghilang/tertimpa halaman komentar.

  Aktifkan moderasi komentar?⇒ pilih Tidak (sebaiknya).

  Tampilkan verifikasi kata untuk komentar?⇒ pilih Ya. Ini di maksudkan agar terhindar dari

software robot dengan tujuan melakukan spam.

  Tampilkan gambar profil dalam komentar?⇒ pilih ya. Supaya gambar komentator yg punya id

blogger, dapat menampilkan fotonya.

  Email Pemberitahuan Komentar⇒ isi dg alamat email kamu, ini di maksudkan agar setiap ada

yang berkomentar pada artikelmmu, kamu akan dapat kiriman email dari blogger.com sebagai

pemberitahuan.

  Klik tombol Simpan Pengaturan. Selesai

7. Klik Arsipkan Untuk mengatur menu Arsipkan :

  Frekuensi Arsip⇒ pilih Bulanan.

  Aktifkan Halaman Posting?⇒ pilih ya.

  Klik tombol Simpan Pengaturan . Selesai.

8. Klik Fedd Situs untuk mengatur menu feed situs :

  Izinkan Feed Blog⇒ pilih Penuh.

Page 11: Panduan+Bikin+Blog+Dari+Ihsan Elektro

5/12/2018 Panduan+Bikin+Blog+Dari+Ihsan Elektro - slidepdf.com

http://slidepdf.com/reader/full/panduanbikinblogdariihsan-elektro 11/45

 

10

  Posting URL Pengubahan Arah Feed⇒ di isi dengan alamat feed penggati semisal alamat feed

dari feed burner, jika belum punya, di kosongkan saja.

  Footer Feed Posting⇒ Silahkan di isi dengan kode iklan yang anda punya, misal kode iklan dari

Google adsense dsb, namun jika tidak punya, silahkan kosongkan saja.

  Klik tombol Simpan Perubahan. Selesai.

Sekian penjelasan tentang menu setting atau pengaturan yang ada pada blospot. Untuk menu yang lain

saya yakin kalian bakal bisa mengerti sendiri mengenai fungsi-fungsi atau kegunaannya masing-masing.

Yuupss, akhirnya satu pekerjaan sudah selesai, tinggal menyongsong pekerjaan lainnya..

Mengatur Hurup dan Warna 

Berikut adalah tutorial singkat mengenai pengaturan font & warna pada blogmu yang hanya ada

pada blog. Klik menu "Fonts and Colors", maka akan muncul beberapa pengaturan : (ini khusus untuk

template "minima")

1.  Page Background color --> pengaturan warna background blog. Silahkan klik warna yang ada di

sebelah kanan yang di sukai.

2.  Text Color --> pengaturan warna hurup dari posting-an.

3.  Link Color --> pengaturan warna hurup yang di link.

4.  Blog Title Color --> pengaturan warna hurup judul Blog.

5.  Blog Description Color --> pengaturan warna hurup deskripsi blog.

6.  Post Title Color --> pengaturan warna hurup judul posting-an.

7.  Border Color --> pengaturan warna kotak yang mengelilingi judul blog, serta garis pemisah.

8.  Sidebar Title Color --> pengaturan warna hurup judul yang anda di sidebar (kolom samping).

9.  Sidebar Title Color --> pengaturan warna hurup yang ada di sidebar(kolom samping).

10. Visited link Color --> pengaturan warna hurup link ketika pengunjung mengarahkannya ke

tulisan yang mengandung link.

11. Text Font --> pengaturan jenis hurup,berlaku untuk hurup hasil dari posting-an ataupun hurup

yang ada di sidebar.

Page 12: Panduan+Bikin+Blog+Dari+Ihsan Elektro

5/12/2018 Panduan+Bikin+Blog+Dari+Ihsan Elektro - slidepdf.com

http://slidepdf.com/reader/full/panduanbikinblogdariihsan-elektro 12/45

 

11

12. Sidebar Title Font --> pengaturan jenis hurup untuk judul yang ada di sidebar serta tanggal

postingan.

13. Blog Title Font --> pengaturan jenis hurup Judul blog.

14. Blog Description Font --> Pengaturan jenis hurup dekripsi blog.

15. Post Footer Font --> pengaturan jenis hurup footer (contoh : posted by ).

16. Klik “ SAVE CHANGES” untuk mengakhiri pengaturan. Selesai 

Untuk template-template selain template "minima", pada dasarnya sama aja, hanya saja ada sedikit

perbedaan, tapi itu tidak sulit. Untuk mengetahui tulisan mana yang sedang di rubah oleh anda, anda

cukup melihat mana yang berubah tulisannya pada preview yang terletak sebelah bawah.

Page 13: Panduan+Bikin+Blog+Dari+Ihsan Elektro

5/12/2018 Panduan+Bikin+Blog+Dari+Ihsan Elektro - slidepdf.com

http://slidepdf.com/reader/full/panduanbikinblogdariihsan-elektro 13/45

 

12

BAB II

Pada bab ini kita akan mengetahui bagaimana cara memodifikasi blog kita yang bisa bikin hidup

lebih hidup (kayak iklan aja..). Singkat kata..yukkk… 

Membuat Shoutbox  

Shout box atau istilah lainnya Say Box, Tag Board, dan Chatter Box adalah suatu kotak yang

berfungsi untuk mengirimkan pesan-pesan pendek, namun bisa juga berfungsi sebagai tempat ngobrol

(chatting). Dengan shoutbox, kita juga bisa mempromosikan blog kita, misalnya, kita berkunjung ke blog

orang yang menyediakan kotak ini kemudian kita memberi komentar atau cuma sekedar salam di

shoutbox mereka, lalu si empu-nya blog akan melihat di shoutbox, biasanya meraka akan balasmengunjungi blog kita, dan selanjutnya terserah anda. Biasanya shoutbox diselipkan kedalam halaman

web/blog dengan bahasa java Script. Bagi anda yang jago pemrograman java script mungkin bisa

membuatnya sendiri dengan membuat kode-kode yang memusingkan kepala . Namun buat yang ga

  jago ga usah khawatir karena sekarang ini banyak situs internet yang menyediakan layanan ini, salah

satunya yaitu Shoutmix . Caranya adalah sebagai berikut :

1.  Buka situs Shoutmix , kita harus mendaftar di situs tersebut.

2.  Jika pendaftarannya berhasil kita akan langsung disuruh memilih type shoutbox yang

disediakan. Kemudian klik tombol Continue. 

3.  Setelah itu kita akan mendapat ucapan "Terima Kasih" lalu klik link Go to My Control PanelNow 

4.  Disini kita bisa mengatur terlebih dahulu shoutbox yang kita punya, misalnya Style & Color, Date

& Time, dan lain-lain.

5.  Jika sudah selesai klik menu Get Codes.

6.  Kalau kita ingin meletakkan shoutbox di blog kita pilih "Place Shoutbox on Webpage" 

7.  Atur lebar dan tinggi shoutbox di kolom widht dan hight 

8.  Kemudian Copy kode yang ada di dalam kotak "generated Codes" 

9.  Login ke blogger.com lalu pilih Layout kemudian Add Page Elements 

10. Tambahkan elemen HTML/Javascript.

11. Paste Kode yang telah kita copy dari shoutbox.com tadi di kotak "Content" lalu simpan.

12. Selesai....

Page 14: Panduan+Bikin+Blog+Dari+Ihsan Elektro

5/12/2018 Panduan+Bikin+Blog+Dari+Ihsan Elektro - slidepdf.com

http://slidepdf.com/reader/full/panduanbikinblogdariihsan-elektro 14/45

 

13

Membuat Commments Box (Kotak Komentar)

Comments Box atau Kotak Komentar adalah suatu kotak yang berfungsi untuk memberikan

komentar terhadap isi dari suatu artikel dalam sebuah weblog. Jika di Wordpress.com kotak komentartersebut akan langsung muncul tepat di bawah artikel. Namun tidak halnya di  Blogspot/Blogger, kotak

komentar dilayanan blog ini hanya berupa link yang kemudian baru akan muncul kotak komentar bagi

pengunjung yang mau memberikan komentar terhadap artikel tersebut, hal ini menyebabkan para

komentator sedikit enggan untuk melakukannya karena merasa malas untuk membuka window baru

yang tentu saja akan memerlukan sedikit waktu untuk membukanya. Sehingga para pengguna layanan

Blogspot lebih sedikit menerima komentar dibanding dengan para pengguna layanan Wordpress.

WARNING : KARENA BANYAK BLOGGER YANG GAGAL MENGGUNAKAN TRIK INI DAN JUGA ADA YANG

KEHILANGAN POSTINGNYA, JADI ANDA HARUS MEMBACKUP DULU TEMPLATE ANDA. YANG GAGAL

MEMAKAI INI MUNGKIN KARENA ADANYA KETIDAKCOCOKAN DENGAN TEMPLATE YANG DIGUNAKAN.

JIKA TERJADI HAL-HAL YANG TIDAK DIINGIINGINKAN SEGERA KEMBALIKAN TEMPLATE ANDA YANG

LAMA. TAPI BANYAK JUGA KOK YANG BERHASIL, SEMOGA BERUNTUNG

Tapi bagi kamu yang memakai layanan Blogspot tidakperlu khawatir lagi karena trik berikut ini akan

mengulas bagaimana caranya menambahkan kotak komentar atau comments box sehingga menjadi

kotak komentar yang ada di Wordpress yaitu persis berada dibawah artikel caranya adalah dengan

menggunakan layanan di http://www.haloscan.com. Satu hal yang perlu diperhatikan sebelum kamu

menggunakan layanan ini yaitu "komentar-komentar terdahulu akan hilang", jadi pikirkanlah dulu

sebelum kamu memakai layanan ini. Kalau kamu sudah yakin mau menerapkannya maka berikut ini

dalah caranya:

1.  Buka website http://www.haloscan.com. 

2.  Daftarkan diri kamu di website tersebut.

3.  Setelah selesai lalu Login dengan username dan  password  yang sama dengan pada saat

mendaftar.

4.  Setelah login berhasil maka akan muncul beberapa menu. Pertama-tama pilih menu setting.

Didalam menu Setting ada beberapa pengaturan yang harus disi silahkan atur sesuai dengan

keinginanmu. kamudian simpan.

5.  Langkah selanjutnya yaitu pilih menu Template. Silahkan pilih mana yang kamu sukai, sebaiknya

sesuaikan dengan warna blog kamu kemudian simpan.

6.  Langkah berikutnya yaitu pilih menu Install 

7.  Beri tanda pada radio button di samping tulisan Blogger or Blogspot lalu klik Tombol Next 

8.  Klik Tombol Browse , silahkan pilih file template yang sudah dibackup. Kalau belum silahkan

backup dulu. Jika belum tahuh caranya backup klik disini 

9.  Klik tombol Upload Blogger Template.

10.  Jika sudah berhasil klik tombol Download New Template kemudian di save.

Page 15: Panduan+Bikin+Blog+Dari+Ihsan Elektro

5/12/2018 Panduan+Bikin+Blog+Dari+Ihsan Elektro - slidepdf.com

http://slidepdf.com/reader/full/panduanbikinblogdariihsan-elektro 15/45

 

14

11. Login ke Blogger/Blogspot 

12. Pilih Template kemudian klik menu Edit HTML 

13. Untuk Upload template klik tombol Brows. Masukkan template yang sudah didownload dari

haloscan tadi lalu Upload kemudian simpan setting.

14. Coba buka buka web blog kamu dan lihat hasilnya. Sekarang kamu sudah mempunya kotak

komentar seperti yang ada di wordpress.

15. Trus gimana caranya nampilin komen-komen terbaru biar bisa kelihatan di sidebar? caranya

gampang, yiatu kembali ke haloscan trus pilih dashbord nha disitu kan ada recent comments

trus dibawahnya ada link tulisannya gini "put this widget on your site" nha kamu klik link

tersebut, setelah itu dibawahnya akan muncul kotak yang berisi kode. Copy kode tersebut dan

pasang di blog kamu, gampang to?

16. Selamat Mencoba... SEMOGA BERHASIIIIILLLLLL

Cara Membuat Read More / Baca Selengkapnya

Biasanya postingan terbaru akan ditampilkan dihalaman utama blog. Namun jika postingan

kamu terlalu panjang maka hal tersebut akan membuat penuh halaman utama. Jika kamu ingin supaya

postingan kamu yang ditampilkan dihalaman utama cuma abstraksinya saja kemudian ada sebuah link

Read More / Baca Selengkapnya untuk melihat selengkapnya maka ikutilah langkah-langkah berikut :

1.  Buka menu Layout kemudian pilih Edit HTML.

2.  Kasih tanda cek (centang) pada cekbox "expand widget template"

3.  Cari kode berikut di Template blog kamu (tempatnya kira-kira pada 1/4 bagian bawah kode

hmtl) :

<div class='post-body entry-content'>

<p><data:post.body/></p> 

4.  Kalau sudah ketemu, Ganti kode tersebut menjadi seperti ini :

<div class='post-body entry-content'> 

<b:if cond='data:blog.pageType == "item"'>

<style>.fullpost{display:inline;}</style>

<p><data:post.body/></p>

<b:else/>

<style>.fullpost{display:none;}</style>

<p><data:post.body/></p> 

Page 16: Panduan+Bikin+Blog+Dari+Ihsan Elektro

5/12/2018 Panduan+Bikin+Blog+Dari+Ihsan Elektro - slidepdf.com

http://slidepdf.com/reader/full/panduanbikinblogdariihsan-elektro 16/45

 

15

<a expr:href='data:post.url'>Read More......</a>

</b:if>

5.  Tulisan "Read More....." itu bisa kamu rubah, misalnya jadi "Baca Selengkapnya". Simpan hasil

pengeditan. 

6.  Kemudian pilih menu Setting lalu pilih Formatting 

7.  Pada kotak Post Template isikan kode berikut:

<span class="fullpost">

</span>

8.  Kemudian Simpan. 

9.  Ketika memposting, klik EDIT HTML. Maka, secara otomatis akan tampak kode seperti berikut :

<span class="fullpost">

</span>

10. Letakkan abstraksi posting atau artikel yang akan ditampilkan dihalama utama (sebelum tulisan

"Redmore") diatas kode ini : <span class="fullpost"> sementara sisanya yaitu keseluruhan

posting letakkan di antara kode <span class="fullpost"> dan </span>

11.  Ini yang paling penting diantara semua proses diatas yaitu ..... Selesai..... he..he..he.. :D

Selamat Mencoba... 

Membuat Read More Versi 2 

Lho? maksudnya apa? Apa bedanya dengan read more yang satunya?? Begini lho, kalo read

more yang lama, kalau kita ng-klik tulisan read more atau Baca Selengkapnya itu kita akan membuka

halaman baru sehingga akan meloading lagi halaman web kita. Nha Read more yang ini, yang akan kita

bahas ini nggak gitu cara kerjanya, cara kerjanya yaitu berangkat jam 08.00 pagi pulang jam 16.00 WIB

(emangnya PNS) Gini lho cara kerjanya :

Di trik Read more yang baru ini, kita akan membuat link Read more yang jika kita meng-klik link

tersebut, maka keseluruhan artikel akan terpampang dibawahnya, jadi tidak perlu meload ke halaman

yang lain, contohnya disini. Piye? uenak tho? bagi yang sudah kebelet ingin menyimak trik ini silahkan

langsung ikuti trik berikut ini. Dan bagi yang kebelet mo pipis silahkan ke kamar mandi dulu

Berikut ini langkah-langkahnya:

1.  Login ke Blogger

2.  Pilih Setting --> Template --> Edit HTML 

Page 17: Panduan+Bikin+Blog+Dari+Ihsan Elektro

5/12/2018 Panduan+Bikin+Blog+Dari+Ihsan Elektro - slidepdf.com

http://slidepdf.com/reader/full/panduanbikinblogdariihsan-elektro 17/45

 

16

3.  Kamu mau memback-up template kamu dulu nggak?, kalo iya kilik tulisan Download Template 

lalu simpan.

4.  Beri tanda centang pada kotak yang bertuliskan Expand Template Widget 

5.  Kopi kode berikut ini dan taruh tepat diatas kode </head>

<script src='http://www.geocities.com/kendhin_x/blog/Readmore.js'

type='text/javascript'/>

6.  Sudah? sudah belum? ditanya kok diam aja gimana sih ?

7.  Kalo sudah cari kode dibawah ini

<div class='post-header-line-1'/>

(letaknya kira-kira di bagian tengah kebawah. yak terus..terus..Nha disitu ketemu kan kodenya?)

8.  Nha dibawahnya kan ada kode gini <div class='post-body entry-content'> Nha ganti kode

tersebut menjadi seperti ini:

<div class='post-body entry-content' expr:id='"post-" + data:post.id'>

<b:if cond='data:blog.pageType == "item"'> 

9.  Terus dibawahnya kan kan ada kode gini <p><data:post.body/></p> 

10. Tembahkan kode ini dibawahnya.

<b:else/>

<style>#fullpost {display:none;}</style>

<p><data:post.body/></p>

<span id='showlink'>

<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"'

href='javascript:void(0);'>[+/-] Selengkapnya...</a></p>

</span>

<span id='hidelink' style='display:none'>

<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"'

href='javascript:void(0);'>[+/-] Ringkasan...</a></p>

</span>

<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>

</b:if>11.  Jadi seluruh kodenya akan menjadi seperti ini :

<div class='post-header-line-1'/>

<div class='post-body entry-content' expr:id='"post-" + data:post.id'>

<b:if cond='data:blog.pageType == "item"'> 

<p><data:post.body/></p> 

Page 18: Panduan+Bikin+Blog+Dari+Ihsan Elektro

5/12/2018 Panduan+Bikin+Blog+Dari+Ihsan Elektro - slidepdf.com

http://slidepdf.com/reader/full/panduanbikinblogdariihsan-elektro 18/45

 

17

<b:else/>

<style>#fullpost {display:none;}</style>

<p><data:post.body/></p>

<span id='showlink'>

<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"'

href='javascript:void(0);'>[+/-] Selengkapnya...</a></p>

</span>

<span id='hidelink' style='display:none'>

<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"'

href='javascript:void(0);'>[+/-] Ringkasan...</a></p>

</span>

<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>

</b:if>

12. Tulisan 'Selengkapnya' dan 'Ringkasan' bisa diganti dengan apa aja kata yang kamu suka.

13. Lalu simpan template.

14. Pilih menu Setting -->> Formatting 

15. Di bagian bawah ada kotak yang disampingnya ada tulisan "Post Template", dan isikan kode

dibawah ini ke dalamnya lalu simpan setting.

<span id="fullpost">

</span> 

selesai....

Ohya, kalo memposting, letakkan abstraksi posting yg akan ditampilkan di halaman muka di atas

kode <span class="fullpost"> sementara sisanya yaitu keseluruhan posting letakkan di antara

kode <span id="fullpost"> dan </span> 

Gimana? Sudah bisa belum?

Pinter.... anak siapa siiihhh??? duh lutunya

Page 19: Panduan+Bikin+Blog+Dari+Ihsan Elektro

5/12/2018 Panduan+Bikin+Blog+Dari+Ihsan Elektro - slidepdf.com

http://slidepdf.com/reader/full/panduanbikinblogdariihsan-elektro 19/45

 

18

Cara Membuat Kotak Link Exchange Kamu belum bisa masang banner link exchange? masa' sih? hari gini belum bisa masang banner,

capeee'' deeh . Nha trus gimana cara buat kotak tersebut? Begini lho, pertama Login ke blogger trus

pilih Setting --> Template trus klik Add Page Element lalup pilih HTML/Java Script trus kopi kode berikut

ini di tempat yang disediakan.

<textarea name="textarea" cols="20"><a href="http://ihsan-elektro.blogspot.com.com"><img

src="http://www.geocities.com/kendhin_x/banner/ka01.gif" width="90" height="17" border="0"

/></a></textarea>

text yang berwarna hijau menunjukkan labar kotak, text warna biru adalah link, ganti text tersebut

dengan alamat blogmu sedangkan text warna merah adalah alamat gambar beserta ukurannya, ganti

text tsb dengan alamat gambar km. Terus simpan templatenya.

Hasilnya ya bisa diliat di blog anda masing-masing, trus gambarnya mana? gini didalam kotak tersebut

kan ada textnya tuh, nha kalo textnya itu dicopy terus di paste di blog, maka hasilnya akan menjadi

gambar dan juga ada linknya.

piye? wes mudeng rung?

Guampang tho?

Membuat kotak Blogroll Pasti dah pada tahu khan apa itu kotak blogroll?! Kotak blogroll itu maksudya kotak yang berisi

link-link teman kita atau siapa saja yang ingin kita link. Nha sekarang kita akan mempelajari bagaimana

cara membuatnya. Untuk trik kali ini, ada dua macam kotak blogroll yang akan kita buat, terserah kamu

mo pilih yang mana. Kotak blogroll-nya yaitu:

1. Kotak Blogroll Model Textarea 

Nha begini cara membuatnya :

Pasang code berikut ini di kedalam element kamu (Page Element --> Add Page Element --> HTML

/Javascript)

Page 20: Panduan+Bikin+Blog+Dari+Ihsan Elektro

5/12/2018 Panduan+Bikin+Blog+Dari+Ihsan Elektro - slidepdf.com

http://slidepdf.com/reader/full/panduanbikinblogdariihsan-elektro 20/45

 

19

<div style="border: 1px solid rgb(153, 153, 153);

overflow: auto;

width: 200px;

height: 200px;

text-align: center; ">

#link1 <br />

#link2 <br />

#link3 <br />

#link...

</div>

keterangan:

- Kode width: 200px; dan height: 200px; adalah ukuran lebar dan panjang kotak, kamu bisa merubahnya

dan menyesuaikanya dengan ukuran yg kamu suka.

- Ganti tulisan "#link1,#link2, #link3 dst" dengan daftar link-link kamu, oh ya itu juga bisa diisi dengan

banner link.

- Jika kamu pingin daftar link-linknya berjajar, maka hilangkan kode <br /> 

2. Kotak Blogroll Model Marquee 

Kotak ini juga mampu menampung banyak link dalam tempat yang sempit. Namun kotak blog roll ini

berbeda dengan kotak yg diatas, karena kotak yang ini tidak memiliki rollbar (yg biasanya disebelah

kanan trus ditarik keatas kebawah itu lho). Link-link ato isi didalam kotak ini akan bergerak/berjalan, bisa

vertikal ato horizontal. Nah gini nih cara buatnya:

Pasang code berikut ini di kedalam element kamu (Page Element --> Add Page Element --> HTML

/Javascript)

<MARQUEE align="center" direction="up" height="100" scrollamount= "2"

onmouseover='this.stop()' onmouseout='this.start()' width="95%" >

#link1 <br />

#link2 <br />

#link3 <br />

#link...<br />

</marquee>

Keterangan :

Page 21: Panduan+Bikin+Blog+Dari+Ihsan Elektro

5/12/2018 Panduan+Bikin+Blog+Dari+Ihsan Elektro - slidepdf.com

http://slidepdf.com/reader/full/panduanbikinblogdariihsan-elektro 21/45

 

20

- Kode "up" itu menunjukan arah pergerakan, kamu bisa menggantinya dengan down, left, right (udah

mudeng to artinya, gak usah dijelasin ya).

- Jika kamu menggantinya dengan pergerakan horizontal (left ato right) maka hilangkan kode <br />.

- Angka "100" menunjukkan tinggi dari kotak blogroll kamu. Semakin banyak angkanya maka semakin

tinggi pula ukuran blogroll.

Membuat Label pada blog 

Apa kamu punya masalah dengan berantakannya artikel-artikel di dalam blogmu ? dan bingung

bagaimana cara mengatasinya. Nah mungkin masalah ini bisa diatasi dengan cara membuat label pada

blog kita. Lho,emang fungsi label itu apa? Begini, jadi dengan adanya label itu kita bisa lebih mudah

mengkategorikan atau mengelompokan artikel yang sudah diposting. Dan juga dengan adanya labeldapat mempermudah para pengunjung di blog kita untuk memilih artikel mana yang ingin dibaca. Yups

langsung ke prakteknya aja. Jadi pada kali ini saya akan mencoba membahas mengenai bagaimana cara

untuk membuat kategori atau label.

Pertama-tama yang harus kamu lakukan yaitu membaca "Bismillah" he..he.. Login ke blogger lalu

Klik Posting --> Edit Post. 

  Membuat Kategori / Label 

Pilih atau beri tanda centang pada artikel yang ingin diberi label/dikategorikan. Lalu pada Combo

box (yang ada tulisannya "label action") pilih "New Label" lalu beri nama label tersebut.

  Menghapus Kategori / Label 

Beri tanda centang pada postingan yang ingin dihapus labelnya, trus klik combo box trus klik

label dibawah tulisan "Remove label".

  Mengganti Kategori / Label 

Hapus dulu label yang ada, kemudian beri label baru.

Page 22: Panduan+Bikin+Blog+Dari+Ihsan Elektro

5/12/2018 Panduan+Bikin+Blog+Dari+Ihsan Elektro - slidepdf.com

http://slidepdf.com/reader/full/panduanbikinblogdariihsan-elektro 22/45

 

21

Kemudian cara memasang/menampilkannya di blog bisa dilihat di bawah ini :

1. Klik Template --> Page Elements

2. Tambahkan page elements kemudian pilih Label trus disitu atur sendiri. Ngerti khan ??

Selamat mencoba !!!

Menampilkan Status Off/Online Yahoo Messenger Dalam trik kali ini kita akan coba membahas tentang "Bagaimana Caranya Menampilkan Status

Offline/Online Yahoo Messenger". Trus fungsinya apa nih? gini, kalo ada misalnya ada penandanya

seperti itu kan nanti pengunjung blogmu akan bisa langsung berinteraksi langsungdenganmu, nha kalo

gitu kan nanti pengunjung blogmu jadi tambah sayang ma kamu.

Ok Langsung aja, Contohnya akan seperti ini, jika status kamu offline maka gambarnya akan seperti ini :

trus jika kamu online maka iconya akan berubah seperti ini:

Cara buatnya sangat gampang kamu tinggal copy script berikut ini trus kamu pasang di sidebar kamu,

udah tahu kan cara pasanganya, itu lho seperti kalo km masang "page element", Masuk ke "Page

Element" trus "Add page elements --> HTML/Javascript".

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

src="http://opi.yahoo.com/online?u=ihsan&amp;m=g&amp;t=2&amp;l=us"/>

</a>

Ganti text yang warna merah (kendhin_x) dengan id YM kamu.

perhatikan angka "2", itu bisa kamu ganti dengan angka yang lain dan hasilnya gambar yang ditampilkan

akan berbeda-beda.

Piye? gampang to?

Page 23: Panduan+Bikin+Blog+Dari+Ihsan Elektro

5/12/2018 Panduan+Bikin+Blog+Dari+Ihsan Elektro - slidepdf.com

http://slidepdf.com/reader/full/panduanbikinblogdariihsan-elektro 23/45

 

22

Cara Menghilangkan Navbar (Navigation Bar) Navbar adalah fasilitas standar yang dimiliki oleh Blogger.com yang letaknya berada di bagian

paling atas dari blog yang fungsinya antara lain untuk mulai melakukan Sign In atau bisa juga membuatBlog baru. Navigation Bar juga bisa digunakan untuk melaporkan kecurangan atau tindak kejahatan

weblog yang dilakukan oleh seorang blogger, misalnya kontent blognya yang melanggar TOS

Blogger.com atau hal lain yang dapat dianggap merugikan dunia internet.

Namun ada beberapa blogger yang merasa akan lebih enak jika melihat tampilan blognya dalam

keadaan bersih tanpa harus ada bagian mencolok di bagian atas blognya sendiri (NavBar). Karena itu,

kadang para blogger menghapus NavBar tersebut. Pertanyaannya adalah: Apa tidak melanggar Term of 

Service (TOS) dari Blogger.com? Sejauh ini, banyak blogger yang telah menghilangkan Navbar mereka

dan tidak juga mendapat teguran dari blogger. Artinya, bisa dilakukan. Toh di TOS Blogger sendiri juga

tidak ada aturan yang cukup detail tentang hal ini.

Nah, bagaimana menghilangkan Navigation Bar? Ada beberapa penyedia template (beta dan

classic) yang memang sudah tidak ada NavBar-nya. Namun bagi kamu yang memakai template yang

masih ada NavBarnya dan ingin menghilangkannya maka inilah caranya.

1.  Kamu harus Login dulu di Blogger.com.

2.  Didalam pengaturan pilih menu Setting kemudian pilih Edit HTML 

3.  Copy script berikut ke dalam tag head 

#navbar-iframe {display: none !important;

}

contohnya sebagai berikut :

-----------------------------------------------

Blogger Template Style

Name: Son of Moto (Mean Green Blogging Machine variation)

Designer: Jeffrey Zeldman

URL: www.zeldman.com

Date: 23 Feb 2004

Updated by: Blogger Team

----------------------------------------------- */

#navbar-iframe {

display: none !important;

}

Page 24: Panduan+Bikin+Blog+Dari+Ihsan Elektro

5/12/2018 Panduan+Bikin+Blog+Dari+Ihsan Elektro - slidepdf.com

http://slidepdf.com/reader/full/panduanbikinblogdariihsan-elektro 24/45

 

23

/* Variable definitions

====================

4.  Kemudian simpan.

Menampilkan judul posting tanpa isi posting 

Ketika melakukan pencarian atau membuka isi label (kategory) di blog saya pasti akan melihat

hasil tampilan berupa link judul posting beserta tanggal tanpa menampilkan isi posting sama

sekali, tentu saja dengan cara ini sangat menguntungkan dan mempermudah mengunjung ketika

berselancar di blog kita, coba bayangkan ketika pengunjung membuka label atau kategory yang isinya

ada 100 posting, tentu hal ini menjadi masalah nantinya dan membutuhkan waktu yang lama sampai

halaman benar-benar terbuka sempurna.

Untuk mengatasi masalah diatas ada baiknya kita hanya menampilkan judul posting beserta

tanggal posting saja, selain mempermudah, tentu saja loading page kita akan 50x lebih cepat dari

biasanya ketika membuka halaman label.

Pengen tau cara buatnya ikuti langkah dibawah ini: 

Pertama : 

Buka Template -> Edit HTML -> Jangan lupa lakukan backup template :) -> kemudian beri tanda cek pada

'Expand Widget Templates' 

Kedua : 

Lihat kode dibawah ini:

<b:include data='post' name='post'/> 

Kemudian cari kode warna merah diatas, jika sudah ketemu ganti kode warna merah diatas dengan

kode dibawah ini :

<b:if cond='data:blog.homepageUrl != 

data:blog.url'>

<b:if cond='data:blog.pageType != "item"'>

Page 25: Panduan+Bikin+Blog+Dari+Ihsan Elektro

5/12/2018 Panduan+Bikin+Blog+Dari+Ihsan Elektro - slidepdf.com

http://slidepdf.com/reader/full/panduanbikinblogdariihsan-elektro 25/45

 

24

<a expr:href='data:post.url'>

<data:post.title/></a><br/><br/>

<b:else/>

<b:include data='post' name='post'/>

</b:if>

<b:else/>

<b:include data='post' name='post'/>

</b:if>

Ketiga : 

Jangan lupa disimpan dan lihat hasilnya. selamat mencoba :)

Cara menampilkan halaman lain di blog

Bingung gimana caranya buat halaman situs lain di blog kita. Nah ni saya dapet jawabannya di

situs www.o-om.com. Semoga bisa membantu..

"oya om gimana cara bikin "preview page" web lain di blog kita?"

Pertanyaan diatas disampaikan salah satu sahabat blogger di shoutbox, yaitu bagaimana

menampilkan halaman lain di blog kita, biasanya ini dinamakan Document Viewer. Gunanya

buat apa om? *sambil garuk-garuk kepala* buat apa ya? mungkin buat aksesoris tambahan aja.

Menurut om kayaknya aksesoris ini gak terlalu berguna selain itu juga bikin lambat loading

page. Namum tidak ada salahnya kita mencoba membuat Document Viewer ini sekalian aja buat

nambah ilmu untuk belajar koding :)

Agar gak bingung kita lihat gambar dibawah:

Contoh tampilan tab document viewer.

Page 26: Panduan+Bikin+Blog+Dari+Ihsan Elektro

5/12/2018 Panduan+Bikin+Blog+Dari+Ihsan Elektro - slidepdf.com

http://slidepdf.com/reader/full/panduanbikinblogdariihsan-elektro 26/45

 

25

Halaman yang kita buat nantinya merupakan Tab Dokumen Viewer, setiap tab akan

mempunyai link tersendiri yang bisa kita modifikasi.

Ikuti langkah dibawah ini: 

LANGKAH I. 

Buka Template -> Edit HTML -> masukan kode CSS dibawah diantara kode CSS yang ada

pada coding blogger kita, biasanya di antara code <head>....</head> 

 /*Eric Meyer's based CSS tab*/ 

#tablist{

padding: 3px 0;

margin-left: 0;

margin-bottom: 0;

margin-top: 0.1em;

font: bold 12px Verdana;}

#tablist li{

list-style: none;

display: inline;

margin: 0;

}

#tablist li a{

text-decoration: none;

padding: 3px 0.5em;

margin-left: 3px;

border: 1px solid #778;

border-bottom: none;

background: white;

}

#tablist li a:link, #tablist li a:visited{

color: navy;

Page 27: Panduan+Bikin+Blog+Dari+Ihsan Elektro

5/12/2018 Panduan+Bikin+Blog+Dari+Ihsan Elektro - slidepdf.com

http://slidepdf.com/reader/full/panduanbikinblogdariihsan-elektro 27/45

 

26

}

#tablist li a:hover{

color: #000000;

background: #C1C1FF;

border-color: #227;

}

#tablist li a.current{

background: lightyellow;

LANGKAH II 

Kemudian masukan lagi kode javacript dibawah ini diantara code <Body>....</Body> 

<script type="text/javascript">

 /***********************************************

* Tabbed Document Viewer script- © Dynamic Drive DHTML code library

(www.dynamicdrive.com)

* This notice MUST stay intact for legal use

* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code

***********************************************/ 

var selectedtablink=""

var tcischecked=false

function handlelink(aobject){

selectedtablink=aobject.href 

tcischecked=(document.tabcontrol && document.tabcontrol.tabcheck.checked)? true : false

if (document.getElementById && !tcischecked){

var tabobj=document.getElementById("tablist")

var tabobjlinks=tabobj.getElementsByTagName("A")

for (i=0; i<tabobjlinks.length; i++)

tabobjlinks[i].className=""

aobject.className="current"

document.getElementById("tabiframe").src=selectedtablink 

return false

}

else

return true

}

Page 28: Panduan+Bikin+Blog+Dari+Ihsan Elektro

5/12/2018 Panduan+Bikin+Blog+Dari+Ihsan Elektro - slidepdf.com

http://slidepdf.com/reader/full/panduanbikinblogdariihsan-elektro 28/45

 

27

function handleview(){

tcischecked=document.tabcontrol.tabcheck.checked

if (document.getElementById && tcischecked){

if (selectedtablink!="")

window.location=selectedtablink 

}

}

</script> 

Jika sudah jangan lupa di simpan.

LANGKAH III 

Buka Template -> Element Halaman -> Tambahkan sebuah Elemen Halaman -> Lakukan

Copy-Paste Kode dibawah ini -> kemudian simpan dan lihat hasilnya.

<ul id="tablist"> 

<li><a class="current" href="http://www.o-om.com" onClick="return handlelink(this)">O-

om's Blog</a></li> 

<li><a href="http://www.google.com" onClick="return handlelink(this)">Google</a></li>

<li><a href="http://www.yahoo.com" onClick="return handlelink(this)">Yahoo</a></li>

<li><a href="http://www.msn.com" onClick="return handlelink(this)">MSN</a></li>

<li><a href="http://www.news.com" onClick="return handlelink(this)">News.com</a></li>

<li><a href="http://www.dynamicdrive.com" onClick="return handlelink(this)">DynamicDrive</a></li> 

</ul>

<iframe id="tabiframe" src="http://www.o-om.com" width="98%" height="350px"></iframe>

<form name="tabcontrol" style="margin-top:0">

<input name="tabcheck" type="checkbox" onClick="handleview()" value="ON"> Open tab

links in browser window instead.

</form> 

URL yang berwarna biru bisa kita ganti sesuai dengan keinginan.

URL yang berwarna pink merupakan alamat yang akan ditampilkan pertama kali

Cara menambahkan Alamat: 

Untuk menambahkan halaman kita tinggal menambahkan kode dibawah ini dibawah code warna

merah diatas :)

Page 29: Panduan+Bikin+Blog+Dari+Ihsan Elektro

5/12/2018 Panduan+Bikin+Blog+Dari+Ihsan Elektro - slidepdf.com

http://slidepdf.com/reader/full/panduanbikinblogdariihsan-elektro 29/45

 

28

<li><a href="http://Alamat URL" onClick="return handlelink(this)">Nama URL</a></li> 

Sumber : http://www.dynamicdrive.com/dynamicindex3/tabdocviewer.htm  

Membuat tips of the day  

Tips of the day merupakan tips singkat yang akan disampaikan kepada pengunjung seriap hari,

Tips ini bisa berisi apa saja, bisa berupa Tips Bisnis, Tips memasak, Tips merawat mobil, Tips money

online, Tips bercinta, Tips cakepin muka atau apalah terserah. Sebenarnya Tips of the day disini

cuman istilah saja...tips yang akan kita buat nanti bukan disampaikan setiap hari melainkan tips ini akan

berganti ketika pengunjung melakukan refresh atau reload pada halaman blog.

Memangnya Tips of the day ini berguna? Ya itu siy tergantung selera masing-masing orang,

kalau saya siy ga pake soalnya bingung mau ngasih tips apa (saya siy lebih cocoknya dikasih tips…). Selain

berguna menampilkan informasi singkat, coba bayangkan ketika kamu hanya ingin memposting artikel

yang pendek misalkan hanya 250 karakter..masa mau dipaksa dipanjang-panjangin khan malah terlihat

aneh, disinilah untungnya memasang Tips of the day. Pengen tau cara buatnya...

Niy contohnya..

Untuk kodenya bisa kamu pelajari script dibawah ini: 

<a href="http://www.o-om.com">

<img border="0" style="float:left; margin:0 5px 5px 0;cursor:pointer; cursor:hand;" alt="http://www.o-

om.com" src="http://www.geocities.com/oom_directory/tipsOftheday.gif "/></a>

<font color="#333333"><b>Did You Know...</b>

<script language="JavaScript">

//store the quotations in arrays

tips = new Array(5);

tips[0] = "<i>tips bla bla bla 1</i>";

tips[1] = "<i>tips bla bla bla 2</i>";

tips[2] = "<i>tips bla bla bla 3</i>";

tips[3] = "<i>tips bla bla bla 4</i>";

Page 30: Panduan+Bikin+Blog+Dari+Ihsan Elektro

5/12/2018 Panduan+Bikin+Blog+Dari+Ihsan Elektro - slidepdf.com

http://slidepdf.com/reader/full/panduanbikinblogdariihsan-elektro 30/45

 

29

tips[4] = "<i>tips bla bla bla 5</i>";

//calculate a random index

index = Math.floor(Math.random() * tips.length);

//display the quotation

document.write("\n");

document.write(tips[index]);

//done

</script>

</font>

<a href="javascript:location.reload(true)"> »»</a> 

<br/>

Sedikit penjelasan kode : 

Kode warna hijau merupakan text tips yang akan ditampilkan nantinya. 

Kode warna pink merupakan icon/logo dari tips, kamu bisa mengganti sesuai keinginan (caranya tinggal

arahkan saja alamat url dimana logo/icon kamu disimpan) 

Kode warna merah merupakan kode singkat untuk melakukan refresh atau reload halaman, ketika kode

ini di klik maka setiap halaman di refresh tips tersebut akan berganti secara otomatis (kode ini jangan di

modifikasi ya) 

Bagaimana Menambah Tips nya biar banyak? 

Lihat contoh kode diawah, ini berarti kamu hanya menampilkan 5 tips.

tips = new Array(5);

tips[0] = "<i>tips bla bla bla 1</i>";

tips[1] = "<i>tips bla bla bla 2</i>";

tips[2] = "<i>tips bla bla bla 3</i>";

tips[3] = "<i>tips bla bla bla 4</i>";

tips[4] = "<i>tips bla bla bla 5</i>";

Kalau pengen nambah 10 atau 100 tips tinggal tambahin aja script kodenya.

tips = new Array(10);

tips[0] = "<i>tips bla bla bla 1</i>";

tips[1] = "<i>tips bla bla bla 2</i>";

tips[2] = "<i>tips bla bla bla 3</i>";

tips[3] = "<i>tips bla bla bla 4</i>";

tips[4] = "<i>tips bla bla bla 5</i>";

Page 31: Panduan+Bikin+Blog+Dari+Ihsan Elektro

5/12/2018 Panduan+Bikin+Blog+Dari+Ihsan Elektro - slidepdf.com

http://slidepdf.com/reader/full/panduanbikinblogdariihsan-elektro 31/45

 

30

tips[5] = "<i>tips bla bla bla 1</i>";

tips[6] = "<i>tips bla bla bla 2</i>";

tips[7] = "<i>tips bla bla bla 3</i>";

tips[8] = "<i>tips bla bla bla 4</i>";

tips[9] = "<i>tips bla bla bla 5</i>";

Yang harus diingat jumlah tips dihitung dari 0 (nol) bukan dari angka 1.

Cara memasang pada blogger: 

Pilih Tempalate -> Elemen Halaman -> Tambahkan sebuah Elemen Halaman -> Copy-Paste kode script

nya -> simpan dan lihat hasilnya.

Membuat blog lebih expressive 

Selanjutnya kita akan mencoba membahas tentang "Bagaimana Cara Membuat

Postingan/Content Blog Agar Lebih Expressive. Maksudnya apa niy? Begini lho, jika di layanan Blog lain

semisal Wordpress, setiap kita mengetikkan tanda ini :) maka yang muncul adalah gambar ini , kalo

tanda ini :p maka yang muncul gambar ini dan lain-lain . Nha dengan adanya gambar-gambar itu

akan membuat blog kita menjadi lebih expressive. Sayangnya bagi kita yang memakai layanan di Blogger 

tidak mendapat fasilitas tersebut. Tapi tenang saja, dalam artikel kali ini kita akan mencoba membahas

bagaimana supaya bagi kita yang memakai layanan Blogger bisa seperti yang ada di Wordpress.

Langkahnya cukup mudah, yuppsss….. 

1.  Login ke blogger trus pilih Template -->> Edit HTML 

2.  Beri tanda centang pada jawaban yang benar, eh, maksudnya pada Expand Widget Templates 

3.  Cari kode ini ]]></b:skin> (letaknya kira2 di bagian tengah posisi kiri)

4.  Masukkan script di bawah ini persis dibawah kode ]]></b:skin> 

<script src='http://kendhin.890m.com/smile/smile.js' type='text/javascript'/> 

Jangan lupa disimpan, next kalau kita ingin mencobanya kita bisa memulainya lewat postingan

yang baru dengan memasukkan kode-kode yang sudah disediakan. Kalo gagal dicoba lagi, kalo masih

gagal ya coba sekali lagi, kalo masih gagal lagi ya mengkin servernya lagi down atau itu emang karena

kamu kurang beruntung, kalo masih gagal gagal lagi, udah ah bosen ngomong gagal mulu .

Page 32: Panduan+Bikin+Blog+Dari+Ihsan Elektro

5/12/2018 Panduan+Bikin+Blog+Dari+Ihsan Elektro - slidepdf.com

http://slidepdf.com/reader/full/panduanbikinblogdariihsan-elektro 32/45

 

31

Berikut ini adalah beberapa standar kode smile yang bisa digunakan :

:) --> :D --> :$ --> :z --> :p --> ;) -->

:k --> :@ --> :# --> :x --> :o --> :L -->

:O --> :r --> :y --> :t --> :d --> :c -->

:s --> :~ --> :v --> :f --> :( -->

O ya sebagai catatan, sebelum mengetikkan kodenya, harus di spasi dulu.

Trik Memproteksi Blog dari Penjiplakan 

Mungkin bagi sebagian para pemilik blog sering kali jengkel jika melihat artikel-artikel yang

dibuatnya dengan memeras otak (emangnya cucian) tiba-tiba sudah ada di tempat blog milik orang lain,

apalagi kalo disitu tidak disebutkan sumber asli dari artikel tersebut, pasti orang tersebut akan bilang

"BRENGSEK” dan sumpah serapah yang lain (apa aja ya kata sumpah serapah? aku taunya cuma itu

doang, aku kan selalu ngomong yg baik2 jadi nggak tahu kata-kata kotor..hooooeeeekkkkk..). Tapi

mungkin bagi sebagian orang lagi sih nggak mempermasalahkannya, entah artikelnya diambil kek, di

copy kek, di cekek kek "No Problem". Nha, kamu termasuk golongan yang mana nih? yang Protectif atau

yang Cuekif (bahasa mana tuh "Cuekif"). Kalo kamu termasuk yang yang Protectif alias golongan orang

yang artikelnya nggak mau dicuri orang, sini ikut saya , tak tunjukin jalan menuju sorga, eeh, maksudnya

cara melakukannya. Udah berdebar-debar ya? nggak sabar nunggu ya? ya udah deh ini dia Tips dan Trikuntuk memproteksi artikel dari pencurian...

Pertama-tama kita panjatkan puja dan puji sukur kita kepada Tuhan YME. Walah malah pidato.

Langsung aja deh. Pertama-tama kita panjatkan, walah kok itu lagi sih. Pertama-tama kita analisa dulu,

biasanya kalo mau nyuri artikel kan ada beberapa cara nih, mulai dari menyeleksi tulisan yang mau

dicuri kemudian di copy-paste. Atau melihat "Source Code"nya dengan meng-klik kanan dan lain-lain.

Ada beberapa cara untuk mengatasi masalah tersebut, mulai dari cara yang mudah sampai cara yang

sulit. Nha untuk Tips dan Trik kali ini kita akan mencoba menggunakan cara yang mudah saja, tapi ingat,

cara ini hanya efektif untuk menghadapi maling kelas teri, jadi nggak akan mempan menghadapi para

penjahat kelas kakap yang sudah banyak makan asam garam dunia internet (emangnya enak makan

asam ama garam?). Tapi lumayan kan untuk berjaga jaga dari maling-maling kelas teri. Nha berikutadalah triknya...

Copy script dibawah ini kedalam body kamu (lho? kok kedalam body sih?), maksudnya kedalam

tag <body .....

begini detail caranya:

pertama login dulu ke blogger, terus pilih Layout --> Edit HTML

cari kode ini <body> letaknya kira-kira di tengah bagian kiri, dan biasanya setelah kode </head> . perlu

diperhatikan bahwa di dalam kode html terdapat banyak tulisan "body", jangan salah memilih body

Page 33: Panduan+Bikin+Blog+Dari+Ihsan Elektro

5/12/2018 Panduan+Bikin+Blog+Dari+Ihsan Elektro - slidepdf.com

http://slidepdf.com/reader/full/panduanbikinblogdariihsan-elektro 33/45

 

32

kalo sudah ketemu letakkkan script ini didalamnya

onmousedown="return false" oncontextmenu="return false" onselectstart="return false"

contohnya kayak gini nih

<body onmousedown="return false" oncontextmenu="return false" onselectstart="return false" >

Nha, script diatas untuk memproteksi agar text yang ada tidak bisa di seleksi untuk dicopy, dan

 juga tidak bisa di klik kanan.

Trus bagaimana kalo kalo pencurinya lihat source code kita lewat menu-menu yang ada di web

browser? misalnya yang pake Mozilla dengan cara Klik View -->> Page Source atau dengan menekan

Ctrl+u. Nha untuk menakali masalah ini kita kita pakai cara licik aja, yaitu dengan menurunkan script

html kebawah, caranya gimana tuh?

Begini, taruh kursor/pointer ke atas tag <head> (letaknya dibagian atas), trus tekan enter 

sampai kira-kira 70 kali. Nha kalo pencurinya melihat source code kita, dia hanya akan melihat kode

kepala dari html kita, sedangkan isi dari blog kita kan udah turun ke bawah, tul ga?

Tapi ingat sekali lagi, ini hanya untuk pencuri kelas teri, walaupun diproteksi secanggih apapun,

NOTHING IS SECURED, pasti tetap aja ada orang yang akan bisa membongkarnya, tapi kan setidaknya

kita berjaga-jaga, ya tho?

Monggo di jajal..(halah pake bahasa jawa, padahal ra’ mudeng) 

Page 34: Panduan+Bikin+Blog+Dari+Ihsan Elektro

5/12/2018 Panduan+Bikin+Blog+Dari+Ihsan Elektro - slidepdf.com

http://slidepdf.com/reader/full/panduanbikinblogdariihsan-elektro 34/45

 

33

BAB III

Bab ini berisi tentang hal-hal seputar blog misalnya seperti mempersingkat nama domain blog,

bagaimana memback-up blog kita, dan yang ga kalah pentingnya bagaimana cara agar tampilan blog kita

itu terlihat profesional..hehehe. Gimana?! Dah ga sabar lagi khan?! Yukks langsung dibaca aja tuh

artikel-artikel di bawah ini.

Blogger Backup and Restore with BlogBackupOnline. 

Proses backup data blogger anda tetap menjadi hal yang harus diperhatikan. Nha, disini saya

akan menjelaskan backup data blog menggunakan layanan  BlogBackupOnline. BBO merupakan proses

backup online terbaik menurut saya selama ini, Layanan ini memberikan kita space 50 MB secara cuma-cuma. Terlalu kecil? Tentu saja tidak, karena kebanyakan blog space-nya tidak sampai 1 MB, gratis lagi !

layanan ini juga support pada beberapa layanan blog diantaranya Blogger, Wordpress, Life Jurnal,

Windows Life Space

3 langkah mudah melakukan backup pada layanan BlogBackupOnline

1.Sign Up

Lakukan pendaftaran atau registrasi dengan memasukan nama user, password dan email anda. Jika

sudah buka alamat email anda untuk proses confirmasi. Kemudian lakukan proses login seperti biasa.

Daftar sekarang juga disini 

2. Register blog yang akan di backup

Cara melakukan register cukup klik "add new blog to backup" masukan URL alamat blog anda kemudian

klik "Register blog".

3. Klik "Manage" untuk proses setting backup

  Tab Info : Merupakan tab informasi status blog anda, pada tab ini anda bisa melakukan proses

hapus blog, melakukan setting pada media file atau anda dapat memasukan alamar url rss feed

blog yang akan dibackup

  Tab Content : Merupakan informasi dimana anda dapat melihat informasi data posting dan

komentar yang dibackup

  Tab Backup : Disini anda bisa melakukan configurasi, ada dua pilihan yang bisa digunakan yatiu

full backup dan daily backup (Backup Harian)

  Tab Restore : Restore merupakn proses mengembalikan data. anda tinggal memasukan alamat

blog anda kemudian ikuti intruksi yang anda.

  Tab blog : Merupakan informasi atau catatan dari proses backup blog anda

Page 35: Panduan+Bikin+Blog+Dari+Ihsan Elektro

5/12/2018 Panduan+Bikin+Blog+Dari+Ihsan Elektro - slidepdf.com

http://slidepdf.com/reader/full/panduanbikinblogdariihsan-elektro 35/45

 

34

  Tab Export : Pada tab ini anda bisa menyiman data yang telah di backup pada komputer anda.

caranya tinggal klik "Download Export File" simpan ditempat yang aman.

  Tab Dasboard : infomasi dari alamat blog anda yang akan di backup

Sekarang blog anda telah siap dibackup secara full atau daily (harian) tergantung setting yang anda

gunakan pada layanan tersebut. Semoga artikel ini cukup membantu.thanks

Mendaftarkan blog ke Search Engine 

Banyak cara agar blog/situs kita dikenali search engine, cara yang paling praktis adalah dengan

menggunakan auto web submit. Ada banyak layanan gratis yang menyediakan layanan untuk

pendaftaran, kamu bisa mencarinya sendiri di search engine atau tanyakan aja ke om google.

Untuk memudahkan dalam mendaftar ke Search engine, saya sarankan pada ente semmuanya untukmenggunakan layanan mypagerank. Layanan dari mypagerank ini akan memudahkan kita mendaftarkan

blog/situs ke search engine seperti dibawah:

  www.google.com 

  www.searchengine.com 

  www.infotiger.com 

  www.scrubtheweb.com 

  www.searchuk.com 

  www.entireweb.com 

  www.maxpromo.com 

  www.aesop.com 

  www.whatuseek.com 

  www.splatsearch.com 

  www.walhello.com 

  www.acoon.de 

  www.szukacz.pl 

  www.daypop.com 

  www.fybersearch.com 

  www.biveroo.de 

  www.infoseek.co.jp 

  www.yandex.ru 

  www.amfibi.com 

  www.bigfinder.com   www.metawebsearch.com 

  www.jayde.com 

  www.cipinet.com 

  www.infotiger.com 

  www.websquash.com 

  www.Search-o-rama.com 

  www.unasked.com 

Page 36: Panduan+Bikin+Blog+Dari+Ihsan Elektro

5/12/2018 Panduan+Bikin+Blog+Dari+Ihsan Elektro - slidepdf.com

http://slidepdf.com/reader/full/panduanbikinblogdariihsan-elektro 36/45

 

35

  www.uk.abacho.com 

  www.mixcat.com 

Untuk mendaftarkan blog/situs ente klik  disini. Saya tidak menjamin dalam waktu cepat situs

anda akan terdaftar, semua ini tergantung dari bagaimana semua search engine diatas meng-index

halaman blog/situs anda

Mempersingkat Nama Domain Blog Jika kita membuat blog secara gratis, baik di blogger atau di wordpress kita akan memperoleh

nama/domain blog kita seperti ini http://blabla.blogspot.com atau http://blabla.wordpress.com. Bagi

yang punya banyak uang mungkin bisa langsung membayar dan bisa memiliki nama domain dot.com.

Namun bagi kita yang miskin ini pasti malas jika harus merogoh uang jajan kita demi mendapatkan

domain yang lebih simple yaitu http://blabla.com. Tapi jangan khawatir bos, saya punya tips menariksupaya nama web/blog kita menjadi lebih pendek, dan juga tidak perlu bayar. mau tahu caranya?

Ada beberapa layanan di internet yang yang bisa mempersingkat nama domain blog kita. Disini akan

saya sebutkan tiga saja yang menjadi favorit saya, karena selain gratis, cara daftarnya juga gampang, dan

tidak ada iklannya. Berikut ini adalah layanannya:

1. co.cc nama blog kita akan menjadi http://nama.co.cc  

2. co.nr nama blog kita akan menjadi http://nama.co.nr  

3. uni.cc nama blog kita akan menjadi http://nama.uni.cc  

Nha jadi lumayan pendek kan? mau tahu caranya? gampang kok, tinggal kunjungi situs tersebut terus

daftarkan web/blog kita. Pengen dijelasin caranya? OK deh kali ini saya akan menjelaskan satu aja yang

menjadi paling favorit saya dari ketiga layanan tersebut yaitu co.cc 

1.  Buka website ini http://co.cc maka tampilannnya akan seperti ini

Page 37: Panduan+Bikin+Blog+Dari+Ihsan Elektro

5/12/2018 Panduan+Bikin+Blog+Dari+Ihsan Elektro - slidepdf.com

http://slidepdf.com/reader/full/panduanbikinblogdariihsan-elektro 37/45

 

36

2.  Isikan nama domain untuk blog/web kamu sesuai yang kamu inginkan di kotak yang disediakan,

terus klik tombol cek 

3.  Jika domain yang kamu minta ternyata sudah dimiliki orang lain maka kamu akan diminta

memasukkan kembali nama dimain yang lain, namun jika belum ada yang punya maka kamu isalangsung mendaftarkannya denagn meng-klik tombol Register Now lalu kil tombol Sign Up 

4.  Setelah itu akan muncul form pendaftaran, isilah form tersebut trus klik tombol Submit 

5.  Jika berhasil maka akan muncul halaman baru lagi, lalu klik tombol Set up Domain, trus muncul

lagi halaman baru dan klik pada tombol Please Set up 

6.  Kemudian isikan alamat blog kamu, misalnya http://ihsan-elektro.blogspot.com pada kotak

Target URL dan isikan title dari blog kamu pada kotak Title 

7.  Jika kamu pingin nama asli blog kamu tidak kelihatan di addressbar maka klik pada link URL

Hiding 

8.  Jika sudah lalu klik tombol Setup Domain 

9.  Web/blog kamu akan diperiksa dulu oleh tim dari co.cc. masa tunggunya paling lama 24 jam, jika

sudah di approve atau disetujui maka kamu akan langsu bisa memakai nama domain kamu yang

baru.

Oh ya, domain yang lama masih tetep bisa di akses.

Trus, catatan lagi nih, disini tidak menerima website yang mengandung unsur pornografi, spam, dan

sesuatu yang ilegal.

Selamat Mencoba

Pasang Meta Tags di Blogger 

Meta tags merupakan cara menyampaikan infomasi penting ke search engine (Mesin Pencari)

mengenai informasi suatu halaman, Ada banyak meta tag sesuai dengan standar HTML 4.0 dari World

Wide Web Consortion, tapi sebenarnya yang betul-betul dipakai oleh search engine hanya 3,

description, keyword, dan robots. Mengenai penjelasan meta tags karena sudah terlalu banyak yang

menulis hal ini jadi saya pilih aja salah satu situs terbaik yang bisa dipercaya, informasi yang saya ambil

berasal dari alamat ini http://www.promosi-web.com/ (semua penjelasan tidak ada pengeditan

sebagaimana aslinya)

Meta Tag Description 

Meta tag description digunakan untuk memberikan gambaran umum mengenai isi dari halaman

web Anda. Ukurannya disarankan tidak lebih dari 200 karakter. Dan usahakan agar descriptionini bisa menjadi

kalimat-kalimat yang letaknya di awal halaman web page yang bersangkutan. Contoh penulisan

meta tag description adalah sebagai berikut :<meta name="description" content="Promosi-web.com is a search engine tutorial that explain

Page 38: Panduan+Bikin+Blog+Dari+Ihsan Elektro

5/12/2018 Panduan+Bikin+Blog+Dari+Ihsan Elektro - slidepdf.com

http://slidepdf.com/reader/full/panduanbikinblogdariihsan-elektro 38/45

 

37

how to get

top rangking in all major search engine and get high traffic for your web site. Available in

BahasaIndonesia."> 

Beberapa search engine seperti Nothern Light dan Google tidak memakai meta tags sebagaideskripsi hasil pencariannya. Yang mereka gunakan adalah kalimat-kalimat awal yang ada pada

halaman tersebut.

Itulah sebabnya kenapa saya sarankan agar Anda menggunakan isi dari meta tag description

sebagai kalimat pembuka. Dan jika bagian paling awal dari web Anda berupa sebuah menu,maka deskripsi yang

ditampilkan pada hasil pencarian Northern Light adalah seperti ini :

Home | Products and Service | Contact Us | About Us ...welcome to our online store, the best

place on theweb to... 

Meta Tag Keyword 

Meta tag keyword sangat penting keberadaannya, karena menentukan kata kunci apa yang bisamenemukan halaman web tersebut pada search engine. Sintak dasar dari meta tag keyword

adalah

sebagai berikut :<meta name="keywords" content="keyword1 keyword2 keyword3 ...">

atau ada juga yang menulis dengan pemisah tanda koma :

<meta name="keywords" content="keyword1, keyword2, keyword3, ...> 

Keduanya berfungsi sama dan tidak ada pengaruhnya pada search engine. Tujuan pemakaian

tanda koma agar keyword-keyword tersebut lebih mudah dibaca. Yang perlu diperhatikan disiniadalah janganmengulang sebuah kata lebih dari 3 kali, karena akan dianggap spamming. Contoh pemakaian

meta tag keyword yang salah adalah :

<meta name="keywords" content="bali, bali hotels, travel in bali, bali island, bali weather> 

Disini terlihat sekali bahwa kata "bali", diulang lebih dari 3 kali. Contoh berikut ini tidak akan

dianggap spamming oleh search engine :<meta name="keywords" content="bali hotels travel bali island bali weather"> 

Yang tak kalah pentingnya mengenai keyword adalah jangan membuat keyword yang tidak ada

hubungannya dengan isi halaman web Anda. Hal ini juga akan dianggap spamming. Misalkan

web Andamemuat informasi mengenai pariwisata di Bali, jangan sekali-kali menambahkan "MP3" atau

"Britney Spears" sebagai keyword hanya karena keyword-keyword ini merupakan keyword

favorit di internet dan

banyak dicari orang.

Page 39: Panduan+Bikin+Blog+Dari+Ihsan Elektro

5/12/2018 Panduan+Bikin+Blog+Dari+Ihsan Elektro - slidepdf.com

http://slidepdf.com/reader/full/panduanbikinblogdariihsan-elektro 39/45

 

38

Meta Tag Robots 

Tujuan utama penggunaan meta tag robots adalah untuk menentukan halaman web yang mana

bisa diindex oleh spider dan halaman web mana yang tidak. Tag ini sangat berguna sekaliterutama jika seuatu

website memakai frame untuk navigasinya. Tentunya kita tidak ingin menampilkan menu-menu

dalam frame untuk dibaca oleh search engine. Format dasar dari meta tag robots adalah sebagaiberikut :

<meta name="robots" content="index | noindex | follow | nofollow"> 

Sebagai contoh, jika Anda ingin agar spider membaca main page, dan menelusuri semua link yang ada maka tambahkan perintah berikut ini :

<meta name="robots" content="index follow"> 

Dengan perintah ini spider akan meng-index main page Anda dan menjadwalkan untuk 

mengindex halaman-halaman lain yang bisa dicari melalui hyperlink (<a href="">).

Perintah berikut ini akan menginstruksikan agar spider tidak meng-index maupun menelusurilink yang ada pada suatu halaman web.

<meta name="robots" content="noindex nofollow"> 

Lalu bagaimana memasang Meta Tags di Blogger : 

Untuk memasang Meta tag diBlogger caranya cukup mudah, pertama masuk ke Edit HTML

kemudian copy paste kode dibawah ini, biasanya kode meta tags diletakan dibawah kode 

<title><data:blog.pageTitle/></title> dan jangan lupa merubah kode warna merah di bawahsesuai dengan deskripsi blog kamu.

<meta content=' Tulis deskirpsi disini' name='description'/><meta content='keyword1 keyword2 keyword3 ...' name='keywords'/>

<meta content='INDEX, FOLLOW' name='ROBOTS'/>

Selama Mencoba, Happy Blogging :)

17 Tips agar halaman blog tampil Profesional 

Artikel ini langsung saya copy dari situs bang o-om tanpa ada yang dirubah sama sekali. Then,

silahkan simak uraiannya yukk..

Penambahan widgets dan aksesoris pada halaman blog memang menyenangkan dan membuat

halaman blog akan terlihat sangat cantik. Tapi tahukah anda ada beberapa hal yang harusdihindari pada halaman blog anda agar terlihat lebih profesional. Kenapa tampilan halaman harus

Profesional? untuk menjawab hal ini sangatlah bervariatif yang jelas jawaban abstrak dari saya

Page 40: Panduan+Bikin+Blog+Dari+Ihsan Elektro

5/12/2018 Panduan+Bikin+Blog+Dari+Ihsan Elektro - slidepdf.com

http://slidepdf.com/reader/full/panduanbikinblogdariihsan-elektro 40/45

 

39

adalah masalah tampilan, anda tahu kan penampilan halaman dengan user interface yang baik 

adalah hal yang utama, apapun didunia ini pertama kali yang dilihat adalah penampilan jika

kesan pertama sudah tidak baik jelas akan berpengaruh buruk terhadap pengunjung blog anda.secara realita memang penilaian setiap orang bervariasi dan relatif tetapi tidak salah kan kita

mencoba menuju ke kearah kesempurnaan.

Masih ingat beberapa bulan yang lalu ketika saya baru pertama kali membuat blog. Banyak sekali widget dan aksesoris yang saya pasang pada halaman blog saya, setelah saya pikir-pikir

untuk apa semua itu jika tidak ada hubungan sama sekali dengan blog saya dan jangan pernah

berpikir bahwa tampilan blog saya Profesional karena mencapai tujuan tersebut sangatlah tidak mudah dan butuh waktu. untuk menjawab semua hal diatas saya akan berbagi tips bagaimana

menjadikan halaman blog anda terlihat lebih berisi dan terlihat profesional dan apa saja yang

harus dihindari pada halaman blog anda .

17 tips agar halaman blog terlihat lebih Profesional : 

1. Lakukan pengecekan halaman pada beberapa web browser yang berbeda: Tampilanhalaman anda begitu cantik di browser firefox tetapi belum tentu bagus di browser IE atau Opera

atau browser yang lain. Ingat pengunjung blog anda tidak hanya menggunakan satu browser saja.

untuk itu anda coba lakukan pengecekan dengan browser yang berbeda, misalkan : Firefox,

Flock, Mozilla, IE, Opera, Safari.

2. Pilihan warna pada blog : Pemilihan warna memang susah-susah gampang semuanya

tergantung selera pemilik blog. Jangan terlalu egois, pilih warna sesuai dengan tema blog anda.coba anda pikir jika blog anda tentang agama dengan pilihan warna hitam, terlihat janggal

bukan! kebanyakan warna hitam lebih cenderung ke situs yang bertemakan underground.

3. Hindari Memasang Jam : Tanyakan pada diri anda sendiri apa gunanya memasang jam diblog anda, jika hanya sebagai pengingat waktu atau untuk mempercantik halaman sebaiknya

tidak usah digunakan, apa gunanya jam pada taksbar windows. yang jelas bakal bikin load page

anda semakin berat.

4. Hindari pasang kalender : Apa gunanya kalender windows? orang butuh informasi dari blog

anda bukan ingin melihat kalender. sekedar informasi kalender yang saya maksud adalahkalender umum, beda dengan kalender yang menampilkan sebuah posting (biasanya banyak 

digunakan pengguna wordpress)

5. Hindari pasang jumlah pengunjung tetap: jika blog anda baru jangan gunakan jumlah

pengunjung (counter), ini akan berakibat penilaian yang buruk terhadap blog anda. walaupununtuk beberapa penyedia layanan counter menyediakan fasilitas untuk memanipulasi dan

menambah jumlah pengunjung secara manual, coba anda pikir blog yang baru dibuat sudahmencapai 100.000 pengunjung apa itu mungkin?.

6. Jangan memelas untuk meminta mengklik iklan : hindari kata "klik iklan dibawah ini" atau

bahasa apapun yang meminta pengunjung anda untuk mengklik iklan. sampai saat ini adabeberapa blog yang melakukan hal tersebut (maaf jika blog anda termasuk dalam hal ini) siapa

Page 41: Panduan+Bikin+Blog+Dari+Ihsan Elektro

5/12/2018 Panduan+Bikin+Blog+Dari+Ihsan Elektro - slidepdf.com

http://slidepdf.com/reader/full/panduanbikinblogdariihsan-elektro 41/45

 

40

sih didunia ini yang suka diperintah, Tanpa anda menyuruhpun pengunjung bakal mengklik iklan

tersebut jika dirasa berguna gai mereka.

7. Jangan memasang iklan yang berserakan : Iklan yang banyak memang sangat

menguntungkan, namun jangan sampai isi halaman anda hanya iklan dan iklan. Pasang iklan

sewajarnya saja dan tahukah anda pengunjung sangat risih dengan adanya iklan yang telihatmelebihi kapasitas dari isi halaman blog anda.

8. Hindari memasang lagu pada blog : Selain bikin halaman berat blog yang menampilkan

lagu agak terkesan tidak profesional dan maaf agak terkesan jaman dulu (jadul). Tidak masalah jika blog anda tentang musik atau blog personal tapi untuk blok bisnis kayanya kurang cocok.

9. Menampilkan status IP pengunjung : Blog anda bukan program spy khan?, jadi lebih baik 

tidak usah dipasang agar pengunjung tidak merasa dimata-matai.

10. Memasang widgets yang tidak ada hubunganganya dengan blog : Menambahkan widgets

memang menyenangkan tapi jika tidak ada hubungannya malah blog anda terkesan aneh.pasanglah widget sesuai dengan kebutuhan saja.

11. Jangan hanya Copy-Paste : Saya tidak melarang anda untuk melakukan Copy-Paste, jika

memang dilakukan sebaiknya perbaiki juga code scriptnya, hargai jerih payah penulissebenarnya karna jika hanya copy-paste tulisannya tidak bakal terlihat rapi dan kemungkinan

gambar yang diikutsertakan tidak bakal muncul.

12. Perhatikan tanda baca : Perhatikan tulisan anda apakah sudah benar tanda bacanya.

Kesalahan dalam titik koma saja akan berakibat mempunyai arti yang berbeda.

13. Jangan gunakan gambar yang besar : Gambar memang mempercantik halaman anda,gambar yang besar justru jadi bumerang buat loading page anda. yang jelas blog anda pasti akan

diabaikan untuk sementara waktu ketika loading page sedang berjalan.

14. Periksa Dead link : Link yang telah mati bakal tidak disukai pembaca, jangan kan pembaca

search engine pun tidak menyukai hal ini. Lakukan pengecekan dead link sesering mungkin,banyak tools di internet yang bisa melakukan tugas ini.

15. Jangan terlalu banyak memposting artikel orang lain : Ini akan mendapat respon buruk 

dari pembaca, karna pembaca akan lebih berpikir lebih baik membaca kesumbernya secara

langsung.

16. Selalu pasang nama sumber artikel : Blog yang profesional selalu menghargai jerih payah

orang lain, yang jelas memasang nama sumber tidak merugikan anda sedikitpun sebaliknya

penghargaan atas jerih payah orang lain itulah yang membuat anda terlihat lebih profesional.

17. Cara merespon komentar yang baik : Jangan pernah bersikap menggurui, hargai semua

komentar dengan bijak walau pun ada beberapa komentar yang menyebalkan. Ingat! blog tempat

Page 42: Panduan+Bikin+Blog+Dari+Ihsan Elektro

5/12/2018 Panduan+Bikin+Blog+Dari+Ihsan Elektro - slidepdf.com

http://slidepdf.com/reader/full/panduanbikinblogdariihsan-elektro 42/45

 

41

orang menuangkan semua ide dan pemikiran jadi semua orang pasti mempunyai pendapat yang

berbeda.

Sebagian tulisan diatas saya dapatkan dari beberapa sumber terpercaya dan sebagian lagi adalah

pemikiran saya pribadi berdasarkan pengalaman saya. Terima kasih pada Cosa Aranda tentang

sebagian tips terbaiknya.

Jika tidak sependapat dengan saya dan anda mempunyai pemikiran yang berbeda dapat

menuangkannya pada halaman komentar. Terima Kasih (oom)

Selesai..Gimana? Apakah blog kita seperti yang disebutkan di atas?? Akhir kata, Gut bye…. 

Page 43: Panduan+Bikin+Blog+Dari+Ihsan Elektro

5/12/2018 Panduan+Bikin+Blog+Dari+Ihsan Elektro - slidepdf.com

http://slidepdf.com/reader/full/panduanbikinblogdariihsan-elektro 43/45

 

42

PENUTUP

Akhirnya sampai juga di bab yang paling terakhir yaitu penutup. Di sini saya ga bakal banyak

bacot lagi. Intinya saya berharap dengan adanya e-book ini bisa menumbuhkan semangat pada yangmembacanya untuk juga ikut serta dalam dunia per-blog-ingan dan juga diharapkan dengan adanya

beberapa tutorial tentang blog di e-book ini bisa menghilangkan prasangka kita akan rumitnya ber-blog-

ing di dunia maya ini.

Sekian dan terima kasih… 

Page 44: Panduan+Bikin+Blog+Dari+Ihsan Elektro

5/12/2018 Panduan+Bikin+Blog+Dari+Ihsan Elektro - slidepdf.com

http://slidepdf.com/reader/full/panduanbikinblogdariihsan-elektro 44/45

 

43

DAFTAR PUSTAKA 

http://www.o-om.com 

http://trik-tips.blogspot.com 

http://www.promosi-web.com/ 

http://www.dynamicdrive.com/dynamicindex3/tabdocviewer.htm 

Page 45: Panduan+Bikin+Blog+Dari+Ihsan Elektro

5/12/2018 Panduan+Bikin+Blog+Dari+Ihsan Elektro - slidepdf.com

http://slidepdf.com/reader/full/panduanbikinblogdariihsan-elektro 45/45

 

44

BIOGRAFI

Muhammad Ikhsan Anshori (L2F007053) Lahir di Samarinda, 26 Desember 1989.

Telah menempuh pendidikan mulai dari TK Cendrawasih Samarinda, kemudianmelanjutkan ke SDN 018 Samarinda, SMPN 1 Samarinda, serta SMUN 10 “Melati”

Samarinda. Saat ini sedang melanjutkan pendidikan S1 Teknik Elektro Universitas

Diponegoro. Motto hidup “Santai Aja”  (dari kemarin bingung motto hidupnya apa,

  jadi ya pake ini aja..hehehe). Hobi saya bermain bola, gitar, ama ngeband

(walaupun ga bisa maen). Cita-cita (sebenarnya) ingin menjadi dokter tetapi karna

ini dah mustahil, jadi sekarang ane berkonsentrasi untuk menjadi seorang engineer

yang baik dan benar. Doain ya moga cepet lulus..Amin… O iye sekalian doain moga cepat dapet istri (ga

muluk-muluk, ku mintanya yang cakep & baik aja, hehehehe…) 

Untuk kritik dan saran bisa dikirimkan ke

Email : [email protected] 

Blog : http://www.anshori.uni.cc 

 NGE-BLOG  

`````YUKKKK !!!!!  (tulisannya apa hayo??)