Cara membuat kategori (label)

Menanggapi beberapa pertanyaan dari para sobat yang di ajukan baik melalui shoutbox, kotak komentar dan bahkan ada yang melalui yahoo messenger menyoal tentang bagaimana cara membuat kategori dari artiekl-artikel yang telah di posting. Memang betul, tentu dengan adanya pengkategorian atau pengelompokan artikel yang telah di posting oleh pemilik blog dapat lebih mempermudah bagi para pembaca untuk memilih artikel mana yang ingin dibaca.

Di blogger.com fasilitas ini sebenarnya sudah di sediakan, akan tetapi walaupun fasilitas tersebut telah tersedia tentu saja jika kita tidak mengetahui cara menggunakannya akan menjadi tidak berguna. Untuk membuat kategori, di blogger.com di kenal dengan istilah Label. Dengan adanya fasilitas ini kita sebagai pemilik blog hanya tinggal mengisi kotak label yang di sedikan pada setiap posting artikel, sangat simpel dan sederhana.

Agar tidak membingungkan, silahkan sobat lihat pada akhir postingan artikel ini. Disana ada tulisan seperti ini : Labels : Blog tutorial, membuat label. Nah berarti postingan ini termasuk ke dalam dua kategori, yaitu kategori Blog tutorial dan kategori membuat label. Untuk melihat fungsi dari label ini silahkan sobat klik label yang bertuliskan Blog tutorial, maka secara otomatis seluruh postingan yang saya beri label Blog tutorial akan di tampilkan dan siap untuk di baca oleh pengunjung.

Bagaimana cara membuat label?

Untuk membuat sebuah kategori atau label, sobat hanya tinggal mengisi kotak kosong di samping tulisan Label untuk postingan ini : (karena sekarang blogger sudah ada yang berbahasa indonesia) yang berada di bawah kotak tempat membuat artikel. Isi kotak tersebut dengan kategori yang kira-kiracocok untuk postingan yang kita buat. Contoh : liburan musim dingin. Satu postingan tidak hanya terpatok hanya pada satu kategori saja, akan tetapi satu postingan bisa mempunyai beberapa kategori. untuk membuatnya tinggal di pisahkan dengan tanda koma ( , )saja, misal untuk postingan artikel blog ini ada yang ber label Blog tutorial, blog tools, aksesori blog, karena postingan tersebut memang cocok dan masuk kedalam ketiga kategori tersebut.

Apakah kategori (label) bisa di tampilkan di sidebar?

Untuk sobat para pengguna template baru, Label (kategori) bisa di tampilkan di sidebar, dan biasanya element label ini sudah tersedia ketika baru memasang template. Jika element label belum tersidia, sobat bisa membuatnya sendiri, silahkan ikuti langkah - langkah berikut ini :

1. Sig in di blogger dengan id sobat


2. Klik menu Layout


3. Klik menu Elemen Halaman


4. Klik tulisan Tambahkan sebuah Elemen Halaman


5. Klik tombol yang bertuliskan TAMBAHKAN KE BLOG yang berada di bawah tulisan Label


6. Tulisan Labels di samping tulisan Judul bisa sobat rubah menjadi Kategori jika sobat mau merubahnya


7. Pilih radio button yang sobat inginkan di samping tulisan Menyortir, Alfabetik : jika kategori ingin di tampilkan sesuai dengan abjad alfabetik ( dari A --> Z ), Berdasarkan Frekuensi : jika kategori ingin ditampilkan sesuai dengan banyaknya label (kategori)


8. Klik tombol yang bertuliskan SIMPAN PERUBAHAN


9. Selesai.



Sangat mudah bukan?

Sedikit pengumumam, karena blogger sekarang sudah ada yang berbahasa indonesia, maka mulai sekarang dalam memandu mengikuti dengan memakai yang berbahasa indonesia.

Selamat mencoba !

Random Banner Header

Menjawab pertanyaan mba Listi beberapa hari yang lalu yang di ajukan melalui shoutbox mengenai cara membuat random banner header atau gambar banner yang ada di header bisa bergantian atau berubah-berubah. Sepertinya memang lebih menarik apabila banner yang ada di header bisa bergantian sehingga suasana akan lebih fresh karena tidak monoton seperti blog saya ini , tapi tidak apa-apa, mungkin suatu hari nanti blog inipun headernya bisa bergantian .

Untuk membuat random banner ada beberapa langkah yang harus sobat lakukan, yaitu :

# Langkah pertama


Langkah pertama yang harus dilakukan tentunya sobat wajib membuat beberapa banner, bisa tiga, empat, lima, dan seterusnya tergantung dari keinginan sobat. Untuk membuatnya sobat bisa menggunakan program-program semisal adobe photoshop atau coreldraw serta kawan-kawannya yang lain. Akan tetapi karena saya tidak terlalu mahir masalah program untuk desain gambar, maka tidak akan saya terangkan cara pembuatannya. Jika sobat ingin berkonsultasi mengenai program adobe photoshop, silahkan kunujungi http://jaloee.blogspot.com miliknya kang jaloee, beliau ini pakarnya kalau masalah photoshop.


# langkah kedua


Langkah kedua yang harus dilakukan adalah mengupload banner-banner tersebut pada hosting tempat menyimpan gambar, saya ambil contoh www.photobucket.com untuk cara upload pada situs ini sudah saya terangkan pada postingan terdahulu, jika masih bingung silahkan klik di sini.

Jika proses upload selesai, copy URl address banner-banner tersebut lalu paste pada program notepad guna nanti untuk di masukan kedalam kode/script yang akan saya berikan.


# Langkah ketiga


Langkah ketiga yaitu memasukan script kedalam kode template yang sobat miliki. Script dasarnya adalah :






Terlihat diatas bahwa jumlah banner yang diberikan adalah 10 buah, akan tetapi jumlah ini tidak mutlak yaitu berapa saja yang sobat inginkan yang penting pada kode var random=Mat. jumlahnya harus sesuai dengan jumlah banner.


Lagi-lagi karena template blogger ada dua yaitu template klasik dan template baru maka untuk menempatkan kode/script akan berbeda, Sehingga pembahasannya pun akan saya bagi menjadi dua bagian. Sebelumnya saya akan memberikan contoh kode yang memuat banner yang sudah saya upload dan masing-masing memiliki URL addres sebagai berikut :

http://i162.photobucket.com/albums/t253/rohman24/banner_1.gif

http://i162.photobucket.com/albums/t253/rohman24/banner_2.gif

http://i162.photobucket.com/albums/t253/rohman24/banner_3.gif

http://i162.photobucket.com/albums/t253/rohman24/banner_4.gif

http://i162.photobucket.com/albums/t253/rohman24/banner5.gif

http://i162.photobucket.com/albums/t253/rohman24/banner_6.gif

http://i162.photobucket.com/albums/t253/rohman24/banner_7.gif

http://i162.photobucket.com/albums/t253/rohman24/banner_8.gif

http://i162.photobucket.com/albums/t253/rohman24/banner_9.gif

http://i162.photobucket.com/albums/t253/rohman24/banner_10.gif

dan contoh bannernya adalah sebagai berikut (gambar diperkecil) :























Contoh script dari banner-banner ini adalah :






Jika script diatas tulisannya terlalu kecil silahkan klik di sini untuk melihat tulisan yang normal.


Untuk caranya silahkan ikuti langkah-langkah berikut ini.


Untuk Template klasik

1. Sig in di blogger dengan id sobat

2. Klik menu Template

3. Klik menu Edit HTML

4. Copy seluruh kode HTMl lalu paste pada program notepad kemudian save. Ini di maksudkan untuk berjaga-jaga apabila terjadi kesalahan dalam proses editting template, sobat masih mempunyai data untuk mengembalikannya ke semula

5. Copy kode berikut ini lalu paste di bawah kode

(biasanya)








# Klik tombol Save Template Changes

# Selesai.



Untuk Template baru

1. Sign in di blogger dengan id sobat

2. Klik menu layout

3. Klik menu Page Elements

4. Klik tulisan Add a Page Element

5. Klik tombol ADD TO BLOG di bawah tulisan HTML/JavaScript

6. Copy paste kode berikut kedalamnya







7. Klik tombol SAVE CHANGES

8. Selesai.




Sekedar tambahan (padahal masih banyak ), kode diatas adalah sekedar contoh, silahkan ganti address bannernya dengan yang di miliki sobat.

Mungkin ada beberapa template yang di pakai sobat saat ini banner headernya tidak sesuai dengan keinginan sobat, sebenarnya ukuran tersebut bisa kita ganti. Contoh untuk template minima sebagai berikut :


@media all {
#header {
width:660px;
margin:0 auto 10px;
border:1px solid #ccc;
}


Pada kode diatas terlihat bahwa untuk lebar banner header sebesar 660p(width:660px;), nilai tersebut bisa kita rubah sesuai dengan keinginan. Dan untuk tinggi dari banner header tidak di definisikan, nah agar banner kita sesuai dengan keinginan maka kita harus menyelipkan kode tambahan sebagai definisi, contoh lebar yang di inginkan adalah sebesar 150px, maka kode yang di tambahkan adalah height:150px; sehingga kode di atas menjadi seperti ini :


@media all {
#header {
width:660px;
height:150px;
margin:0 auto 10px;
border:1px solid #ccc;
}


Untuk masing-masing template tentunya akan sangat berbeda, akan tetapi untuk template milik blogger, biasanya untuk bagian header di beri nama #header.


Untuk melihat contoh nyata dari efek script diatas, saya sudah membuat satu blog sebagai percontohan, blog tersebut sudah di pasang 10 banner seperti yang saya terangkan di atas, untuk melihat perubahannya sobat harus mengklik susuatu agar layar browser menjadi berubah baru, saya beri contoh dengan mengklik judul arsip atau yang lainnya. Untu melihat contoh silahkan lihat di sini

Selamat mencoba !!!!

Text Berjalan di Bar menu

Sobat Ochim beberapa hari yang lalu mengirimkan email kepada saya yang isinya menanyakan tentang cara membuat text berjalan yang ada pada bar menu bawah seperti halnya pada blog milik saya ini. Pertanyaan tersebut sudah saya jawab langsung melalui email juga dan sekarangpun pada saat artikel ini di buat, sobat Ochim sudah berhasil membuat bar menu blognya ada tulisan berjalan.

Seperti biasanya, jika ada pertanyaan melalui email maka jawaban dari pertanyaan tersebut akan saya posting melalui blog ini. Nah jika sobat sama-sama tertarik ingin membuat text berjalan tersebut, silahkan baca artikel ini sampai tuntas.

Karena template blogger terbagi menjadi dua yaitu template klasik dan template baru, maka untuk cara membuat text berjalan tersebutpun akan berbeda, oleh karenanya pembahasannya pun akan saya bagi menjadi dua bagian. Akan tetapi perlu saya sampaikan, contoh yang akan saya berikan kali ini hasilnya tidak persis seperti pada blog ini yaitu text berjalan dari arah kanan kekiri, akan tetapi saya akan memberi contoh text berjalan dari kiri ke arah kanan serta ada jeda waktu antara tulisan yang petama dengan yang kedua dan juga tulisan berikutnya.

Untuk template klasik silahkan ikuti langkah-langkah berikut ini :

1. Sign in di blogger dengan id sobat

2. Klik menu Template

3. klik menu Edit HTML

4. Copy seluruh kode HTMl lalu paste pada program notepad kemudian save. Ini di maksudkan untuk berjaga-jaga apabila terjadi kesalahan dalam proses editting template, sobat masih mempunyai data untuk mengembalikannya ke semula

5. Copy kode berikut ini lalu paste di atas kode






6. Klik tombol Save Template Changes

7. Selesai.




Untuk template baru silahkan ikuti langkah-langkah berikut ini :

1. Sign in di blogger dengan id sobat

2. Klik menu Layout

3. Klik menu Edit HTML

4. Klik tulisan Download Full Template, lalu save data tersebut. Ini untuk berjaga-jaga apabila terjadi kesalahan dalam mengedit kode template

5. Klik kotak kecil di samping tulisan Expand Widget Templates untuk memberi tanda centang. Sekali lagi jangan lupa klik kotak kecil di samping tulisan Expand Widget Templates

6. Tunggu beberapa saat sampai proses selesai

7. Simpan kode berikut di bawah kode , kode ini letaknya berada paling bawah sebelum kode






8. Klik tombol SAVE TEMPLATE

9. Selesai




sedikit clue, pada kode diatas ada tulisan yang saya buat merah, nah tulisan tersebut harus sobat ganti dengan tulisan yang sobat inginkan. contoh : selamat datang di blog saya. atau apa saja yang menurut sobat layak untuk di tulis di situ. contoh yang saya berikan diatas memuat pesan atau text sebanyak empat tulisan, jika sobat ingin lebih banyak itu bisa dilakukan dengan menambah baris tulisan seperti kode sebelumnya.Untuk kode --> scrollSpeed = 130 . angka "130" merupakan kecepatan dari text berjalan, semakin kecil nilainya semakin cepat text berjalan, dan semakin besar nilainya maka text akan semakin lambat. Silahkan sesuaikan dengan keinginan sobat.


Seperti yang saya katakan di awal artikel bahwa kode yang saya berikan di atas hasil efeknya tidak sama dengan yang ada di blog ini, untuk melihat hasil nyatanya, silahkan sobat klik di sini.

Selamat mencoba !!!

Pasang Recent Comments

Kemarin lusa saya iseng-iseng buka email, dan ternyata ada kiriman email dari salah satu sobat saya yaitu sobat Aulia. Sobat Aulia ini menanyakan perihal cara membuat Recent comment atau komentar terbaru untuk new blogger template. Sebenarnya pertanyaan itu sudah saya jawab melalui email juga, akan tetapi saya pikir-pikir ada baiknya kalau topik ini saya bahas di blog ini, barangkali ada di antara sobat sekalian yang sama-sama tertarik ingin memasang Recent comment di sidebar blog sobat.

Untuk membuat recent comment pada new blogger template tidaklah sulit, karena saat ini sudah ada Recent comments widget creator dari hans serta hackosphere yang bekerja secara otomatis, tugas sobat hanya login di blogger.com, pilih blog yang mau dipasang trus add widget, selesai. Sangat gampang tanpa harus bersusah payah menambahkan berbagai kode kedalam template sobat. Untuk membuatnya silahkan sobat klik tombol di bawah ini :



Rasanya kurang seru kalau artikelnya cuma begitu ya.
Ok, setelah sobat klik tombol diatas, maka nanti akan muncul gambar seperti ini :







Agar lebih jelas, silahkan ikuti langkah-langkah berikut ini :

1. Silahkan klik kotak di atas atau bisa juga klik di sini

2. Tulis judul Recent Comments dengan yang sobat inginkan. contoh : "komentar terbaru". atau biarkan saja juga boleh

3. Ganti nama beautifulbeta di samping tulisan http dengan nama blog sobat. contoh : kolom-tutorial

4. Tulis angka banyaknya komentar yang diinginkan di samping tulisan Number of comments

5. Beri tanda centang pada kotak di samping tulisan Show comment date jika komentarnya ingin ada tanggalnya

6. Beri tanda centang pada kotak di samping tulisan Show posttitle jika komentarnya ingin ada judul postingan

7. Tulis jumlah karakter hurup yang diinginkan di samping tulisan Summary size

8. Untuk styling silahkan pilih yang mana saja

9. Klik tombol bertuliskan Customize

10. Klik tombol bertuliskan Add Widget To My blog

11. Silahkan sign in dengan id sobat

12. Pilih blog sobat yang ingin ada Recent comments nya di samping tulisan select a blog

13. Klik tombol bertuliskan ADD WIDGET

14. Secara otomatis Recent comment widget sudah di tambahkan ke blog sobat

15. Pindahkan elements Recent comment yang baru dibuat pada tempat yang sobat suka

16. Selesai.




Bagaimana sobat, gampangkan? so pasti gampang donk


Tapi ada satu lagi kabar gembira nih buat para sobat. Bagi sobat yang blog nya memakai bahasa indonesia tentu saja akan sedikit janggal, karena recent comment diatas memakai bahasa inggris. Apakah recent comments tersebut bisa menjadi bahasa Indonesia? jawaban nya bisa. Jika sobat tertarik silahkan ikuti langkah-langkah berikut ini :

1. Sign in di blogger dengan id sobat

2. Klik menu Layout pada blog yang ingin di rubah

3. Klik menu Page Elements

4. Klik tulisan Edit pada element Recent Comments yang tadi dibuat

5. Akan muncul kode-kode seperti ini :





Pada kode yang tercetak biru diatas, silahkan ganti kodenya dengan kode dibawah ini :

http://amen24.googlepages.com/showrecentcomments.js

6. Klik tombol SAVE CHANGES

7. Selesai.




Untuk melihat contoh Recent comments yang berbahasa indonesia, silahkan klik disini. Jangan lupa klik di sini juga ya

Selamat mencoba !!!!

Cara membuat Favicon

Pada zaman dahulu kala, kang rohman pernah membahas bagaimana cara menganti Favicon yang saya posting di sini. Karena zaman selalu berubah, maka postingan tersebut sudah tidak relevan lagi untuk di baca atau dengan kata lain sudah kadaluarsa. Walaupun begitu sebenarnya kang rohman sudah memposting artikel terbaru yang saya posting di sini, namun karena tidak semua orang suka berkunjung ke blog saya yang satu ini, maka artikel tersebut luput untuk di baca. Oleh karenanya, kali ini kang rohman coba posting saja di blog ini.

Bagi anda yang masih bingung apa sih Favicon itu? Favicon (favourite icon) adalah icon kecil yang berada di samping alamat blog atau website anda. Apabila anda membuat blog di Blogger.com alias blogspot, maka favicon yang berada di samping alamat URL anda adalah berupa favicon blogger. Berikut screenshot nya :


blogger favicon


Apakah favicon tersebut bisa di ganti dengan favicon milik anda? jawabannya adalah bisa. Berikut adalah contoh favicon blogger yang sudah di ganti :


favicon anda


Untuk mengganti favicon tersebut, anda bisa melakukan langkah-langkah seperti berikut :

1. Pertama buatlah sebuah gambar yang akan di jadikan sebagai favicon, contoh seperti gambar di bawah ini :

favicon ku


2. Setelah itu anda harus mengubah gambar tersebut kedalam bentuk gambar icon. Untuk hal tersebut, anda bisa menggunakan tool Favicon Generator, silahkan kunjungi situs http://www.favicongenerator.com

3. Klik pada tombol Browse...

4. Masukan gambar yang tadi dibuat untuk di ubah menjadi format icon

5. Klik pada tombol Generate Favicon.

6. Setelah proses selesai, klik pada Click Here to Download your favicon.

7. Save ke komputer anda.

8. Langkah selanjutnya adalah anda harus meng upload Favicon yang tadi ke tempat hosting gamabar, contoh adalah ke Yahoo! Geocities. Belum tahu bagaimana cara meng upload gambar ke Yahoo! Geocities? heuheuheu... sok atuh di baca dulu postingan kang rohman yang ini!

9. Sekarang saya asumsikan bahwa anda sudah mempunyai alamat URL dari favicon anda. sebagai contoh, saya mempunyai sebuah alamat URL seperti ini :

http://www.geocities.com/amn_tea/favicon.ico

10. Anda harus mengubah alamat URL favicon anda menjadi seperti ini :




11. Langkah selanjutnya adalah silahkan login ke blogger dengan ID anda.

12. Klik pada Tata Letak.

13. Klik Edit HTML.

14. Silahkan cari kode (posisinya hampir paling atas, jadi jangan jauh-jauh nyari ke bawah dhenk).

15. Simpan kode favicon yang tadi persis di atas kode . Contoh :
16.





17. Klik tombol Simpan Template.

18. Selesai. Sekarang anda sudah mempunyai favicon di alamat URL blog anda.

Menu Dropdown dengan JavaScript (2)

Melanjutkan Postingan kemarin lusa yaitu tentang membuat menu dropdown dengan JavaScript. Pada postingan yang lalu telah di bahas tentang membuat menu dropdown pada template baru, maka pada postingan kali ini akan di bahas mengenai cara pembuatan pada template klasik.

Agar tidak terlalu monoton, pada pembuatan dropdown kali ini akan saya beri sentuhan baru, yaitu pemakaian background yang berbeda. Jika pada postingan yang lalu saya memberikan contoh background banner seperti di bawah ini :







Maka kali ini saya akan memberi contoh banner seperti ini :









Dan contoh menu dropdown yang akan di bahas adalah seperti di bawah, silahkan sobat arahkan mouse sobat pada banner menu lalu klik untuk melihat submenu yang terdapat di dalam nya :


Navigasi Menu utama 1
Link 1 di sini Link 2 di sini Link 3 di sini Link 4 di sini
Menu utama 2
Link 1 di sini Link 2 di sini Link 3 di sini Link 4 di sini
Menu utama 3
Link 1 di sini Link 2 di sini Link 3 di sini Link 4 di sini
Menu utama 4
Link 1 di sini Link 2 di sini Link 3 di sini Link 4 di sini



Agar tidak terlalu menyita space halaman karena penuh dengan kata-kata yang membingungkan, kita langsung saja pada topik pembahasan. Untuk membuat menu dropdown pada template klasik, silahkan ikuti langkah-langkah berikut ini :

# Langkah pertama adalah membuat tiga banner untuk background tulisan, banner ini bisa dibuat dengan program design & grafik semisal Adobe photoshop atau Corel Draw ataupun program-program lainya yang sejenis. Atau jika sobat seperti saya yakni tidak mempunyai daya kreasi yang tinggi untuk menciptakan bentuk-bentuk banner yang menarik, maka sobat bisa menggunakan software Banner Maker, dengan software Banner Maker akan sangat mudah sekali karena pada software tersebut sudah tersedia puluhan bentuk banner yang menarik, kita tinggal pilih mana yang kita suka dan hanya memberikan sedikit sentuhan seni saja untuk merubahnya agar lebih menarik. Dimana kita bisa mendapatkan software Banner Maker ? (iklan dulu nih) Untuk mendapatkannya, sobat bisa mendapatkannya di situs www.ObralPlus.com, dengan harga yang sangat murah hanya Rp25.000 saja kita sudah mendapatkannya, dan tidak hanya software itu saja yang kita dapatkan tapi masih puluhan software serta ebook yang sangat berharga. Jika tertarik silahkan klik di sini.


# Langkah kedua adalah mengupload banner-banner yang telah sobat buat, salah satu contoh adalah dengan menggunakan jasa situs www.photobucket.com. Untuk cara menguploadnya saya sudah terangkan, jika belum faham silahkan klik di sini. Saya ambil contoh, banner yang telah saya upload mempunyai URL address sebagai berikut :

http://i162.photobucket.com/albums/t253/rohman24/bannerjava6.gif

http://i162.photobucket.com/albums/t253/rohman24/bannerjava5.gif

http://i162.photobucket.com/albums/t253/rohman24/bannerjava4.gif


# Langkah ketiga adalah memasukan kode JavaScript serta stylesheet CSS pada kode template blog, silahkan ikuti langkah-langkahnya :


1. Sign in di blogger.com dengan id sobat

2. Klik menu Template

3. Klik menu Edit HTML

4. Copy seluruh kode template lalu paste pada program notepad, ini untuk berjaga-jaga apabila terjadi kesalahan dalam proses editting kode template

5. Tambahkan kode berikut di bawah kode dan sebelum kode , atau jika ingin lebih mudah simpan di bawah kode :






6. Masukan kode berikut sesudah kode , dimana saja yang penting di antara kode tersebut :



.raden{
background-image: url('http://i162.photobucket.com/albums/t253/rohman24/bannerjava6.gif');
text-align:center;
width:90%;
font-family: georgia, Helvetica, sans-serif;
padding-left:5px;
padding-right:5px;
padding-top:5px;
padding-bottom: 5px;
display:block;
text-decoration: none;
color: #F6E151;
}

.ogah{
background-image:url('http://i162.photobucket.com/albums/t253/rohman24/tombol_03.gif');
text-align:center;
width:90%;
font-family: georgia, Helvetica, sans-serif;
padding-left:5px;
padding-right:5px;
padding-top:8px;
padding-bottom: 5px;
display:block;
text-decoration: none;
color: ##FAF705;
height: 18px;
}

.ogahniye{
background-image: url('http://i162.photobucket.com/albums/t253/rohman24/bannerjava4.gif');
text-align:center;
width:90%;
font-family: georgia, Helvetica, sans-serif;
padding-left:5px;
padding-right:5px;
padding-top:8px;
padding-bottom: 5px;
display:block;
text-decoration: none;
color: #0572FA;
height: 18px;
}

.hide{
display: none;
}

.show{
display: block;
}


a{cursor: hand}



7. Masukan kode berikut di sidebar blog sobat, dimana saja sesuai dengan keinginan sobat :



Navigasi

Blog Tutorial

Membuat blog

Membuat link

Membuar marquee


Icon YM

Aksesori blog

Yahoo ! Emoticons

Blogger Emoticons

Pasang jam

Pasang Video

My Other Blog

Rubrik Elektronik

Free Blog Template

Blog Menu D'tree

Authorize service

Links Temanku

Free 7

Jaloee

Liezmaya

Anang

8. Klik tombol Preview untuk melihat perubahan yang baru di buat

9. Jika sudah OK, klik tombol Save Changes Template
10. Selesai.



Keterangan kode-kode diatas :

* kode di bawah ini adalah kode untuk mengaktifkan tombol yg di klik, jadi jangan di rubah! kecuali jika obat sudah familier dengan Javascript dan bisa membuat variasi baru dari kode ini :





* Kode-kode di bawah ini, nilainya harus di sesuaikan dengan kondisi blog sobat :
*



.raden
--> .raden hanya pendefinisian saja , bisa di ganti dengan apa saja yang penting harus sesuai dengan kode yang di definisikan dan jangan lupa untuk enyertakan dot ( . ) diepan kata yang di buat.

background-image: url('http://i162.photobucket.com/albums/t253/rohman24/bannerjava6.gif');
--> ini adalah gambar background untuk tulisan yang saya buat yaitu sebuah ombol.

text-align:center;
--> kode untuk membuat tulisan berada di tengah, bisa diganti dengan kata Left untuk sebelah kiri, dan right untuk sebelah kanan.

width:90%;
--> lebar dari tombol adalah sebesar 90% dari besarnya space sidebar dimana tombol ini di tempatkan, silahkan ganti nilainya dan sesuaikan dengan ukuran blog sobat.

font-family: georgia, Helvetica, sans-serif;
--> Font (jenis hurup) yang dipilih adalah jenis georgia, ini bisa diganti dengan jenis huruf lainnya semisal verdana dan lain-lain.

padding-left:5px;
--> batas (jarak) tulisan sebesar 5px dari tepi kiri tombol,nilai ini bisa di rubah sesuai keinginan sobat.

padding-right:5px;
--> batas (jarak) tulisan sebesar 5px dari tepi kanan tombol,nilai ini bisa di rubah sesuai keinginan sobat.

padding-top:5px;
--> batas (jarak) tulisan sebesar 5px dari tepi atas tombol,nilai ini bisa di rubah sesuai keinginan sobat.

padding-bottom: 5px;
--> batas (jarak) tulisan sebesar 5px dari tepi bawah tombol,nilai ini bisa di rubah sesuai keinginan sobat.

display:block;
--> block berarti ditampilkan,jadi jangan dirubah.

text-decoration: none;
--> Tidak ada tek dekorasi. Sebaiknya jangan di rubah.

color: #F6E151;
--> Pemilihan warna, bisa dirubah kode warnanya sesuai dengan keinginan sobat.



.ogah
--> .ogah hanya pendefinisian saja , bisa di ganti dengan apa saja yang penting harus sesuai dengan kode yang di definisikan dan jangan lupa untuk menyertakan dot ( . ) didepan kata yang di buat.



.ogahniye
--> .ogahniye lagi-lagi hanya pendefinisian saja , bisa di ganti dengan apa saja yang penting harus sesuai dengan kode yang di definisikan dan jangan lupa untuk menyertakan dot ( . ) didepan kata yang di buat.



.hide
display: none;
--> Pendifinisian untuk .hide disembunyikan (tidak tampil).



.show
display: block;
--> Pendifinisian untuk .show ditampilkan.



a{cursor: hand}
Agar gambar mouse berubah jadi gambar tangan ketika berada di atas tombol.


* Kode yang saya berikan diatas memuat links yang saya miliki, jadi links tersebuat harus di rubah dengan links milik sobat.


* Hasil dari pembuatan kode diatas adalah seperti di bawah ini, silahkan sobat arahkan mouse ke gambar tombol menu, dan kemudian klik untuk melihat submenu yang terdap didalamnya :





Navigasi Blog Tutorial
Membuat blog Membuat link Membuar marquee Memasang Icon YM
Aksesori blog
Yahoo ! Emoticons Blogger Emoticons Pasang jam Pasang Video
My Other Blog
Rubrik Elektronik Free Blog Template Blog Menu D'tree Authorize service
Links Temanku
Free 7 Jaloee Liezmaya Anang



Mudah-mudahan keterangan di atas sudah jelas. Selamat mencoba !

Menu Dropdown dengan JavaScript

Bagi sobat yang suka akan pernak-pernik blog, ada kabar baik nih. Pada kesempatan kali ini saya akan membahas tentang cara membuat menu Dropdown menggunakan JavaScript.

Biar agak seru, silahkan perhatikan contoh menu dropdown dibawah. Caranya silahkan arahkan mouse sobat ke deretan menu dibawah lalu klik untuk membuka submenu yang ada di dalamnya dan untuk menutupnya kembali sobat klik sekali lagi ke menu yang ingin di tutup, silahkan mencoba :


Menu utama 1
Link 1 di sini Link 2 di sini Link 3 di sini Link 4 di sini
Menu utama 2
Link 1 di sini Link 2 di sini Link 3 di sini Link 4 di sini
Menu utama 3
Link 1 di sini Link 2 di sini Link 3 di sini Link 4 di sini
Menu utama 4
Link 1 di sini Link 2 di sini Link 3 di sini Link 4 di sini



Bagaimana sudah di coba belum? kalau belum, coba dulu deh biar agak seru pembahasannya! Nah kalau sudah, bagaimana tanggapannya, seru tidak? kalau seru silahkan sobat baca artikel ini sampai tuntas (kaya adu banteng aja pake acara seru apa kagak), nah kalau sekiranya tidak seru, ya mending cari topik lain biar semangat bacanya.

Oke biar tidak terlalu ngelantur, kita langsung ke topik bahasan. Untuk membuat menu seperti di atas, kita perlu memasang kode JavaScript serta stylesheet CSS pada template blog kita, akan tetapi karena di blogger terdapat dua pemakaian template yaitu template klasik dan template baru, maka tentu saja dalam membuat menu dropdown tersebut caranya berbeda pula. Oleh karena itu, pembahasannya pun akan saya bagi dua juga yaitu untuk template klasik serta untuk template baru. Akan tetapi karena pembahasannya terlalu panjang, maka kali ini akan saya bahas untuk template baru saja, dan untuk template klasik akan saya bahas pada postingan berikutnya.

Untuk membuatnya silahkan ikuti langkah-langkah berikut ini :

# Langkah pertama yaitu membuat dua buah tombol untuk background dari tulisan menu, sebaiknya warna ataupun style nya di bedakan, ini dimaksudkan agar antara menu utama dengan sub menu akan terlihat perbedaannya. sebagai contoh lihat gambar tombol di bawah ini :








# Langkah kedua adalah menyimpan file gambar tombol tersebut pada hosting untuk menyimpan gambar, bisa di blogger sendiri atau dengan hosting lain. Agar lebih terarah, saya ambil contoh menggunakan hosting lain yaitu www.photobucket.com. Untuk cara upload gambar ke situs ini sudah saya terangkan pada postingan terdahulu, jika ingin baca - baca lagi silahkan klik di sini. Saya ambil contoh kedua tombol tadi sudah saya upload dan mempunyai URL address sebagai berikut :

http://i162.photobucket.com/albums/t253/rohman24/tombol_03.gif

http://i162.photobucket.com/albums/t253/rohman24/tombol_06.gif


# Langkah ketiga adalah memasukan kode JavaScript serta stylesheet CSS pada kode template blog, silahkan ikuti langkah-langkahnya :


1. Sign in di blogger.com dengan id sobat

2. Klik menu LayOut

3. Klik menu Edit HTML

4. Klik tulisan Download Full Template, lalu save data tersebut. Ini untuk berjaga-jaga apabila terjadi kesalahan dalam mengedit kode template

5. Klik kotak kecil di samping tulisan Expand Widget Templates untuk memberi tanda centang. Sekali lagi jangan lupa klik kotak kecil di samping tulisan Expand Widget Templates

6. Tunggu beberapa saat sampai proses selesai

7. Simpan kode berikut di bawah kode






8. Masukan kode berikut di dalam stylesheet CSS, atau untuk lebih mudah silahkan cari kode * Footer, lalu simpan kode berkut di atasnya



.ogah{
background-image:url('http://i162.photobucket.com/albums/t253/rohman24/tombol_03.gif');
text-align:center;
width:90%;
font-family: georgia, Helvetica, sans-serif;
padding-left:20px;
padding-right:20px;
padding-top:10px;
padding-bottom: 10px;
display:block;
text-decoration: none;
color: #000000;
height: 20px;
}

.ogahniye{
background-image: url('http://i162.photobucket.com/albums/t253/rohman24/tombol_06.gif');
text-align:center;
width:90%;
font-family: georgia, Helvetica, sans-serif;
padding-left:20px;
padding-right:20px;
padding-top:13px;
padding-bottom: 10px;
display:block;
text-decoration: none;
color: #000000;
height: 20px;
}

.hide{
display: none;
}

.show{
display: block;
}


a{cursor: hand}



9. Klik tombol SAVE TEMPLATE


Sedikit unek-unek, kode-kode diatas tentunya tidak seratus persen mutlak harus begitu, tapi bisa di sesuaikan dengan kondisi blog sobat.Contoh : width:90%; --> angka "90" artinya lebar dari gambar yang akan tampil sebesar 90%, nilai ini bisa diganti dan di sesuaikan dengan blog sobat, misal di ganti menjadi "80" atau berapa saja.


10. Klik menu Page Elements

11. Klik tulisan Add a Page Element


12. Klik tulisan ADD TO BLOG di bawah tulisan HTML/JavaScript

13. Masukan kode berikut :


Menu utama 1

Link 1 di sini>
Link 2 di sini
Link 3 di sini
Link 4 di sini

Menu utama 2

Link 1 di sini
Link 2 di sini
Link 3 di sini
Link 4 di sini

Menu utama 3

Link 1 di sini
Link 2 di sini
Link 3 di sini
Link 4 di sini

Menu utama 4

Link 1 di sini
Link 2 di sini
Link 3 di sini
Link 4 di sini

14. Klik tombol SAVE CHANGES

15. Klik pada element yang baru di buat, tahan lalu pindahkan di tempat yang di sukai ( di drag & drop )

16. Klik tombol SAVE

17. Selesai




Keterangan : pada kode diatas ada tanda pagar (#), tanda itu harus di ganti dengan URL yang mau di pasang. Contoh :


My Other Blog

Rubrik elektronik>
Free Blog Template
User Online blog
D'Tree Menu

Maka contoh hasilnya akan seperti ini, silahkan klik pada tombol menu untuk melihat reaksi yang di timbulkan :


My Other Blog
Rubrik elektronik Free Blog Template User Online blog D'Tree Menu



Jika di lihat dari reaksi menu ini yang bersifat membuka dan menekan isi yang ada di bawahnya, maka menu ini hanya cocok di simpan pada sidebar dan tidak cocok apabila di simpan pada header.


Mudah-mudahan dapat di mengerti. Selamat mencoba !

Membuat Link Untuk Download

Sobat Saiman beberapa waktu yang lalu mengajukan sebuah pertanyaan yang di tulis pada shoutbox, beliau menanyakan tentang cara memasang artikel atau file exe di blog agar bisa di download orang lain. Sepengetahuan saya yang terbatas ini, di dalam blog tidak bisa untuk menyimpan file exe kemudian bisa di download oleh orang lain, akan tetapi walaupun begitu ada cara lain yang bisa kita tempuh yakni menggunakan jasa situs-situs yang ada di internet yang menyediakan space untuk upload file yang kita punyai dan kemudian bisa di download lagi oleh orang lain.

Secara sederhana saya jabarkan cara kerjanya, pertama tentu saja kita harus mempunyai account pada situs tersebut, kemudian setelah mempunyai account, baru kita upload data yang ingin kita simpan, lalu setelah proses upload berhasil kita akan di beri URL address file yang kita upload. Nah langkah terakhir agar pengunjung dari blog kita bisa mendownload file tersebut adalah memasang tulisan yang mempunyai link terhadap URL address file yang kita upload tadi, jadi tentu saja orang lain bisa mendownload file yang kita pasang melalui blog kita. Kira-kira begitu bos .

Agar tidak terlalu bingung, penyedia layanan ini salah satunya adalah www.SnapDrive.net. dengan menggunakan situs ini kita bisa upload file kemudian file tersebut bisa di download lagi oleh orang lain. Untuk caranya silahkan ikuti langkah-langkah berikut ini :

1. Silahkan klik di sini untuk menuju http://www.SnapDrive.net

2. Klik tulisan Register

3. Isi formulir yang disediakan dengan data diri sobat

* Username --> isi dengan nama yang ingin sobat gunakan, boleh apa saja yang penting mudah di ingat. contoh : Unyil

* Password --> isi dengan password yang di inginkan. contoh : pakraden

* Confirm password --> isi kembali dengan password yang tadi di tuliskan.contoh : pakraden

* Email address --> isi dengan alamat email sobat, tentunya yang masih valid. contoh : amn_tea@yahoo.co.id

* First name -->isi dengan nama depan sobat

* Last name --> isi dengan nama belakang sobat

* Country --> pilih nama negara dimana sobat tinggal. contoh : indonesia

* Postcode --> isi dengan kode post daerah sobat

* Gender --> pilih sesuai dengan jenis kelamin sobat. male(pria), female(wanita)

* Date of birth --> pilih tanggal kelahiran sobat

* Preferances isi dengan tulisan yang tertera di situ

4. Klik tombol Register

5. Ada konfirmasi bahwa account yang baru di buat harus di aktifkan melalui email yang kita tulis tadi

6. Cek email milik sobat yang tadi ditulis, periksa apakah email dari Snapdrive sudah sampai atau belum

7. Jika email sudah sampai, silahkan buka email tersebut. Isi di dalam email tersebut ada yang berupa link untuk aktifasi, klik saja link tersebut

8. Secara otomatis sobat akan dibawa kehalaman yang berisi ucapan terima kasih

9. Klik tombol OK

10. Silahkan Login dengan username serta password yang tadi di tuliskan saat register

11. Setelah berada di halaman account sobat, klik tulisan Upload

12. Klik tombol Add Files

13. Pilih file yang ada dikomputer sobat yang mau di upload

14. Klik tombol Upload. tunggu beberapa saat ketika proses upload file sedang berlangsung

15. Jika proses upload selesai, sobat akan diperlihatkan file yang di upload tadi. Klik tulisan details yang ada disebelahnya

16. Klik tulisan HTML Code

17. Copy kode yang di berikan lalu paste pada program notepad

18. Klik tulisan Logout untuk keluar dari situs tersebut

19. Silahkan tutup layar browser sobat




Langkah selanjutnya adalah memasukan kode tadi ke dalam blog kita, saya ambil contoh kode yang sudah di upload seperti ini :


billing internet.zip


Kode ini merupakan kode link biasa, jadi tentunya tidak mutlak. Kata billing internet.zip, bisa kita ganti dengan kata apa saja sekehendak kita. saya ambil contoh kata billing internet.zip di rubah menjadi kata download, maka kode diatas menjadi seperti di bawah ini :


download


Bagaimana cara memasukan kode diatas? tentu saja terserah sobat mau di tempatkan dimana saja, mau di sidebar, footer, atau bahkan di dalam postingan pun bisa. Saya ambil contoh didalam postingan isinya seperti ini :

Untuk men download program billing internet, silahkan anda klik link di bawah ini :



download


Maka nanti di blog kita akan tampil seperti ini :


Untuk men download program billing internet, silahkan anda klik link di bawah ini :

download


Contoh link yang saya buat diatas adalah link yang benar-benar nyata untuk mendownload program billing internet, silahkan sobat klik untuk membuktikannya!


Saya kira sudah cukup pembahasan tentang cara membuat link download, mudah-mudahan dapat di mengerti. Selamat mencoba !

Menanggapi pertanyaan sobat tanggo yang menanyakan perihal penggalan artikel dari rubrik elektronik yang katanya selalu muncul di atas posting artikel, maka dari itu kali ini saya akan membahas cara pembuatannya, barangkali ada dari sobat-sobat lainnya sama-sama tertarik atau kalau tidak tertarik, ya sekedar pengetahuan saja juga tidak ada ruginya kan.

Sebenarnya penggalan artikel di atas adalah bukanlah suatu tulisan hasil posting, akan tetapi hanya berupa tulisan biasa yang ujung kalimatnya di beri link untuk menuju ke artikel sebenarnya yakni artikel yang terdapat pada blog rubrik elektronik. Maksud pemasangan penggalan kalimat itu sebenarnya untuk membawa para pembaca ke blog saya yang satu lagi yaitu Rubrik Elektronik tadi, soalnya itu blog kan ada iklan google adsense nya, nah barangkali saja ada diantara para sobat sekalian yang mau berbaik hati meng klik iklan google adsense milik saya cuma hiks.... hiks masih dikit yang mau klik iklan aku tapi ga apa-apa berarti belum rezekinya (berarti ga ikhlas donk bikin tutorialnya kalo gitu / weith..... maaf bukan begitu maksud saya, jadi ga enak hati nih ).

Untuk membuat penggalan artikel seperti diatas, langkah pertama adalah mengcopy sebagian kalimat yang mau kita link, yang kedua adalah mencatat address dari artikel tersebut, nah ujung dari kalimat tersebut kita buatkan link. Agar tidak terlalu membingungkan saya beri contoh. Misalkan address dari artikel yang mau saya pasang linknya adalah sebagai berikut :

http://rubrik-elektronik.blogspot.com/2007/04/electronic-shopping.html

Isi dari penggalan kalimatnya adalah sebagai berikut :

Electronic Shopping

Many Indonesians were still believing that products that in marketed overseas his quality was far more better than products that in marketed in the country. Around them many that were deliberate went overseas only a to shop. You some among them?


Maka kode yang kita buat adalah sebagai berikut :


Electronic Shopping

---

Many Indonesians were still believing that products that in marketed overseas his quality was far more better than products that in marketed in the country. Around them many that were deliberate went overseas only a to shop. You some among them? ...Read more...

---

Kode tersebut hasilnya akan seperti ini :


Electronic Shopping
Many Indonesians were still believing that products that in marketed overseas his quality was far more better than products that in marketed in the country. Around them many that were deliberate went overseas only a to shop. You some among them? ...Read more...

Biar lebih faham, sedikit saya uraikan :

..... --> ini adalah kode untuk merubah warna text. #FD8403 merupakan kode warna orange.
.......< --> ini adalah kode untuk menampilkan huruf dalam ukuran font 6 (ukuran besar)

---

--> ini adalah kode untuk membuat garis sebesar 100% dari lebarnya halaman blog yang dimulai dari tepi kiri.

--> kode untuk membuat suatu kalimat pindah ke bawah sebesar satu line break.


Mudah-mudahan keterangan diatas dapat di pahami. Setelah kita membuat kode seperti yang di terangkan diatas, tugas selanjutnya yaitu memasukan kode tersebut kedalam blog. Tentunya ada perbedaan cara memasukan kode antara template klasik dengan template baru. Silahkan ikuti langkah-langkahnya :

Untuk template klasik :

# Sign in di blogger dengan id sobat

# Klik menu Template

# Klik menu Edit HTML

# Copy seluruh kode HTML yang ada, kemudian save di komputer sobat. Ini untuk backup data apabila terjadi kesalahan dalam proses editting template

# Cari kode seperti di bawah ini :

Tempatkan kode yang telah kita buat tadi persis diatas kode diatas, sehingga kodenya menjadi :


Electronic Shopping

---

Many Indonesians were still believing that products that in marketed overseas his quality was far more better than products that in marketed in the country. Around them many that were deliberate went overseas only a to shop. You some among them? ...Read more...

---

# Klik tombol Preview untuk melihat perubahan yang baru di lakukan

# Apabila sudah OK, klik tombol save Template Changes

# Selesai.


Catatan : cara di atas tentunya merujuk kepada template asli buatan blogger.com, bagi pengguna template bukan buatan blogger tentu akan lain, yang perlu di ingat yaitu penempatan kode penggalan artikel adalah persis diatas kode untuk Posting artikel.


Untuk template baru :

# Sign In di blogger dengan id sobat

# Klik menu Layout

# Klik menu Page Elements

# Klik Add a Page Element

# Klik tulisan ADD TO BLOG yang berada di bawah tulisan HTML/JavaScript

# Copy paste kode penggalan artikel yang telah kita buat tadi

# Klik tombol SAVE CHANGES

# Klik kotak element yang baru di buat, tahan kemudian pindahkan di atas kotak yang bertuliskan Blog post (di drag & drop)

# Klik tulisan View Blog untuk melihat hasil dari penambahan kode tadi

# Bila sudah OK, klik tombol SAVE

# Selesai.



Bagaimana penjelasannya sobat? mudah-mudahan dapat di pahami. Selamat mencoba !

Template baru VS Template Klasik

Sudah dua hari ini saya tidak menelorkan tulisan baru ( emangnya ayam pake bertelor segala ) mungkin buat sobat yang rajin datang ke sini merasa bosan karena tulisannya itu-itu melulu. OK, biar ga basi langsung aja.Menanggapi banyaknya pertanyaan yang di ajukan melalui shoutbox beberapa waktu lalu seputar masalah mengganti template, maka kali ini saya akan membahasnya agar bagi sobat yang masih bingung dapat mempunyai gambaran seputar template ini.

Sebenarnya tentang masalah template ini sudah saya posting, jika mau iseng-iseng baca silahkan klik di sini, tapi biar lebih jelas akan saya bahas lebih dalam.

Mungkin ada diantara sobat semua masih bingung dengan yang namanya template klasik sama template baru. Di blogger.com saat ini template yang di gunakan ada dua pilihan yaitu template klasik dan baru. Bagaimana caranya kita membedakan apakah kita menggunakan template klasik atau template baru? Ada beberapa ciri untuk mengenal apakah yang kita pakai template baru atau klasik, diantaranya yaitu :

# Template baru :


1. Pada menu dashboard (menu yang dijumpai pada saat kita baru login) akan terlihat menu seperti ini :

Manage : Posts, Settings, Layout


2. Jika kita klik menu Layout, akan ada menu seperti ini :

Page Elements | Fonts and Colors | Edit HTML | Pick New Template


3. Jika kita klik menu Edit HTML maka akan muncul beberapa ciri khas, yaitu :

Tulisan --> download Full Template
Tombol bertuliskan --> Browse..., Upload
Ada kotak kecil di samping tulisan Expand Widget Templates
Tombol bertuliskan ---> CLEAR EDITS, PREVIEW, SAVE TEMPLATE
Dibagian bawah terdapat tulisan :

• Revert to Classic Template
• View Classic Template



Itu tadi sedikit ciri apabila kita memakai template baru.


Apabila memakai template klasik, cirinya adalah :

1. Pada menu dashboard (menu yang dijumpai pada saat kita baru login) akan terlihat menu seperti ini :

Manage : Posts, Settings, Template


2. Jika kita klik menu Template, akan ada menu seperti ini :

Edit HTML | Pick New | customize Design | Adsense


3. Jika klik menu Edit HTML akan muncul beberapa ciri :

terdapat tulisan --> Change the Blogger Navbar

Tombol bertuliskan ---> Save Template Changes, Preview, Clear



Itu tadi beberapa ciri jika kita memakai template klasik.


Dari kedua contoh ciri diatas, tentu saja kita dapat mengetahui template apa yang sekarang kita pakai.

Apa kelebihan atau kekurangan dari kedua template tersebut?

Template baru

* Terdapat menu : Page Elements
Dengan menu ini kita dapat dengan mudah menambahkan element tanpa harus mengerti bahasa HTML. Element-element yang bisa ditambahkan bisa berupa Newsreel, Video Bar, List, Links List, Picture, Text, HTML/JavaScript, Feed, Labels, Logo, Profile, Blog Archive, serta Page Header.


* Sistem Drag & Drop
Dengan sistem ini kita dapat dengan mudah memindahkan setiap element yang telah kita buat dimana saja yang kita sukai.


* Terdapat menu : Fonts and Colors
Dengan menu ini kita dapat dengan mudah merubah warna serta bentuk huruf tanpa harus repot-repot merubah style sheet dan tentunya tidak memerlukan kemampuan berbahasa HTML



Itu tadi beberapa keuntungan memakai template baru, dan kekurangannya yaitu :

bagi sobat yang suka otak-atik kode HTML, pada template ini agak susah tuk di otak-atik (khusus buat pemula seperti saya, lain halnya bila sobat sudah expert).


Sekarang apa kelebihan dari template klasik :

* Kode HTML sangat mudah untuk di otak-atik, jadi bagi sobat yg suka bermain dengan HTML sangat cocok memakai template ini.



Kekurangan :

* Tidak tersedia menu Page Elements, sehingga bagi sobat yang masih bingung dengan HTML akan menemui kesulitan.


* Tidak tersedianya menu : Fonts and Colors, sehingga menyulitkan dalam mengatur Font serta warna hurup.



Nah itu tadi beberapa keunggulan serta kekurangan dari kedua template, silahkan pikirkan mana yang mau sobat pilih.


Cara Migrasi Template

Setelah menimbang-nimbang, tentunya sobat tertarik dengan salah satu diantara keduanya. jika ternyata sobat tertarik untuk bermigrasi(pindah) template dan belum mengtahui caranya silahkan ikuti langkah berikut:

Dari Template baru ke template klasik :

* Sign in di blogger dengan id sobat


* Klik menu Layout


* Klik menu Edit HTML


* Klik tulisan yang ada di bagian bawah layar yaitu : Revert to Classic Template
Bila muncul kotak dialog, klik OK aja

* Selesai, sobat memasuki dunia baru yaitu template klasik.




Dari template klasik ke template baru :

* Sign in di blogger dengan id sobat


* Klik menu Template


* Klik menu Customize Design


* Klik tombol bertuliskan UPGRADE YOUR TEMPLATE


* Pilih template yang di sukai, lalu klik tombol SAVE TEMPLATE


* Selesai. sobat sudah memasuki alam baru, yaitu Template Baru.




Cara mengganti Template

Ada dua kemungkinan, yaitu mengganti template dengan buatan blogger dan mengganti template bukan buatan blogger.

# Ganti template dengan template buatan blogger


Untuk template Klasik, ikuti langkah-langkah berikut :

1. Sign in di blogger dengan id sobat


2. Klik menu Template


3. Klik menu Pick New


4. Pilih template mana yang paling cocok, lalu klik tombol bertuliskan Use This Template yang berada di bawah gambar template


5. Selesai. Blog sobat sudah punya wajah baru.




Untuk template baru, ikuti langkah-langkah berikut :

1. Sign in di blogger dengan id sobat


2. Klik menu Layout


3. Klik menu Pick New Template


4. Pilih template mana yang sobat sukai, lalu klik tombol SAVE TEMPLATE


5. Selesai.Blog sobat sudah mempunyai wajah baru




Ada yang perlu di ketahui yaitu jika kita mengganti template dengan template buatan blogger sendiri, maka data-data semisal link, shoutbox, image dan lain-lain. Data ini tidak akan hilang. Lain halnya apabila kita mengganti dengan template buatan bukan blogger.com, maka semua data-data yang di sebutkan tadi akan menghilang (kecuali postingan artikel tidak akan hilang) dan tentunya harus di input ulang, dan judulnya Caaaaapppppee deeeeehhhhh .....


# Ganti template dengan template bukan buatan blogger


Hal pertama yang harus di ingat adalah semua data-data yang ada seperti yang saya sebutkan tadi, maka apabila kita mengganti template dengan template bukan buatan blogger sendiri, kita harus mengcopy dulu seluruh data tersebut, dan kemudian nanti setelah kita sudah mengganti template, data-data tadi kita input ulang.

# Template baru


1. Sign in di blogger dengan id sobat


2. Klik menu Layout


3. Klik menu page Elements


4. Klik tulisan Edit pada masing-masing Element, lalu copy seluruh datanya


5. Jika semua data di pastikan sudah di copy, maka langkah selanjutnya adalah klik menu edit HTML


6. Klik tulisan --> download Full Template, save dalam komputer. Ini di maksudkan apabila nanti sobat berubah pikiran dan ingin kembali lagi, sobat masih punya data template tersebut


7. Beri tanda centang dulu pada kotak kecil disamping tulisan Expand Widget Template


8. Klik tombol Browse..., lalu masukan data Template baru yang ingin di masukan


9. Klik Tombol Upload


10. Biasanya keluar peringatan bahwa data-data yang kita punya seperti link, shoutbox dan lain-lain akan ter delete (terhapus)


11. Klik tombol --> Confirm & Save, dengan asumsi bahwa sobat sudah mengcopy data-data tadi


12. Selesai. Blog sobat sudah mempunyai wajah baru.




# Template Klasik


1. Sign in di blogger dengan id sobat


2. Klik menu Template


3. Klik menu Edit HTML


4. Tandai (highligh/blok) semua data template yang ada, sorot pada tulisan yang sudah di tandai, klik kanan Copy,lalu paste pada program notepad, save dan beri judul dengan nama yg mudah di ingat. Ini dimaksudkan untuk backup data untuk nanti input ulang data-data seperti link,shoutbox dll


5. Delete semua data template yang lama


6. Copy seluruh data template yang baru yang mau di masukan, lalu paste pada kotak data template yang sudah di delete tadi


7. Klik tombol Preview, lihat perubahan yang ada (biasanya preview ini agak berbeda dengan tampilan blog aslinya), Jika sudah cocok, klik tombol Save Template Changes


8. Selesai. blog sobat sudah mempunyai wajah baru.




Bagaimana sobat? mudah-mudahan keterangan diatas dapat menjawab semua pertanyaan mengenai ganti template.

Selamat mencari dan menemukan template yang sobat suka.

Menu Navigasi dengan CSS

Hallo sobat, bagaimana kabarnya hari ini? mudah-mudahan sehat selalu ya, biar baca ni artikel semangat, ga loyo gitoe.

Ok, biar ga terlalu garing sedikit demi sedikit kita mulai memasuki topik bahasan, yoi kali ini saya mau membahas tentang cara membuat menu navigasi menggunakan CSS. Nah biar lebih paham apa yang akan saya sampaikan coba sobat arahkan mouse sobat ke navigasi berikut ini:


My Other Site
Rubrik Elektronik | Blog Menu D'Tree | Free Blog Templates | Authorized Service |


Atau juga yang ini :

Rubrik Elektronik | Blog Menu D'Tree | Free Blog Templates | Authorized Service |


Bagaimana sobat, sudah mendapat gambaran apa yang akan saya sampaikan? pasti jawabnya iya. Dengan adanya menu navigasi seperti di atas, tentunya akan lebih menarik perhatian para pengunjung blog kita di banding dengan hanya menu biasa, dan selain itu pula menu ini lebih memperjelas bahwa tulisan atau tombol tersebut merupakan sebuah tombol navigasi yang bisa di klik oleh para pengunjung.

Sekarang timbul pertanyaan bagaimana cara membuatnya? bagi yang belum tahu dan berminat untuk mengetahuinya silahkan sobat terus membaca sampai akhir artikel. Untuk membuat menu seperti yang terlihat di atas tadi, kita perlu menambahkan beberapa kode tambahan pada blog kita.

Seperti pada contoh tadi di atas, ada dua jenis menu navigasi yang akan saya bahas yakni yang tidak menggunakan Image backround serta yang menggunakan Image backround, silahkan simak langkah-langkah berikut ini :

# buatlah dua buah tombol navigasi yang bentuknya sama persis, akan tetapi berbeda warna, ini di maksudkan agar ketika tombol mouse menunjuk tombol tersebut tombolnya akan berubah warna. Bagaimana cara membuat tombol? Tentu saja untuk membuat sebuah tombol, kita bisa menggunakan berbagai program komputer semisal adobe photoshop, coreldraw ataupun berbagai program lainnya.


# Upload gambar tombol-tombol tersebut pada hosting penyimpan semisal www.photobucket.com untuk cara upload gambar sudah saya terangkan pada pembahasa yang lalu , jika sudah lupa silahkan klik Di sini
.

Agar ada contoh, umpamanya kita mempunyai alamat tombol sebagai berikut :

http://i162.photobucket.com/albums/t253/rohman24/tombol_03.gif

http://i162.photobucket.com/albums/t253/rohman24/tombol_06.gif

# Langkah selanjutnya adalah menambahkan kode, ada dua contoh yakni yang tidak memakai gambar tombol dan yang memakai gambar tombol. contoh yang tidak memakai gambar tombol :


1. Tambahkan kode berikut sesudah kode , ya di mana saja asalkan di antara kode tadi.


.unyil{
text-align:left;
display:block;
width:180px;
height:20px;
background:#f0f0f0 url() top right no-repeat;
padding:3px 4px 3px 8px;
margin:7px 10px 7px 0;
}

.unyil:hover{
background:#97A4B9 url() top right no-repeat;
text-decoration:none;
}

2. copy kode di bawah ini, lalu paste di tempat yang sobat inginkan, bisa di sidebar, footer atau dimana saja, kemudian rubahlah dengan link yang sobat punya :


Rubrik Elektronik |

Blog Menu D'Tree |

Free Blog Templates |

Authorized Service |



biar tidak telalu bingung, sedikit saya uraikan :

.unyil --> kata .unyil bisa diganti apa saja yang penting harus sesuai dengan kode berikutnya.

text-align:left; --> kata left artinya tulisan akan berada di sebelah kiri, ini bisa di ganti dengan kata center atau right

display:block; --> kata block artinya di tampilkan di layar monitor.

width:180px; --> angka 180px adalah lebar dari tombol navigasi sebesar 180px, nah ini bisa di rubah sesuai dengan kondisi blog sobat masing-masing.

height:20px; --> angka 20px adalah tinggi dari tombol navigasi sebesar 20px, ini bisa di ganti sesuai dengan keinginan sobat.

background:#f0f0f0 url() top right no-repeat; --> tulisan #f0f0f0 adalah kode warna dari background, ini bisa di rubah sesuai dengan ke sukaan sobat.

padding:3px 4px 3px 8px; --> nilai padding ini adalah untuk mengatus jarak tulisan pada tombol navigasi, bisa di rubah sesuai kebutuhan.coba-coba aja rubah sendiri.

margin:7px 10px 7px 0; --> margin ini untuk jarak antara satu tombol dengan tombol yang lain, bisa di rubah, coba aja.

.unyil:hover{ --> .unyil:hover artinya yaitu ketika mouse berada pada tombol .unyil akan berubah menjadi seperti yang di definisikan pada kode ini.

background:#97A4B9 url() top right no-repeat; --> #97A4B9 adalah kode warna yang dinginkan ketika mouse berada pada tombol .unyil

text-decoration:none; --> text dekorasi jangan di rubah.

kode-kode tadi akan tampil seperti ini :


Rubrik Elektronik | Blog Menu D'Tree | Free Blog Templates | Authorized Service |


Bagaimana sudah jelas? mudah-mudahan jelas.



Contoh yang kedua adalah yang memakai background image, dalam hal ini saya ambil contoh dengan image milik saya dan mempunyai alamat seperti ini :



http://i162.photobucket.com/albums/t253/rohman24/tombol_03.gif

http://i162.photobucket.com/albums/t253/rohman24/tombol_06.gif

prinsipnya kode-kode ini sama dengan diatas, yang membedakan adalah penambahan image doang, coba lakukan langkah berikut ini :


Tambahkan kode berikut sesudah kode , ya di mana saja asalkan di antara kode tadi.

.cuplis{
text-align:left;
display:block;
width:180px;
height:20px;
background:#f0f0f0 url(http://i162.photobucket.com/albums/t253/rohman24/tombol_03.gif) top right no-repeat;
padding:3px 4px 3px 8px;
margin:7px 10px 7px 0;
}

.cuplis:hover{ background:#97A4B9 url(http://i162.photobucket.com/albums/t253/rohman24/tombol_06.gif) top right no-repeat;
text-decoration:none;
}


# copy kode di bawah ini, lalu paste di tempat yang sobat inginkan, bisa di sidebar, footer atau dimana saja, kemudian rubahlah dengan link yang sobat punya :


Rubrik Elektronik |

Blog Menu D'Tree |

Free Blog Templates |

Authorized Service |


Hasilny akan seperti ini :


Rubrik Elektronik | Blog Menu D'Tree | Free Blog Templates | Authorized Service |


Yang membedakan hanya pemasangan URL image saja, yang lainnya sama persis. Kata cuplis adalah untuk membedakan dengan perintah menu navigasi unyil, jadi kalau dua efek ini mau besamaan ada dalam satu blog, ya harus berbeda.


Untuk melihat contoh nyata dari aplikasi kode di atas silahkan klik di sini ! Mudah-mudahan jelas, soalnya saya pun agak bingung mencari kata-kata yang pas untuk menerangkan ini.

Selamat mencoba !

Daftar Mybloglog

Bagi para sobat yang baru membuat blog, pada kesempatan kali ini saya mau menambahkan perbendaharaan blog tools nya, yakni pasang MyBloglog.

Apa itu Mybloglog ?

Bingung kalau harus mendifinisikan apa itu mybloglog biar kita tidak sama-sama bingung, silahkan alihkan perhatian sobat ke bagian sidebar sebelah kanan layar monitor, di bawah tulisan Tamu terdapat photo yang ganteng-ganteng serta cantik-cantik. Nah itu bukanlah photo saya ataupun my family, tapi itu merupakan tamu yang pernah berkunjung ke blog ini dan beliau-beliau inipun sama-sama anggota dari mybloglog, atau barangkali photo sobat sudah terpampang disana? selamat kalau iya, karena sobat akan mulai jadi orang terkenal. Ko bisa? Ya iiyya...lah, karena tercatat tak kurang dari lima puluh pengunjung setiap harinya yang mampir kemari dan selalu melihat photo sobat, keren kan! makanya sering-sering main kemari biar cepat terkenal..he..he..(wuyyy...udah dong ngelanturnya ).

Bagaimana sobat sudah dapat gambaran? saya yakin sudah. Atau belum? kalau belum bolehlah saya yang mendefinisikan, tapi tentunya dengan versi saya sendiri. 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 buka situs 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 sobat ( yang valid)

5. Passwor --> Isi dengan password yang di inginkan. Contoh : ranggalawe

6. Blog/Site URL --> Isi dengan alamat blog sobat. 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 sobat

10. Blog platporm --> pilih blogspot.com

11. Dibagian bawah ada dua radio buttun, silahkan pilih yang sobat 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 sobat (tidak saya 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

20. Klik kotak di samping tulisan c_color_heading kemudian pilih warna yg di sukai pada panel warna untuk merubah warna tulisan heading

21. Klik kotak di samping tulisan c_color_link_bg kemudian pilih warna yg di sukai pada panel warna untuk merubah warna backround link

22. Klik kotak di samping tulisan c_color_link kemudian pilih warna yg di sukai pada panel warna untuk merubah warna tulisan link

23. Klik kotak di samping tulisan c_color_link kemudian pilih warna yg di sukai pada panel warna untuk merubah warna backround bottom

24. Tulis ukuran lebar yang sesuai dengan sidebar blog sobat (kalau mau di tempatkan di sidebar) contoh : 160

25. Di samping tulisan Show Screen Names ada dua radio button, sebaiknya pilih yes, pilih No juga boleh

26. Di samping tulisan Image Size ada dua radio button, sebaiknya pilih Full-Size, pilih half-Size juga boleh

27. Disamping tulisan Rows, pilih berapa baris yang ingin muncul (terserah)

28. Disamping tulisan Title, tulis kata yang sobat suka. contoh : pembaca terbaru, yang mampir, tamu blog ini, atau apa saja

29. Di bagian bawah, ada tulisan Stat Tracking Script, copy kode script yang di berikan lalu paste pada program notepad, silahkan save terlebih dahulu

30. Kembali ke bagian atas

31. Klik tombol bertuliskan Preview and Get Code

32. Copy seluruh kode yang berada di bawah tulisan Recent Readers Widget Display & Code, lalu paste ke dalam notepad

33. Silahkan klik tulisan Logout yang berada di bagian atas untuk keluar dari account sobat

34. 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, dan ini sudah saya bahas pada postingan terdahulu. Jika sudah lupa silahkan baca lagi di sini. Selesai.

Selamat menikmati photo-photo ganteng dan cantik dari tamu blog sobat.

Ada Video di artikel

Memuat video diantara artikel, selain untuk memperindah artikel itu sendiri, juga video ini bisa berfungsi sebagai media yang efektif dalam menyampaikan sesuatu kepada para pengunjung. Terlebih apabila anda merupakan seorang pebisnis yang dengan video ini dapat lebih memperjelas tujuan anda di banding dengan hanya sebuah tulisan. dibawah ini adalah contoh sederhana dari video , silahkan anda klik tombol icon Play untuk mengaftifkannya.





Untuk membuat sebuah video, kita bisa menggunakan situs layanan pembuatan video, salah satunya adalah http://www.youtube.com. Ikuti langkah-langkah berikut ini :

1. Untuk daftar www.youtube.com silahkan klik di sini
2. Setelah berada di situs tersebut, klik tulisan Sign Up yang berada pada layar bagian atas
3. Isi semua data diri anda pada form yang di sediakan, jangan lupa beri tanda tik/cek pada kotak di samping tulisan --> Sign me up for the "Broadcast Yourself" email - I agree to the terms of use and privacy policy. lalu klik tombol Sign Up
4. Setelah berhasil, anda diminta untuk veryfikasi, silahkan cek email yang anda daftarkan tadi untuk melakukan veryfikasi
5. Jika email dari youtube.com sudah masuk, silahkan buka lalu klik tulisan Confirm your email addres
6. Dengan meng klik tulisan tadi, secara otomatis anda sudah masuk kedalam halaman account anda dan siap untuk upload video
7. Klik tulisan Upload Video yang berada pada layar sebelah atas
8. Isi form yang di sediakan
9. Klik tombol bertuliskan Continue Uploading
10. Klik tombol Browse, masukan file video yang ingin anda masukan
11. Beri tanda tik/cek pada radio button, public--> jika video anda bisa dilihat oleh umum. Private --> Jika video anda bersifat pribadi yang hanya bisa di lihat oleh orang yang anda tunjuk
12. Klik tombol Upload Video, tunggu beberapa saat sampai proses upload selesai
13. Setelah proses upload selesai, anda tinggal mengcopy kode HTML yang di berikan. lalu paste pada Notepad
14. Silahkan klik Log Out untuk keluar dari situs tersebut
15. Selesai. anda sudah mempunyai video yang bisa di simpan pada artikel anda




Untuk memasukan kode video yang telah anda copy tadi, caranya yaitu anda tinggal posting artikel seperti biasa lalu sisipkan kode tersebut pada tempat yang anda inginkan. Cuma saat copy n' paste kode tersebut posisi posting harus pada Edit HTML jangan pada posisi Compose. Jika sudah selesai memasukan artikel, Tinggal klik Publish dan video anda siap di lihat oleh para pengunjung blog anda.

Selamat mencoba !

Pasang Icon Yahoo ! Messenger

Menanggapi pertanyaan sobat takdir yang di ajukan melalui shoutbox beberapa waktu yang lalu, beliau menanyakan tentang bagaimana cara menampilkan status online Yahoo ! Messenger pada halaman blog. Barangkali ada di antara para sobat juga berkeinginan yang sama namun belum mengetahui caranya,ada baiknya menyimak beberapa penjelasan yang akan saya utarakan.

Sebenarnya jika saya pikir-pikir, kayanya agak merasa malu menerangkan ini, mungkin bagi para sobat yang sudah beberapa kali mengunjungi blog ini hampir atau bahkan belum pernah melihat Icon Yahoo ! Messenger saya menyala tanda sedang online chatting. Memang benar saya sangat jarang sekali ber chatting ria di dunia maya, paling-paling kalau ada perlu dan itupun janjian terlebih dahulu baru saya chatting (lho ko jadi cerita...kelamaan), oh iya lupa

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 sobat perhatikan gambar berikut :



Style ID 1 Style ID 2 Style ID 3 Style ID 4 Style ID 5






masing-masing gambar mempunyai URL adddress sendiri yaitu :

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 :



Sehingga untuk menampilkan URL address di atas menjadi sebuah gambar, maka kodenya akan seperti ini :


Untuk Style ID 1


Untuk Style ID 2


Untuk Style ID 3


Untuk Style ID 4


Untuk Style ID 5


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.

Kodenya sebagai berikut :

Kirim IM

Sehingga untuk kode lengkapnya jadi seperti ini :






Kirim Instant Messenger dengan pesan

Kodenya sebagai berikut :

Kirim IM

Sehingga untuk kode lengkapnya jadi seperti ini :




Menambahkan link ke chat room favorit

Kodenya sebagai berikut :

Masukan ke daftar teman sobat

Sehingga untuk kode lengkapnya jadi seperti ini :



Bagaimana jelaskan? biar lebih jelas lagi saya beri contoh.


Karena email saya adalah amn_tea@yahoo.co.id maka id saya adalah amn_tea, Sehingga kode untuk mengirimkan Instan Message dengan pilihan Style ID 2 adalah sebagai berikut :





dan yang akan tampil seperti ini :







Icon di atas benar-benar Live, jadi tentunya icon nya akan menyala apabila saya sedang online di Yahoo ! Messenger .


Mudah-mudahan jelas. Selamat mencoba !

Pasang Image pada judul Artikel

Image. Kalau berbicara masalah image/gambar, memang sangat seru dan menyenangkan. Dengan adanya image maka blog kita akan tampil lebih menarik untuk di lihat,walaupun tentusaja apabila berlebihan akan berakibat buruk yaitu blog kita akan susah untuk di aksesoleh para pengunjung karena beban kapasitas data yang berlebihan dan bila itu terjadi maka para pengunjung akan menjadi malas untuk berkunjung. Memang segala sesuatu kalau berlebihan akan berakibat tidak baik, jalan keluarnya ya wajar-wajar saja Re....

Ok sobat, biar ga terlalu banyak berimpropisasi, langsung saja pada topik bahasan. topik yang akan kita bicarakan saat ini yaitu memasang image/gambar pada judul artikel. Artikel ini saya buat bagi yang senang akan pernak-pernik gambar,bagi yang tidak senang, ya sebagai pengetahuan saja lah.

Untuk memasang sebuah image pada judul artikel, ada beberapa tahapan yang harus dilakukan, antara lain :


# Langkah pertama


Langkah pertama yang harus dilakukan adalah membuat image ataupun logo yang di inginkan. jika sobat mahir dalam program grafik & design semisal adobe photoshop ataupun coreldraw, ya tinggal buat saja yang nyentrik. Tapi kalau tidak bisa atau males bisa gunakan layanan di internet, ini sudah saya bahas pada artikel terdahulu, silahkan klik disini untuk membacanya kembali.


# Langkah kedua


langkah kedua yaitu sobat harus upload image atau logo tersebut, bisa ke blogger ataupun ke hosting lain. Misalkan biasanya saya menyimpan setiap image yang saya punya di www.Photobucket.com untuk masalah upload gambarpun sudah saya bahas pada postingan yang lalu, kalau mau baca-baca lagi silahkan klik di sini.


# 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 saya 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 :



Sehingga kodenya akan jadi seperti ini :



dan yang akan tampil adalah image dengan ukuran yang sebenarnya. contoh image tersebut adalah seperti ini :







tentu saja bila kita memajang image sesuai ukuran image yang aslinya, ini menjadi kurang enak di lihat jika di padukan dengan tulisan judul posting. Untuk mengakalinya kita bisa menambahkan beberapa atribut kedalam kode image tersebut, antara lain atribut width="..." untuk lebar, height="..." untuk tinggi, dan border="..." untuk bingkai, dan dalam hal ini yang dipakai adalah border dengan nilai 0 (nol) agar terhindar dari setting template yang memakai nilai border. Saya ambil contoh kode image tadi jadi seperti ini :



sehingga image yang tadi akan berubah jadi seperti ini :







Bagaimana sudah jelaskan cara merubah ukuran gambar? jika sudah, kita beranjak ke langkah selanjutnya.


# 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. Sign in ke blogger dengan id sobat

2. Klik menu Template

3. Klik menu Edit HTML

4. Copy 'n 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 sobat :


<$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. Saya ambil contoh kode image di simpan sebelum tulisan judul :

  <$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 sobat posting artikel, secara otomatis image yang kita pasang tadi akan muncul tanpa harus di tuliskan kembali. Untuk contoh nyata silahkan lihat judul postingan ini.



Untuk yang memakai templat baru :

Catatan awal bagi yang memakai template baru yaitu setiap tag yang kita pakai harus selalu di tutup tidak seperti template klasik, contoh kode gambar yang tadi kita pakai adalah :



kode image tersebut tag nya harus ditutup dengan tag penutup :



Sehingga kode image jadi bertambah menjadi :




Untuk memasukan kode gambar yang sudah di tambahi tag penutup tadi, silahkan ikuti langkah berikut :

1. Sign in ke blogger dengan id sobat

2. Klik menu Layout

3. Klik menu Edit HTML

4. Klik tulisan Download Full Template

5. Silahkan save dulu template sobat, ini untuk back up data apabila terjadi kesalahan editting

6. Beri tanda centang pada kotak disamping tulisan Expand Widget Templates. Sekali lagi jangan lupa beri tanda centang, sebab kalau tidak, nanti tidak akan sesuai dengan langkah selanjutnya

7. Tunggu beberapa saat sampai proses selesai

8. Cari kode berikut pada template sobat :






9. Sisipkan kode gambar yang kita miliki diantara kode :



dan kode


Sehingga bila di satukan kodenya menjadi :

  


10. Klik tombol PREVIEW untuk melihat perubahan

11. bila sudah OK, klik tombol SAVE TEMPLATE

12. Selesai





Untuk melihat contoh template baru yang memakai image pada judul postingan, silahkan klik di sini :


Bagaimana sudah di coba? mudah-mudahan saja berhasil. Selamat mencoba !