Awalnya begini, melihat ada beberapa ekspresi senang atau sedih yang ditampilkan di blog ini, pasti akan lebih cakep bila ekspresinya bisa terwakilkan oleh gambar-gambar yang lebih ekspresif. Tak sekedar teks icon senang seperti : ) atau : - ), dan juga bukan sekedar : ( atau : - ( di kala sedih. Tapi :) atau :D
Beberapa di antara kita yang sering YM-an, pasti mengenalnya sebagai smiley icon. Lucu-lucu kan, bahkan ikon setan yang mestinya serem terlihat sangat lucu di sana. Cocok kan kalo dipake di blog! Pasti akan banyak ekspresi, ungkapan atau kata-kata yang lebih membidik kesadaran bila melengkapinya dengan gambar.
Jadi idenya simpel aja, bila ada teks yang mengandung : ) atau : ) ) atau juga : ( di dalam posting, maka akan segera digantikan pesannya menjadi sebuah gambar.
Untuk persiapan ini, kita butuh 3 hal :
1. Kode untuk memiliha milih teks mana yang akan digantikan
2. Gambar berupa ikon kecil sebagai pengganti teks
3. Edit HTML di blognya.
OK, langsung kita mulai.
Untuk bagian 1, pemilihan kode, bisa kita gunakan kode javascript yang lebih mudah pengaplikasiannya ke blog. Bisa langsung dituliskan di dalam kode HTML blognya, atau kita pisah menjadi file dengan ekstensi .js dan kita upload di hosting gratisan. Googlepages misalnya. Nah, edittag menggunakan opsi terakhir. Mengunggahnya di googlepages. Coba unduh di sini.
Bila ingin mengutak-atik, bisa juga filenya dibuka di Notepad. Lalu bila ingin mengganti gambar-gambarnya, coba gulung kebawah hingga menemukan kode :
d[i].innerHTML = d[i].innerHTML.replace(/\s:-?D/ig, '
<img src="http://agushery.googlepages.com/edittagbigsmile.gif"
id="new" /> ');
Artinya, file beralamat di http://agushery.googlepages.com/edittagbigsmile.gif akan dipakai untuk menggantikan teks : - D, di kodenya menjadi :-?D. Bila punya gambar sendiri, silakan upload lalu ganti alamat filenya menjadi alamat URL file gambar yang baru diunggah. Oh ya, sekarang bagian ke dua :
Gambar.
Dengan pertimbangan ukuran gambar yang mini, maka akan lebih baik bila kita gunakan software gambar bitmap untuk membantunya. Misalnya Adobe Photoshop. Kita buat ukuran canvas 16*16 pixel. Sebenarnya ini ukuran yang pas agar teks di atas dan di bawahnya tak terkena imbas ukuran gambar. Namun bisa pula diperbesar seperti yang edittag gunakan menjadi 20*20 pixel.
Bagaimana membuatnya? Cukup gunakan pencil tool untuk menggambarnya. Kira-kira saja, toh ukurannya kecil. Terlebih saat edittag ingin membuat ikon diri sendiri. Susah menggambar di ukuran kecil. Jadi cukup lah gambarnya terwakili dengan kacamata agar terlihat edittag :).
Jangan lupa untuk menyimpannya. Bisa sebagai gif, png, atau jpg. Untuk membuat animasi seperti di blog ini, edittag gunakan varian Adobe lainnya, yakni Adobe Image Ready. Tambahkan frame agar bisa dibuat animasi. Tampilannya seperti berikut :
Dan setelah gambar selesai, juga kode javascript telah disesuaikan dan keduanya di upload. Kini bagian penyetelan di blog. Untuk itu perlu edit HTML blognya. Saat ini edittag menggunakan tampila blog berjenis Tata Letak (layout), bukan Template.
Untuk itu klik Tata Letak, lalu Edit HTML. Kemudian cari bagian <head>, lalu sisipkan kode berikut di bawahnya :
<script src='http://agushery.googlepages.com/addSmiley.js'type='text/javascript'></script>
Ingat ya, alamat http://agushery.googlepages.com/addSmiley.js bisa diganti dengan alamat file milik sendiri. Kemudian satu lagi, tuju bagian/seksi pos agar javascriptnya bisa dibaca di bagian posting. Misalnya di kode edittag adalah :
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
Ingat juga, bagian ini bisa berganti nama menjadi apa saja di kode yang berbeda. Petunjuknya adalah type='Blog' di dalam Body. Selanjutnya, simpan!. Oh ya, expand widget tak perlu dicentang pada proses di atas.
Bila tampilan gambar ikon masih naik turun pada paragraf, coba cek bagian CSSnya, terutama di #main-inner. Misalnya di edittag kodenya adalah :
.post .post-body img { margin-bottom: 0px; }
Angka 0 di atas artinya posisi gambar berada di level yang sama dengan teks. Bila menggantinya dengan angka 10, maka posisinya akan terangkat lebih tinggi dari teks.
Silakan mencoba ya!
Terimakasih ilmunya...
BalasHapusInformasi yang anda berikan sangat membantu.
Semoga Blognya makin maju.
Salam kenal dari: Koleksi Makalah Weblog
Jazakallah Kang, ilmunya bermanfa'at sekali
BalasHapushttp://carakusehat.blogspot.com
di bookmark dulu ahh... nanti di test kalo lagi press... kayaknya asik dan lucu ni mas untuk dipasang di blog... thanks yah...
BalasHapusIcon buatan mas Edittag aneh.... huahahahaha..... itu ga kayak ketawa, itu mah, nyengir kuda.... hihihihihi..... Bercanda mas Edittag...... makasih buat ilmunya, yah...
BalasHapusku mau buat yang lucu banget....
dear, pak saya azwar
BalasHapusrequest donk
minta kode scrip frame yang ada di bawah page rank donk.
btw, kata kata poskan komentar ngedit di blog gimana caranya
kirimin ke emaiku ya kode scripnya
awari_shirishama@yahoo.com
punya fs gak...
add me ya emailnya sama kok...
denger denger tanggal 25 ada festival blog di gedung bppt bayar berapa, jam berapa ya....
tolong sms ke hp ku donk 02192942040
thanx s
jawaban via email dan sms saya wakilkan di sini, semoga saja berlangganan feed komentar.
BalasHapusframenya menggunakan bantuan dari blogrolling.com , info bisa cek di:
http://edittag.blogspot.com/2008/01/blogrolling-add-mark-to-recently.html
jawaban ke dua : masuk ke pengaturan, terus klik komentar, dan cari di bagian : Pesan Formulir Komentar. Isikan di kolom sebelahnya.
jawaban ke tiga : tanggal 22 nov, sabtu, tiket belum ada kabar berapa duit, begitu juga jam nya. info ke http://pestablogger.com/
bisa-bisa aja si akang mah...
BalasHapusdiulik wae... hade lahh
nanti aku cobain...
you2net.com
Komentar ini telah dihapus oleh pengarang.
BalasHapusuwaaahh.. layak dicoba..
BalasHapustapi javascript :(
i dun have any cleu..
sebenernya cuman ganti alamat URL file gambarnya aja, jadi kalo dah bisa disalin alamatnya, tempel saja di file .jsnya. hanya pergantian nama, mungkin ga terlalu sulit :D
BalasHapussiiph...sukses!
BalasHapusmakasih.. :-)
akang, sy boleh numpang nanya yah, untuk mendapatkan sebuah url gambar gimana yach, maaf saya agak bingung dalam hal ini.. mohon bantuin ya akang..
BalasHapuscoba klik kanan gambarnya, lalu pilih "salin URL gambar" atau kata-kata yang serupa dengan makna tersebut di browsernya, itu artinya kita telah menyalin alamat gambar. tinggal pasang, alias paste di mana kita ingin memasangnya.
BalasHapuscoba kabari lagi kalo masih bermasalah.
Kemudian satu lagi, tuju bagian/seksi pos agar javascriptnya bisa dibaca di bagian posting. Misalnya di kode edittag adalah :
BalasHapusKang diatas tuh ditaro dimana ya ??
main main atuh ke http://bisnisupdates.blogspot.com/
di bagian -> b:section class='main' id='main' showaddelement='no'.
BalasHapusini menggunakan kode bawaan dari blogspot (agar bisa lebih banyak diaplikasikan pengguna), jadi untuk blognya yang menggunakan layout dari penyedia berbeda bisa menyesuaikan kodenya.
Komentar ini telah dihapus oleh pengarang.
BalasHapushai salam kenal ya tips nya mantap abis jangan lupa berkunjung ya ke blog saya............
BalasHapus