3. PENGERTIAN BLOG
Blog atau weblog
adalah catatan pribadi
seseorang di internet
berisi informasi yang
sering di update dan
kronologis.
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. 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).
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
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. 6. Masukkan kode verifikasi yang telah dikirim
melalui sms. Klik pada “verifikasi”.
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. 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.
18. 2. KEMUDIAN LOGIN MENGGUNAKAN
AKUN GMAIL DAN PASSWORDNYA,
KLIK TOMBOL “MASUK”.
19. 3.Isi Nama tampilan serta beri tanda
centang pada kolom “saya menerima
Persyaratan dan Layanan” lalu klik
“LANJUTKAN”.
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”.
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. 7. “BLOG ANDA SUDAH JADI !, UNTUK
MELIHAT HASIL TAMPILAN, KLIK
TOMBOL “LIHAT BLOG”.
30. 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
31. 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.
39. 1. Klik dasbor blogspot, klik pada tombol
“Rancangan”, kemudian klik pada
tombol “Perancang Template”.
40. 2. Pilih salah satu template sesuai
dengan keinginan Anda. Pada setiap
pilihan template terdapat beberapa
sub menu template.
41. 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.
42. 4. Di bawah Background terdapat
tombol Layout yang isinya ada 3,
yaitu (a) Body Layout, (b) Footer
(c) Layout dan Adjust Width.
43. 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.
44. b. Footer Layout adalah jumlah footer yang
Anda pakai, bisa 1, 2 atau 3.
45. c. Adjust Width berfungsi untuk mengatur
lebar blog dan sidebarnya. Anda bisa
menggeser alat yang ada di situ.
46. 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.
47. 5. Dan jangan sampai Anda lupa menekan
“APPLY TO BLOG” setiap kali Anda ingin
melakukan perubahan pada blog Anda
57. 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.
58. 5. Browsing file yang sudah diekstrak tadi
dengan mengklik “pilih berkas”
kemudian klik tombol “unggah” dan klik
“pratinjau” atau “simpan template”.
59. 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.
76. 3. Search di google gallery animasi atau
langsung buka pada alamat berikut :
www.widgia.com
lalu copy script salah satu animasinya.
77. 4. Masukkan script tersebut ke dalam kotak
penambah gadget lalu klik “simpan” dan
“lihat blog” Anda.
78.
79. 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
80. 2. Masukkan script tersebut ke dalam kotak
penambah gadget lalu klik “simpan” dan
“lihat blog” Anda.
81.
82. 1. Langsung masuk situs berikut,
www.clocklink.com
pilih salah satu widget dan copy scriptnya.
83. 2. Masukkan script tersebut ke dalam kotak
penambah gadget lalu klik “simpan” dan
“lihat blog” Anda.
84.
85. 1. Langsung masuk situs berikut,
www.basicstat.com
pilih salah satu widget dan copy scriptnya.
86. 2. Masukkan script tersebut ke dalam kotak
penambah gadget lalu klik “simpan” dan
“lihat blog” Anda.
90. 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>
93. 2. Beri tanda cheklist pada “Expand Template
Widget” lalu cari kode berikut :
</body>
94. 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>
95. 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>
103. 1. Masuk dasbor blogspot, klik
“rancangan” serta klik “edit HTML”.
104. 2. Beri tanda cheklist pada “Expand
Template Widget” lalu cari kode berikut
:
</head>
105. 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.
109. 2. Beri tanda cheklist pada “Expand
Template Widget” lalu cari kode berikut
:
<div class='post-footer'>
110. 3. Pasang kode berikut ini di
bawah kode tersebut lalu klik
“simpan template”.
<iframe allowTransparency='true'
expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url +
"&action=like&layout=button_count&show_faces=false&width=100
&font=arial&colorscheme=dark"' frameborder='0' scrolling='no'
style='border:none; overflow:hidden; width:100px; height:21px;'/>
113. 1. Log In Facebook Anda dan buatlah
sebuah halaman link (page link)
Masuk alamat berikut :
http://www.facebook.com/pages/create.php
114. 2. Pilih salah satu kategori halaman
yang akan dibuat berikut :
115. 3. Beri nama halaman yang akan
dibuat dan berikan tanda cheklist (v)
pada kolom saya menyetujui
ketentuan lalu klik “mulai”.
116. 4. Setelah halaman sudah disetujui,
copy URL page komunitas yang
sudah kita buat.
117. 5. Pilih kategori pilihan nomor 5
“Promosikan halaman ini di situs
WEB Anda” lalu klik “tambahkan
kotak suka”.
118. 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 !
119. 7. Kemudian Anda akan diberi kode
script sebagai berikut, copy salah
satu kode script ini lalu klik “oke”.
120. 8. Masuk “dasbor” blogspot Anda,
kemudian klik tombol
“rancangan” > “Elemen Laman” .