tutorial membuat blog
TRANSCRIPT
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
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.
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.
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.
tutorial pembuatan blog melalui situs blogger.
1. Memiliki akun email bawaan dari google yaitu gmail
2. Masuk ke situs blogger.com3. Masuk dengan email dan password
yang sama dengan gmail
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
5. Pilih blog baru
6. Tulis judul dan nama blog yang diinginkan, pilih template selanjutnya pilih buat blog
8. Blog sudah jadi. Tampilannya seperti dibawah ini
Kamu sudah dapat memposting artikel dengan cara pilih entri baru.
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
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 bloggerb) Pilih Lamanc) Tulis judul dan
isi postingand) Dan
publikasikan
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 blogger5. Klik template. Mungkin kamu
perlu langkah pencegahan yaitu membackup template lama terlebih dahulu
6. Pilih Cadangkan/pulihkan7. Pilih dan unduh template
yang sudah di ekstrak8. Berikut contoh hasil unduh
template healthy food
Untuk menghilangkan atau menyembunyikan navbar bawaan asli dari blog, kamu dapat pilih tata letak > edit navbar > pilih off dan simpan.
MEMBUAT SLIDER POSTING DI BLOG
Berikut langkah-langkahnya.1. Login blogger, pilih template2. Pilih edit html dan copy paste kode berikut
ini di atas kode ]]></b:skin>
/* 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}
/* 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}
Kemudian copy paste kode berikut di atas kode </head>
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'>
<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/oTbMMzbjOXY/s1600/slider-1.jpg' title='#slide-caption-one'/></a>
<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/oTbMMzbjOXY/s1600/slider-1.jpg' title='#slide-caption-one'/></a>
5. Mengedit gambar pada slider bawaan blogUntuk 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 blogger2. Edit template3. Cari slider-wrapper untuk memudahkan gunakan CTRL+F4. Ganti warna mearah dengan alamat url yang telah disiapkan
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>
<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>
7. Dan simpan8. 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.com2. Pilih widget kalender3. Pilih desain yang diinginkan4. Dan copy pastekan kode javascriptnya 5. Login ke blogger6. Tambahkan gadget7. Pilih html/javascript8. Masukkan kode javascriptnya9. Dan simpan
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.com2. Pilih desain jam yang sesuai3. Atur negara, kota, ukuran jam 4. Copy kode javascriptnya5. Login blogger6. Pilih tata letak7. Pilih tambah gadget8. Pilih html/javascript9. Masukkan atau pastekan kode javasriptnya10. Simpan
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 blogger2. Pilih tata letak3. Tambahkan gadget4. Pilih html/javascript, copy pastekan kode berikut Efek buble
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 Spin Widget 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);}
/* 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
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.
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
16. Simpan17. Hasilnya seperti ini
Memasang Playlist musik pada blog
Berikut langkah-langkahnya:1. Pergi ke scmplayer.net, pilih jenis skin
playlist
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
3. Atur playlist mulai dari setel secara manual atau otomatis, pengulangan lagu, volume, dan letak playlist di Configure Setting
4. Kilk done, kemudian copy kodenya ke html/javascript di blog
SEKIAN PRESENTASI KELOMPOK KAMI
WASSALAMUALAIKUM. WR. WB