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

Sesuai dengan judul titlenya (Menampilkan kode HTML/Javascript yang unik di postingan (2)), kali ini saya akan membuat blogger trick bagaimana menampilkan kode HTML/Javascript berbeda dengan versi sebelumnya, jika belum pernah baca versi sebelumnya silahkan klik di sini. Kalau mau lihat perbedaannya perhatikan contoh di bawah ini:

Versi 1 :
/* Label Cloud Styles
----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}


Versi 2 :

/* Label Cloud Styles
----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}



Perhatikan perbedaanya ketika mouse di arahkan ke text area versi 2 warna backgroundnya berubah!!!

Blogger trick ini sangat simple sekali untuk kita aplikasikan di blog kita,mau tahu cara buatnya?


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. Setelah itu cari kode ini ]]></b:skin> kemudian masukkan kode di bawah ini sebelum kode tersebut :


.post code {
font-family: 1.2em 'Courier New', Courier, Monospace;
display:block;
overflow: auto;
text-align: left;
padding: 10px;
color: #444E1F;
background-color: #F7BE81;
border-top: 2px solid #D0EC98;
border-right: 1px solid #D0EC98;
border-bottom: 1px solid #D0EC98;
border-left: 1px solid #D0EC98;
}
.post code:hover {
background-color:#F6E3CE;
}

Kemudian simpan hasil pekerjaan sobat.
3. Untuk mengaplikasikannya ke dalam postingan, sobat tinggal menaruh kode HTML/Javascript di antara <code> Kode HTML/Javascript </code> di mode edit HTML.
Contohnya :

<code> Kode HTML/Javascript </code>

Kalau berhasil berarti sobat orang yang beruntung, kalau gagal kasihan deeh loooh....!!!! Ok, sobat blogger nanti kita sambung lagi dengan blogger trick lainnya, happy blogging and have anice weekend :D

post signature

39 comments:

  1. tuing-tuing..
    keren banget nih...
    Mau aku rampok dulu kodenya mumpung jadi "pertamaxxxx" disini....
    buat yang lain...nunggu sisa gw...:D

    ReplyDelete
  2. makin mantep aja si-BOS ini. saluuut. keep fight

    ReplyDelete
  3. wah, keren euy! chal, lo harus cari tips2 wordpress juga :P

    ReplyDelete
  4. wah banyak ilmunya ya... catet dulu ahh....

    ReplyDelete
  5. kereeeenn.. uy.. maju terus pantang menyerah :)

    ReplyDelete
  6. Posting yang sangat bagus ...
    Blog ini salah satu tempat saya belajar ..
    Bagi-bagi abang chal ...he3

    ReplyDelete
  7. di bukmark ah....

    ReplyDelete
  8. Wah.. makin lengkap aja nie ilmunya..

    Semangat!

    ReplyDelete
  9. @ To All > semuanya di praktekkin kaga :p

    ReplyDelete
  10. jadi pusing sama kodenya hehehe nanti deyh prakteknya :P

    ReplyDelete
  11. makin pinter ajahhh maenan code2 aneh... he..he..wekekek

    ReplyDelete
  12. lah kan pake wordpress, ini bukannya cuma buat blogspot?

    ReplyDelete
  13. meskipun saya sebenrnya gak begitu mudeng sama kode kode model begini, tapi saya berharap suatu saat kalo saya belajar terus bisa jadi mudeng, hehe

    ReplyDelete
  14. wah ilmu ku namabah lagi nie, makasih ya

    ReplyDelete
  15. wah gue sukses bro, thanks infonya,cara buat signature gimana ya?

    ReplyDelete
  16. Makin mantap aja nih tip-tipnya tanks ya aku mau nyoba dulu,mudah-mudahan bisa

    ReplyDelete
  17. langsung dicoba dan praktekkan ah.. btw mirip pre gak tuh code

    ReplyDelete
  18. @ Ronggo > weks maksudnya :p
    @ unieq > ga salahkan milih teman sekamar :p
    @ masenchips > hehehehe ente lebih bagus tutor mengenai masalah review2an
    @ bayu > nih lagi belajar di WP om
    @ cerita senja >seeep maju terus saya dukunng buat belajar kode2an :p
    @ kristina > iya kali mba :D
    @ kapanpun > sama-sama
    @ mr. koechel > nanti saya posting kali yaks :p
    @ bambangxp > ente lebih jago bro joomlanya saalute!!!
    @ fachia > beda bro ini soalnya pake tag class

    ReplyDelete
  19. wew..koment gw gak di respon...ya udah..gak jadi koment akh,
    eh iya...janji gw kan cuma ngerampok..gak mau praktekin...Wek!!

    ReplyDelete
  20. @ jovie > weeeeks.... :p di respon kali buat semuanya tapi :)) , lagian datang-datang mau rampok aja, jangan udah bakat yaks wakakakakakkaak :))

    ReplyDelete
  21. weww mass keren.. nih tutorialnya.. klu saya mah manual pkai tag div style hehe makasih ya aku numpang belajar nihhhh

    ReplyDelete
  22. langsung praktek n gagal,....kasihan deh aku..

    ReplyDelete
  23. mantaf bos, ijin unduh

    ReplyDelete
  24. /baca tambah asyik nich
    /bisik ilmunya juga nama
    thanks Bos Mochal yang ganteng

    ReplyDelete
  25. /koprol mau meluncur ke episode yang ketiga biar lengkap/lari

    ReplyDelete
  26. thanks mas u/ infonya...tp knp koq gk bisa di copy paste ya kode2 nya mas subagyo?

    ReplyDelete
  27. MAs Guruh ni dah aq coba tapi kok yang versi 1 gak kelihatan codenya kemudian aq coba versi 2 malah kode HTML smile nya gak muncul tapi icon smilenya yang ketiga aq coba gak muncul kodenya salah dimana ya mas.
    http://saterlat.blogspot.com

    ReplyDelete
  28. @ saterlat> oooo... ya harus di rubah bagian post css nya mas, soalnya template saya itu kan masih memakai tag post-one, kalau mau di rubah dulu jadi section class
    con : .post-one code {.....} seperti itu, mudah-mudahan paham

    ReplyDelete
  29. OOppppsss maksudnya .post yang mana mas apa semuanya dirubah mas.
    http://saterlat.blogspot.com

    ReplyDelete
  30. Maksudnya merubah jadi section class gimana mas?
    http://saterlat.blogspot.com

    ReplyDelete
  31. mantep bget sarannya,matur suwun yo mas

    ReplyDelete
  32. akumah pake yang keduaaaaaa...irit bandwith hostingan gitoH LoL.....:-P Di looking² dong bos...;)) http://beben-koben.blogspot.com/2009/08/d-uh.html

    ReplyDelete
  33. kalau yang Alert, yang Tanda seru ntuh terus yang Bio Hazard itu gimana tuh Bos...(bukannya sekalian akh) WuekekekekKKKKK :D

    ReplyDelete
  34. hebat nih bisa ngerti banyak code2 begitu, musti sering mampir dan berguru. Thanks

    ReplyDelete