.:: Jasa Membuat Aplikasi Website,Desktop,Android Order Now..!! | | Order Now..!! Jasa Membuat Project Arduino,Robotic,Print 3D ::.

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

0 komentar


بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم
bismillaahirrahmaanirrahiim

السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ
Assalamu'alaikum warahmatullahi wabarakatuh

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-)

Update Contact :
No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email : Fajarudinsidik@gmail.com
NB :: Bila Sobat tertarik Ingin membuat software, membeli software, membeli source code, membeli hardware elektronika untuk kepentingan Perusahaan maupun Tugas Akhir (TA/SKRIPSI), Insyaallah Saya siap membantu, untuk Respon Cepat dapat menghubungi kami, melalui :

No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email: Fajarudinsidik@gmail.com


atau Kirimkan Private messanger melalui email dengan klik tombol order dibawah ini :

ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين
Alhamdulilah hirobil alamin

وَ السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ
wassalamualaikum warahmatullahi wabarakatuh


Artikel Trik Membuat Tampilan Kode dengan Fitur View dan Print (Syntax Highlighter) di Blogger, Diterbitkan oleh scodeaplikasi pada Rabu, 27 Maret 2013. Semoga artikel ini dapat menambah wawasan Anda. Website ini dipost dari beberapa sumber, bisa cek disini sumber, Sobat diperbolehkan mengcopy paste / menyebar luaskan artikel ini, karena segala yang dipost di public adalah milik public. Bila Sobat tertarik Ingin membuat software, membeli software, membeli source code ,Dengan Cara menghubungi saya Ke Email: Fajarudinsidik@gmail.com, atau No Hp/WA : (fajar) : 085369237896, (puat) : 085267792168.

Tawk.to