Membuat Blog
Via Blogger
OLEH
NAMA : RIA PUSPITASARI
NIM : ACC 108 002
MATA KULIAH : PENGEMBANGAN MEDIA PEMBELAJARAN
www.themegallery.com
3. MENDAFTAR BLOG
5. MEMPERCANTIK BLOG
4. MENGISI BLOG (POSTING)
PENGERTIAN BLOG
Blog atau weblog
adalah catatan pribadi
seseorang di internet
berisi informasi yang
sering di update dan
k...
Mengapa saya memilih blogger.com ?
Karena blogger merupakan layanan gratis 100% dari google,
tanpa harus membayar hosting ...
Persiapan sebelum membuat blok
Memiliki account e-mail ;
Terkoneksi dengan internet ;
Memahami copy dan paste ;
Memiliki r...
MEMBUAT AKUN E-MAIL
DI GOOGLE
1. Buka http://www.gmail.com pada web
browser Anda.
2. Selanjutnya pilih “BUAT AKUN”
3. Isi identitas
Anda pada
formulir
pendaftaran
dengan
benar.
Untuk pengisian verifikasi kata, jika sulit
dibaca, bisa diganti dengan meng-klik pada
simbol kecil yang ada di sebelah ka...
4. Kemudian klik tombol
“Saya menerima. Buat akun saya”.
5. Setelah mengklik akan muncul halaman
verifikasi akun. Masukkan nomor telepon
Anda agar google mengirim kode verifikasi....
6. Masukkan kode verifikasi yang telah dikirim
melalui sms. Klik pada “verifikasi”.
7. Dan selamat, Anda telah memiliki akun email
di gmail ! Kemudian, untuk mencoba
menampilkan email Anda , lansung saja kl...
9. Akan muncul halaman seperti ini.
Anda akan dibawa ke dalam jendela kotak masuk
email Anda, untuk pertama kali ada satu ...
MENDAFTAR BLOG
1. BUKA ALAMAT
WWW.BLOGGER.COM
2. KEMUDIAN LOGIN MENGGUNAKAN
AKUN GMAIL DAN PASSWORDNYA,
KLIK TOMBOL “MASUK”.
3.Isi Nama tampilan serta beri tanda
centang pada kolom “saya menerima
Persyaratan dan Layanan” lalu klik
“LANJUTKAN”.
4. JIKA BERHASIL LOGGIN
AKAN MUNCUL TAMPILAN
DASHBOARD. UNTUK
MEMPERMUDAH
MENGENALI BLOG, ANDA
BISA MENGGANTI BAHASA
DI PO...
5. KLIK TOMBOL PILIHAN “CIPTAKAN BLOG ANDA”.
6. KETIK JUDUL BLOG DAN ALAMAT BLOG AGAR PENGUNJUNG
DAPAT MENGAKSES BLOG ANDA, KEMUDIAN CEK
KETERSEDIAAN UNTUK MENGETAHUI ...
7. “BLOG ANDA SUDAH JADI !, UNTUK
MELIHAT HASIL TAMPILAN, KLIK
TOMBOL “LIHAT BLOG”.
BERIKUT TAMPILANNYA
1. Klik tombol “Entri Baru”.
2. Tuliskan judul dan masukan artikel
yang ingin Anda tempel, lalu klik
“Publikasikan”.
Inilah artikel yang telah
dipublikasikan
MEMPERCANTIK BLOG
1. Mengedit profil
2. Mendesain template dari blog
3. Mengganti template dari download free
template
4. Lencana facebook d...
Karena saya termasuk pemula di blogger,
maka untuk memudahkan dalam
mempelajarinya, saya mempercantik blog
saya melalui ta...
1.Klik tombol simbol yang diberi tanda
panah.
2. Klik pilihan “Antarmuka Blogger Lawas”.
MENGEDIT
PROFIL
1. Klik tombol pilihan “Edit Profil”.
2. Isi data diri, unggah foto Anda lalu
klik tombol “Simpan Profil”.
EDITPROFIL
UNGGAH FOTO
SIMPAN PROFIL
INILAH TAMPILAN PROFIL
YANG TELAH DIPERBAHARUI
MENDESAIN
TEMPLATE
DARI BLOG
1. Klik dasbor blogspot, klik pada tombol
“Rancangan”, kemudian klik pada
tombol “Perancang Template”.
2. Pilih salah satu template sesuai
dengan keinginan Anda. Pada setiap
pilihan template terdapat beberapa
sub menu templat...
3. Klik “Background” untuk mengganti
warna atau gambar latar template,
“Background Images”, klik pada tombol
panah ke bawa...
4. Di bawah Background terdapat
tombol Layout yang isinya ada 3,
yaitu (a) Body Layout, (b) Footer
(c) Layout dan Adjust W...
a. Body Layout Isinya adalah layout body
dari blog, yaitu mengatur letak dan jumlah
sidebar. Sidebar bisa berjumlah 2 atau...
b. Footer Layout adalah jumlah footer yang
Anda pakai, bisa 1, 2 atau 3.
c. Adjust Width berfungsi untuk mengatur
lebar blog dan sidebarnya. Anda bisa
menggeser alat yang ada di situ.
d. Advanced dimana ini adalah menu yang
terakhir, adanya di bawah Layout. Di sini Anda
bisa mengatur banyak hal, misalnya ...
5. Dan jangan sampai Anda lupa menekan
“APPLY TO BLOG” setiap kali Anda ingin
melakukan perubahan pada blog Anda
CONTOH A
dipilih tata letak yang sesuai
Hasilnya
CONTOH B
MENGUBAH BACKGROUND TEMPLATE
HASILNYA
MENGGANTI
TEMPLATE
DARI
DOWNLOAD FREE
TEMPLATES
1. Kunjungi www.btemplates.com
2. Pilih salah satu template, lalu download.
3. Extract terlebih dahulu file template yang
sudah didownload tadi berupa type XML
ke komputer Anda.
3. Selanjutnya klik dasbor blogspot, klik
rancangan serta klik edit HTML.
4. Save dulu template lama yang Anda pakai sekarang.
Siapa tahu Anda tidak suka dengan template baru itu,
Anda bisa kembal...
5. Browsing file yang sudah diekstrak tadi
dengan mengklik “pilih berkas”
kemudian klik tombol “unggah” dan klik
“pratinja...
6. Anda tidak perlu panik jika mendapat pesan seperti
pada gambar di bawah ini. Itu artinya template baru
yang sedang Anda...
7. Selanjutnya klik “lihat blog”.
LENCANA
FACEBOOK DI
BLOG
1. Log In Facebook Anda, masuk ke profil lalu klik
tombol “tambahkan lencana ke situs Anda”
yang berada pada pojok kiri ba...
2. Pilih tempat/situs yang ingin
ditambahkan lencana yaitu klik
“blogger”.
3. Isi data yang diperlukan dan klik
“menambah widget”.
Inilah
tampilan
lencana
facebook
yang telah
ditambah
kan pada
blog.
MENAMBAH
GADGET/WIDG
ET
1. Klik “dasbor” blogspot Anda,
kemudian klik “rancangan” .
2. Klik “Tambah Gadget” kemudian pilih salah
satu gadget yang ingin Anda tambahkan,
misalnya teks penyapaan, klik tombol p...
3. Selanjutnya isi judul gadgets serta
kolom konten yang sudah
disediakan lalu klik “simpan”.
4. Klik “lihat blog” dan lihat hasilnya.
1. Klik “dasbor” blogspot Anda,
kemudian klik tombol
“rancangan” > “Elemen Laman”
2. Klik “Tambah Gadget” lalu pilih
“HTML/Javascript”.
3. Search di google gallery animasi atau
langsung buka pada alamat berikut :
www.widgia.com
lalu copy script salah satu an...
4. Masukkan script tersebut ke dalam kotak
penambah gadget lalu klik “simpan” dan
“lihat blog” Anda.
1. CARANYA SAMA SEPERTI MENAMBAH WIDGET
ANIMASI, YAKNI SEARCH GALLERY WIDGET
KALENDER DI GOOGLE ATAU LANGSUNG PERGI
KE ALA...
2. Masukkan script tersebut ke dalam kotak
penambah gadget lalu klik “simpan” dan
“lihat blog” Anda.
1. Langsung masuk situs berikut,
www.clocklink.com
pilih salah satu widget dan copy scriptnya.
2. Masukkan script tersebut ke dalam kotak
penambah gadget lalu klik “simpan” dan
“lihat blog” Anda.
1. Langsung masuk situs berikut,
www.basicstat.com
pilih salah satu widget dan copy scriptnya.
2. Masukkan script tersebut ke dalam kotak
penambah gadget lalu klik “simpan” dan
“lihat blog” Anda.
MEMASANG
EFEK SALJU
1. Klik “dasbor” blogspot Anda,
kemudian klik tombol
“rancangan” > “Elemen Laman” .
2. Klik “Tambah Gadget” lalu pilih
“HTML/Javascript”.
3. Masukkan script berikut ke dalam
kotak penambah gadget lalu klik
“simpan” dan “lihat blog” Anda.
<script src='http://hb...
ANIMASI
TULISAN
BERPUTAR PADA
KRUSOR
1. Klik “dasbor” blogspot Anda, kemudian klik
tombol :“rancangan” > “Edit HTML”.
2. Beri tanda cheklist pada “Expand Template
Widget” lalu cari kode berikut :
</body>
3. Copy script berikut :
<style type='text/css'>/* Circle Text Styles */#outerCircleText {/* Optional - DO NOT SET FONT-SI...
4. Ubah kata “teks” menjadi kata yang Anda
Inginkan.
Misal “RIA ANKIM08’s Blog” lalu”lihat blog”
<style type='text/css'>/*...
Hasilnya
MEMASANG
EFEK KRUSOR
BINTANG
BERJATUHAN
1. Klik “dasbor” blogspot Anda,
kemudian klik tombol
“rancangan” > “Elemen Laman” .
2. Klik “Tambah Gadget” lalu pilih
“HTML/Javascript”.
3. Pilih warna salah satu dari kode
script berikut :
4. Paste kode script yang dipilih tadi ke
dalam kolom gadget lalu klik “SIMPAN”.
MEMBUAT TEKS
BERJALAN DI
MENU BAR
GOOGLE
1. Masuk dasbor blogspot, klik
“rancangan” serta klik “edit HTML”.
2. Beri tanda cheklist pada “Expand
Template Widget” lalu cari kode berikut
:
</head>
3. Letakkan kode dibawah ini di
atas kode </head>
<script type='text/javascript'>
//<![CDATA[
msg = XXX;
msg = YYY + msg;p...
4. Klik “simpan template” dan
lihat hasilnya
MENAMBAH
BUTTON
FACEBOOK LIKE
1. Klik “dasbor” blogspot Anda, kemudian klik
tombol :“rancangan” > “Edit HTML”.
2. Beri tanda cheklist pada “Expand
Template Widget” lalu cari kode berikut
:
<div class='post-footer'>
3. Pasang kode berikut ini di
bawah kode tersebut lalu klik
“simpan template”.
<iframe allowTransparency='true'
expr:src='...
4. Dan Ini Hasilnya
MEMBUAT
HALAMAN FACEBOOK
DI BLOG KITA
1. Log In Facebook Anda dan buatlah
sebuah halaman link (page link)
Masuk alamat berikut :
http://www.facebook.com/pages/c...
2. Pilih salah satu kategori halaman
yang akan dibuat berikut :
3. Beri nama halaman yang akan
dibuat dan berikan tanda cheklist (v)
pada kolom saya menyetujui
ketentuan lalu klik “mulai...
4. Setelah halaman sudah disetujui,
copy URL page komunitas yang
sudah kita buat.
5. Pilih kategori pilihan nomor 5
“Promosikan halaman ini di situs
WEB Anda” lalu klik “tambahkan
kotak suka”.
6. Pada facebook page URL ini, isi data yang
diminta dan edit kotak facebook page dengan
menempel URL yang dikopy terlebih...
7. Kemudian Anda akan diberi kode
script sebagai berikut, copy salah
satu kode script ini lalu klik “oke”.
8. Masuk “dasbor” blogspot Anda,
kemudian klik tombol
“rancangan” > “Elemen Laman” .
9. Klik “Tambah Gadget” lalu pilih
“HTML/Javascript”.
10.Pastekan script yang telah dikopy tadi ke
dalam kotak penambah gadget lalu klik
“simpan” dan “lihat blog” Anda.
BERIKUT TAMPILAN BLOG SAYA SEBAGIAN
KUNJUNGI BLOG SAYA
www.riapuspitasari108002.blogspot.com
BELAJAR MEMBUAT BLOG UNTUK PEMULA BY RIA PUSPITASARI, S.Pd
BELAJAR MEMBUAT BLOG UNTUK PEMULA BY RIA PUSPITASARI, S.Pd
BELAJAR MEMBUAT BLOG UNTUK PEMULA BY RIA PUSPITASARI, S.Pd
BELAJAR MEMBUAT BLOG UNTUK PEMULA BY RIA PUSPITASARI, S.Pd
BELAJAR MEMBUAT BLOG UNTUK PEMULA BY RIA PUSPITASARI, S.Pd
BELAJAR MEMBUAT BLOG UNTUK PEMULA BY RIA PUSPITASARI, S.Pd
BELAJAR MEMBUAT BLOG UNTUK PEMULA BY RIA PUSPITASARI, S.Pd
Upcoming SlideShare
Loading in …5
×

BELAJAR MEMBUAT BLOG UNTUK PEMULA BY RIA PUSPITASARI, S.Pd

1,776 views

Published on

PPT Membuat Blog bagi Para Pemula

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,776
On SlideShare
0
From Embeds
0
Number of Embeds
361
Actions
Shares
0
Downloads
89
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

BELAJAR MEMBUAT BLOG UNTUK PEMULA BY RIA PUSPITASARI, S.Pd

  1. 1. Membuat Blog Via Blogger OLEH NAMA : RIA PUSPITASARI NIM : ACC 108 002 MATA KULIAH : PENGEMBANGAN MEDIA PEMBELAJARAN
  2. 2. www.themegallery.com 3. MENDAFTAR BLOG 5. MEMPERCANTIK BLOG 4. MENGISI BLOG (POSTING)
  3. 3. PENGERTIAN BLOG Blog atau weblog adalah catatan pribadi seseorang di internet berisi informasi yang sering di update dan kronologis.
  4. 4. Mengapa saya memilih blogger.com ? Karena blogger merupakan layanan gratis 100% dari google, tanpa harus membayar hosting dan domain. Dengan blogger kita bisa membuat situs/blog sendiri dan bisa dilihat atau dibuka dari seluruh penjuru dunia. Karena program ini sangat didukung penuh oleh google, sehingga apabila kita membuat blog disini maka google akan cepat mengindeks blog kita. Alhasil blog kita akan muncul di halaman pencari google.
  5. 5. Persiapan sebelum membuat blok Memiliki account e-mail ; Terkoneksi dengan internet ; Memahami copy dan paste ; Memiliki rancangan isi blog ; Mengumpulkan bahan (foto, artikel, tulisan, dll).
  6. 6. MEMBUAT AKUN E-MAIL DI GOOGLE
  7. 7. 1. Buka http://www.gmail.com pada web browser Anda.
  8. 8. 2. Selanjutnya pilih “BUAT AKUN”
  9. 9. 3. Isi identitas Anda pada formulir pendaftaran dengan benar.
  10. 10. Untuk pengisian verifikasi kata, jika sulit dibaca, bisa diganti dengan meng-klik pada simbol kecil yang ada di sebelah kanan kotak isian verfikasi kata. Klik di sini jika kode di atas sulit dibaca Masukkan kode pada kolom
  11. 11. 4. Kemudian klik tombol “Saya menerima. Buat akun saya”.
  12. 12. 5. Setelah mengklik akan muncul halaman verifikasi akun. Masukkan nomor telepon Anda agar google mengirim kode verifikasi. Kemudian klik pada “kirim kode verifikasi ke ponsel saya”.
  13. 13. 6. Masukkan kode verifikasi yang telah dikirim melalui sms. Klik pada “verifikasi”.
  14. 14. 7. Dan selamat, Anda telah memiliki akun email di gmail ! Kemudian, untuk mencoba menampilkan email Anda , lansung saja klik tombol “saya siap – tunjukkan akun saya”.
  15. 15. 9. Akan muncul halaman seperti ini. Anda akan dibawa ke dalam jendela kotak masuk email Anda, untuk pertama kali ada satu pesan masuk dari gmail sendiri. Untuk membukanya, klik saja pesan yang tampil pada pilihan kotak masuk.
  16. 16. MENDAFTAR BLOG
  17. 17. 1. BUKA ALAMAT WWW.BLOGGER.COM
  18. 18. 2. KEMUDIAN LOGIN MENGGUNAKAN AKUN GMAIL DAN PASSWORDNYA, KLIK TOMBOL “MASUK”.
  19. 19. 3.Isi Nama tampilan serta beri tanda centang pada kolom “saya menerima Persyaratan dan Layanan” lalu klik “LANJUTKAN”.
  20. 20. 4. JIKA BERHASIL LOGGIN AKAN MUNCUL TAMPILAN DASHBOARD. UNTUK MEMPERMUDAH MENGENALI BLOG, ANDA BISA MENGGANTI BAHASA DI POJOK KANAN ATAS. ANDA JUGA BISA MENGGUNAKAN MODEL BLOGGER YANG BARU DENGAN MENGKLIK TOMBOL “COBA ANTARMUKA BLOGGER YANG DIPERBARUI”.
  21. 21. 5. KLIK TOMBOL PILIHAN “CIPTAKAN BLOG ANDA”.
  22. 22. 6. KETIK JUDUL BLOG DAN ALAMAT BLOG AGAR PENGUNJUNG DAPAT MENGAKSES BLOG ANDA, KEMUDIAN CEK KETERSEDIAAN UNTUK MENGETAHUI APAKAH ALAMAT BLOG TERSEBUT TERSEDIA SERTA PILIHLAH SALAH SATU TEMPLATE YANG DISEDIAKAN BLOGGER. KEMUDIAN KLIK TOMBOL “BUAT BLOG”.
  23. 23. 7. “BLOG ANDA SUDAH JADI !, UNTUK MELIHAT HASIL TAMPILAN, KLIK TOMBOL “LIHAT BLOG”.
  24. 24. BERIKUT TAMPILANNYA
  25. 25. 1. Klik tombol “Entri Baru”.
  26. 26. 2. Tuliskan judul dan masukan artikel yang ingin Anda tempel, lalu klik “Publikasikan”.
  27. 27. Inilah artikel yang telah dipublikasikan
  28. 28. MEMPERCANTIK BLOG
  29. 29. 1. Mengedit profil 2. Mendesain template dari blog 3. Mengganti template dari download free template 4. Lencana facebook di blog 5. Menambah gadget/widget 6. Memasang efek salju 7. Animasi tulisan berputar pada krusor 8. Memasang efek krusor bintang berjatuhan 9. Membuat teks berjalan di menu bar google 10.Menambah button facebook like 11.Membuat halaman facebook blog kita
  30. 30. Karena saya termasuk pemula di blogger, maka untuk memudahkan dalam mempelajarinya, saya mempercantik blog saya melalui tampilan blogger yang lama/lawas dengan cara mengubah tampilannya terlebih dahulu, ialah sebagai berikut.
  31. 31. 1.Klik tombol simbol yang diberi tanda panah.
  32. 32. 2. Klik pilihan “Antarmuka Blogger Lawas”.
  33. 33. MENGEDIT PROFIL
  34. 34. 1. Klik tombol pilihan “Edit Profil”.
  35. 35. 2. Isi data diri, unggah foto Anda lalu klik tombol “Simpan Profil”. EDITPROFIL UNGGAH FOTO SIMPAN PROFIL
  36. 36. INILAH TAMPILAN PROFIL YANG TELAH DIPERBAHARUI
  37. 37. MENDESAIN TEMPLATE DARI BLOG
  38. 38. 1. Klik dasbor blogspot, klik pada tombol “Rancangan”, kemudian klik pada tombol “Perancang Template”.
  39. 39. 2. Pilih salah satu template sesuai dengan keinginan Anda. Pada setiap pilihan template terdapat beberapa sub menu template.
  40. 40. 3. Klik “Background” untuk mengganti warna atau gambar latar template, “Background Images”, klik pada tombol panah ke bawah yang berada di samping kanan maka nanti akan muncul beberapa pilihan, begitu juga pada menu “Main color theme”. Desainlah sesuai selera.
  41. 41. 4. Di bawah Background terdapat tombol Layout yang isinya ada 3, yaitu (a) Body Layout, (b) Footer (c) Layout dan Adjust Width.
  42. 42. a. Body Layout Isinya adalah layout body dari blog, yaitu mengatur letak dan jumlah sidebar. Sidebar bisa berjumlah 2 atau 3. Bisa juga tidak ada. Letaknya bisa di kiri atau kanan dari post area. Tergantung pilihan Anda.
  43. 43. b. Footer Layout adalah jumlah footer yang Anda pakai, bisa 1, 2 atau 3.
  44. 44. c. Adjust Width berfungsi untuk mengatur lebar blog dan sidebarnya. Anda bisa menggeser alat yang ada di situ.
  45. 45. d. Advanced dimana ini adalah menu yang terakhir, adanya di bawah Layout. Di sini Anda bisa mengatur banyak hal, misalnya jenis huruf, warna huruf, format huruf, dan lain sebagainya.
  46. 46. 5. Dan jangan sampai Anda lupa menekan “APPLY TO BLOG” setiap kali Anda ingin melakukan perubahan pada blog Anda
  47. 47. CONTOH A dipilih tata letak yang sesuai
  48. 48. Hasilnya
  49. 49. CONTOH B MENGUBAH BACKGROUND TEMPLATE
  50. 50. HASILNYA
  51. 51. MENGGANTI TEMPLATE DARI DOWNLOAD FREE TEMPLATES
  52. 52. 1. Kunjungi www.btemplates.com
  53. 53. 2. Pilih salah satu template, lalu download.
  54. 54. 3. Extract terlebih dahulu file template yang sudah didownload tadi berupa type XML ke komputer Anda.
  55. 55. 3. Selanjutnya klik dasbor blogspot, klik rancangan serta klik edit HTML.
  56. 56. 4. Save dulu template lama yang Anda pakai sekarang. Siapa tahu Anda tidak suka dengan template baru itu, Anda bisa kembali menggunakan template lama Anda, yaitu dengan Klik ”Download Full Template” dan simpan file template lama tersebut di hardisk Anda.
  57. 57. 5. Browsing file yang sudah diekstrak tadi dengan mengklik “pilih berkas” kemudian klik tombol “unggah” dan klik “pratinjau” atau “simpan template”.
  58. 58. 6. Anda tidak perlu panik jika mendapat pesan seperti pada gambar di bawah ini. Itu artinya template baru yang sedang Anda instal tidak mempunyai widget yang ditunjukkan. Anda bisa mempertahankan widget Anda, tapi tampilannya mungkin akan kacau. Silahkan Anda hapus saja, yang penting Anda sudah mem backed up semua widget sebagaimana disarankan di atas.
  59. 59. 7. Selanjutnya klik “lihat blog”.
  60. 60. LENCANA FACEBOOK DI BLOG
  61. 61. 1. Log In Facebook Anda, masuk ke profil lalu klik tombol “tambahkan lencana ke situs Anda” yang berada pada pojok kiri bawah profil facebook.
  62. 62. 2. Pilih tempat/situs yang ingin ditambahkan lencana yaitu klik “blogger”.
  63. 63. 3. Isi data yang diperlukan dan klik “menambah widget”.
  64. 64. Inilah tampilan lencana facebook yang telah ditambah kan pada blog.
  65. 65. MENAMBAH GADGET/WIDG ET
  66. 66. 1. Klik “dasbor” blogspot Anda, kemudian klik “rancangan” .
  67. 67. 2. Klik “Tambah Gadget” kemudian pilih salah satu gadget yang ingin Anda tambahkan, misalnya teks penyapaan, klik tombol pilihan “teks”.
  68. 68. 3. Selanjutnya isi judul gadgets serta kolom konten yang sudah disediakan lalu klik “simpan”.
  69. 69. 4. Klik “lihat blog” dan lihat hasilnya.
  70. 70. 1. Klik “dasbor” blogspot Anda, kemudian klik tombol “rancangan” > “Elemen Laman”
  71. 71. 2. Klik “Tambah Gadget” lalu pilih “HTML/Javascript”.
  72. 72. 3. Search di google gallery animasi atau langsung buka pada alamat berikut : www.widgia.com lalu copy script salah satu animasinya.
  73. 73. 4. Masukkan script tersebut ke dalam kotak penambah gadget lalu klik “simpan” dan “lihat blog” Anda.
  74. 74. 1. CARANYA SAMA SEPERTI MENAMBAH WIDGET ANIMASI, YAKNI SEARCH GALLERY WIDGET KALENDER DI GOOGLE ATAU LANGSUNG PERGI KE ALAMAT BERIKUT LALU COPY SCRIPT SALAH SATU WIDGET KALENDER YANG ANDA PILIH. free-blog-content.com
  75. 75. 2. Masukkan script tersebut ke dalam kotak penambah gadget lalu klik “simpan” dan “lihat blog” Anda.
  76. 76. 1. Langsung masuk situs berikut, www.clocklink.com pilih salah satu widget dan copy scriptnya.
  77. 77. 2. Masukkan script tersebut ke dalam kotak penambah gadget lalu klik “simpan” dan “lihat blog” Anda.
  78. 78. 1. Langsung masuk situs berikut, www.basicstat.com pilih salah satu widget dan copy scriptnya.
  79. 79. 2. Masukkan script tersebut ke dalam kotak penambah gadget lalu klik “simpan” dan “lihat blog” Anda.
  80. 80. MEMASANG EFEK SALJU
  81. 81. 1. Klik “dasbor” blogspot Anda, kemudian klik tombol “rancangan” > “Elemen Laman” .
  82. 82. 2. Klik “Tambah Gadget” lalu pilih “HTML/Javascript”.
  83. 83. 3. Masukkan script berikut ke dalam kotak penambah gadget lalu klik “simpan” dan “lihat blog” Anda. <script src='http://hbhost.googlecode.com/files/snow.js' type='text/javascript'> </script>
  84. 84. ANIMASI TULISAN BERPUTAR PADA KRUSOR
  85. 85. 1. Klik “dasbor” blogspot Anda, kemudian klik tombol :“rancangan” > “Edit HTML”.
  86. 86. 2. Beri tanda cheklist pada “Expand Template Widget” lalu cari kode berikut : </body>
  87. 87. 3. Copy script berikut : <style type='text/css'>/* Circle Text Styles */#outerCircleText {/* Optional - DO NOT SET FONT-SIZE HERE, SET IT IN THE SCRIPT */font- style: italic;font-weight: bold;font-family: 'comic sans ms', verdana, arial;color: #999;/* End Optional *//* Start Required - Do Not Edit */position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}#outerCircleText div {position: relative;}#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}/* End Required *//* End Circle Text Styles */</style><script type='text/javascript'>//<![CDATA[/* Circling text trail- Tim TiltonWebsite: http://www.tempermedia.com/Visit: http://www.dynamicdrive.com/ for Original Source and tons of scriptsModified Here for more flexibility and modern browser supportModifications as first seen in http://www.dynamicdrive.com/forums/username:jscheuer1 - This notice must remain for legal use*/;(function(){// Your message here (QUOTED STRING)var msg = "test";/* THE REST OF THE EDITABLE VALUES BELOW ARE ALL UNQUOTED NUMBERS */// Set font's style size for calculating dimensions// Set to number of desired pixels font size (decimal and negative numbers not allowed)var size = 24;// Set both to 1 for plain circle, set one of them to 2 for oval// Other numbers & decimals can have interesting effects, keep these low (0 to 3)var circleY = 0.75; var circleX = 2;// The larger this divisor, the smaller the spaces between letters// (decimals allowed, not negative numbers)var letter_spacing = 5;// The larger this multiplier, the bigger the circle/oval// (decimals allowed, not negative numbers, some rounding is applied)var diameter = 10;// Rotation speed, set it negative if you want it to spin clockwise (decimals allowed)var rotation = 0.4;// This is not the rotation speed, its the reaction speed, keep low!// Set this to 1 or a decimal less than one (decimals allowed, not negative numbers)var speed = 0.3;////////////////////// Stop Editing //////////////////////if (!window.addEventListener && !window.attachEvent || !document.createElement) return;msg = msg.split('');var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],o = document.createElement('div'), oi = document.createElement('div'),b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement : document.body,mouse = function(e){e = e || window.event;ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-positionxmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position},makecircle = function(){ // rotation/positioningif(init.nopy){o.style.top = (b || document.body).scrollTop + 'px';o.style.left = (b || document.body).scrollLeft + 'px';};currStep -= rotation;for (var d, i = n; i > -1; --i){ // makes the circled = document.getElementById('iemsg' + i).style;d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) + 'px';d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';};},drag = function(){ // makes the resistancey[0] = Y[0] += (ymouse - Y[0]) * speed;x[0] = X[0] += (xmouse - 20 - X[0]) * speed;for (var i = n; i > 0; --i){y[i] = Y[i] += (y[i-1] - Y[i]) * speed;x[i] = X[i] += (x[i-1] - X[i]) * speed;};makecircle();},init = function(){ // appends message divs, & sets initial values for positioning arraysif(!isNaN(window.pageYOffset)){ymouse += window.pageYOffset;xmouse += window.pageXOffset;} else init.nopy = true;for (var d, i = n; i > -1; --i){d = document.createElement('div'); d.id = 'iemsg' + i;d.style.height = d.style.width = a + 'px';d.appendChild(document.createTextNode(msg[i]));oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;};o.appendChild(oi); document.body.appendChild(o);setInterval(drag, 25);},ascroll = function(){ymouse += window.pageYOffset;xmouse += window.pageXOffset;window.removeEventListener('scroll', ascroll, false);};o.id = 'outerCircleText'; o.style.fontSize = size + 'px';if(window.addEventListener){window.addEventListener('load', init, false);document.addEventListener('mouseover', mouse, false);document.addEventListener('mousemove', mouse, false);if (/Apple/.test(navigator.vendor))window.addEventListener('scroll', ascroll, false);}else if (window.attachEvent){window.attachEvent('onload', init);document.attachEvent('onmousemove', mouse);};})();//]]></script>
  88. 88. 4. Ubah kata “teks” menjadi kata yang Anda Inginkan. Misal “RIA ANKIM08’s Blog” lalu”lihat blog” <style type='text/css'>/* Circle Text Styles */#outerCircleText {/* Optional - DO NOT SET FONT-SIZE HERE, SET IT IN THE SCRIPT */font- style: italic;font-weight: bold;font-family: 'comic sans ms', verdana, arial;color: #999;/* End Optional *//* Start Required - Do Not Edit */position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}#outerCircleText div {position: relative;}#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}/* End Required *//* End Circle Text Styles */</style><script type='text/javascript'>//<![CDATA[/* Circling text trail- Tim TiltonWebsite: http://www.tempermedia.com/Visit: http://www.dynamicdrive.com/ for Original Source and tons of scriptsModified Here for more flexibility and modern browser supportModifications as first seen in http://www.dynamicdrive.com/forums/username:jscheuer1 - This notice must remain for legal use*/;(function(){// Your message here (QUOTED STRING)var msg = "test";/* THE REST OF THE EDITABLE VALUES BELOW ARE ALL UNQUOTED NUMBERS */// Set font's style size for calculating dimensions// Set to number of desired pixels font size (decimal and negative numbers not allowed)var size = 24;// Set both to 1 for plain circle, set one of them to 2 for oval// Other numbers & decimals can have interesting effects, keep these low (0 to 3)var circleY = 0.75; var circleX = 2;// The larger this divisor, the smaller the spaces between letters// (decimals allowed, not negative numbers)var letter_spacing = 5;// The larger this multiplier, the bigger the circle/oval// (decimals allowed, not negative numbers, some rounding is applied)var diameter = 10;// Rotation speed, set it negative if you want it to spin clockwise (decimals allowed)var rotation = 0.4;// This is not the rotation speed, its the reaction speed, keep low!// Set this to 1 or a decimal less than one (decimals allowed, not negative numbers)var speed = 0.3;////////////////////// Stop Editing //////////////////////if (!window.addEventListener && !window.attachEvent || !document.createElement) return;msg = msg.split('');var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],o = document.createElement('div'), oi = document.createElement('div'),b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement : document.body,mouse = function(e){e = e || window.event;ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-positionxmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position},makecircle = function(){ // rotation/positioningif(init.nopy){o.style.top = (b || document.body).scrollTop + 'px';o.style.left = (b || document.body).scrollLeft + 'px';};currStep -= rotation;for (var d, i = n; i > -1; --i){ // makes the circled = document.getElementById('iemsg' + i).style;d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) + 'px';d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';};},drag = function(){ // makes the resistancey[0] = Y[0] += (ymouse - Y[0]) * speed;x[0] = X[0] += (xmouse - 20 - X[0]) * speed;for (var i = n; i > 0; --i){y[i] = Y[i] += (y[i-1] - Y[i]) * speed;x[i] = X[i] += (x[i-1] - X[i]) * speed;};makecircle();},init = function(){ // appends message divs, & sets initial values for positioning arraysif(!isNaN(window.pageYOffset)){ymouse += window.pageYOffset;xmouse += window.pageXOffset;} else init.nopy = true;for (var d, i = n; i > -1; --i){d = document.createElement('div'); d.id = 'iemsg' + i;d.style.height = d.style.width = a + 'px';d.appendChild(document.createTextNode(msg[i]));oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;};o.appendChild(oi); document.body.appendChild(o);setInterval(drag, 25);},ascroll = function(){ymouse += window.pageYOffset;xmouse += window.pageXOffset;window.removeEventListener('scroll', ascroll, false);};o.id = 'outerCircleText'; o.style.fontSize = size + 'px';if(window.addEventListener){window.addEventListener('load', init, false);document.addEventListener('mouseover', mouse, false);document.addEventListener('mousemove', mouse, false);if (/Apple/.test(navigator.vendor))window.addEventListener('scroll', ascroll, false);}else if (window.attachEvent){window.attachEvent('onload', init);document.attachEvent('onmousemove', mouse);};})();//]]></script>
  89. 89. Hasilnya
  90. 90. MEMASANG EFEK KRUSOR BINTANG BERJATUHAN
  91. 91. 1. Klik “dasbor” blogspot Anda, kemudian klik tombol “rancangan” > “Elemen Laman” .
  92. 92. 2. Klik “Tambah Gadget” lalu pilih “HTML/Javascript”.
  93. 93. 3. Pilih warna salah satu dari kode script berikut :
  94. 94. 4. Paste kode script yang dipilih tadi ke dalam kolom gadget lalu klik “SIMPAN”.
  95. 95. MEMBUAT TEKS BERJALAN DI MENU BAR GOOGLE
  96. 96. 1. Masuk dasbor blogspot, klik “rancangan” serta klik “edit HTML”.
  97. 97. 2. Beri tanda cheklist pada “Expand Template Widget” lalu cari kode berikut : </head>
  98. 98. 3. Letakkan kode dibawah ini di atas kode </head> <script type='text/javascript'> //<![CDATA[ msg = XXX; msg = YYY + msg;pos = 0; function scrollMSG() { document.title = msg.substring(pos, msg.length) + msg.substring(0, pos); pos++; if (pos > msg.length) pos = 0 window.setTimeout("scrollMSG()",200); } scrollMSG(); //]]> </script>  Ganti teks berwarna merah dengan teks yang ingin Anda tampilkan.  Angka 200 menunjukkan kecepatan teks. Semakin kecil angka, maka semakin cepat kecepatan teks yang berjalan pada menu bar tersebut.
  99. 99. 4. Klik “simpan template” dan lihat hasilnya
  100. 100. MENAMBAH BUTTON FACEBOOK LIKE
  101. 101. 1. Klik “dasbor” blogspot Anda, kemudian klik tombol :“rancangan” > “Edit HTML”.
  102. 102. 2. Beri tanda cheklist pada “Expand Template Widget” lalu cari kode berikut : <div class='post-footer'>
  103. 103. 3. Pasang kode berikut ini di bawah kode tersebut lalu klik “simpan template”. <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;action=like&amp;layout=button_count&amp;show_faces=false&amp;width=100 &amp;font=arial&amp;colorscheme=dark&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px; height:21px;'/>
  104. 104. 4. Dan Ini Hasilnya
  105. 105. MEMBUAT HALAMAN FACEBOOK DI BLOG KITA
  106. 106. 1. Log In Facebook Anda dan buatlah sebuah halaman link (page link) Masuk alamat berikut : http://www.facebook.com/pages/create.php
  107. 107. 2. Pilih salah satu kategori halaman yang akan dibuat berikut :
  108. 108. 3. Beri nama halaman yang akan dibuat dan berikan tanda cheklist (v) pada kolom saya menyetujui ketentuan lalu klik “mulai”.
  109. 109. 4. Setelah halaman sudah disetujui, copy URL page komunitas yang sudah kita buat.
  110. 110. 5. Pilih kategori pilihan nomor 5 “Promosikan halaman ini di situs WEB Anda” lalu klik “tambahkan kotak suka”.
  111. 111. 6. Pada facebook page URL ini, isi data yang diminta dan edit kotak facebook page dengan menempel URL yang dikopy terlebih dahulu tadi. Ganti kata yang dilingkari dengan alamat yang dikopy, kemudian klik tombol Get kode !
  112. 112. 7. Kemudian Anda akan diberi kode script sebagai berikut, copy salah satu kode script ini lalu klik “oke”.
  113. 113. 8. Masuk “dasbor” blogspot Anda, kemudian klik tombol “rancangan” > “Elemen Laman” .
  114. 114. 9. Klik “Tambah Gadget” lalu pilih “HTML/Javascript”.
  115. 115. 10.Pastekan script yang telah dikopy tadi ke dalam kotak penambah gadget lalu klik “simpan” dan “lihat blog” Anda.
  116. 116. BERIKUT TAMPILAN BLOG SAYA SEBAGIAN
  117. 117. KUNJUNGI BLOG SAYA www.riapuspitasari108002.blogspot.com

×