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

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
kronologis.

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.

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).

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 kanan kotak
isian verfikasi kata.
Klik di sini jika kode di
atas sulit dibaca
Masukkan
kode pada
kolom

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.
Kemudian klik pada “kirim kode verifikasi
ke ponsel saya”.

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 klik
tombol “saya siap – tunjukkan akun saya”.

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.

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 POJOK KANAN ATAS.
ANDA JUGA BISA
MENGGUNAKAN MODEL
BLOGGER YANG BARU
DENGAN MENGKLIK
TOMBOL
“COBA ANTARMUKA
BLOGGER YANG
DIPERBARUI”.

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 APAKAH ALAMAT BLOG
TERSEBUT TERSEDIA SERTA PILIHLAH SALAH SATU
TEMPLATE YANG DISEDIAKAN BLOGGER. KEMUDIAN KLIK
TOMBOL “BUAT BLOG”.

7. “BLOG ANDA SUDAH JADI !, UNTUK
MELIHAT HASIL TAMPILAN, KLIK
TOMBOL “LIHAT BLOG”.

1. Klik tombol “Entri Baru”.

2. Tuliskan judul dan masukan artikel
yang ingin Anda tempel, lalu klik
“Publikasikan”.

Inilah artikel yang telah
dipublikasikan

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

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.

1.Klik tombol simbol yang diberi tanda
panah.

2. Klik pilihan “Antarmuka Blogger Lawas”.

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

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 template.

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.

4. Di bawah Background terdapat
tombol Layout yang isinya ada 3,
yaitu (a) Body Layout, (b) Footer
(c) Layout dan Adjust Width.

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.

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 jenis
huruf, warna huruf, format huruf, dan lain
sebagainya.

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

CONTOH B
MENGUBAH BACKGROUND TEMPLATE

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 kembali menggunakan template lama Anda,
yaitu dengan Klik
”Download Full Template” dan simpan file template
lama tersebut di hardisk Anda.

5. Browsing file yang sudah diekstrak tadi
dengan mengklik “pilih berkas”
kemudian klik tombol “unggah” dan klik
“pratinjau” atau “simpan template”.

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.

7. Selanjutnya klik “lihat blog”.

1. Log In Facebook Anda, masuk ke profil lalu klik
tombol “tambahkan lencana ke situs Anda”
yang berada pada pojok kiri bawah profil
facebook.

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.

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 pilihan
“teks”.

3. Selanjutnya isi judul gadgets serta
kolom konten yang sudah
disediakan lalu klik “simpan”.

4. Klik “lihat blog” dan lihat hasilnya.

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 animasinya.

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 ALAMAT BERIKUT LALU COPY SCRIPT SALAH
SATU WIDGET KALENDER YANG ANDA PILIH.
free-blog-content.com

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.

1. Langsung masuk situs berikut,
www.basicstat.com
pilih salah satu widget dan copy scriptnya.

“rancangan” > “Elemen Laman” .

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>

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-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>

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>

MEMASANG
EFEK KRUSOR
BINTANG
BERJATUHAN

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;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.

4. Klik “simpan template” dan
lihat hasilnya

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='"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;'/>

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/create.php

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 dahulu tadi.
Ganti kata yang dilingkari dengan alamat yang
dikopy, kemudian klik tombol Get kode !

7. Kemudian Anda akan diberi kode
script sebagai berikut, copy salah
satu kode script ini lalu klik “oke”.

8. Masuk “dasbor” blogspot Anda,
“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

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

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

Similar to BELAJAR MEMBUAT BLOG UNTUK PEMULA BY RIA PUSPITASARI, S.Pd (20)

Recently uploaded

Recently uploaded (20)

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