TAG PRE TOLTIP AUTOSELECT

Tujuan dari pemasangan syntax higlighter pada halaman blog 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 pengkodean lainnya) yang ingin ditampilkan oleh publisher yang umumnya di dalam posting blognya membahas tentang tutorial atau pembelajaran yang mengandung pengcodean.

untuk anda yang ingin memasang tag pre di blog kali ini saya ingin membagikan cara bagaimana menerapkannya. silahkan lihat terlebih dahulu bagaimana contoh tag pre yang akan anda pasang ini di demonya.

• DEMO

Cara pemasangannya silahkan ikuti tutorial dibawah ini:

1. Masuk Blogger
2. Pilih Tab Template dan Edit HTML
3. Letakkan kode CSS dibawah ini diatas kode ]]></b:skin> atau </style>

pre,i[rel="pre"] {padding:.8em 1em;margin:0;background-color:#2f3741;border-left:4px solid #40627E;font-size:11px;
color:#839496;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;
line-height:1.4em;position:relative;white-space: pre;word-wrap: normal;white-space:pre;overflow:auto}.pre-tooltip {display:none;position:absolute;border:1px solid #333;background-color:#161616;border-radius:5px;padding:10px;color:#fff;font-size:12px Arial;}
pre code {padding:0 !important;color: #a3a49a;background: none !important;border:none !important;display:block;}
pre .line-number {float:left;margin:0 1em 0 -1em;color:#61686d;background-color:#39424e;text-align:right;min-width:2.5em;padding-right:4px;}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 .rules .value,
pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor {color: #7195a3;}pre .title,pre .localvars,pre .chunk,pre .decorator,pre .built_in,pre .identifier,pre .vhdl .literal,pre .id,pre .css .function {color: #569dcf;}pre .attribute,
pre .variable,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .type {color: #aa985a;}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: #509a55;}
pre .deletion {color: #dc322f;}pre .tex .formula {background: #073642;}

4. Cari Kode </head> dan pastekan kode dibawah ini tepat di atasnya

<script src='https://googledrive.com/host/0B-GXzRKoPbNnMW01UElwUUNCR2s' type='text/javascript'/>

5. silahkan tambahkan kode di bawah ini diatas kode </body>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$('.db-pre-Tooltip').hover(function(){var title = $(this).attr('title');$(this).data('tipText', title).removeAttr('title');$('<p class="pre-tooltip"></p>').text(title).appendTo('body').fadeIn('slow');}, function() {$(this).attr('title', $(this).data('tipText'));$('.pre-tooltip').remove();}).mousemove(function(e) {var mousex = e.pageX + 20;var mousey = e.pageY + 10;$('.pre-tooltip')
.css({ top: mousey, left: mousex })});});
//]]>
</script>

6. Simpan Template dan lihat hasinya dengan membuat posting.

Cara penggunaan Syntax Highlighter di posting cukup pasang kode ini di HTML editor saat membuat posting.

<pre class="db-pre-Tooltip" title='klik ganda untuk seleksi otomatis kode'><code>...-kode HTML, CSS, JavaSript di Sini-..</code></pre>

Atau simpan sebagai template posting di pengaturan.

Sekian semoga berguna dan bermanfaat...