Professional Documents
Culture Documents
PEMBUATAN WEBLOG
ON-LINE
23 – 24 januari 2009
SMAN 1 KKITANGAN
Panduan WeBlog pada Blogspot
Panduan pembuatan Weblog yang sederhana ini kami persembahkan pada Kegiatan Pelatihan
Pembuatan WeBlog bagi Bapak / Ibu Pengajar di SMAN 1 Kandangan.
1. Tentang Blog
Blog atau weblog adalah sebuah website pribadi yang isinya bersifat personal atau pribadi sesuai
dengan pribadi si pembuat blog tersebut dan juga berisi link-link ke website lain ataupun link ke
dalam artikel dalam blog itu sendiri. Blog bisa berisi hal-hal dan kejadian yang dialami oleh
blogger baik itu yang berhubungan dengan dunia internet atau kejadian yang dialami di
kehidupan nyata sehari-hari, blogger seringkali mendokumentasikan kejadian yang mereka alami
kedalam blog sehingga blog juga sering disebut sebagai jurnal pribadi, blogger juga seringkali
berbagi ilmu melalui blog mereka dan berinteraksi dengan para pengunjung melalui media yang
memungkinkan pengunjung untuk meninggalkan komentar atau saling tukar alamat email,
sehingga terjadi komunikasi oleh sebab itu blog juga merupakan sebuah media sosial
Blog mempunyai fungsi yang sangat beragam selain sebagai sebuah catatan harian, media
publikasi dalam sebuah kampanye politik, sampai dengan program-program media dan
perusahaan-perusahaan. Sebagian blog dipelihara oleh seorang penulis tunggal, sementara
sebagian lainnya oleh beberapa penulis. Banyak juga weblog yang memiliki fasilitas interaksi
dengan para pengunjungnya, yang dapat memperkenankan para pengunjungnya untuk
meninggalkan komentar atas isi dari tulisan yang dipublikasikan, namun demikian ada juga yang
yang sebaliknya atau yang bersifat non-interaktif.
Situs-situs web yang saling berkaitan berkat weblog, atau secara total merupakan kumpulan
weblog sering disebut sebagai blogosphere. Bilamana sebuah kumpulan gelombang aktivitas,
informasi dan opini yang sangat besar berulang kali muncul untuk beberapa subyek atau sangat
kontroversial terjadi dalam blogosphere, maka hal itu sering disebut sebagai blogstorm atau
badai blog
Blog atau weblog pertama kali dikenalkan oleh Jhon Barger pada tahun 1997, dari awal sejak
pertama kali istilah blog digunakan sampai sekarang, blog atau weblog telah berkembang
menjadi sebuah multimedia bahkan menjadi sebuah sarana untuk menghasilkan uang dan bisa
menjadi sebuah aset bagi pemilik blog atau weblog tersebut, sekarang banyak blogger (blogger
adalah sebutan bagi si pembuat blog) yang mempunyai penghasilan atau uang dari aktifitasnya di
dunia online alias ngeblog.
Media blog pertama kali dipopulerkan oleh Blogger.com, yang dimiliki oleh PyraLab sebelum
akhirnya PyraLab diakuisi oleh Google.com pada akhir tahun 2002 yang lalu. Semenjak itu,
banyak terdapat aplikasi-aplikasi yang bersifat sumber terbuka yang diperuntukkan kepada
perkembangan para penulis blog tersebut.
Gambar 02
2. Isilah Alamat Email dengan alamat email kita (tentunya yang valid)
Jika kita belum memiliki account gmail, maka kita buat akun
pada gmail terlebih dahulu. Klik buat account baru sekarang
(Gambar 03)
Ikuti langkah – langkah pembuatan e-mail menggunakan
gmail.com, sampai berhasil memiliki akun berupa userid@gmail.com.
Selanjutnya ulangi sebagaimana gambar 02 dengan memasukkan kembali e-mail
userid@gmail.com dan password, jika berhasil maka tampilananya seperti gambar di
bawah ini ;
Gambar 03
3. Isi Nama Tampilan dengan nama yang ingin kita tampilkan
4. Tulis tulisan yang tertera pada form Verifikasi Kata. Beri tanda tik/cek pada kotak di
pinggir tulisan Kita menerima Persyaratan dan Layanan.
Gambar 04
Gambar 05
8. Tulislah tulisan verifikasi yang ditampilkan pada form Cek Ketersediaan, jika sudah
selesai klik gambar panah yang bertuliskan "LANJUTKAN".
9. Pilihlah gambar (template) yang kita inginkan (nanti bisa di rubah lagi), kemudian klik
gambar anak panah yang bertuliskan "LANJUTKAN"
Gambar 06
Gambar 07
12. Silahkan kita tuliskan sesuai dengan visi dan Misi kita, untuk melihat hasil dari
POSTING kita maka klik tombol Lihat Blog.
Bagi yang mengalami sedikit kendala tentang tata cara memposting suatu artikel ke dalam blog,
maka kali ini akan dibahas tentang tata cara posting di www.blogger.com. Di dalam menu
posting ada beberapa toolbar yang bisa kita gunakan. Jika kita sudah terbiasa menggunakan
microsoft Word ataupun microsoft Excel tentu barangkali tidak akan mengalami kesulitan ketika
memposting suatu artikel, tapi mungkin tidak ada salahnya bila kami bahas sekilas tentang ini,
barangkali ada di antara kita yang masih bingung.
--> Untuk membuat artikel menjadi rata kiri dan rata kanan
Bagi para pemula, biasanya kita bingung setelah daftar membuat blog dan berhasil maka apa yang
harus di isi (diposting) dalam sebuah blog. Isi (conten ) dari sebuah blog tentu saja terserah kepada si
pemilik blog itu sendiri, apakah mau di isi puisi, perjalanan hidup, teknik, ataupun apa saja. Nah di
sini kami menyarankan, isilah blog kita sesuai dengan misi kita The Writer Is Blogger dengan tujuan
untuk memotivasi bapak/ibu guru selalu memperbaharui informasi dan pengetahuan dalam
menunjang tugas profesionalnya dengan menulis, meningkatkan kemampuan bapak/ibu guru dalam
mempublikasikan tulisannya, meningkatkan informasi dan komunikasi antara guru dengan siswa,
dan akhirnya meningkatkan mutu proses pembelajaran siswa.
5. CARA SETTING BLOG
Bagi kita yang baru membuat blog, ada beberapa settingan / pengaturan yang harus di lakukan
agar blog kita bisa di kenali mesin pencari (search engine) semisal Google, Yahoo, MSN dan
lain - lain. Beberapa hal yang harus di setting, silahkan ikuti langkah-langkahnya :
1. Silahkan Login ke www.blogger.com dengan user name (e-mail) dan password yang
telah dimiliki
2. Klik judul blog yang mau di setting
3. Klik Pengaturan, lalu klik Dasar. Beberapa form yang harus di isi pada menu Dasar :
• Judul isi dengan judul blog kita. Contoh : p-tiok’s blog
• Uraian isi dengan deskripsi blog kita. Contoh : disini kami menyarankan untuk
diisikan Staf Pengajar TIK (sesuai mata pelajaran) SMAN 1 Kkitangan Kediri
• Tambahkan blog Kita ke daftar kami? pilih ya agar setiap posting kita selalu
masuk di daftar Blogger.com.
• Biarkan mesin pencari menemukan blog Kita? pilih ya
• Tampilkan Editing Cepat di Blog Kita? pilih Ya
• Tampilkan Link Posting Email? Sebaiknya pilih ya, tapi pilih tidak juga tidak apa-
apa
• Konten Dewasa? Pilih tidak. Kalau pilih ya berarti blog kita di anggap blog untuk
dewasa (semacam blog porno)
• Tampilkan Mode Compose untuk semua blog Kita? pilih Ya
• Aktifkan transliterasi? pilih Tidak, jika kita ingin ada button untuk mengubah
biasa ke huruf hindi (India), pilih ya jika sebaliknya)
• Klik tombol Simpan Pengaturan . Selesai
1. Page Background color --> pengaturan warna background blog. Silahkan klik warna yang
ada di sebelah kanan yang di sukai
2. Text Color --> pengaturan warna huruf dari posting-an
3. Link Color --> pengaturan warna huruf yang di link
4. Blog Title Color --> pengaturan warna huruf judul Blog
5. Blog Description Color --> pengaturan warna huruf deskripsi blog
6. Post Title Color --> pengaturan warna huruf judul posting-an
7. Border Color --> pengaturan warna kotak yang mengelilingi judul blog, serta garis
pemisah
8. Sidebar Title Color --> pengaturan warna huruf judul yang kita di sidebar (kolom
samping)
9. Sidebar Title Color --> pengaturan warna huruf yang ada di sidebar(kolom samping)
10. Visited link Color --> pengaturan warna huruf link ketika pengunjung mengarahkannya
ke tulisan yang mengandung link
11. Text Font --> pengaturan jenis huruf,berlaku untuk huruf hasil dari posting-an ataupun
huruf yang ada di sidebar
12. Sidebar Title Font --> pengaturan jenis huruf untuk judul yang ada di sidebar serta
tanggal postingan
13. Blog Title Font --> pengaturan jenis huruf Judul blog
14. Blog Description Font --> Pengaturan jenis huruf dekripsi blog
15. Post Footer Font --> pengaturan jenis huruf footer (contoh : posted by )
16. Klik “ SAVE CHANGES” untuk mengakhiri pengaturan. Selesai
Untuk template – template selain template "minima", pada dasarnya sama, hanya saja ada
sedikit perbedaan, tapi itu tidak sulit. Untuk mengetahui tulisan mana yang sedang dirubah, kita
cukup melihat mana yang berubah tulisannya pada preview yang terletak sebelah bawah.
• Langkah pertama
Langkah pertama yang harus dilakukan adalah membuat image ataupun logo yang di
inginkan. Jika kita mahir dalam program grafik & design semisal Adobe Photoshop
ataupun Coreldraw, bisa membuat sendiri dengan bentuk yang sesuka kita. Tapi kalau
tidak belum bisa gunakan layanan di internet.
• Langkah kedua
langkah kedua yaitu kita harus upload image atau logo tersebut, bisa ke blogger ataupun
ke hosting lain. Misalkan biasanya kita menyimpan setiap image yang kita punya di
www.photobucket.com.
• Langkah ketiga
Langkah ketiga adalah mengatur ukuran dari image tersebut agar sesuai dengan yang di
inginkan, karena jika terlalu besar atau terlalu kecil maka tentu saja akan tidak enak
dipandang mata. Misalkan kita mempunyai URL image seperti ini :
http://i162.photobucket.com/albums/t253/rohman24/kupu2.gif
Sebagaimana kita ketahui untuk membuat sebuah image bisa online maka kita tambahkan
kode :
<img src="
"URL image
e">
Sehingga kod
denya akan jadi seperti inni :
<img
src="http://i162.ph
hotobucket.com/alb /rohman24/kupu2.gi
bums/t253/ if">
dan yang akan
n tampil adaalah image dengan
d ukuraan yang sebeenarnya. conntoh image
teersebut adalaah seperti inii :
<img
src="http://i162.ph
hotobucket.com/alb
bums/t253/
/rohman24/kupu2.gi
if"
width="45"
" hight="4
45" border="0">
seehingga imaage yang tadii akan berubah jadi seperrti ini :
• Langkah keempat
Langkah keempat yaitu memasukan kode gambar yang sudah kita modifikasi tadi ke
dalam kode template blog milik kita. Silahkan ikuti langkah-langkah berikut ini :
Untuk yang memakai template klasik :
1. Login ke blogger dengan user id dan password
2. Klik menu Template
3. Klik menu Edit HTML
4. Copy dan paste seluruh kode HTML ke dalam notepad ini dimaksudkan untuk
mengurangi resiko apabila terjadi kesalahan pada saat kita melakukan editting kode
template
5. Cari kode berikut pada kode HTML kita :
<$BlogItemTitle$>
cara yang mudah untuk menemukan kode tersebut adalah : klik menu Edit yang berada
bar menu browser lalu klik Find kemudian tuliskan kode diatas tadi lalu klik tombol
Find, maka secara otomatis kita akan langsung di bawa ke tulisan kode tadi. Nah kode
<$BlogItemTitle$> adalah merupakan kode untuk menampilkan Judul Postingan,
maka kita harus menyimpan kode image yang kita miliki di dekatnya, bisa sebelum atau
sesudahnya tergantung dari keinginan kita. Tentunya bila di simpan sebelum kode judul
posting maka image pun akan muncul sebelum judul posting, jika di simpan sesudah
kode judul posting sudah barang tentu image pun akan muncul sesudah tulisan judul. Kita
ambil contoh kode image di simpan sebelum tulisan judul :
<img
src="http://i162.photobucket.com/albums/t253/rohman24/kupu2.gif"
width="45" hight="45" border="0"> <$BlogItemTitle$>
pemasangn kode adalah untuk memberi jarak spasi antara image dengan
tulisan judul, sebab jika tidak menambahkan kode maka image dengan tulisan
akan bersatu walaupun kode image dengan kode judul di tulis ada jarak spasinya.
6. Klik tombol Preview untuk melihat perubahan yang dilakukan
7. Jika sudah OK, klik tombol Save Settings
8. Selesai
Maka setiap kita posting artikel, secara otomatis image yang kita pasang tadi akan muncul
tanpa harus di tuliskan kembali.
1. Klik Posts
2. Klik New Post (bila sebelumnya kita telah mempunyai postingan)
Setelah proses upload kita selesai, untuk melihat gambar tadi, klik tombol Compose. Nah disini
kita bisa melihat gambar yang kita upload tadi sekaligus dapat mengatur kembali ukuran dari
gambar ini, caranya yaitu klik gambar tersebut sampai gambar anak panah mouse kita berubah
menjadi gambar panah empat penjuru. Arahkan mouse pada garis samping gambar sampai
gambar mouse berubah menjadi panah dua arah, tekan tombol mouse lalu tahan dan gerakan
kearah kiri atau kanan untuk merubah lebar gambar, bila susah sesuai dengan yang kita inginkan
lepas tombol yang kita tahan tadi. Untuk mengatur tinggi gambar, arahkan mouse pada tepi
bawah atau atas gambar sampai gambar mouse berubah menjadi anak gambar panah dua arah,
tekan mouse lalu tahan kemudian gerakan mouse keatas atau kebawah untuk mengatur tinggi
gambar, lepaskan mouse bila ukuran gambar sudah sesuai dengan yang kita inginkan.
Nah sekarang bagaimana cara memasukan foto untuk mengisi Profile kita?, caranya sama seperti
langkah-langkah di atas, cuma ada sedikit perbedaan yaitu kita harus menghapus beberapa kode
tersebut. Jika foto kita sudah selesai di upload (langkahnya sama seperti di atas). Tekanlah menu
Edit HTML untuk melihat kode HTML dari foto kita tadi, copy / paste kode HTML tersebut
kedalam program notepad (agar lebih mudah) atau bisa juga ditulis di kertas. Kemudian klik
publish. Untuk memasukan foto kedalam Profile kita, silahkan ikuti langkah berikut:
1. Setelah upload gambar, klik menu Dasboard
2. Klik menu Edit Profile
3. Di dalam form - form isian profile ada tulisan Photo URL, nah disini paste kode HTML
yang telah kita copy tadi ke dalam notepad tapi jangan semuanya, yaitu yang di paste
adalah kode setelah tulisan [src="] yaitu link yang di mulai dengan [http://] dan berakhir
dengan [.jpg] atau [.jpeg]
4. Klik Save Profile, maka foto kita yang cantik dan ganteng sudah terpampang di blognya
dan bisa dilihat oleh seluruh dunia
5. Selesai
Sebenarnya ada cara lain untuk mengisi foto Profile kita, yaitu dengan cara mengupload
(memasukkan) foto kita pada hosting lain, dan baru kemudian link URL foto yang kita dapat dari
hosting tersebut di copy/paste ke profile yang ada di blogger/blogspot. Kita ambil contoh,
biasanya kita menyimpan foto-foto di http://photobucket.com. jika kita mau silahkan daftarkan
diri kita (gratis), apabila sudah selesai daftar dan bisa login, silahkan upload photo kita. Setelah
proses upload foto selesai, maka secara otomatis foto tersebut akan di beri PHOTO URL, copy
alamat link URL foto tersebut lalu paste di Profile Blogger.com pada kolom Photo URL setelah
itu tinggal SAVE CHANGES dan RE-PUBLISH.
10. Membuat efek Marquee
Apa itu marquee ? Marquee adalah suatu program HTML untuk membuat teks bisa bergerak atau
berjalan. Program marquee ini banyak diminati dan di pakai oleh para blogger di dalam blognya
karena sifat program ini yang dinamis serta menarik untuk di lihat disamping untuk menghemat
tempat pada halaman blog.
Marquee ini bisa di buat dengan menggunakan tag <marquee>...</marquee>.
hasilnya : …..
Ada variasi lain dari marquee ini, yakni ketika mouse sedang berada di area marquee teks akan
berhenti dan ketika mouse di geser kembali ketempat lain maka teks akan bergerak kembali, ini
hanya di tambahkan sedikit program pada kolom marquee.
hasilnya : ….
1 Membuat Yahooo ! Messenger Emoticons
11.
:)hhappy
<img sr
rc="http:/
//us.i1.yim
mg.com/us.yimg.com/i
i/mesg/emo
oticons7/1.
.gif" widt
th=18
height
t=18 borde
er=0>
:(sad
<img sr
rc="http:/
//us.i1.yim
mg.com/us.yimg.com/i
i/mesg/emo
oticons7/2.
.gif" widt
th=18
height
t=18 borde
er=0>
;)winnking
<img sr
rc="http:/
//us.i1.yim
mg.com/us.yimg.com/i
i/mesg/emo
oticons7/3.
.gif" widt
th=18
height
t=18 borde
er=0>
:Dbigg grin
<img sr
rc="http:/
//us.i1.yim
mg.com/us.yimg.com/i
i/mesg/emo
oticons7/4.
.gif" widt
th=18
height
t=18 borde
er=0>
;;)batting eyelaashes
<img sr
rc="http:/
//us.i1.yim
mg.com/us.yimg.com/i
i/mesg/emo
oticons7/5.
.gif" widt
th=18
height
t=18 borde
er=0>
>:D<bigg hug
<img sr
rc="http:/
//us.i1.yim
mg.com/us.yimg.com/i
i/mesg/emo
oticons7/6.
.gif" widt
th=42
height
t=18 borde
er=0>
:-/conffused
<img sr
rc="http:/
//us.i1.yim
mg.com/us.yimg.com/i
i/mesg/emo
oticons7/7.
.gif" widt
th=20
height
t=18 borde
er=0>
:xlove struck
s
<img sr
rc="http:/
//us.i1.yim
mg.com/us.yimg.com/i
i/mesg/emo
oticons7/8.
.gif" widt
th=18
height
t=18 borde
er=0>
:">blusshing
<img sr
rc="http:/
//us.i1.yim
mg.com/us.yimg.com/i
i/mesg/emo
oticons7/9.
.gif" widt
th=18
height
t=18 borde
er=0>
:Ptoongue
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/10.gif"
width
h=18 height
t=18 borde
er=0>
:--*kiss
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/11.gif"
width
h=18 height
t=18 borde
er=0>
=((broken heart
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/12.gif"
width
h=18 height
t=18 borde
er=0>
:-Osurrprise
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/13.gif"
width
h=18 height
t=18 borde
er=0>
X(aangry
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/14.gif"
width
h=34 height
t=18 borde
er=0>
:>ssmug
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/15.gif"
width
h=18 height
t=18 borde
er=0>
B--)cool
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/16.gif"
width
h=18 height
t=18 borde
er=0>
:-Swoorried
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/17.gif"
width
h=18 height
t=18 borde
er=0>
#:-Sw
whew!
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/18.gif"
width
h=34 height
t=18 borde
er=0>
>:))devil
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/19.gif"
width
h=18 height
t=18 borde
er=0>
:((crying
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/20.gif"
width
h=22 height
t=18 borde
er=0>
:))laugghing
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/21.gif"
width
h=18 height
t=18 borde
er=0>
:straightt face
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/22.gif"
width
h=18 height
t=18 borde
er=0>
/
/:)raised eyeebrow
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/23.gif"
width
h=18 height
t=18 borde
er=0>
=))roolling on the floor
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/24.gif"
width
h=30 height
t=18 borde
er=0>
O:-)aangel
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/25.gif"
width
h=30 height
t=18 borde
er=0>
:-B
Bnerd
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/26.gif"
width
h=24 height
t=18 borde
er=0>
=
=;talk to the hand
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/27.gif"
width
h=18 height
t=18 borde
er=0>
:o3pupp
py dog eyes ‐ New!
<img src=
="http://us
s.i1.yimg.com/us.yim
mg.com/i/m
mesg/emotic
cons7/108.gif"
width
h=31 height er=0>
t=18 borde
:‐??I don't know
<img src=
="http://us
s.i1.yimg.com/us.yim
mg.com/i/m
mesg/emotic
cons7/106.gif"
width
h=40 height er=0>
t=18 borde
%‐(not listtening
<img src=
="http://us
s.i1.yimg.com/us.yim
mg.com/i/m
mesg/emotic
cons7/107.gif"
width
h=52 height er=0>
t=18 borde
:@
@)pig
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/49.gif"
width
h=18 height er=0>
t=18 borde
3:‐Ocow
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/50.gif"
width
h=18 height er=0>
t=18 borde
:()mo
onkey
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/51.gif"
width
h=21 height er=0>
t=18 borde
~:>ch
hicken
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/52.gif"
width
h=18 height er=0>
t=18 borde
@};‐rose
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/53.gif"
width
h=18 height er=0>
t=18 borde
%%‐good
d luck
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/54.gif"
width
h=18 height er=0>
t=18 borde
**===flag
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/55.gif"
width
h=25 height er=0>
t=18 borde
(~~)pum
mpkin
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/56.gif"
width
h=17 height er=0>
t=18 borde
~O)ccoffee
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/57.gif"
width
h=18 height er=0>
t=18 borde
*‐:)idea
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/58.gif"
width
h=30 height er=0>
t=18 borde
8‐X
Xskull
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/59.gif"
width
h=18 height er=0>
t=18 borde
=
=:)bug
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/60.gif"
width
h=20 height er=0>
t=18 borde
>‐‐)alien
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/61.gif"
width
h=18 height er=0>
t=18 borde
:‐Lfrusttrated
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/62.gif"
width
h=18 height er=0>
t=18 borde
[‐O<prraying
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/63.gif"
width
h=18 height er=0>
t=18 borde
$‐)moneyy eyes
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/64.gif"
width
h=18 height er=0>
t=18 borde
:‐"whiistling
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/65.gif"
width
h=22 height er=0>
t=18 borde
b‐(feeling beeat up
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/66.gif"
width
h=18 height er=0>
t=18 borde
:)>‐peace sign
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/67.gif"
width
h=22 height er=0>
t=18 borde
[‐Xshame on you
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/68.gif"
width
h=22 height er=0>
t=18 borde
\:D/daancing
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/69.gif"
width
h=26 height er=0>
t=18 borde
>:/bringg it on
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/70.gif"
width
h=23 height er=0>
t=18 borde
;))heee hee
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/71.gif"
width
h=18 height er=0>
t=18 borde
:‐@chatterbox
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/76.gif"
width
h=36 height er=0>
t=18 borde
^:)^not w
worthy
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/77.gif"
width
h=32 height er=0>
t=18 borde
:‐joh go on
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/78.gif"
width
h=26 height er=0>
t=18 borde
(*)star
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/79.gif"
width
h=18 height er=0>
t=18 borde
o‐‐>hiro
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/72.gif"
width
h=18 height er=0>
t=18 borde
o==>billy
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/73.gif"
width
h=18 height er=0>
t=18 borde
o‐+april
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/74.gif"
width
h=18 height er=0>
t=18 borde
(%)yin
n yang
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/75.gif"
width
h=18 height er=0>
t=18 borde
Blogger Emoticons
<img src="http://photos1.blogger.com/blogger/7678/802/1600/wink.gif">
<img src="http://photos1.blogger.com/blogger/7678/802/1600/biggrin.gif">
<img src="http://photos1.blogger.com/blogger/7678/802/1600/cool.gif">
<img src="http://photos1.blogger.com/blogger/7678/802/1600/mad.gif">
<img src="http://photos1.blogger.com/blogger/7678/802/1600/sad.gif">
<img src="http://photos1.blogger.com/blogger/7678/802/1600/ohmy.gif">
<img src="http://photos1.blogger.com/blogger/7678/802/1600/tongue.gif">
<img src="http://photos1.blogger.com/blogger/7678/802/1600/smile.gif">
12. Pasang Jam di Sidebar
Agar blog kita tampak cantik dan menarik untuk di lihat, maka kita bisa memasang beberapa
aksesori blog, salah satunya adalah dengan cara memasang jam. Jam ini bisa kita dapatkan secara
gratis pada situs http://www.clocklink.com. Silahkan ikuti langkah-langkah berikut;
13. Pasang Buku Tamu di Sidebar
Memasang sebuah buku tamu (shoutbox/guestbook) pada sebuah blog adalah hal yang cukup
lumayan penting,karena buku tamu ini merupakan salah satu sarana untuk berinteraksi antara
yang punya blog dengan para pengunjung blog. Dengan di pajangnya buku tamu di dalam blog,
maka para pengunjung dapat mengungkapkan isi hatinya tentang blog yang kita buat, yang pasti
isi dari sebuah buku tamu ini sangatlah bervariasi bisa merupakan pujian, pertanyaan, sekedar
iseng, atau ada juga merupakan kritikan terhadap isi blog kita, dan justru dengan adanya variasi
itulah membuat blog kita jadi hidup lebih hidup.
Bagaimana caranya mendapatkan sebuah buku tamu. Untuk mendapatkannya sangat mudah, kita
tinggal mencarinya pada mesin pencari semisal google ataupun yahoo, silahkan ketikan kata free
shoutbox atau free guestbook pada search engine masing – masing situs, maka dalam beberapa
detik saja akan muncul berpuluh-puluh situs penyedia buku tamu tadi, kita tinggal klik lalu coba
lihat – lihat. Tapi untuk menghemat waktu pencarian kita, maka di sini kita akan langsung
memberikan alamat situs penyedia buku tamu yang servernya lumayan bagus dan jarang sekali
mengalami down yakni http://www.shoutmix.com. Untuk caranya silahkan kita ikuti langkah-
langkah berikut ini :
1. Seperti biasa kita harus daftar terlebih dahulu dengan cara mengklik tulisan Get One noe,
free>>, ataupun dengan mengklik tulisan Sign Up, silahkan kita tulis data – data kita pada
form yang telah di sediakan.
2. Jika sudah tedaftar, dan di terima jadi anggota shoutmix, silahkan kita login dengan id
kita
3. Pada kolom yang berjudul Style, klik menu appearance.
4. Silahkan klik menu pulldown di samping tulisan Load From Preset untuk mengatur
tampilan buku tamu kita, silahkan pilih yang sesuai dengan keinginan kita. Jika sudah
selesai klik Save Setting.
5. Untuk mendapatkan kode HTML dari shoutbox kita, silahkan klik Use Shoutbox yang
berada di bawah menu Quick Start
6. Klik tulisan Place Shoutbox on web page. Isi lebar dan tinggi shoutbox yang di inginkan
7. Copy seluruh kode HTML yang ada pada text area yang berada di bawah tulisan
Generated Codes, lalu simpan di program Notepad kita
8. Klik Log out yang berada di atas layar kita untuk keluar dari halaman shoutmix kita.
Silahkan close situs tersebut.
9. Selesai
Untuk menempatkan kode HTML shoutbox tadi pada blog kita, silahkan ikuti langkah-langkah
berikut ini;
Agar shoutbox kita sesuai dengan ukuran lebar sidebar, kita bisa merubah ukuran lebar ataupun
tinggi dari shoutbox , caranya kita tinggal merubah angka Width (untuk lebar) dan Height (untuk
tinggi) dari dalam kode HTML shoutbox tersebut.
Untuk Blogger baru :
1. Silahkan Login dengan id kita
2. Klik menu Layout
3. Klik Page Element
4. Klik Add a Page Element
5. Klik tombol Add to Blog yang berada di bawah tulisan HTML/JavaScript
6. Tuliskan judul shoutbox kita pada form title. Contoh : Buku tamu, atau my guestbook
atau apa saja yang kita suka
7. Copy paste kode HTML shoutbox kita di dalam form Content
8. Klik tombol Save Changes
9. Drag & Drop element yang telah kita buat tadi di tempat yang di sukai
10. Tekan tombol Save
dsfgsdfgsdf pikirkan adalah lagu yang kita sukai belum tentu di sukai oleh para pengunjung,
sehingga ini akan mengganggu kenyamanan bagi para pembaca blog ita.
Contoh
Contoh panelnya yaitu seperti di bawah ini, silahkan klik tombol play untuk mengaktifkannya,
tunggu beberapa saat, loadingnya agak sedikit lama : Untuk contoh kategori yang ketiga, kita
bisa kunjungi www.iwebmusic.com, caranya hampir mirip dengan cara-cara diatas, disini kita
bisa pilih lagu yang di sediakan atau bisa juga meng upload lagu dari komputer. Cuma kita untuk
yang satu ini tidak mempunyai panel kontrol buat pengunjung yang ada hanya berupa banner
biasa dan bekerja auto start sehingga kita tidak bisa memberi contoh panelnya.
Untuk memasukan kode video yang telah kita copy tadi, caranya yaitu kita tinggal posting artikel
seperti biasa lalu sisipkan kode tersebut pada tempat yang kita inginkan. Cuma saat copy dan
paste kode tersebut posisi posting harus pada Edit HTML jangan pada posisi Compose. Jika
sudah selesai memasukan artikel, Tinggal klik Publish dan video kita siap di lihat oleh para
pengunjung blog kita.
Setelah kita melakukan pendaftaran ke Google, maka tidak serta merta blog kita terindeks pada
mesin pencari nya, akan tetapi memerlukan 3 sampai 4 minggu baru blog kita bisa terindeks.
Jika sudah 3 sampai 4 minggu, maka cobalah ketik alamat blog kita pada mesin pencari google,
apakah sudah terindeks atau belum? Jika belum, tunggu beberapa minggu lagi, dan tuliskan
kembali alamat blog kita seperti langkah di atas.
Daftar Yahoo! Untuk mendaftar ke yahoo! silahkan kita kunjungi
https://siteexplorer.search.yahoo.com/submit. Akan tetapi untuk mendaftar ke yahoo,
kita harus terlebih dahulu mempunyai account yahoo, karena di perlukan log in terlebih
dahulu ke account yahoo. Bagi yang belum punya account yahoo (email di yahoo)
silahkan bikin dulu, bagi yang sudah punya, kita tinggal login dengan username serta
password kita. Apabila sudah login, nanti sudah tersedia kolom untuk di isi, silahkan isi
kolom tersebut dengan URL kita, kemudian klik tombol Add URL, selesai. Jika ingin
memasukan alamat feed sekalian, kita bisa memasukannya. Ingat, alamat feed di blogger
hanya tinggal menambahkan atom.xml di belakang uRL blog kita, contoh : untuk blog
kita ini mempunyai alamat feed sebagai berikut :
http://kolom-tutorial.blogspot.com/atom.xml
atau memakai www pun sama saja :
http://www.kolom-tutorial.blogspot.com/atom.xml
Tugas kita hanya mengisi alamat URL blog miliknya, serta menuliskan alamat email saja,
kemudian klik tombol Submit Your Site.
Jika ingin lebih cepat terkenal coba lakukan ping ke berbagai agregator, silahkan klik link
di bawah :
http://pingomatic.com
Kita tinggal mengisi form yang di sediakan.
17. Cepat Terindeks di Google
Setelah kita mendaftar di www.google.com, blog kita tidaklah langsung terindeks pada mesin
pencari google, akan tetapi bisa memakan waktu 3 sampai 4 minggu bahkan apabila bernasib
kurang baik bisa sampai 8 minggu barulah blog kita terlisting pada mesin pencarinya.
Override yakni dapat menimpa fungsi TAG sebelumnya. Contoh : sebuah teks yang
sudah di buat miring oleh tag <i> ... </i>, dapat di timpa oleh tag <b> ... </b>
sehingga akan melahirkan dua hasil perintah yang berbeda sekaligus yakni kombinasi
huruf miring dan huruf tebal, contoh :
ini hanya <b><i>contoh </i></b> saja kita
yang akan tampil di browser adalah :
di samping TAG yang mempunyai pasangan, ada juga tag yang tidak memerlukan
pasangan, misal TAG <hr> , <br> , ataupun <input>
Sebuah Tag tidaklah sensitif terhadap Case (huruf besar atau kecil), jadi mau di tulis
huruf besar ataupun huruf kecil akan menghasilkan fungsi yang sama. Sebagai contoh :
fungsi Tag <b>....</b> akan sama dengan Tag <B> ....</B>.
HTML
Sebuah dokumen HTML haruslah diawali dengan tag <HTML> dan di tutup dengan
</HTML>, Tag ini adalah sarana untuk memberikan informasi kepada browser bahwa apa-
HEAD
Bagian header dari sebuah dokumen HTML diawali oleh tag <HEAD> dan di tutup oleh tag
</HEAD>, dan di dalam header di isi pula dengan tag title yakni judul dari dokumen, tag
title ini di tulis dengan tag pembuka <TITLE> dan di tutup oleh tag </TITLE>, contoh :
title dari blog ini adalah Blog Tutorial jadi untuk tittle nya di tulis seperti ini <TITLE>
Blog Tutorial </TITLE>, akan tetapi di blogger.com untuk penulisan title tidak harus
di tulis langsung pada tag title karena sudah di otomatisasi, alamatnya yaitu
<$BlogPageTitle$>. Dalam pengisian title ini seyogya nya jangan asal-asalan, karena
Di dalam Header pun di isi pula dengan tag META, tag META ditulis dengan tag
<META>, tag META ini biasanya memuat informasi mengenai dokumen HTML. dengan
tag META kita bisa menentukan keyword, content,refresh, dan lainnya sebagainya.
Khusus tentang tag META keyword akan di bahas lebih lanjut pada postingan
selanjutnya.
BODY
Semua dokumen HTML yang di simpan di dalam BODY semisal teks, image, link, dan
lain sebagainya akan di tampilkan dan bisa di lihat di dalam browser.
• Agar lebih mudah mengenal dan hasilnya langsung dapat dilihat maka perlu
mempersiapkan terlebih dahulu program notepadnya lalu tuliskan kode HTML seperti
dibawah, kemudian apabila telah selesai mempraktekan simpan file tersebut dengan
extensi .htm (dot htm). Contoh file : latihan.htm kemudian jalankan dengan internet
explorer. silahkan tulis kode-kode berikut :
<html>
<head>
<title>latihan</title>
<body>
Tulis apa-apa yang kita terangkan di sini !
</body>
</html>
Ini heading 2
Ini heading 3
Ini heading 4
Ini heading 5
Ini heading 6
Sebenarnya ada cara lain untuk menampilkan berbagai ukuran huruf, yakni memakai
tag <font size="...">.....</font>.
Contoh :
<font size="1">Ini font size 1</font>
<font size="2">Ini font size 2</font>
<font size="3">Ini font size 3</font>
<font size="4">Ini font size 4</font>
<font size="5">Ini font size 5</font>
<font size="6">Ini font size 6</font>
<font size="7">Ini font size 7</font>
Hasil yang akan tampil seperti ini :
Ini font size 1
Ini font size 2
Ini font size 3
Ini font size 4
Ini font size 5
Ini font size 6
Ini font size 7
Itu adalah contoh untuk menampilkan huruf dalam berbagai ukuran.
Anchor Link / Link Satu Halaman
Perhatikan tanda pagar (#) di atas, untuk nama anchor tidak memakai tanda pagar, akan tetapi
untuk link pemanggil anchor harus memakai tanda pagar.
Objek dari suatu anchor bisa di tampilkan bisa juga tidak, terlihat dari kode di atas ada tanda
berupa titik-titik. Titik-titik tersebut bisa di isi tulisan bisa juga di biarkan kosong, contoh :
1. Sign in di blogger
2. Klik menu Template
3. Klik menu Edit HTML
4. Copy seluruh kode template kita, lalu paste pada notepad, silahkan save dulu untuk
backup data
5. Copy kode berikut lalu paste persis di bawah kode <body>
<a name="atas"></a>
6. Copy paste kode berikut di atas kode </body>
<center><a href="#atas"> Kembali lagi ke atas</a> </center>
7. Klik tombol Pratinjau untuk melihat perubahan
8. Jika sudah OK, klik tombol Simpan Perubahan Template
Penambahan kode <center> </center> di maksudkan agar tulisan link berada pada posisi tengah.
1. Sign in di blogger
2. Klik menu Layout
3. Klik menu Edit HTML
4. Klik tulisan Download Template Lengkap, silahkan save dulu template kita untuk
backup data
5. Klik kotak kecil di samping tulisan Expand Template Widget
6. Tunggu beberapa saat sampai proses selesai
7. Copy kode berikut lalu paste persis di bawah kode <body>
<a name="atas"></a>
8. Copy paste kode berikut di atas kode </body>
<center><a href="#atas"> Kembali lagi ke atas</a> </center>
Klik tombol Pratinjau untuk melihat perubahan
9. Jika sudah OK, klik tombol SIMPAN TEMPLATE
Satu lagi yang menarik dari fungsi kode ini, yaitu buat para kita yang suka menulis posting yang
sangat panjang, atau merupakan tulisan-tulisan yang berupa karya ilmiah, Kode ini bisa
membantu kita untuk membuatkan sebuah navigasi untuk mempermudah pembaca. Misalkan
pada setiap pharagrap kita sisipkan sebuah anchor link yang mana anchor link ini bisa berupa
tulisan yang terlihat ataupun hanya sebuah objek yang tidak bisa terlihat oleh pembaca. Dan
tentunya pada tempat-tempat tertentu kita membuat tulisan berupa link untuk memanggil anchor
link. Sebagai contoh kita telah membuat beberapa anchor link pada setiap pharagrap, kode
anchor link yang kita sisipkan seperti ini :
Salah satu blog tool sekaligus sebagai aksesori blog yang sering di gunakan oleh para blogger
yakni memasang statistik dan tracker. Dengan adanya statistik blog, maka kita yang mpunya
blog ataupun yang berkunjung pun dapat mengetahui berapa pengunjungkah yang pernah
berkunjung ke blog kita. selain itu juga bisa sekaligus sebagai tracker yakni kita bisa mengetahui
para pengunjung blog kita datang dari mana.
Sekarang bagaimana caranya kita membuat statistik tersebut? cara yang mudah yaitu kita
menggunakan situs penyedia statistik. Di internet banyak sekali situs penyedia statistik gratis,
sebagai contoh adalah situs http://www.sitemeter.com. Berikut adalah contoh tool yang bisa
kita pilih :
Sedikit tambahan, bila kita ingin site meter posisinya berada di tengah-tengah, tinggal tambah
kode <center> ...kode site meter... </center>
Agar logo yang kita buat tadi bisa tampil di blog, kita harus upload gambar tersebut ke
blogger.com atau melalui situs lain. Tapi kita lebih suka menyimpannya di situs lain misal
www.photobucket.com.
Untuk proses upload di photobucket.com, silahkan ikuti langkah-langkah berikut :
Mulailah kita memasukan kode gambar tadi ke blog ke blog kita, cuma ada sedikit kode yang
harus di tambahkan, karena kode tadi baru berupa Link Image saja. Contoh kode link image :
http://i162.photobucket.com/albums/t253/p-tiok/logoblogtutorial.jpg. Disini kita harus
menambahkan kode <img src="Link URL logo">, sehingga kode tadi menjadi seperti ini :
<img src="http://i162.photobucket.com/albums/t253/p-tiok/logoblogtutorial.jpg">
<img src="http://i162.photobucket.com/albums/t253/p-tiok/logoblogtutorial.jpg"
width="100" height="40" alt="ini contoh saja">
Kode width="..." yaitu untuk ukuran lebar image, jadi untuk memperbesar atau memperkecil
image, kita tinggal menambah atau mengurangi nilainya. kode height="..." yaitu untuk
ukuran tinggi image, kita tinggal menambah atau mengurangi nilainya. Untuk alt="..." yaitu
untuk menampilkan tulisan ketika mouse berada pada image tersebut.
Sebagai contoh, hasil dari kode diatas adalah sebagai berikut, silahkan sorot image tersebut
untuk melihat efek kode alt="..." :
Untuk membuat image button langkahnya sama saja dengan langkah-langkah di atas, cuma pada
saat berada di situs cooltext.com yang kita klik adalah tulisan Desiggen a Button bukan Design
a Logo, contoh image button :
BLOG TOOLS
Blog tools, tool ini berfungsi juga sebagai aksesori blog yaitu untuk menghiasi halaman blog
milik kita agar tampak lebih cantik dan menarik untuk dilihat oleh para pengunjung. Oleh karena
alasan tadi banyak penyedia tool ini yang menawarkan tampilan-tampilan yang unik serta
menarik di samping fungsi utamanya yakni melacak user yang sedang online di blog kita.
Untuk mendapat tool user online status, salah satunya kita bisa mendapatkan dari
www.Geovisite.com, untuk langkah-langkahnya silahkan ikuti langkah berikut :
1. Ketik alamat website menuju www.geovisite.com
2. Klik tulisan Register yang berada di bawah gambar Geo counter Flash
3. Tulis alamat email kita pada kotak kosong di samping tulisan Email
4. Tulis address blog milik kita disamping tulisan URL. Contoh : http://p-tiok.blogspot.com
5. Tulis kata untuk login di samping tulisan Login (4/12). Contoh :
6. Tulis password yang di inginkan disamping tulisan password (4/8). Contoh :
7. Pilih waktu yang sesuai dengan daerah kita disamping tulisan Location. contoh :untuk
daerah jakarta adalah Asia/Jakarta (GMT+7)
8. Pilih kategori yang sesuai dengan blog kita di samping tulisan Category. Contoh :
Internet
9. Pilih bahasa yang sesuai dengan blog kita di samping tulisan Language of your site.
Contoh : English
10. Pilih judul blog kita disamping tulisan Title. Contoh : Rubrik Elektronik
11. Tulis deskripsi dari blog milik kita pada kotak di samping tulisan Description. Contoh :
All about Electronic, tips, maintenance, until how to service the equipment of electronic
12. Klik tombol yang berlogo disket
13. Copy salah satu kode HTML yang dinginkan, antara lain : GEOGLOBE,
GEOCOUNTER, GEOMAP lalu paste pada program notepad
14. Silahkan close window browser kita
15. langkah selanjutnya adalah memasukan kode HTML tersebut pada kode HTML milik
kita
</marquee>
Kode diatas tidak baku harus di tuliskan persis seperti di atas, tapi bisa di sesuaikan
dengan kondisi dan keinginan kita. Kode yang bisa di rubah adalah :
scrollamount="2" --> angka "2" adalah menunjukan kecepatan gerakan, jika ingin
lebih cepat silahkan ganti nilainya dengan yang lebih tinggi. Misal : scrollamount="3"
,scrollamount="4" , scrollamount="5"
direction="up" --> tulisan "up" menunjukan arah gerakan keatas, kalau ingin di
rubah tinggal ganti kata "up" menjadi "down,left,right" . Misal : direction="down" ,
direction="left" , direction="right" .
width="50%" --> tulisan "50%" menunjukan lebar dari marquee sebesar "50%" dari
tempat dimana perintah ini ditempatkan, jika ingin di rubah tinggal ganti dengan nilai
yang di inginkan. contoh : width="30%" , width="70%" , width="100%"
height="200" --> tulisan "200" menunjukan tinggi dari marquee sebesar 200px, jika
ingin di ganti tinggal di rubah nilai angkanya. Misal : height="100" , height="300" ,
height="400" , height="250" .
<tr>
<td align="left">
</marquee>
</td>
</tr>
</table>
Untuk membuat blogroll pada menu dropdown, silahkan lihat contoh di bawah :
<form>
<select name="menu"
onchange="window.open(this.options[this.selectedIndex].value,'_bl
ank')"size=1 name=menu>
<option value="http://rubrik-elektronik.blogspot.com">Rubrik
elektronik</option>
<option value="http://user-online.blogspot.com">User
Online</option>
<option value="http://rohman-freeblogtemplate.blogspot.com">free
blog template</option>
<option value="http://kolom-authorized.blogspot.com">Authorize
service</option>
<option value="http://contoh-blog.blogspot.com/">Blog
D'tree</option>
</select>
</form>
<div align="left">
<option value="http://rubrik-elektronik.blogspot.com">rubrik
Elektronik</option>
<option value="http://kolom-authorized.blogspot.com">Authorized
Service</option>
</select>
</form> </div>
• Blogroll
--Teman-teman--
rubrik Elektronik
User Online
Free blog template
Authorized Service
•
•
Sedikit clue, kata left yang berada pada kode <div align="left"> menunjukan bahwa
menu ini akan di simpan di sebelah kiri, jika mau di rubah tinggal ganti saja dengan kata
"center" atau "right".
Dan masih banyak lagi alternatif lainnya, cuma kayanya terlalu panjang nih, cukup sekian
dulu yah, untuk contoh lainnya mudah-mudahan ada sambungannya. Eh lupa, untuk cara
memasukan kode HTML di atas pada blog milik kita
Untuk menampilkan icon status online yahoo ! messenger, kita bisa memilih sebanyak 5 pilihan,
yakni style id 1, style id 2, style id 3, style id 4, serta style id 5, Apa perbedaan dari style id ini?
perbedaannya adalah ukuran dari icon itu sendiri, untuk melihat perbedaan style id, silahkan kita
perhatikan gambar berikut :
http://opi.yahoo.com/online?u=YahooID&m=g&t=1
Untuk Style ID 1
http://opi.yahoo.com/online?u=YahooID&m=g&t=2
Untuk Style ID 2
http://opi.yahoo.com/online?u=YahooID&m=g&t=3
Untuk Style ID 3
http://opi.yahoo.com/online?u=YahooID&m=g&t=4
Untuk Style ID 4
http://opi.yahoo.com/online?u=YahooID&m=g&t=5
Untuk Style ID 5
itu tadi adalah URL address masing-masing Style ID, maka agar tampil menjadi gambar, kita
harus menambah kode yaitu :
<img src="URL address">
Sehingga untuk menampilkan URL address di atas menjadi sebuah gambar, maka kodenya akan
seperti ini :
Penambahan kode border="0", agar gambar yang di hasilkan terhindar dari adanya garis tepi
atau bingkai. Tapi tentu saja kode diatas adalah hanya untuk menampilkan gambar icon YM nya
dan belum bisa bereaksi walaupun sudah di klik oleh para pengunjung.
Ada beberapa pilihan yang bisa kita terapkan ketika pengunjung mengklik icon YM kita, yaitu :
Kirim Instant Messenger.
<a href="ymsgr:sendIM?YOURID"><img
src="http://opi.yahoo.com/online?u=YourID&m=g&t=StyleID" border="0"></a>
<a href="ymsgr:sendIM?YOURID&m=YOUR+MESSAGE"><img
src="http://opi.yahoo.com/online?u=YourID&m=g&t=StyleID" border="0"></a>
Karena email kita adalah amn_tea@yahoo.co.id maka id kita adalah amn_tea, Sehingga kode
untuk mengirimkan Instan Message dengan pilihan Style ID 2 adalah sebagai berikut :
<a href="ymsgr:sendIM?amn_tea"><img
src="http://opi.yahoo.com/online?u=amn_tea&m=g&t=2" border="0"></a>
Icon di atas benar-benar Live, jadi tentunya icon nya akan menyala apabila kita sedang online di
Yahoo ! Messenger .
Daftar Mybloglog
Bagi kita yang baru membuat blog, pada kesempatan kali ini kami menambahkan
perbendaharaan blog tools nya, yakni pasang MyBloglog.
Apa itu Mybloglog ?
Mybloglog adalah suatu situs yang menyediakan layanan untuk melacak (tracking) para
pengunjung blog/website dimana apabila pengunjung tersebut merupakan anggota situs
mybloglog maka dapat secara otomatis terdeteksi dan di cantumkan dalam menu Recent Reader
nya (pembaca terbaru)
Apa manfaat bergabung di mybloglog?
Ada beberapa manfaat kita bergabung dengan mybloglog yaitu :
• Untuk menambah traffic ke blog kita
Dengan adanya photo kita terpampang di blog orang lain, maka ada kemungkinan banyak
yang akan berkunjung ke blog milik kita, sekurang-kurangnya dari pemilik blog itu
sendiri.
• Mengetahui link mana yang banyak di klik
Di mybloglog ada fasilitas tracking untuk memberi peringkat terhadap link-link yang kita
pasang, link mana yang banyak di klik pengunjung, maka peringkat link itu semakin baik.
• Mempererat tali silaturahmi antar pemilik blog
Tak bisa di pungkiri dengan adanya otomatisasi photo kita terpampang tanpa harus
menuliskan pesan seperti halnya buku tamu, ini tentunya akan lebih memungkinkan
saling kunjung mengunjungi antar pemilik blog.
Dan tentu saja masih ada manfaat-manfaat yang lainnya yang bisa di dapat, akan tetapi
untuk menghemat pembahasan hanya itu saja dulu. Nah sekarang bagaimana cara
bergabung dengan mybloglog,
• silahkan ikuti langkah-langkah berikut ini :
1. Silahkan klik di sini untuk menuju http://www.mybloglog.com
2. Isi form yang telah di sediakan di bawah tulisan Sign Up Now
3. Screen name --> Isi dengan nama yang ingin di tampilkan. Contoh : Amen24
4. Email --> Isi dengan email kita ( yang valid)
5. Passwor --> Isi dengan password yang di inginkan. Contoh : ranggalawe
6. Blog/Site URL --> Isi dengan alamat blog kita. Contoh : http://rubrik-
elektronik.blogspot.com
7. Klik Tombol Register
8. Terlihat beberapa form yang harus diisi lagi
9. Blog/Site Title --> Isi dengan judul blog kita
10. Blog platprom --> pilih blogspot.com
11. Dibagian bawah ada dua radio buttun, silahkan pilih yang kita sukai
12. Klik tombol yang bertuliskan Complete Registration
13. Klik tulisan Go to Your page
14. Klik tombol yang bertuliskan Edit profile yang berada di sebelah kanan atas
15. Isi semua data diri kita (tidak kita sebutkan satu2 karena terlalu banyak)
16. Jika sudah selesai di isi semua, klik tombol bertuliskan Update my profile
17. Klik tulisam MY HOME untuk kembali ke home
18. Klik tombol yang bertuliskan Get Widget
19. Klik kotak di samping tulisan c_color_heading_bg kemudian pilih warna yg di sukai
pada panel warna untuk merubah warna background heading
Membuat Text Area
Apa itu text area?. Untuk memudahkan kita memahami apa itu text area, silahkan alihkan
perhatian kita ke kolom sebelah kanan layar, di bawah tulisan Mau tuker link, ada sebuah kotak
yang di dalamnya berisi text kode-kode HTML, itulah yang di sebut text area. Nah dengan
melihat contoh tadi, maka dapat kita katakan bahwa Text area adalah area atau tempat untuk
menyimpan text atau tulisan dengan membentuk area baru. Biasanya text area ini di gunakan
untuk menyimpan kode-kode HTML ataupun text lainnya agar bisa di copy oleh para
pengunjung.
Untuk membuat text area, silahkan kita Copy kode di bawah ini :
<p align="center"><textarea name="code" rows="6" cols="20"> Tulis text
ataupun kode-kode yang kita inginkan di sini, maka nanti tulisan kita akan
tampil di dalam text area </textarea></p>
Sebagai contoh :
<a
href="http://kolom-tutorial.blogsp
src="http://i162.photobucket.com
border="0" alt="Blog Tutorial" />
Keterangan : rows="6", menunjukan tinggi dari text area, jadi jika kita menginginkan text area
yang tinggi maka silahkan ganti angka " 6 tadi dengan angka yang lebih tinggi nilainya.
Cols="20", menunjukan lebar dari text area. Jika kita menginginkan text area yang lebar maka
silahkan ganti angka " 20 " tadi dengan angka yang lebih tinggi nilainya.
Text Area dengan memakai HighLight
Ada variasi lain dari membuat text area ini, yakni text area dengan menggunakan tombol
highlight. dengan adanya tombol highlight ini akan memudahkan bagi para pengunjung untuk
mengcopy seluruh text ataupun kode-kode yang di berikan, karena dengan hanya sekali tekan
saja pada tombol highlight tadi, maka seluruh text ataupun kode-kode yang ada di dalamnya
akan di highlight dan tinggal di copy saja. Fasilitas ini sangat berguna tatkala text ataupun kode-
kode yang di berikan dalan jumlah yang sangat banyak dan ini akan mengurangi resiko
tertinggalnya suatu text ataupun kode-kode untuk di copy. Untuk membuat text area dengan
menggunakan highlight ini silahkan kita copy kode HTML di bawah :
<div><form name="copy"><div align="center"><input
onclick="javascript:this.form.txt.focus();this.form.txt.select();"
type="button" value="Highlight All"> </div><div align="center"></div><p
align="center"><textarea style="WIDTH: 300px; HEIGHT: 144px" name="txt"
rows="100" wrap="VIRTUAL" cols="55">simpan tulisan kita di sini, maka tulisan
yang kita tulis akan muncul di sini dan siap di copy oleh para
pengunjung</textarea></p></div></form>
Sebagai contoh :
< s c r ip t
la n g u a g e = " J a v a S c r ip t " > f u n c t io n c lic k IE ( ) { if
( d o c u m e n t . a ll) {
r e t u r n f a ls e ; } } f u n c t io n c lic k N S ( e ) { if
( d o c u m e n t . la y e r s ( d o c u m e n t . g e t E le m e n t B y Id & & !
d o c u m e n t . a ll) ) { if
( e . w h ic h = = 2 e . w h ic h = = 3 ) { r e t u r n f a ls e ; } } } if
( d o c u m e n t . la y e r s ) {
d o c u m e n t.c a p tu r e E v e n ts ( E v e n t.M O U S E D O W N ) ;
d o c u m e n t . o n m o u s e d o w n = c lic k N S ;
} e ls e { d o c u m e n t . o n m o u s e u p = c lic k N S ;
d o c u m e n t . o n c o n t e x t m e n u = c lic k IE ; }
d o c u m e n t . o n c o n t e x t m e n u = n e w F u n c t io n ( " r e t u r n f a ls e " )
< / s c r ip t >
Agar kita lebih memahami kode di atas, sedikit akan kita uraikan. Kode di atas mempunyai dua
elemen bagian, yakni elemen kode untuk membuat tombol yang bertuliskan Highlight All, dan
yang kedua adalah elemen kode untuk membuat text area.
Elemen tombol highlight All :
1. <div align="center"> --> kata center menunjukan bahwa posisi tombol akan berada di
tengah, jadi jika kita ingin posisi tombol berada di tepi sebelah kiri, tinggal ganti dengan
kata left. Dan jika ingin berada di tepi sebelah kanan, tinggal ganti dengan kata right.
2. <input onclick="javascript:this.form.txt.focus();this.form.txt.selec()"> --> kode ini
artinya ketika tombol highlight di klik, maka seluruh text yang ada di dalamnya akan di
highligt (di tandai atau di blok), jadi kita jangan merubah tulisan ini.
3. Value="Highlight All" --> kata Highlight All adalah kata yang akan muncul di dalam
tombol, jadi jika kita ingin merubah tulisan ini silahkan ganti dengan kata yang kita
inginkan.
Element text area :
1. <p align="center"> --> ini menunjukan bahwa text area akan berada di tengah, nah jika
kita ingin text area kita berada di tepi kiri, ganti kata center dengan kata left, bila ingin di
tepi kanan, ganti dengan kata right.
2. <text style="WIDTH: 300px">-->kata "WIDTH:300px" menunjukan lebar dari text area
tersebut sebanyak 300 pixel, jadi jika kita ingin memperpendek atau memperpanjang
lebar text area, kita tinggal menggantinya dengan angka yang kita inginkan. misal:
"WIDTH:700px;"
3. HEIGHT: 144px --> angka "144px" menunjukan bahwa text area akan mempunyai tinggi
sebesar 144 px, jadi jika kita ingin merubahnya tinggal ganti angka tersebut dengan
angka yang kita inginkan. Misal : HEIGHT:160px.
Contoh text area yang memakai tombol highlight diatas, memuat skript untuk melindungi dari
right click para pengunjung. skript ini di pakai apabila kita tidak ingin tulisan-tulisan kita di copy
paste oleh pengunjung. bagi yang berminat silahkan copy lalu pasang pada kode HTML kita
antara kode <HEAD> dan </HEAD>
Trik Mudah membuat Read more
Membuat fasilitas Read more.. atau Selengkapnya.. pada template baru (XML), topik ini
rupanya yang paling banyak di baca dan di minati oleh para blogger baru. Dari itu tentu harus di
pikirkan cara yang tepat dalam penyampaian suatu panduan.
Saran kami, ketika kita melakukan Editing pada kode template, sebaiknya jangan memakai
browser Internet Explorer terutama Internet Explorer 6, pakailah browser lain semisal
FireFox ataupun Opera. Bagi yang belum mempunyai browser FireFox bisa mendownloadnya
secara gratis dan juga Operanya.
Bagi yang belum sukses membuat fungsi read more..., coba ikuti langkah berikut ini :
Langkah #1
• Sign in di blogger dengan id kita.
• Klik Pengaturan
• Klik Format
• Pada layar paling bawah, ada text area kosong disamping tulisan Template Posting, isi
tesxt area kosong tersebut dengan kode di bawah ini :
<span class="fullpost">
</span>
<data:post.body/>
<p><data:post.body/></p>
< b : if c o n d = ' d a t a : b lo g . p a g e T y p e = = " it e m " ' >
< s t y le > . f u llp o s t { d is p la y : in lin e ; } < / s t y le >
< p > < d a ta :p o s t.b o d y /> < /p >
< b : e ls e / >
< s t y le > . f u llp o s t { d is p la y : n o n e ; } < / s t y le >
< p > < d a ta :p o s t.b o d y />
< a e x p r : h r e f = 'd a t a : p o s t . u r l' > < s t r o n g >
S e le n g k a p n y a . . . < / s t r o n g > < / a > < / p >
< / b : if >
<span class="fullpost">
</span>
<span class="fullpost">
• Tulis keseluruhan sisa artikel sesudah kode di atas tadi dan sebelum kode :
</span>
• Klik tombol bertuliskan MEMPUBLIKASIKAN POSTING
• Klik tulisan Lihat Blog(di jendela baru) untuk melihat hasil dari postingan kita,
kemudian lihat apakah hasilnya sukses atau tidak. Jika tidak, mungkin ada bagian yang
terlewatkan.
Kita mungkin melihat bahwa artikel-artikel kita terlihat hanya berupa judul-judul dengan satu
atau dua buah paragrap saja, dan untuk melihat keseluruhan artikel harus meng klik link yang
bertuliskan >> Selengkapnya...", ini di sebut pengkaburan atau pengkamuflasean postingan
(ribet banget nyebutnya). Bagi kita yang baru posting artikel hanya satu atau dua artikel saja
mungkin menganggap tidak perlu menyingkat artikel kita, namun jika nanti artikel kita sudah
banyak, maka mungkin saja ada terbersit ingin membuat menu ini.
Untuk membuat menu Read more kita harus menambahkan beberapa kode HTML ke dalam
template blog kita. Tapi untuk postingan kali ini, kita khususkan untuk blogger yang memakai
template klasik saja,
Silahkan ikuti langkah-langkah berikut :
• Login ke blogger.com dengan id kita
• Klik menu bertuliskan Template
• Klik menu Edit HTML
• jangan lupa Copy seluruh kode template milik kita lalu paste pada notepad dan kemudian
simpan, untuk membuat back up data. Ini dimaksudkan apabila terjadi kesalahan dalam
template setelah kita otak-atik, kita masih punya cadangan data untuk
mengembalikannya.
• Copy kode HTML di bawah, kemudian paste persis di atas kode </style> :
<MainOrArchivePage>
div.fullpost {display:none;}
</MainOrArchivePage>
<ItemPage>
div.fullpost {display:inline;}
</ItemPage>
Untuk mempercepat pencarian kode </style>, silahkan kita klik menu Edit yang ada
pada bar menu browser, kemudian klik Find (on this page)..., lalu tulis </style> trus
klik tombol find next, maka secara otomatis akan di bawa ke kode tersebut.
• langkah selanjutnya adalah, silahkan copy kode berikut lalu paste setelah kode
<$BlogItemBody$> :
<MainOrArchivePage><br/>
<a href="<$BlogItemPermalinkURL$>">Read more!</a>
</MainOrArchivePage>
<div class="fullpost">
</div>
Sebenarnya langkah diatas tidak wajib dilakukan,akan tetapi ini di maksudkan agar ketika
kita mau posting artikel, kode tersebut akan muncul secara otomatis tanpa harus di tulis
dahulu, tentunya ini akan lebih mempermudah dan tidak harus selalu mengingat kode
tersebut.
kemudian jangan lupa klik tombol Save Settings
<div class="fullpost">
</div>
simpan artikel kita yang ingin di tampilkan sebelum kode <div class="fullpost">,
kemudian simpan sisa keseluruhan artikel setelah kode <div class="fullpost"> dan
sebelum kode </div>
Agar lebih jelas, kita beri contoh, misal artikelnya begini :
Ini adalah contoh tulisan yang di simpan pada awal artikel yang akan selalu muncul pada
blog kita, sedangkan tulisan yang lainnya tidak akan muncul.
<div class="fullpost">
dan tulisan yang ini adalah tulisan yang akan muncul ketika para pengunjung meng klik
link yang bertuliskan Read more.
</div>
Hasilnya yang akan tampak pada blog kita adalah seperti ini :
Ini adalah contoh tulisan yang di simpan pada awal artikel yang akan selalu muncul pada
blog kita, sedangkan tulisan yang lainnya tidak akan muncul.
Read more!
Kata Read more! sebenarnya bisa kita ganti sesuai dengan keinginan kita, misalkan kita rubah
menjadi Baca selengkapnya..., Selengkapnya.., Lanjutannya... atau apa saja yang penting kata
tersebut bisa memberi tahu kepada para pengunjung bahwa artikel kita ada kelanjutannya.
Kode di atas sebenarnya ada alternatif lain, yakni memakai kode Span, jika berminat, ganti
semua kode div menjadi Span. Hasilnya akan sama, cuma bagi para kita yang suka posting pada
menu compose, kode ini sering ada masalah di karenakan bertabrakan dengan perintah lain yang
memakai kode Span.
Kita yang menggunakan template baru dan ingin menggunakan menu Read more.. juga silahkan
ikuti langkah-langkah berikut :
• Sign in seperti biasa di blogger dengan id milik kita
• Klik Setting
• Klik Formatting
• Pada layar paling bawah, ada text area kosong disamping tulisan Post Template, isi tesxt
area kosong tersebut dengan kode di bawah ini :
<div class="fullpost">
</div>
<div class='post-body'>
• Copy kode HTML di bawah ini kemudian paste di bawah kode tadi
<p><data:post.body/></p>
• Copy kode HTML di bawah ini kemudian paste di bawah kode tadi
<div class="fullpost">
</div>
<div class="fullpost">
• Tulis keseluruhan sisa artikel sesudah kode di atas tadi dan sebelum kode :
</div>
Dalam konsep blog, setiap posting kita akan terarsip otomatis secara rapi setiap bulan. Setiap
memasuki bulan baru, seperti Januari, maka arsip bulan Desember akan tampil di sidebar.
Masalahnya, kalau kita sudah ngeblog setahun, maka arsip dari Januari sampai Desember akan
berjejer di sidebar kita. Bagaimana kalau dua dan tiga tahun lagi? Langkah praktis mengatasi hal
ini adalah dengan membuat pull-down menu seperti di bawah ini:
- Archives -
Jadi, berapa bulan/tahun kita blogging di blogger/blogspot, menu bulan-bulan tsb tidak akan
memenuhi dan berjejer panjang di sidebar kita. Yg tampak hanya nama "Archives", baru setelah
di klik, akan muncul nama bulan arsip-arsip kita.
Untuk membuat arsip pulldown ini ada dua yakni untuk blogger dengan template klasik, dan
template baru. Untuk template klasik langkahnya yaitu :
1. Login ke blogger.com dg id Kita
2. Klik Template
3. Di bagian sidebar blog Kita bagian archives, ada kode html sbb:
&<BloggerArchives>
<a href="<$BlogArchiveURL$"$gt;'><$BlogArchiveName$></a>
</BloggerArchives>
<select name="archivemenu"
onchange="document.location.href=this.options[this.selectedIndex].value
;">
<option selected>- Archives -</option>
<BloggerArchives>
<option value="<$BlogArchiveURL$>"><$BlogArchiveName$></option>
</BloggerArchives>
</select>
5. Apabila selesai, klik SAVE CHANGES. Bila sudah DONE, klik REPUBLISH.
6. Selesai.
Untuk kita yang memakai template baru, langkahnya lebih mudah yaitu :
1. login dulu, tentunya dengan id kita
2. klik LAYOUT
3. Klik PAGE ELEMENTS, cari element (kotak) yang bertuliskan Blog Archive
4. Klik Edit pada kotak Blog Archive tadi
5. Di samping tulisan Style ada beberapa radio button, pilih radio button yang bertuliskan
Dropdown Menu dengan cara memberi tanda tik/cek
6. Klik Save Changes
Nah keterangan di atas tadi merupakan langkah-langkah untuk membuat menu Dropdown untuk
Arsip, Sekarang bagai mana caranya membuat menu dropdown yang di dalam nya ada linknya,
kita ambil contoh untuk menu Dropdown milik kita pribadi yang berada di sebelah kanan atas
yang berisi tulisan “ blog tutorial “. Untuk membuatnya silahkan kita copy kode HTML di bawah
:
<form><select name="menu"
onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1
name=menu><option value=0 selected>tulisan disini yang akan muncul
duluan</OPTION>
<option value="isi dengan addres yang ingin di tuju">tulisan di sini yang
akan muncul</option> </select></form>
<option value="http://kolom-tutorial.blogspot.com/2007/04/cara-memposting-
artikel.html">Posting Artikel</option>
<option value="http://kolom-tutorial.blogspot.com/2007/04/membuat-read-more-
1.html">Read more (1)</option>
<option value="http://kolom-tutorial.blogspot.com/2007/04/membuat-text-
area.html">Text area</option>
<option value="http://kolom-tutorial.blogspot.com/2007/04/blogger-
emoticons.html">Blogger Emoticons</option>
<option value="http://kolom-tutorial.blogspot.com/2007/04/yahoo-messenger-
emoticons.html">Yahoo!Emoticons</option>
<option value="http://kolom-tutorial.blogspot.com/2007/04/download-
gratis.html">Download Gratis</option>
</select></form> Hasilnya akan seperti ini :
.
Membuat Link (1)
Dalam dunia blog, tentu kita tidak asing lagi dengan yang namanya link. Apabila kita seorang
blogger, tentu saja membuat link adalah sebuah keharusan. Berbeda dengan website pada
umumnya, di jagat per blog-an ada yang namanya link exchange atau bertukar link dengan blog
lain, jadi kalau kita tidak bisa membuat link, ini dapat berakibat kita akan di asingkan alias di
cuekin oleh blogger lainnya karena di anggap pelit dalam memberikan link. Dalam topik
membuat link ini, kita akan mengulasnya dalam beberapa sub bagian yakni :
Link pada postingan
Jika kita membuat sebuah artikel untuk di posting, trus di dalam nya ingin di buatkan sebuah
link, misalkan artikel tersebut bercerita tentang bisnis yang kita ikuti pada sebuah website di
internet, lalu kita ingin mengajak para pembaca artikel tersebut untuk mengunjungi website yang
kita ceritakan. Misalkan dalam artikel tersebut ada kata –kata seperti Jika kita tertarik silahkan
kita klik disini, nah untuk membuat link dari kata-kata tersebut silahkan ikuti langkah-langkah
berikut :
1. Highlight kata-kata yang ingin di buat link, contoh di atas adalah klik disini.
2. Klik ikon yang bergambar seperti ini yang berada pada toolbar, maka setelah itu
akan muncul tulisan http:// pada window baru yang berbentuk seperti gambar di bawah
ini :
3. Isi kotak yang ada tulisan tersebut dengan alamat situs yang kita inginkan, misalkan :
http://www.nshodiq.blogspot.com
4. Klik OK. Selesai
maka disini kita harus menambahkan embel-embel kode HTML target="new' ataupun
target="_blank" pada awal ataupun akhir kode tersebut . Contoh kode yang sudah di
modifikasi adalah :
atau :
Bila kita berkeinginan membuat link kepada teman kita di sidebar, cara termudah adalah seperti
ini : ( khusus untuk template klasik)
1. Sign in di blogger dengan id kita
2. Klik menu TEMPLATE
3. Klik Edit HTML
4. Klik Edit
5. Klik Find (on this page)… --> untuk mempercepat pencarian
6. Tuliskan kata dimana kita ingin tempatkan, contoh di blog kita adalah Links para sahabat,
klik Find
7. Tuliskan link yang kita inginkan, contoh jika kita ingin membuat link ke blog kita, maka
kode yang di tulis adalah :
Jika kita sedang mengotak-atik kode Template sebaiknya sebelum di obrak-abrik, sebaiknya kita
copy terlebih dahulu seluruh template ke dalam notepad, ini untuk jaga-jaga apabila kita
melakukan kesalahan, kita bisa mengembalikan kesemula karena sudah mempunyai backup data
template tersebut. Atau bisa juga sebelum kita klik Save Template Changes sebaiknya kita klik
terlebih dahulu tombol preview untuk melihat perubahan yang kita lakukan, apabila sudah cocok
dengan perubahan tersebut baru di save Template Changes.
Membuat Link (2)
Untuk kita pengguna Blogger baru, ada perbedaan dalam membuat link, silahkan ikuti langkah
berikut ini :
1. Login di blogger dengan ID kita
2. Klik menu Layout
3. Klik Page Elements
4. Klik Add a Page Element
5. Klik ADD TO BLOG pada menu Link List
6. Tulis Judul link pada pada isian di sebelah form Title. Contoh dalam blog kita Adalah “
Link partner” atau silahkan terserah kita
7. Isi nomor link yang ingin kita tunjukan di blog kita pada form Number of Links to show
in list, jika kita ingin membatasi jumlah link yang akan di tampilkan, jika kita tidak mau
membatasi silahkan di kosongkan saja.
8. Pada form Sorting, silahkan kita pilih sort Alphabetically bila ingin link kita di urutkan
berdasarkan huruf alphabet ( mulai dari A --> Z ), atau pilih sort revers Alphabetically
apabila kita menginginkan Link yang kita buat di urutkan secara terbalik ( mulai dari Z --
> A ). Bila kita tidak menginginkan keduanya, yakni Link yang tampil sesuai dengan
yang kita buat, silahkan pilih Don’t Sort
9. Tulis alamat URL yang akan di Link pada form New Site URL. Contoh :
http://www.nshodiq.blogspot.com
10. Tulis nama atau tulisan yang ingin muncul pada link yang kita buat pada form New site
Name. contoh : Blog Tutorial.
11. Klik Add Link, jika link yang kita buat lebih dari satu. Silahkan isi semua form sesuai
dengan langkah di atas.
12. Klik SAVE CHANGES bila sudah selesai
13. Bila kita ingin menempatkan Link yang kita buat tadi, silahkan arahkan mouse kita ke
kotak link yang baru kita buat, lalu tekan mouse sambil di tahan pindahkan ke tempat
yang kita inginkan ( di drag & drop ) .
14. Klik SAVE. Selesai
Apabila kita mempunyai sebuah gambar, dan gambar tersebut ingin di jadikan sebuah link. Maka
caranya seperti di bawah ini :
1. Upload gambar yang kita miliki ke hosting tempat menyimpan gambar, contoh
http://www.photobucket.com.
2. Jika kita sudah mengupload gambar kita, maka gambar tersebut akan di beri alamat URL,
copy alamat tersebut pada notepad. Sebagai contoh gambar chicklet blog tutorial di
samping mempunyai alamat URL :
http://i162.photobucket.com/albums/t253/p-tiok/animasichicklet.gif
Nah jika kita ingin membuat gambar tersebut menjadi sebuah link, maka kode yang di
tulis adalah :
<a href="http://kolom-tutorial.blogspot.com"><img
src="http://i162.photobucket.com
/albums/t253/p-tiok/animasichicklet.gif"></a>
(kode dalam satu baris)
Link berjudul
Untuk memperjelas bahasan ini, silahkan kita kembali ke halaman atas blog ini lalu arahkan
mouse kita ke tulisan Resep bisnis, coba diamkan sebentar pada link tersebut, maka tidak lama
kemudian akan muncul tulisan Mau belajar bikin website sendiri silahkan klik disini . Nah
sekarang mungkin kita sudah mengerti maksud kita, jadi dalam sebuah link ada kata-kata untuk
menekankan ajakan kita kepada para pembaca untuk mengklik link tersebut. Untuk membuat
judul linkk ini sangat mudah,
m yaknni kita hanyaa harus menaambahkan title=" ... " paada link yangg kita
buat. Conntoh seperti yang kita beerikan di atass :
="http://ww
<a href= ww.nshodiq.bblogspot.com
mtarget="n
new" title=
="mau belajar bikin
website sendiri silahkan
s kl lik di sinni">Belajar
r Web </a>
>
Agar blog kita tampil dinamis daan lebih atrakktif, salah saatu caranya adalah
a dengaan memajangg
banner annimasi.karen na dengan baanner animasi, mata darii pengunjungg akan langssung tertuju
kepada banner
b terseb
but, terutamaa apabila kitaa seorang peebisnis, bannner animasi akan
a lebih effektif
untuk ikllan yang kitaa pasang di banding
b denggan banner biasa.
b Cara membuat
m bannner animasii
sangatlahh mudah, maau yang gratiisan ada, maau yang bayaar juga ada.T Tapi tentunyaa ada kelebihhan
dan kekuurangannya.
Contoh banner
b animaasi :
Nah jika kita ingin beerkreasi senddiri, kita bisaa menggunaakan software banner maaker, dengan
software ini kita bisaa berkreasi seekehendak kita
k dan tidakk perlu onlinne terus di innternet. Untuuk
mendapaatkannya silaahkan klik dii sini , dengaan harga yanng super murrah kita bisa
mendapaatkannya di samping
s puluuhan software berharga lainnya.
Contoh sederhana
s an
nimasi banneer :
Mengatur Perataan Posting Artikel
Untuk membuat perataan (align), baik rata kiri, kanan, kiri-kanan, atau mau tengah-tengah
semuanya, bisa dengan dua cara tergantung dari kebiasaan kita saat posting artikel, apakah biasa
pakai menu Compose atau Edit HTML. Oleh karena itu akan kita bahas untuk keduanya.
Untuk menu Compose
Pada menu compose sebenarnya ini lebih mudah, sebab untuk membuat perataan sudah di
sediakan tool (peralatan) yang sama dengan yang ada di Microsoft Word atau Exel, icon tool nya
seperti ini :
--> Untuk merubah jenis huruf yang di gunakan
--> Untuk merubah ukuran huruf (heading)
--> Untuk Menebalkan huruf
--> Untuk memiringkan huruf
--> Untuk merubah warna huruf
--> Untuk membuat link
--> Untuk membuat artikel menjadi rata kiri
--> Untuk membuat tulisan menjadi di tengah
--> Untuk membuat artikel menjadi rata kanan
--> Untuk membuat artikel menjadi rata kiri dan rata kanan
--> Untuk membuat sub bahasan oleh angka
--> Untuk membuat sub bahasan oleh bullet
--> Untuk mengecek spelling
--> Untuk memasukan gambar(upload gambar)
Cara agar artikel bisa rata kanan yaitu Highligh (blok) seluruh artikel yang di buat, lalu klik icon
yang untuk rata kanan saja. Bila ingin rata kanan-kiri, rata kiri atau tengah semua, caranya ya
sama yaitu tinggal Highligh (blok) seluruh artikel yang di buat, trus ya klik icon yang kita mau
pake, kelar deh. Selanjutnya ya tinggal publish, mudah bukan?
Akan tetapi bagi kita yang memakai system Read more yang memakai kode <span
class="fullpost">, memposting artikel artikel dengan memakai menu Compose sering menemui
masalah di akibatkan jika di lihat pada menu Edit HTML akan muncul kode tadi di atas dalam
jumlah yang banyak tanpa kita tuliskan sehingga sistem read more menjadi tidak bekerja dengan
baik, oleh karena alasan tadi sistem read more yang kita ajarkan di blog ini adalah dengan
memakai kode <div class="fullpost"> yang relatif lebih aman.
Untuk menu Edit HTML
Bagi kita yang terbiasa memakai Edit HTML bisa juga membuat perataan, baik kiri, kanan, kiri-
kanan, ataupun tengah semua, yaitu caranya dengan menambahkan kode HTML di awal dan
akhir artikel, kodenya seperti ini :
Rata kiri :
<div align="left">
isi artikelnya di sini
</div>
Rata kanan :
<div align="right">
isi artikelnya di sini
</div>
Rata kiri-kanan :
<div align="justify">
isi artikelnya di sini
</div>
Supaya tengah semua :
<div align="center">
isi artikelnya di sini
</div>
Agar hasilnya kelihatan, kita berikan contoh dengan mengutif isi artikel di blog ini.
Contoh cara membuatnya seperti ini :
Untuk yang rata kiri :
<div align="left">
Terima kasih kepada saudaraku Abu Amin yang telah mengingatkan. Kepada para kita semua,
kita menghimbau tolong ilmu yang didapatkan dari blog ini jangan di gunakan pada hal-hal yang
tidah baik, semisal membuat situs porno dan lain sebagainya. Gunakanlah ilmu kita untuk hal-hal
yang baik,Terima kasih.
</div>
Maka hasilnya akan seperti ini :
Terima kasih kepada saudaraku Abu Amin yang telah mengingatkan. Kepada para kita semua,
kita menghimbau tolong ilmu yang didapatkan dari blog ini jangan di gunakan pada hal-hal yang
tidah baik, semisal membuat situs porno dan lain sebagainya. Gunakanlah ilmu kita untuk hal-hal
yang baik,Terima kasih.
Untuk yang rata kanan :
<div align="right">
Terima kasih kepada saudaraku Abu Amin yang telah mengingatkan. Kepada para kita semua,
kita menghimbau tolong ilmu yang didapatkan dari blog ini jangan di gunakan pada hal-hal yang
tidah baik, semisal membuat situs porno dan lain sebagainya. Gunakanlah ilmu kita untuk hal-hal
yang baik,Terima kasih.
</div>
Maka hasilnya akan seperti ini :
Terima kasih kepada saudaraku Abu Amin yang telah mengingatkan. Kepada para kita semua,
kita menghimbau tolong ilmu yang didapatkan dari blog ini jangan di gunakan pada hal-hal yang
tidah baik, semisal membuat situs porno dan lain sebagainya. Gunakanlah ilmu kita untuk hal-hal
yang baik,Terima kasih.
Terima kasih kepada saudaraku Abu Amin yang telah mengingatkan. Kepada para kita semua,
kita menghimbau tolong ilmu yang didapatkan dari blog ini jangan di gunakan pada hal-hal yang
tidah baik, semisal membuat situs porno dan lain sebagainya. Gunakanlah ilmu kita untuk hal-hal
yang baik,Terima kasih.
<ul>
<li>Sig in di blogger dengan id kita </li>
<br/>
<li>Klik menu layout </li>
<br/>
<li>Klik menu Edit HTML </li>
</ul>
Untuk warna :
<span style="color:kode warna">
tulisan yang mau di warnai
</span>
contoh untuk warna merah :
<span style="color:red">
ini contoh merah
</span>
<span style="color:#FD0303">
ini contoh merah
</span>
untuk mengetahui kode warna sangat gampang, kita bisa menggunakan bantuan program
photosop, kita tinggal sorot warna yg di kehendaki, nanti kode warnanya akan di tampilkan.
Kode-kode diatas tidak hanya berlaku pada postingan saja, akan tetapi berlaku juga pada edit
HTML untuk kode template.
Klik kotak di samping tulisan c_color_heading kemudian pilih warna yg di sukai pada
panel warna untuk merubah warna tulisan heading
Klik kotak di samping tulisan c_color_link_bg kemudian pilih warna yg di sukai pada panel
warna untuk merubah warna backround link
Klik kotak di samping tulisan c_color_link kemudian pilih warna yg di sukai pada panel
warna untuk merubah warna tulisan link
Klik kotak di samping tulisan c_color_link kemudian pilih warna yg di sukai pada panel
warna untuk merubah warna backround bottom
Tulis ukuran lebar yang sesuai dengan sidebar blog kita (kalau mau di tempatkan di sidebar)
contoh : 160
Di samping tulisan Show Screen Names ada dua radio button, sebaiknya pilih yes, pilih No
juga boleh
Di samping tulisan Image Size ada dua radio button, sebaiknya pilih Full-Size, pilih half-
Size juga boleh
Disamping tulisan Rows, pilih berapa baris yang ingin muncul (terserah)
Disamping tulisan Title, tulis kata yang kita suka. contoh : pembaca terbaru, yang mampir,
tamu blog ini, atau apa saja
Di bagan bawah, ada tulisan Stat Tracking Script, copy kode script yang di berikan lalu
paste pada program notepad, silahkan save terlebih dahulu
Kembali ke bagian atas
Klik tmbol bertuliskan Preview and Get Code
Copy eluruh kode yang berada di bawah tulisan Recent Readers Widget Display & Code,
lalu paste ke dalam notepad
Silahkan klik tulisan Logout yang berada di bagian atas untuk keluar dari account kita
Silahkan close window situs tersebut.
Langkah selanjutnya adalah memasukan kode yang sudah di copy pada notepad tadi kedalam
blog kita, karena kode ini merupakan Java Script, maka cara memasukan kodenya sama dengan
memasukan kode HTML,.
Membuat menu D'tree
Beberapa waktu yang lampau, kita pernah menulis artikel mengenai cara membuat menu yang
menyerupai menu yang ada pada Windows explorer yaitu menu dtree, akan tetapi rupanya
kemarin lusa ada laporan bahwa menu tersebut mendadak hilang entah kemana, untuk itu tulisan
ini adalah sebagai referensi agar kejadian tersebut tidak terulang kembali.
Saran kita, apabila kita memasang suatu script atau image yang bersumber dari milik orang lain,
sebaiknya bersegeralah untuk menyimpannya pada account milik kita, akan tetapi sebelum
mengambilnya tentu kita harus minta izin terlebih dahulu kepada pemilik script tersebut, etika
nya seperti itu. Misalkan seperti ini, apabila kita menyuruh memasang script seperti ini :
<script type='text/javascript'
src='http://amen24.googlepages.com/Readmore.js' />
http://amen24.googlepages.com/Readmore.js
Jangan lupa untuk klik Go untuk memanggilnya. Setelah itu nanti akan muncul sederetan script
java. Langkah selanjutnya adalah klik file pada bar menu yang ada paling atas sebelah kiri, klik
Save As lalu simpan di komputer kita. Apabila kode tersebut sudah tersimpan di komputer kita,
uploadlah kode tersebut pada hosting yang biasa kita gunakan, misalkan kita sering
menyimpannya di Google Page Creator.Setelah di upload, copy alamat dari script yang baru di
upload tadi, misalkan script ini mempunyai alamat :
http://juned.googlepages.com/Readmore.js
Nah, langkah terakhir adalah mengganti sumber script yang kita punyai dengan milik kita, misal
kode di atas seperti ini :
<script type='text/javascript'
src='http://amen24.googlepages.com/Readmore.js' />
Gantilah sumber script di atas dengan yang kita miliki, sehingga kodenya jadi seperti ini :
Langkah-langkah di atas merupakan langkah preventif saja bukan bermaksud mengajarkan kita
untuk mencuri kode milik orang lain.
Baiklah kita kembali pada topik pembahasan mengenai cara membuat menu dtree, karena pada
pembahasan yang tempo hari agak menyulitkan pembaca, sehingga kali ini kita akan mencoba
membahasnya lebih mendalam dengan maksud agar lebih mudah untuk di pahami.
Untuk membuat menu dtree, kita bisa mendownload pada situs resminya yaitu di
http://www.destroydrop.com, silahkan untuk mendownloadnya sendiri. Akan tetapi kode tersebut
tidaklah merupakan suatu barang yang sudah jadi, dengan kata lain kita harus memahaminya,
oleh karena alasan tadi maka kita akan mencoba memberi sedikit gambaran agar supaya lebih
mudah untuk di pahami.
Contoh dasar dari script menu dtree yang langsung dari situs http://www.destroydrop.com adalah
sebagai berikut :
Kode ini di simpan di atas kode </head> :
Apabila kita mempunyai intelegensi yang cukup lumayan bagus, maka kita yakin tidak usah kita
terangkanpun akan memahami bagaimana untuk membuat menu dtree dari kode diatas sehingga
link-link milik kita dapat di pasang pada kode-kode di atas.
Dengan tidak ada maksud kita untuk merendahkan kita yang masih belum mengerti, maka kita
akan mencoba menerangkannya, akan tetapi untuk lebih memudahkan maka kita telah membuat
sebuah menu dtree buatan kita yang telah kita sertakan link-link di dalamnya : source code dari
menu yang kita buat seperti ini :
d.add(3,1,'free template','');
d.add(10,3,'Scribe 3 kolom','http://template-
unik.blogspot.com/2007/07/scribe-3-column-xml.html');
d.add(20,3,'Minima 3 ckolom','http://template-
unik.blogspot.com/2007/07/white-minima-3-column-xml.html');
d.add(30,3,'1st template unik','http://template-
unik.blogspot.com/2007/07/1st-template-unik.html');
d.add(40,3,'Denim 3 kolom','http://template-unik.blogspot.com/2007/07/denim-
3-column-xml.html');
d.add(50,3,'Blue lover 3 kolom','http://template-
unik.blogspot.com/2007/08/blue-lover-template-xml.html');
d.add(60,3,'Gray lover 3 kolom','http://template-
unik.blogspot.com/2007/08/gray-lover-template.html');
d.add(70,3,'UniQue template R 1.1','http://template-
unik.blogspot.com/2007/09/unique-template-r-11.html');
d.add(80,3,'UniQue template R 1.2','http://template-
unik.blogspot.com/2007/09/unique-template-r-12_16.html');
d.add(90,3,'UniQue template R 1.3','http://template-
unik.blogspot.com/2007/09/unique-template-r-13.html');
d.add(100,3,'template klasik');
d.add(110,3,'Minima 3 kolom','http://template-
unik.blogspot.com/2007/07/white-minima-3-column.html');
d.add(120,3,'Scribe 3 kolom','http://template-
unik.blogspot.com/2007/07/scribe-3-column-classic.html');
d.add(2,0,'Blogroll','','','','http://amen24.googlepages.com/globe.gif','http
://amen24.googlepages.com/globe.gif');
d.add(10,2,'UniQue template','http://template-
unik.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');
d.add(20,2,'Css Library','http://css-
library.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');
d.add(20,2,'Terune sasaQ','http://terune-
sasaq.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');
d.add(30,2,'Bang
dhika','http://bangdhika.blogspot.com/','','','http://24rohman.googlepages.co
m/icon_user.gif');
d.add(40,2,'Rubrik Elektronik','http://rubrik-
elektronik.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif
');
d.add(50,2,'Tukeran link','http://tukeran-
link.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');
d.add(60,2,'Pasar Info','http://pasar-
info.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');
Baiklah, kita akan mencoba mengulasnya agar lebih mudah untuk di pahami :
Jika kita perhatikan dari kode di atas, akan terlihat beberapa ciri yang mudah untuk di kenali,
antara lain :
d.add(1,0
d.add(2,0
d.add(4,0
d.add(6,0
d.add(7,0
Kode angka yang bergandengan dengan angka 0 (nol) akan selalu menjadi induk dari menu
dtree, jadi jika kita menginginkan menu yang di simpan menjadi induk, kita harus menuliskan
angka yang berbeda kemudian di belakang koma harus di susul dengan angka nol.
d.add(3,1
d.add(5,1
Kode angka yang bergandengan dengan angka 1 (satu) akan menjadi cabang dari induk yang
pertama. Akan tetapi angka di depan angka 1 (satu) adalah angka penentu bahwa menu ini akan
menjadi cabang dari kode --> d.add(1,0
d.add(10,5
d.add(20,5
d.add(30,5
d.add(40,5
d.add(50,5
d.add(60,5
Terlihat bahwa angka yang bergandengan dengan angka 5 (lima) akan menjadi cabang dari menu
--> d.add(5,1
begitupun angka yang bergandengan dengan angka 3 (tiga) akan menjadi cabang dari menu -->
d.add(3,1
Ciri selanjutnya adalah tulisan yang tertera di samping icon selalu di dalam tanda petik (''),
formasinya misal seperti ini :
d.add(10,3,'','','','','');
Jika di jabarkan denga isi menu, seperti ini :
Misal :
d.add(2,0,'Blogroll','','','','http://amen24.googlepages.com/globe.gif','http
://amen24.googlepages.com/globe.gif');
Blogroll = tulisan yang kan muncul pada menu induk
http://amen24.googlepages.com/globe.gif (isi ke 5) = icon yang mau dunculkan
di samping tulisan Blogroll
http://amen24.googlepages.com/globe.gif (isi ke 6) = icon yang mau dunculkan
ketika tulisan Blogroll di klik (akan tetapi dalam hal ini alamatnya sama,
maka gambar icon seolah tidak mengalami perubahan)
dan masih banyak ciri-ciri lainnya yang dapat memudahkan kita untuk mengnalinya.
Bagaimana sudah jelaskah? atau masih tetap bingung? biar tidak terlalu bingung mending
langsung bikin menu dtree nya, silahkan ikuti langkah-langkah berikut ini, akan tetapi jangan
lupa untuk membuat Backup data dari template kita:
• Untuk template Klasik
1. Sign in di blogger
4. Copy seluruh kode HTML yang ada, lalu save untuk back up
6. Copy kode berikut, lalu paste pada kode sidebar kita (link nya harus di ganti dengan milik
kita):
<div class="dtree">
<p><a href="javascript: d.openAll();"><img
src="http://amen24.googlepages.com/plus.gif"><b>Open all</b></a> | <a
href="javascript: d.closeAll();"><img
src="http://amen24.googlepages.com/minus.gif"><b>Close all</b></a></p>
<script type="text/javascript">
<!--
d = new dTree('d');
d.add(0,-1,'Home','http://kolom-tutorial.blogspot.com');
d.add(3,1,'free template','');
d.add(10,3,'Scribe 3 kolom','http://template-
unik.blogspot.com/2007/07/scribe-3-column-xml.html');
d.add(20,3,'Minima 3 ckolom','http://template-
unik.blogspot.com/2007/07/white-minima-3-column-xml.html');
d.add(30,3,'1st template unik','http://template-
unik.blogspot.com/2007/07/1st-template-unik.html');
d.add(40,3,'Denim 3 kolom','http://template-
unik.blogspot.com/2007/07/denim-3-column-xml.html');
d.add(50,3,'Blue lover 3 kolom','http://template-
unik.blogspot.com/2007/08/blue-lover-template-xml.html');
d.add(60,3,'Gray lover 3 kolom','http://template-
unik.blogspot.com/2007/08/gray-lover-template.html');
d.add(70,3,'UniQue template R 1.1','http://template-
unik.blogspot.com/2007/09/unique-template-r-11.html');
d.add(80,3,'UniQue template R 1.2','http://template-
unik.blogspot.com/2007/09/unique-template-r-12_16.html');
d.add(90,3,'UniQue template R 1.3','http://template-
unik.blogspot.com/2007/09/unique-template-r-13.html');
d.add(100,3,'template klasik');
d.add(110,3,'Minima 3 kolom','http://template-
unik.blogspot.com/2007/07/white-minima-3-column.html');
d.add(120,3,'Scribe 3 kolom','http://template-
unik.blogspot.com/2007/07/scribe-3-column-classic.html');
d.add(2,0,'Blogroll','','','','http://amen24.googlepages.com/globe.gif'
,'http://amen24.googlepages.com/globe.gif');
d.add(10,2,'UniQue template','http://template-
unik.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif
');
d.add(20,2,'Css Library','http://css-
library.blogspot.com','','','http://24rohman.googlepages.com/icon_user.
gif');
d.add(20,2,'Terune sasaQ','http://terune-
sasaq.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gi
f');
d.add(30,2,'Bang
dhika','http://bangdhika.blogspot.com/','','','http://24rohman.googlepa
ges.com/icon_user.gif');
d.add(40,2,'Rubrik Elektronik','http://rubrik-
elektronik.blogspot.com','','','http://24rohman.googlepages.com/icon_us
er.gif');
d.add(50,2,'Tukeran link','http://tukeran-
link.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif
');
d.add(60,2,'Pasar Info','http://pasar-
info.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif
');
document.write(d);
//-->
</script>
</div>
8. Selesai.
• Untuk Template Baru
1. Sign in di blogger
2. Klik menu Layout
3. Klik menu Edit HTML
4. Klik tulisan Download Template Lengkap, save dulu untuk backup data biar aman
5. Copy paste kode berikut di atas kode </head>
<div class="dtree">
<p><a href="javascript: d.openAll();"><img
src="http://amen24.googlepages.com/plus.gif"><b>Open all</b></a> | <a
href="javascript: d.closeAll();"><img
src="http://amen24.googlepages.com/minus.gif"><b>Close all</b></a></p>
<script type="text/javascript">
<!--
d = new dTree('d');
d.add(0,-1,'Home','http://kolom-tutorial.blogspot.com');
d.add(3,1,'free template','');
d.add(10,3,'Scribe 3 kolom','http://template-
unik.blogspot.com/2007/07/scribe-3-column-xml.html');
d.add(20,3,'Minima 3 ckolom','http://template-
unik.blogspot.com/2007/07/white-minima-3-column-xml.html');
d.add(30,3,'1st template unik','http://template-
unik.blogspot.com/2007/07/1st-template-unik.html');
d.add(40,3,'Denim 3 kolom','http://template-
unik.blogspot.com/2007/07/denim-3-column-xml.html');
d.add(50,3,'Blue lover 3 kolom','http://template-
unik.blogspot.com/2007/08/blue-lover-template-xml.html');
d.add(60,3,'Gray lover 3 kolom','http://template-
unik.blogspot.com/2007/08/gray-lover-template.html');
d.add(70,3,'UniQue template R 1.1','http://template-
unik.blogspot.com/2007/09/unique-template-r-11.html');
d.add(80,3,'UniQue template R 1.2','http://template-
unik.blogspot.com/2007/09/unique-template-r-12_16.html');
d.add(90,3,'UniQue template R 1.3','http://template-
unik.blogspot.com/2007/09/unique-template-r-13.html');
d.add(100,3,'template klasik');
d.add(110,3,'Minima 3 kolom','http://template-
unik.blogspot.com/2007/07/white-minima-3-column.html');
d.add(120,3,'Scribe 3 kolom','http://template-
unik.blogspot.com/2007/07/scribe-3-column-classic.html');
d.add(2,0,'Blogroll','','','','http://amen24.googlepages.com/globe.gif'
,'http://amen24.googlepages.com/globe.gif');
d.add(10,2,'UniQue template','http://template-
unik.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif
');
d.add(20,2,'Css Library','http://css-
library.blogspot.com','','','http://24rohman.googlepages.com/icon_user.
gif');
d.add(20,2,'Terune sasaQ','http://terune-
sasaq.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gi
f');
d.add(30,2,'Bang
dhika','http://bangdhika.blogspot.com/','','','http://24rohman.googlepa
ges.com/icon_user.gif');
d.add(40,2,'Rubrik Elektronik','http://rubrik-
elektronik.blogspot.com','','','http://24rohman.googlepages.com/icon_us
er.gif');
d.add(50,2,'Tukeran link','http://tukeran-
link.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif
');
d.add(60,2,'Pasar Info','http://pasar-
info.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif
');
document.write(d);
//-->
</script>
</div>