Tutorial membuat blog memberikan panduan lengkap tentang cara membuat blog melalui situs blogger, termasuk menambahkan fitur-fitur seperti slider gambar, kalender, jam, buku tamu, dan playlist musik untuk mempercantik tampilan blog. Langkah-langkahnya mudah diikuti dengan menyertakan kode yang perlu dicopy-paste.

1. TUTORIAL MEMBUAT BLOG
Nama Kelompok :
Deylen Reza M 3311131001
Rizki Mulia Insani 3311131008
Moh. Taufik Hudayana 3311131022
Alfa Oktavia 3311131029
Siti Nurohmah H. 3311131036
Ronalisa 3311131044

2. Sejarah BLOG
 Blog adalah kependekan dari Weblog, istilah ini
pertama kali digunakan oleh Jorn Barger pada
bulan Desember 1997. Jorn Barger menggunakan
istilah Weblog untuk menyebut kelompok website
pribadi yang selalu diupdate secara kontinyu dan
berisi link-link ke website lain yang mereka anggap
menarik disertai dengan komentar-komentar
mereka sendiri.

3.  Blog pertama kemungkinan besar adalah halaman
Whats New pada browser Mosaic yang dibuat oleh
Marc Andersen pada tahun 1993.
 Kemudian pada Januari 1994 Justin Hall memulai
website pribadinya Justins Home Page yang
kemudian berubah menjadi Links from the
Underground yang mungkin dapat disebut sebagai
Blog pertama seperti yang kita kenal sekarang.

4.  Pada Agustus 1999 sebuah perusahaan Silicon
Valley bernama Pyra Lab meluncurkan layanan
Blogger.com yang memungkinkan siapapun dengan
pengetahuan dasar tentang HTML dapat
menciptakan Blog-nya sendiri secara online dan
gratis.

5. tutorial pembuatan blog melalui situs
blogger.
1. Memiliki akun email bawaan dari google yaitu
gmail
2. Masuk ke situs blogger.com
3. Masuk dengan email dan password yang sama
dengan gmail

7. 4. Konfirmasikan profil
kamu, jika kamu ingin
mengalihkan ke profil
blogger terbatas klik
saja. Lihat tulisan yang
digaris merah.
Kemudian lanjutkan ke
blogger. Kamu juga
bisa mengatur
penggunaan bahasa,
lihat ujung atas sebelah
kanan

8. 5. Pilih blog baru

9. 6. Tulis judul dan nama
blog yang diinginkan,
pilih template
selanjutnya pilih buat
blog

10. 8. Blog sudah jadi. Tampilannya seperti dibawah ini
Kamu sudah dapat memposting artikel dengan cara pilih entri
baru.

11. KOMPONEN FUNGSI
Entri baru Memposting segala hal
Ikhtisar Data statistik yang berkaitan dengan
blog (jumlah pengunjung, jumlah
posting dan komentar dst)
Laman Halaman statis
Komentar Mengedit komentar pengunjung
Statistik Data lebih rinci tentang
perkembangan trafik pengunjung
blog
Tata letak Menambahdan mengubah posisi
widget
Template Mengedit dan merubah template
Setelan Mengatur setelan blog seperti artikel
di homepage, komentar dimoderasi
atau tidak, pengaturan bahasa
Post Daftar artikel yang sudah ditulis dan
diterbitkanatau masih dalam konsep

12. tips dan trik mempercantik tampilan
blog.
1. Suatu blog harus memiliki
sebuah laman. Pada
penambahan laman baru
kamu bisa memasang link
ataupun suatu posting baru
dengan halaman berbeda.
Itu adalah keunggulan dari
tool ini. Namun tulisan dan
link yang kamu posting di
laman baru hanya dapat
menjadi satu halaman tidak
seperti beranda ataupun
home.
a) Login blogger
b) Pilih Laman
c) Tulis judul dan isi postingan
d) Dan publikasikan

13. Merubah template blog
Banyak situs yang menawarkan
berbagai rancangan template unik
dengan free. Salah satunya
adalah zoomtemplate.com atau
btemplate.com. Berikut beberapa
langkah untuk mengganti tampilan
template blog agar lebih menarik.
1. Masuk ke situs
zoomtemplate.com
2. Download salah satu template
sesuai keinginan. Dapat pula
berdasarkan kategori yang
diinginkan
3. File biasanya dalam bentuk
winrar sehingga perlu diekstrak
terlebih dahulu
4. Login ke blogger
5. Klik template. Mungkin kamu
perlu langkah pencegahan yaitu
membackup template lama
terlebih dahulu
6. Pilih Cadangkan/pulihkan
7. Pilih dan unduh template yang
sudah di ekstrak
8. Berikut contoh hasil unduh
template healthy food

14. Untuk menghilangkan atau menyembunyikan navbar bawaan asli
dari blog, kamu dapat pilih tata letak > edit navbar > pilih off dan
simpan.

15. Berikut langkah-langkahnya.
1. Login blogger, pilih template
2. Pilih edit html dan copy paste kode berikut ini di
atas kode ]]></b:skin>

16. /* SLIDESHOW */
#slider-holder{width:540px;height:300px;overflow:hidden;margin-left:-15px;padding:0}
#s3slider{width:540px;height:300px;position:relative;overflow:hidden}
#s3sliderContent{width:540px;position:absolute;top:0;margin-left:0}
.s3sliderImage{float:left;position:relative;display:none}
.s3sliderImage span{position:absolute;left:0;font-weight:700;font-
size:12px;color:#fff;height:70px;width:540px;background-
color:#4e4d3c;filter:alpha(opacity=70);-moz-opacity:0.7;-khtml-
opacity:0.7;opacity:0.7;display:none;bottom:0;padding:10px}
.s3sliderImage span a.featured-title:link,.s3sliderImage span a.featured-
title:visited{color:#FFF;font-size:14px;padding:0 0 2px}
.s3sliderImage span a.featured-title:hover{color:#999}
.s3sliderImage span a:link,.s3sliderImage span a:visited{color:#888}
.s3sliderImage span a:hover{color:#555}

19. 4. Setelah itu siapkan gambar dan url yang akan ditampilkan
dalam menu slideshow, jika sudah ada gambar dan url-nya, copy
pastekan kode berikut setelah kode <div id='main-wrapper'>

21. <b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='slider-wrapper'>
<div id='slider'>
<a href='#'>
<img alt='' src='http://3.bp.blogspot.com/--
kia7VxOMdo/T6QjW3vJgoI/AAAAAAAACZM/oTbMMzbj
OXY/s1600/slider-1.jpg' title='#slide-caption-one'/></a>
5. Mengedit gambar pada slider bawaan blog
Untuk mengganti gambar dan keterangan atau menambahkan link
pada slider blog bawaan dapat dilakukan dengan sederhana.
Sebelumnya siapkan beberapa url gambar dan link laman
postingan blog terkait.
1. Login blogger
2. Edit template
3. Cari slider-wrapper untuk memudahkan gunakan CTRL+F
4. Ganti warna mearah dengan alamat url yang telah disiapkan

22. 6. Ganti warna kuning dengan link postingan blog, warna biru
diganti dengan keterangan yang kamu inginkan, warna hijau untuk
judul slider
<div class='nivo-html-caption' id='slide-
caption-one'>
<h1><a href='#' rel='bookmark'
title='Slide Title 1'>Slide Title
1</a></h1>
<p>Tulis disini.</p></div>

23. 7. Dan simpan
8. Memasang kalender analog di blog
Fitur ini sangat membantu pengunjung untuk melihat waktu langsung di
halaman utama blog. Beberapa situs juga menyediakan widget kalender
ini secara gratis. Salah satunya adalah cuteki.com. Situs ini menyediakan
beberapa widget yang mendukung blog secara gratis. Prosesnya dapat
dilakukan secara sederhana.
1. Buka cuteki.com
2. Pilih widget kalender
3. Pilih desain yang diinginkan
4. Dan copy pastekan kode javascriptnya
5. Login ke blogger
6. Tambahkan gadget
7. Pilih html/javascript
8. Masukkan kode javascriptnya
9. Dan simpan

24. 9. Memasang jam di blog
Proses ini tidak berbeda jauh dengan langkah sebelumnya. Kamu hanya perlu
menambahkan kode html ke dalam blogmu. Pada dasarnya blogger telah
menyediakan banyak fasilitas widget yang menarik dan mudah didapatkan secara
gratis termasuk pemasangan jam analog. Namun semua fasilitas tersebut
dianggap kurang nilai estetiknya oleh sebagian blogger. Kebanyakan para blogger
mencari situs-situs yang menyediakan fitur ini dengan desain yang menarik dan
unik. Berikut caranya
1. Pergi ke situs clocklink.com
2. Pilih desain jam yang sesuai
3. Atur negara, kota, ukuran jam
4. Copy kode javascriptnya
5. Login blogger
6. Pilih tata letak
7. Pilih tambah gadget
8. Pilih html/javascript
9. Masukkan atau pastekan kode javasriptnya
10. Simpan

25. 10. Memberikan efek-efek menarik pada cursor blog
Memberikan berbagai efek menarik pada cursor blog dengan mudah
menggunakan kode html/javascript. Efek tersebut dapat mengikuti
gerakan cursor. Berikut berbagai efek yang menarik untuk cursor blog.
1. Login blogger
2. Pilih tata letak
3. Tambahkan gadget
4. Pilih html/javascript, copy pastekan kode berikut
Efek buble

26. 11. Menambah ikon media sosial pada
BLOG
1. Login blogger
2. Pilih tata letak
3. Tambahkan gadget
4. Pilih html/javascript
5. Copy pastekan kode
berikut
<style>p#ls-social-bookmarkspin img {
/* Social Bookmark SpinWidget By Lostsector */
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
p#ls-social-bookmarkspin img:hover {
-moz-transform: rotate(120deg);
-webkit-transform: rotate(120deg);
-o-transform: rotate(120deg);
-ms-transform: rotate(120deg);
transform: rotate(120deg);
}

27. /* Social Bookmark Spin Widget By Lostsector */
</style>
<center><p id="ls-social-bookmarkspin">
<a href="http://www.facebook.com/nurohmah">
<img border="0" src="http://3.bp.blogspot.com/-2n_kS0MqijI/UMy0vhHD96I/AAAAAAAAB0w/JwIF-
oMgEo8/s1600/fb.png" /></a>
<a href="http://twitter.com/nuramalburga">
<img border="0" src="http://2.bp.blogspot.com/-
4O_ZX2TAI78/UMy0yYopEUI/AAAAAAAAB1I/bB0nUP4oHUI/s1600/twt.png" /></a>
<a href="https://plus.google.com/u/0/101534288464227062908">
<img border="0" src="http://4.bp.blogspot.com/-
3mexikykYrM/UMy0xvy2Y5I/AAAAAAAAB08/I0pHbYBzSKg/s1600/g+.png" /></a>
<a href="http://sumbertanamanobat.blogspot.com/feeds/posts/default">
<img border="0" src="http://2.bp.blogspot.com/-
O2IwNOjC6W8/UMy0wYBvHhI/AAAAAAAAB04/bXzyWyONWuk/s1600/fbn.png" /></a>
<a href="http://www.youtube.com">
<img border="0" src="http://4.bp.blogspot.com/-8eXaKX_pCrs/UMy0zosMH1I/AAAAAAAAB1M/I-
L5OPfMKuo/s1600/ytb.png" /></a>
</p></center>
Keterangan: Warna merah untuk url ikon gambar
Warna hijau untuk alamat sosial media

28. Memasang buku tamu di blog
Fungsi dari buku tamu sendiri adalah untuk meninggalkan pesan dari
pengunjung yang mengujungi situs blog terkait.
1. Pergi ke cbox.ws
2. Klik Get your own free cbox now
3. Isi form pendaftaran dengan lengkap mulai Cbox name, email
address, password, alamat website (blog kamu), dan bahasa
4. Maih di form pendaftaran, dapat menentukan model buku tamu
dengan memilih style
5. Klik tombol Create My Box
6. Untuk menyetting tampilan cbox, login ke member area cbox
7. Klik Look & Feel > Layout Options untuk mengatur widht dan height
buku tamu. Sesuaikan dengan ukuran sidebar blognya.

29. 8. Klik Look & Feel > Colours dan Font untuk
mengatur warna, bentuk huruf dan lain-lain
9. Klik tombol Apply
10. Klik Publish
11. Kemudian copy pastekan kodenya dengan
cara klik tombol Copy to clipboard
12. Login blogger
13. Tambahkan gadget
14. Pilih html/javascript
15. Copy paste kode berikut untuk membuat buku
tamu melayang di samping kanan blog

31. 16. Simpan
17. Hasilnya seperti ini

32. Memasang Playlist musik pada blog
Berikut langkah-langkahnya:
1. Pergi ke scmplayer.net, pilih jenis skin playlist

33. 2. Pilih Edit Playlist, tulis Judul lagunya dan masukkan url musik bisa
di dapatkan dari you tube atau situs lainnya. Klik Add more song
untuk mengambahkan lagu

34. 3. Atur playlist mulai dari setel secara manual atau otomatis,
pengulangan lagu, volume, dan letak playlist di Configure Setting

35. 4. Kilk done, kemudian copy kodenya ke html/javascript di blog

36. SEKIAN PRESENTASI
KELOMPOK KAMI
WASSALAMUALAIKUM. WR. WB