Jumat, 15 Agustus 2008

Modifikasi-Kode HTML/Javascript yang Unik di Area Posting

Tips ini sebenarnya sudah dimuat bahkan baru saja dimuat oleh kang Mochal. Bukan bermaksud “latah” atau bagaimana, tetapi saya ingin sekali mempraktekkan apa yang baru saya dapatkan dari kang Mochal tersebut (itung-itung sebagai latihan), yaitu cara membuat Kode HTML/Javascript yang unik di area posting. (Nah kan latah banget tuh).

Mengingat baru pertama kali ini saya memuat artikel tentang tutorial blog, maka sebagian besar tulisan saya comot dari artikel kang Mochal tersebut (artikel asli milik Mohamed Rias), yang tentu saja atas persetujuan dan ijin beliau. Hal ini tidak lebih disebabkan oleh kemampuan saya yang masih sangat “cetek” tentang tutorial blog.

Oke.. langsung saja sepertinya (jadi grogi ne..)

1. Login ke blogger, masuk ke Tata Letak > Edit HTML
Ingat selalu untuk membackup template anda sebelum melaksanakan editing pada HTML

2. Setelah itu masukkan kode di bawah ini di atas kode ]]></b:skin>
.codeview {
margin : 15px 35px 15px 15px;
padding : 10px;
clear : both;
list-style-type : none;
background : #f9f9f9 url(http://i263.photobucket.com/albums/ii150/mohamedrias/cv-1.gif) no-repeat right bottom;
border-top : 1px solid #eeeeee;
border-right : 2px solid #cccccc;
border-bottom : 2px solid #cccccc;
border-left : 1px solid #eeeeee;
}
.codeview li {
font-size : 13px;
line-height : 24px;
font-family : "Courier New", "MS Sans Serif", sans-serif, serif;
color : #333333;
font-weight : normal;
margin : 0;
padding : 0;
}

3. Kemudian klik simpan. Selesai

Anda dapat memodifikasinya dengan mengganti image latar belakang sesuai dengan selera anda. Caranya :

1. Buat sebuat image yang memiliki dengan ukuran resolusi image 125X86 pixel, dan simpan dalam format GIF untuk memperkecil kapasitas file.
2. Simpan di Google Page Maker atau Photo Bucket anda. Catat URL image anda tersebut dan ganti URL yang ada pada script di atas. Sebagai contoh saya menggantinya dengan image saya pada URL: http://riasmaja77.googlepages.com/Alasscript.gif.
3. Buat warna background sesuai dengan kode warna pada image. Misalnya saya buat warna background menjadi transparan karena image saya berlatar belakang transparan.
Maka pada baris tersebut (yang memuat URL image) selengkapnya akan menjadi :
background : url(http://riasmaja77.googlepages.com/Alasscript.gif) no-repeat right bottom;


Kode warna setelah background: saya hilangkan untuk menampilkan background transparan pada text areanya.


Untuk menampilkan code HTML/Javascript di postingan anda harus memakai code di bawah ini:
<div class="codeview">
Ketik kode HTML, css, Javascript code disini
</div>


Kode di atas dapat ditulis di dalam mode Compose ataupun Edit HTML


Selesai sudah keseluruhan langkah cara menampilkan java script, css code, dan html beserta sedikit modifikasi pada latar belakangnya. Hasilnya dapat anda lihat pada tampilan di atas.. (walaupun masih jauh bila dibandingkan dengan aslinya..)


PS: Modifikasi yang saya lakukan dengan image yang saya gunakan sudah mendapat persetujuan dari pemilik artikel asli ini yaitu Mohamed Rias *kebetulan namanya ada mirip-miripnya dengan nama saya*. Dan saya mohon maaf apabila susunan tulisan ini berantakan dan malah membuat anda sulit untuk memahaminya. Semoga ini bisa menjadi langkah awal saya untuk mulai berbagi tentang tutorial blog.

Terima kasih kepada:
1. Mohamed Rias [Blogger Accessories]
2. Guruh Subagya [Mencoba untuk Menjadi Yang Terbaik]
3. Mbak Jovie [Together We Share]


Posting yang Berhubungan Berdasarkan Kategori:



27 komentar:

  1. Yuu Huu..keren Om...
    ******************
    First Yorum..Yii Haaa..

    BalasHapus
  2. Waduuuh....pelajarannya sudah tambah susah saja nih.... sik malam ini lagi ngk bisa konsen..

    BalasHapus
  3. *katanya keluar..* oalah.. ternyata keluar posting.. he..he..

    Kerrren.... kotak kodenya yang transparan itu lho.. ck..ck..ck.. mantabs..

    Makasih mas...

    BalasHapus
  4. duh lagi balas komentar ma bw liat pelajaran html lagi puyeeenggg... templetku ruwet lagi :((

    BalasHapus
  5. curang gak kasih kabar posting baru, awas ya, jadi telat deh kasih komentar gak pertamaxxx, keduluan yang lain.

    BalasHapus
  6. waduh kok lupa komentarku gak berhubungan dengan posting,hehehe, ntar dikira spammer aku. tanya kang kalau misal untuk memodif area komentar gimana?diberi kotak kayak punya kang firdaus,atau mbak jovie. thanks ya dapet ilmu baru lagi nih, kang Riasmaja emang TOP

    BalasHapus
  7. @ Oeoes : o'ow..caranya?? auk akh...piusiiingggg...:)

    BalasHapus
  8. wah minta izin nih mau di curi :D

    BalasHapus
  9. Makin mantep aja nih tips²nya, hebat makin lama mas riasmaja makin berkembang !
    Kok pada mau jd pertamax, mendingan bensir campur aja biar murah...hikshikshikshiks

    BalasHapus
  10. sudah mampir nih ke tempat mohamed rias? sudah bikin page navigation hacknya lum?

    BalasHapus
  11. @Jovie: *tumben ya mbak Jovie gak teriak "pertamaaxx.. ada apa ya..?" Eh.. iya mbak terimakasih juga atas bantuannya sampai artikel ini bisa terbit.. Sekalian latihan dulu..

    @Ani: iya mbak.. saya juga kesulitan ketika akan menerbitkan artikel ini..

    @Firdaus: *jadi gak enak body ne..* Terima kasih kang.. lagi belajar nulis kayak gituan.. kalo ada kekurangannya dikoreksi ya..

    @Lyla: tapi dah beres kan mbak.. Kang Firdaus... *Ups.. sekalian promosi.. he.he.he..*

    @Oeoes: yang penting kan komennya kang... he.he.he..

    Kalo masalah memberi kotak pada kolom komentar saya masih cetek kang.. mohon maaf.. Kenapa gak ditanyakan langsung aja ke yang bersangkutan tentang itu... biar lebih mak nyus penjelasannya..

    @Jovie: *buat kang Oeoes* Nah yang punya aja pusing gitu.. apalagi saya kang.. he.he.he..

    *Tapi ntar saya diajarin loh mbak...*

    @Pencuri Code: silakan dicuri kang.. mumpung gratis.. he.he.he..

    @Ridho: ah bisa aja kang Ridho ini.. belum ada apa-apanya kang.. itu aja masih nyontoh sebelah.. he.he.he..

    @Afithk: waduh... siap apaan kang..? *bingung..*

    @Mochal: lha ini orangnya... terimakasih ya kang dah mengijinkan saya nyontoh artikelnya..

    Saya dah mampir ke "saudara kembar" saya kang... Navigation hack? Apaan ya kang..?

    BalasHapus
  12. manteb wis, wah perlu berbenah nih kost2an ku :D

    BalasHapus
  13. yupz..dr tempatnya mochal dah liat yg ini..
    mw dicoba juga ah nanti..:)

    BalasHapus
  14. Mantap ya senior2 blogger ini, mantap dah tipsnya, Ntar di coba ah :)

    BalasHapus
  15. @dhuwuh: *berbenah kost@an..?* mmm.. Eh iya kang.. silakan..

    @Mike: silakan kang..

    @Kapanpun: *walah wong baru 2 bulan ngeblog koq dibilang senior..* lha kalo yang newbie kayak saya dibilang senior, gimana yang ngeblognya lebih lama dari saya kang...he.hhe.he.. terimakasih kang..

    BalasHapus
  16. Hi Riasmaja ,

    Thanks for translating this codeview hack to your language.

    regards,
    Blogger Accessories

    BalasHapus
  17. @Mohamed Rias: *Wiihh.. senengnya kembaran saya mampir ke sini..*

    No.. I thank you very much for your permission to translate and write this article in my blog.. And sure.. I will take another trick on your blog and translate it in my blog.. Of course your permission is all I need..

    best regard..

    BalasHapus
  18. Boleh jga tuh..kebetulan lgi cari yg kaya gtuan eeh nongol deh si om yg bantu tererengkyu lah..
    Lam knal Om..Lam kenal jga wat smua..bleh dumz ntar nanya2 neh..maklum blog ku aru lair kemaren sore..

    BalasHapus
  19. @mysky: salam kenal juga.. terimakasih.. sebenarnya yang duluan nulis tentang ini bukan saya loh.. he.he.he.. btw silakan dicoba ya...

    BalasHapus
  20. baru baca respon nih Om....
    tak kasih tahu..tapi nih rahasia lhoo....
    sini..sini tak bisikin...
    "first yorum" artinya "Pertamaxxxx"...
    Sssttt!!! jangan bilang siapa2 yah Om....janji....!!!
    Ok..deal...!!

    BalasHapus
  21. Wah, masih gak terlalu ngerti neh, nggak disertai contoh seh

    BalasHapus
  22. blom coba nich???
    bagus gk sich???

    BalasHapus
  23. duh bgmama ci....
    mempelajari HTML JavaScript susah BGT nih......
    cara mudahNa bgmana cccccii????/

    BalasHapus
  24. wah , ,bisa d coba nih kang . makasih ya . :D

    BalasHapus
  25. terima kasih banyak.Artikelnya bagus apalagi kata-katanya menarik menambah wawasan dan pengalaman saya trims ya…lanjutkan artikelnya saya tunggu. Mampir ke blog saya dunk saya biz posting tadi. ini alamatnya http://regedit.blog.telkomspeedy.com/2009/02/11/fiber-optic/
    jangan lupa komentarnya buat artikel saya.

    BalasHapus