» » » Membuat Syntax Highlighter Di Blog

Membuat Syntax Highlighter Di Blog

Membuat Syntax Highlighter Di Blog - Hallo sahabat Anak Google, Pada Artikel yang anda baca kali ini dengan judul Membuat Syntax Highlighter Di Blog, admin mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. Mudah-mudahan isi postingan Artikel Blogger, Artikel Tutorial Blog, yang kami tulis ini dapat anda pahami. Selamat membaca ya.

Judul : Membuat Syntax Highlighter Di Blog
link : Membuat Syntax Highlighter Di Blog

Baca juga


Membuat Syntax Highlighter Di Blog

Tutorial Blogger dan SEO Blogger - Membuat Syntax Highlighter. Syntax Highlighter adalah membuat hightlight pada sintaks HTML, PHP atau bahasa pemograman sehingga membuat beda dengan tulisan yang ada di sekelilingnya. Cara ini memang sangat cocok untuk anda para penyedia tutorial blogger dengan menampilkan kode-kode pada postingan anda. Dengan Syntax Highlighter ini akan memudahkan pengunjung blog anda, yaitu para pencari tutorial blogger untuk membedakan yang mana kode-kode tutorial blogger dan yang mana yang berisi penjelasan.
Tutorial Blogger dan SEO Blogger
Syntax Highlighter mempunyai beberapa fitur tambahan yakni fasilitas view plaint atau lihat kode dalam pop up window dan print untuk memprint kodenya. Bagi anda yang mau memasangnya langsung di blog anda, ada baiknya anda untuk menyimak postingan ini sampai selesai. Wah kok bahasanya formal banget yahh hheeee..
Berikut ini cara Membuat Syntax Highlighter di blog anda.

1.Log in ke blogger dengan akun yang anda miliki.
2.Pergi ke rancangan » edit HTML » centang kotak Exand Template Widget. Atau yang menggunakan tampilan blogger yang baru anda bisa langsung menuju ke template » edit HTML » centang kotak Expand Template Widget.
3.Alangkah baiknya untuk memback-up template anda dulu buat jaga-jaga kalau saja terjadi kesalahan.
4.Cari kode <head>  letakkan kode di bawah ini di bawah kode <head>.

<script  src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js'  type='text/javascript'></script>
<script  src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js'  type='text/javascript'></script>
<script  src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js'  type='text/javascript'></script>
<script  src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js'  type='text/javascript'></script>
<script  src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js'  type='text/javascript'></script>
<script  src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js'  type='text/javascript'></script>
<script  src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js'  type='text/javascript'></script>
<script  src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js'  type='text/javascript'></script>
<script  src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js'  type='text/javascript'></script>
<script  src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js'  type='text/javascript'></script>
<script  src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js'  type='text/javascript'></script>
<script  src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js'  type='text/javascript'></script>
<script  src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js'  type='text/javascript'></script>

5.Cari kode ]]></b:skin> dan letakkan kode di bawah ini tepat di atas-nya.

.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; }

Kepanjangan ya, nih saya kasih kode yang singkat.

<link href="http://yudatfort.googlecode.com/files/snytax%20css.css" rel="stylesheet" type="text/css" />

6.Cari kode </body> letakkan kode di bawah ini di atas-nya.

<!-- Add-in Script for syntax highlighting  -->
<script language='javascript'>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>

 SAVE TEMPLATE 

Untuk menampilkan Syntax highlighter-nya di postingan anda anda tinggal masukkan kode ini pada kolom html untuk kode java script.

<pre name="code" class="JScript">
SIMPAN SCRIPT YANG AKAN DIPASANG DISINI
</pre>

 Dan untuk kode css berikut kodenya.

<pre name="code" class="Css">
SIMPAN CSS YANG AKAN DIPASANG DISINI
</pre>

Dengan ke dua kode di atas kita dapat mengambil kesimpulan. Kesimpulannya adalah jika kita ingin memasukkan kode java script anda tinggal masukkan kode di tempat tulisan yang saya beri warna biru dengan kode JScript dan jika anda ingin memasukkan kode css anda ganti kode JScript  dengan kode Css .


Demikianlah artikel tentang Membuat Syntax Highlighter Di Blog

Sekianlah artikel Membuat Syntax Highlighter Di Blog kali ini, mudah-mudahan bisa memberi manfaat untuk pembaca semua.

Anda sekarang membaca artikel Membuat Syntax Highlighter Di Blog dengan alamat link https://anakugoogle.blogspot.com/2017/09/membuat-syntax-highlighter-di-blog.html
Unknown

0 Response to "Membuat Syntax Highlighter Di Blog"

Post a Comment

Subscribe to: Post Comments (Atom)