Mempercantik Tampilan Code/Script di Blog

 CSS Tutorial, Tutorial wordpress

Mempercantik tampilan Code/Script di postingan blog sangat diperlukan bagi para blogger yang sering membuat tutorial mengenai CSS, HTML/JavaScript, PHP dan tutorial lainnya. Fungsinya agar kode-kode tutorial yang di sampaikan lebih terlihat menarik dan rapi.

Banyak plugin yang dapat digunakan untuk menampilkan highlight Code/script bagi pengguna WordPress self hosting, diantaranya adalah SyntaxHighlighter Evolved. Akan tetapi lebih baik apabila kita tidak menggunakan plugin hanya untuk menampilkan Code Snippets, karena ini akan berpengaruh terhadap kecepatan loading blog.

Maka sebagai gantinya anda dapat memanfaatkan CSS untuk mempercantik tampilan Code Snippets di dalam postingan blog anda.

Cara mempercantik tampilan Code/Script di blog dengan CSS

Untuk pengguna WordPress, anda dapat menambahkan kode pre pada CSS. Caranya yaitu dengan menambahkan code berikut kedalam file style.css pada theme blog anda.

pre{
background:#EDEFF3 url(http://i1147.photobucket.com/albums/o553/jonobones/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}

Sedangkan untuk pengguna blogspot, dapat dilakukan dengan menambahkan kode diatas pada template > edit html, kemudian tambahkan kode diatas sebelum kode ]]></b:skin>

Untuk mengubah tampilan background dapat dilakukan dengan mengganti file image yang ada pada script/code yang berwarna merah dengan file image anda.

Cara menerapkannya pada postingan blog.

Untuk penerapannya, dapat dilakukan dengan cara:

  1. copy script/code yang ingin anda tampilkan didalam postingan
  2. buka halaman editor dengan mode visual
  3. paste script/code tadi pada halaman editor mode visual
  4. lalau buka halaman editor dengan mode HTML
  5. tambahkan kode <pre> sebulum kode yang telah anda paste-kan tadi
  6. tambahkan juga </pre> di akhir kode yang telah anda paste-kan tadi
  7. save draft postingan anda
  8. klik preview untuk melihat hasilnya

Contoh script/code untuk menampilkan random post didalam postingan (terlihat pada editor mode HTML):

&lt;strong&gt;Random Posts :&lt;/strong&gt;
&lt;div&gt;
&lt;ul&gt;
&lt;?php
$rand_posts = get_posts('numberposts=<strong>5</strong>&amp;orderby=rand');
foreach( $rand_posts as $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 endforeach; ?&gt;
&lt;/ul&gt;
&lt;/div&gt;

Contoh hasil mempercantik tampilan Code Snippets dengan CSS.

<strong>Random Posts :</strong>
<div>
<ul>
<?php
$rand_posts = get_posts('numberposts=5&orderby=rand');
foreach( $rand_posts as $post ) : ?>
<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endforeach; ?>
</ul>
</div>

Kombinasikan dengan CSS box shadow untuk memperoleh hasil yang lebih indah dan menarik. Keindahan blog cerminan dari kualitas content yang ditulis.

Sekian dulu trik dari saya mengenai cara mempercantik tampilan Code/Script di blog. Semoga dapat membantu permasalahan yang sedang anda cari. Good luck.

Author: 

Saya adalah pemilik Kaplik.Com, Tujuan saya menulis adalah untuk berbagi pengetahuan maupun pengalaman kepada semua pembaca. Buat yang ingin tanya-tanya bisa langsung Contact ke Google +1, atau bisa melalui facebook. Thanks...

3 Responses

Leave a Reply