Solutions For You

logo
close
Blog ini akan Saya hapus soalnya banyak masalah di Webmaster. Maklum dulunya blog gado - gado, isinya copasan haha. Mungkin nanti muncul blog baru pengganti Blog Saeful13 dan tentunya pake TLD biar terlihat professional gitu haha..

Sebentar, ente tahu TLD gak ? Kalau gak tahu TLD itu Top Level Domain :) Masih belum ngerti juga ? Ane jelasin lagi ya, TLD merupakan akhiran pada suatu nama domain yang mengindikasikan pemilik tingkatan tertinggi Domain tersebut dan jenis domain tersebut. Kayak .com, .net dan kawan - kawannya :)

#JustKiddingBro
close
menu

Memasang Syntax Highlighter Pada Blog

Syntax Highlighter For Blogger - Berawal dari pertanyaan sobat +Yoga Pratama yang menanyakan bagaimana membuat Syntax Highlighter pada blog. Nah, sesuai janji saya kepada sobat +Yoga Pratama disini saya akan berbagi Cara Memasang Syntax Highlighter Pada Blog. Syntax Highlighter adalah  untuk membuat kode-kode berwarna-warni. Syntax Highlighter ini hasil modifikasi sendiri dan tutorialnya berasal dari +Kang Ismet.
Memasang Syntax Highlighter Pada Blog

Langkah Pemasangan

Perlu diperhatikan untuk memasang  Syntax Highlighter ini diperlukan jQuery, bila belum terpasang silakan pasang jQuery dibawah ini atau pasang jQuery terbaru diatas kode </head>.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
Kemudian pasang JavaScript ini diatas kode </head>.
<script src='http://procejct-saeful13.googlecode.com/svn/JS/SyntaxHighlighter.js' type='text/javascript'/>
Kemudian tambahkan kode CSS ini untuk memperindah tampilannya.
/*Syntax Highlighter*/
pre{padding:.8em 1em;margin:0.5em 0;background-color:#F7F7F9;border:1px solid #ddd;font-size:13px;color:#000;font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;line-height:1.4em;position:relative;white-space:pre-wrap;word-wrap:break-word;overflow:auto;max-height:200px}
code{font-family:Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,Monospace;font-size:13px;color:#d14}
#comments code{color:#e59304;}
pre code{padding:0!important;color:#839496;background:none!important;border:none!important;display:block}
pre .comment,pre .template_comment,pre .diff .header,pre .doctype,pre .pi,pre .lisp .string,pre .javadoc{color:#93a1a1;font-style:italic}
pre .keyword,pre .winutils,pre .method,pre .addition,pre .css .tag,pre .request,pre .status,pre .nginx .title{color:#F5821E}
pre .number,pre .command,pre .string,pre .tag .value,pre .rules .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor{color:#008800}
pre .title,pre .localvars,pre .chunk,pre .decorator,pre .built_in,pre .identifier,pre .vhdl .literal,pre .id,pre .css .function{color:#268bd2}
pre .attribute,pre .variable,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .type{color:#A2886F}
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,pre .css .pseudo{color:#000;font-weight:bold}
pre .deletion{color:#dc322f}
pre .tex .formula{background:#eee8d5}

Cara Penggunaan

Untuk memasukan kode pendek
<code>Simpan kode yang telah diparse disini</code>
Untuk memasukan kode panjang
<pre><code>Simpan kode yang telah diparse disini<code></pre>

Terkait

Artikel ini berhubungan dengan artikel saya sebelumnya, yaitu Menambahkan Kode, Gambar dan Blockquote Pada Komentar. Nah bagi sobat yg sudah menerapkan tutor sebelumnya silakan sobat singkirkan kode CSS ini dan ganti dengan CSS  diatas agar efek Syntax Highlighter ini juga muncul pada komentar.
/*Tag Pre*/
code,i[rel="code"]{margin:5px 0;font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;line-height:16px;color:#126AAF;background:#F7F7F9;border:1px solid #ddd;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;padding:1px 2px}
pre code,i[rel="pre"]{display:block;font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;line-height:16px;color:#126AAF;background:#F7F7F9;border:1px solid #ddd;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;padding:1px 2px;overflow:auto;max-height:200px}

Mudah bukan, semoga bermanfaat..
Previous
Posting Lama

59 Komentar

avatar

wah kalo sy pakenya apa adanya deh
ga usah dulu yg warna warni

BalasHapus
avatar

Hehe keren mas .... :) Ini bisa di pake di komentar juga kan mas??

BalasHapus
avatar

Tergantung sukanya gan. hehe :D

BalasHapus
avatar

Bisa mas karena pada cssnya sudah saya tambahkan classnya.
Masukan Kode Pendek
<i rel="code">Masukan kode yg diparse disini</i>
Masukan Kode Panjang
<i rel="pre">Masukan kode yg diparse disini</i>


Semoga berhasil mas :bd

BalasHapus
avatar

Sya liat mas pke JS item komentar dari kang ismet, jadi coba edit pada cssnya agar muncul pada komentar.
#comment-holder code,i[rel="code"]{margin:5px 0;font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;line-height:16px;color:#126AAF;background:#F7F7F9;border:1px solid #ddd;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;padding:1px 2px}
#comment-holder pre code,i[rel="pre"]{display:block;padding:0.5em;margin:5px 0;background:#F7F7F9;color:#000;overflow:auto;max-height:200px}
bla...bla...

dan singkirkan kode pre sebelumnya.

BalasHapus
avatar

keren nih... saya juga sudah pasang..

BalasHapus
avatar

memang keren banget mas eful :-d

BalasHapus
avatar

Sudah saya edit mas, tapi kok kodenya gak warna-warni ya mas? Mohon pencerahan mas ...

BalasHapus
avatar

Sya sudah beberapa kali ujicoba masih gk bisa juga mas :s @@, , tapi saya punya solusinya :yaya: . Sya mencoba memadukan JS sma jQuery yg saya share kemarin.
1. Ganti JS yang dahulu dg ini.
<script type='text/javascript'>
//<![CDATA[
//Code dg jQuery
$("#comment-holder").each(function () {
$('i[rel="pre"]', this).replaceWith(function () {
return $("<pre></pre>").append($("<code></code>").append($(this).contents()))
});
$('i[rel="code"]', this).contents().unwrap().wrap("<code/>")
});
//Item Komentar by Kang Ismet
function repText(id) {
var a = document.getElementById(id),
b = a.innerHTML,
b = b.replace(/<i rel="image">(.[^\>]*)<\/i>/ig, "<img class='cm-image' src='$1' alt='loading...' \/>");
b = b.replace(/\[img\](.[^\]]*)\[\/img\]/ig, "<img class='cm-image' src='$1' alt='loading...' \/>");
b = b.replace(/<i rel="youtube">http:\/\/www.youtube.com\/embed\/(.[^>]*)<\/i>/ig, "<iframe class='cm-youtube' src='http://www.youtube.com/embed/$1'><\/iframe>");
b = b.replace(/<i rel="youtube">(http:\/\/youtu.be|http:\/\/www.youtube.com\/watch\?v=)(.[^>]*)<\/i>/ig, "<iframe class='cm-youtube' src='http://www.youtube.com/embed/$2'><\/iframe>");
b = b.replace(/\[youtube\]http:\/\/www.youtube.com\/embed\/(.[^\]]*)\[\/youtube\]/ig, "<iframe class='cm-youtube' src='http://www.youtube.com/embed/$1'><\/iframe>");
b = b.replace(/\[youtube\](http:\/\/youtu.be|http:\/\/www.youtube.com\/watch\?v=)(.[^\]]*)\[\/youtube\]/ig, "<iframe class='cm-youtube' src='http://www.youtube.com/embed/$2'><\/iframe>");
document.getElementById(id).innerHTML = b;
b = b.replace(/<b rel="quote">(.*?)<\/b>/ig, "<blockquote>$1<\/blockquote>");
b = b.replace(/&amp;feature=[0-9a-zA-Z-_]*/ig, "");
b = b.replace(/\/s(640|1600)/g, "/s400");
} repText('comment-holder');
c = document.getElementById('comment-holder');
if (c) {
b = c.getElementsByTagName("p");
for (i = 0; i < b.length; i++) {
if (b.item(i).getAttribute('CLASS') == 'comment-content') {
ki_comm = ki_comm.replace(/\[blockquote\](.[^\]]*)\[\/blockquote\]/ig, "<blockquote>$1<\/blockquote>");
ki_comm = ki_comm.replace(/\[quote\](.[^\]]*)\[\/quote\]/ig, "<blockquote>$1<\/blockquote>");
b.item(i).innerHTML = ki_comm;
}
}
}
//]]>
</script>

2. Hapus kode CSS syntax sebelumnya dan ganti dg css diatas (pada postingan).'
Catatan :
Sya hanya menghilangkan JS untuk memasukan kode dan menggantinya dg jQuery dan fitur yg lainnya masih berjalan sempurna mas.
Untuk Memasukan kode hanya bisa dg tag ini.
Masukan Kode Pendek
<i rel="code">Masukan kode yg diparse disini</i>
Masukan Kode Panjang
<i rel="pre">Masukan kode yg diparse disini</i>



Ini hasilnya mas.
http://saeful-share.blogspot.com/2013/08/cuman-test-aja.html

Semoga berhasil. :D

BalasHapus
avatar

terima kasih mas, ini juga berkat hasil belajar dari para master. :D

BalasHapus
avatar

Untuk memasang Syntax Highlighter ini pada halaman post juga sama pemasangan seperti pada postingan diatas. :D

BalasHapus
avatar

Oke mas, langsung saya coba ... :D sekalian mau tanya nih mas seputar CSS :D kalau

margin:1px 2px 3px 4px;

Urutan yang benar kiri, kanan, atas bawahnya itu gimana mas? Misal 1px=atas 2px=bawah 3px=kiri 4px=kanan mohon di jelaskan mas karena saya masih bingung nih .. :D
karena saya biasanya menggunakan margin-top, bottom, left, right mas. Hehehe Maklum, masih latihan ..

BalasHapus
avatar

Margin: 1px=atas, 2px=kanan, 3px=bawah, 4px=kiri. Kalau mau penjelasan lebih lanjutnya di dte aja. :D
http://www.dte.web.id/2011/08/margin-dan-padding.html

BalasHapus
avatar

Jadi mas! :D Thanks ... tapi tinggal di post nya scrollnya dobel mas ...

BalasHapus
avatar

Eh, sudah jadi dink mas ... :D Ternyata CSSnya ada yang dobel ... Thanks banget kang ... :D

BalasHapus
avatar

Dobel gimana mas ? Sya lihat normal kok. :D

BalasHapus
avatar

Mas, tanya lagi seputar template saya mas. Saya sudah menggunakan cara yang mas berikan tadi, dengan menambahkan margin kanan, tapi tidak ada pengaruh mas ... kira-kira apanya ya mas? Saya bingung .. Padahal kalau tidak menggunakan Syntax Highlighter tampilannya normal dan di post-post lain juga normal. Tapi di post yang menggunakan Syntax Highlighter Konten artikelnya jadi mepet sama Sidebar. Tapi ada 1 post saya yang menggunakan Syntax hHilighter tampilannya normal... Cek disini artikelnya mas http://www.nazardark.com/2013/07/memasang-iklan-banner-random-dalam-satu.html. Bandingkan dengan artikel yang tadi mas ..

Kira-kira apa yang salah ya mas? Mohon bantuannya .. :)
Maaf kalau komen gak nyambung ... :D

BalasHapus
avatar

ini cocok dengan blog yang pos tentang kode2 ya mas...

BalasHapus
avatar

Eh, sudah berhasil mas ... :)

BalasHapus
avatar

wah kodenya lumayan banyak juga yah.
Salam kenal. ^_^

BalasHapus
avatar

mudah dipahami sob tutornya. ^_^

BalasHapus
avatar

Lebih tepatnya cocok untuk blog yang share tutorial seputar blog. :D

BalasHapus
avatar

Keren, tapi saya lihat sedikit berat ya.. mungkin mengunakan JS atau koneksi saya yang lemot :-a

BalasHapus
avatar

Iya mas, padahal itu sudha saya compress loh. :D

BalasHapus
avatar

Mungkin blog ini yg lola mas, soalnya templatenya masih belum bener. :D

BalasHapus
avatar

gan coba liat blog saya kok saya pasang small-button di blog saya gak muncul2 ya?
minta solusi nya gan

BalasHapus
avatar

small button yg mana mas ? Pasangnya dimana ?

BalasHapus
avatar

sudah saya terapkan mas saeful.
salam kenal
celco-blog.blogspot.com

BalasHapus
avatar

mungkin yang dimaksud belum muncul efeknya..
.small-button:active {...}

BalasHapus
avatar

saya juga mau coba pasang dulu nih gan... TY gan

BalasHapus
avatar

sy pake yg biasa aja.., makasih *smile

BalasHapus
avatar

terima kasih gan atas dukungan nya selama ini,blog saya udah 1juta visitor :D
http://bmaster23.blogspot.com/2013/08/congratulationsbmaster23-mencapai-1.html

BalasHapus
avatar

sayangnya saya sudah pasang dari dulu mas :D
btw ,, templatenya mas keren banget ,, simple ^_^

BalasHapus
avatar

Siiip, sudah pake syntax punyanya prism..
Tapi ini juga ga kalah menarik,
Oiya, salah kenal juga ya mas, blognya kerene (h)

BalasHapus
avatar

Mungkin bener juga tuH kata Mas Jin. :D

BalasHapus
avatar

sip :-d :-d .

Salam kenal juga. :D

BalasHapus
avatar

Selamat gan, kayaknya saya masih jauh untuk susul jumlah visitor blog agan. hahaha :-bd

BalasHapus
avatar

:-bd , mungkin saya telat ya gan ? Maklum blogger pemula yang pengen belajar dunia coding. hahaha :D

BalasHapus
avatar

Salam kenal juga mas dan terima kasih.

Template ini juga bukan 100% karya saya, ini merupakan inspirasi dari para master blogger seperti Kang Ismet. :D

BalasHapus
avatar

Saya terkesan ma blognya Mas,
ngmong2, bagaimana tuh Mas, cara bikin loading page bisa kya gitu, mksudnya sperti yg ad di blog ini, bagus Mas,
Boleh minta ajarin ga yaahh?? :D

BalasHapus
avatar

CSS
/*Loader Page*/
#page-loader { position:fixed !important; position:absolute; top:0; right:0; bottom:0; left:0; z-index:9999; background:#000 url(' data:image/gif;base64,R0lGODlhKwALAPEAAP///0tKSqampktKSiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAKwALAAACMoSOCMuW2diD88UKG95W88uF4DaGWFmhZid93pq+pwxnLUnXh8ou+sSz+T64oCAyTBUAACH5BAkKAAAALAAAAAArAAsAAAI9xI4IyyAPYWOxmoTHrHzzmGHe94xkmJifyqFKQ0pwLLgHa82xrekkDrIBZRQab1jyfY7KTtPimixiUsevAAAh+QQJCgAAACwAAAAAKwALAAACPYSOCMswD2FjqZpqW9xv4g8KE7d54XmMpNSgqLoOpgvC60xjNonnyc7p+VKamKw1zDCMR8rp8pksYlKorgAAIfkECQoAAAAsAAAAACsACwAAAkCEjgjLltnYmJS6Bxt+sfq5ZUyoNJ9HHlEqdCfFrqn7DrE2m7Wdj/2y45FkQ13t5itKdshFExC8YCLOEBX6AhQAADsAAAAAAAAAAAA=' ) no-repeat 50% 50%; color:white; padding:1em 1.2em; display:none; text-shadow:none }

jQuery
<script type='text/javascript'>
//<![CDATA[
// Efek page loader
$(document.body).append('<div id="page-loader"> </div>');
// Saat halaman aktif terpicu untuk berpindah/keluar menuju halaman lain...
$(window).on("beforeunload", function() {
$('#page-loader').fadeIn(1000).delay(6000).fadeOut(1000);});
//]]>
</script>

BalasHapus
avatar

Mas Saeful, cara membikin kotak pada kode pendek gimana ?

https://mail-attachment.googleusercontent.com/attachment/?ui=2&ik=260033c700&view=att&th=14117c9688f619d3&attid=0.1&disp=inline&realattid=f_hljiqgwh0&safe=1&zw&saduie=AG9B_P8pKENwfAqUD2l6Pz7Eefkl&sadet=1379083614021&sads=EZGYOfdqwXdE6jYRN5gHikaao-s

BalasHapus
Komentar ini telah dihapus oleh pengarang. - Hapus
avatar

Makasih Mas Saeful :) saya sudah berhasil menerapkannya :D

BalasHapus
avatar

itu pke jQuery seperti ini.
<script type='text/javascript'>
//<![CDATA[
$("#comment_block").each(function () {
$('i[rel="pre"]', this).replaceWith(function () {
return $("<pre></pre>").append($("<code></code>").append($(this).contents()))
});
$('i[rel="code"]', this).contents().unwrap().wrap("<code/>")
});
//]]>
</script>

terus tambahkan class pada css nya seperti diatas..

BalasHapus
avatar

Kalau mau bikin agar kode terblok otomatis setelah diklik gimana?

BalasHapus
avatar

pasang kode ini $(function(){$('pre').dblclick(function(){var refNode=$(this)[0];if($.browser.msie){var range=document.body.createTextRange();range.moveToElementText(refNode);range.select()}else if($.browser.mozilla||$.browser.opera){var selection=window.getSelection();var range=document.createRange();range.selectNodeContents(refNode);selection.removeAllRanges();selection.addRange(range)}else if($.browser.safari){var selection=window.getSelection();selection.setBaseAndExtent(refNode,0,refNode,1)}})});
Bila menggunakan blockquote sebagai pembungkus kode, ganti pre dengan blockquote untuk mengeksekusinya

BalasHapus
Komentar ini telah dihapus oleh pengarang. - Hapus
avatar

thanks gan infornya sangat membantu...
cuman saya agak kebingungan ketika memasang syntax python pada komentar...
karena dia harus memperhatikan tab'nya...
kunjungi balik y gan...
http://python113.blogspot.com/

BalasHapus
avatar

izin memasang mas.... hehehe

BalasHapus

Catatan:
• Dilarang menulis link aktif!
• Dilarang ngiklan di kolom komentar!
• Untuk menyisipkan kode pendek, gunakan tag <i rel="code"> ... KODE ... </i>
• Untuk menyisipkan kode panjang, gunakan tag <i rel="pre"> ... KODE ... </i>
• Untuk menyisipkan catatan, gunakan tag <b rel="quote">.. TEKS ... </b>
• Untuk menyisipkan gambar, gunakan tag <i rel="image"> ... URL GAMBAR ... </i>

Sebelum menyisipkan kode silahkan gunakan Tool Konversi Kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar

Konversi Kode OOT

About | Contact | Forum | Sitemap | Privacy
© Copyright 2013 Saeful13 | Asuransi Kesehatan Terbaik Indonesia - All Rights Reserved