Cara Pasang Musik Pada Blog

Cara Pasang Musik Pada Blog
Mohon maaf, karena artikel ini sudah lama sekali di buat maka situs-situs yang saya contohkan
banyak yang sudah tidak aktif.
Rupanya ada salah seorang sobat kita yang tertarik memasang musik pada blog dan belum
mengetahui caranya. Oleh karena itu dalam kesempatan kali ini, saya akan coba membahas
tentang bagaimana cara memasukan musik ke dalam blog.
Untuk memasang musik di blog, kita bisa memanfaatkan situs penyedia musik gratisan yang
banyak bertebaran di internet, yang penting kita jeli untuk mencarinya. Pada intinya ada tiga
jenis situs penyedia musik yaitu :
1. Situs tersebut menyediakan berbagai pilihan lagu yang bisa kita pilih sesuai dengan selera
kita
2. Situs tersebut tidak menyediakan lagu, tapi kita harus upload lagu dari komputer kita
3. Situs tersebut menyediakan berbagai pilihan lagu, atau bisa juga kita upload lagu dari
komputer
Tentu diantara ketiganya ada kelebihan dan kekurangannya. Keuntungan menggunakan jasa situs
yang pertama yaitu kita tidak perlu mempunyai lagu sendiri, kita tinggal pilih lagu yang di sukai
lalu ambil kode HTML nya kemudian masukan ke blog kita, prosesnya sangat cepat dan praktis.
Tapi kekurangan nya yaitu terkadang lagu yang kita sukai tidak tersedia di situs tersebut.
Untuk situs kedua, keuntungannya yaitu kita bisa memasukan lagu yang kita sukai tanpa harus
tergantung dari situs tersebut jadi apapun lagunya pasti bisa yang penting ya kita harus
mempunyai file lagu yang harus di upload. kekurangannya yaitu karena kita harus upload lagu ke
situs tersebut maka dalam proses upload biasanya memerlukan waktu yang cukup lumayan lama,
sehingga sedikit membosankan ketika melakukan proses upload juga tentunya biaya berinternet
kita jadi semakin bengkak.
Untuk situs ketiga, untuk saat ini saya baru mengetahui satu situs saja, tolong kepada para sobat
yang mengetahui situs-situs yang masuk kategori ini untuk menginformasikan pada kotak
komentar agar di ketahui oleh para sobat lainnya. Nah untuk situs ini kelebihannya ya kita lebih
bisa memilih, mau pake lagu yang tersedia atau mau upload juga bisa. tapi ada kekurangannya
yaitu tidak di sediakannya panel kontrol untuk para pengunjung, jadi lagu yang kita pasang tidak
bisa di apa-apakan oleh para pengunjung sehingga akan jalan dengan sendirinya, yang perlu kita
pikirkan adalah lagu yang kita sukai belum tentu di sukai oleh para pengunjung, sehingga ini
akan mengganggu kenyamanan bagi para pembaca blog ita.
Yo'i sobat, kayanya terlalu lama dengan fendefinisian ya, agak basi jadi membosankan...sorry
bos. Kita kembali ke (laptop) topik bahasan semula yakni memasang lagu pada blog. Contoh
yang pertama adalah memanfaatkan situs yang telah menyediakan berbagai lagu tanpa harus
upload terlebih dahulu, saya ambil contoh www.song2play.com. silahkan ikuti langkah-langkah
berikut :
1. Silahkan kunjungi www.song2play.com
2. Masukan judul lagu yang anda inginkan pada search engine yang tersedia. Contoh : Hotel
California. Atau menuliskan nama penyanyi atau grup bandnya. Contoh the Eagle
3. Jika judul lagu belum muncul, biasanya ada tulisan Click here to get more Result. klik
aja tulisan tersebut
4. Setelah terlihat beberapa judul lagu, klik pada judul lagu yang sedang sobat cari, secara
otomatis akan ditampilkan kontrol navigasi dan lagu yang dipilih tadi akan di
perdengarkan
5. Di pojok kiri bagian bawah ada kotak yang sudah di beri tanda centang, yaitu AutoStart,
Show song Title. AutoStart artinya ketika pengunjung mengunjungi blog sobat, maka
lagu akan langsung play. Nah jika tidak mau langsung play alias memberi kesempatan
kepada pengunjung untuk memilih sendiri apakah mau mendengarkan lagu atau tidak,
sobat hilangkan tanda centang tadi dengan cara mengkliknya
6. Show Song Title artinya pada panel navigasi akan di munculkan judul lagu yang di muat.
Jika tidak mau muncul ya hilangkan saja tanda centangnya
7. Copy seluruh kode HTML yang di sediakan pada text area, paste pada notepad. Silahkan
close window situs tersebut
8. Langkah selanjutnya yaitu sobat tinggal masukan kode HTML yang diberikan tadi ke
dalam blog, nah untuk memasukan kode HTML ke dalam blog sudah sering saya bahas
pada postingan terdahulu, jika sobat lupa silahkan klik di sini
Untuk contoh silahkan klik tombol play pada panel navigasi di bawah, ini sengaja saya setting
tidak Auto Start :
Song:
The Eagles - Hotel California

Sedikit tambahan, jika sobat ingin menyesuaikan lebar panel navigasi agar sesuai dengan sidebar
blog sobat, sobat bisa merubah nilai yang ada pada kode HTML lagu tersebut yaitu nilai
width=...px. Contoh : didalam kode tersebut ada kode width=310px, untuk memperkecilnya
kita tinggal perkecil nilai px nya. Contoh : width=200px.
Situs yang serupa dengan ini adalah www.songhere.com. Mungkin pemiliknya memang sama.
Nah langkah-langkah mendapatkan kode HTML dari situs ini mirip dengan langkah-langkah
diatas,
Contoh panel navigasi dari www.songhere, silahkan klik tombol play nya :
Song: White Lion - When the children cry
Tambahan lagi, untuk yang di situs www.songhere ini tidak di sediakan pasilitas untuk memilih
fasilitas AutoStar atau tidak, jadi kalau kita memakainya akan langsung play tanpa harus di klik
oleh pengunjung, untuk mengakalinya kita harus mengganti sendiri kode nya, silahhkan sobat
cari di dalam kode lagu tersebut yang bertuliskan autostart=true, ganti tulisan true menjadi
false sehingga kode tadi akan menjadi seperti ini autostart=false, contoh hasil kode yang
sudah saya rubah adalah lagu dari white lion di atas, yang untuk menjalankannya harus di klik
dulu tombol play nya.
Nah itu tadi contoh situs yang menyediakan berbagai lagu yang bisa kita pilih, sekarang contoh
situs yang harus meng upload lagu dari komputer kita salah satunya adalah www.tunefeed.com
Untuk langkah-langkahnya, silahkan ikuti seperti di bawah ini :
1. Silahkan buka situs www.tunefeed.com
2. Klik kotak di sebelah tulisan widget Color, pilih warna panel navigasi yang sobat sukai
3. Klik tombol yang ada tulisan Click here to share your music
4. Klik tombol yang bertuliskan Add Music or Photos
5. Masukan file foto atau pun lagu yang sobat miliki
6. Klik tombol upload
7. Sambil menunggu proses upload, sobat isi data-data diri sobat pada kolom yang di
sediakan
8. Tunggu sampai proses upload selesai
9. jika proses upload selesai, sobat akan di minta untuk mngecek email di berikan tadi
10. silahkan buka email dari www.tunefeed.com bila sudah sampai
11. Klik link ntuk melakukan aktivasi keanggotaan, nah dengan mengklik link tadi otomatis
sobat sudah berada pada halaman acount sobat
12. Klik tulisan Share This Tunefeed
13. Pilih volume yang diinginkan pada menu dropdown di samping tulisan Select Volume
14. Pilih mode player, mau autoplay atau tidak pada menu dropdown di samping tulisan
auto-play, sebaiknya pilih No
15. Copy seluruh kode yang di berikan pada text area kemudian paste di notepad
16. Klik tulisan Log Out untuk keluar dari halaman account sobat
17. Silahkan close window browser sobat
18. Tugas selanjutnya yaitu memasukan kode HTML yang sudah diberikan ke dalam blog.
Untuk caranya sudah saya bahas pada tulisan di atas
19. Selesai
Contoh panelnya yaitu seperti di bawah ini, silahkan klik tombol play untuk mengaktifkan nya,
tunggu beberapa saat, loadingnya agak sedikit lama :
Untuk contoh kategori yang ketiga, sobat bisa kunjungi www.iwebmusic.com, caranya hampir
mirip dengan cara-cara diatas, disini sobat bisa pilih lagu yang di sediakan atau bisa juga meng
upload lagu dari komputer. Cuma sayang untuk yang satu ini tidak mempunyai panel kontrol
buat pengunjung yang ada hanya berupa banner biasa dan bekerja auto start sehingga saya tidak
bisa memberi contoh panelnya.
Ok para sobat, saya rasa sudah cukup. Selamat mencoba ya...salam hangat buat semuanya.
Buat Logo & Image Button

Bagi para sobat yang sudah mahir menggunakan program desain grafis semisal adobe photoshop
ataupun coreldraw serta teman-temannya yang lain, membuat sebuah logo bukanlah sebuah
pekerjaan yang sulit, dan mungkin tutorial ini menjadi tidak menarik untuk di baca. But
barangkali ada sebagian dari para sobat sekalian yang satu nasib dengan saya, sebenarnya saya
pun boleh di katakan tidak awam banget dengan program-program desain grafis tersebut, akan
tetapi tak cukup hanya menguasai tentu saja di perlukan suatu daya kreasi atau imajinasi yang
tinggi untuk menciptakan sebuah logo.
Nah kalau ada diantara sobat sekalian yang senasib dan sepenanggungan seperti saya (lho ko jadi
ngawur ngomongnya)jangan dulu berkecil hati, seperti biasa ada pepatah mengatakan banyak
jalan menuju Roma ((irama)kaya postingan dulu...dah basi)untuk membuat logo kita bisa
memakai jasa situs di internet, salah satunya yaitu cooltext.com, Silahkan ikuti langkah-langkah
berikut ini :
1. Silahkan buka alamat http://cooltext.com

2. Lalu klik tulisan Design a Logo
3. Klik gambar contoh logo yang sobat sukai
4. Tulis tulisan yang ingin di jadikan logo di sampimg tulisan Logo Text. Misal : Blog
Tutorial
5. Tulis ukuran yang di inginkan di samping Tulisan Text Size. Misal : 50
6. Klik logo warna-warni disamping kotak yang ada tulisan Text Color untuk memilih
warna tulisan (text).silahkan pilih warna yg sobat sukai
7. Pilih format image disamping tulisan file format. sebaiknya .JPG atau .GIF
8. Klik tombol yang bertuliskan Render Logo Design
9. Tunggu beberapa saat ketika proses pembuatan logo berlangsung
10. Lihat hasil logo, sudah cocok apa belum? bila belum cocok, klik tulisan Edit this logo
ulangi langkah diatas, rubah yang sobat inginkan. Jika sudah cocok, klik tulisan
Download Image untuk kita simpan di PC kita
11. Selesai. Sobat sudah mempunyai sebuah logo.
Agar logo yang kita buat tadi bisa tampil di blog, sobat harus upload gambar tersebut ke
blogger.com atau melalui situs lain. Tapi saya lebih suka menyimpannya di situs lain misal
www.photobucket.com.
Untuk proses upload di photobucket.com, silahkan ikuti langkah-langkah berikut :
1. Silahkan buka alamat http://www.photobucket.com,

2. Jika belum terdaftar di situs ini, silahkan daftar dulu (gratis bo) dengan meng klik tombol
yang bertuliskan Join Now pada sudut kanan atas layar
3. Sekarang saya asumsikan sobat sudah terdaftar (pastilah cara daftarnya bisa kan)
4. Silahkan Sign In dengan Id sobat
5. Bila sudah berada pada halaman Account sobat, Klik tombol yang bertuliskan Browse...
Silahkan pilih logo yang tadi di buat
6. Klin tombol yang bertuliskan Upload
7. Tunggu beberapa saat ketika proses upload berlangsung
8. Setelah upload selesai, akan di perlihatkan gambar logo serta kode HTML nya
9. Copy kode HTML yang ada di sebelah tulisan URL Link. Paste pada program notepad
10. Silahkan klik tulisan Log Out untuk keluar dari account sobat. tutup layar browser sobat
Nah sekarang sobat tinggal memasukan kode gambar tadi ke blog ke blog sobat, 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/rohman24/logoblogtutorial.jpg.
Disini sobat harus menambahkan kode <img src="Link URL logo">, sehingga kode tadi
menjadi seperti ini :
<img src="http://i162.photobucket.com/albums/t253/rohman24/logoblogtutorial.jpg">
Maka contoh hasilnya akan seperti ini :
Untuk cara memasukan kode HTML kedalam blog sudah sering di bahas, jika lupa silahkan klik
di sini.
Sebagai tambahan, kode HTML di atas adalah kode untuk menampilkan image dengan ukuran
yang sebenarnya. Apabila sobat ingin memperbesar atau memperkecil image tersebut, sobat bisa
menambahkan beberapa atribut ke dalam kode HTML nya. Contoh : image tadi ingin saya
tampilkan dalam ukuran 100px X 40px , maka kode tersebut menjadi seperti ini :
<img src="http://i162.photobucket.com/albums/t253/rohman24/logoblogtutorial.jpg" width="100"
height="40" alt="ini contoh saja">
sedikit clue, kode width="..." yaitu untuk ukuran lebar image, jadi untuk memperbesar atau
memperkecil image, sobat tinggal menambah atau mengurangi nilainya. kode height="..."
yaitu untuk ukuran tinggi image, sobat 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="..." :
Bagaimana sudah bisa kan? pasti bisa, kan sudah di coba. Sekarang bagaimana cara membuat
image button? langkahnya sama saja dengan langkah-langkah di atas, cuma pada saat berada di
situs cooltext.com yang sobat klik adalah tulisan Desiggen a Button bukan Design a Logo,
contoh image button :
Ok sobat, selamat menikmati hasil karyanya

Membuat menu D'tree
Beberapa waktu yang lampau, saya 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 saya, apabila sobat memasang suatu script atau image yang bersumber dari milik orang
lain, sebaiknya bersegeralah untuk menyimpannya pada account milik sobat, akan tetapi sebelum
mengambilnya tentu sobat harus minta izin terlebih dahulu kepada pemilik script tersebut, etika
nya seperti itu. Misalkan seperti ini, apabila saya menyuruh memasang script seperti ini :
pasanglah kode ini di atas kode </head> :
<script type='text/javascript'
src='http://amen24.googlepages.com/Readmore.js' />
kode --> http://amen24.googlepages.com/Readmore.js berarti java script ini di simpan pada

account milik saya. Tentu apabila sobat memasang kode ini tidak ada masalah, akan tetapi hal itu
beresiko apabila saya iseng atau tidak sengaja atau juga terjadi suatu hal sehingga sumber dari
script tersebut terhapus, walhasil sobat akan kehilangan fungsi dari script tersebut tanpa bisa
berbuat apa-apa. Bagaimana cara mengatasinya? begini caranya : copy kode sumber script ini
lalu paste pada address bar browser internet sobat :
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 sobat. Apabila kode tersebut sudah tersimpan di komputer
sobat, uploadlah kode tersebut pada hosting yang biasa sobat gunakan, misalkan saya 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 saya punyai dengan milik sobat,
misal kode di atas seperti ini :
Gantilah sumber script di atas dengan yang sobat miliki, sehingga kodenya jadi seperti ini :
<script type='text/javascript' src='http://juned.googlepages.com/Readmore.js'

/>
Apabila sobat melakukan hal yang di atas, maka sobat tidak usah khawatir akan kehilangan dari
fungsi script tersebut.
Langkah-langkah di atas merupakan langkah preventif saja bukan bermaksud mengajarkan sobat
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 saya akan mencoba
membahasnya lebih mendalam dengan maksud agar lebih mudah untuk di pahami.
Untuk membuat menu dtree, sobat 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 sobat harus memahaminya,
oleh karena alasan tadi maka saya 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> :
<link rel="StyleSheet" href="dtree.css" type="text/css" />

<script type="text/javascript" src="dtree.js"></script>
Kode di bawah ini di simpan di bagian sidebar :
<h2>Example</h2>
<div class="dtree">
<p><a href="javascript: d.openAll();">open all</a> | <a href="javascript:
d.closeAll();">close all</a></p>
<script type="text/javascript">

</script>
</div>
Apabila sobat mempunyai intelegensi yang cukup lumayan bagus, maka saya yakin tidak usah
saya terangkanpun akan memahami bagaimana untuk membuat menu dtree dari kode diatas
sehingga link-link milik sobat dapat di pasang pada kode-kode di atas.
Dengan tidak ada maksud saya untuk merendahkan sobat yang masih belum mengerti, maka saya
akan mencoba menerangkannya, akan tetapi untuk lebih memudahkan maka saya telah membuat
sebuah menu dtree buatan saya yang telah saya sertakan link-link di dalamnya : source code dari
menu yang saya buat seperti ini :
Kode ini di simpan di atas kode </head> :
<link rel="StyleSheet" href="http://amen24.googlepages.com/dtree.css"

type="text/css" />
<script type="text/javascript"
src="http://amen24.googlepages.com/dtree.js"></script>
Kode di bawah ini di simpan di bagian sidebar :
<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>
</div>
Untuk melihat hasilnya, silahkan klik dulu di sini !
Baiklah, saya akan mencoba mengulasnya agar lebih mudah untuk di pahami :
Jika sobat 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 sobat menginginkan menu yang di simpan menjadi induk, sobat 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 :
d.add(10,3,'isi ke 1','isi ke 2','isi ke 3','isi ke 4','isi ke 5''isi ke 6');
isi ke 1 = adalah tulisan yang akan muncul terlihat langsung

isi ke 2 = adalah alamat yang di tuju apabila di klik tulisan dari isi ke 1
isi ke 3 = adalah judul atau titel atau tulisan yang akan muncul ketika mouse menyorot pada isi
ke 1, akan tetapi ini berlaku bagi induk yang tidak mempunyai cabang, misal menu : my
frienster.
isi ke 4 = terus terang saya tidak tahu pasti, tapi ada kemungkinan untuk alamat image
isi ke 5 = adalah untuk alamat image icon yang mau di munculkan
isi ke 6 = adalah untuk alamat image icon yang akan menggantikan icon isi ke 5
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 sobat 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 sobat:
 Untuk template Klasik
1. Sign in di blogger
2. Klik menu Template
3. Klik menu Edit HTML
4. Copy seluruh kode HTML yang ada, lalu save untuk back up
5. Simpan kode berikut di bawah kode <title><$BlogPageTitle$></title> :

type="text/css" />
6. Copy kode berikut, lalu paste pada kode sidebar sobat (link nya harus di ganti dengan
milik sobat):
<div class="dtree">

</script>
</div>
7. Klik tombol Simpan Perubahan Template
8. Selesai.
 Untuk Template Baru
2. Klik menu Layout
4. Klik tulisan Download Template Lengkap, save dulu untuk backup data biar aman
5. Copy paste kode berikut di atas kode </head>

type="text/css" />
6. Klik tombol Simpan Template
7. Klik menu Elemen Halaman yang ada di sebelah atas monitor
8. Klik tulisan Tambahkan sebuah Elemen Halaman
9. Klik tombol TAMBAHKAN KE BLOG di bawah tulisan HTML/JavaScript
10. Copy paste kode berikut pada kotak yang muncul (ganti link nya dengan milik sobat)
<div class="dtree">

</script>
</div>
11. Klik tombol Simpan
12. Klik pada elemen yang barusan di buat, tahan lalu geser pada tempat yang di inginkan (di
drag & drop)
13. Klik tombol Simpan yang berada di sebelah atas
14. Selesai. Silahkan lihat hasilnya
Huuuuuhhh..... cape uy nulis tutorial ini, dua malem baru deh kelar..... tapi alhamdulillah,
akhirnya bisa juga di posting.
Selamat mencoba !
Tutorial HTML (2)
Melanjutkan posting yang terdahulu setelah terselang oleh beberapa artikel tentang
blog tutorial maka kali ini saya akan membahas tentang tutorial HTML
kembali.Sebelum menginjak kepada topik bahasan ada baiknya para sobat
mengikuti bahasan kali ini dengan langsung memfraktekannya agar lebih cepat
mengerti. Caranya siapkan 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 saya terangkan di sini !
</body>
</html>
Kita langsung ke topik bahasan aja ya biar ga bosan.
Elemen dasar HTML
Ada beberapa elemen dasar HTML yaitu :
Elemen Blok Level
Elemen blok level yaitu tingkatan besarnya hurup yang akan di tampilkan pada
browser. Elemen blok level yang paling sering di gunakan adalah Heading (h1
sampai h6).Tag heading ini ini berupa <h1>...</h1> sampai dengan <h6>...</h6>.
Contoh :
<h1>Ini heading 1</h1>

Hasilnya akan seperti ini :
Ini heading 1
Ini heading 2
Ini heading 3
Ini heading 4
Ini heading 5
Ini heading 6
Sebenarnya ada cara lain untuk menampilkan berbagai ukuran hurup, yakni
memakai tag <font size="...">.....</font>.
Contoh :
<font size="1">Ini font size 1</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.
Untuk kesempatan kali ini, kaya nya udah dulu sobat soalnya belum mandi nih, mo
berangkat kerja hiii.....pantesan dari tadi ada yang bau aneh
Nantikan seri berikutnya

Membuat Read More (2)
Update : saya telah membuat artikel yang lebih mudah untuk di praktekan dalam membuat read
more, silahkan baca di sini!
Bagi para sobat yang menggunakan template baru tentu saja akan mengalami kebingungan ketika
membaca tutorial terdahulu yang membahas tentang membuat menu Read more.. atau menu
Baca selengkapnya.., karena tutorial tersebut memang di peruntukan bagi para sobat yang
menggunakan template klasik. Nah bagi sobat 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 sobat
• 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>
• Klik tombol yang bertuliskan Save Settings
Pemasangan kode ini di maksudkan agar pada saat posting artikel, kode tersebut langsung
muncul tanpa harus menuliskan terlebih dahulu, jadi membantu kita agar tidak harus
selalu mengingat kode tersebut.
Langkah selanjutnya yaitu menambahkan kode pada template, silahkan ikuti langkah berikut :
• Klik menu Dasboard

• Klik menu Layout
• Klik menu Edit HTML
• Klik tulisan Download Full Template
• Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila
terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data
untuk mengembalikannya seperti semula
• Beri tanda centang pada kotak di samping tulisan Expand Widget Template, sekali lagi
jangan lupa beri tanda centang dulu yah, sebab kalau tidak, nanti akan tidak sesuai
dengan langkah selanjutnya
• Tunggu beberapa saat ketika proses sedang berlangsung
• Silahkan Sobat cari kode berikut pada kode template milik sobat :
<div class='post-body'>
• Copy kode HTML di bawah ini kemudian paste di bawah kode tadi
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
• Kemudian lihat kebagian bawah sehingga terlihat kode berikut ini :

• Copy kode HTML di bawah ini kemudian paste di bawah kode tadi
<a expr:href='data:post.url'>Read More......</a>
</b:if>
• klik tombol bertuliskan Save Template
• Selesai.
Cara Posting Artikel
• Klik menu Posting
• Klik menu Edit HTML, maka secara otomatis tampak kode yang telah kita setting tadi,
yakni :
</div>
• Tulisankan artikel yang ingin tampak pada blog sebelum kode :
• Tulis keseluruhan sisa artikel sesudah kode di atas tadi dan sebelum kode :
</div>
• Klik tombol bertuliskan PUBLISH POST
• Klik tulisan Open New Window untuk melihat hasil dari postingan kita, kemudian lihat
apakah hasilnya sukses atau tidak. Jika tidak, mungkin ada bagian yang terlewatkan.
Coba lihat kembali langkah diatas
• Selamat mencoba !
Versi Bahasa Indonesia
Berbicara masalah blog tools, kayanya saya jarang sekali membahasnya. Dari
sekian banyak artikel yang telah saya posting, tercatat baru dua artikel yang
membahas tentang blog tools. Untuk itu dalam postingan kali ini akan di bahas
salah satu blog tools yang banyak di gunakan oleh para blogger yakni tool untuk
mengetahui berapa banyak pengguna/user yang sedang online pada blog milik kita.
Disamping berfungsi sebagai 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.
Ok, biar ga bosan baca intermezo yang terlalu panjang dan garing, langsung saja
pada topik bahasan utama.Untuk mendapat tool user online status, salah satunya
kita bisa mendapatkan dari www.Geovisite.com, untuk langkah-langkahnya
silahkan ikuti langkah berikut :
1. Silahkan buka www.geovisite.com
2. Klik tulisan Register yang berada di bawah gambar Geo counter Flash
3. Tulis alamat email sobat pada kotak kosong di samping tulisan Email
4. Tulis address blog milik sobat disamping tulisan URL. Contoh : http://rubrik-
elektronik.blogspot.com
5. Tulis kata untuk login di samping tulisan Login (4/12). Contoh : amen24
6. Tulis password yang di inginkan disamping tulisan password (4/8). Contoh :

kinoy
7. Pilih waktu yang sesuai dengan daerah sobat disamping tulisan Location.
contoh :untuk daerah jakarta adalah Asia/Jakarta (GMT+7)
8. Pilih kategori yang sesuai dengan blog sobat di samping tulisan Category.
Contoh : Internet
9. Pilih bahasa yang sesuai dengan blog sobat di samping tulisan Language of
your site. Contoh : English (soalnya kalo indonesia ga ada, belum di akui bo)
10.Pilih judul blog sobat disamping tulisan Title. Contoh : Rubrik Elektronik
11.Tulis deskripsi dari blog milik sobat pada kotak di samping tulisan
Descriptioan. 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 sobat

15.langkah selanjutnya adalah memasukan kode HTML tersebut pada kode
HTML milik sobat, nah untuk langkah ini sudah saya bahas, silahkan klik di
sini untuk membacanya
16.Selesai.
Agar sobat bisa menentukan pilihan mana yang harus di pilih apakah GEOGLOBE,
GEOCOUNTER, atau GEOMAP ? Silahkan klik di sini untuk melihat secara nyata
gambar dari ketiga pilihan tadi, tunggu beberapa saat,loadingnya lumayan sedikit
lama. Kenapa tidak saya cantumkan di sini,alasannya yaitu agar halaman blog ini
tidak terlalu berat untuk di akses makanya sengaja saya pisahkan.
Sebagai tambahan, situs penyedia yang lainnya sobat bisa kunjungi di :
• http://www.neoworx.net
• http://www.webfooted.net
• http://www.fastonlineusers.com
• http://www.histats.com
Selamat menikmati tool baru...

Blogroll Alternatif
Judulnya lucu ya, kaya pengobatan saja pake kata altenatif segala, pengobatan
alternatif kalee..
Baiklah para sobat semua, dalam kesempatan kali ini saya akan membicarakan
tentang yang namanya Blogroll.
Apa itu Blogroll?
Blogroll atau di sebut juga Link Exchange atau kata orang bandung sih tukeran link
antar blog atau website adalah menyimpan link address milik orang lain pada
blog/website milik kita.
Apa manfaat dari blogroll?
Mungkin secara sekilas para sobat berpikir bahwa memasang link address milik
orang lain pada blog/website milik kita akan merugikan, sebab dengan itu tentu
saja kita memberikan jalan kepada para pengunjung untuk meninggalkan blog kita.
Alasan itu mungkin ada benarnya, akan tetapi tidak seutuhnya benar. Dengan
adanya blogroll banyak sekali manfaat yang kita dapatkan, antara lain yaitu
mempererat tali silaturahmi atau tali persaudaraan diantara pemilik blog/website.
selain itu semakin banyak blog kita di link oleh blog lain maka semakin baik pula
posisi rangking blog kita pada Search Engine semacam Google, Yahoo, Msn serta
teman-temannya. Tentu saja sama-sama kita ketahui bahwa setiap pemilik
blog/website berkeinginan bahwa blog/website miliknya mempunyai rangking yang
baik pada search engine. Makanya budayakan tukeran link jangan pelit, karena
kalau kita pelit memberi link ya tentu saja tidak akan ada yang mau pasang link
addres milik kita pada blog mereka.
Terus apa hubungannya dengan judul di atas?
Oh iya ke asyikan bercerita jadi lupa pada topik bahasan. OK kita kembali ke
lap....top (yeee..ngekor ama tukul) eh topik bahasan. Bagi para sobat yang baru
membuat blog dan baru memiliki blogroll hanya beberapa saja mungkin tulisan ini
tidak terlalu bermanfaat, tapi mungkin barangkali nanti setelah link sobat
jumlahnya sampai ratusan atau bahkan ribuan informasi ini bisa jadi bermanfaat.
Memang seperti yang tadi saya katakan di awal bahwa bertukar link atau link
Exchange sangat bermanfaat, tapi...ada tapinya nie sobat..kalo link sobat sudah
mencapai ratusan atau bahkan ribuan tentu saja akan menemui masalah, yaitu
tentu saja link ini akan memakan tempat yang banyak dan jadi tidak enak untuk di
pandang mata para pengunjung. Nah jika sobat mempunyai masalah demikian,
maka saya akan memberikan beberapa alternatif jalan keluarnya (tuh kan jadi
nyambung, keluar juga kata alternatif nya). Yaitu antara lain :
 Blogroll dengan marquee
yang paling banyak di gunakan oleh para blogger untuk menghemat space pada
blog adalah dengan menggunakan perintah marquee.
Contoh membuat blogroll dengan perintah marquee :
<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2"

direction="up" width="100%" height="200" >
<a href="http://rubrik-elektronik.blogspot.com" target="_blank">Rubrik

Elektronik</a>
<br/><br/>
<a href="http://user-online.blogspot.com" target="_blank">User Online</a>
<br/><br/>
<a href="http://rohman-freeblogtemplate.blogspot.com" target="_blank">free
Blog Template</a>
<br/><br/>
<a href="http://kolom-authorized.blogspot.com" target="_blank">Authorize
service</a>
<br/><br/>
<a href="http://contoh-blog.blogspot.com/" target="_blank">Blog D'Tree</a>
<br/><br/>
</marquee>
Maka nanti yang akan tampil pada blog kita adalah seperti ini :
Sedikit clue biar agak jelas. Kode diatas tidak baku harus di tuliskan persis seperti di
atas, tapi bisa di sesuaikan dengan kondisi dan keinginan sobat. 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" .
Ada variasi lain, yaitu dengan memakai tabel, contoh :
<table border="3" width="155" height="130" cellpadding="2">
<tr>
<td align="left">
<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2"

direction="up" width="100%" height="200" >
Elektronik</a>
<br/><br/>
<a href="http://user-online.blogspot.com" target="_blank">User Online</a>
<br/><br/>
<a href="http://rohman-freeblogtemplate.blogspot.com" target="_blank">free
Blog Template</a>
<br/><br/>
<a href="http://kolom-authorized.blogspot.com" target="_blank">Authorize
service</a>
<br/><br/>
<a href="http://contoh-blog.blogspot.com/" target="_blank">Blog D'Tree</a>
<br/><br/>
</marquee>
</td>
</tr>
</table>
Maka hasilnya akan seperti di bawah ini :

 Blogroll dengan menu dropdown
Untuk membuat blogroll pada menu dropdown, silahkan lihat contoh di bawah :
<form>
<select name="menu"
onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1
name=menu>
<option> - Blogroll - </option>
<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>
Hasilnya akan seperti ini, silahkan klik pada menu dropdownnya :
Top of Form
Bottom of Form
Contoh variasi lainnya :
<h3> Blogroll </h3>
<div align="left">
<select style size=5="font-weight: normal; font-size: 13px; width="135";

font-family: Verdana,Tahoma,Arial; background-color: rgb(229, 229, 229);"
onchange="window.open(this.options[this.selectedIndex].value,'_blank')"
size="1" name="menu">
<option style="font-weight: normal; font-size: 11px; color: rgb(204, 204,

204); font-family: Verdana,Tahoma,Arial;" value="" selected="selected">--
Teman-temanku--</option>
<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">Authorized
Service</option>
<option value="http://contoh-blog.blogspot.com/" target="_blank">Blog

D'Tree</option>
</select>
</form> </div>
Blogroll
--Teman-teman--
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 sobat, silahkan
simak di sini. 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 :
<img src="URL image">
Sehingga kodenya akan jadi seperti ini :
<img src="http://i162.photobucket.com/albums/t253/rohman24/kupu2.gif">
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 :
<img src="http://i162.photobucket.com/albums/t253/rohman24/kupu2.gif"
width="45" hight="45" border="0">
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
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 :
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 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 :
</img>
Sehingga kode image jadi bertambah menjadi :
width="45" hight="45" border="0"></img>
Untuk memasukan kode gambar yang sudah di tambahi tag penutup tadi, silahkan
ikuti langkah berikut :
2. Klik menu Layout
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 :
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
9. Sisipkan kode gambar yang kita miliki diantara kode :
<a expr:href='data:post.url'> dan kode <data:post.title/></a>

<b:else/>
Sehingga bila di satukan kodenya menjadi :
<a expr:href='data:post.url'> <img

src="http://i162.photobucket.com/albums/t253/rohman24/kupu2.gif"
  <data:post.title/></a>
<b:else/>
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 !

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
Untuk Style ID 2
Untuk Style ID 3
Untuk Style ID 4
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 :
<img src="http://opi.yahoo.com/online?u=YahooID&m=g&t=1" border="0">

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 :
<a href="ymsgr:sendIM?YOURID">Kirim IM</a>
Sehingga untuk kode lengkapnya jadi seperti ini :

<a href="ymsgr:sendIM?YOURID"><img src="http://opi.yahoo.com/online?
u=YourID&m=g&t=StyleID" border="0"></a>
Kirim Instant Messenger dengan pesan
<a href="ymsgr:sendIM?YOURID&m=YOUR+MESSAGE">Kirim IM</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>
Menambahkan link ke chat room favorit
<a href="ymsgr:addfriend?YOURID">Masukan ke daftar teman sobat</a>
<a href="ymsgr:addfriend?YOURID"><img src="http://opi.yahoo.com/online?

u=YourID&m=g&t=StyleID" border="0"></a>
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 :
<a href="ymsgr:sendIM?amn_tea"><img src="http://opi.yahoo.com/online?

u=amn_tea&m=g&t=2" border="0"></a>
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 !
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 silahkan kunjungi http://www.youtube.com

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
16. 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 !
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.
Menu Navigasi dengan CSS

Update : Tutorial ini khusus pagi anda yang masih memakai template klasik
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. Untuk melihat demo Navigasi yang akan saya terangkan,
silahkan klik tombol di bawah ini:
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
 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 <style type="text/css"> dan

sebelum kode </style>, ya di mana saja asalkan di antara kode tadi.
.unyil{
text-align:left;
display:block;
width:180px;
height:20px;
background:#f0f0f0;
padding:3px 4px 3px 8px;
margin:7px 10px 7px 0;
}
.unyil:hover{
background:#97A4B9;
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 :
<a class="unyil" href="http://rubrik-elektronik.blogspot.com">Rubrik

Elektronik</a><span class="hide"> | </span>
<a class="unyil" href="contoh-blog.blogspot.com">Blog Menu

D'Tree</a><span class="hide"> | </span>
<a class="unyil" href="http://rohman-

freeblogtemplate.blogspot.com">Free Blog Templates</a><span
class="hide"> | </span>
<a class="unyil" href="http://kolom-authorized.blogspot.com">Authorized

Service</a><span class="hide"> | </span>
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; --> 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; --> #97A4B9 adalah kode warna yang dinginkan ketika

mouse berada pada tombol .unyil
text-decoration:none; --> text dekorasi jangan di rubah.
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 :
prinsipnya kode-kode ini sama dengan diatas, yang membedakan adalah

penambahan image doang, coba lakukan langkah berikut ini :
Tambahkan kode berikut sesudah kode <style type="text/css"> dan sebelum kode
</style>, 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;
margin:7px 10px 7px 0;
}
.cuplis:hover{ background:#97A4B9
url(http://i162.photobucket.com/albums/t253/rohman24/tombol_06.gif) top right
no-repeat;
}
 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 :
<a class="cuplis" href="http://rubrik-elektronik.blogspot.com">Rubrik

Elektronik</a><span class="hide"> | </span>
<a class="cuplis" href="contoh-blog.blogspot.com">Blog Menu D'Tree</a><span

class="hide"> | </span>
<a class="cuplis" href="http://rohman-freeblogtemplate.blogspot.com">Free

Blog Templates</a><span class="hide"> | </span>
<a class="cuplis" href="http://kolom-authorized.blogspot.com">Authorized

Service</a><span class="hide"> | </span>
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.
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 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
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 :
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
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
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.
Membuat Penggalan Artikel

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 :
<span style="color:#FD8403"><font size="6">Electronic Shopping</font></span>

<hr width="100%" align="left">
<br/>
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? <a href="http://rubrik-
elektronik.blogspot.com/2007/04/electronic-shopping.html"><b>...Read
more...</b></a>
<br/>
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 :
<span style="color:#FD8403"> ..... </span> --> ini adalah kode untuk merubah
warna text. #FD8403 merupakan kode warna orange.
<font size="6">.......</font>< --> ini adalah kode untuk menampilkan huruf
dalam ukuran font 6 (ukuran besar)
<hr width="100%" align="left"> --> ini adalah kode untuk membuat garis sebesar
100% dari lebarnya halaman blog yang dimulai dari tepi kiri.
<br/> --> 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 :
<div class="post"><a name="<$BlogItemNumber$>"></a>

<BlogItemTitle>
Tempatkan kode yang telah kita buat tadi persis diatas kode diatas, sehingga
kodenya menjadi :
<span style="color:#FD8403"><font size="6">Electronic Shopping</font></span>
<br/>
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? <a href="http://rubrik-
elektronik.blogspot.com/2007/04/electronic-shopping.html"><b>...Read
more...</b></a>
<br/>
<div class="post"><a name="<$BlogItemNumber$>"></a>
<BlogItemTitle>
 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 !
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 :
<a href="http://www.snapdrive.net/files/452250/billing
%20internet.zip">billing internet.zip</a>
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 :
%20internet.zip">download</a>
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 :
<br/><br/>
%20internet.zip">download</a>
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 !
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 klik tombol di bawah untuk melihat demo :
Caranya silahkan arahkan mouse sobat ke deretan menu yang ada pada halaman
demo 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 :
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 :
 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
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
7. Simpan kode berikut di bawah kode <title><data:blog.pageTitle/></title>

<script>
var last_expanded = '';
function showHide(id)
{
var obj = document.getElementById(id);
var status = obj.className;
if (status == 'hide') {
if (last_expanded != '') {
var last_obj = document.getElementById(last_expanded);
last_obj.className = 'hide';
}
obj.className = 'show';
last_expanded = id;
} else {
obj.className = 'hide';
}
}
</script>
8. Masukan kode berikut di dalam stylesheet CSS, atau untuk lebih mudah
silahkan cari kode ]]></b:skin>, lalu simpan kode berkut di atasnya
.ogah{
background-
image:url('http://i162.photobucket.com/albums/t253/rohman24/tombol_03.g
if');
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%;
padding-left:20px;
padding-right:20px;
padding-top:13px;
display:block;
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 :

<a class="ogah" onclick="showHide('ogahku1')">Menu utama 1</a>
<div id="ogahku1" class="hide">
<a href="#" class="ogahniye">Link 1 di sini</a>>
<a href="#" class="ogahniye">Link 2 di sini</a>
</div>
<a class="ogah" onclick="showHide('ogahku2')">Menu utama 2 </a>
</div>
</div>
</div>
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.
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 !
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 demo di bawah ini :
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.
 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
 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
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 <head> dan sebelum kode </head>,
atau jika ingin lebih mudah simpan di bawah kode
<title><$BlogPageTitle$></title> :
<script>
{
}
last_expanded = id;
} else {
}
}
</script>
6. Masukan kode berikut diatas kode ]]></b:skin>
.raden{
background-image:
url('http://i162.photobucket.com/albums/t253/rohman24/bannerjava6.gif');
text-align:center;
width:175px;
padding-left:5px;
padding-right:5px;
padding-top:5px;
display:block;
color: #F6E151;
}
.ogah{
background-image:url('http://i162.photobucket.com/albums/t253/rohman24/tombol_03.gif');
text-align:center;
width:175px;
padding-left:5px;
padding-right:5px;
padding-top:8px;
display:block;
color: ##FAF705;
height: 18px;
}
.ogahniye{
background-image:
text-align:center;
width:175px;
padding-left:5px;
padding-right:5px;
padding-top:8px;
display:block;
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 :
<a class="raden"><font size="5"><b>Navigasi</b></font></a>
<a class="ogah" onclick="showHide('ogahku1')">Blog Tutorial</a>
<a href="http://kolom-tutorial.blogspot.com/2007/04/bikin-blog.html"
class="ogahniye">Membuat blog</a>
<a href="http://kolom-tutorial.blogspot.com/2007/04/membuat-link-
1.html" class="ogahniye">Membuat link</a>
<a href="http://kolom-tutorial.blogspot.com/2007/04/membuat-
marquee.html" class="ogahniye">Membuar marquee</a>
<a href="http://kolom-tutorial.blogspot.com/2007/05/pasang-icon-yahoo-
messenger.html" class="ogahniye">Icon YM</a>
</div>
<a class="ogah" onclick="showHide('ogahku2')">Aksesori blog</a>
<a href="http://kolom-tutorial.blogspot.com/2007/04/yahoo-messenger-
emoticons.html" class="ogahniye">Yahoo ! Emoticons</a>
<a href="http://kolom-tutorial.blogspot.com/2007/04/blogger-
emoticons.html" class="ogahniye">Blogger Emoticons</a>
<a href="http://kolom-tutorial.blogspot.com/2007/05/pasang-jam-blog-di-
sidebar.html" class="ogahniye">Pasang jam</a>
<a href="http://kolom-tutorial.blogspot.com/2007/05/ada-video-di-
artikel.html" class="ogahniye">Pasang Video</a>
</div>
<a class="ogah" onclick="showHide('ogahku3')">My Other Blog</a>
<a href="http://rubrik-elektronik.blogspot.com/"
class="ogahniye">Rubrik Elektronik</a>
<a href="http://rohman-freeblogtemplate.blogspot.com/"
class="ogahniye">Free Blog Template</a>
<a href="http://contoh-blog.blogspot.com/" class="ogahniye">Blog Menu

D'tree</a>
<a href="http://kolom-authorized.blogspot.com/"
class="ogahniye">Authorize service</a>
</div>
<a class="ogah" onclick="showHide('ogahku4')">Links Temanku</a>
<a href="http://free-7.blogspot.com/" target="_blank"

class="ogahniye">Free 7</a>
<a href="http://jaloee.blogspot.com/" target="_blank"

class="ogahniye">Jaloee</a>
<a href="http://sundajava.blogspot.com/" target="_blank"

class="ogahniye">Liezmaya</a>
<a href="http://anangku.blogspot.com/" target="_blank"

class="ogahniye">Anang</a>
</div>
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 :
<script>
{
}
last_expanded = id;
} else {
}
}
</script>
• 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:
--> 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 (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
padding-top:5px;
--> batas (jarak) tulisan sebesar 5px dari tepi atas tombol,nilai ini bisa di
--> batas (jarak) tulisan sebesar 5px dari tepi bawah tombol,nilai ini bisa di
display:block;
--> block berarti ditampilkan,jadi jangan dirubah.
--> 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.
Mudah-mudahan keterangan di atas sudah jelas. Selamat mencoba !

Cara membuat Favicon (2)
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 :
Apakah favicon tersebut bisa di ganti dengan favicon milik anda? jawabannya
adalah bisa. Berikut adalah contoh favicon blogger yang sudah di ganti :
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 :
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 :
<link rel="shortcut icon"

href="http://www.geocities.com/amn_tea/favicon.ico"/>
11.Langkah selanjutnya adalah silahkan login ke blogger dengan ID anda.
12.Klik pada Tata Letak.
13.Klik Edit HTML.
14.Silahkan cari kode </head> (posisinya hampir paling atas, jadi jangan jauh-
jauh nyari ke bawah dhenk).
15.Simpan kode favicon yang tadi persis di atas kode </head> . Contoh :
16.
<link rel="shortcut icon"

href="http://www.geocities.com/amn_tea/favicon.ico"/>
17.Klik tombol Simpan Template.
18.Selesai. Sekarang anda sudah mempunyai favicon di alamat URL blog anda.
Bagi anda yang masih menggunakan browser IE6, favicon anda tidak akan langsung
terlihat, coba di bookmark dulu alamatnya. Berbeda jika anda menggunakan
browser firefox, opera dan yang lainnya, favicon anda sudah langsung dapat di
nikmati.
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 :
Top of Form
Bottom of Form
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 :
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 :
<script style="text/javascript"
src="http://home.planet.nl/~hansoosting/downloads/showrecentcomments2.js">
</script><script style="text/javascript">var numcomments = 5;var
showcommentdate = true;var showposttitle = true;var numchars = 100;var
standardstyling = true;</script> <script
src="http://YourBlogName.blogspot.com/feeds/comments/default?alt=json-
in-script&callback=showrecentcomments"></script>
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 !!!!
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 :
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 </head>
<script language='javascript'>
message = "Tulis text pertama yang ingin muncul disini ^" +
"Tulis text kedua disini ^" +
"Tulis text ketiga disini ^" +
"Tulis text keempat disini ^"
scrollSpeed = 130
lineDelay = 0
// Do not change the text below //
txt = ""
function scrollText(pos) {
if (message.charAt(pos) != '^') {
txt = txt + message.charAt(pos)
status = txt
pauze = scrollSpeed
}
else {
pauze = lineDelay
txt = ""
if (pos == message.length-1) pos = -1
}
pos++
setTimeout("scrollText('"+pos+"')",pauze)
}
scrollText(0)
</script>
6. Klik tombol Save Template Changes
7. Selesai.
Untuk template baru silahkan ikuti langkah-langkah berikut ini :
2. Klik menu Layout
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
7. Simpan kode berikut di bawah kode </body> , kode ini letaknya berada paling
bawah sebelum kode </html>
<script language='javascript'>
message = "Tulis text pertama yang ingin muncul disini ^" +
"Tulis text kedua disini ^" +
"Tulis text ketiga disini ^" +
"Tulis text keempat disini ^"
scrollSpeed = 130
lineDelay = 0
// Do not change the text below //
txt = ""
function scrollText(pos) {
if (message.charAt(pos) != '^') {
txt = txt + message.charAt(pos)
status = txt
pauze = scrollSpeed
}
else {
pauze = lineDelay
txt = ""
if (pos == message.length-1) pos = -1
}
pos++
setTimeout("scrollText('"+pos+"')",pauze)
}
scrollText(0)
</script>
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 !!!

Random Banner Header
Menjawab pertanyaan mba Ati 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 :
var banner= new Array()
banner[0]="bannerURL0"
var random=Math.floor(10*Math.random());
document.write("<style>");
document.write("#header {");
document.write(' background:url("' + banner[random] + '") no-repeat top left;');
document.write(" }");
document.write("</style>");
</script>
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/banner5.gif
dan contoh bannernya adalah sebagai berikut (gambar diperkecil) :

Contoh script dari banner-banner ini adalah :
banner[0]="http://i162.photobucket.com/albums/t253/rohman24/banner_1.gif"
</script>
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
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 <div id='header'> (biasanya)
</script>
 Klik tombol Save Template Changes

 Selesai.
Untuk Template baru
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
</script>
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 !!!!

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 :
2. Klik menu Layout
3. Klik menu 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 !
Read More Versi baru
Bagi para sobat yang gemar menyingkat artikel dengan fasilitas Read more atau
Baca selengkapnya seperti yang telah saya terangkan pada artikel terdahulu,
Sekarang ada cara membuat menu Read more yang saya sebut dengan Read
more versi baru. Kenapa demikian? karena menu Read more kali ini sedikit
berbeda dengan yang saya terangkan pada artikel yang telah lalu.
Fasilitas Read more kali ini di buat oleh Ramani dan Hans. Kelebihannya yaitu
ketika pembaca mengklik link Read more, maka keseluruhan artikel bisa terbuka
tanpa harus me-loading ulang yang terkadang membuat BT pembaca yang koneksi
internetnya rada lelet ( jadi malu, padahal blog saya berat banget untuk di loading),
selain itu untuk artikel yang pendek, tulisan readmore nya bisa di hapus sehingga
tidak mengganggu pemandangan seperti yang di keluhkan sobat yuki beberapa
waktu lalu yang merasa terganggu karena tulisan readmore selalu muncul
walaupun pada artikel yang pendek.
Tapi sayang kode-kode berikut ini hanya berlaku bagi sobat yang memakai
template baru saja dan untuk yang memakai template klasik saya ucapkan
Kaciaaaaaan deeeeehhh (padahal blog ini pun pake template klasik jadi ga bisa
pake ini).
Untuk menyingkat tulisan agar tidak terlalu dipenuhi dengan intermezo yang sedikit
membuat bete and ngeselin, langsung saja untuk membuat read more versi baru ini
silahkan ikuti langkah-langkah berikut ini :
2. Klik menu layout
4. Klik tulisan Download Template lengkap, silahkan save dulu template

sobat, ini untuk mencegah resiko apabila terjadi kesalahan dalam melakukan
kesalahan dalam proses editing template
5. Klik kotak kecil di samping tulisan Expand Template Widget, sekali lagi
jangan lupa untuk memberi tanda centang dulu yah
7. Copy kode berikut, lalu paste tepat di atas kode </head>
8. Tambahkan kode berikut pada kode template sobat, yang berwarna hitam
adalah kode asli dari kode template dan yang berwarna merah adalah kode
yang harus di tambahkan :
<h3 class='post-title'>
<b:if cond='data:post.url'>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>
<div class='post-header-line-1'/>
<div class='post-body' expr:id='"post-" + data:post.id'>
<b:if cond='data:blog.pageType == "item"'>
<b:else/>
<style>#fullpost {display:none;}</style>
<span id='showlink'>
<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id +
"\");"' href='javascript:void(0);'>[+/-] Selengkapnya...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id +
"\");"' href='javascript:void(0);'>[+/-] Ringkasan saja...</a></p>
</span>
<script type='text/javascript'>checkFull("post-" +
"<data:post.id/>")</script>
</b:if>
<div style='clear: both;'/> 
</div>
</div>
.... rest of template code ....
9. Klik tombol SIMPAN TEMPLATE
Langkah selanjutnya :
1. Klik menu Pengaturan
2. Klik menu Format
3. Copy kode berikut lalu paste pada kotak kosong yang berada di samping
tulisan Template posting
<span id="fullpost">
</span>
4. Klik tombol Simpan Setting
5. Selesai.
Cara posting artikel :
Pada saat berada pada menu posting, pilih tombol yang Edit HTML jangan pilih
yang tombol Compose, maka akan secara otomatis terlihat kode tadi di atas yaitu :
<span id="fullpost">
</span>
Simpan artikel yang mau di tampilkan di muka (ringkasannya) di atas kode <span
id="fullpost">, dan sisa keseluruhan artikel di simpan sesudah kode <span
id="fullpost"> dan sebelum kode </span>.
Untuk artikel yang pendek, sobat tinggal menghapus kode tadi dan nanti artikel
muncul tanpa ada kode [+/-] Selengkapnya... dan [+/-] Ringkasan saja....
Untuk contoh nyata saya sudah membuat blog yang sudah memakai sistem ini,
silahkan sobat klik tulisan [+/-] Readmore... untuk membuka keseluruhan artikel,
dan klik tulisan [+/-] Summary only... Untuk melihat ringkasan artikel. Silahkan
sobat klik di sini !.
Selamat mencoba !
Pasang Link di New Blogger Template

Menilik beberapa pertanyaan yang di ajukan beberapa sobat, rupanya masih ada
yang berkeinginan lebih dalam hal membuat link walaupun sudah saya posting
sampai dua artikel, terutama bagi yang memakai template baru alias new blogger
template. Untuk memenuhi hasrat beliau-beliau ini, sengaja saya posting kembali
mengenai membuat link dan mudah-mudahan dengan adanya postingan ini dapat
menjawab beberapa keinginan yang belum terjawabkan.
Ok, saya mulai dengan membuat link yang bisa memunculkan window baru. saya
ambil contoh blog yang ingin saya link sebanyak lima buah, yaitu :
1. http://rubrik-elektronik.blogspot.com
2. http://www.rohman24.co.nr
3. http://jaya-example.blogspot.com
4. http://user-online.blogspot.com
5. http://amen24.googlepages.com/koded%27treemenu
Untuk membuat kode link yang arah vertikal seperti ini :

Elektronik</a>
<br/>
<a href="http://www.rohman24.co.nr" target="_blank">Free blog template</a>
<br/>
<a href="http://jaya-example.blogspot.com" target="_blank">Rotating banner
blog</a>
<br/>
<a href="http://user-online.blogspot.com" target="_blank">User Online status</a>
<br/>
<a href="http://amen24.googlepages.com/koded%27treemenu"
target="_blank">Kode menu d tree</a>
Rubrik Elektronik
Free blog template
Rotating banner blog
User Online status
Kode menu d tree
kode <br/> yang saya tuliskan di atas merupakan kode atau tag untuk
memindahkan link ataupun tulisan berpindah satu line break kebawah. Jika sobat
tidak memasang kode/tag tersebut, walaupun di tulis berjauhan ke bawah hasilnya
akan berdempetan kepinggir. satu kode/tag <br/> adalah satu kali link berpindah
kebawah, jika sobat ingin jaraknya lebih lebar, maka tambahkan tag tersebut
beberapa kali, misal <br/><br/>, atau <br/><br/><br/>, dan bila ingin lebih jauh
lagi ya tambahkan yang banyak.
Untuk membuat kode link yang arah horizontal seperti ini :

Elektronik</a>

<a href="http://www.rohman24.co.nr" target="_blank">Free blog template</a>

<a href="http://jaya-example.blogspot.com" target="_blank">Rotating banner
blog</a>

<a href="http://user-online.blogspot.com" target="_blank">User Online status</a>

<a href="http://amen24.googlepages.com/koded%27treemenu"
target="_blank">Kode menu d tree</a>
Maka hasilnya akan seperti ini :
Rubrik Elektronik Free blog template Rotating banner blog User Online status
Kode menu d tree
kode yang saya tuliskan di atas merupakan kode untuk memindahkan link
ataupun tulisan berpindah satu spasi ke samping. Jika sobat tidak memasang kode
tersebut, walaupun di tulis berjauhan ke samping, hasilnya akan tetap
berdempetan. satu kode adalah satu kali link berpindah ke samping, jika
sobat ingin jaraknya lebih lebar, maka tambahkan kode tersebut beberapa kali,
misal    , atau     , dan bila ingin lebih jauh lagi ya
tambahkan yang banyak.
Mudah-mudahan agak sedikit jelas. Ok, kita lanjut. Sempat ada yang menanyakan
juga tentang yang memakai variasi abjad supaya terlihat lebih menarik. Kira-kira
jawabannya melalui contoh saja.
Ambil contoh blog yang ingin di link adalah seperti berikut ini :
1. http://sncepuspiritualsciencequantum.blogspot.com --> Abu Amin
2. http://adry-fx.blogspot.com --> Adryy-fx
3. http://belati.blogspot.com --> Belati
4. http://benhardleroy.blogspot.com --> Benhard Journey
5. http://melileagroup.blogspot.com --> Capunk
6. http://catatanpojok.blogspot.com --> Catatan pojok
Untuk membuat link yang arah vertikal seperti ini :
<b>:::A:::</b>
<br/>
<a href="http://sncepuspiritualsciencequantum.blogspot.com"
target="_blank">Abu Amin</a>
<br/>
<a href="http://adry-fx.blogspot.com" target="_blank">Adryy-fx</a>
<br/><br/>
<b>:::B:::</b>
<br/>
<a href="http://belati.blogspot.com" target="_blank">Belati</a>
<br/>
<a href="http://benhardleroy.blogspot.com" target="_blank">Benhard
Journey</a>
<br/><br/>
<b>:::C:::</b>
<br/>
<a href="http://melileagroup.blogspot.com" target="_blank">Capunk</a>
<br/>
<a href="http://catatanpojok.blogspot.com" target="_blank">Catatan pojok</a>
:::A:::
Abu Amin
Adryy-fx
:::B:::
Belati
Benhard Journey
:::C:::
Capunk
Catatan pojok
Untuk membuat link yang arah horizontal seperti ini :
<b>:::A:::</b>

<a href="http://sncepuspiritualsciencequantum.blogspot.com"

<a href="http://adry-fx.blogspot.com" target="_blank">Adryy-fx</a>

<b>:::B:::</b>

<a href="http://belati.blogspot.com" target="_blank">Belati</a>

<a href="http://benhardleroy.blogspot.com" target="_blank">Benhard
Journey</a>

<b>:::C:::</b>

<a href="http://melileagroup.blogspot.com" target="_blank">Capunk</a>

<a href="http://catatanpojok.blogspot.com" target="_blank">Catatan pojok</a>
maka hasilnya akan seperti ini :
:::A::: Abu Amin Adryy-fx :::B::: Belati Benhard Journey :::C::: Capunk
Catatan pojok
Pemakaian tag <b>...</b> adalah agar karakter yang ada diantara tag tersebut
menjadi tebal. Pemakaian tulisan :::A::: adalah karakter biasa yang ada di
keyboard, jika ingin berbeda tinggal cari karakter lain yang menurut sobat lebih
menarik.
Ada juga variasi lain agar tampak lebih menarik yaitu menambahkan bulatan.
contoh untuk arah vertikal :
<b><< A >></b>
<br/>
• <a href="http://sncepuspiritualsciencequantum.blogspot.com"
<br/>
• <a href="http://adry-fx.blogspot.com" target="_blank">Adryy-fx</a>
<br/><br/>
<b><< B >></b>
<br/>
• <a href="http://belati.blogspot.com" target="_blank">Belati</a>
<br/>
• <a href="http://benhardleroy.blogspot.com" target="_blank">Benhard
Journey</a>
<br/><br/>
<b><< C >></b>
<br/>
• <a href="http://melileagroup.blogspot.com"
target="_blank">Capunk</a>
<br/>
• <a href="http://catatanpojok.blogspot.com" target="_blank">Catatan
pojok</a>
<< A >>
• Abu Amin
• Adryy-fx
<< B >>
• Belati
• Benhard Journey
<< C >>
• Capunk
• Catatan pojok
Untuk arah horizontal :
<b><< A >></b>

• <a href="http://sncepuspiritualsciencequantum.blogspot.com"

• <a href="http://adry-fx.blogspot.com" target="_blank">Adryy-fx</a>

<b><< B >></b>

• <a href="http://belati.blogspot.com" target="_blank">Belati</a>

• <a href="http://benhardleroy.blogspot.com" target="_blank">Benhard
Journey</a>

<b><< C >></b>

• <a href="http://melileagroup.blogspot.com"
target="_blank">Capunk</a>

• <a href="http://catatanpojok.blogspot.com" target="_blank">Catatan
pojok</a>
<< A >> • Abu Amin • Adryy-fx << B >> • Belati • Benhard Journey <<
C >> • Capunk • Catatan pojok
Bagaimana lebih menarik bukan?
Jika sobat mempunyai icon yang berukuran kecil dan ingin di tambahkan di depan
link, ini bisa di lakukan dengan hanya mengganti kode &ampbull; diatas dengan
kode gambar yang sobat miliki. Sebagai contoh saya memiliki gambar dalam
bentuk bulatan dan mempunyai alamat gambar sebagai berikut :
http://i162.photobucket.com/albums/t253/rohman24/Changing_colors.gif
Untuk menampilkan gambar ini tentu dengan kode untuk menampilkan gambar,
yaitu :
<img
src="http://i162.photobucket.com/albums/t253/rohman24/Changing_colors.gif">
hasilnya akan seperti ini :
Jika melihat dari bentuknya, sepertinya terlalu besar maka saya akan mengakalinya
dengan menambahkan kode untuk lebar dan tinggi gambar, maka kodenya
misalkan jadi seperti ini :
<img
src="http://i162.photobucket.com/albums/t253/rohman24/Changing_colors.gif"
hasilnya akan seperti ini :
Nah, tugas sobat hanya mengganti kode &ampbull; diatas dengan kode ini :
misalkan :
<img
src="http://i162.photobucket.com/albums/t253/rohman24/Changing_colors.gif"
width="10" hight="10" border="0"> <a
href="http://sncepuspiritualsciencequantum.blogspot.com" target="_blank">Abu
Amin</a>
Abu Amin
Untuk membuat gambar serta cara upload sudah saya terangkan pada postingan
terdahulu, silahkan baca saja ya.
Ada juga pertanyaan dari mba Ati mengenai cara pembuatan link gambar yang arah
horizontal, jawaban saya, mba tinggal buat link untuk gambar dan menaruh kode
di antara gambar link tadi. misal saya punya alamat gambar butto seperti
ini :
http://i162.photobucket.com/albums/t253/rohman24/RubrikElektronik.gif
http://i162.photobucket.com/albums/t253/rohman24/FreeBlogTemplate.gif
Nah mba tinggal buat agar link gambar, bisa link ketulisan yang ada di blog mba
atau mau link ke blog lain juga bisa, tinggal menuliskan alamat URL yang du ju oleh
link tersebut, contoh jika saya ingin menghubungkan gambar button dengan blog
milik saya yang lain :
<a href="http://rubrik-elektronik.blogspot.com" target="_blank"><img

src="http://i162.photobucket.com/albums/t253/rohman24/RubrikElektronik.gif"
border="0"></a>

<a href="http://www.rohman24.co.nr" target="_blank"><img
src="http://i162.photobucket.com/albums/t253/rohman24/FreeBlogTemplate.gif"
border="0"></a>

jika ingin gambar buttonnya banyak, tinggal tambahkan saja dan jangan lupa
sisipkam kode agar ada jarak antara buttonnya.
Bagaimana sobat, sudah cape bacanya? pasti cape karena panjang banget, apalagi
saya yang waktu ngetik postingan ini ampe lima jam depan komputer dan lebih
sedihnya lagi kita belum sampe ke topik bahasan utama yakni memasukan kode
link-link yang telah saya contohkan diatas ke dalam blog.
Yoi...sobat!!! Sekarang tiba waktunya kita memasukan kode-kode link yang telah
kita buat kedalam blog. Dan tentunya seperti judul artikel diatas, langkah-langkah
berikut berlaku bagi yang memakai template baru alias new blogger template :
2. Klik menu Layout
5. Klik tombol TAMBAHKAN KE BLOG di bawah tulisan HTML/javaScript,

ingat jangan menggunakan yang untuk membuat daftar link
6. Beri judul link yang sobat kehendaki. contoh : link temanku :
7. Copy kode-kode link yang telah sobat buat lalu paste pada kotak yang
tersediaKlik tombol SIMPAN PERUBAHAN
8. Pindahkan elemen yang baru saja pada tempat yang sobat kehendaki
Klik tombol SIMPAN
9. Selesai.
Akhirnya selesai juga postingan ini. Mudah-mudahan penjelasan diatas

mudah untuk di mengerti.
Selamat mencoba !
Pasang Feed di Blog
Mengutip sebuah permintaan yang saya kutif dari shoutbox yang kira-kira seperti ini
:
"aku mau tiap ada artikel baru di blog ni aku bisa tahu diblog aku"
Permintaan tersebut melukiskan keinginan untuk selalu mengetahui apakah ada

artikel baru atau tidak di blog ini dengan tidak harus bercape ria bolak-balik
membuka browser. Bila ada pertanyaan apakah bisa kita memasang sesuatu di blog
milik sendiri agar mengetahui perkembangan atau update terbaru dari blog yang
kita senangi? jawabannya bisa, bahkan banyak cara yang bisa di tempuh.
Agar tidak terlalu memakan space, saya akan menerangkan hanya dengan satu
cara yaitu memakai RSS feed. Apa itu RSS? RSS singkatan dari Rich Site Summary
atau jika dalam bahasa indonesia adalah ringkasan dari isi sebuah situs (blog juga
termasuk di dalamnya). Tapi dalam postingan kali ini saya tidak akan menerangkan
secara gamblang tentang RSS feed tadi, bagi yang ingin tahu lebih jauh tentang ini
sobat bisa baca di wiki indonesia.
Dari mana kita mengetahui alamat RSS feed blog milik kita? biasanya untuk alamat
di blogger ditambah dengan --> atom.xml , jadi alamat feed untuk blog ini adalah :
http://kolom-tutorial.blogspot.com/atom.xml
Sekarang bagaimana cara memasang kode feed di blog milik kita? bagi sobat yang
menggunakan template baru alias new blogger template cara nya sangat mudah.
Silahkan ikuti langkah-langkah berikut ini :
2. Klik menu layout
5. Klik tombol TAMBAHKAN KE BLOG di bawah tulisan Feed

6. Tulis alamat ini pada kotak di samping tulisan URL feed --> http://kolom-
tutorial.blogspot.com/atom.xml
7. Klik tombol SIMPAN PERUBAHAN
8. Pindahkan elemen yang baru saja di buat pada tempat yang sobat kehendaki
9. Klik tombol SIMPAN
10.Klik tulisan Lihat Blog untuk melihat hasil penambahan elemen yang baru di
buat
11.Selesai
Untuk melihat contoh, judul postingan terbaru pada blog ini bisa muncul di blog
lain, silahkan klik di sini !
Ada satu lagi bagi sobat yang lebih mengutamakan penampilan, spring widget telah
membuat suatu panel yang sangat unik sehingga akan bisa di jadikan sebagai
aksesori blog. Contoh dari panelnya adalah seperti di bawah ini :
Bagaimana lebih menarik bukan di banding dengan tadi yang hanya menampilakan
judul artikel saja. Bila tertarik memasang ini silahkan ikuti langkah-langkahnya.

4. Copy kode berikut, lalu paste pada sidebar
Top of Form
<object
allowNetworking="all" allowScriptAccess="always"
allowFullScreen="true"
type="application/x-shockwave-flash" id=""
codebase="http://fpdownload.macromedia.com/pub/sho
ckwave/cabs/flash/swflash.cab#version=7,0,0,0"
width="180" height="318" align="middle"
data="http://downloads.thespringbox.com/web/wrapper
.php?file=RSS
Reader.sbw"><br>
<paramname="movie"
value="http://downloads.thespringbox.com/web/wrappe
r.php?file=RSS
Reader.sbw" /><paramname="flashvars"
value="param=http%3A%2F%
2Ffeeds.feedburner.com%2Fblogspot%
2Fblogtutorial&param_style_borderColor=000000
&param_style_brandUrl=&"
/><br>
<paramname="quality" value="high" /><param
name="wmode"
value="transparent" /><paramname="allowNetworking"
value="all"
/><paramname="allowScriptAccess" value="always" />
<param
name="allowFullScreen" value="true" /><param
name="bgColor"
value="0x000000" /><br>
<embedbgColor="0x000000" allowNetworking="all"
allowFullScreen="true" allowScriptAccess="always"
src="http://downloads.thespringbox.com/web/wrapper.
php?file=RSS
Reader.sbw"
flashvars="param=http%3A%2F%
quality="high" wmode="transparent" width="180"
height="318"
align="middle" type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashp
layer"
/></embed></object><br>
<div style="font:11px/12px
georgia;width:180px;margin-top:2px;"></div>
Bottom of Form
Sedikit clue, untuk bagian sidebar. jika template asli buatan blogger biasanya
seperti ini :

<div id="sidebar">
.......................
.......................
.......................
</div>

nah pasang kode tadi diantara kode diatas.
5. Klik tombol Pratinjau, lihat hasilnya. jika sudah OK klik tombol Simpan
Perubahan Template
6. Selesai.
Untuk yang template baru :
2. Klik menu layout
6. Copy kode berikut, lalu paste pada kotak yang ada :
Top of Form
<center>
<object
allowNetworking="all" allowScriptAccess="always"
allowFullScreen="true"
type="application/x-shockwave-flash" id=""
codebase="http://fpdownload.macromedia.com/pub/sho
ckwave/cabs/flash/swflash.cab#version=7,0,0,0"
width="180" height="318" align="middle"
data="http://downloads.thespringbox.com/web/wrapper
.php?file=RSS
Reader.sbw"><br>
<paramname="movie"
value="http://downloads.thespringbox.com/web/wrappe
r.php?file=RSS
Reader.sbw" /><paramname="flashvars"
value="param=http%3A%2F%
/><br>
<paramname="quality" value="high" /><param
name="wmode"
value="transparent" /><paramname="allowNetworking"
value="all"
/><paramname="allowScriptAccess" value="always" />
<param
name="allowFullScreen" value="true" /><param
name="bgColor"
value="0x000000" /><br>
<embedbgColor="0x000000" allowNetworking="all"
allowFullScreen="true" allowScriptAccess="always"
src="http://downloads.thespringbox.com/web/wrapper.
php?file=RSS
Reader.sbw"
flashvars="param=http%3A%2F%
quality="high" wmode="transparent" width="180"
height="318"
align="middle" type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashp
layer"
/></embed></object><br>
<div style="font:11px/12px
georgia;width:180px;margin-top:2px;"></div></center>
Bottom of Form
7. Klik tombol SIMPAN PERUBAHAN
8. Pindahkan elemen yang baru saja di buat pada tempat yang sobat kehendaki
9. Klik tombol SIMPAN
10.Klik tulisan Lihat Blog untuk melihat hasil penambahan elemen yang baru di
buat
11.Selesai.
Untuk contoh bisa di lihat di sini !
Ada satu hal penting yang saya lupa, sobat harus mengatur menu setting agar bisa
di menampilkan feed. Langkah-langkahnya yaitu :
1. Sig in
2. Klik menu layout (untuk template baru), atau klik menu Template (untuk
template klasik)
3. Klik menu Pengaturan
4. Klik menu Feed situs
5. Klik menu dropdown di samping tulisan Ijinkan Feed blog
6. Pilih yang Penuh
7. Klik tombol Simpan Setting
8. Selesai.
Bagaimana sobat? mudah-mudahan dengan ini sobat tidak perlu bolak-balik

karena setiap ada postingan terbaru akan langsung bisa di lihat di blog milik
sobat sendiri.
Selamat mencoba !!!
Pasang Banner di Header Blog

Beberapa hari yang lalu, sempat ada salah seorang sobat meninggalkan pesan
Offline pada YM milik saya yang isinya kira-kira seperti ini :
"Bagaimana caranya menyimpan banner pada header blog"
Sebuah keinginan yang saya anggap wajar bagi seorang pemilik blog, karena sudah
barang tentu merupakan suatu kebahagiaan tersendiri apabila banner yang sangat
kita sukai dapat di tempatkan pada blog kebanggan kita. Jika ada pertanyaan lain
"apakah kita bisa mengganti atau menambahkan banner sendiri kedalam blog?"
jawabannya adalah bisa, akan tetapi tentunya kita harus sedikit bercape ria
mengotak-atik kode template.
Lagi-lagi karena template terbagi dua yaitu template klasik dan template baru,
maka saya akan membagi dua bahasan tentang bagaimana caranya menambahkan
atau mengganti banner yang ada di header.
Sebelum menginjak kepada proses editting template, langkah awal tentunya sobat
harus mempunyai banner yang akan di pakai. Untuk membuat sebuah banner,
sobat bisa menggunakan berbagai program desain grafis yang sobat kuasai, apakah
itu photoshop, coreldraw, ataupun program-program yang lainnya yang sejenis
yang penting judulnya adalah program yang bisa membuat banner.
Karena template bentuknya ratusan atau bahkan mungkin ribuan, tentunya tulisan
ini tidak akan bisa mewakili untuk pemakaian template, akan tetapi mungkin akan
sedikit memberi gambaran bagaimana cara menambahkan atau merubah banner
yang ada di header. Sebagai proyek percontohan (kaya kerjaan saja ya pake proyek
segala), saya akan mengambil contoh template Minima yang di desain oleh
Douglas Bowman, dan template ini merupakan template asli blogger.
Untuk Template Klasik
Seperti yang saya sebutkan di awal bahwa langkah pertama yang dilakukan adalah
membuat banner, gambar banner terserah kepada sobat, mau gambar
pemandangan, laut, atau photo sobat sendiri juga boleh. Langkah kedua adalah
meng upload banner tersebut, bisa di upload ke blogger sendiri atau ke hosting lain.
Untuk cara upload gambar sudah saya terangkan di sini dan di sini. Sebagai contoh,
saya sudah upload banner di www.photbucket.com dan mempunyai alamat banner
seperti ini :
dan gambar bannernya seperti ini ( gambarnya dalam skala kecil):
Membuat Banner Bertaburan

Pernah melihat blog yang terdapat banner bertaburan di halamannya? ingin
mengetahui cara membuatnya? jika tertarik silahkan baca artikel di bawah ini
sampai selesai !. Untuk membuat banner bertaburan, yang akan saya gunakan
adalah memakai perintah marquee. Tentang marquee sudah saya bahas pada
postingan terdahulu dan kali ini akan saya bahas variasi lain dari perintah marquee
ini. Agar banner yang di gunakan lebih menarik untuk di lihat, maka sebaiknya kita
menggunakan banner yang berisifat animasi. Animasi ini bisa berupa putaran,
terbalik atau mungkin dalam bentuk terbang. Untuk membuat animasi, sobat bisa
menggunakan berbagai software pembuat animasi semisal Ulead cool 3D ataupun
program yang lainnya. Sedikit kabar gembira, bagi sobat yang belum mempunyai
software Ulead cool 3D sobat bisa mendowload secara gratis di blog miliknya bang
iwan yaitu di http://free7.blogspot.com. Bagi sobat yang sudah terbiasa dengan
program-program animasi, tentu tidak akan menemui masalah dalam hal membuat
banner animasi, akan tetapi bagi sobat yang sama seperti saya ini yakni masih
banyak bingungnya kalau membuat animasi maka ada jalan lain yakni kita bisa
mencari situs-situs penyedia animasi. Bagaimana cara mencarinya? ini hal yang
mudah, pada akhir artikel ini saya sediakan search engine dari google. Tugas sobat
hanya mengisi kotak isian dengan keyword yang di inginkan, misal : free
animation, animasi gratis, Free banner animation atau keyword lain yang
sekiranya bisa memunculkan berbagai situs penyedia animasi gratis, kemudian
setelah kotak isian di tulis silahkan klik tombol search maka nanti akan keluar
ratusan atau bahkan ribuan situs penyedia animasi, silahkan sobat cari sendiri
mana yang cocok. OK kita kembali ke.....topik bahasan tentunya. Sebagai contoh
saya telah mendapatkan sebuah file banner animasi, tugas selanjutnya adalah
mengupload file tersebut ke hosting penyimpan gambar. Ambil contoh, saya telah
mengupload banner animasi di google pages dan mempunyai alamat seperti ini :
http://amen24.googlepages.com/face5.gif Untuk membuat gambar ini bisa tampil
kodenya seperti ini : <img src="http://amen24.googlepages.com/face5.gif">
hasilnya seperti ini : Atau sobat bisa memperbesar atau memperkecil animasi
ini dengan mengatur tinggi serta lebar gambar, contoh di perbesar : <img
src="http://amen24.googlepages.com/face5.gif" width="100" height="100">
hasilnya akan seperti ini : contoh di perkecil : <img
src="http://amen24.googlepages.com/face5.gif" width="30" height="30"> hasilnya

akan seperti ini : Langkah selanjutnya adalah membuat variasi perintah
marquee, saya berikan contoh perintahnya seperti ini : <marquee behavior="scroll"

direction="down" style="position: absolute; right: 1100px; top: 52px; width: 100px;
height: 900px;" scrollamount="14"> <img
src="http://amen24.googlepages.com/face5.gif"> </marquee> Agar lebih faham,
saya bahas sedikit tentang fungsi-fungsi dari atribut yang saya berikan :
behavior="scroll" --> behavior atribut untuk mengatur perilaku gerakan. scroll
perilaku yang di pilih yaitu teks atau image bergerak berputar/berulang-ulang.
direction="down" --> direction atribut untuk mengatur arah gerakan teks/image.
down arah yang di pilih adalah ke bawah, sobat bisa merubah arah ini sesuai
keinginan, tinggal ganti dengan Up untuk keatas, Left untuk ke pinggir dan right
untuk ke kanan. style="position: absolute; right: 1100px; top: 52px; width: 100px;
height: 900px;" --> position: absolute; posisi yang di pilih adalah absolut atau
tersendiri. right: 1100px; posisi terletak sebesar 1100 pixel diukur dari sebelah
kanan layar. top: 52px; posisi juga terletak pada 52 pixel di ukur dari sebelah atas
layar. width: 100px; lebar untuk tempat gambar sebesar 100 pixel. height:
900px; tinggi untuk tempat gambar sebesar 900 pixel. scrollamount="14" -->
scrollamount atribut untuk mengatur kecepatan gerakan. 14 adalah kecepatan
yang dipilih, silahkan ganti nilainya, semakin kecil nilai maka gerakan semakin
lambat, semakin besar nilainya maka gerakannya semakin cepat. Contoh di atas
merupakan hanya untuk satu gambar animasi saja, biar lebih menarik dan supaya
gambarnya banyak bertebaran maka perintah yang di buat harus beberapa
perintah, akan tetapi posisinya harus di bedakan agar terlihat bertebaran. Dan ada
yang harus di ingat yaitu kita harus membuat posisi yang kira-kira tidak
mengganggu pembaca yakni tidak menutupi artikel yang kita posting. Contoh
perintahnya seperti ini : <marquee behavior="scroll" direction="down"
style="position: absolute; right: 1100px; top: 52px; width: 100px; height: 900px;"
scrollamount="14"> <img src="http://amen24.googlepages.com/face5.gif"
width="100" height="100"/> </marquee> <marquee behavior="scroll"
direction="down" style="position: absolute; left: 358px; top: 2px; width: 60px;
height: 450px;" scrollamount="5"> <img
src="http://amen24.googlepages.com/face5.gif" width="30" height="30" />
</marquee> <marquee behavior="scroll" direction="down" style="position:
absolute; right: 441px; top: 55px; width: 60px; height: 250px;" scrollamount="9">
<img src="http://amen24.googlepages.com/face5.gif" width="30" height="30" />
</marquee> <marquee behavior="scroll" direction="down" style="position:
absolute; right: 498px; top: 53px; width: 60px; height: 380px;" scrollamount="6">
<img src="http://amen24.googlepages.com/face5.gif" /> </marquee> <marquee
behavior="scroll" direction="down" style="position: absolute; right: 800px; top:
51px; width: 60px; height: 350px;" scrollamount="7"> <img
src="http://amen24.googlepages.com/face5.gif" /> </marquee> <marquee
src="http://amen24.googlepages.com/face5.gif" /> </marquee> Contoh gambar
animasi diatas adalah memakai gambar milik saya, silahkan sobat ganti dengan
gambar yang sobat sukai. Cara memasang kode-kode diatas, silahkan ikuti langkah
berikut ini : Untuk template klasik :
3. Klim menu Edit HTML
4. Copy seluruh kode HTML yang ada lalu paste pada notepad kemudian save,
ini sebagai backup data apabila kita melakukan kesalahan dalam proses
edtitting template
5. Simpan kode berikut antara kode <body> ........ </body> :
Top of Form
<br
/><br /><marquee behavior="scroll" direction="down"
style="position: absolute; right: 1100px; top: 52px; width:
100px;
height: 900px;" scrollamount="14"><br /><img
src="http://amen24.googlepages.com/face5.gif"
width="100"
height="100"/><br /></marquee><br /><br
/><marqueebehavior="scroll" direction="down"
style="position:
absolute; left: 358px; top: 2px; width: 60px; height:
450px;"
scrollamount="5"><br /><img
width="30" height="30"
/><br /></marquee><br /><br /><marquee
behavior="scroll" direction="down" style="position:
absolute; right:
441px; top: 55px; width: 60px; height: 250px;"
absolute; right:
src="http://amen24.googlepages.com/face5.gif" /><br
/></marquee><br /><br /><marquee
absolute; right:
absolute; right:
absolute; right:
absolute; right:
absolute; right:
absolute; right:
absolute; right:
/></marquee><br />
Bottom of Form
6. Klik tombol Pratinjau untuk melihat perubahan

7. Jika sudah OK, klik tombol Simpan Perubahan Template
8. Selesai.
2. Klik menu layout
6. Copy kode di bawah lalu paste pada kotak yg tersedia, jangan lupa ganti
alamat gambarnya dengan yang sobat miliki
Top of Form
<br
/><br /><marquee behavior="scroll" direction="down"
style="position: absolute; right: 1100px; top: 52px; width:
100px;
height: 900px;" scrollamount="14"><br /><img
width="100"
height="100"/><br /></marquee><br /><br
/><marqueebehavior="scroll" direction="down"
style="position:
absolute; left: 358px; top: 2px; width: 60px; height:
450px;"
absolute; right:
absolute; right:
absolute; right:
absolute; right:
absolute; right:
absolute; right:
absolute; right:
absolute; right:
absolute; right:
/></marquee><br />
Bottom of Form
7. Klik tulisan Lihat Blog untuk melihat hasilnya

8. Selesai.
Sebagai contoh saya sudah membuat blog dengan perintah ini, silahkan klik disini
untuk contoh yang arah ke bawah, dan klik di sini untuk contoh yang arah ke atas.
Jangan lupa sobat, untuk mencari situs penyedia animasi, silahkan gunakan search
engine di bawah biar saya dapet komisi dari google ya dan yang pasti sobat tidak
usah repot-repot buka browser baru bukan Selamat mencoba !
Tips Menghilangkan Border Image

Bagi sobat yang gemar memasang gambar ataupun emoticons pada postingan, sering kali
menghadapi sedikit ganjalan yaitu gambar yang di pasang mempunyai border/bingkai gambar
berbentuk kotak. nah bagi sobat yang ingin menghilangkan border ini, saya ada sedikit tips untuk
menghilangkannya.
Contoh gambar yang mempunyai border :
Atau seperti ini :
Bandingkan dengan yang ini :
Atau seperti ini :
Lebih asyik bukan jika gambar yang kita posting tidak mempunyai border/bingkai. Cara untuk
menghilangkan border adalah sobat harus membiasakan diri menambahkan kode border="0"
pada setiap gambar yang di pasang. Sebagai contoh saya mempunyai alamat gambar seperti ini :
http://amen24.googlepages.com/face5.gif
Untuk membuat gambar, bisakan menyisipkan kode border="0", contohnya :
<img src="http://amen24.googlepages.com/face5.gif" border="0">
Bagaimana jika sobat sudah menambahkan kode border="0", akan tetapi gambar masih tetap
mempunyai border/kotak. Nah untuk kejadian yang satu ini, maka style sheet css sobat ada yang
harus di modifikasi. Silahkan ikuti langkah-langkah berikut ini!
4. Copy seluruh kode HTML template sobat, lalu paste pada notepad, kemudian save untuk
backup apabila ada kesalahan editting
5. Cari kode berikut pada css sobat (ini contoh saja):
.post img { <-- perhatikan kode ini

padding:4px;
border:1px solid $bordercolor; <-- yang di rubah kode yg ini
}
tentunya setiap template berbeda-beda, akan tetapi biasanya selalu ada kode .post img
6. Rubah angka 1 (satu) menjadi angka 0 (nol), sehingga kodenya menjadi seperti ini :
.post img {
padding:4px;
border:0px solid $bordercolor;
}
7. klik tombol Simpan Perubahan Template
8. Selesai.
Untuk yang memakai template baru :
1. Sign in
2. Klik menu Layout

4. Klik tulisan Download Template Lengkap, silahkan save dulu template sobat untuk
backup data
5. Klik kotak kecil di samping tulisan Expand Template Widget
7. Cari kode berikut pada css sobat (ini contoh saja):
.post img { <-- perhatikan kode ini

padding:4px;
border:1px solid $bordercolor; <-- yang di rubah kode yg ini
}
tentunya setiap template berbeda-beda, akan tetapi biasanya selalu ada kode .post img
8. Rubah angka 1 (satu) menjadi angka 0 (nol), sehingga kodenya menjadi seperti ini :
.post img {
padding:4px;
}
9. Klik tombol SIMPAN TEMPLATE
10. Selesai.
Bagaimana sobat, mudah-mudahan expresi sobat lebih bebas karena sudah tidak di ganggu lagi
dengan adanya border.
Salam buat blogger semua.

Navigasi Dengan Css (2)
Lagi-lagi menanggapi keinginan mba Ati dalam hal membuat menu navigasi yang berbentuk
horizontal seperti yang terdapat pada header blog ini, kali ini saya akan mencoba menjawabnya
dan mudah-mudahan postingan kali ini dapat memenuhi rasa ketidakpuasan terhadap jawaban
saya pada postingan yang lalu. Menu navigasi yang akan saya buat adalah dengan menggunakan
css agar hasil yang di dapat bersifat flexible dan tidak kaku.
Untuk membuat menu navigasi dengan css, tentunya akan berbeda hasilnya tatkala menggunakan
template yang berbeda, akan tetapi agar saya bisa memberi sedikit gambaran maka template yang
saya jadikan contoh adalah template minima yang di desain oleh Douglas Bowman (template asli
blogger), klik tombol dibawah untuk melihat demo :
Bagaimana menarik bukan? jika tertarik silahkan sobat lanjut bacanya. Sekarang silahkan sobat
baca dulu seluruh artikel ini sampai tuntas, karena ada kode-kode tertentu yang harus di
sesuaikan, dan nanti pada akhir artikel saya akan menerangkan tentang kode-kode yang harus di
rubah.
Untuk membuat menu tersebut silahkan sobat ikuti langkah-langkah berikut ini.
Untuk template minima klasik :
1. Sig in di blogger
4. Copy seluruh kode template yang ada lalu paste pada notepad kemudian save. ini untuk
backup data bila terjadi kesalahan editting
5. Copy kode berikut lalu paste pada style sheet css sobat, atau bila bingung simpan saja di
atas kode </style>
/* Navigasi buat si juleha
----------------------------------------------- */
#juleha{
height:25px;
text-align: center;
}
#juleha a{
margin:0;
font-size:1.2em;
font-weight:bold;
letter-spacing:-1px;
background-color: #cccccc;
color: #000000;
padding-top:2px;
padding-bottom:2px;
padding-left:4px;
padding-right:4px;
}
#juleha a:hover{
background-color: #0326FC;
background-repeat: repeat-x;
color:#A7FC03;
padding-top:2px;
padding-bottom:2px;
padding-left:4px;
padding-right:4px;
}
6. Copy kode berikut lalu paste pada kode template seperti di bawah ini, yang berwarna
hitam adalah kode aslidan warna merah adalah kode yang harus di tambahkan :
<div id="header">
<h1 id="blog-title">
<ItemPage><a href="<$BlogURL$>"></ItemPage>
<$BlogTitle$>
<ItemPage></a></ItemPage>
</h1>
<id="description"><$BlogDescription$>
<div id="juleha">
<a href="#" target="_blank">Link 1</a>
</div>
</div>
7. Klik tombol Pratinjau untuk melihat hasil perubahan
9. Selesai.
Untuk template minima baru :
1. Sign in
2. Klik menu Layout
4. Klik tulisan Download Template Lengkap, silahkan save dulu template sobat untuk
backup data
7. Copy kode berikut lalu paste pada style sheet css sobat, atau bila bingung simpan saja di
atas kode ]]></b:skin>
/* Navigasi buat si juleha
----------------------------------------------- */
#juleha{
height:25px;
text-align: center;
}
#juleha a{
margin:0;
font-size:1.2em;
font-weight:bold;
color: #000000;
padding-top:2px;
padding-bottom:2px;
padding-left:4px;
padding-right:4px;
}
#juleha a:hover{
color:#A7FC03;
padding-top:2px;
padding-bottom:2px;
padding-left:4px;
padding-right:4px;
}
8. Copy kode berikut lalu paste pada kode template seperti di bawah ini, yang berwarna
hitam adalah kode asli dan warna merah adalah kode yang harus di tambahkan :
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
<div id="juleha">
</div> </div>
</div>
</b:if>
10. Bila sudah OK, klik tombol SIMPAN TEMPLATE
11. Selesai.
Agar sobat lebih faham, saya akan sedikit memberi keterangan tentang kode-kode yang saya
berikan, silahkan simak :
juleha{
height:25px;
text-align: center;
}
 #juleha hanyalah penamaan saja, bisa di ganti dengan apa saja yang penting nyambung
dengan kode yang di bawahnya, mau ibro, samson, mau tukul juga boleh kalo sobat
penggemarnya.
 height:25px; kode ini adalah sebagai pengatur tingginya tombol navigasi, yang saya pakai
adalah sebesar 25 pixel, boleh di ganti nilainya dan sesuaikan dengan keinginan sobat.
 text-align: center; kode untuk memposisikan tombol-tombol berada di tengah-tengah, jika

ingin mepet di sebelah kiri ganti kata Center dengan kata left, jika ingin mepet kanan, ganti
dengan right.
#juleha a{
margin:0;
font-size:1.2em;
font-weight:bold;
color: #000000;
padding-top:2px;
padding-bottom:2px;
padding-left:4px;
padding-right:4px;
}
 #juleha a penamaan agar nyambung dengan kode diatasnya, dan kode-kode di yang di tulis
bawahnya adalah yang akan muncul sebelum di sorot oleh mouse pengunjung blog.
 font-size:1.2em; ukuran huruf yang di pake sebesar 1.2 . jika ingin lebih besar atau lebih
kecil, silahkan ganti saja nilainya.
 font-weight:bold; agar link yang di tulis hurufnya di cetak tebal, jika tidak mau ganti saja
tulisan bold dengan tulisan normal.
 background-color: #cccccc; kode untuk membuat warna latar belakang tombol. kode warna
#cccccc adalah kode untuk abu-abu, silahkan sobat ganti dengan warna yang sobat sukai.
 color: #000000; kode untuk warna huruf link, #000000 adalah kode warna hitam, silahkan
ganti dengan warna yang sobat sukai.
#juleha a:hover{
color:#A7FC03;
padding-top:2px;
padding-bottom:2px;
padding-left:4px;
padding-right:4px;
 #juleha a:hover adalah kode yang di harapkan ketika mouse menyorot pada kode tombol
yang di definisakan oleh kode-kode yang ada di kode #juleha a.
 background-color: #0326FC; kode untuk membuat warna latar belakang tombol ketika
mouse menyorot. kode warna #0326FC adalah kode untuk biru, silahkan sobat ganti dengan
warna yang sobat sukai.
 color:#A7FC03; kode untuk warna huruf link ketika mouse menyorot, #A7FC03 adalah
kode warna hijau terang, silahkan ganti dengan warna yang sobat sukai.
<div id="juleha">
</div>
 <div id="juleha"> kode pembuka juleha. Apa-apa yang di simpan di bawah kode ini,
mengacu kepada apa yang di definisikan oleh kode juleha.
 <a href="#" target="_blank">Link 1</a> kode untuk membuat link.
 href="#" ganti tanda pagar (#) dengan URL atau link yang ingin sobat tuliskan. contoh : jika
saya ingin membuat link ke blog ini, maka tanda pagar tadi saya ganti dengan http://kolom-
tutorial.blogspot.com
 target"_blank" adalah kode untuk memunculkan jendela baru ketika link di klik oleh
pengunjung, bila tidak ingin ada jendela baru, maka hilangkan kode ini.
 Link 1 ganti tulisan ini dengan tulisan link yang sobat inginkan. contoh : untuk menuliskan
blog ini saya ganti dengan kata Kolom Tutorial
jadi kira-kira link yang tadi akan menjadi seperi ini :
<a href="http://kolom-tutorial.blogspot.com" target="_blank">Kolom Tutorial</a>
 </div> adalah kode penutup buat kode si juleha.
Contoh link yang saya berikan diatas adalah sebanyak lima buah link, ini bisa sobat kurangi atau
bisa juga di tambah, akan tetapi jika space yang tersedia penuh maka tombol akan secara
otomatis berpindah ke bawah, oleh sebab itu sesuaikanlah dengan space yang ada.
Bagaimana sobat, bingung tidak? mudah-mudahan dapat di mengerti.
Mengatur Perataan Posting Artikel

Sudah dua kali pertanyaan ini muncul pada shoutbox, salah satunya seperti ini :
"mas,gimana cara bikin rata kanan agar postingnya jadi rapi .... thx"
Sebenarnya tentang cara posting artikel sudah saya bahas pada postingan
terdahulu, jika mau iseng coba baca di sini, akan tetapi biar lebih faham, sengaja
saya posting lagi agar lebih jelas.
Untuk membuat perataan (align), baik rata kiri, kanan, kiri-kanan, atau mau tengah-
tengah semuanya, bisa dengan dua cara tergantung dari kebiasaan sobat saat
posting artikel, apakah biasa pakai menu Compose atau Edit HTML. Oleh karena
itu akan saya 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 hurup yang di gunakan
--> Untuk merubah ukuran hurup (heading)
--> Untuk Menebalkan hurup
--> Untuk memiringkan hurup
--> Untuk merubah warna hurup
--> 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)
--> Untuk membuat artikel dalam kode HTML
--> Untuk membuat artikel dalam mode Compose (biasa)
--> Untuk me review (melihat) artikel
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 sobat mau pake, kelar deh. Selanjutnya ya tinggal
publish, mudah bukan?
Akan tetapi bagi sobat 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 saya ajarkan di blog ini adalah dengan memakai kode
<div class="fullpost"> yang relatif lebih aman.
Untuk menu Edit HTML
Bagi sobat 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">
</div>
Rata kiri-kanan :
<div align="justify">
</div>
Supaya tengah semua :
<div align="center">
</div>
Agar hasilnya kelihatan, saya 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
sobat semua, saya 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 sobat untuk hal-hal yang baik,Terima kasih.
</div>

Untuk yang rata kanan :
<div align="right">
</div>
Untuk yang rata kiri-kanan :
<div align="justify">
</div>
Untuk yang tengah semua :
<div align="center">
</div>
Untuk yang bullet & numbering, ini bisa juga dilakukan :
contohnya seperti ini :
Bullet saja :
<li>Sig in di blogger dengan id sobat </li>

<br/>
<li>Klik menu layout </li>
<br/>
<li>Klik menu Edit HTML </li>
Hasilnya seperti ini :
 Sig in di blogger dengan id sobat

 Klik menu layout
 Klik menu Edit HTML
Bullet yang menjorok ke tengah :
<ul>
<br/>
<br/>
</ul>

• Sig in di blogger dengan id sobat
• Klik menu layout
Yang memakai nomor :
<ol>
<br/>
<br/>
</ol>
2. Klik menu layout
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>
hasilnya seperti ini :

ini contoh merah
atau bisa juga seperti ini :
<span style="color:#FD0303">
ini contoh merah
</span>
Hasilnya tetap sama :
ini contoh merah
untuk mengetahui kode warna sangat gampang, sobat bisa menggunakan bantuan
program photosop, sobat 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.
Saya kira cukup sekian dulu, kalau kepanjangan bosen bacanya kan ?
Selamat ngeblog buat semuanya !
Tips Mengganti Background Blog

Beberapa hari yang lalu, sobat Uel menanyakan perihal bagaimana caranya untuk
mengganti background blog, dan tentunya saya akan coba membahasnya. Menurut
saya, ada dua kemungkinan mengganti background yaitu yang pertama adalah
mengganti hanya warna background (latar belakang) saja, yang kedua adalah
mengganti background blog dengan menggunakan gambar atau image.
Ada satu hal yang saya anggap penting apabila sobat berniat mengganti
background (latar belakang) yaitu gantilah background dengan warna atau image
yang sekiranya tidak membuat tulisan-tulisan kita menjadi susah untuk di baca. Jika
tulisan yang tersedia berwarna gelap, maka pilihlah warna atau image yang terang,
akan tetapi sebaliknya apabila tulisan yang ada berwarna terang, maka sebaiknya
warna atau image background berwarna gelap. Tulisan yang susah untuk di baca
oleh pengunjung, tentunya akan membuat pengunjung tersebut malas untuk
membaca artikel-artikel yang kita tulis, dan tentunya percuma saja kita
memposting artikel jika tidak ada yang mau untuk membacanya.OK, biar tidak
menyita halaman langsung saja pada topik utama. Karena kode template sangat
bervariasi, yang akan saya jadikan contoh adalah template asli blogger yaitu
template minima.
 Mengganti Warna Background
1. Sign in
4. Copy seluruh kede Template, paste pada notepad lalu save untuk backup
data
5. Rubahlah kode warna asli template dengan kode warna yang sobat sukai
(yang warna merah adalah kode yang harus di rubah) :
body {
background:#fff;
margin:0;
padding:40px 20px;
font:x-small Georgia,Serif;
text-align:center;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
}
Misalkan jika ingin menjadi warna abu-abu terang, kodenya jadi seperti ini :
body {
background:#E7E3E3;
margin:0;
padding:40px 20px;
text-align:center;
color:#333;
}
8. Selesai.
Jika sobat kebingungan tentang kode warna, sobat bisa menggunakan bantuan
program photoshop, kapan-kapan akan saya posting khusus tentang bagaimana
cara mengetahui kode warna.
1. sign in
2. Klik menu Layout
3. Klik menu Fon dan Warna
4. Pada gambar teks area sebelah kiri, pilih yang Warna latar Belakang
Halaman (biasanya yg pertama sih langsung ini, jadi tidak usah di pilih lagi)
5. Klik warna yang sobat sukai pada gambar warna-warna yang di tampilkan,
lalu lihat perubahannya pada gambar di sebelah bawah
6. Jika merasa sudah cocok, klik tombol SIMPAN PERUBAHAN
7. Selesai.
Mudah bukan?
 Mengganti Background Dengan Image
Hal yang pertama tentu saja sobat harus mempunyai file image. Image ini bisa
berbentuk imaage biasa, photo, bahkan animasi pun bisa. hal yang kedua adalah
menguploadnya ke situs untuk menyimpan gambar, saya anggap sobat sudah bisa
melakukannya karena sudah saya bahas pada postingan terdahulu, atau masih
bingung? kalau iya, coba baca kembali di sini !
Untuk ukuran gambar, sobat tidak usah membuatnya dalam bentuk yang sangat
besar, karena walaupun ukuran asli dari image (gambar) adalah kecil, nanti akan di
tampilkan dalam jumlah yang sangat banyak hingga memenuhi layar monitor,
contoh saya sudah menguload sebuah gambar dengan ukuran yang kecil saja,
gambarnya seperti ini (ukuran gambar dalam ukuran aslinya) :
alamat gambarnya adalah
http://amen24.googlepages.com/pattern_096.gif
gambarnya seperti ini :
gambarnya sangat kecil bukan? tapi gambar tersebut akan tampil memenuhi layar
karena akan di tampilkan dalam jumlah yang sangat banyak.
Untuk cara instalasinya, silahkan ikuti langkah-langkah berikut !
1. Sign in
4. Copy seluruh kede Template, paste pada notepad lalu save untuk backup
data
5. Tambahkan kode berikut pada style sheet css sobat (yang warna merah
adalah kode yang harus di tambahkan) :
body {
background:#fff url('http://amen24.googlepages.com/pattern_096.gif');
margin:0;
padding:40px 20px;
text-align:center;
color:#333;
}
8. Selesai.
Kode warna background sengaja tidak saya hilangkan, ini di maksudkan agar
apabila background image yang kita pakai gagal di loading oleh komputer
pengunjung blog, maka yang bekerja duluan warna background.
1. Sign in
2. Klik menu Layout
4. Klik tulisan Download Template Lengkap, silahkan save dulu template

sobat untuk backup data

7. Tambahkan kode berikut pada style sheet css sobat (yang warna merah
adalah kode yang harus di tambahkan) :
body {
background:$bgcolor url('http://amen24.googlepages.com/pattern_096.gif');
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
text-align: center;
}
9. Bila sudah OK, klik tombol SIMPAN TEMPLATE
10.Selesai.
Saya rasa ini sangat mudah dilakukan, karena tidak banyak kode yang harus di
tambahkan, Untuk melihat contoh blog yang sudah saya pasang background
dengan gambar yang saya contohkan di atas, silahkan sobat klik di sini !
Eh lupa, bagi sobat yang malas membuat gambar, sobat bisa mendownload
berbagai gambar pattren di sini.
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 :
<img src="URL image">
Sehingga kodenya akan jadi seperti ini :
<img src="http://i162.photobucket.com/albums/t253/rohman24/kupu2.gif">
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 :
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 :
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 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 :
</img>
Sehingga kode image jadi bertambah menjadi :
Untuk memasukan kode gambar yang sudah di tambahi tag penutup tadi, silahkan
ikuti langkah berikut :
2. Klik menu Layout

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
8. Cari kode berikut pada template sobat :
<b:else/>
9. Sisipkan kode gambar yang kita miliki diantara kode :
<a expr:href='data:post.url'> dan kode <data:post.title/></a>

<b:else/>
Sehingga bila di satukan kodenya menjadi :
<a expr:href='data:post.url'> <img

src="http://i162.photobucket.com/albums/t253/rohman24/kupu2.gif"
  <data:post.title/></a>
<b:else/>
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 !
Anchor Link / Link Satu Halaman

Lagi-lagi saya tertarik untuk membahas tentang cara membuat link. Yo'i, karena
tercatat tiga artikel yang sudah di posting tentang bagaimana cara membuat tautan
atau link, dan yang sekarang merupakan artikel yang keempat. Akan tetapi jangan
dulu mengira bahwa posting kali ini akan sama dengan postingan terdahulu, sebab
kali ini yang akan di bahas adalah cara untuk membuat link dalam bentuk Anchor.
Apa itu Anchor Link ?
Anchor link biasa di sebut juga dengan link dalam satu halaman, berbeda dengan
hyperlink pada umumnya yang biasa di gunakan untuk menghubungkan suatu
tulisan dengan tulisan lain yang berada pada halaman yang berbeda atau blog yang
berbeda, anchor link ini lebih banyak di gunakan untuk halaman yang sama. Masih
bingung? memang saya juga sama bingungnya kalau membaca sekilas tentang
pengertian tadi, agar tidak sama-sama bingung akan saya beri contoh yang nyata.
Pada bagian paling bawah blog ini, ada tulisan berupa link yang tertera :
->> Kembali lagi ke atas <<-
Nah apabila sobat meng klik link tulisan tersebut maka secara otomatis yang akan
tampil pada layar monitor sobat adalah halaman yang paling atas dari blog ini, tidak
percaya? silahkan buktikan ! Kelebihan anchor link dengan link biasa adalah link
ini tidak memerlukan loading ulang untuk memanggil obyek yang telah di tandai
sebagai anchor.Contohnya seperti link yang berada paling bawah blog ini, jika sobat
mengkliknya maka tidak memerlukan waktu lebih dari satu detik halaman atas dari
blog ini akan di tampilkan.
Bagaimana cara membuat anchor link?
Prinsip dasarnya adalah kita menandai terlebih dahulu suatu objek, lalu pada
bagian yang lain kita buat link untuk memanggilnya. Kode dasarnya seperti ini :
<a name="NamaAnchor"> .... </a> <-- objek anchor
<a href="#NamaAnchor"> .... </a> <-- link pemanggil anchor
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 :
<a name="AtasBlog"></a> <-- objek anchor yang tidak ingin menampilkan

tulisan.
<a name="AtasBlog">Blog bagian atas</a> <-- objek anchor yang ingin

menampilkan tulisan.
Berbeda dengan objek dari anchor, link pemanggil anchor haruslah di beri tulisan
untuk bisa di klik oleh pengunjung, contoh :
<a href="#AtasBlog">Kembali ke atas</a> <-- link pemanggil anchor harus di beri

tulisan.
Tertarik ingin membuatnya, silahkan ikuti langkah-langkah berikut :
4. Copy seluruh kode template sobat, 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>
9. Selesai.
Penambahan kode <center> </center> di maksudkan agar tulisan link berada pada
posisi tengah.
2. Klik menu Layout


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>
10.Jika sudah OK, klik tombol SIMPAN TEMPLATE
11.Selesai.
Satu lagi yang menarik dari fungsi kode ini, yaitu buat para sobat 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 saya telah membuat beberapa anchor link pada setiap
pharagrap, kode anchor link yang saya sisipkan seperti ini :
<a name="satu"></a> --> pharagrap pertama
<a name="dua"></a> --> pharagrap kedua
<a name="tiga"></a> --> pharagrap ketiga

Mau membuktikan? Ok, coba deh klik masing-masing link berikut :
Kembali ke pharagrap Pertama !
Kembali ke pharagrap Kedua !
Kembali ke pharagrap Ketiga !
mau lihat contoh blog yang memakai kode ini juga, silahkan klik Di sini !
Menarik bukan? Selamat mencoba deh !
Photo Profile Berbingkai

Sobat Edelweis rupanya berkeinginan agar photo yang terpampang di
profilemenjadi ada figura nya supaya tampak lebih sedap di pandang mata, Sebuah
keinginanyang wajar kalau menurut saya. Yups..untuk itu akan saya bahas sedikit
trik agar photo tersebut menjadi ada figuranya.
Agar photo frofile menjadi berbingkai atau berfigura, langkahnya sangat sederhana
sekali,yaitu sobat hanya merubah nilai border pada stylee sheet css pada bagian
untuk photo frofile, contoh kode photo frofile untuk template lama seperti ini :
.profile-img img {
float:left;
padding:4px;
border:1px solid #ddd;
margin:0 8px 3px 0;
}
untuk template baru seperti ini :
.profile-img {
float: left;
margin: 0 5px 5px 0;
padding: 4px;
border: 1px solid $bordercolor; }
Tugas sobat hanya merubah nilai bordernya saja dengan nilai yang lebih besar
tentunya, biar lebih jelas, sedikit saya ulas tentang kode-kode diatas :
float:left; --> artinya photo akan di simpan di sebelah kiri pada tulisan frofile.
padding:4px; --> padding disini maksudnya adalah jarak antara photo dengan
figura (border) sebesar 4 pixel, jika sobat tidak menginginkan ada jarak antara
photo dengan bingkai, maka tinggal ganti nilainya dengan 0px (nol).
border:1px solid #ddd; --> nah ini yang menjadi bingkai photonya, nilai figura
adalah sebesar 1 pixel, jika ingin figuranya tampak lebih lebar, ya tinggal ganti nilai
1px dengan nilai yang lebih besar, contoh 6px, 8px atau yang lainnya. kode #ddd
--> adalah kode warna untuk abu-abu, silahkan ganti dengan kode warna lainnya
jika tidak cocok.
Masih bingung cara merubahnya? silahkan ikuti langkah-langkah berikut!
1. Sig in di blogger
4. Copy seluruh kode template yang ada lalu paste pada notepad kemudian
save. ini untuk backup data bila terjadi kesalahan editting
5. Cari kode yang mirip dengan kode di bawah ini :
.profile-img img {
float:left;
padding:4px;
margin:0 8px 3px 0;
}
6. Ganti nilai border dengan nilai yang lebih besar, contoh 8px, sehingga
kodenya akan seperti ini :
.profile-img img {
float:left;
padding:4px;
margin:0 8px 3px 0;
}
7. Klik tombol Pratinjau untuk melihat hasil perubahan
9. Selesai.
1. Sign in
2. Klik menu Layout

7. Cari kode yang mirip dengan kode di bawah ini :

.profile-img {
float: left;
margin: 0 5px 5px 0;
padding: 4px;
border: 1px solid $bordercolor;
}
8. Ganti nilai border dengan nilai yang lebih besar, contoh 8px, sehingga
kodenya akan seperti ini :
.profile-img img {
float:left;
padding:4px;
margin:0 8px 3px 0;
}
10.Bila sudah OK, klik tombol SIMPAN TEMPLATE
11.Selesai.
Sebagai catatan, untuk melihat efek figura berfungsi, tentunya sobat harus terlebih
dahulu memasang photo profile ( ya iya rek, kalo ga ada photonya, opo yang mau
di buatin bingkai tho).
Jika penasasaran ingin melihat photo ganteng dengan figura yang antik, silahkan
klik di sini !
Selamat mencoba deh !

Cara Pasang Musik Pada Blog

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Cara Pasang Musik Pada Blog

Загружено:

Авторское право:

Доступные форматы

Cara Pasang Musik Pada Blog

1. Silahkan kunjungi www.song2play.com

The Eagles - Hotel California

Song: White Lion - When the children cry

Untuk langkah-langkahnya, silahkan ikuti seperti di bawah ini :

1. Silahkan buka situs www.tunefeed.com

4. Klik tombol yang bertuliskan Add Music or Photos

5. Masukan file foto atau pun lagu yang sobat miliki

6. Klik tombol upload

10. silahkan buka email dari www.tunefeed.com bila sudah sampai

12. Klik tulisan Share This Tunefeed

17. Silahkan close window browser sobat

Buat Logo & Image Button

1. Silahkan buka alamat http://cooltext.com

Untuk proses upload di photobucket.com, silahkan ikuti langkah-langkah berikut :

1. Silahkan buka alamat http://www.photobucket.com,

Maka contoh hasilnya akan seperti ini :

Ok sobat, selamat menikmati hasil karyanya

pasanglah kode ini di atas kode </head> :

kode --> http://amen24.googlepages.com/Readmore.js berarti java script ini di simpan pada

<script type='text/javascript' src='http://juned.googlepages.com/Readmore.js'

Kode ini di simpan di atas kode </head> :

<link rel="StyleSheet" href="dtree.css" type="text/css" />

Kode di bawah ini di simpan di bagian sidebar :

Kode ini di simpan di atas kode </head> :

<link rel="StyleSheet" href="http://amen24.googlepages.com/dtree.css"

Kode di bawah ini di simpan di bagian sidebar :

d.add(1,0,'Free template & navigation')

d.add(5,1,'Free css menu navigation');

d.add(4,0,'Software super murah disini!','http://www.obralplus.com/?

Untuk melihat hasilnya, silahkan klik dulu di sini !

Jika di jabarkan denga isi menu, seperti ini :

d.add(10,3,'isi ke 1','isi ke 2','isi ke 3','isi ke 4','isi ke 5''isi ke 6');

isi ke 1 = adalah tulisan yang akan muncul terlihat langsung

 Untuk template Klasik

2. Klik menu Template

3. Klik menu Edit HTML

5. Simpan kode berikut di bawah kode <title><$BlogPageTitle$></title> :

<link rel="StyleSheet" href="http://amen24.googlepages.com/dtree.css"

d.add(1,0,'Free template & navigation')

d.add(5,1,'Free css menu navigation');

d.add(4,0,'Software super murah disini!','http://www.obralplus.com/?

7. Klik tombol Simpan Perubahan Template

 Untuk Template Baru

2. Klik menu Layout

3. Klik menu Edit HTML

5. Copy paste kode berikut di atas kode </head>

6. Klik tombol Simpan Template

7. Klik menu Elemen Halaman yang ada di sebelah atas monitor

8. Klik tulisan Tambahkan sebuah Elemen Halaman

9. Klik tombol TAMBAHKAN KE BLOG di bawah tulisan HTML/JavaScript

d.add(1,0,'Free template & navigation')

d.add(5,1,'Free css menu navigation');

d.add(4,0,'Software super murah disini!','http://www.obralplus.com/?

11. Klik tombol Simpan

13. Klik tombol Simpan yang berada di sebelah atas

14. Selesai. Silahkan lihat hasilnya

Kita langsung ke topik bahasan aja ya biar ga bosan.

Elemen dasar HTML

Ada beberapa elemen dasar HTML yaitu :

Elemen Blok Level

<h1>Ini heading 1</h1>

Hasilnya akan seperti ini :

<font size="1">Ini font size 1</font>