Cara Membuat Kotak Script / CSS (Syntax Highlighter) Pada Postingan Blogger

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

Penggunaannya pun agak sedikit berbeda, jika blockquote dibuat dengan cara menekan Quote di bagian atas (diantara bullet list dan remove formatting), sedangkan kotak script dibuat dengan menyisipkan kode pemanggil pembuka dan penutup terhadap kode yang akan diberikan kotak script atau css.

1. Contoh Kotak Kode Script atau CSS

2. Contoh Blockquote

Bagaimana Cara Menginstallnya Kedalam Template Blog ?

Login ke Blogger
Pilih Template » Edit HTML. Jangan lupa centang expand template widget
Cari tag

</head>

dan copy code di bawah ini kemudian pastekan tepat di atas </head>

Langkah selanjutnya, cari tag

]]></b:skin>

dan copy code 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 code

</body>

Copy dan paste code di bawah ini dan pastekan tepat diatas tag </body>

Peraturan Berkomentar!!!

► Komentarlah sesuai dengan topik artikel
► Dilarang menggunakan kata yang mengandung SARA dan sejenisnya
► Dilarang membuat link aktif
► Dilarang spam dalam berkomentar
► Berkomentarlah yang baik dan sopan

Terima kasih atas kunjungan anda, Selamat Berkomentar.

Hubungi Admin segera jika ada masalah atau error lainnya

▁ ▂ ▃ ▄ ▅ ▆ ▇ █ █ ▇ ▆ ▅ ▄ ▃ ▂ ▁

Penulisan markup di komentar

Silakan tinggalkan komentar sesuai topik. Komentar yang menyertakan link aktif, iklan, atau sejenisnya akan dihapus.
Untuk menyisipkan kode gunakan <i rel="code"> kode yang akan disisipkan </i>
Untuk menyisipkan kode panjang gunakan <i rel="pre"> kode yang akan disisipkan </i>
Untuk menyisipkan quote gunakan <i rel="quote"> catatan anda </i>
Untuk menyisipkan gambar gunakan <i rel="image"> URL gambar </i>
Untuk menyisipkan video gunakan [iframe] URL embed video [/iframe]
Kemudian parse kode tersebut pada kotak di bawah ini

Deathority

Cara Membuat Kotak Script / CSS (Syntax Highlighter) Pada Postingan Blogger

Share this :

Brian Harris

15 Komentar

Penulisan markup di komentar