Menampilkan kode HTML/Javascript yang unik di postingan (3)

Sehabis sahur buat posting baru nih sob biar masih refresh ingatan saya, sesuai dengan judulnya "Menampilkan kode HTML/Javascript yang unik di postingan versi 3" (biar lengkap bikin trilogynya-red). Seperti yang sudah saya posting sebelumnya di blog ini,ada banyak cara menampilkan kode HTML/Javascript di dalam postingan, kalau yang belum baca silahkan klik di sini untuk versi 1 dan klik di sini untuk versi 2. Sekarang kita lihat perbedaan masing-masing versinya. Mau tahukan perbedaannya?




Versi 1 :
#rec { margin:20px;padding:20px;}
.hint {
border: 1px solid #4AB7FF;
font-size: 11px;
color: #191919;
background: #BFE5FF url(http://i280.photobucket.com/albums/kk162/mochal_nl_2008/info.gif) no-repeat 5px center;
font-family: Verdana, sans-serif, "Courier New";
line-height: 125%;
margin: 5px 0px 0px;
padding: 12px 12px 12px 40px;
display: block;
font-weight: 400;
width: 85%;
}


Versi 2 :

#rec { margin:20px;padding:20px;}
.hint {
border: 1px solid #4AB7FF;
font-size: 11px;
color: #191919;
background: #BFE5FF url(http://i280.photobucket.com/albums/kk162/mochal_nl_2008/info.gif) no-repeat 5px center;
font-family: Verdana, sans-serif, "Courier New";
line-height: 125%;
margin: 5px 0px 0px;
padding: 12px 12px 12px 40px;
display: block;
font-weight: 400;
width: 85%;
}


Versi 3 :
#rec { margin:20px;padding:20px;}
.hint {
border: 1px solid #4AB7FF;
font-size: 11px;
color: #191919;
background: #BFE5FF url(http://i280.photobucket.com/albums/kk162/mochal_nl_2008/info.gif) no-repeat 5px center;
font-family: Verdana, sans-serif, "Courier New";
line-height: 125%;
margin: 5px 0px 0px;
padding: 12px 12px 12px 40px;
display: block;
font-weight: 400;
width: 85%;
}


Sangat jelas sekali perbedaannyakan, nah sekarang tinggal bagaimana cara membuatnya dan kelebihan dari versi 3 ini.
1. Seperti biasa login terlebih dahulu ke blogspot, kemudian masuk ke Tata Letak > edit HTML
Jangan lupa simpan template lengkapnya, klik Download Template Lengkap!!
2. Masukkan kode ini di bawah <!-- end outer-wrapper -->
 

3. Kemudian simpan hasil pekerjaan sobat, nah sekarang tinggal bagaimana mengaplikasikannya.
Gunakan tag kode ini setiap ingin memposting kode HTML-an atau CSS,dan javascript atau kalau mau lebih jelas mampir ke sini
<pre name="code" class="css">HTML/CSS/javascript </pre>
Kelebihan dengan memakai metode ini kita tidak perlu lagi memparse/encode kode HTML-annya langsung taruh saja sesuai kode mentahnya, dan kalau mau ambil kodenya klik view plain, terus kalau mau ngeprint klik print.

Ok bro, cukup kayaknya postingan kali ini soalnya saya sudah mengantuk berat nih, and btw anyway buzway happy blogging dan selamat menunaikan ibadah puasa.

Saya dapat ilmu ini dari sini.

post signature

44 comments:

  1. pertamaxxx pluss
    nanti aja komennya sekarang ngantuk

    ReplyDelete
  2. banyak versi juga ya?tapi menarik semua kok...

    ReplyDelete
  3. @ oesoes > kekekekkeke siip om di tunggu komentar pamungkasnya
    @ jovie > boros amat komentnya kekekekekkeke
    @ kristina > yups tinngal di pilih mba :D

    ReplyDelete
  4. wuaa.... ini versi beda lagi... puyengg.... dah... hiks bantuin donggg.... tapi ntar kayak Jovie puyeng utak atik blogku :D

    ReplyDelete
  5. zzzzzzzzz...... (ktiduran kang, maap....)

    ReplyDelete
  6. Nih komentar pamungkas saya kang, bagus nih versi3nya, i like that. tak tunggu tampilan versi 4,5,6,7 dstnya OK. setelah baca-baca gitu doang ya........??(sok pinter padahal gak bisa n belum praktek)hehehehhehee
    sebelum kabur aku bookmark dulu ya kang.
    *kabur*

    ReplyDelete
  7. wah chal.. sekali2 kasih humor dong, jgn html semua, ntar muka di jidad lo ada tulisannya "master html" lho.. :P

    (sori OOT)

    ReplyDelete
  8. akankah ada yang ke 4??? hehehhe ga salah niyh cc milih roommate.. :D

    ReplyDelete
  9. @ Lyla > wekekekeke nambah pusyeng yak mba :p
    @ Gus > set dah om gus ngorok di sini wakakakaka
    @ Oesoes > nantik tampilin langusng versi 100 nya kang wekekekekekek
    @ masih menfin ada tulisan "master HTML" dari pada "master mesum" :p

    ReplyDelete
  10. hehehe.. sip..sip.. saya kantongin neh.. cmn ada tambahin dikit ngga ada yang langsung copy-nya.. mungkin nanti yach versi empat-nya

    ReplyDelete
  11. @ unieq> langsung yang ke seratus cc, ya iyalaaah ga salh milih teman sekamar :P
    @ jaloee > sebenarnya ada kang copy to clipboard nanti tak update dah, btw bisa juga copynya dari view plain ko kang tinggal ambil kodenya dari situ

    ReplyDelete
  12. makin pinter ajah maen scripts aneh gitu? he..he... siip,,, mantab

    ReplyDelete
  13. Wajib di bookmark tutornya

    ReplyDelete
  14. Ini buat apa ya??(bingung mode neh). Balik lagi ah keyang pertama...

    ReplyDelete
  15. Wah, bagus bgt nie..

    Salam kenal

    ReplyDelete
  16. Waaaahhhh.. ternyata banyak caranya yah...

    Mmmm... kang... tuh tempelen nomer urut komentator diposting juga dunk caranya... pengennn... bagus banget soalnya...

    Terimakasih kang dah sharing...

    ReplyDelete
  17. @ masenchip > ya giotu deh bro :p
    @ abi bakar > bisa aja om abi
    @ herro > kekekekekkek
    @ pengembara > salam kenal juga
    @ anang > iri kenapa mas ?
    @ riasmaja > yup banyak cara menuju roma, mmmm Insya Allah tak posting mengenai hal tersebut

    ReplyDelete
  18. wah asyik banget nih tips.. makasih banyak kang.. :D

    ReplyDelete
  19. Yang ini jg menarik mas.. Hebat.. Salute buat mas subagya.. Acak2 ah postingannya.. Kali aja nemu yg keren lg.. Hehehe

    ReplyDelete
  20. ☆┌─┐ ─┐☆
     │▒│ /▒/
     │▒│/▒/
     │▒ /▒/─┬─┐
     │▒│▒|▒│▒│
    ┌┴─┴─┐-┘─┘
    │▒┌──┘▒▒▒│
    └┐▒▒▒▒▒▒┌┘
     └┐▒▒▒▒┌┘
    ●●JoVie●●
    Peace Man...!!!

    ReplyDelete
  21. heubat bener nie tutorialnya, mantap dah sampai geleng kepala saya, semua jempol di serahkan unutk bilang GOOD

    ReplyDelete
  22. @ fachia > thank om :D
    @ jovie > weeeks maksud looh wakekekekek
    @ kapanpun > thank mas

    ReplyDelete
  23. Trim's tutorialnya, tp aq belum berhasil keluar coment "Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The element type "body" must be terminated by the matching end-tag ", sedangkan aq tdk mengubah tag pd template lainnya

    ReplyDelete
  24. @ pake lucky > saya mengambil code di atas dalam template saya jadi kayanya mungkin anda kurang lengkap mengambil codenya.. coba klik view plain terus ambil code tsbt dapn pastekan di end outerwrapper

    ReplyDelete
  25. kang keren nie tutorialnya..wadohhh..muantebbb..ciamik..

    duh ampe ga bisa bilang saya..hehehe..

    salut bro..sukses :)

    ReplyDelete
  26. Om, saya udh dpt save template-nya dng menambah tag penutup "script" sbl. no.6 ttp saya praktekkan kok tdk bisa ?????? & apa betul yg saya lakukan mengganti "subagya" dengan nama blog saya "tutorial-bloger" (sbg praktek awal)???.

    Om, sbenernya saya malah udh pasang bannernya sejak baca blog om yg penuh dng ilmu ini.

    ReplyDelete
  27. Oh ada yg kelupaan apa ada tambahan code pd skin-nya (klo saya tdk salah istilah orang yg pinter code css-nya ya Om, maklum lah Om tdk belajar ilmu ini cuma modal copy paste tutorial & hafalan sedikit2 spt ini, yg pendek2 maksudnya).

    ReplyDelete
  28. /baca lengkap dach infonya
    kayak baca serial aja/hihi

    ReplyDelete
  29. /koprol
    thanks atas semuanya Bos Mochal/hore
    ogut mau kerja dulu/lari
    jangan lupa Bosa mochal infonya/hihi
    letak kode warna backgroung di template
    biar ogut bisa ganti dg yg warna terang
    dach bosan gelap terus
    he..he..he..
    ogut malas nanya ma Amanda
    /lari

    ReplyDelete
  30. mantap nie tutorialnya om topi aku miringkan :)

    ReplyDelete
  31. Wah lenkap euy infonya.. sip dah.. oiya mas mas.. boleh di share ga ni artikelnya (n_n).. salam kenal.. success buat semua cahyo..

    ReplyDelete
  32. om mochal
    thx atas tutorialnya
    berguna bgt buat saia

    best regard D_Kills

    ReplyDelete
  33. ngambil codenya kok pake view plain sih.....
    yang praktis-praktis aja kaya blogger lainnya jangan dibikin macem-macem biar hemat waktu

    ReplyDelete
  34. Hmmm.. sepertinya menarik neh :)
    dicoba2 ah

    ReplyDelete
  35. Nice trik bisa tak terapin buat blog contoh proposal usaha milik saya gak ya?

    ReplyDelete
  36. wah, baru tau bisa seperti itu. salam kenal gan

    ReplyDelete
  37. boleh nyoba ga nih kawan. nyoba dulu ach. ohya lupa. salam kenal. newbie

    ReplyDelete
  38. maaf mau tanya mas, Gimana cara Menampilkan kode HTML/Javascript yg otomatis di blok itu mas?

    ReplyDelete