Membuat website (blog) dengan blogspot

[MEMBUAT WEBSITE (BLOG) DENGAN BLOGSPOT]
by : as3pupun Page 2
MEMBUAT WEBSITE (BLOG)
DENGAN BLOGSPOT
oleh : as3pupun
Disclaimer : Segala sesuatu yang tercantum dalam ebook ini berlaku saat
ebook ini ditulis. Segala perubahan sangat mungkin terjadi sesuai
perkembangan blogspot dan ada kemungkinan contoh blog
link-linknya sudah berubah.

PENGANTAR
Segala puji bagi Alloh yang telah mengkaruniakan nikmat rizki dan
kesehatan sehingga ebook ini dapat terselesaikan.
Terima kasih saya ucapkan karena Anda telah mendownload ebook ini.
Semoga apa yang akan saya sampaikan dalam ebook ini membawa
manfaat yang besar bagi Anda.
Ebook ini akan menjelaskan kepada Anda bagaimana cara membuat
website (blog) secara gratis dan mengelolanya agar layak ditampilkan.
Ebook ini mencoba memandu anda dengan mengangkat situs saya
sendiri sebagai contoh kasus untuk kategori blog pribadi, profil
perusahaan dan toko online menggunakan blogspot.
Dengan mengikuti panduan dari ebook ini Anda juga bias membangun
website dan melakukan modifikasi terhadap website Anda sesuai
dengan keinginan. Yang penting Anda sudah tahu prinsip dasarnya,
maka Anda bias menciptakan website jenis apa pun sesuai keinginan
Anda.
Selamat membaca dan mempraktekan, semoga bermanfaat.

DAFTAR ISI
PENGANTAR ……………………………………………………………………………….. 3
DAFTAR ISI ………………………………………………………………………………….. 4
# PENDAHULUAN …………………………………………………………………….. 6
# CARA MEMBUAT BLOG DI BLOGGER …………………………………….. 7
# SETTING BLOGGER ……………………………………………………….………. 10
SETTING MENU DASAR …………………………………………..…………….. 10
SETTING MENU POS DAN KOMENTAR …………………………………… 14
SETTING MENU SELULER DAN EMAIL ……………………………………. 16
SETTING MENU BAHASA DAN PEMFORMATAN ……………………. 19
# CARA MEMPOSTING ARTIKEL ……………………………………………….. 21
# MEMBUAT BLOG PRIBADI …………………………………………………….. 24
MEMBUAT HALAMAN STATIS (PAGE) …………………………………… 24
1. Membuat Daftar Isi (Table of Content) ………………………….. 26
2. Membuat Halaman About Me ……………………………………….. 27
MEMBUAT POSTINGAN ……………………………………………………….. 28
1. Menggunakan Dropbox Untuk Simpan dan Share File …….. 28
2. Contoh Membuat Postingan …………………………………………… 30
MENGGANTI TEMPLATE BLOGSPOT …………………………………….. 32
1. Ganti Template dengan yang disediakan blogger ……………… 32
2. Ganti Template dengan template dari penyedia template .. 34
MENGATUR LAYOUT (TATA LETAK) BLOG …………………………….. 35
1. Menambahkan Favicon di Blogger ………………………………….. 35
2. Mengganti Header Blog ………………………………………………….. 37
3. Menambahkan Widget (Gadget) ……………………………………. 38
MENGEDIT TEMPLATE (FORMAT HTML) ……………………………….. 39
1. Menambahkan Menu-menu Utama ……………………………….. 40
2. Menambahkan Teks Selamat Datang di Halaman AwaL ….. 41
3. Menambahkan Breadcrumb …………………………………………… 42

# MEMBUAT WEBSITE PROFIL PERUSAHAAN ………………………….. 44
MENGGANTI TEMPLATE BLOG ………………………………………………. 45
1. Membuat Galeri Photo …………………………………………………… 45
2. Membuat Buku Tamu …………………………………………………….. 47
MENGATUR LAYOUT (TATA LETAK) BLOG ……….…………………….. 49
1. Menambahkan Favicon ………………………………………………….. 49
3. Menambahkan Facebook Fan Page Like Button Pada Blog .. 50
1. Edit Ukuran Header ……………………………………………………….. 52
2. Membuat Menu Utama (Drop Down Horizontal) …………… 53
3. Edit “Welcome to our website” ………………………………………. 55
4. Edit Social Profile ……………………………………………………………. 56
# MEMBUAT WEBSITE TOKO ONLINE …………..………………………….. 58
MENGGANTI TEMPLATE BLOG ………………………………………………. 59
MENGATUR TATA LETAK BLOG ……….………………………..………….. 59
1. Menambahkan Favicon ………………………………………………….. 59
3. Menambahkan Gadget Label …………………………………………. 60
4. Menambahkan Facebook Fan Page ………………………………... 60
1. Edit Ukuran Header ……………………………………………………….. 60
2. Edit Gadget Label (Kategori Produk) ……………………………… 61
3. Hapus Widget/Gadget di Bagian Footer ………………………. 61
CUSTOM DOMAIN DI BLOGSPOT ……………………………….……….. 62
1. Penyedia Jasa Domain Gratis ………………..……………………….. 63
2. Daftar dan Custom Domain www.dot.tk …………………………. 64
PENUTUP …………………………………………………………………………………….. 71

# PENDAHULUAN
Blog merupakan sigkatan dari “Web log” adalah salah satu aplikasi web
berupa tulisan-tulisan yang umum disebut sebagai posting pada
halaman web. Tulisan-tulisan tersebut seringkali diurut dari yang
terbaru dan diikuti oleh yang lama.
Pada awalnya, blog dibuat adalah sebagai catatan pribadi yang
disimpan secara online, namun kini isi dari sebuah blog sangat
bervariatif ada yang berisi tutorial ( contoh blog ini ), curhat, bisnis dan
lain sebagainya. Secara umum, blog tidak ada bedanya dengan website
pada umumnya yang ada di internet.
Flatform blog atau seringkali disebut dengan mesin blog dibuat
sedemikian rupa oleh para designer/programer penyedia blog agar
mudah untuk digunakan. Dulu, untuk membuat aplikasi web diperlukan
pengetahuan tentang pemrograman HTML, PHP, CSS dan lain
sebagainya, dengan blog semuanya menjadi mudah semudah
menyebut angka 1 2 3.

# CARA MEMBUAT BLOG DI BLOGGER
Salah satu penyedia blog gratis yang cukup populer saat ini
adalah blogspot (www.blogger.com), dimana ketika mendaftar anda
akan mendapatkan sub domain dari blogspot, contoh :
namabloganda.blogspot.com.
Kenapa harus membuat blog di blogger.com bukan pada situs penyedia
blog lainnya? Sebenarnya tidak ada keharusan untuk membuat blog di
blogger, namun ada banyak kelebihan yang dimiliki blogger di banding
dengan penyedia blog lain. Beberapa contoh kelebihan blogger di
banding yang lain yaitu mudah dalam pengoperasian sehingga cocok
untuk pemula, lebih leluasa dalam mengganti serta mengedit template
sehingga tampilan blog anda akan lebih fresh karena hasil kreasi
sendiri, custom domain atau anda dapat mengubah nama blog anda
dengan nama domain sendiri misalkan namabloganda.blogspot.com di
ubah menjadi namabloganda.com, sedangkan hosting tetap
menggunakan blogspot dan masih tetap gratis.
Perlu ditekankan dari awal bahwa internet itu sifatnya sangat dinamis,
sehingga mungkin saja dalam beberapa waktu kedepan panduan
blogger ini akan berbeda dengan apa yang tertulis pada ebook ini.
Untuk mengurangi hal yang tidak perlu di tulis, berikut cara membuat
blog di blogspot (blogger.com).
Membuat Email
Salah satu syarat yang harus dipenuhi dalam membuat blog adalah
anda memiliki alamat email yang masih aktif atau di gunakan. Jika anda
belum mempunyai alamat email, silahkan daftar terlebih dahulu di

gmail karena blogger adalah salah satu layanan dari Google maka
ketika mendaftar ke blogger sebaiknya gunakan email gmail.
Daftar Blog Di Blogger
1. Silahkan kunjungi http://www.blogger.com
2. Langsung login dengan menggunakan username serta
password gmail anda.
3. Klik “Lanjutkan ke Blogger”
4. Klik “Blog Baru”
5. Isilah formulir :
a. Judul : Isi dengan judul blog yang di inginkan.
b. Alamat : isi dengan alamat blog yang di inginkan. Ingat!
Alamat ini tidak dapat di edit setelah dibuat, apabila anda
ingin serius, pilihlah nama yang benar-benar anda inginkan.
c. Template : pilih template (tampilan blog) yang disukai (ini
dapat ganti kembali).
d. Lanjutkan dengan klik tombol “Buat blog!”.
e. Sampai disini blog anda telah berhasil di buat.

6. Untuk menghindari spam filter, sebaiknya anda langsung
posting sembarang saja. Klik tulisan “Mulai mengeposkan”.
7. Isi judul serta artikel. Akhiri dengan klik tombol “Publikasikan”.
8. Silahkan lihat blog anda dengan klik tombol “Lihat Blog”
9. Selesai.
Kini blog anda telah tercipta dan dapat di buka di berbagai belahan
dunia. Umumkan pada teman-teman anda bahwa anda kini telah
mempunyai blog.

# SETTING BLOGGER
Apabila baru membuat blog menggunakan blogger, maka langkah
pertama yang harus dilakukan adalah melakukan pengaturan atau
setting pada menu Setelan, baik itu menu Dasar, Pos dan Komentar,
Seluler dan Email, Bahasa dan Pemformatan, Preferensi penelusuran,
dan Lainnya.
SETTING MENU DASAR
Untuk melakukan setting menu dasar, berikut adalah langkah-
langkahnya :
1. Silahkan login ke blogger dengan ID anda Klik menu Dropdown,
lalu klik Setelan
2. Umumnya anda akan langsung berada pada dashboard menu
Dasar, namun apabila belum, klik sub menu Dasar.

3. Pada menu dasar ini anda dapat melakukan pengaturan sesuai
dengan yang diinginkan.
Judul
Ini adalah fitur untuk mengatur judul blog anda. Klik Edit untuk
melakukan perubahan. Contoh Judul blog : Cara membuat blog di
blogspot dan Wordpress
Ingat! Sebuah judul blog sangat penting dan berpengaruh besar
terhadap SEO, oleh karenanya buatlah judul yang menarik dan memuat
kata-kata yang kita targetkan.
Deskripsi
Ini adalah fitur untuk mengatur Deskripsi blog. Klik Edit untuk
melakukan perubahan. Contoh Deskripsi blog: Cara membuat blog

menggunakan blogspot, wordpress serta informasi seputar teknologi
terkini yang bisa anda akses secara gratis.
Sama halnya seperti judul blog, sebuah deskripsi sangat penting
untuk SEO. Buatlah sebuah deskripsi yang menarik yang mengandung
kata-kata yang kita targetkan agar kata-kata tersebut bagus pada
search engine.
Privasi
Ini adalah fitur untuk mengatur privasi. Klik Edit untuk melakukan
perubahan.
Fitur ini memberikan pilihan kepada anda apakah blog yang dibuat
boleh tercantum di list blogger serta search engine (google) atau
jangan. Bila blog anda adalah sebuah blog biasa dan boleh di konsumsi
oleh umum, maka atur agar bisa tercantum, namun bila blog private
maka atur agar tidak tercantum.

Alamat Blog
Ini adalah untuk mengatur alamat blog. Blog yang dibuat diblogger ada
dua pilihan alamat yang bisa anda pilih, yaitu menggunakan alamat
subdomain blogspot atau menggunakan domain sendiri. Misal, bila
menggunakan subdomain blogger, maka alamat blog
adalah http://namabloganda.blogspot.com, namun jika ingin
menggantinya dengan domain sendiri, maka alamat blog bisa
menjadi http://www.namabloganda.com
Penulis Blog
Ini adalah fitur untuk mengatur penulis blog (author). Sebuah blog
dapat mempunyai satu atau juga lebih dari satu orang penulis. Untuk
menambahkan penulis, klik tambahkan penulis, lalu tulis alamat email
penulis lain yang ingin anda undang.
Pembaca Blog
Ini adalah fitur untuk mengatur siapa saja yang dapat membaca blog
anda. Untuk melakukan perubahan, klikEdit. Disini ada 3 pilihan
yaitu Siapa Pun, Hanya Penulis blog dan hanya para pembaca berikut,
masing-masing telah terdapat keterangan lengkap.

SETTING MENU POS DAN KOMENTAR
Setelah melakukan setting pada menu dasar, selanjutnya adalah
melakukan setting pada menu pos dan komentar, klik menu Pos dan
komentar.
Tampilkan sebanyak mungkin
Fitur ini adalah untuk mengatur berapa jumlah posting yang ingin
ditampilkan pada halaman depan. Tulis jumlah yang diinginkan, contoh
: 7 posting.

Template Entri
Templat Entri memungkinkan kita memasukkan tulisan ataupun kode
HTML, agar tulisan atau kode HTMl tersebut otomatis muncul saat kita
membuat posting baru. Bila anda tidak memerlukannya, biarkan saja.
Tampilkan gambar dengan Lightbox
Ini berpengaruh kepada efek lightbox pada gambar yang berada dalam
posting apabila gambar tersebut di klik. Pilihan ini boleh dipilih Ya atau
Tidak.
Bagikan ke Google+
Biasanya saya memilih pilihan Ya agar setelah posting artikel bisa
langsung di share ke akun Google+
Lokasi Komentar
Ini untuk memilih tampilan form komentar. Pilihan yang sering
digunakan adalah Tersemat.
Siapa yang dapat mengomentari?
Anda dapat mengatur siapa saja yang dapat berkomentar pada blog
anda.
Moderasi komentar?
Komentar yang masuk tidak selalu harus langsung tampil, tapi bisa
anda moderasi terlebih dahulu apabila anda menginginkannya. Namun,
umumnya blog yang komentarnya di moderasi jarang ada yang
komentar.
Tampilkan verifikasi kata?
Komentar yang masuk terkadang bukan hanya datang dari orang,
namun script robot yang bisa berkomentar secara otomatis untuk

beberapa tujuan. Untuk mengurangi hal tersebut, kita dapat
memasang Verifikasi kata. Namun, umumnya kotak komentar yang
dipasangi verifikasi akan jarang di komentari oleh pengunjung blog
karena dirasa terlalu merepotkan.
Tampilkan Tautan Balik
Sebaiknya dipilih Sembunyikan, karena sering disalah gunakan oleh
pihak-pihak tertentu untuk mencari backlink gratis.
Pesan Formulir Komentar
Apabila anda ingin menyampai pesan pada orang yang berkomentar,
silahkan tulis disini karena tulisan tersebut akan tampil persis diatas
komentar sehingga nantinya akan dibaca oleh orang yang akan
berkomentar. Misal : Tolong komentarnya berhubungan dengan artikel
yang ada. Komentar yang mengarah ke tindakan spam akan di hapus
atau terjaring secara otomatis oleh spam filter.
Akhiri pengaturan dengan klik tombol Simpan setelan yang ada
disebelah kanan atas monitor. Selesai.
SETTING MENU SELULER DAN EMAIL
Tahukah anda bahwa untuk mempublikasikan artikel ke blog tidak
selalu harus melalui dashboard blogger, namun bisa juga menggunakan
hand phone atau email. Yang anda perlukan hanyalah melakukan
pengaturan pada menu Seluler and Email.
Berikut tampilan menu Seluler dan email :

Mempublikasikan entri menggunakan SMS/MMS
Klik Tambah perangkat seluler untuk menambahkan hand phone anda.
Akan muncul Kode verifikasi. Kirimkan kode tersebut dari hand phone
anda ke alamat go@blogger.com (MMS). Bila hand phone anda tidak
support MMS, kirimkan kode verifikasi ke 256447 (BLOGGR).

Mempublikasikan entri menggunakan email
Disini anda harus membuat sebuah alamat email rahasia, isilah form
yang kosong dengan kata rahasia yang anda inginkan. Misal :
jalanpintas. Ini akan menjadi sebuah alamat email rahasia, formatnya
seperti ini :
emailanda.katarahasia@blogger.com
Sebagai contoh karena tadi saya menggunakan kata : jalanpintas, maka
alamat email rahasianya adalah :
krtutorplus.jalanpintas@blogger.com
Untuk selanjutnya, apabila anda ingin membuat posting, buatlah
sebuah post kemudian kirim ke alamat email tadi.
Namun, anda perlu memilih opsi yang tersedia.
Segera publikasikan email : ini artinya apabila anda mengirimkan
posting ke alamat email rahasia yang tadi dibuat, maka secara otomatis
akan di publikasikan ke blog anda.
Simpan email sebagai draf entri : ini artinya apabila anda mengirimkan
post ke alamat email rahasia yang tadi dibuat, maka posting tersebut
tidak langsung di publikasikan namun di simpan pada post draft. Bila
anda ingin mempublikasikan post draft tersebut, anda harus login ke
blogger dan publish secara manual.
Dinonaktifkan : ini artinya fitur post dari email di nonaktifkan.

Email Pemberitahuan Komentar
Isi form yang ini dengan alamat email yang diinginkan, apabila ada yang
berkomentar, maka akan di kirim pemberitahuan.
Email entri ke
Ini semacam Carbon copy (CC), jadi apabila anda posting akan otomatis
di kirim ke alamat email tersebut.
Klik Simpan setelan untuk menyimpan pengaturan.
Bila anda kurang begitu faham dengan penjelasan di atas, klik link video
tentang Mobile blogging berikut :
http://www.youtube.com/watch?feature=player_embedded&v
=hSa3a56G3-g
SETTING MENU BAHASA DAN PEMFORMATAN
Blogger mendukung banyak bahasa di dunia, kita dapat memilih bahasa
yang digunakan diblog agar mudah di mengerti. Untuk mengubah
bahasa, kita hanya mengaturnya pada menu bahasa dan pemformatan.

Bahasa
Pilih bahasa yang anda ingin gunakan. Misal: Indonesia
Aktifkan transliterasi
Ini adalah untuk mengaktifkan transliterasi pada saat melakukan
posting. Contoh untuk transliterasi ke arab, hindi dan lain-lain. Bila
anda tidak memerlukannya, pilih Dinonaktifkan.
Zona Waktu
Pilih zona waktu yang anda inginkan. Misal : GMT+7:00 Jakarta
Format Header Tanggal
Ini untuk mengatur tampilan tanggal
Format Timestamp
Ini untuk mengatur tampilan Timestamp
Format Stempel Waktu Komentar
Ini untuk mengatur tampilan Timestamp komentar
Akhiri pengaturan dengan klik tombol Simpan setelan yang ada
disebelah kanan atas monitor.

# CARA MEMPOSTING ARTIKEL
Bagi anda yang mengalami sedikit kendala tentang tata cara
memposting suatu artikel kedalam blog, maka kali ini akan di bahas
tentang tata cara posting di blogger.com. Di dalam menu posting ada
beberapa toolbar yang bisa anda gunakan. Jika anda sudah terbiasa
menggunakan microsoft Word ataupun microsoft Excel tentu
barangkali tidak akan mengalami kesulitan ketika memposting suatu
artikel, tapi mungkin tidak ada salahnya bila saya bahas sekilas tentang
ini, barangkali ada di antara teman kita yang masih bingung.
Toolbar yang ada ketika posting :
Untuk merubah jenis huruf yang di gunakan
Untuk merubah ukuran huruf (heading)
Untuk merubah style huruf
Untuk menebalkan (B), memiringkan (I), dan
menggaris bawah (U) huruf
Untuk mencoret huruf
Untuk merubah warna huruf
Untuk merubah warna background huruf
Untuk membuat link

Berurutan: untuk memyisipkan gambar, video,
dan terakhir untuk memotong kalimat
postingan yang tampil di halaman utama.
Untuk membuat rataan artikel (rata kiri,
tengah, kanan, dan rata kiri-kanan)
Untuk membuat sub bahasan oleh angka
Untuk membuat sub bahasan oleh bullet
Untuk memasukan kutipan
Untuk mereset setting postingan
Untuk membuat artikel dalam kode HTML
Untuk membuat artikel dalam mode Compose
(biasa)
Untuk me review (melihat) artikel
Cara penggunaan toolbar di atas adalah blok (beri tanda) terlebih
dahulu tulisan yang akan di edit, kemudian tekan tombol toolbar yang
di inginkan.
Langkah-langkah dalam memposting suatu artikel:
1. Sebaiknya klik terlebih dahulu “Edit HTML”, jika langsung di
mode “Compose”, sering terjadi hang pada komputer
(pengalaman saya pribadi). Copy artikel yang telah anda buat

sebelumnya, kemudian paste di area posting. Edit sesuai
dengan kemauan anda.
2. Klik tombol “compose“ untuk melakukan editing (jika anda
masih bingung dengan kode HTML).
3. Klik tombol tool yang berlambang “ panorama” berwarna biru,
jika anda ingin memasukan gambar ataupun photo untuk
menghiasi posting-an anda.
4. Klik “Label” jika ingin membuat kategori postingan.
5. Klik tombol “ Preview “ untuk melihat hasil posting-an anda
yang nantinya akan tampil di dalam blog, barangkali masih ada
yang perlu di edit.
6. Klik tombol “Publish “. Selesai. Tulisan hasil karya anda akan
bisa dilihat dan di baca oleh seluruh dunia.
Untuk lebih mempermudah penguasaan
blogspot, selanjutnya akan disajikan
dalam pembuatan blog secara langsung.

# MEMBUAT BLOG PRIBADI
(contoh pembuatan blog : punpage.blogspot.com)
Untuk mengurangi hal yang tidak perlu langsung saja ke topik bahasan.
Blog pribadi saya terdiri dari 4 (empat) menu utama, seperti gambar di
bawah ini :
Setelah membuat dan melakukan setting pada blog pribadi saya
(punpage.blogspot.com), selanjutnya mari kita mulai dari membuat
halaman untuk Table of Content dan About Me.
MEMBUAT HALAMAN STATIS (PAGE)
Page/Laman adalah suatu halaman yang bersifat mandiri dan dapat
kita atur sendiri sesuai keinginan kita. Laman Berbeda dengan Halaman
Posting, Laman pada blog tidak terbatas dengan waktu. Maksudnya,
Laman ini tidak muncul di dalam Beranda atau home yang berurutan
seperti pada halaman posting.
Perbedaa Laman (Halaman Statis) dengan Halaman posting, jika pada
halaman posting, setiap kita selesai mempublikasikan artikel terbaru
maka artikel tersebut akan muncul di halaman beranda, dan jika kita
buat lagi, maka artikel sebelumnya akan tergeser ke bawah begitu
seterusnya.
Nah, Maka dari itu, dapat saya simpulkan, Halaman statis ini pada
penerapannya lebih tepat digunakan untuk memuat informasi
Home
Self Publishing Table of Content About Me

mengenai About Me, Contact Us, Sitemap, Privacy Policy dan informasi
lainnya.
Langkah-langkah membuat page sebagai berikut :
a. Klik menu Pages/Laman
b. Lalu buatlah Page/Halaman baru dengan memilih Blank
Page/Laman Kosong.
c. Lalu Anda akan di bawa ke halaman editor artikel. dan isilah
dengan informasi yang ingin anda muat seperti yang telah
dijelaskan diatas, jangan lupa beri judul. Setelah selesai,
Publikasikan Laman anda.
d. Setelah dipublikasikan, di halaman Laman akan muncul list
halaman yang sudah anda buat tadi.

Nah, untuk melihat laman yang sudah anda buat tadi, anda tinggal klik
"Lihat" pada bawah judul laman anda. nanti akan terlihat jelas
perbedaan link Halaman Statis/Laman dengan link pada Halaman
Posting.
1. Membuat Daftar Isi (Table of Content)
Pertanyaan yang mungkin muncul adalah apa hubungannya antara
buku dengan blog? tak hanya sebuah buku yang bisa memuat daftar isi
untuk mempermudah para pembacanya, didalam sebuah blog pun kita
bisa melakukannya, contoh yang bisa dilihat adalah saya memuat judul-
judul artikel yang pernah saya posting di bagian footer halaman ini
ataupun ketika sobat membuka keluruhan artikel yang mau di baca
maka di akhir artikel akan muncul sederet judul-judul artikel lainnya
yang menggoda sobat untuk membacanya. Selain untuk menggoda
pengunjung agar lebih berlama-lama di blog kita, cara ini pun akan
sangat mempermudah para pembaca untuk menemukan artikel yang di
rasa menarik untuk di baca.
Teknik pembuatan daftar isi bisa dilakukan secara manual, akan tetapi
tentunya perlu waktu yang lama untuk membuatnya dan tentunya
akan menyita waktu kita. Dalam contoh kasus blog saya, saya
memanfaatkan script daftar isi yang siap pakai di internet.
Langsung saja kita buat, ikuti langkah membuat page dari step a-c,
kemudian pada editor pilih mode HTML, isi Judul dengan Daftar Isi
Postingan, dan copykan code berikut :
<div align="center;">
<div style="margin: 1px;">
<div class="smallfont;" style="margin-bottom: 2px;">
<div style="background: #FFFFFF; border: 1px solid #555555; height:
498px; overflow: auto; padding: 4px; width: 598px;">
<div id="cl_option">

Loading... </div>
<div id="cl_content_list">
</div>
<script type="text/javascript">var jumlah_kata_dalam_ringkasan =
250; </script> <script src="https://sites.google.com/site/omkrisnanto/
omkris/DaftarIsi2www.kris-smile.blogspot.com.js"></script><script
src="http://pu3pun.blogspot.com/feeds/posts/default?alt=json-in-
script&callback=onLoadFeed&max-results=99999"></script>
</div>
</div>
</div>
</div>
Klik stelan halaman, pada Komentar pembaca pilih “Jangan bolehkan,
sembunyikan yang ada”, Selesai dan Publikasikan halaman.
Hasilnya bisa dilihat di http://punpage.blogspot.com/p/daftar-isi-
postingan.html. Script daftar isi lainnya bisa googling.
2. Membuat Halaman About Me
Langkah-langkahnya hampir sama dengan membuat halaman daftar isi.
Karena berisi teks biasa, pilih mode Compose pada editor, tambahkan
foto untuk mempercantik halaman.

MEMBUAT POSTINGAN
1. Menggunakan Dropbox Untuk Simpan dan Share File
Dropbox adalah sebuah aplikasi untuk Windows, Mac & Linux yang
memungkinkan kita dengan aman untuk melakukan backup files,
menyimpan files atau melakukan sharing dengan orang lain yang bisa
diakses melalui komputer dimana saja. Jadi seakan kita punya Flashdisk
Online sebesar 2 GB yang bisa dibuka dimana saja melalui internet.
Kelebihan dropbox adalah ia dapat tersinkronisasi secara langsung
pada komputer yang kita gunakan (Win, Linux dan Mac bahkan
Ipod/HP), sehingga kita dapat mengakses file yang kita simpan
dimanapun kita berada sekalipun dalam kondisi offline. Kita pun dapat
berbagi file atau foto dengan sesama pengguna dropbox dimanapun
mereka berada, karena otomatis file yang kita letakkan di
folder sharing secara otomatis akan tersinkronisasi dengan pengguna
lain yang telah kita pilih. Tidak seperti 4shared, rapid share, mega
upload, Ziddu dll yang ada waktu tunggunya, kalau di dropbox tanpa
ada waktu tunggu serta support dengan program download akselerator
sehingga kecepatan download meningkat.
Bagi pemilik website/blog, tentunya hal ini sangat menggembirakan.
Dropbox memperbolehkan penggunanya untuk mengunduh file secara
langsung (direct link), sehingga kita dapat menggunakannya sebagai
media hosting gambar, ataupun file download lain tanpa perlu
membebani server web yang digunakan, sehingga dapat
menghemat bandwidth.
Berikut cara membuat akun dan upload file di Dropbox :
a. Buka web browser dan ketikan alamat www.dropbox.com
b. Klik Sign Up, dan masukkan data yang diperlukan sesuai
gambar di bawah, kemudian klik Sign Up.

c. Untuk mendapatkan file hosting gratis, klik Continue pada
bagian Basic
d. Selanjutnya ada proses download aplikasi Dropbox untuk di
komputer (Untuk proses instalasi dan penggunaan Dropbox
ofline di komputer tidak akan dibahas dalam buku ini, saya
akan membahas penggunaan Dropbox secara online).
e. Setelah selesai pendaftaran, masuk ke
https://www.dropbox.com/home dan pilih menu “File” untuk
memulai upload file.

Icon yang ditandai merah, berurutan untuk upload file,
membuat folder baru, sharing folder, dan untuk menampilkan
file yang di delete.
f. Klik icon “New Folder”, ketik nama folder “Self Publishing”,
buka foldernya, klik “Upload” pilih “Choose files”, pilih file yang
akan di upload, “Open” dan tunggu hingga proses selesai.
Setelah selesai, klik “Done”. File yang telah di upload di Dropbox
selanjutnya akan saya share di blog.
2. Contoh Membuat Postingan
Kali ini saya mencoba memberikan contoh membuat sebuah posting
untuk share file ebook saya. Pilih menu “Entri baru”.

Sebagai contoh :
 Judul : Tip & Trik Microsoft Word & Excel 2007
 Ketik isi postingan, masukkan gambar/foto , klik “Pilih File”
dari computer, “Open” pilih file gambarnya, klik “Add Selected”
 Masukkan link download file ebook yang sebelumnya telah di
upload di Dropbox. Seleksi teks, klik “Link”, masukkan alamat
download, “OK”
 Beri label pada postingan “eBook” dan “Self Publising”, klik
“Selesai”, klik “Publikasikan”.

MENGGANTI TEMPLATE BLOG
Apa sih sebenarnya template blog itu? Template blog atau website
adalah desain-desain halaman blog ataupun website beserta seluruh
komponennya (misal : gambar, stylesheet, dsb) baik berupa file statis
maupun file dinamis yang berupa program atau aplikasi yang berjalan
sebagai aplikasi web.
Di blogger atau blogspot, anda dapat dapat mengganti template blog
anda secara leluasa sesuai dengan selera dan keinginan masing-masing.
Jika anda telah mahir membuat template sendiri, anda dapat
menggunakan template tersebut untuk blog anda. Namun, jika anda
masih awam dalam membuat template, pihak blogger atau blogspot
sendiri telah menyediakan beberapa template yang bisa anda pilih
sesuai dengan keinginan.
Selain itu, anda dapat pula mengunduh atau mendownload template
blogger gratis dari penyedia template blogger, salah satu contoh
website yang menyediakan template blogger tersebut adalah
beralamat di http://btemplates.com, disana terdapat ratusan
template blogger yang bisa anda gunakan secara gratis. Namun, jika
anda menggunakan template gratis, syarat yang harus ditaati adalah
tidak boleh menghapus atau menghilangkan credit link dari pembuat
template tersebut. Dengan tidak membuang link credit pembuat
template, itu adalah sebagai apresiasi atas kerja keras mereka dalam
menyediakan template secara gratis.
1. Ganti Template dengan yang disediakan blogger
Berikut cara-cara untuk mengganti template dengan template yang
telah disediakan blogger :
1. Klik menu Template

2. Klik tombol Ubahsesuaikan
3. Klik pada pilihan template yang tersedia. Selain itu, anda dapat
pula memilih background atau gambar latar belakang dari
template tersebut. Jika sudah cocok dengan salah satu
template, klik Terapkan ke Blog.

4. Selesai.
2. Ganti Template dengan template dari penyedia template
Berikut cara-cara untuk mengganti template dengan template dari
penyedia template :
1. Download terlebih dahulu template yang anda sukai pada
website penyedia template blog gratis. Salah satu contoh anda
bisa download di http://btemplates.com.
2. File template yang di download, biasanya masih dalam bentuk
terkompresi (zip atau rar), oleh karenanya anda perlu
mengekstrak atau menguraikan file tersebut dengan software
ekstraktor seperti WinZip atau WinRar, Namun jika anda tidak
memiliki software tersebut, anda bisa mengekstraknya secara
online di http://wobzip.org.
3. Yang nanti di upload atau di unggah ke blogger hanyalah file
yang berekstensi .xml.
4. Pada menu Template, klik tombol Cadangkan/Pulihkan yang
ada dibagian atas kanan monitor.
5. Disarankan untuk membuat backup terlebih dahulu, klik pada
tombol Unduh Template Lengkap.
6. Klik tombol Choose File, pilih file template yang tadi
didownload dan telah diekstrak (file ekstensi .xml saja), contoh

blog punpage.blogspot.com memakai Classicsite. Kemudian
klik tombol Unggah.
7. Tunggu beberapa saat hingga proses selesai
8. Selesai.
Kini tampilan blog anda lebih terasa fresh dibanding sebelumnya.
MENGATUR LAYOUT (TATA LETAK) BLOG
1. Menambahkan favicon di blogger
Bila anda mengunjungi suatu website atau blog, disamping alamat
website tersebut akan terlihat icon kecil. Nah, icon tersebut disebut
sebagai favicon.
Apabila kita membuat blog di blogger/blogspot, maka disamping
alamat blog kita akan terlihat favicon logo blogger. Favicon logo
blogger tersebut bisa anda ganti sesuai dengan keinginan.

Berikut adalah langkah-langkah menambahkan favicon di blogger :
Pertama buatlah sebuah gambar yang akan di jadikan sebagai favicon.
Dimensi gambar haruslah berbentuk persegi, misalkan ukurannya 100 x
100 px. Maksimal file 100Kb. Contoh seperti gambar di bawah ini :
Simpanlah gambar tersebut di komputer anda.
Selanjutnya adalah mengupload gambar yang tadi sudah di buat ke
blogger. Berikut langkah-langkahnya :
1. Klik Tata Letak
2. Klik Edit pada Widget favicon

3. Klik Browse, lalu pilih gambar yang telah dibuat tadi
4. Klik tombol Simpan
5. Selesai.
2. Mengganti header blog
Tahap selanjutnya adalah mengganti header blog. Setiap template
berbeda-beda ukurannya. Untuk mempermudah bahasan sebagai
contoh saya gunakan blog punpage.blogspot.com.
a. Pertama buat desain header di Photoshop dan save di
komputer, ukuran yang saya gunakan 204 x 121 pixel, seperti
gambar di bawah ini.
b. Selanjutnya di menu Tata Letak klik Edit pada Header
c. Klik Choose file, lalu pilih gambar yang telah dibuat tadi
d. Pilih Selain judul dan keterangan pada Penempatan

e. Klik tombol Simpan dan selesai.
3. Menambahkan Widget (Gadget)
Agar blog anda tampak cantik dan menarik untuk di lihat, maka anda
bisa memasang beberapa aksesori blog (widget/gadget), diantaranya
buku tamu, jam, fanpage facebook, update tweet, dan sebagainya.
Blog punpage.blogspot.com menambahkan gadget sederhana, yaitu
UPDATE MANUAL ANTIVIRUS, PROGRAM PENDUKUNG, POPULAR
POST, dan MY LABELS.
Untuk menambahkan widget atau gadget, pada menu Tata Letak klik
Tambahkan Gadget.
Akan muncul daftar gadget yang bisa ditambahkan. Pada menu Dasar-
dasar, klik gadget yang diinginkan :

 UPDATE MANUAL ANTIVIRUS pilih gadget Teks
 PROGRAM PENDUKUNG pilih gadget Teks
 POPULAR POST pilih gadget Entri Populer
 MY LABELS pilih gadget Label
Setting dan isi disesuaikan dan Simpan.
Untuk pembahasan yang lebih lanjut mengenai widget yang lebih
komplek akan dibahas pada studi kasus selanjutnya.
MENGEDIT TEMPLATE (FORMAT HTML)
Untuk lebih mempercantik blog, saya mencoba mengedit kode HTML
template. Klik menu “Template” pilih “Edit HTML”, akan muncul editor
kode HTML. Selanjutnya tinggal melakukan edit sesuai kebutuhan.

1. Menambahkan Menu-menu Utama
Seperti telah digambarkan di awal pembuatan blog pribadi saya, blog
ini terdiri dari menu Home, Self Publising, Content of Table, dan About
Me. Sekarang saya tunjukan cara membuat menu tersebut.
Posisi dalam editor HTML, cari script ‘<div class='menuhorisontal'>”,
caranya tekan ctrl + F ketikan “<div class='menuhorisontal'>” (tanpa
tanda petik), kemudian ketikan script berikut di bawahnya :
<ul>
<li><a href='/'>Home<span>Beranda Blog</span></a></li>
<li><a href='http://pun.blogspot.com/search/label/Self%20Publishing?max-
results=3'>Self Publishing<span>Iseng Bikin eBook Sendiri</span></a></li>
<li><a href='http://punpage.blogspot.com/p/daftar-isi-postingan.html'>Table
of Contents<span>Daftar Isi Postingan</span></a></li>
<li><a href='http://punpage.blogspot.com/p/tentang-si-empunya.html'>About
Me<span>Tentang Si Empunya</span></a></li>
</ul>
 HOME : biarkan seperti aslinya
 SELF PUBLISHING
<li><a href='http://pun.blogspot.com/search/label/Self%20Publishing
?max-results=3'>Self Publishing<span>Iseng Bikin eBook
Sendiri</span></a></li>
Menu self publishing merupakan pemanggilan posting dengan
label “Self Publishing”. Linknya dalam kurung siku dalam tanda

petik. Kalimat “punpage.blogspot.com” bisa diganti dengan
alamat blog yang Anda buat. “Self%20Publishing” bisa diganti
dengan label yang Anda inginkan. “max-results=3” menunjukan
jumlah posting yang tampil per halaman sebanyak 3 postingan.
Angka tersebut bisa disesuaikan dengan kebutuhan Anda.
“Iseng Bikin eBook Sendiri” adalah keterangan yang bisa diubah
sesuai keinginan.
 TABLE OF CONTENT dan ABOUT ME
Kedua menu ini ditautkan dengan halaman statis yang telah
saya buat pada bahasan MEMBUAT HALAMAN STATIS (PAGE).
TABLE OF CONTENT  http://punpage.blogspot.com/p/daftar-
isi-postingan.html
ABOUT ME  http://punpage.blogspot.com/p/tentang-si-
empunya.html
2. Menambahkan Teks Selamat Datang di Halaman Awal
Cari script “<div id='search'>”, caranya tekan ctrl + F ketikan “<div
id='search'>” (tanpa tanda petik), kemudian ketikan “Selamat Datang di
Blog PUPUN Wirasaputra” di atas script tersebut kemudian “Simpan
template”

Hasilnya :
3. Menambahkan Breadcrumb
Untuk mengoptimalkan page ranking halaman web/blog di mesin
pencari, para pakar IT memikirkan untuk membuat suatu script yang
dapat mengoptimalkan halaman web/blog di mesin pencari yang
mereka sebut dengan Breadcrumb atau dapat juga disebutkan dengan
Navigasi. Contoh breadcrumb seperti gambar di bawah ini :
Cari script “]]></b:skin>”, kemudian tambahkan script di bawah ini di
atas “]]></b:skin>”.

.breadcrumbs{padding:5px 5px 5px 0px;margin:0px 0px 15px 0px;font-
size:95%;line-height:1.4em;}

Kemudian cari “<div class='post hentry'>”, kemudian di bawahnya
ketikan kode berikut :

<b:if cond='data:blog.homepageUrl == data:blog.url'> <b:else/> <b:if
cond='data:blog.pageType == "item"'> <div class='breadcrumbs'>
<span itemscope='http://data-vocabulary.org/Breadcrumb'
itemtype='http://data-vocabulary.org/Breadcrumb'> <a
expr:href='data:blog.homepageUrl' itemprop='url'><span
itemprop='title'>Home</span></a> » </span><span
itemscope='http://data-vocabulary.org/Breadcrumb' itemtype='http://data-
vocabulary.org/Breadcrumb'><b:if cond='data:post.labels'><b:loop
values='data:post.labels' var='label'> <a expr:href='data:label.url'
itemprop='url'><span itemprop='title'><data:label.name/></span></a> <b:if
cond='data:label.isLast != "true"'> , </b:if> </b:loop> </b:if>
» </span><span itemscope='http://data-vocabulary.org/Breadcrumb'
itemtype='http://data-vocabulary.org/Breadcrumb'><span
itemprop='title'><data:post.title/> </span></span><hr/></div> </b:if></b:if>

Untuk contoh pembuatan blog pribadi saya kira cukup
pembahasannya, untuk hasil desainnya bisa di lihat di link
http://punpage.blogspot.com/

# MEMBUAT WEBSITE PROFIL PERUSAHAAN
(contoh pembuatan blog : pusda-sumedang.blogspot.com)
Sebelum membuat website, alangkah baiknya untuk membuat
rancangan menu utama website yang dibuat. Pembuatan blog
Perpustakaan sumedang terdiri dari menu-menu sebagai berikut :
Mari mulai membuat blog dengan klik “Blog Baru” dan lakukan setting-
setting pada blog tersebut.
.
Home
Profil
Sejarah (Page) *
Visi Misi (Page) *
Struktur Organisasi (Page) *
Layanan
Jenis Layanan (Page) *
Keanggotaan (Page) *
Pembinaan(Page) *
Perpustakaan Digital (Link)
Fasilitas (Page) *
Galeri Photo (Page)
Buku Tamu (Page)
Link Terkait
Kabupaten Sumedang (Link)
Bapusipda Jabar (Link)
Pusnas RI (Link)

Ganti template blog dengan template dari penyedia template. Saya
menggati blog ini dengan BizPro (pilih file XML “BizPro without
slider”). Supaya membuang hal yang tidak perlu, langkah-langkah yang
dilakukan seperti pada bahasan Ganti Template dengan template dari
penyedia template (halaman 35).
Buatlah halaman statis (page) sesuai bagan struktur menu di atas.
Untuk page bertanda bintang (*), buatlah page seperti posting biasa
seperti bahasan membuat halaman about me (halaman 27), sedangkan
yang tidak bertanda bintang akan dibahas lebih lanjut.
1. Membuat Galeri Photo
Selain untuk mempercantik website atau blog, galeri photo merupakan
sebuah media untuk memperkenalkan kegiatan-kegiatan perusahaan
kepada pengunjung website. Banyak template maupun script galeri
photo di internet yang siap di copy-paste ke blogspot.
Blog yang saya buat memakai script dari http://www.cssplay.co.uk/
menu/lightbox.html yang dimodifikasi sesuai kebutuhan.
Setelah mendapatkan file lightbox.html, masuk ke menu “Template”,
pilih “Edit HTML” cari script “</head>”.

Copy script berikut di atas </head> dan “Simpan” :
<style type="text/css">
/* slides styling (galeri foto) */
.photo {width:630px; text-align:left; position:relative; margin:0 auto;}
.photo ul.topic {padding:0; margin:0; list-style:none; width:630px; height:auto;
position:relative; z-index:10;}
.photo ul.topic li {display:block; width:130px; height:31px; float:left;}
.photo ul.topic li a.set {display:block; font-size:11px; width:129px; height:30px; text-
align:center; line-height:30px; color:#000; text-decoration:none; border:1px solid #fff;
border-width:1px 1px 0 0; background:#ccc; font-family:verdana, arial, sans-serif;}
.photo ul.topic li a ul,
.photo ul.topic li ul
{display:none;}
.photo ul.topic li.active a
{color:#000; background:#bbb;}
.photo ul.topic li a:hover,
.photo ul.topic li:hover a
{color:#fff; background:#aaa;}
.photo ul.topic li.active ul
{display:block; position:absolute; left:0; top:31px; list-style:none; padding:0; margin:0;
height:375px; background:#ddd; width:464px; padding:10px 25px; border:20px solid
#bbb; z-index:1;}
.photo ul.topic li a:hover ul,
.photo ul.topic li:hover ul
{display:block; position:absolute; left:0; top:31px; list-style:none; padding:0; margin:0;
height:375px; background:#ddd; width:464px; padding:10px 25px; border:20px solid
#aaa; z-index:100;}
.photo ul.topic li ul li
{display:inline; width:112px; height:87px; float:left; border:1px solid #fff; margin:1px;}
.photo ul.topic li ul li a
{display:block; width:110px; height:85px; cursor:default; float:left; text-
decoration:none; background:#444; border:1px solid #888;}
.photo ul.topic li ul li a img
{display:block; width:100px; height:75px; border:5px solid #eee;}
.photo ul.topic li a:hover ul li a:hover,
.photo ul.topic li:hover ul li a:hover
{white-space:normal; position:relative;}
.photo ul.topic li a:hover ul li a:hover img,
.photo ul.topic li:hover ul li a:hover img
{position:absolute; left:-50px; top:-32px; width:200px; height:150px; border-color:#fff;}
</style>

Setelah itu buat halaman kosong baru, pilih mode HTML, paste code
berikut dan Publikasikan:
<div class="photo">
<br />
<ul class="topic">
<li class="active"><a class="set" href="http://www.blogger.com/page-
edit.do?blogID=8914349220590446706&pageID=1933578914187674901#Portraits">JUDUL
ALBUM</a><br /><br /><br /><br /><ul>
<li><a href="URL PHOTO"><img alt="KETERANGAN PHOTO " src="URL PHOTO" title="JUDUL" /></a></li>
<li><a href="URL PHOTO"><img alt="KETERANGAN PHOTO" src="URL PHOTO" title="JUDUL" /></a></li>
</ul>
<br /><br /></li>
<li><a class="set" href="http://www.blogger.com/page-
edit.do?blogID=8914349220590446706&pageID=1933578914187674901#Landscapes">JUDUL
ALBUM</a><br /><br /><br /><br /><ul>
</ul>
<br /><br /></li>
</ul>
</div>
Silahkan edit JUDUL ALBUM, URL ALBUM, KETERANGAN PHOTO, JUDUL
sesuai dengan keinginan anda. Jika ingin buat album baru silahkan
tambahkan lagi script yang berwarna biru di atas </ul></div> terakhir..
2. Membuat Buku Tamu
Memasang sebuah buku tamu (guestbook) pada sebuah blog adalah
hal yang cukup lumayan penting, karena buku tamu ini merupakan
salah satu sarana untuk berinteraksi antara yang punya blog dengan
para pengunjung blog. Dengan di pajangnya buku tamu di dalam blog,
maka para pengunjung dapat mengungkapkan isi hatinya tentang blog
yang anda buat, yang pasti isi dari sebuah buku tamu ini sangatlah

bervariasi bisa merupakan pujian, pertanyaan, sekedar iseng, atau ada
juga merupakan kritikan terhadap isi blog anda.
Langsung saja kita mulai cara membuat buku tamu dengan Cbox,
berikut langkah-langkahnya :
1. Kunjungi situs http://cbox.ws/
2. Kemudian klik 'Sign Up' pada menu atas.
3. Isi form lengkap pendaftaran dari cbox, jangan lupa centang 'I have
read and do agree to the Cbox terms and conditions of service'.
4. Klik 'Create My Cbox!'
5. Pendaftaran berhasil dan Anda bisa langsung login Cbox, dan salinan
rincian account cbox akan dikirim ke email yang Anda daftarkan.
6. Setelah Anda berhasil login Cbox, edit tampilan Cbox sesuai
keinginan Anda.
7. Klik 'Look & Feel', untuk mengganti tampilan cbox, warna, font, dll.

8. Kalau sudah klik 'Publish!'
9. Copy paste kode cbox dan letakkan pada halaman baru. Kode
tersebut bisa juga diletakan di widget/gadget. HTML/JavaScript blog
Anda.
Selesai sudah membuat elemen-elemen halaman, kita lanjut ke layout
blog.
MENGATUR LAYOUT (TATA LETAK) BLOG
Selanjutnya kita masuk ke menu “Tata Letak (Layout)”, di sini saya akan
melakukan desain ulang untuk mempercantik website.
1. Menambahkan favicon
Lakukan langkah ini seperti panduan menambahkan favicon di
blogger (halaman 35).

2. Mengganti header
Tahap selanjutnya adalah mengganti header blog, seperti pada
bahasan sebelumnya halaman 37. Kali ini saya menggunakan file
gambar berukuran 961 x 96 pixel. Pada template Bizpro terdiri dari dua
bagian header, tampilan awal header akan terpotong, untuk
membuatnya full akan dibahas melalui edit kode-kode HTML.
3. Menambahkan Facebook Fan Page Like Button Pada Blog
Webstite atau blog akan terlihat lebih menarik apabila sedikit sentuhan
beberapa widget. Salah satu widget yang saya pakai sendiri adalah
Facebook Fan Page. Facebook Fan Page juga menjadi salah satu alat
untuk mempromosikan website atau blog anda.
Berikut cara menambahkan Facebook Fan Page Like button pada blog :.
1. Login akun Facebook anda
2. Buka https://developers.facebook.com/docs/plugins
3. Pilih menu “Like Button” atau “Like Box”. Isi formulir yang
disediakan, ukuran bisa disesuaikan, kemudian klik "get code"
4. Anda akan mendapat 2 kolom script, seperti di bawah ini :
5. Copy kode tersebut.
6. Buka Blogger anda, kemudian Tata Letak.
7. Pilih Tambahkan Widget.
8. Pilih HTML /Javascript.

9. Masukkan 2 kolom kode script tersebut di dalam kolom widget
HTML.
10. Save.
Hasilnya :
Like Button Like Box
Untuk lebih mempercantik blog, saya mencoba mengedit kode HTML
template. Klik menu “Template” pilih “Edit HTML”, akan muncul editor
kode HTML. Selanjutnya tinggal melakukan edit sesuai kebutuhan.

1. Edit Ukuran Header
Seperti telah dibahas sebelumnya, template Bizpro terdiri dari dua
bagian header. Untuk membuat tampilan full, cari “/* Header”.
Ubah kode berikut :
#header-wrapper{width:960px;margin:0px auto 0px;height:96px;padding:26px
0px 26px 0px;background:#FFFFFF;overflow:hidden;}
Menjadi :
#header-wrapper{width:960px;margin:0px auto 0px;height:96px;padding:0px
0px 0px 0px;background:#18A5DB;overflow:hidden;}
Dan kode :
#header{margin:0;border:0 solid
$bordercolor;color:$pagetitlecolor;float:left;width:45%;overflow:hidden;}
Menjadi :
#header{margin:0;border:0 solid
$bordercolor;color:$pagetitlecolor;float:left;width:100%;overflow:hidden;}

2. Membuat Menu Utama (Drop Down Horizontal)
Banyak cara untuk membuat menu drop down horizontal di blogspot,
berikut saya share salah satu caranya.
Pertama : cari script “]]></b:skin>” (tanpa tanda petik), kemudian copy
kode berikut tepat di atasnya :
.menu-secondary-wrap{padding:0;margin:0;position:relative;height:42px;z-
index:50;background: #FFFFFF; width: 100%;}
.menu-secondary{height:42px}
.menu-secondary ul{min-width:160px}
.menu-secondary li a{color:#1B1A1A;padding:5px 5px 5px 5px;text-
decoration:none;text-transform:uppercase;font:bold 12px
Arial,Helvetica,Sans-serif;}
.menu-secondary li a:hover,.menu-secondary li a:active,.menu-secondary li
a:focus,.menu-secondary li:hover > a,.menu-secondary li.current-cat >
a,.menu-secondary li.current_page_item > a,.menu-secondary li.current-
menu-item > a{color:#FFF;background: #C3C3C3;outline:0;}
.menu-secondary li li a{color::#A52A2A;background:#FFEBCD;padding:5px
5px;text-transform:none;font-weight:normal; border-right: 0;}
.menu-secondary li li a:hover,.menu-secondary li li a:active,.menu-secondary li
li a:focus,.menu-secondary li li:hover > a,.menu-secondary li li.current-cat >
a,.menu-secondary li li.current_page_item > a,.menu-secondary li li.current-
menu-item > a{color:#A52A2A;background:#FFEBCD;outline:0}
.menu-secondary a.sf-with-ul{padding-right:5px;min-width:1px}
.menu-secondary .sf-sub-
indicator{position:absolute;display:block;overflow:hidden;right:0;top:0;paddin
g:5px 5px 0 0}
.menu-secondary li li .sf-sub-indicator{padding:5px 5px 0 0}
Kedua : cari script “<div id='content-wrapper'>”, di atas script tersebut
ganti script :
<div class='menu-primary-container'>
<b:section class='pagelistmenusblog' id='pagelistmenusblog'
showaddelement='no'>
<b:widget id='PageList8' locked='false' title='Pages - Menu' type='PageList'>…
</b:widget>

</b:section>
</div>
</div>
<div style='clear:both;'/>
Menjadi :
<div class='menu-primary-container'>
<b:section class='pagelistmenusblog' id='pagelistmenusblog'
showaddelement='no'/>

<div class='menu-secondary-wrap'>
<ul class='menus menu-secondary'>
<li><a href='/'>Home</a></li>
<li><a href='#'>Profil</a>
<ul class='children'>
<li><a href='http://pusda-sumedang.blogspot.com/p/sejarah-
perpustakaan.html'>Sejarah</a></li>
<li><a href='http://pusda-sumedang.blogspot.com/p/visi-misi-perpustakaan-
tahun-2014-2018.html'>Visi dan Misi</a></li>
<li><a href='http://pusda-sumedang.blogspot.com/p/struktur-organisasi-
perpustakaan_16.html'>Struktur Organisasi</a></li>
</ul>
</li>
<li><a href='#'>Layanan</a>
<li><a href='http://pusda-sumedang.blogspot.com/p/jenis-layanan-
perpustakaan.html'>Jenis Layanan</a></li>
<li><a href='http://pusda-sumedang.blogspot.com/p/keanggotaan-
perpustakaan-kabupaten.html'>Keanggotaan</a></li>
</ul>
</li>
<li><a href='http://pusda-sumedang.blogspot.com/p/pembinaan-
perpustakaan.html'>Pembinaan</a></li>

<li><a href='http://digilib-sumedang.blogspot.com/'
target='_blank'>Perpustakaan Digital</a></li>
<li><a href='http://pusda-
sumedang.blogspot.com/p/fasilitas.html'>Fasilitas</a></li>
<li><a href='http://pusda-sumedang.blogspot.com/p/gallery-
photo.html'>Gallery Photo</a></li>
<li><a href='http://pusda-sumedang.blogspot.com/p/buku-tamu.html'>Buku
Tamu</a></li>
<li><a href='#'>Link Terkait</a>
<li><a href='http://www.sumedangkab.go.id/' target='_blank'>Pemerintah
Kabupaten Sumedang</a></li>
<li><a href='http://bapusipda.jabarprov.go.id/' target='_blank'>Bapusipda
Jawa Barat</a></li>
<li><a href='http://www.pnri.go.id/' target='_blank'>Perpustakaan Nasional
RI</a></li>
</ul>
</li>
</ul>
</div>

</div>
</div>
3. Edit “Welcome to our website”
Di bawah menu pada template Bizpro terdapat bagian about us
(welcome to our website) yang mengandung gambar dan teks. Untuk
mempercantik tampilan saya merubah tampilan tersebut. Caranya cari
“”, ganti script antara “”sesuai keinginan, contoh :

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<div class='aboutusbox'>
<img class='aboutusbox-image' src='http://4.bp.blogspot.com/-YfVfbds35PU/T-
lWNoDNgpI/AAAAAAAAACA/y84yhnBzYkQ/s1600/welcome.gif'/>
<h2 class='aboutusbox-title'>Selamat datang di Blog Perpustakaan Kabupaten
Sumedang</h2>
<div class='aboutusbox-content'>
Perpustakaan Kabupaten Sumedang diharapkan menjadi sumber belajar
masyarakat yang dalam pelayanannya tidak hanya menyediakan bahan pustaka
sesuai dengan kebutuhan namun juga berbagai kegiatan yang bermuara pada
pengembangan budaya baca masyarakat. <br/> <br/>Perpustakaan Kabupaten
Sumedang senantiasa berbenah untuk mengoptimalkan perannya dalam
mengembangkan fungsi penelitian, pendidikan, pelestarian, informasi dan
rekreasi, sekaligus berupaya untuk dapat melayani dengan prima dan
mengembangkan serta meningkatkan minat baca masyarakat.
</div>
</div>
</b:if></b:if>

4. Edit Social Profile
Cari “<div class='social-profiles-widget'>”, ganti script <h3
class='widgettitle'>Social Profiles</h3> dengan <h3 class=
'widgettitle'>Ayo ke Perpustakaan !</h3> tambahkan paragraf alamat
kantor, misal <p>Jln. Mayor Abdurrahman No. 185 Sumedang
Telp/Faks. (0261) 201231</p> terakhir modifikasi ikon sosial media dan
link-linknya, contoh menjadi :
<a href='https://www.facebook.com/groups/pusdasumedang'
target='_blank'><img alt='Facebook' src='http://1.bp.blogspot.com/-
MLlecCK0bcw/T8VI-mDUOQI/AAAAAAAABoI/-hg-B7IvRko/s000/
facebook.png' title='Facebook'/></a><a
href='mailto:perpustakaan.sumedang@gmail.com'
target='_blank'><img alt='Email' src='http://4.bp.blogspot.com/-

Vj6sIeTBkrI/T8VI_tIQfGI/AAAAAAAABoo/s5_K4g8qr04/s000/email.png'
title='Email'/></a>
Pembahasan pembuatan website (blog) untuk kepentingan perusahaan
atau lembaga menggunakan blogspot saya kira sudah cukup, untuk
melihat hasil dari pembahasan ini silahkan kunjungi
http://pusda-sumedang.blogspot.com/

# MEMBUAT WEBSITE TOKO ONLINE
(contoh pembuatan blog : 3pointshop-id.blogspot.com)
Website yang akan dibuat terdiri dari menu-menu sebagai berikut :
Mulai dengan membuat blog baru dan setting blog sesuai dengan
kebutuhan.
Home
Cara Belanja dan Pembayaran Kontak Kami

Buatlah halaman statis (page) sesuai bagan struktur menu di atas, yaitu
halaman “Cara Belanja dan Pembayaran” dan “Kontak Kami”. Cara
pembuatan sama dengan pembahasan sebelumnya.
Ganti template blog dengan template dari penyedia template. Saya
menggati blog ini dengan Ultimate-Store. Langkah-langkah seperti
pada halaman 35.
MENGATUR TATA LETAK BLOG
Selanjutnya kita masuk ke menu “Tata Letak (Layout)”, di sini saya akan
melakukan desain ulang (hapus dan tambah gadget sesuai kebutuhan)
untuk mempercantik website.
1. Menambahkan Favicon
Lakukan langkah ini seperti panduan menambahkan favicon di
blogger (halaman 35).
2. Mengganti Header Blog
Tahap selanjutnya adalah mengganti header blog, seperti pada
bahasan sebelumnya halaman 37. Kali ini saya menggunakan file
gambar berukuran 930 x 128 pixel. Pada template ini juga terdiri dari
dua bagian header, tampilan awal header akan terpotong, untuk
membuatnya full akan dibahas melalui edit kode-kode HTML.

3. Menambahkan Gadget Label
Lakukan langkah ini seperti panduan menambahkan widget/
gadget (halaman 38) pilih gadget “Label”, lakukan setting dan “Save”.
Pada tahap ini gadget masih dengan tampilan yang sangat sederhana
sekali. Selanjutnya agar tampilan lebih bagus akan diedit ulang pada
mode HTML.
4. Menambahkan Facebook Fan Page
Lakukan langkah ini seperti panduan menambahkan facebook fan page
like button di blog (halaman 50).
Untuk lebih mempercantik blog, edit kode HTML template. Klik menu
“Template” pilih “Edit HTML”, akan muncul editor kode HTML.
Selanjutnya tinggal melakukan edit sesuai kebutuhan.
1. Edit Ukuran Header
Seperti telah dibahas sebelumnya, template Ultimate-Store terdiri dari
dua bagian header. Untuk membuat tampilan full, cari “#header”.
Ubah kode berwarna merah (20 jadi 5 dan 450 jadi 930) :
#header-wrapper{width:930px;margin:20px auto;padding:0}#header-
inner{background-position:[center];margin-left:auto;margin-right:auto}
#header{float:left;max-width:450px;overflow:hidden;color:#666;
padding:0;margin:0}
Hapus juga kode berikut :
<b:section class='topbanner' id='topbanner'>
<b:widget id='HTML3' locked='false' title='' type='HTML'>… </b:widget>
</b:section>

2. Edit Gadget Label (Kategori Produk)
Cari “<div id='sidebar'>”, kemudian keluarkan kode yang di blok di
bawah ini, dan paste kode tersebut di atas “<div id='sidebar'>” dan
tambahkan kode dalam kotak merah.
3. Hapus Widget/Gadget di Bagian Footer
Karena kurang penting, saya hapus semua gadget di footer lewat edit
HTML.
Caranya hapus kode berikut :
<div id='topfooter-wrapper'>
<div id='topfooter'>
<b:section class='topfooter1' id='topfooter1'><b:widget id='Feed1'
locked='false' title='New Products' type='Feed'>…</b:widget>
</b:section>
<b:section class='topfooter2' id='topfooter2'><b:widget id='Feed3'
locked='false' title='Recent Reviews' type='Feed'>…</b:widget>
</b:section>
<b:section class='topfooter3' id='topfooter3'/><b:widget id='Feed3'
locked='false' title='Total Pageviews' type='Feed'>…</b:widget>
</b:section>

<b:section class='topfooter4' id='topfooter4'/>><b:widget id='Feed3'
locked='false' title=’Product Archive’ type='Feed'>…</b:widget>
</b:section>
<div class='clear'/>
</div>
</div>
Setelah selesai “Simpan”.
CUSTOM DOMAIN DI BLOGSPOT
Apa itu custom domain di blogspot (blogger)? yang di maksud custom
domain di blogger disini adalah mengganti alamat blog yang di blogger
atau blogspot dengan nama domain milik sendiri atau dengan Top
Level Domain (TLD)., misal http:/3pointshop-id.blogspot.com diganti
alamatnya menjadi http://www.3pointshop.com atau dengan
http://3pointshop.co.id atau dengan alamat yang lainnya.
Mengganti alamat sub domain blogger atau blogspot dengan Top Level
Domain (TLD) tentu saja mempunyai kelebihan serta kekurangan
dibanding dengan tetap memakai sub domain blogspot, berikut
beberapa kelebihan custom domain blogger yang mungkin bisa anda
pertimbangkan :
- Tampil Lebih Professional
Memakai nama domain sendiri biasanya akan dianggap lebih
professional dibandingkan dengan memakai sub domain blogger.
Anggapan seperti ini sangat diperlukan apabila blog anda adalah
merupakan sebuah blog bisnis terlebih lagi untuk toko online atau
blog untuk menjual barang atau jasa, ini akan mempengaruhi
tingkat kepercayaan dari para pelanggan atau customer.

- Tingkat Kepercayaan Tinggi
Ini masih erat hubungannya dengan yang ditulis diatas. Blog dengan
nama domain sendiri akan lebih mendapatkan kepercayaan
dibanding dengan blog yang masih memakai sub domain blogspot.
Terlebih jika anda biasa bermain di bisnis jualan link atau paid
review, top level domain akan lebih mudah mendapatkan job
dibanding sub domain blogger walaupun memiliki page rank yang
sama. Ini memang tidak mutlak, namun merupakan salah satu
faktor yang menunjang dalam keberhasilan bermain bisnis sale
links.
- Hosting Gratis Dari Blogger
Salah satu kendala yang dirasa berat untuk blog yang sudah
mempunyai jumlah kunjungan yang banyak adalah hosting, semakin
banyak pengunjung maka biaya hosting yang harus dikeluarkan
semakin besar. Dengan Custom domain diblogger anda tidak perlu
memikirkan biaya hosting karena blogger memberikannya secara
gratis.
Perlu diketahui bahwa apabila anda mengganti sub domain blogger
dengan domain yang anda miliki, anda tetap berhubungan dengan
blogger, segala sesuatunya akan tetap seperti sebelumnya. Mesin
blog yang anda pakai tetap menggunakan mesin blogger, untuk
mengatur anda tetap harus login ke blogger dsb.
1. Penyedia Jasa Domain Gratis
Domain gratis (free domain) semakin banyak yang bermunculan seiring
dengan semakin meluasnya penggunaan internet dalam berbagai
keperluan, bahkan domain gratis ini juga telah menjadi incaran
sebagian orang untuk sekedar coba - coba dalam menggunakan domain
ataupun memang dalam niat memanfaatkan keadaan gratis dari
penyedianya, dan sangat cocok bagi anda yang ingin mengganti domain
tetapi tidak ingin mengeluarkan modal sewa domain. Uniknya domain

gratis juga memiliki fitur yang tidak kalah dengan domain berbayar,
gratis selamanya, bahkan tanpa ada iklan ataupun ikon dari
penyedianya sendiri, menakjubkan bukan ?
Berikut daftar situs penyedia domain gratis :
1. www.uni.cc
2. www.dot.tk
3. www.co.tv
4. www.registry.cx.cc
5. www.freedomains.co.be
6. www.biz.nf
7. freedomain.cc.im
8, nl.ai
9. nl.gl
10. wi.vc
11. gook.be
12. coom.in
13. www.europnic.com
14. www.dotfree.com
15. www.azote.org
16, dnsdot.net
17. www.smartdots.com
18. freedomain.co.nr
19. codotvu.com
20. www.domain.me.pn
21. uni.me
22. free.domain.name/en.html
23. www.joynic.com
2. Daftar dan Custom Domain www.dot.tk
Sebagai contoh saya akan melakukan custom domain pada blog
http://3pointshop-id.blogspot.com menjadi http://www.3pointshop.tk.
Ikuti langkah-langkah berikut :

1. Masuk ke www.dot.tk, kemudian login. Ada beberapa pilihan
login. Untuk mempermudah kita login menggunakan akun
Google, klik pada tombol Google,yang berarti sobat akan login
ke dasbor .tk menggunakan akun google anda yang aktif saat
anda mendaftar dan regitrasi di domain .tk dan ini yang di
sarankan agar akun google dan terasosiasi dengan aku domain
.tk anda nantinya.
Setelah proses tersebut diatas maka akan terbuka jendela
bermunculan yang baru yang akan meminta anda untuk
mengizinkan domain .tk akses ke akun google anda, silahkan isi
pasword google anda dan klik izinkan.
2. Langkah selanjutnya silahkan klik menu domain panel seperti
yang terdapat pada gambar di bawah

3. Kemudian silahkan klik add domain seperti yang di lingkari
pada gambar di bawah berikut
4. Setelah itu silahkan mengisi kolom Add Domain, jika domain
yang didaftarkan di acc oleh pihak admin .tk maka akan di
hantarkan ke halaman awal untuk memulai mengkostumisasi
dns domain seperti yang tertera pada gambat berikut, pada
link referel isi dengan domain yang didaftarkan tadi dan telah
di setujui oleh pihak .tk, setelah itu silahkan sobat klik tombol
yang di beri tanda panah berwarna merah.
5. Isi formulir yang di beri kotak merah dengan ghs.google.com

6. Masih di halaman yang sama, scrool sampai ke bawah dan
silahkan melakukan kostumisasi domain sobat seperti petunjuk
anak panah pada gambar tersebut, kemudian klik “Next”
7. Akan nampak seperti pada gambar berikut
8. Silahkan klik menu yang di beri lingkar merah seperti pada
gambar di atas dan secara otomatis akan muncul halaman
seperti gambar berikut
9. Domain sudah jadi, sekarang langkah selanjutnya adalah
silahkan klik domain tersebut, ini akan mengantarkan ke
jendela kostumisasi dns domain seperti pada gambar berikut

10. Beri centang kolom yang aku beri lingkaran merah, dan secara
otomatis pula akan muncul jendela baru, seperti pada gambar
berikut
Pilih yang terblok warna biru, pada bagian tersebutlah kita
akan melakukan setting dns nantinya, jangan dulu di tutup
11. Selanjutnya, buka dasbor blogger dan masuk ke menu setelan,
klik “Tambahkan domain khusus”
12. Silahkan masukan domain yang telah di daftarkan tadi di .tk
(contoh : www.3pointshop.tk) kemusian simpan......seperti
biasa akan error hehehhe… hal itu wajar dan memang kita

butuh, karena kita menginginkan kode cname yang akan di
berikan oleh google kepada kita dan kode ini lah yang akan kita
setting pada dns di domain .tk kita
13. Kembali ke domain .tk kita. Masukkan kode-kode dalam kotak
merah di atas ke setting dns .tk, seperti gambar di bawah
14. Save dan jika berhasil akan seperti gambar berikut

Gambar di atas memberi tahukan kalau pengaturan telah
berhasil dan domain kita telah aktif, dan sekarang biarlah dulu
sampai beberapa menit (5-10 menit) untuk mengsikronkan
dengan akun blogger.
15. Setelah itu silahkan memulai lagi pergantian domain seperti
yang sobat lakukan sebelumnya dan jika semua pengaturan
benar-benar sukses maka tampilan selanjutanya akan seperti
gambar berikut yang artinya domain anda benar-benar aktif
dan siap di gunakan.
Test domain kita dengan mengetik www.3pointshop.tk
hasilnya seperti berikut :
Dan blog telah berganti domain menjadi domain .tk.
Pembahasan pembuatan website (blog) untuk kepentingan took online
menggunakan blogspot saya kira sudah cukup, untuk melihat hasil
kunjungi http://3pointshop-id.blogspot.com/ atau
www.3pontshop.tk

# PENUTUP
Akhirnya sampailah pada bagian paling akhir ebook ini. Masih belum
banyak yang bisa saya sampaikan disini. Blogger adalah salah satu
penyedia layanan blog gratis yang luar biasa. Rasanya ebook ini masih
memiliki potensi untuk berkembang dan mengalami revisi.
Jika anda ingin menjadi seorang blogger, rasanya apa yang ada die
book ini sudah cukup, tapi jika anda seorang web programmer, maka
ebook ini terlampau kecil dan dangkal isinya.
Untuk memperdalam pengetahuan tentang blogspot (blogger) saya
rekomendasikan untuk mengunjungi website
http://www.krtutorplus.com/p/panduan-membuat-
blog-di-blogger.html.
Akhir kata semoga apa yang telah dibahas bermanfaat bagi kita semua.

Membuat website (blog) dengan blogspot

Membuat website (blog) dengan blogspot

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Viewers also liked

Viewers also liked (15)

Similar to Membuat website (blog) dengan blogspot

Similar to Membuat website (blog) dengan blogspot (20)

Membuat website (blog) dengan blogspot