Cara menampilkan kode HTML di postingan Blog dengan fitur view print

Sekilas judul nya terkesan membingungkan ya..

jangan khawatir, setelah melihat gambar di bawah ini, elu pasti akan paham.. selama blogwalking pernahkah kalian melihat postingan blog yang memberikan informasi kode html nya dengan tampilan seperti ini, dan jika kita klik view plain maka jendala baru akan muncul dengan menyajikan script HTML nya tersebut, dengan mudah bisa langsung kita copy paste.

gimana cara nya agar dalam memposting kode HTML di blog kita lantas kode HTML tersebut tampil seperti itu?

1. Pergi ke Menu TEMPLATES, kemudian pilih EDIT HTML

2. Cari kode , biar mudah dalam melakukan pencarian gunakan CTRL+F.

3. Copy Kode di yang berada di bawah ini tepat di bawah nya kode tadi.

4. Cari kode setelah ketemu letakan kode di bawah ini tepat di ATAS kode

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

5. cari Kode letakan kode di bawah ini tepat di atas

6. SAVE Template kalian

apakah dengan cara begini kode HTML yang gw copy paste kan ke dalam postingan akan otomatis muncul seperti yang kita inginkan tadi..??

BELUM,

langkah selanjutnya agar kode HTML kita bisa muncul di postingan seperti yang kita harapkan tadi, maka untuk itu ikuti cara sederhana ini :

1. Coba NEW POST / ENTRI BARU,

2. pilih EDIT HTML, lalu masukan contoh kode HTML yang ingin elu tampilkan di postingan blog lu nanti.

3. di depan kode HTML yang barusan elu pastekan tadi, tambahkan kode berikut

4. PUBLIKASIKAN

lihat hasil nya jons, bagaimana?? Ribet kah? yups, sangat ribet sekali... :D

Laman

Cara menampilkan kode HTML di postingan Blog dengan fitur view print

1 komentar:

JALAN-JALAN BRO!

Lihat Selengkapnya

TUTORIAL BLOG

Lihat Selengkapnya

LAGU ENAK NIH

Lihat Selengkapnya