» » Membuat Kotak Script / CSS di Postingan Blog
Sabtu, 20 April 2013

01.29
Kotak atau Box Kode Script atau CSS sebenarnya hampir sama dengan Blockquote, tapi pebedaannya yakni pada Box Script atau CSS terdapat nomor urut untuk memberikan penomoran secara otomatis ketika kode script diberi kode <br/> atau enter pada akhir kode script dan memiliki garis atau kolom dengan dua warna selang seling pada saat script diberi enter atau <br/>. Sedangkan blockquote hanya untuk memberikan tampilan yang berbeda dari isi postingan biasa dan tidak ada penomoran secara otomatis ketika diakhiri dengan enter atau <br/> di belakang kode script atau CSS.

Penggunaannya juga berbeda, jika blockquote dibuat dengan cara menekan Quote di bagian atas (diantara bullet list dan remove formatting) pada saat membuat entri atau postingan baru. Sedangkan kotak script dibuat dengan menyisipkan kode pemanggil pembuka dan penutup terhadap kode yang akan diberikan kotak script atau css.
untuk memakai Box / Kotak Kode Script atau CSS ini, berikut caranya :
  • Login ke Blogger
  • Pilih Template » Edit HTML. Jangan lupa centang expand template widget
  • Cari tag </head> dan copy kode di bawah ini kemudian pastekan tepat di atas 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> 
  • Langkah selanjutnya, cari tag ]]></b:skin> dan copy kode di bawah ini dan pastekan tepat di atas tag ]]></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; }
  • Selanjutnya, cari kode </body>. Copy paste kode di bawah ini dan pastekan tepat di atas tag </body>

<!-- Add-in Script for syntax highlighting -->  

<script language='javascript'>  

dp.SyntaxHighlighter.BloggerMode();  

dp.SyntaxHighlighter.HighlightAll('code');  

</script>
  • Simpan template
Untuk menerapkannya kedalam postingan blog, sobat bisa gunakan kode pemanggil di bawah ini :
1. Untuk kode Javascript 
<pre name="code" class="JScript">
Masukkan kode script di sini
</pre>
2. Untuk kode CSS
<pre name="code" class="Css">
Masukkan kode script di sini
</pre>

Sekian dulu tutorial pembuatan Cara Membuat Kotak Script / Css pada Postingan Blog kali ini, sampai bertemu di postingan selanjutnya... Jangan lupa tinggalkan komentar ya...!!!

Ditulis Oleh : Krisna Adji S. ~ Tutorials, Game, Blogging, Information

RegiBrader Sobat sedang membaca artikel tentang Membuat Kotak Script / CSS di Postingan Blog. Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya. Saling menghargai kreatifitas sobat Blogger.

:: Get this widget ! ::

Diposting oleh di 01.29
Label:

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)