Home » CSS » Mempercantik Tampilan Code Snippets Dengan CSS

Mempercantik Tampilan Code Snippets Dengan CSS

21 Mar. 201120 comments
Mempercantik Tampilan Code Snippets Dengan CSS

Untuk para blogger yang sering membuat tutorial tentang HTML, PHP, CSS, Javascript dan lain-lain mungkin cukup sering menampilkan Code Snippets di dalam postingan. Untuk pengguna WordPress yang self hosting cukup banyak plugin yang bisa dimanfaatkan untuk menampilkan Code Snippets tersebut, di antaranya yang cukup terkenal yaitu SyntaxHighlighter Evolved.

Namun sudah hampir satu tahun saya sudah tidak menggunakan plugin tersebut, alasan utamanya disamping untuk belajar mengurangi ketergantungan kepada plugin juga supaya tidak memberatkan loading karena biasanya plugin-plugin tersebut akan menambah queri ke database dan juga menambah http request karena sering menyertakan file javascript dll.

Sebagai gantinya saya manfaatkan kode pre yang ada di file css dengan sedikit modifikasi, penambahan background gambar dan lain-lain (jika kode ini belum ada di file css bisa ditambahkan). Kode keseluruhan jadi seperti ini :

pre{
background:#EDEFF3 url(http://i690.photobucket.com/albums/vv270/alwi/pre.png) repeat left top;
width:auto;
overflow:auto;
clear:both;
max-height:300px;
color:#000000;
font:normal 12px/1.5em Monaco,"Lucida Console",monospace;
border:1px solid #9f9f9f;
border-left:5px solid #9f9f9f;
padding:1px 8px 1px 8px;
margin:10px 0}

Atau seperti ini :

pre{background: #FFFBAF url(http://i690.photobucket.com/albums/vv270/alwi/bg-note.png) repeat-y left top;
width:auto;overflow:auto;clear:both;max-height:300px;color:#000000;
padding:0 4px 0 35px;margin:5px 5px 5px;line-height:21px;
border-left:1px solid #D5D6D8;
border-top:1px solid #D5D6D8;
color:#000000;font:normal 12px/1.5em Monaco,”Lucida Console”,monospace;
box-shadow:4px 5px 4px #999;-moz-box-shadow:4px 5px 4px #999;-webkit-box-shadow:4px 5px 4px #999;
}

Untuk penerapannya, di dalam editor postingan copy paste atau tulis kode dalam visual mode kemudian pindah ke mode HTML, biasanya kode tersebut akan secara otomatis dikonversi ke mode HTM, setelah itu tambahkan kode <pre> di depan code snippets yang akan ditampilkan dan akhiri dengan </pre>. Contoh ketika ingin menampilkan kode untuk menampilkan recent post kode keseluruhan jadi seperti ini :

<pre>&lt;?php query_posts('showposts=5'); ?&gt;
&lt;ul&gt;
&lt;?php query_posts('showposts=5'); ?&gt;
&lt;/ul&gt;&lt;ul&gt;
&lt;?php while (have_posts()) : the_post(); ?&gt;
&lt;li&gt;&lt;a href="&lt;? php the_permalink() ?&gt;"&gt;&lt;? php the_title(); ?&gt;&lt;/a&gt;&lt;/li&gt;
&lt;?php endwhile;?&gt;
&lt;/ul&gt; </pre>

Hasilnya akan seperti ini :

<?php query_posts('showposts=5'); ?>
<ul>
<?php query_posts('showposts=5'); ?>
</ul><ul>
<?php while (have_posts()) : the_post(); ?>
<li><a href="<? php the_permalink() ?>"><? php the_title(); ?></a></li>
<?php endwhile;?>
</ul>
Mudah-mudahan artikel tentang Mempercantik Tampilan Code Snippets Dengan CSS ini bisa bermanfaat untuk anda, terima kasih.

Artikel Yang Mungkin Berkaitan :

  1. Menggulingkan Top Komentator
  2. Source Code Main Remi Bersama Top Komentator
  3. CSS3 Animation, Zoom In Zoom Out, Rotation
  4. Yesterday, The Beatles
  5. Tips dan Tricks CSS (Cascading Style Sheets)
  6. Free CSS Button Generator
  7. Main Remi Bersama Top Komentator
  8. Membuat Efek Text Stroke Dengan CSS
  9. Cara Menggunakan File CSS Yang Berbeda Untuk Home, Single Dll
  10. Custom CSS Per Post
  1. 22-3-2011 at 07:58 | #1

    itu untuk versi parse html nya ya mas diantara kode pre itu..

    Reply

  2. 22-3-2011 at 08:00 | #2

    Untuk kode css biar tampilanya bisa cantik gitu gimana mas…

    Reply

    dHaNy Reply:

    Ealah tak kira itu contoh ternyata itu kode cssnya… maaf mas… :D

    Reply

  3. 22-3-2011 at 11:33 | #3

    wow aku kagum themenya wapik tenan wawawawa
    sori mas lagi baca-baca dulu artikel mas yang sebelumnya komentarnya gak nyambung

    salam kenal aja, suwun

    Reply

  4. 22-3-2011 at 14:06 | #4

    saya msh menggunakan plugin syntax mas,loading emg dkit berat tpi lbh colorfull :D

    Reply

    Alwi Reply:

    Tampilan emang full color jika pakai plugin tsb, tapi saya lebih memilih kecepatan loading, makanya saya copot plugin tsb, walau sebenarnya tanpa pluginpun bisa juga dibuat full color tapi implementasinya rada ribet alias kurang praktis apalagi kalau harus pakai javascript agak saya hindari heeeee …

    Reply

  5. 23-3-2011 at 08:10 | #5

    Inilah kelebihan blog-nya bung Alwi. semua diutak-atik sendiri, dengan meminimalkan penggunakaan plugin. Hasilnya, wuss..wuss..wussss !

    Reply

  6. 26-3-2011 at 00:39 | #6

    nice share…

    keep posting…

    Reply

  7. 1-4-2011 at 15:19 | #7

    Wew, keren mas..
    ohya, mas ada berapa plugin yang diinstal di blog ini? pingin diet nih…

    kagum sama kecepatan lodingnya.. :D

    Reply

    Alwi Reply:

    Sekarang tersisa 9 plugin dari hampir 17 plugin yg pernah saya install dan rencana ke depan mungkin masih ada 3 plugin yg akan saya pangkas dan fungsi2nya diganti dg coding tanpa plugin

    Reply

    djawa Reply:

    salut sama blognya., pada cepet lodingnya.,

    Reply

  8. 1-4-2011 at 16:42 | #8

    kode snipets tu apa mas????

    Reply

  9. 29-4-2011 at 01:43 | #9

    Tulisan di code snip kadang terlalu kecil -.-”
    saya jg lgsg edit CSSnya krn mininya tulisan di Code Snip

    Reply

  10. 10-6-2011 at 06:46 | #10

    kagak berhasil pak pake kode itu gak tau kenapa :(

    Reply

    D3NYC4HYOE Reply:

    alhamdulillah sudah berhasil saya terapkan pak,
    tank’s sharingnya, saya perlu membaca berulangkali agar berhasil saya terapkan :D

    Reply

Comment pages
3+5=? (Wajib diisi)