Senin, 25 Maret 2013

Update! Membuat Tampilan Kode dengan Fitur View dan Print (Syntax Highlighter)

Trik Membuat Tampilan Kode dengan Fitur View dan Print (Syntax Highlighter) di Blogger

Pernahkah sobat menjumpai sebuah blog dengan menampilkan kode (hal ini berhubungan dengan cara membuat posting kode di blogger post pent-) yang dilengkapi dengan fitur Print button dan View plain seperti gambar dibawah ini?

cara membuat tampilan kode posting blogger dengan fitur print dan view.
Klik di SINI untuk tampilan lebih besar.

Fitur seperti ini sangat membantu,terlebih jika sobat ingin menjadikan kode yang sedang disimak ingin disimpan dalam flashdisk (dalam bentuk *.txt) maupun sekedar untuk di print.

Sangat berbeda dengan tampilan kode biasa,apalagi yang menggunakan text area,hal ini sangat sulit untuk didokumentasikan baik dalam flash disk maupun print.
Tak banyak berpengaruh memang,tapi selain membuat tampilan kode lebih profesional (chie) juga akan tampak menarik.

So,gimana cara kita mendapatkan hasil copy-nya? betul gan,tinggal klik 'View Plain' pada fitur yang disediakan.
Contoh live-nya sobat bisa lihat di postingan di SINI

Nah,gimana gan?

Langkah dan Cara Membuat Tampilan Print & View Kode Posting Syntax Highlighter


Sobat pergilah ke Dashboard lalu pilih Tata Letak (gb1) kemudian pilih tab Edit HTML (gb2) dan jangan lupa contreng checklist 'Expand Widget Templates' (gb3)

Syntax Highlighter blogger.
(1)

Syntax Highlighter di Blogspot.
(2)

trik cara membuat Syntax Highlighter blogger.
(3)


Kemudian cari kode berikut (gunakan Ctrl+F untuk mempermudah pencarian):
</head>

Setelah sobat ketemukan kode </head> tersebut,tepat BAWAH nya letakkan script berikut:
<script src='http://mrpujiajadeh.comze.com/shCore.js' type='text/javascript'>
</script>
<script src='http://mrpujiajadeh.comze.com/shBrushCpp.js' type='text/javascript'>
</script>
<script src='http://mrpujiajadeh.comze.com/shBrushCSharp.js' type='text/javascript'>
</script>
<script src='http://mrpujiajadeh.comze.com/shBrushCss.js' type='text/javascript'>
</script>
<script src='http://mrpujiajadeh.comze.com/shBrushDelphi.js' type='text/javascript'>
</script>
<script src='http://mrpujiajadeh.comze.com/shBrushJava.js' type='text/javascript'>
</script>
<script src='http://mrpujiajadeh.comze.com/shBrushJScript.js' type='text/javascript'>
</script>
<script src='http://mrpujiajadeh.comze.com/shBrushPhp.js' type='text/javascript'>
</script>
<script src='http://mrpujiajadeh.comze.com/shBrushRuby.js' type='text/javascript'>
</script>
<script src='http://mrpujiajadeh.comze.com/shBrushVb.js' type='text/javascript'>
</script>
<script src='http://mrpujiajadeh.comze.com/shBrushSql.js' type='text/javascript'>
</script>
<script src='http://mrpujiajadeh.comze.com/shBrushXml.js' type='text/javascript'>
</script>

Kemudian cari lagi kode berikut (gunakan Ctrl+F untuk mempermudah pencarian):
]]></b:skin>

Setelah kode tadi sobat ketemukan,kini tepat diATASnya letakkan barisan kode css berikut:

.dp-highlighter
{
font-family: "Consolas", "Monaco", "Courier New", Courier, monospace;
font-size: 12px;
background-color: #E7E5DC;
width: 99%;
overflow: auto;
margin: 18px 0 18px 0 !important;
padding-top: 1px; /* adds a little border on top when controls are hidden */
}

/* clear styles */
.dp-highlighter ol,
.dp-highlighter ol li,
.dp-highlighter ol li span
{
margin: 0;
padding: 0;
border: none;
}
.dp-highlighter a,
.dp-highlighter a:hover
{
background: none;
border: none;
padding: 0;
margin: 0;
}
.dp-highlighter .bar
{
padding-left: 45px;
}
.dp-highlighter.collapsed .bar,
.dp-highlighter.nogutter .bar
{
padding-left: 0px;
}
.dp-highlighter ol
{
list-style: decimal; /* for ie */
background-color: #fff;
margin: 0px 0px 1px 45px !important; /* 1px bottom margin seems to fix occasional Firefox scrolling */
padding: 0px;
color: #5C5C5C;
}
.dp-highlighter.nogutter ol,
.dp-highlighter.nogutter ol li
{
list-style: none !important;
margin-left: 0px !important;
}
.dp-highlighter ol li,
.dp-highlighter .columns div
{
list-style: decimal-leading-zero; /* better look for others, override cascade from OL */
list-style-position: outside !important;
border-left: 3px solid #6CE26C;
background-color: #F8F8F8;
color: #5C5C5C;
padding: 0 3px 0 10px !important;
margin: 0 !important;
line-height: 14px;
}
.dp-highlighter.nogutter ol li,
.dp-highlighter.nogutter .columns div
{
border: 0;
}
.dp-highlighter .columns
{
background-color: #F8F8F8;
color: gray;
overflow: hidden;
width: 100%;
}
.dp-highlighter .columns div
{
padding-bottom: 5px;
}
.dp-highlighter ol li.alt
{
background-color: #FFF;
color: inherit;
}
.dp-highlighter ol li span
{
color: black;
background-color: inherit;
}
/* Adjust some properties when collapsed */
.dp-highlighter.collapsed ol
{
margin: 0px;
}
.dp-highlighter.collapsed ol li
{
display: none;
}
/* Additional modifications when in print-view */
.dp-highlighter.printing
{
border: none;
}
.dp-highlighter.printing .tools
{
display: none !important;
}
.dp-highlighter.printing li
{
display: list-item !important;
}
/* Styles for the tools */
.dp-highlighter .tools
{
padding: 3px 8px 3px 10px;
font: 9px Verdana, Geneva, Arial, Helvetica, sans-serif;
color: silver;
background-color: #f8f8f8;
padding-bottom: 10px;
border-left: 3px solid #6CE26C;
}
.dp-highlighter.nogutter .tools
{
border-left: 0;
}
.dp-highlighter.collapsed .tools
{
border-bottom: 0;
}
.dp-highlighter .tools a
{
font-size: 9px;
color: #a0a0a0;
background-color: inherit;
text-decoration: none;
margin-right: 10px;
}
.dp-highlighter .tools a:hover
{
color: red;
background-color: inherit;
text-decoration: underline;
}
/* About dialog styles */
.dp-about { background-color: #fff; color: #333; margin: 0px; padding: 0px; }
.dp-about table { width: 100%; height: 100%; font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; }
.dp-about td { padding: 10px; vertical-align: top; }
.dp-about .copy { border-bottom: 1px solid #ACA899; height: 95%; }
.dp-about .title { color: red; background-color: inherit; font-weight: bold; }
.dp-about .para { margin: 0 0 4px 0; }
.dp-about .footer { background-color: #ECEADB; color: #333; border-top: 1px solid #fff; text-align: right; }
.dp-about .close { font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; background-color: #ECEADB; color: #333; width: 60px; height: 22px; }
/* Language specific styles */
.dp-highlighter .comment, .dp-highlighter .comments { color: #008200; background-color: inherit; }
.dp-highlighter .string { color: blue; background-color: inherit; }
.dp-highlighter .keyword { color: #069; font-weight: bold; background-color: inherit; }
.dp-highlighter .preprocessor { color: gray; background-color: inherit; }

Setelah itu,cari lagi kode berikut:
</body>

Setelah sobat ketemukan,letakkan script berikut tepat di ATAS nya:
<!-- Add-in Script for syntax highlighting -->
<script language='javascript'>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll(&#39;code&#39;);
</script>

Lalu simpan templates sobat.
Sebagai langkah terakhir,kita terapkan dalam posting,ikuti langkah berikut ini:
Pertama,sobat kunjungi dashboard lalu pilih 'New Post'

cara membuat kode blogger tampil dengan print tombol
Lihat Gambar lebih Besar di SINI


Setelah itu,pilih tab 'Edit HTML' bukan mode 'Comppose'

Syntax Highlighter untuk coding blogger post
Lihat Gambar lebih Besar di SINI


Kemudian cara menerapkannya letakkan script berikut:

<pre name="code" class="JScript">
Saya belajar membuat tampilan kode di Blogger.
Tampilan kode Syntax Highlighter gan!

</pre>

Lalu publikasikan dan lihat hasilnya :D
**kode warna biru adalah kode yang ingin ditampilkan (tentu untuk menampilkan kode di posting blog telah kita share beberapa waktu lalu pent-)

0 komentar:

Posting Komentar

Blog Archive

 
 
Copyright © MXM BERBAGI INFO
Blogger Theme by Blogger Designed and Optimized by Tipseo