ProBlogiz

Home » All posts

Entitas HTML Simbol Icon

21.12.13

Entitas HTML / HTML Entities adalah kode HTML yang dibuat untuk membuat/render sebuah simbol di website. Kita tahu tidak semua simbol dapat diterapkan untuk menampilkan sumber kode dikarenakan keterbatasan karakter pada keybord kita. Sebagai contoh jika Anda ingin menampilkan karakter-karakter khsusus dalam website/blog, seperti simbol icon telepon misalnya, yaitu dengan cara menggunakan entitas HTML

&#9742;

sehingga akan muncul icon ☎

Sebenaranya ada ribuan entitas HTML yang digunakan secara universal, namun saya akan berbagi yang umum saja, yang sering digunakan dan lebih dikenali oleh beberapa mayor browser. Dan juga tentu menggunakan hex code daripada menggunakan keyword key disebabkan browser compliance yang lebih baik. Misalnya ada beberapa keyword key yang gagal dirender oleh Internet Explorer, sedangkan versi kode hex simbol bekerja di semua browser.

Ada 3 macam HTML Entities yang akan saya bagikan bagi sobat Blogger yang membutuhkan untuk kali ini, yaitu:

Icon Symbols / Ikon Simbol
Arrow Symbols / Panah Simbol
Star Symbols / Bintang Simbol

Klik untuk melihat:
☛ Entitas HTML Arrow Simbol dan
☛ Entitas HTML Star Simbol

ICON SYMBOLS / IKON SIMBOL

Berikut referensi entitas HTML Simbol Ikon

☠ ☠

☠

☡ ☡

☡

☢ ☢

☢

☣ ☣

☣

☤ ☤

☤

☥ ☥

☥

☦ ☦

☦

☧ ☧

☧

☨ ☨

☨

☩ ☩

☩

☪ ☪

☪

☫ ☫

☫

☬ ☬

☬

☭ ☭

☭

☮ ☮

☮

☯ ☯

☯

☀ ☀

☀

☁ ☁

☁

☂ ☂

☂

☃ ☃

☃

☄ ☄

☄

☎ ☎

☎

☏ ☏

☏

☸ ☸

☸

☹ ☹

☹

☺ ☺

☺

☻ ☻

☻

☼ ☼

☼

☽ ☽

☽

☾ ☾

☾

♔ ♔

♔

♕ ♕

♕

♖ ♖

♖

♗ ♗

♗

♘ ♘

♘

♙ ♙

♙

♚ ♚

♚

♛ ♛

♛

♜ ♜

♜

♝ ♝

♝

♞ ♞

♞

♟ ♟

♟

♠ ♠

♠

♡ ♡

♡

♢ ♢

♢

♣ ♣

♣

♤ ♤

♤

♥ ♥

♥

♦ ♦

♦

♧ ♧

♧

♨ ♨

♨

♩ ♩

♩

♪ ♪

♪

♫ ♫

♫

♬ ♬

♬

♭ ♭

♭

♮ ♮

♮

♯ ♯

♯

✁ ✁

✁

✂ ✂

✂

✃ ✃

✃

✄ ✄

✄

✅ ✅

✅

✆ ✆

✆

✇ ✇

✇

✈ ✈

✈

✉ ✉

✉

✌ ✌

✌

✍ ✍

✍

✎ ✎

✎

✏ ✏

✏

✐ ✐

✐

✑ ✑

✑

✒ ✒

✒

✓ ✓

✓

✔ ✔

✔

✕ ✕

✖ ✖

✖

✗ ✗

✗

✘ ✘

✘

✙ ✙

✙

✚ ✚

✚

✛ ✛

✛

✜ ✜

✜

✝ ✝

✝

✞ ✞

✞

✟ ✟

✟

✠ ✠

✠

✱ ✱

✱

✲ ✲

✲

✳ ✳

✳

✴ ✴

✴

✵ ✵

✵

✶ ✶

✶

✷ ✷

✷

✸ ✸

✸

✹ ✹

✹

✺ ✺

✺

✻ ✻

✻

✼ ✼

✼

✽ ✽

✽

✾ ✾

✾

✿ ✿

✿

❀ ❀

❀

❁ ❁

❁

❂ ❂

❂

❃ ❃

❃

❄ ❄

❄

❅ ❅

❅

❆ ❆

❆

❇ ❇

❇

❈ ❈

❈

❉ ❉

❉

❊ ❊

❊

❋ ❋

❋

◆ ◆

◆

◇ ◇

◇

◈ ◈

◈

◉ ◉

◉

◊ ◊

◊

○ ○

○

◌ ◌

◌

◍ ◍

◍

◎ ◎

◎

● ●

●

◐ ◐

◐

◑ ◑

◑

◒ ◒

◒

◓ ◓

◓

◔ ◔

◔

◕ ◕

◕

◖ ◖

◖

◗ ◗

◗

◘ ◘

◘

◙ ◙

◙

◚ ◚

◚

◛ ◛

◛

◜ ◜

◜

◝ ◝

◝

◞ ◞

◞

◟ ◟

◟

◠ ◠

◠

◡ ◡

◡

◢ ◢

◢

◣ ◣

◣

◤ ◤

◤

◥ ◥

◥

◦ ◦

◦

◧ ◧

◧

◨ ◨

◨

◩ ◩

◩

◪ ◪

◪

◫ ◫

◫

◬ ◬

◬

◭ ◭

◭

◮ ◮

◮

◯ ◯

◯

Recource: : www.developphp.com

HTML Color Picker Code

Unknown

21.12.13

2 komentar

tool

HTML Color Picker adalah tool yang menyediakan warna-warna kode HTML yang umum digunakan pada website. Warna-warna yang diwakili oleh nilai-nilai heksadesimal (metode yang paling umum untuk web)atau juga menggunakan nilai-nilai RGB dapat Anda dapatkan pada tool HTML Color tersebut.

Cara menggunakannya:
1. Pindahkan slider vertikal untuk memilih warna yang sesuai, kemudian klik pada kotak warna di sebelah kanannya untuk mendapatkan HTML color code yang diinginkan.
2. Anda dapat juga memulai dengan warna Anda sendiri, dengan cara memasukkan kode warna langsung pada kolom input paling atas.
3. Anda dapat menyimpan kode warna-warna yang telah dipilih, dibagian bawah tool.

Masukan kode warna :

H °
S %
V %

Klik untuk menyimpan kode warna :

Dibawah ini daftar warna-warna yang telah dipilih. Untuk menyimpan kode warna HTML untuk kunjungan berikutnya klik pada ikon pinnya.

HTML Encoding Decoding

Unknown

21.12.13

No Comment

tool

Apa HTML Encoding Decoding?

Encoding HTML berarti mengkonversi dokumen yang berisi karakter khusus diatas kisaran normal seven-bit ASCII ke dalam bentuk standar. Jenis pengkodean yang digunakan adalah dengan mengirim ke server dalam bentuk informasi header sehingga dapat dengan mudah dan benar diurai oleh browser. Sedangkan HTML decoding merupakan kebalikan dari proses encoding. Dalam proses decoding karakter dikodekan khusus dikonversi kembali ke bentuk aslinya.

Tool ini juga disebut Parse Unparse kode HTML yang dapat digunakan pada template platform Blogspot untuk escaping/parse kode-kode HTML maupun kode Google Adsense, Chitika, Infolink, Adbrite, Adsforindian dan lainnya. Pada dasarnya tool ini akan mengkonversi semua kode HTML dan Ads code kedalam format XML yang sesuai dengan template-template Blogger.

Jika Anda mengalami pesan kesalahan/error setiap menambahkan kode HTML pada template di Blogger, ini dimungkinkan karena Anda memasukkanya sebelum kode-kode tersebut di Encoding/Parse/escaping.

Masukkan Kode HTML

Parse HTML Unparse HTML

Web Safe Color HTML Code

Unknown

21.12.13

5 komentar

tool

216 Web Safe Color HTML - Hexadecimal dan RGB

216 web color, juga dikenal sebagai Web Safe Color, yang dikenali oleh semua browser dan sistem operasi, yang berarti warna-warna ini akan terlihat hampir sama dalam browser apapun.

RGB dan Hexadecimal Web Safe Color Codes

Pada dasarnya warna terdiri dari 3 set angka RGB yang mewakili nilai warna Merah, Hijau dan Biru. Warna-warna ini direpresentasikan sebagai nilai heksadesimal.

Sebagai contoh, angka heksadesimal untuk warna hitam adalah #000000. Dua angka pertama (00) mewakili jumlah warna merah. Dua angka kedua (00) menunjukkan jumlah hijau dan dua angka terakhir (00) mewakili jumlah warna biru. Sehingga dapat diartikan warna hitam, mengandung 00 jumlah warna merah, hijau atau biru, atau dengan kata lain tidak mengandung jumlah yang warna-warna merah, hijau dan biru atau 0%.

RGB dan Hex-Safe Color Codes
#FFFFFF R=255 G=255 B=255	#FFFFCC R=255 G=255 B=204	#FFFF99 R=255 G=255 B=153	#FFFF66 R=255 G=255 B=102	#FFFF33 R=255 G=255 B=51	#FFFF00 R=255 G=255 B=0
#FFCCFF R=255 G=204 B=255	#FFCCCC R=255 G=204 B=204	#FFCC99 R=255 G=204 B=153	#FFCC66 R=255 G=204 B=102	#FFCC33 R=255 G=204 B=51	#FFCC00 R=255 G=204 B=0
#FF99FF R=255 G=153 B=255	#FF99CC R=255 G=153 B=204	#FF9999 R=255 G=153 B=153	#FF9966 R=255 G=153 B=102	#FF9933 R=255 G=153 B=51	#FF9900 R=255 G=153 B=0
#FF66FF R=255 G=102 B=255	#FF66CC R=255 G=102 B=204	#FF6699 R=255 G=102 B=153	#FF6666 R=255 G=102 B=102	#FF6633 R=255 G=102 B=51	#FF6600 R=255 G=102 B=0
#FF33FF R=255 G=51 B=255	#FF33CC R=255 G=51 B=204	#FF3399 R=255 G=51 B=153	#FF3366 R=255 G=51 B=102	#FF3333 R=255 G=51 B=51	#FF3300 R=255 G=51 B=0
#FF00FF R=255 G=0 B=255	#FF00CC R=255 G=0 B=204	#FF0099 R=255 G=0 B=153	#FF0066 R=255 G=0 B=102	#FF0033 R=255 G=0 B=51	#FF0000 R=255 G=0 B=0
#CCFFFF R=204 G=255 B=255	#CCFFCC R=204 G=255 B=204	#CCFF99 R=204 G=255 B=153	#CCFF66 R=204 G=255 B=102	#CCFF33 R=204 G=255 B=51	#CCFF00 R=204 G=255 B=0
#CCCCFF R=204 G=204 B=255	#CCCCCC R=204 G=204 B=204	#CCCC99 R=204 G=204 B=153	#CCCC66 R=204 G=204 B=102	#CCCC33 R=204 G=204 B=51	#CCCC00 R=204 G=204 B=0
#CC99FF R=204 G=153 B=255	#CC99CC R=204 G=153 B=204	#CC9999 R=204 G=153 B=153	#CC9966 R=204 G=153 B=102	#CC9933 R=204 G=153 B=51	#CC9900 R=204 G=153 B=0
#CC66FF R=204 G=102 B=255	#CC66CC R=204 G=102 B=204	#CC6699 R=204 G=102 B=153	#CC6666 R=204 G=102 B=102	#CC6633 R=204 G=102 B=51	#CC6600 R=204 G=102 B=0
#CC33FF R=204 G=51 B=255	#CC33CC R=204 G=51 B=204	#CC3399 R=204 G=51 B=153	#CC3366 R=204 G=51 B=102	#CC3333 R=204 G=51 B=51	#CC3300 R=204 G=51 B=0
#CC00FF R=204 G=0 B=255	#CC00CC R=204 G=0 B=204	#CC0099 R=204 G=0 B=153	#CC0066 R=204 G=0 B=102	#CC0033 R=204 G=0 B=51	#CC0000 R=204 G=0 B=0
#99FFFF R=153 G=255 B=255	#99FFCC R=153 G=255 B=204	#99FF99 R=153 G=255 B=153	#99FF66 R=153 G=255 B=102	#99FF33 R=153 G=255 B=51	#99FF00 R=153 G=255 B=0
#99CCFF R=153 G=204 B=255	#99CCCC R=153 G=204 B=204	#99CC99 R=153 G=204 B=153	#99CC66 R=153 G=204 B=102	#99CC33 R=153 G=204 B=51	#99CC00 R=153 G=204 B=0
#9999FF R=153 G=153 B=255	#9999CC R=153 G=153 B=204	#999999 R=153 G=153 B=153	#999966 R=153 G=153 B=102	#999933 R=153 G=153 B=51	#999900 R=153 G=153 B=0
#9966FF R=153 G=102 B=255	#9966CC R=153 G=102 B=204	#996699 R=153 G=102 B=153	#996666 R=153 G=102 B=102	#996633 R=153 G=102 B=51	#996600 R=153 G=102 B=0
#9933FF R=153 G=51 B=255	#9933CC R=153 G=51 B=204	#993399 R=153 G=51 B=153	#993366 R=153 G=51 B=102	#993333 R=153 G=51 B=51	#993300 R=153 G=51 B=0
#9900FF R=153 G=0 B=255	#9900CC R=153 G=0 B=204	#990099 R=153 G=0 B=153	#990066 R=153 G=0 B=102	#990033 R=153 G=0 B=51	#990000 R=153 G=0 B=0
#66FFFF R=102 G=255 B=255	#66FFCC R=102 G=255 B=204	#66FF99 R=102 G=255 B=153	#66FF66 R=102 G=255 B=102	#66FF33 R=102 G=255 B=51	#66FF00 R=102 G=255 B=0
#66CCFF R=102 G=204 B=255	#66CCCC R=102 G=204 B=204	#66CC99 R=102 G=204 B=153	#66CC66 R=102 G=204 B=102	#66CC33 R=102 G=204 B=51	#66CC00 R=102 G=204 B=0
#6699FF R=102 G=153 B=255	#6699CC R=102 G=153 B=204	#669999 R=102 G=153 B=153	#669966 R=102 G=153 B=102	#669933 R=102 G=153 B=51	#669900 R=102 G=153 B=0
#6666FF R=102 G=102 B=255	#6666CC R=102 G=102 B=204	#666699 R=102 G=102 B=153	#666666 R=102 G=102 B=102	#666633 R=102 G=102 B=51	#666600 R=102 G=102 B=0
#6633FF R=102 G=51 B=255	#6633CC R=102 G=51 B=204	#663399 R=102 G=51 B=153	#663366 R=102 G=51 B=102	#663333 R=102 G=51 B=51	#663300 R=102 G=51 B=0
#6600FF R=102 G=0 B=255	#6600CC R=102 G=0 B=204	#660099 R=102 G=0 B=153	#660066 R=102 G=0 B=102	#660033 R=102 G=0 B=51	#660000 R=102 G=0 B=0
#33FFFF R=51 G=255 B=255	#33FFCC R=51 G=255 B=204	#33FF99 R=51 G=255 B=153	#33FF66 R=51 G=255 B=102	#33FF33 R=51 G=255 B=51	#33FF00 R=51 G=255 B=0
#33CCFF R=51 G=204 B=255	#33CCCC R=51 G=204 B=204	#33CC99 R=51 G=204 B=153	#33CC66 R=51 G=204 B=102	#33CC33 R=51 G=204 B=51	#33CC00 R=51 G=204 B=0
#3399FF R=51 G=153 B=255	#3399CC R=51 G=153 B=204	#339999 R=51 G=153 B=153	#339966 R=51 G=153 B=102	#339933 R=51 G=153 B=51	#339900 R=51 G=153 B=0
#3366FF R=51 G=102 B=255	#3366CC R=51 G=102 B=204	#336699 R=51 G=102 B=153	#336666 R=51 G=102 B=102	#336633 R=51 G=102 B=51	#336600 R=51 G=102 B=0
#3333FF R=51 G=51 B=255	#3333CC R=51 G=51 B=204	#333399 R=51 G=51 B=153	#333366 R=51 G=51 B=102	#333333 R=51 G=51 B=51	#333300 R=51 G=51 B=0
#3300FF R=51 G=0 B=255	#3300CC R=51 G=0 B=204	#330099 R=51 G=0 B=153	#330066 R=51 G=0 B=102	#330033 R=51 G=0 B=51	#330000 R=51 G=0 B=0
#00FFFF R=0 G=255 B=255	#00FFCC R=0 G=255 B=204	#00FF99 R=0 G=255 B=153	#00FF66 R=0 G=255 B=102	#00FF33 R=0 G=255 B=51	#00FF00 R=0 G=255 B=0
#00CCFF R=0 G=204 B=255	#00CCCC R=0 G=204 B=204	#00CC99 R=0 G=204 B=153	#00CC66 R=0 G=204 B=102	#00CC33 R=0 G=204 B=51	#00CC00 R=0 G=204 B=0
#0099FF R=0 G=153 B=255	#0099CC R=0 G=153 B=204	#009999 R=0 G=153 B=153	#009966 R=0 G=153 B=102	#009933 R=0 G=153 B=51	#009900 R=0 G=153 B=0
#0066FF R=0 G=102 B=255	#0066CC R=0 G=102 B=204	#006699 R=0 G=102 B=153	#006666 R=0 G=102 B=102	#006633 R=0 G=102 B=51	#006600 R=0 G=102 B=0
#0033FF R=0 G=51 B=255	#0033CC R=0 G=51 B=204	#003399 R=0 G=51 B=153	#003366 R=0 G=51 B=102	#003333 R=0 G=51 B=51	#003300 R=0 G=51 B=0
#0000FF R=0 G=0 B=255	#0000CC R=0 G=0 B=204	#000099 R=0 G=0 B=153	#000066 R=0 G=0 B=102	#000033 R=0 G=0 B=51	#000000 R=0 G=0 B=0

10 Koleksi SyntaxHighlighter Keren di Blogger

Unknown

28.5.13

20 komentar

css tutorial

Syntax Highlight adalah fitur pada teks editor yang menampilkan atau menyoroti teks-terutama source code-dalam berbagai warna dan font sesuai dengan kategori istilah. Dengan menggunakan SyntaxHighlighter memudahkan dalam menulis source code atau bahasa terstruktur seperti bahasa pemrograman (programming language) atau bahasa markup (markup language). Implementasi dari syntax higlighter pada halaman website, blog atau forum online sering digunakan sebagai kode prensentasi pada contoh code source ( seperti Javascript, HTML, XML, CSS, Python, PHP, JSON, CoffeeScript, Java, SQL, Apache, Haskell, Erlang, Ruby, C++, Objective C dan masih banyak bahasa program lainnya.) yang ingin ditampilkan.

Kali ini Problogiz, ingin sharing koleksi Syntax Highlight yang keren dengan CSS dan Javascript khusus untuk Blogger. Ada 10 koleksi SyntaxHighlighter keren yang saya kumpulkan dari sumbernya softwaremaniacs.org, yang dapat Anda gunakan free untuk menampilkan source code (kode box) di blog-blog Anda. Memang ada banyak artikel atau situs yang berbagi kode dan cara memasang SyntaxHighlighter di halaman blog/website ( baik yang menggunakan javascript, jQuery, maupun markup HTML) seperti Prisma, GeSHi, Google Code Prettify, SyntaxHighlighter, SHJS – Syntax Highlighting in JavaScript, Ultraviolet dan yang lainnya. Saya lebih memilih HIGHLIGHT.JS ini (dari softwaremaniacs) dengan alasan lebih mudah dan dapat bekerja secara otomatis mencari blok kode, mendeteksi jenis bahasa, dan highlighting (menyorot kode).

HIGHLIGHT.JS mengenali sekurangnya 54 bahasa program dan dibundel dengan 26 theme style. Untuk itu saya hanya akan memilih menjadi 3 bahasa code, yang paling sering digunakan oleh blogger (dalam tutorial blog-nya) untuk menampilkan source code, yaitu kode CSS, Javascript, dan mark up HTML. Dan 10 style theme Syntax Highlight pilihan untuk Sobat Blogger!!

Cara Pasang/Instal SyntaxHighlighter di Blog (Box Code)

1. Untuk mengaktifkan fitur ini dibutuhkan javascript berikut, yang dapat Anda letakkan di template tepat diatas

tag </head>

atau bisa juga sebelum

tag </body>

<script src="https://problogizjs.googlecode.com/files/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

2. Kemudian dilanjutkan meletakan style highlighting (CSS), pilihlah salah satu dari 10 macam style dibawah ini (lihat Demo Live-nya sebelum memutuskan) mana yang cocok untuk Blog Sobat. Copy Kode CSS-nya (klik 2x untuk select all) dan letakkan tepat diatas

tag]]></b:skin>

, lalu Simpan Template.

3. Gunakan mark up HTML berikut. untuk menerapkan SyntaxHighlighter pada source code di halaman postingan Anda:


<pre><code>
Isi Kode Javascript, jQuery atau Kode CSS atau Kode HTML
disini...... 
</code></pre>

10 Koleksi SyntaxHighlighter Keren di Blogger

1. Pojoaque

DEMO Pojoaque SyntaxHighlighter

Kode CSS:


/*
Pojoaque Style by Jason Tate
http://web-cms-designs.com/ftopict-10-pojoaque-style-for-highlight-js-code-highlighter.html
Based on Solarized Style from http://ethanschoonover.com/solarized
*/
pre code {
display: block; padding: 0.5em;
color: #DCCF8F;
background: url('https://sites.google.com/site/problogiz/home/pojoaque.jpg') repeat scroll left top #181914;}
pre .comment,
pre .template_comment,
pre .diff .header,
pre .doctype,
pre .lisp .string,
pre .javadoc {
  color: #586e75;
  font-style: italic;
}
pre .keyword,
pre .css .rule .keyword,
pre .winutils,
pre .javascript .title,
pre .method,
pre .addition,
pre .css .tag,
pre .clojure .title,
pre .nginx .title {
  color: #B64926;
}
pre .number,
pre .command,
pre .string,
pre .tag .value,
pre .phpdoc,
pre .tex .formula,
pre .regexp,
pre .hexcolor {
  color: #468966;
}
pre .title,
pre .localvars,
pre .function .title,
pre .chunk,
pre .decorator,
pre .built_in,
pre .lisp .title,
pre .clojure .built_in,
pre .identifier,
pre .id {
  color: #FFB03B;
}
pre .attribute,
pre .variable,
pre .lisp .body,
pre .smalltalk .number,
pre .constant,
pre .class .title,
pre .parent,
pre .haskell .type {
  color: #b58900;
}
pre .css .attribute {
  color: #b89859;
}
pre .css .number,pre .css .hexcolor{
  color: #DCCF8F;
}
pre .css .class {
  color: #d3a60c;
}
pre .preprocessor,
pre .pi,
pre .shebang,
pre .symbol,
pre .symbol .string,
pre .diff .change,
pre .special,
pre .attr_selector,
pre .important,
pre .subst,
pre .cdata {
  color: #cb4b16;
}
pre .deletion {
  color: #dc322f;
}
pre .tex .formula {
  background: #073642;
}

2. Solarized - Dark

DEMO Solarized - Dark SyntaxHighlighter

Kode CSS:


/*

Orginal Style from ethanschoonover.com/solarized (c) Jeremy Hull 

*/

pre code {
  display: block; padding: 0.5em;
  background: #002b36; color: #839496;
}

pre .comment,
pre .template_comment,
pre .diff .header,
pre .doctype,
pre .pi,
pre .lisp .string,
pre .javadoc {
  color: #586e75;
  font-style: italic;
}

pre .keyword,
pre .winutils,
pre .method,
pre .addition,
pre .css .tag,
pre .request,
pre .status,
pre .nginx .title {
  color: #859900;
}

pre .number,
pre .command,
pre .string,
pre .tag .value,
pre .phpdoc,
pre .tex .formula,
pre .regexp,
pre .hexcolor {
  color: #2aa198;
}

pre .title,
pre .localvars,
pre .chunk,
pre .decorator,
pre .built_in,
pre .identifier,
pre .vhdl .literal,
pre .id {
  color: #268bd2;
}

pre .attribute,
pre .variable,
pre .lisp .body,
pre .smalltalk .number,
pre .constant,
pre .class .title,
pre .parent,
pre .haskell .type {
  color: #b58900;
}

pre .preprocessor,
pre .preprocessor .keyword,
pre .shebang,
pre .symbol,
pre .symbol .string,
pre .diff .change,
pre .special,
pre .attr_selector,
pre .important,
pre .subst,
pre .cdata,
pre .clojure .title {
  color: #cb4b16;
}

pre .deletion {
  color: #dc322f;
}

pre .tex .formula {
  background: #073642;
}

3. School Book

DEMO School Book SyntaxHighlighter

Kode CSS:


/*

School Book style from goldblog.com.ua (c) Zaripov Yura

*/

pre code {
  display: block; padding: 15px 0.5em 0.5em 30px;
  font-size: 11px !important;
  line-height:16px !important;
}

pre{
  background:#f6f6ae url('https://sites.google.com/site/problogiz/home/school_book.png');
  border-top: solid 2px #d2e8b9;
  border-bottom: solid 1px #d2e8b9;
}

pre .keyword,
pre .literal,
pre .change,
pre .winutils,
pre .flow,
pre .lisp .title,
pre .clojure .built_in,
pre .nginx .title,
pre .tex .special {
  color:#005599;
  font-weight:bold;
}

pre code,
pre .subst,
pre .tag .keyword {
  color: #3E5915;
}

pre .string,
pre .title,
pre .haskell .type,
pre .tag .value,
pre .css .rules .value,
pre .preprocessor,
pre .ruby .symbol,
pre .ruby .symbol .string,
pre .ruby .class .parent,
pre .built_in,
pre .sql .aggregate,
pre .django .template_tag,
pre .django .variable,
pre .smalltalk .class,
pre .javadoc,
pre .ruby .string,
pre .django .filter .argument,
pre .smalltalk .localvars,
pre .smalltalk .array,
pre .attr_selector,
pre .pseudo,
pre .addition,
pre .stream,
pre .envvar,
pre .apache .tag,
pre .apache .cbracket,
pre .nginx .built_in,
pre .tex .command {
  color: #2C009F;
}

pre .comment,
pre .java .annotation,
pre .python .decorator,
pre .template_comment,
pre .pi,
pre .doctype,
pre .deletion,
pre .shebang,
pre .apache .sqbracket {
  color: #E60415;
}

pre .keyword,
pre .literal,
pre .css .id,
pre .phpdoc,
pre .title,
pre .haskell .type,
pre .vbscript .built_in,
pre .sql .aggregate,
pre .rsl .built_in,
pre .smalltalk .class,
pre .xml .tag .title,
pre .diff .header,
pre .chunk,
pre .winutils,
pre .bash .variable,
pre .apache .tag,
pre .tex .command,
pre .request,
pre .status {
  font-weight: bold;
}

pre .coffeescript .javascript,
pre .javascript .xml,
pre .tex .formula,
pre .xml .javascript,
pre .xml .vbscript,
pre .xml .css,
pre .xml .cdata {
  opacity: 0.5;
}

4. Rainbow

DEMO Rainbow SyntaxHighlighter

Kode CSS:


/*

Style with support for rainbow parens

*/

pre ::-moz-selection{ background: #FF5E99; color:#fff; text-shadow: none; }
pre ::selection { background:#FF5E99; color:#fff; text-shadow: none; }

pre code {
  display: block; padding: 0.5em;
  background: #474949; color: #D1D9E1;
}
pre .body,
pre .collection {
   color: #D1D9E1;
}
pre .comment,
pre .template_comment,
pre .diff .header,
pre .doctype,
pre .lisp .string,
pre .javadoc {
  color: #969896;
  font-style: italic;
}

pre .keyword,
pre .clojure .attribute,
pre .winutils,
pre .javascript .title,
pre .addition,
pre .css .tag {
  color: #cc99cc;
}

pre .number { color: #f99157; }

pre .command,
pre .string,
pre .tag .value,
pre .phpdoc,
pre .tex .formula,
pre .regexp,
pre .hexcolor {
  color: #8abeb7;
}

pre .title,
pre .localvars,
pre .function .title,
pre .chunk,
pre .decorator,
pre .built_in,
pre .lisp .title,
pre .identifier
{
  color: #b5bd68;
}

pre .class .keyword
{
  color: #f2777a;
}

pre .variable,
pre .lisp .body,
pre .smalltalk .number,
pre .constant,
pre .class .title,
pre .parent,
pre .haskell .label,
pre .id,
pre .lisp .title,
pre .clojure .title .built_in {
   color: #ffcc66;
}

pre .tag .title,
pre .rules .property,
pre .django .tag .keyword,
pre .clojure .title .built_in {
  font-weight: bold;
}

pre .attribute,
pre .clojure .title {
  color: #81a2be;
}

pre .preprocessor,
pre .pi,
pre .shebang,
pre .symbol,
pre .symbol .string,
pre .diff .change,
pre .special,
pre .attr_selector,
pre .important,
pre .subst,
pre .cdata {
  color: #f99157;
}

pre .deletion {
  color: #dc322f;
}

pre .tex .formula {
  background: #eee8d5;
}

5. Monokai

DEMO Monokai SyntaxHighlighter

Kode CSS:

CSS code:


/*
Monokai style - ported by Luigi Maselli - http://grigio.org
*/

pre code {
  display: block; padding: 0.5em;
  background: #272822;
}

pre .tag,
pre .tag .title,
pre .keyword,
pre .literal,
pre .change,
pre .winutils,
pre .flow,
pre .lisp .title,
pre .clojure .built_in,
pre .nginx .title,
pre .tex .special {
  color: #F92672;
}

pre code {
  color: #DDD;
}

pre code .constant {
 color: #66D9EF;
}

pre .class .title {
 color: white;
}

pre .attribute,
pre .symbol,
pre .symbol .string,
pre .value,
pre .regexp {
 color: #BF79DB;
}

pre .tag .value,
pre .string,
pre .subst,
pre .title,
pre .haskell .type,
pre .preprocessor,
pre .ruby .class .parent,
pre .built_in,
pre .sql .aggregate,
pre .django .template_tag,
pre .django .variable,
pre .smalltalk .class,
pre .javadoc,
pre .django .filter .argument,
pre .smalltalk .localvars,
pre .smalltalk .array,
pre .attr_selector,
pre .pseudo,
pre .addition,
pre .stream,
pre .envvar,
pre .apache .tag,
pre .apache .cbracket,
pre .tex .command,
pre .prompt {
  color: #A6E22E;
}

pre .comment,
pre .java .annotation,
pre .python .decorator,
pre .template_comment,
pre .pi,
pre .doctype,
pre .deletion,
pre .shebang,
pre .apache .sqbracket,
pre .tex .formula {
  color: #75715E;
}

pre .keyword,
pre .literal,
pre .css .id,
pre .phpdoc,
pre .title,
pre .haskell .type,
pre .vbscript .built_in,
pre .sql .aggregate,
pre .rsl .built_in,
pre .smalltalk .class,
pre .diff .header,
pre .chunk,
pre .winutils,
pre .bash .variable,
pre .apache .tag,
pre .tex .special,
pre .request,
pre .status {
  font-weight: bold;
}

pre .coffeescript .javascript,
pre .javascript .xml,
pre .tex .formula,
pre .xml .javascript,
pre .xml .vbscript,
pre .xml .css,
pre .xml .cdata {
  opacity: 0.5;
}

6. Tommorow Night Blue

DEMO Tommorow Night Blue SyntaxHighlighter

CSS code:


/* Tomorrow Night Blue Theme */
/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
/* Original theme - https://github.com/chriskempson/tomorrow-theme */
/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */

.tomorrow-comment, pre .comment, pre .title {
  color: #7285b7;
}

.tomorrow-red, pre .variable, pre .attribute, pre .tag, pre .regexp, pre .ruby .constant, pre .xml .tag .title, pre .xml .pi, pre .xml .doctype, pre .html .doctype, pre .css .id, pre .css .class, pre .css .pseudo {
  color: #ff9da4;
}

.tomorrow-orange, pre .number, pre .preprocessor, pre .built_in, pre .literal, pre .params, pre .constant {
  color: #ffc58f;
}

.tomorrow-yellow, pre .class, pre .ruby .class .title, pre .css .rules .attribute {
  color: #ffeead;
}

.tomorrow-green, pre .string, pre .value, pre .inheritance, pre .header, pre .ruby .symbol, pre .xml .cdata {
  color: #d1f1a9;
}

.tomorrow-aqua, pre .css .hexcolor {
  color: #99ffff;
}

.tomorrow-blue, pre .function, pre .python .decorator, pre .python .title, pre .ruby .function .title, pre .ruby .title .keyword, pre .perl .sub, pre .javascript .title, pre .coffeescript .title {
  color: #bbdaff;
}

.tomorrow-purple, pre .keyword, pre .javascript .function {
  color: #ebbbff;
}

pre code {
  display: block;
  background: #002451;
  color: white;
  padding: 0.5em;
}

pre .coffeescript .javascript,
pre .javascript .xml,
pre .tex .formula,
pre .xml .javascript,
pre .xml .vbscript,
pre .xml .css,
pre .xml .cdata {
  opacity: 0.5;
}

7. Brown Papper

DEMO Brown Papper SyntaxHighlighter

CSS code:


/*

Brown Paper style from goldblog.com.ua (c) Zaripov Yura

*/

pre code {
  display: block; padding: 0.5em;
  background:#b7a68e url(('https://sites.google.com/site/problogiz/home/brown_papersq.png');
}

pre .keyword,
pre .literal,
pre .change,
pre .winutils,
pre .flow,
pre .lisp .title,
pre .clojure .built_in,
pre .nginx .title,
pre .tex .special,
pre .request,
pre .status {
  color:#005599;
  font-weight:bold;
}

pre code,
pre .subst,
pre .tag .keyword {
  color: #363C69;
}

pre .string,
pre .title,
pre .haskell .type,
pre .tag .value,
pre .css .rules .value,
pre .preprocessor,
pre .ruby .symbol,
pre .ruby .symbol .string,
pre .ruby .class .parent,
pre .built_in,
pre .sql .aggregate,
pre .django .template_tag,
pre .django .variable,
pre .smalltalk .class,
pre .javadoc,
pre .ruby .string,
pre .django .filter .argument,
pre .smalltalk .localvars,
pre .smalltalk .array,
pre .attr_selector,
pre .pseudo,
pre .addition,
pre .stream,
pre .envvar,
pre .apache .tag,
pre .apache .cbracket,
pre .tex .number {
  color: #2C009F;
}

pre .comment,
pre .java .annotation,
pre .python .decorator,
pre .template_comment,
pre .pi,
pre .doctype,
pre .deletion,
pre .shebang,
pre .apache .sqbracket,
pre .nginx .built_in,
pre .tex .formula {
  color: #802022;
}

pre .keyword,
pre .literal,
pre .css .id,
pre .phpdoc,
pre .title,
pre .haskell .type,
pre .vbscript .built_in,
pre .sql .aggregate,
pre .rsl .built_in,
pre .smalltalk .class,
pre .diff .header,
pre .chunk,
pre .winutils,
pre .bash .variable,
pre .apache .tag,
pre .tex .command {
  font-weight: bold;
}

pre .coffeescript .javascript,
pre .javascript .xml,
pre .tex .formula,
pre .xml .javascript,
pre .xml .vbscript,
pre .xml .css,
pre .xml .cdata {
  opacity: 0.8;
}

8. Sunburst

DEMO Sunburst SyntaxHighlighter

CSS code:


/*

Sunburst-like style (c) Vasily Polovnyov

*/

pre code {
  display: block; padding: 0.5em;
  background: #000; color: #f8f8f8;
}

pre .comment,
pre .template_comment,
pre .javadoc {
  color: #aeaeae;
  font-style: italic;
}

pre .keyword,
pre .ruby .function .keyword,
pre .request,
pre .status,
pre .nginx .title {
  color: #E28964;
}

pre .function .keyword,
pre .sub .keyword,
pre .method,
pre .list .title {
  color: #99CF50;
}

pre .string,
pre .tag .value,
pre .cdata,
pre .filter .argument,
pre .attr_selector,
pre .apache .cbracket,
pre .date,
pre .tex .command {
  color: #65B042;
}

pre .subst {
  color: #DAEFA3;
}

pre .regexp {
  color: #E9C062;
}

pre .title,
pre .sub .identifier,
pre .pi,
pre .tag,
pre .tag .keyword,
pre .decorator,
pre .shebang,
pre .prompt {
  color: #89BDFF;
}

pre .class .title,
pre .haskell .type,
pre .smalltalk .class,
pre .javadoctag,
pre .yardoctag,
pre .phpdoc {
  text-decoration: underline;
}

pre .symbol,
pre .ruby .symbol .string,
pre .number {
  color: #3387CC;
}

pre .params,
pre .variable,
pre .clojure .attribute {
  color: #3E87E3;
}

pre .css .tag,
pre .rules .property,
pre .pseudo,
pre .tex .special {
  color: #CDA869;
}

pre .css .class {
  color: #9B703F;
}

pre .rules .keyword {
  color: #C5AF75;
}

pre .rules .value {
  color: #CF6A4C;
}

pre .css .id {
  color: #8B98AB;
}

pre .annotation,
pre .apache .sqbracket,
pre .nginx .built_in {
  color: #9B859D;
}

pre .preprocessor {
  color: #8996A8;
}

pre .hexcolor,
pre .css .value .number {
  color: #DD7B3B;
}

pre .css .function {
  color: #DAD085;
}

pre .diff .header,
pre .chunk,
pre .tex .formula {
  background-color: #0E2231;
  color: #F8F8F8;
  font-style: italic;
}

pre .diff .change {
  background-color: #4A410D;
  color: #F8F8F8;
}

pre .addition {
  background-color: #253B22;
  color: #F8F8F8;
}

pre .deletion {
  background-color: #420E09;
  color: #F8F8F8;
}

pre .coffeescript .javascript,
pre .javascript .xml,
pre .tex .formula,
pre .xml .javascript,
pre .xml .vbscript,
pre .xml .css,
pre .xml .cdata {
  opacity: 0.5;
}

9. Google Code

DEMO Google Code SyntaxHighlighter

CSS code:


/*
Google Code style (c) Aahan Krish
*/
pre code {
  display: block; padding: 0.5em;
  background: white; color: black;
}
pre .comment,
pre .template_comment,
pre .javadoc,
pre .comment * {
  color: #800;
}
pre .keyword,
pre .method,
pre .list .title,
pre .clojure .built_in,
pre .nginx .title,
pre .tag .title,
pre .setting .value,
pre .winutils,
pre .tex .command,
pre .http .title,
pre .request,
pre .status {
  color: #008;
}
pre .envvar,
pre .tex .special {
  color: #660;
}
pre .string,
pre .tag .value,
pre .cdata,
pre .filter .argument,
pre .attr_selector,
pre .apache .cbracket,
pre .date,
pre .regexp {
  color: #080;
}
pre .sub .identifier,
pre .pi,
pre .tag,
pre .tag .keyword,
pre .decorator,
pre .ini .title,
pre .shebang,
pre .prompt,
pre .hexcolor,
pre .rules .value,
pre .css .value .number,
pre .literal,
pre .symbol,
pre .ruby .symbol .string,
pre .number,
pre .css .function,
pre .clojure .attribute {
  color: #066;
}
pre .class .title,
pre .haskell .type,
pre .smalltalk .class,
pre .javadoctag,
pre .yardoctag,
pre .phpdoc,
pre .typename,
pre .tag .attribute,
pre .doctype,
pre .class .id,
pre .built_in,
pre .setting,
pre .params,
pre .variable,
pre .clojure .title {
  color: #606;
}
pre .css .tag,
pre .rules .property,
pre .pseudo,
pre .subst {
  color: #000;
}

pre .css .class, pre .css .id {
  color: #9B703F;
}
pre .value .important {
  color: #ff7700;
  font-weight: bold;
}
pre .rules .keyword {
  color: #C5AF75;
}
pre .annotation,
pre .apache .sqbracket,
pre .nginx .built_in {
  color: #9B859D;
}
pre .preprocessor,
pre .preprocessor * {
  color: #444;
}
pre .tex .formula {
  background-color: #EEE;
  font-style: italic;
}
pre .diff .header,
pre .chunk {
  color: #808080;
  font-weight: bold;
}
pre .diff .change {
  background-color: #BCCFF9;
}
pre .addition {
  background-color: #BAEEBA;
}
pre .deletion {
  background-color: #FFC8BD;
}
pre .comment .yardoctag {
  font-weight: bold;
}

10. GitHub

DEMO GitHub SyntaxHighlighter

CSS code:


/*
github.com style (c) Vasily Polovnyov
*/
pre code {
  display: block; padding: 0.5em;
  color: #333;
  background: #f8f8ff
}
pre .comment,
pre .template_comment,
pre .diff .header,
pre .javadoc {
  color: #998;
  font-style: italic
}
pre .keyword,
pre .css .rule .keyword,
pre .winutils,
pre .javascript .title,
pre .nginx .title,
pre .subst,
pre .request,
pre .status {
  color: #333;
  font-weight: bold
}
pre .number,
pre .hexcolor,
pre .ruby .constant {
  color: #099;
}
pre .string,
pre .tag .value,
pre .phpdoc,
pre .tex .formula {
  color: #d14
}
pre .title,
pre .id {
  color: #900;
  font-weight: bold
}
pre .javascript .title,
pre .lisp .title,
pre .clojure .title,
pre .subst {
  font-weight: normal
}

pre .class .title,
pre .haskell .type,
pre .vhdl .literal,
pre .tex .command {
  color: #458;
  font-weight: bold
}

pre .tag,
pre .tag .title,
pre .rules .property,
pre .django .tag .keyword {
  color: #000080;
  font-weight: normal
}

pre .attribute,
pre .variable,
pre .lisp .body {
  color: #008080
}
pre .regexp {
  color: #009926
}
pre .class {
  color: #458;
  font-weight: bold
}

pre .symbol,
pre .ruby .symbol .string,
pre .lisp .keyword,
pre .tex .special,
pre .prompt {
  color: #990073
}

pre .built_in,
pre .lisp .title,
pre .clojure .built_in {
  color: #0086b3
}
pre .preprocessor,
pre .pi,
pre .doctype,
pre .shebang,
pre .cdata {
  color: #999;
  font-weight: bold
}
pre .deletion {
  background: #fdd
}

pre .addition {
  background: #dfd
}

pre .diff .change {
  background: #0086b3
}
pre .chunk {
  color: #aaa
}

Selamat Mencoba!!

Dengan SyntaxHighlighter sumber kode yang ditampilkan di postingan Anda, tentu lebih memberikan kepercayaan dan kepuasan tersendiri bagi user atau pembaca setia Blog Sobat.

Salaam,

ProBlogiz

Home

Tutorial

SEO

Basic

Template

Entitas HTML Simbol Icon

ICON SYMBOLS / IKON SIMBOL

HTML Color Picker Code

HTML Encoding Decoding

Apa HTML Encoding Decoding?

Web Safe Color HTML Code

216 Web Safe Color HTML - Hexadecimal dan RGB

RGB dan Hexadecimal Web Safe Color Codes

10 Koleksi SyntaxHighlighter Keren di Blogger

Cara Pasang/Instal SyntaxHighlighter di Blog (Box Code)

10 Koleksi SyntaxHighlighter Keren di Blogger

1. Pojoaque

2. Solarized - Dark

3. School Book

4. Rainbow

5. Monokai

6. Tommorow Night Blue

7. Brown Papper

8. Sunburst

9. Google Code

10. GitHub

Google+ Followers

Like Me

artikel popular

kategori

artikel terbaru

Support

Usefull Tools

Pages