Template baru VS Template Klasik

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



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



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

Template baru :

1. Pada menu dashboard (menu yang dijumpai pada saat kita baru login) akan terlihat menu seperti ini :
   
   
   
   Manage : Posts, Settings, Layout





2. Jika kita klik menu Layout, akan ada menu seperti ini :
   
   
   
   Page Elements | Fonts and Colors | Edit HTML | Pick New Template





3. Jika kita klik menu Edit HTML maka akan muncul beberapa ciri khas, yaitu :
   
   
   
   Tulisan --> download Full Template
   
   
   Tombol bertuliskan --> Browse..., Upload
   
   
   Ada kotak kecil di samping tulisan Expand Widget Templates
   
   
   Tombol bertuliskan ---> CLEAR EDITS, PREVIEW, SAVE TEMPLATE
   
   
   Dibagian bawah terdapat tulisan :
   
   
   
   •  Revert to Classic Template
   
   
   •  View Classic Template

Itu tadi sedikit ciri apabila kita memakai template baru.




Apabila memakai template klasik, cirinya adalah :

1. Pada menu dashboard (menu yang dijumpai pada saat kita baru login) akan terlihat menu seperti ini :
   
   
   
   Manage : Posts, Settings, Template





2. Jika kita klik menu Template, akan ada menu seperti ini :
   
   
   
   Edit HTML | Pick New | customize Design | Adsense





3. Jika klik menu Edit HTML akan muncul beberapa ciri :
   
   
   
   terdapat tulisan --> Change the Blogger Navbar
   
   
   
   Tombol bertuliskan ---> Save Template Changes, Preview, Clear
   

Itu tadi beberapa ciri jika kita memakai template klasik.




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



Apa kelebihan atau kekurangan dari kedua template tersebut?



Template baru

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





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





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

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



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





Sekarang apa kelebihan dari template klasik :

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

Kekurangan :

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





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

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




Cara Migrasi Template



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



Dari Template baru ke template klasik :

• Sign in di blogger dengan id sobat






• Klik menu Layout





• Klik menu Edit HTML





• Klik tulisan yang ada di bagian bawah layar yaitu : Revert to Classic Template
  
  Bila muncul kotak dialog, klik OK aja
  
  
  
  
• Selesai, sobat memasuki dunia baru yaitu template klasik.

Dari template klasik ke template baru :

• Sign in di blogger dengan id sobat






• Klik menu Template





• Klik menu Customize Design





• Klik tombol bertuliskan UPGRADE YOUR TEMPLATE





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





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

Cara mengganti Template



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

Ganti template dengan template buatan blogger

Untuk template Klasik, ikuti langkah-langkah berikut :

1. Sign in di blogger dengan id sobat





2. Klik menu Template





3. Klik menu Pick New





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





5. Selesai. Blog sobat sudah punya wajah baru.

Untuk template baru, ikuti langkah-langkah berikut :

1. Sign in di blogger dengan id sobat





2. Klik menu Layout





3. Klik menu Pick New Template





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





5. Selesai.Blog sobat sudah mempunyai wajah baru

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

Ganti template dengan template bukan buatan blogger

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

Template baru

1. Sign in di blogger dengan id sobat





2. Klik menu Layout





3. Klik menu page Elements





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





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





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





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





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





9. Klik Tombol Upload





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





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





12. Selesai. Blog sobat sudah mempunyai wajah baru.

Template Klasik

1. Sign in di blogger dengan id sobat





2. Klik menu Template





3. Klik menu Edit HTML





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





5. Delete semua data template yang lama





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





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





8. Selesai. blog sobat sudah mempunyai wajah baru.

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



Selamat mencari dan menemukan template yang sobat suka.

Menu Navigasi dengan CSS

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



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

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

1. Tambahkan kode berikut sesudah kode <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 :






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



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



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




Tambahkan kode berikut sesudah kode <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;

padding:3px 4px 3px 8px;

margin:7px 10px 7px 0;

}



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

text-decoration:none;

}


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


<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 !

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.

Pasang Icon Yahoo ! Messenger

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




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



Untuk menampilkan icon status online yahoo ! messenger, kita bisa memilih sebanyak 5 pilihan, yakni style id 1, style id 2, style id 3, style id 4, serta style id 5, Apa perbedaan dari style id ini? perbedaannya adalah ukuran dari icon itu sendiri, untuk melihat perbedaan style id, silahkan sobat perhatikan gambar berikut :






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
















masing-masing gambar mempunyai URL adddress sendiri yaitu :




http://opi.yahoo.com/online?u=YahooID&m=g&t=1
Untuk Style ID 1



http://opi.yahoo.com/online?u=YahooID&m=g&t=2
Untuk Style ID 2



http://opi.yahoo.com/online?u=YahooID&m=g&t=3
Untuk Style ID 3



http://opi.yahoo.com/online?u=YahooID&m=g&t=4
Untuk Style ID 4



http://opi.yahoo.com/online?u=YahooID&m=g&t=5
Untuk Style ID 5





itu tadi adalah URL address masing-masing Style ID, maka agar tampil menjadi gambar, kita harus menambah kode yaitu :




<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



<img src="http://opi.yahoo.com/online?u=YahooID&m=g&t=2" border="0">
Untuk Style ID 2



<img src="http://opi.yahoo.com/online?u=YahooID&m=g&t=3" border="0">
Untuk Style ID 3



<img src="http://opi.yahoo.com/online?u=YahooID&m=g&t=4" border="0">
Untuk Style ID 4



<img src="http://opi.yahoo.com/online?u=YahooID&m=g&t=5" border="0">
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



Kodenya sebagai berikut :




<a href="ymsgr:sendIM?YOURID&m=YOUR+MESSAGE">Kirim IM</a>




Sehingga untuk kode lengkapnya jadi seperti ini :




<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



Kodenya sebagai berikut :




<a href="ymsgr:addfriend?YOURID">Masukan ke daftar teman sobat</a>




Sehingga untuk kode lengkapnya jadi seperti ini :




<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 !

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




2. Klik menu Template




3. Klik menu Edit HTML




4. Copy 'n paste seluruh kode HTML ke dalam notepad, ini dimaksudkan untuk mengurangi resiko apabila terjadi kesalahan pada saat kita melakukan editting kode template




5. Cari kode berikut pada kode HTML sobat :




<$BlogItemTitle$>



cara yang mudah untuk menemukan kode tersebut adalah : klik menu Edit yang berada bar menu browser lalu klik Find
kemudian tuliskan kode diatas tadi lalu klik tombol Find, maka secara otomatis kita akan langsung di bawa ke tulisan kode tadi. Nah kode <$BlogItemTitle$> adalah merupakan kode untuk menampilkan judul postingan, maka kita harus menyimpan kode image yang kita miliki di dekatnya, bisa sebelum atau sesudahnya tergantung dari keinginan kita. Tentunya bila di simpan sebelum kode judul posting maka image pun akan muncul sebelum judul posting, jika di simpan sesudah kode judul posting sudah barang tentu image pun akan muncul sesudah tulisan judul. Saya ambil contoh kode image di simpan sebelum tulisan judul :




<img src="http://i162.photobucket.com/albums/t253/rohman24/kupu2.gif" width="45" hight="45" border="0">&nbsp;&nbsp;<$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 :




<img src="http://i162.photobucket.com/albums/t253/rohman24/kupu2.gif" width="45" hight="45" border="0">




kode image tersebut tag nya harus ditutup dengan tag penutup :




</img>




Sehingga kode image jadi bertambah menjadi :




<img src="http://i162.photobucket.com/albums/t253/rohman24/kupu2.gif" width="45" hight="45" border="0"></img>





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

1. Sign in ke blogger dengan id sobat




2. Klik menu Layout




3. Klik menu Edit HTML




4. Klik tulisan Download Full Template




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




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




7. Tunggu beberapa saat sampai proses selesai




8. Cari kode berikut pada template sobat :







<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" width="45" hight="45" border="0"></img> &nbsp;&nbsp;<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 !

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 :







User Online



free Blog Template



Authorize service



Blog D'Tree











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" >



<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>



</td>



</tr>



</table>






Maka hasilnya akan seperti di bawah ini :

User Online free Blog Template Authorize service Blog D'Tree

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 :

- Blogroll -

Rubrik elektronik

User Online

free blog template

Authorize service

Blog D'tree

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>






Hasilnya akan seperti ini :

Blogroll

--Teman-teman--

rubrik Elektronik

User Online

Free blog template

Authorized Service

Blog D'Tree

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 !