10 January 2009

Highlight pada Script/Kode di Postingan

Memberikan Highlight untuk script atau kode pada postingan akan lebih memperjelas pembaca. Contohnya bisa kamu lihat pada blogku ini. Setiap kali ada script/kode maka akan selalu ada highlight (kotak) yg akan membedakan dengan tulisan yg lain. Nha kamu mau tahu cara pembuatamnya?

Gini nih caranya :
1. Login ke blogger lalu pilih Layout-->Edit HTML
2. Kemudian copy kode dibawah ini lalu pasang di Script CSS kamu atau pasang sebelum kode ]]></b:skin>

.alert { background: #DDE4FF;
text-align: left;
padding: 5px 5px 5px 5px;
border-top: 1px dotted #223344;border-bottom: 1px dotted #223344;border-left: 1px dotted #223344;border-right: 1px dotted #223344;}


Kode yang berwarna merah (#DDE4FF) adalah warna background kotak highlight, kamu bisa menggantinya dengan kode warna yang lain yang cocok dengan background blog kamu. Untuk kode-kode warna bisa dilihat DISINI

3. Kalau sudah kemudian Simpan.

Cara Posting
Supaya kode/scriptnya nanti bisa ada kotak highlight-nya maka untuk memposting harus pake cara2 tersendiri. Yaitu dengan menambahkan kode ini <p class="alert"> sebelum kode/script yg akan diberi highlight. kemudian ditambahkan kode </p> diakhir script/Kode.

Dah gitu aja, gampang kan

328 comments:

  1. pertamax... bukan premium...
    Keren nih tipsnya.. Mantap...

    ReplyDelete
  2. wah tambah ilmu ni mas..:D

    ReplyDelete
  3. wew. mantab,
    source keren.
    /thx

    ReplyDelete
  4. Waaah, aq udah duluan, walopun wujud fisiknya mungkin agak beda.

    btw, nice post.
    Salam,...

    ReplyDelete
  5. Thanks bro, selalu ada yg baru di sini

    ReplyDelete
  6. Lumayan urutan ke 6...hehe

    wah saya dapet ilmu baru lagi nih...

    langsung saya praktekan ah...

    thanx mas! sukses selalu! :)

    ReplyDelete
  7. makasih ilmunya..gak sia2 nih subscribe...

    ReplyDelete
  8. wah di cariin dari dulu yang seperti ini mas kendhin,,, terima kasih.... tapi mau nanya nich satu. Gimana kalo di Wordpress mas bisa g?

    ReplyDelete
  9. Makasih bangat..
    memang tutorial ini yang di cari-cari..hehe..

    ReplyDelete
  10. wah terima kasih bang kendhin ini sangat berguna nih buat yang biasa ngepoost resep resep blogging hehehehehhe

    ReplyDelete
  11. Mantaf bos, gua sudah mencoba disini

    ReplyDelete
  12. Mantapp sekalii

    kang sekali lagi minta tolong ajarin aku bikin email sendiri di google dongg aku udah coba tapi gak bisa terus nechh

    comand" not sent email"
    terus minta cara bikinin artikel trik/artikel selanjutnya/pages berikutnya
    duhh jadi susah keui yeuhhh

    ReplyDelete
  13. ehm.. ehm.. Numpang pengumuman...

    Pengen dapet domain gratis??
    Ikutan aja di lomba "membuat posting"
    informasi lebih lanjut disini

    thx mas kendhin... (o..ya domainnya saya beli di dodoldomain loh...>

    ReplyDelete
  14. wahh makasih infonyaa mas ni bisa dicobaa...

    tapi cara lain juga bisa kok..:D iya kan

    semoga bermanfaat

    ReplyDelete
  15. horeee....dpet ilmu lagi nich... tengs ya.. :)

    ReplyDelete
  16. wah.. bagus neh boss...
    makasie...coba buat ah...

    ReplyDelete
  17. Dari dulu mas kendhin selalu menjdai yang terbaik soal trik & tips nya untuk Blogger...! He he he

    ReplyDelete
  18. Fiuh, ada ilmu baru lagiiii

    ReplyDelete
  19. ilmu bagus neh...

    ReplyDelete
  20. cobain ah..
    mas nanya domg (oot dkit)

    1.caranya bikin langganan dan adsense yg muncul sebelum comment tu gmn yah?
    2.caranya supaya icon YM! dan feed burner reader sejajar gmn yah. tolong dijawab yah,pls

    ReplyDelete
  21. mantap pisan tipsnya ya...!

    ReplyDelete
  22. mas.. numpang nanya tapi kayaknya gak ada hubungannya dengan postingan ini :) .. aku punya kode css. misalnya nama filenya arief.css. nah itu mau aku upload supaya saya bisa dapat linknya misanya www.xxxxxx/arief.css gimana caranya ya? tolong dunkz..

    ReplyDelete
  23. wah jadi tambah asyik nih blognya, tapi kalo enggak pake script tambahan yang itu mas....ada enggak,soalnya aku orangnya suka pelupa jadi takut aja ............hehehehehehe

    ReplyDelete
  24. makasih ya oom kendhin

    ReplyDelete
  25. mas nyontk tipsnya.. buat blog saya..

    maksh..

    ReplyDelete
  26. MAS...MAKASIH BANYAK ILMUMU SANGAT BERMANFAAT BUATKU YG MASIH MENCOBA BLOGGING...BARUSAN AKU BERHASIL MEMPRAKTEKKANNYA...SUUEENNEENGGG BGT

    ReplyDelete
  27. Infonya berguna banget, makasih tipnya.

    ReplyDelete
  28. @Maz Nano, intinya sih sama bos, yaitu menaruh script di CSS dan juga di dalam postingan.
    @ibr0, untuk membuat email sendiri di google baca DISINI coba lebih diperhatikan lagi tutorialnya, kalo dilaksanakan dengan benar insyaallah akan berhasil.
    Menampilkan adsense dalam postingan baca DISINI

    untuk cara bikin link trik berikutnya atao sebelumnya coba baca DISINI
    @Septian, cara bikin berlanggana artikel baca DISINI
    untuk menyejajarkan iconnya itu dibuatkan tabel.
    @arief_spekta, biasanya kodenya seperti ini:
    <link rel="stylesheet" type="text/css" href="www.xxxxxx/arief.css">
    taruh sebelum kode </head>
    @harry, lha kalo gak pake script tambahan itu gmn nanti bos, nanti malah semuanya ada bordernya lagi.

    ReplyDelete
  29. Wah infonya selalu fresh nih. Thx much,bro.

    ReplyDelete
  30. meluncur ke TKP,bro...

    ReplyDelete
  31. bos aku sdh pasang tapi koq kodenya malah gak muncul,yang muncul hasilnya

    ReplyDelete
  32. Susah juga ya.. tapi keren.. thanks mr.kendhin

    ReplyDelete
  33. Mas, ada cara yg lebih praktis nggak, maksudnya begitu kita mau memposting, script tsb jalan sendiri? Kan kalau seperti itu, berarti kita repot 2 x, yaitu dgn cara menyertakan span class.. utk membuat read more...
    Tapi, terima kasih atas tipsnya :)

    ReplyDelete
  34. ini berlaku gak buat WORDPRESS???http://kendhin.890m.com/emoticon/mikir.gif
    http://kendhin.890m.com/emoticon/mikir.gif

    ReplyDelete
  35. Makasih infonya,mas. Kayaknya semua postingannya hebat-hebat. Sukses selalu buat anda.

    ReplyDelete
  36. wah ini baru keren, thanks ya mas.

    ReplyDelete
  37. Mas terimakasih akirnya permintaanku tentang tutorial ini ditulis juga selamat hari raya mohon maaf lahir dan bathin

    ReplyDelete
  38. bro kalo cara bikin emoticon yang ada di atas kotak komentar gimana ??

    http://chbego.blogspot.com

    ReplyDelete
  39. makasih.....infonya.....jadi tambah pengalaman..

    ReplyDelete
  40. Saya orang baru nich? kyaknya prlu baca artikel ini biar tambah paham ilmu internet.

    ReplyDelete
  41. wah masih bingung gan??
    cara posting nya bisa di rinci lg gak??

    mampir juga www.adidoankzz.blogspot.com

    ReplyDelete
  42. kebetulan saya baru belajar blogspot nih gan . .

    ReplyDelete
  43. post and interesting article, keep your blog so I can visit again in the next blog to see your blog posts and articles ... thanks for the info

    ReplyDelete
  44. Bos gimana masuk ke menu Layout-->Edit HTML?
    dan file css nya diposting di google drive?

    ReplyDelete
  45. maksih gan infonyaa sangat bermanfatt langsung praktekkk

    ReplyDelete
  46. selamat siang , senang bisa berkunjung ke website ini ..

    ReplyDelete
  47. tolong berikan arahan buat saia?

    ReplyDelete
  48. akhirnya dapet juga cra ni...thank gan

    ReplyDelete
  49. makasih infor masinya gan

    ReplyDelete
  50. wah keren juga nanti saya coba. saya masih pemula. ini blog saya blog-viyan.blogspot.com

    ReplyDelete
  51. kok saya tidak bisa menemukan kode ]]> ??? :(
    bisa minta tolong gak ?

    ReplyDelete
  52. semua pada bisa kenapa blog saya g bs ya

    ReplyDelete
  53. thks info nya sangat membantu...

    http://4starbrain.blogspot.com/

    ReplyDelete
  54. Article SoftwareDownload Driver
    Kunjungi
    cacinx-ams.bogspot.com

    Merchandise Style & Sport
    Kunjungi
    www.cacinxstore.tk

    ReplyDelete
  55. blognya keren..style commentnya juga..

    ReplyDelete
  56. berguna banget tutorialnya kak jangan lupa kungker ya http://beritangibul.blogspot.com

    ReplyDelete
  57. Wah keren banget tutoriallnya mastah yang satu ini…
    Terimakasih ya Boss ,segera saya praktekkan…masalhanya masih belajar…
    He,,he,,siap menanti trik dan tips yang lainnya

    ReplyDelete
  58. sekedar berbagi http://www.infoazka.com/2013/07/membeli-domain-di-domainesia.html

    ReplyDelete
  59. buat teman teman yang ingin berbur backlink bisa kunjungi diDaftar Backlink Dofollow PR Tinggi 2013

    ReplyDelete
  60. Clipping Path Source (CPS) is an exceptional group of really-accomplished & completely experienced focused Graphic-Designers & they are very well-known to Clipping Path & Photo Masking in addition who have very outstanding material knowledge & ability into these area of many years. During all these motivated & devoted specialist persons CPS proposes mainly excellent service through Web-Based outsource correct into your position of work all around the world and we offer 24/7/365 best customer-support in USA, Canada, UK and Europe at a very reasonable cost.

    ReplyDelete
  61. artikel yang sangat bermanfaat terimakasih.

    ReplyDelete
  62. Terima kasih untuh infonya..

    ReplyDelete
  63. makasih mass infonya.. salam kenal, saya blogger baru mas :D
    mohon mampir http://bagaimanacaraa.blogspot.com

    ReplyDelete
  64. bos kodenya kok gak ada. gak ada cara lain lagi ya boss, masih bingung nie

    ReplyDelete
  65. thanks info mas izin coba silahkan kunjungi blog saya juga ya : http://ilmubloggersyahdan.blogspot.com/

    ReplyDelete
  66. Software CPNS CAT + Bonus Ebook Murah 2013 :http://alamsyahrachmat.blogspot.com/2013/07/software-soal-cpns-dan-ebook-soal-soal.html#.UkI_H2ftDKQ

    ReplyDelete
  67. Gambar-gambar nya gak aktif... mohon di Upload ulang dan kasih tau link nya dunk...

    ReplyDelete
  68. susah gan , waktu udah selesai nge edit HTML nya :(

    ReplyDelete
  69. keren, makasih sob informasinya sangat membantu

    ReplyDelete
  70. infonya sungguh bermanfaat, thanks bro

    ReplyDelete
  71. oh, jadi kitu infona. nuhun atuh kang ah

    ReplyDelete
  72. akhirnya ketemu juga nih tutorial , thanks banget gan ;)
    sangat bermnfaat artikelnya , di tunggu kunjungan baliknya ya heheh
    salam hangat dari http://blog-g4ara.blogspot.com/

    ReplyDelete
  73. Bermanfaat banget nih scriptnya. Done in my blog..

    ReplyDelete
  74. Artikel yg sangat bermanfaat sob,silahkan mampir ke blogku bnyak kumpulan artikel menarik utk dibaca.
    http://www.nehandnews.com

    ReplyDelete
  75. terimakasih infonya gan, sangat bermanfaat untuk blog supaya lebih bagus dan pengunjung lebih senang untuk datang kembali

    ReplyDelete
  76. tengkiyu gan........keren abisss pokok nya

    ReplyDelete
  77. Kunjungan blog.. silahkan berkunjung ke blogku.. http://antos147.tk

    ReplyDelete
  78. artikel yang bgus mas, boleh dicoba nihh ilomunya.....

    ReplyDelete
  79. Terimakasih infonya Ka.... Sangat Membantu,..

    ReplyDelete
  80. Bagaimana Caranya Menampilkan Status Offline/

    ReplyDelete
  81. Bagaimana Caranya Menampilkan Status Offline/

    ReplyDelete
  82. Bagaimana Caranya Menampilkan Status Offline/

    ReplyDelete
  83. Bagaimana Caranya Menampilkan Status Offline/

    ReplyDelete
  84. ngebantu aku banget..
    thx y mas..

    ReplyDelete
  85. membantu banget... :) ditunggu next postnya.

    ReplyDelete
  86. porst2nya oke2 semua dah pokonya gan makasih

    ReplyDelete
  87. membantu banget buat agan2 para blogger. makasih

    ReplyDelete
  88. permisi,numpang lewat gan,artikelnya sangat bermanfaat

    ReplyDelete
  89. Keren gan Tips nya
    ijin nitip blog ya, jangan lupa di kunjungi


    http://kabarterbarudanterkini.blogspot.com/

    ReplyDelete
  90. blognya menarik sekali, penuh info yang mendidik.. thanks, gan

    ReplyDelete
  91. kunjungan pagi, sebelum berangkat ngantor.. nice post, gan. menarik minat untuk dibaca, bagus banget.

    ReplyDelete
  92. nice post gan . semoga bermanfaat bagi yang membaca nya .

    ReplyDelete
  93. sangat menarik untuk di coba . langsung ke TKP dah :D

    ReplyDelete
  94. mantaapppp, sukses selalu gan :)

    ReplyDelete
  95. Mantapzzz,,,, trims ilmunya gan

    ReplyDelete
  96. gurih...balik kanan dlu gan

    ReplyDelete
  97. wah, bisa dicoba nih! terimakasih infonya, salam kenal :)

    ReplyDelete
  98. cara diatas bisa untuk wordpress gak yah

    ReplyDelete
  99. ingin tahu cara menyusun sop, kunjungi <a href="http://www.dutistraining.com/>dutis training</a>

    ReplyDelete
  100. beuh nambah ilmu nih..praktek ahh..

    ReplyDelete
  101. Informasinya sangat bermanfaat.
    Update terus ya.. Terima kasih..

    ReplyDelete
  102. Menarik sekali infonya,
    Terima Kasih dan Salam Kenal :)

    ReplyDelete
  103. terimakasih infonya


    http://uhi8.blogspot.com/2014/02/obat-darah-tinggi-juice.html

    ReplyDelete
  104. Makasih informasinya. Semoga sukses selalu dan bisa memberikan manfaat terbaik untuk masyarakat.

    ReplyDelete
  105. terima kasih karena sudah berbagai info yang sangat menarik, ikut nyimak berita yang disediakan,,

    ReplyDelete
  106. izin nyimak infonya gan terima kasih banyak sudah berbagi info yang sangat menarik !!

    ReplyDelete
  107. Melunncur ke TKP unutk eksekusi tutorial di atas..
    Thx gan atas sharenya..

    ReplyDelete
  108. trimakasih atas artikelnya yang berjudul "Highlight pada Script/Kode di Postingan "
    bermanfaat sekali buat saya dan keren banget postigannya :)

    ReplyDelete
  109. Extender jilq adalah metode terbaik untuk memperbesar dan memperpanjang penis.
    serta menjadikan penis tahan lama ketika berhubungan sex.

    info lengkap kunjungi:
    www.extenderjilq.com

    ReplyDelete
  110. terima kasih banyak Kang... saya banyak belajar di tutorial blog ini
    Salam Nusantara
    http://www.penajampaserutara.com

    ReplyDelete
  111. membaca postingan diatas patut dijadikan motivasi buat saya atas prestasinya, makasih banyak gan atas sharenya, di tunggu share selanjutnya salam

    ReplyDelete
  112. Kasi juga sama gambarnya gan,, agak bingung kalau lihat spt ituu,,
    thanks atas postingannya,,,

    http://portal-statistik.blogspot.com/

    ReplyDelete
  113. gak ngerti gan. kasih ss nya dong gan bingung sumpah????

    ReplyDelete
  114. ALAT PROEXTENDER
    -Alat Pembesar Penis,

    -Pembesar Penis,

    -Alat Proextender,

    -Pembesar Alat Vital,

    -Proextender Pembesar Penis,

    -Fungsi Proextender,

    -Harga Proextender,

    -Proextender Pembesar Alat Vital,

    -Pembesar Alat Proextender,

    -Pembesar Proextender,

    -Cara Pakai Proextender,

    ReplyDelete
  115. menarik dan bermanfaat infonya makasih infonya saya tunggu info yang lebih bermanfaat

    ReplyDelete
  116. Kayaknya cocok di coba nih

    ReplyDelete
  117. nice post gan.
    dapet tips lagi nih..

    ReplyDelete
  118. info yang sangat bermanfaat, thanks gan

    ReplyDelete
  119. kunjungi blog saya ?

    ReplyDelete
  120. kunjungi blog saya ya?

    ReplyDelete
  121. kunjungi blog saya ?

    ReplyDelete
  122. kunjungi blog saya ?

    ReplyDelete
  123. kunjungi blog saya ?

    ReplyDelete
  124. kunjungi blog saya ?

    ReplyDelete
  125. Menurut orang-orang ilmu itu harus dibeli dengan uang. Terima kasih sudah berbagi ilmu secara gratis, semoga sobat akan diberikan ilmu yang berlebih.

    Jika anda berkenan silahkan kunjungi blog saya : http://dki-komputer.blogspot.com/

    ReplyDelete
  126. nice info, thanks for sharing, sangat membantu bagi newbie yg baru belajar, mampir gan ke blog ane

    ReplyDelete
  127. nice share mampir blog ane http://getcash52.blogspot.com/

    ReplyDelete
  128. Bagus gan... mantap infonya sangat bagus.

    ReplyDelete
  129. Pusing juga belajar script css bgtu, coz harus inget terus kode2 dan fungsi nya.. maklum saya orang awam jd blum mengerti banget soal program.. hehhehe :)

    ReplyDelete
  130. Lapor, saya sudah coba cara ini tapi hasilnya tidak muncul kotak scriptnya.

    ReplyDelete
  131. highlight ini hasilnya sama dengan highlight dari alexgobartev ga ya gan ? Thank, salam blogger

    ReplyDelete
  132. Artikel bagus gan, cocok bgt buat blogger pemula. Thanks

    ReplyDelete
  133. Terima kasih untuk artikelnya gan, sangat membantu. Luangkan waktu ya untuk para blogger buat mampir ke blog saya. Info Tambang

    ReplyDelete
  134. Nice info gan, di tunggu ya updatenya. Slam blogger

    ReplyDelete