Cara Membuat Tampilan Notepad++ / View Plain Di Blog

Posted on
Download Cara Membuat Tampilan Notepad++ / View Plain Di Blog via 9apps disini!
9apps
Haliemzulvio.com – Halo sobat blogger ! Ketemu lagi sama admin kece. Hari ini saya mau posting tentang Cara Membuat Tampilan Notepad++ / View Plain Di Blog. Terkadang kita sering menulis source code html, bahasa pemrograman c/c++, maupun code lainnya. Namun tampilannya ga begitu jelas karena kodenya yang semerawut. Nah, dengan View Plain ini akan mempercantik tampilan postingan kamu, seperti yang ada di postingan saya kali ini. Mau tau cara membuatnya? simak step-step dibawah ini.

Cara Membuat Tampilan Notepad++ / View Plain Di Blog

1. Yang Paling utama, Buka Blog kamu.
2. Buka Template > Edit HTML.

3. Cari kode </head>. Lalu letakkan kode dibawah ini. tepat di bawah kode </head>

<!-- Add-in CSS for syntax highlighting -->
<script src="https://huba-javascript.googlecode.com/svn/htbrt/1.js" type="text/javascript"></script>
<script src="https://huba-javascript.googlecode.com/svn/htbrt/2.js" type="text/javascript"></script>
<script src="https://huba-javascript.googlecode.com/svn/htbrt/3.js" type="text/javascript"></script>
<script src="https://huba-javascript.googlecode.com/svn/htbrt/4.js" type="text/javascript"></script>
<script src="https://huba-javascript.googlecode.com/svn/htbrt/5.js" type="text/javascript"></script>
<script src="https://huba-javascript.googlecode.com/svn/htbrt/6.js" type="text/javascript"></script>
<script src="https://huba-javascript.googlecode.com/svn/htbrt/7.js" type="text/javascript"></script>
<script src="https://huba-javascript.googlecode.com/svn/htbrt/8.js" type="text/javascript"></script>
<script src="https://huba-javascript.googlecode.com/svn/htbrt/9.js" type="text/javascript"></script>
<script src="https://huba-javascript.googlecode.com/svn/htbrt/10.js" type="text/javascript"></script>
<script src="https://huba-javascript.googlecode.com/svn/htbrt/11.js" type="text/javascript"></script>
<script src="https://huba-javascript.googlecode.com/svn/htbrt/12.js" type="text/javascript"></script>
<script src="https://huba-javascript.googlecode.com/svn/htbrt/13.js" type="text/javascript"></script>


4. Lalu cari kode </body> dan letakkan script dibawah ini tepat diatas </body>

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

5. Dan tambahkan kode CSS berikut dan letakkan diatas kode ]></b:skin

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

6. Dan terakhir, Ketika ingin membuat View Plain-nya, pasang code dibawah ini pada postingan kamu, di mode html.

 
<blockquote class="tr_bq">
<pre class="cpp" name="code"> 
</pre>
</blockquote>

Dan beginilah Tampilannya :

Cara Membuat Tampilan Notepad++ / View Plain Di Blog
Tampilan View Plain

Sekian postingan kali ini. Jika ada pertanyaan, silahkan tinggalkan komentar dibawah. Terima Kasih.

====================================
Tags : Cara Membuat Tampilan Notepad++ / View Plain Di Blog. Cara membuat Text Code Area, Cara Membuat Notepad di Blog, cara, view plain, cara buat view plain, cara buat view plain mudah. cara membuat view plain di blog.

Other articles you might like;

Gambar Gravatar
Hanya seorang newbie biasa yang hobby ngeblog asal-asalan.